Создание web-документов в редакторе webeditor

Выполняя предыдущие задания, вы познакомились с возможностями языка HTML для создания Web-документов. Хотя освоение этого языка не очень трудное дело, однако, создание качественных и разнообразных Web-страниц – кропотливая работа, требующая значительных навыков и знаний. Работу по созданию и редактированию Web-страниц можно автоматизировать, используя возможности специализированного редактора Web-страниц– WINsoft WebEditor.

В результате работы с программой WebEditor получается документ HTML, построенный по тем же правилам, что и создаваемый вручную в текстовом редакторе.

Редактор WebEditor обладает рядом очень важных и удобных функций:

- Создание и редактирование Web-документов таких форматов, как HTML, JavaScript, VBScript, CSS, PHP, ASP, SQL, XML и Perl.

- Автоматическое исправление наиболее частых ошибок, происходящих во время набора кода.

- Мощная система поиска и замены текста.

- Просмотр полученных Web-документов как через встроенный браузер, так и через внешние браузеры, такие как Microsoft Internet Explorer, Opera, Mozilla Firefox и Netscape.

- Мастера, позволяющие ускорить создание популярных элементов Web-страниц: ссылок, изображений, таблиц, списков, линий, цветов.

- Удобный и настраиваемый отладчик HTML-документов, позволяющий выявить 99,9% ошибок в коде HTML.

- Подсветка синтаксиса популярных языков Web-программирования.

Создание и редактирование документа

Окно программы WebEditor (рис. 3.1.) представляет собой комбинацию окна редактора и окна браузера. Редактор WebEditor позволяет просмотреть Web-страницу в таком виде, в каком ее представит браузер. Для этого надо щелкнуть на кнопке Просмотр. Нажатие кнопки Редактор открывает окно для создания и редактирования документа HTML.

На панелях инструментов находятся кнопки, соответствующие часто используемым функциям редактора. Это - простейшие операции с текстом, запуск мастеров, вставка различных элементов Web-страницы, установка нужной подсветки синтаксиса. Каждую из панелей можно скрыть или отобразить с помощью меню Вид¦Панели инструментов.

Рис. 4.1. Окно программы WebEditor

В качестве основного средства форматирования используется панель инструментов Текст, которая содержит:

· кнопку Шрифт, щелчком по ней открывается окно диалога Шрифт, в котором можно выбрать гарнитуру, начертание, размер шрифта и цвет символов;

· кнопки выбора начертания шрифтов;

· кнопки выбора выравнивания текста (с помощью атрибута ALIGN= в теге абзаца <P>);

· кнопки форматирования фрагментов текста;

· кнопку предварительного форматирования текста;

· кнопки выбора заголовков.

Дополнительные элементы форматирования, не вынесенные на панель инструмен­тов, задаются в меню Формат.

На панели инструментов Стандартная находятся кнопки, предназначенные для работы с файлами и текстом, а также для настройки WebEditor.

Панель инструментов "Редактор" предназначена для быстрой вставки дополнительных элементов оформления в Web-страницу с помощью мастеров, а также для вызова дополнительных сервисов WINsoft WebEditor.

Панель Отладчик предназначена для отладки HTML-документов и настройки отладчика. Панель состоит из следующих кнопок:

Запустить отладчик - запуск отладчика для проверки HTML-документов.

Очистить - очистка списка ошибок и предупреждений.

Опции отладчика - настройка работы отладчика.

Вставка элементов в Web-страницу

Вставка дополнительных элементов оформления в Web-страницу осуществляется с помощью мастеров.

Мастер цветов

Мастер цветов позволяет вставить код цвета для использования в атрибутах COLOR, BGCOLOR и им подобных. Для этого выберите команду меню Формат¦Мастер цветов или щёлкните на кнопке Мастер цветов на панели инструментов Редактор. В открывшемся окне Мастер цветов щелчком мыши выберите в палитре нужный цвет или задайте числа в пределах от 0 до 255 в полях Красный, Зелёный и Синий и нажмите кнопку Вставить HEX-код в редактор.

Мастер линий

С помощью мастера линий можно создавать специальные разделители, позволяющие разделить Web-страницу на несколько частей. Для этого выберите команду меню Формат¦Мастер линий или щёлкните на кнопке Мастер линий на панели инструментов Редактор. В открывшемся окне Мастер линий задайте следующие параметры линии: ширину, выравнивание, высоту, единицы измерения ширины (%), наличие тени, цвет линии и щёлкните на кнопке ОК.

Мастер списков

Для создания списка выберите команду меню Формат¦Мастер списков или щёлкните на кнопке Мастер списков на панели Редактор. В открывшемся окне Мастер списков установите переключатель в положение Маркированный список или Нумерованный список. Для маркированного списка на вкладке Маркеры выберите вид маркера. Для нумерованного списка на вкладке Цифры в раскрывающемся списке Цифры укажите способ нумерации и задайте начальный пункт списка. В поле Пункты списка введите список, разделяя клавишей ENTER отдельные пункты списка. Закончите создание списка нажатием кнопки OK.

Мастер гиперссылок

Для создания гиперссылки выделите фрагмент текста, который будет исполь­зоваться как ссылка, и выберите команду меню Вставка¦Мастер гиперссылок. В открывшемся окне Мастер гиперссылок для создания ссылки введите следующие параметры: Вид гиперссылки и Адрес гиперссылки. Поле Текст автоматическизаполняется выделенным фрагментом текста, который используется как ссылка. Если фрагмент текста не был предварительно выделен, то поле Текст заполняется вручную.

Можно также использовать следующие атрибуты для ссылки: Имя - метка гиперссылки, Всплывающая подсказка, Текст в строке состояния браузера.

Мастер изображений

Мастер изображений предназначен для добавления различных рисунков и фотографий на Web-страницу.

Для вставки изображения на Web-страницу выберите команду меню Формат¦Мастер изображений или щёлкните на кнопке Мастер изображений на панели инструментов Редактор.

В открывшемся окне Мастер изображений щёлкните на кнопке Обзор и в окне диалога Открыть выберите нужное изображение. Задайте следующие параметры изображения: Альтернативный текст; Ссылку, если графическое изображение будет использовано в качестве гиперссылки; Размеры изображения; Позицию изображения на Web-странице; Рамку для изображения. Если нужно изображение пропорционально уменьшить, в поле Проценты реального размера введите, сколько процентов должно составлять будущее изображение от исходного и нажмите кнопку Применить.

Для добавления изображения на Web-страницу нажмите нижнюю кнопку Применить.

Мастер таблиц

Мастер таблиц предназначен для создания разнообразных таблиц с различным оформлением. Для этого выберите команду меню Формат¦Мастер таблиц или щёлкните на кнопке Мастер таблиц на панели инструментов Редактор.

Создание таблицы выполняется за 4 шага:

1. Введите основные параметры таблицы: количество столбцов и строк, ширину и высоту таблицы, выравнивание таблицы.

2. Введите данные в ячейки таблицы.

3. Введите параметры оформления таблицы: цвет рамки и фона таблицы, толщину рамки, расстояние между рамками, расстояние между рамкой и текстом.

4. Введите название таблицы. Щёлкните на кнопке Готово.