Лабораторная работа

Создание html-документов в среде Macromedia Dreamweaver

Цель работы: Научиться разрабатывать Web - сайты в среде Macromedia Dreamweaver, форматировать текст, вставлять графику, анимации и ссылки.

Задание

1. Создайте в своей рабочей папке новую папку с именем Мой сайт. Скопируйте в эту папку файлы картинок, находящиеся в папке с файлом данной лабораторной работы. Файлы картинок в дальнейшем вы будете использовать при создании Web-страниц.

2. Запустите программу Macromedia Dreamweaver8.

3. В открывшемся окне программы Macromedia Dreamweaver8 в области Создать новый, выберите пункт HTML.

4. Откроется окно нового Web-документа (закладка без_названия-1) в режиме Дизайн. В поле Заголовок наберите текст Главная страница. Для перехода в другие режимы просмотра документа выбирайте команды меню Вид/Код (Дизайн или Код и дизайн). В режиме Кода, вы увидите HTML-код создаваемой Web-страницы.

5. Создайте логотип фирмы, для этого:

   1. Вставьте из папки Мой сайт рисунок vetton_ru_1281.jpg, выбрав команду меню Вставить/Изображение. В открывшемся окне в списке Папка найдите и откройте папку с рисунками, выделите имя нужного файла и нажмите кнопку ОК. Вставленную на web-страницу картинку уменьшите с помощью квадратного маркера в правом нижнем углу картинки, появляющегося после щелчка по изображению. Уменьшенную картинку выделите (щелчком мыши по ней) и поместите в центре страницы, выбрав Текст/Выровнять/Центр.

   2. Над картинкой вставьте текст АвтоМаркет. Для этого сместите картинку на одну строку вниз щёлкнув, мышью перед картинкой и нажав клавишу Enter. В появившейся пустой строке над картинкой наберите текст.

   3. Набранный текст отформатируйте:

- шрифтом Georgia,

- начертанием полужирный курсив,

- размером 26 pixels,

- цветом синим #3333FF,

- выравниванием текста по центру.

Для этого в нижнем левом углу окна редактора найдите ссылку The ‘%s’ extension has successfully been removed и щёлкните по ней, в результате внизу экрана откроется панель с инструментами, позволяющими форматировать выделенный текст (соответствующая панель в данной области редактора может быть уже открыта у вас по умолчанию).

6. Сохраните эту web-страницу с именем Index.html в папке Мой сайт, находящейся в вашей рабочей папке (выбрав Файл/Сохранить или выберите Вид/Панели инструментов/Standard, после чего в левой верхней части окна документа под закладкой с именем Index.html появится стандартная панель инструментов с кнопками, одну из которых под называнием Сохранить все можно будет периодически использовать для сохранения всех изменений на вашей web-странице).

7. На этой же web-странице под картинкой по центру создайте таблицу шириной 700 пикселов и состоящую из 1 столбца и 3 строк. Для этого выберите Вставить/Таблица и в открывшемся окне в поле Rows (Строки) введите 3, в поле Columns (Столбцы) – 1, в поле Table width – 700 pixels, в области Header щёлкните мышью по образцу Top (чтобы выровнять таблицу по центру документа) и нажмите кнопку ОК.

   1. В первой ячейке таблицы создайте бегущую строку с текстом Приглашаем посетить виртуальный АвтоМаркет. Так как в приложении Macromedia Dreamweaver нет необходимых дизайнерских инструментов для создания бегущей строки, то вам придётся в режиме Код написать на языке HTML соответствующий программный код, который создаст бегущую строку с необходимым текстом. Для этого, находясь в режиме Дизайн, щёлкните мышью в первой строке созданной таблицы и выберите команду меню Вид/Код и дизайн. В окне рабочей области откроется область HTML-кода вашей страницы, а под ней дизайнерская область страницы. В том месте HTML-кода, где будет находиться текстовый курсор, наберите следующий текст программного кода:

<marquee behavior="scroll" direction="left">

Приглашаем посетить виртуальный АвтоМаркет !!!

</marquee>

Сохраните вставленный код. Затем вернитесь в режим Дизайн, выделите текст бегущей строки в первой строке таблицы используя внизу экрана панель с инструментами, позволяющими форматировать выделенный текст и саму таблицу, выберите:

для текста: шрифт – Times New Roman, размер – 24 pixels, начертание – полужирное, цвет – синий #0000CC (открыть палитру цветов щелчком по квадратику со стрелкой в правом нижнем углу),;

для таблицы: цвет фона ячейки – светло-розовый #FFCCCC (открыть палитру цветов щелчком по квадратику со стрелкой в правом нижнем углу, рядом с которым находится надпись Bg).

1. Во второй ячейке таблицы напишите текст: Чтобы разместить у нас свое объявление о продаже автомобиля заполните анкету. Задайте для этой ячейки цвет фона – песочный #FFCC33. Для текста: шрифт – Arial, размер – 16 pixels, начертание – полужирное, цвет шрифта – красный #CC0000.

2. В третьей ячейке таблицы напишите текст: Перейти к анкете. Задайте для этой ячейки цвет фона – розовый #FF9999. Для текста: шрифт – Georgia, размер – 16 pixels, начертание – полужирное, выравнивание – по центру, цвет шрифта – синий #0000FF.

3. Щелчком мыши выделите только внешнюю границу таблицы (выделится сплошной чёрной рамкой) и задайте для рамки: цвет фона – малиновый #FF0066, толщину (в поле Рамка) – 5.

