Практическое занятие № 12

Тема: Разработка Web-страниц

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

Задание 1. Создание web -сайта

1. Создайте в своей папке новую папку под названием Сайт.

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

3. Выберите команду меню Веб-сайт – Новый  сайт.

4. В диалоговом окне введите название сайта Моя Семья + ваша группа:

5.Сохранить
Сайт будет создан.

 

6. На панели Файлы в правой части главного окна программы  появится значок папки с названием созданного вами сайта – Веб-сайт-Моя Семья :

По мере работы над проектом каждая созданная веб-страница будет отображена на этой панели в папке сайта.

 

Задание 2. Создание web-страницы

1. Выполните команду Файл – Создать – HTML. Перед вами откроется пустая страница Документ без названия.

2. Убедитесь, что на панели команд документа выбраны вкладка – Дизайн

3. На панели инструментов документа введите название – Семья Смирновых.

4. На рабочем поле введите с клавиатуры следующий текст:

4. Выполните команду Файл - Сохранить как. Сохраните файл в своей папке  под названием main.

5. Обратите внимание: на панели Файлы, в папке Веб-сайт-Моя Семья также появился значок файла main. Html:

 

6. При помощи панели Свойства отформатируйте текст:

Ø выделите первую строчку текста – выберите Заголовок 1 (HTML–>Абзац);

Ø выделите вторую строчку - выберите размер 36, шрифт Times New Roman, выравнивание по центру, полужирный, курсив, цвет – темно-синий,

для чего: переключаем HTML–>CSS, настраиваем текст, предварительно вводя имя селектора (для каждого абзаца свое имя селектора):

 

Ø выделите третью и четвёртые строки - выберите размер 32, шрифт Arial Black, выравнивание по ширине, цвет – тёмно-зелёный.

7. Нажмите кнопку Свойства страницы Цвет фона и выберите цвет FFFF99

8. Сохраните файл.

9. На панели инструментов Документ нажмите кнопку Просмотр/Отладка в браузере – Просмотр в Internet Explorer.

 

Задание 3. Вставляем изображение

1. Установите курсор внизу текста.

2. Выполните команду Вставить - Изображение. В папке Файлы для сайтостроения найдите графический файл Наша_семья_фото.

5. Вставьте его.

Откроется диалог с предложением сохранить файл в вашей папке. С таким предложением следует согласиться.

6. Выделите фотографию. В свойствах установите в поле Border (толщина рамки) значение 2.

8.. Убедитесь, что на панели Файлы, в папке Семья появился значок вставленной фотографии.

9. Выполните просмотр страницы в обозревателе .

 

Задание 4. Создание и форматирование таблицы

 

1. Установите курсор по образцу :

2. Выполните команду Вставить - Таблицы.

3. Установите размеры таблицы по образцу:

4. В свойствах добавьте недостающие размеры (рис.13).

5. Вырежьте нижний текст и вставьте в таблицу.

6. Установите курсор в центре таблицы и правой мышкой вызовите контекстное меню.

7. Выполните команду Таблица - Вставить столбец.

8. Залейте этот столбец темно - зелёным цветом (#006633):

9. При необходимости поднимите фотографию вверх.

10. Сохраните файл.

11. Выполните просмотр в обозревателе.

 

Задание 5. Создание ссылок и гиперссылок.

1. Отобразите  панель  «Вставка» для чего выберите пункт меню«Окно» > «Вставка»

 Создайте новый файл и сохраните его в вашей папке под именем о_nas .html .

2. В заголовке впишите название страницы Давайте познакомимся.

3. Залейте страницу тем же цветом, что и предыдущую (#FFFF99).

4. Введите с клавиатуры следующий текст:

8. Весь текст наберите шрифтом Times New Roman, цвет - тёмно-зелёный (003333) • верхняя строчка 36 размера, заголовок 1, по центру

• список 32 размера

• остальной текст 28 размера, по ширине.

Создадим ссылку, которая позволит перемещаться к началу страницы.

9. Установите текстовый курсор в начале заголовка О нас.

10. Нажмите кнопку Именованная привязка  или в меню «Вставка» выберите «Именованная привязка».

11. В поле ввода Имя якоря введите название Zagolovok.

В позиции текстового курсора появится значок якоря, указывающий место, в которое будет осуществлен переход по ссылке

В обозревателе этот значок якоря отображаться не будет.

12. Установите текстовый курсор в конце последнего абзаца. Нажмите пять раз клавишу Enter. Установите курсор по центру.

13. На вкладке Общие панели объектов нажмите кнопку Гиперссылка .

14. Задайте параметры гиперссылки по образцу:

15. Нажмите кнопку ОК. Диалог Гиперссылка закроется. В позиции текстового курсора появится ссылка В начало.

16. Сохраните файл.

17. Проверьте, как работает ссылка в обозревателе.

 

Создадим гиперссылку для перехода па главную страницу.

19. Щелкните мышью в окне документа в конце ссылки В начало.

20. Нажмите клавишу Enter. Текстовый курсор переместится на следующую строку.

21. Введите с клавиатуры текст На главную страницу.

22. Выделите текст и ВСТАВЬТЕ ГИПЕРССЫЛКУ:

      правой кнопкой мыши вызовите контекстное меню, выберите Создать ссылку.

·        В открывшимся меню выбрать файл main.html

23. Перейдите на страницу main.html

24. Выделите заголовок Главная страница семейного сайта.

25. Создайте гиперссылку на страницу о_nas .html.

26. Сохраните файл.

27. Проверьте, как гиперссылки работают в обозревателе Интернета.

28. Порадуйтесь своим успехам.

29. Порадуйте своими успехами преподавателя.

 

Содержание отчета.

Отчет должен содержать описание команд содания веб-сайтов.