Цель работы: Научиться создавать Web-страницу на основе различных стилей.
Задачи работы:
- Овладеть методикой создания HTML-стиля в программе с Macromedia Dreamweaver;
- Получить навыки работы с диалоговым окном Define HTML Style.
Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа Macromedia Dreamweaver; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab18.html на диске
Технология работы:
- Запустить программу Macromedia Dreamweaver.
- Загрузите Создать новую Web-страницу, для этого выбрать пункт меню File - New
Теоретический материал:
Давайте создадим HTML-стиль под названием Имя, представляющий имя автора сайта. Для этого выделим в окне документа текст имени и нажмем в окне HTML-стилей кнопку New Style 
Рис. 18.1 Диалоговое окно Define HTML Style
В поле ввода Name вводится имя стиля. Введем сюда слово имя. С помощью группы переключателей Apply To задается тип HTML-стиля: Selection задает стиль символов, a Paragraph — стиль абзаца. Сейчас включен переключатель Selection, оставим его включенным. Группа переключателей When Applying позволяет определить, что произойдет, если этот стиль будет применен к фрагменту, уже отформатированному средствами HTML: Add to Existing Style добавляет новое форматирование к существующему, Clear Existing Style удаляет старое форматирование перед добавлением нового. Оставим переключатель Clear Existing Style включенным. Группа элементов управления Font Attributes задает параметры шрифта. Раскрывающийся список Font задает наименование шрифта, Size — размер, селектор цвета Color позволяет выбрать цвет текста, а кнопки-выключатели В и I делают шрифт жирным и курсивным соответственно. Также доступна кнопка Other, при нажатии которой появляется меню, из которого вы можете выбрать дополнительные виды HTML-форматирования текста (в основном, это теги логического форматирования). Закончив, нажимаем кнопку ОК, чтобы сохранить вновь созданный стиль. Кнопка Cancel позволит отказаться от этого, а кнопка Clear сбрасывает все настройки стиля в состояние по умолчанию. Мы создали первый HTML-стиль. После этого в списке стилей появится новая строка "Имя". Левее имени стиля мы увидим букву а, обозначающую стиль символов.
Создадим еще один стиль — стиль абзаца, а именно абзаца со сведениями об авторских правах. Для этого уберем всякое выделение с текста в окне документа и снова нажмем кнопку New Style панели стилей. В появившемся диалоговом окне Define HTML Style в поле Name введем "Права", включим переключатель Paragraph, включим кнопку-переключатель / и отключим В, а в раскрывающемся списке Size выберем пункт —1.
В окне Define HTML Style стала доступна группа элементов управления Paragraph Attributes, задающая форматирование всего абзаца. Раскрывающийся список Format задает формат абзаца (Paragraph, Heading I и т. д.), а три кнопки-переключателя Alignment — выравнивание. Установив, нажмем кнопку ОК, и в списке стилей появится новое имя, помеченное знаком абзаца. Выберем последний абзац нашего текста и щелкнем новый стиль. Формат сведений об авторских правах тотчас изменится: размер шрифта станет меньше.
Если нужно изменить уже созданный стиль, щелкните по нему правой кнопкой мыши и в появившемся контекстном меню выберите пункт Edit. Если флажок Auto Apply отключен, вы также можете выбрать необходимый стиль и выбрать пункт Edit в дополнительном меню панели или просто дважды щелкнуть по нужному стилю. После этого на экране появится уже знакомое вам диалоговое окно Define HTML Style, в котором вы сможете изменить все, что хотите.
Имя удаления ненужного стиля также щелкните по нему правой кнопкой мыши и выберите в контекстном меню пункт Delete. Dreamweaver предупредит вас в особом окне, что стили удаляются безвозвратно; нажмите кнопку ОК, если вы удаляете этот стиля, и кнопку Cancel, если передумали его удалять. Если флажок Auto Apply отключен, вы также можете выбрать нужный (точнее, ненужный) стиль и выбрать пункт Delete в дополнительном меню панели или щелкнуть кнопку Delete Style Пункт Duplicate контекстного меню списка стилей и дополнительного меню панели позволит вам создать новый стиль третьим возможным способом: скопировав и слегка изменив существующий стиль. Если вы укажете какой-либо стиль в списке и выберите пункт Duplicate, на экране появится диалоговое окно Define HTML Style, в котором будут подставлены параметры выбранного стиля. Задайте имя для нового стиля, измените нужные параметры и не забудьте нажать кнопку ОК.
3. Дайте команду Text > Style (Текст > Стиль) и выберите имя искомого стиля из выпадающего меню. Наберите текстовый массив. Назначьте каждому фрагменту текста стилевое оформление по образцу:
4. Сохранить файл как lab18.txt в блокноте и как lab18.html для просмотра в браузере.