1. Под таблицей вставьте горизонтальную линию с помощью команды меню Вставить/HTML/Горизонтальная линия. Выделите щелчком мыши вставленную горизонтальную линию и в открывшейся внизу экрана панели с инструментами задайте для горизонтальной линейки ширину (Ш) – 50%, высоту (В) – 5, класс – стиль 3.

2. Выберите самостоятельно цвет фона для созданной Web-страницы. Для этого выберите команду меню Изменить/Свойства страницы/категория Внешний вид/открыть палитру Фоновый цвет.

3. Сохраните Web-страницу. Созданная вами страничка должна получиться такой, как показано на рис.1.

4. Для просмотра созданной Web-страницы в Web-броузере (это может быть Internet Explorer, Opera и др.) выберите команду меню Файл/Просмотр в броузере/…. Для возврата в приложение Macromedia Dreamweaver закройте окно броузера.

5. Создайте вторую Web-страницу, подобную изображенной на рис. 2, для этого:

   1. Создайте новую Web-страницу (Файл/Новый/HTML).

   2. В окне новой странички, на ярлычке которой будет указано имя без-названия_2, в поле Заголовок наберите текст Анкета.

   3. Сохраните созданную страничку под именем Анкета.html в папке Мой сайт, т.е. в той папке, в которой была сохранена первая Web-страничка.

6. Вставьте из папки Мой сайт рисунок vetton_ru_267.jpg в верхнюю часть страницы, уменьшите его размеры и разместите его по центру документа (как на первой Web-странице).

Рис. 1. Вид страницы Index.html в Internet Explorer.

Рис. 2. Вид страницы Anketa.html в Internet Explorer.

14. Над рисунком введите текст АвтоМаркет и отформатируйте его:

- шрифтом Georgia,

- начертанием полужирный курсив,

- размером 26 pixels,

- цветом зелёным #009900,

- выравниванием текста по центру.

15. Установите цвет фона для этой Web-страницы – светло-зелёный #CCFF99.

16. Под рисунком создайте таблицу из 11 строк и 2 столбцов и шириной – 500 pixels (смотреть рис.2). Выделите ячейки 1-ой строки таблицы и объедините их в одну (для этого на панели с инструментами в нижней части экрана щёлкните по кнопке Склеить выбранные ячейки). Подобным образом объедините ячейки 2-ой строки, 8-ой строки и 11-ой строки таблицы.

17. В первой строке таблицы установите цвет фона ячейки – тёмно-зелёный #009900. Наберите текст Заполните анкету и отформатируйте его шрифтом Arial, размером – 24 pixels, выравнивание – по центру, цвет шрифта – белый #FFFFFF.

    1. Во второй строке таблицы наберите текст Данные об автомобиле и отформатируйте его: шрифт – Times New Roman, размер – 20 pixels, начертание – полужирное и курсив, выравнивание – по центру, цвет шрифта – тёмно-зелёный #336600. Цвет фона ячейки задайте светло-серый #CCCCCC. Так же отформатируйте соответствующий текст и фон ячейки 8-ой строки таблицы. Для 11-ой строки цвет фона тоже задайте светло-серый.

    2. Введите нужный текст в остальные ячейки первого столбца таблицы (см. рис.2) и отформатируйте его: шрифт – Arial, размер – 14 pixels, начертание – полужирное, выравнивание – по левому краю, цвет шрифта – тёмно-серый #666666.

    3. В оставшиеся ячейки второго столбца таблицы вставьте соответствующие элементы формы (см. рис.2), выбрав команду меню Вставить/Форма и далее в каждой ячейке:

• Список/меню-ОК-Да (щёлкните по вставленному списку-меню, затем внизу экрана на панели с инструментами щёлкните по кнопке Список значений и в открывшемся одноимённом окне в области Метка элемента наберите текст Выберите марку, затем нажимая кнопку с плюсом и в появляющейся прямоугольной области набирайте последовательно марки автомобилей: Opel, BMW, Audi и т.д.. таким образом, формируя список из названий марок автомобилей в списке-меню);

• Текстовое поле-ОК;

• Текстовое поле-ОК;

• Текстовое поле-ОК;

• Текстовое поле-ОК;

• Текстовое поле-ОК;

• Текстовое поле-ОК.

18. Под таблицей наберите текст Назад и отформатируйте его: шрифт – Times New Roman, размер – 24 pixels, начертание – полужирное, выравнивание – по центру, цвет шрифта – синий #3300CC.

19. Установите гиперссылку на текст Назад (см. рис. 2), щелчок по которой позволял бы переходить на главную Web-страницу (т.е. на файл Index.htm). Для этого выделите текст Назад и выберите команду меню Вставить/Гиперссылка. В открывшемся одноимённом окне справа от поля Link щёлкните по кнопке Browse (т.е. по кнопке в виде значка папки). В открывшемся окне Выбрать файл откройте вашу папку Мой сайт и выберите файл Index.html, затем нажмите ОК и ещё раз ОК.

20. Сохраните получившуюся страницу.

21. Перейдите на Web-страницу Index.html, выделите текст третьей строки таблицы Перейти к анкете и установите на него гиперссылку на файл Anketa.html (см. пунк 19).

22. Проверьте работоспособность созданных Web-страниц. Для этого перейдите на главную Web-страницу и переключитесь в браузер (Internet Explorer или любой другой), проверьте работу гиперссылок на обеих страницах, а так же списков и текстовых полей на странице Anketa.html. (Проверку работоспособности можно выполнить, запустив на выполнение файл Index.html из вашей папки Мой сайт).