Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 3. Использование программных средств для создание web – сайтов.

 
  Оглавление
§ 15. Обзор программных средств для создание web – сайтов.
§ 16. Основы работы в программе Kompozer.
§ 17. Создание страницы в веб-редакторе Kompozer.
§ 18. Индивидуальный проект.
Литература.

 

 

§ 16. Основы работы в программе Kompozer.

 

Визуальный HTML-редактор KompoZer

KompoZer KompoZer — бесплатный WYSIWYG-редактор для создания веб-сайтов. Визуальная вёрстка сайта практически не требует знания тегов HTML и поэтому особенно удобна для начинающих. Она позволяет свободно вставлять текст, картинки, изменять их размер, быстро добавлять таблицы, разнообразные формы и другие элементы. В редакторе также имеется инструмент для редактирования каскадных таблиц стилей (CSS) и встроенные шаблоны веб-страниц. С помощью этой программы можно достаточно легко и быстро создавать полноценные веб-сайты и размещать их в Интернете. KompoZer может составить достойную конкуренцию таким известным решениям, как Dreamweaver или FrontPage (SharePoint Designer).

WYSIWYG является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получаешь» — свойство прикладных программ-редакторов отображать редактируемое содержание максимально близким виду конечной продукции, например, печатным документам, веб-страницам, слайд-презентациям и т. п.

Программа поддерживает работу в Windows 95, 98, Me, NT 4.0, 2000, Server 2003, XP, Vista. Есть версии для Mac OS X и Linux. Возможно использование редактора без инсталляции. KompoZer достаточно просто русифицируется и имеет подробную справку на русском языке.

HTML-редактор KompoZer

HTML-редактор KompoZer в объединённом режиме редактирования

Возможности программы

  • Визуальный (WYSIWYG) и текстовый (HTML) режимы редактирования веб-страниц.
  • Выбор языка разметки (HTML 4, XHTML 1, Transitional, Strict).
  • Выбор кодировки страницы (UTF-8, Windows-1251 и другие).
  • Экспорт веб-страницы в текстовый формат.
  • Сохранение с изменением кодировки.
  • Предварительный просмотр.
  • Одновременное редактирование нескольких документов с помощью вкладок.
  • Поддержка форм, таблиц и шаблонов.
  • Встроенный редактор каскадных таблиц стилей (CSS).
  • Встроенная консоль JavaScript.
  • Проверка орфографии, в том числе и русской (при установке соответствующих словарей).
  • Возможность проверки кода с помощью валидатора W3C.
  • Встроенный FTP-клиент для публикации сайта на хостинге в сети Интернет.

Рассмотрим области рабочего окна KompoZer по отдельности. Начнем с панели инструментов.

KompoZer - панель управления

Панель инструментов предоставляет быстрый (в один щелчок мыши) доступ к большинству инструментов, которые могут понадобиться при создании HTML-страницы. Разберем назначение иконок на панели, слева направо. Первые три значка не нуждаются в описании, так как их название говорит само за себя. Кстати, если вы вдруг забыли или затрудняетесь в выборе значка, можно поступить очень просто. При наведении курсора мыши на любую из иконок, расположенной в панели, появляется всплывающая подсказка, в которой представлено краткое описание - для чего предназначена иконка. Более подробное описание работы большинства из этих иконок будет рассмотрено в следующих статьях. Здесь же познакомимся с ними вкратце.

 

В самом правом углу панели инструментов находится логотип редактора KompoZer. При наведении курсора мыши на этот значок появится всплывающая подсказка с надписью "Это KompoZer" (This is KompoZer). Никаких других действий этот значок не выполняет.

Инструменты форматирования текста

Ниже панели инструментов расположены еще две "панели", предназначенные для форматирования вводимого в HTML-документ текста. Выглядят они примерно так, как изображено на рисунке:

KompoZer - панели форматирования текста 

Менеджер сайтов (Site Manager)

KompoZer - менеджер сайтов

Одной из полезных возможностей редактора KompoZer является его возможность управления web-сайтами. Как правило, когда создается или редактируется Интернет-сайт, необходимо работать со множеством файлов, которые в целом составляют весь проект. Для этого создается локальная копия сайта на жестком диске компьютера, которая представляет из себя зеркальное отображение редактируемого web-сайта. С помощью менеджера сайтов в KompoZer можно управлять этой копией. В частности, через менеджер можно загружать на хостинг созданные или отредактированные страницы централизованно, что очень удобно.

Основное рабочее окно KompoZer

KompoZer - вкладки основного окна

Самым большим элементом интерфейса в KompoZer является рабочая область - окно, в котором вводится информация (текст, картинки) и организуются HTML-элементы в том порядке следования, который необходим. Представьте для себя эту область как чистый холст для художника. Или как пустой лист бумаги в текстовом процессоре. Точно также, как печатается письмо или курсовая работа в таком процессоре, также вводится различная информация в создаваемую web-страницу в данной области.

В левом нижнем углу рабочей области находятся три очень полезных ярлычка, которые помогают при создании HTML-кода. Первый ярлычок "Дизайн" (Design) активирован по умолчанию. В этом режиме web-страница создается в стиле WYSIWYG. То есть, HTML-код не отображается, а страница сразу предстает в том виде, в каком будет опубликована в Интернете. Этот режим очень похож на то, как создаются документы в том же MS Word или LibreOffice. Ярлычок "Исходный код" (Source) отображает создаваемую или редактируемую web-страницу в исходном HTML-коде. Это режим для опытных программистов, которые хорошо знакомы с большинством HTML-тегов. С помощью этого режима можно редактировать HTML-документ и добавлять в него элементы, которые не представлены в графическом интерфейсе редактора KompoZer. Третий ярлычок "Разделение" (Split), будучи активирован, разделяет рабочую область редактора на две горизонтальные части. В верхней части HTML-документ представлен и может быть редактирован в режиме WYSIWYG, в нижней части отображается и также может быть редактирован HTML-код данного документа.

В правом нижнем углу рабочей области редактора KompoZer находится раскрывающийся список с тремя пунктами. С помощью этого списка можно выбрать, как будет отображаться сама рабочая область в редакторе. По умолчанию активирован режим "Нормальный" (Normal). Можно выбрать режим "Предпросмотр" (Preview). Мною не было замечено разницы между режимами "Нормальный" и "Предпросмотр". Третий режим "HTML теги" (HTML Tags) отображает в стиле WYSIWYG HTML-теги для каждого элемента web-страницы, рядом с каждым из них. То есть, визуально виден каждый элемент страницы в режиме WYSIWYG, но рядом с ним отображается и HTML-тег, с помощью которого создан данный элемент. Сказать честно, я никогда не пользуюсь этим списком-переключателем отображения. При создании своих web-страниц я переключаюсь только между режимами "Дизайн" (Design) и "Исходный код" (Source)с помощью соответствующих ярлычков.

Строка состояния (Status Bar)

KompoZer - строка состояния

В самом низу основного окна редактора KompoZer располагается строка состояния. Она является полезным инструментов web-разработчика, так как показывает HTML-теги, образующие выделенный элемент страницы, в строгом соответствии с их вложенностью одного в другой. Щелчок мыши на любом из отображенных в этой строке тегов автоматически подсвечивает в рабочей области элемент страницы, созданный им.

 

 


© Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год.  При использовании материалов обязательна ссылка на владельца