Урок 2

Тема: Разработка веб-сайта
Цель:
   знать

• алгоритм создания веб-страницы;
• основные теги.

    уметь

• создавать веб-сайт из нескольких страниц;
• применять полученные знания для решения практических задач.

1. Самостоятельная работа
Используя текст из файла Загадки.txt, создайте веб-страницу zagadki.htm.

1)    Создайте НТМL- документ с именем Фамилия(zagadki).htm.

2)   Заголовок окна веб-страницы: Загадки.

3)    Цвет фона веб-страницы — #ЕFDFCF  (бежевый), цвет текста — темно-синий.

4)    Заголовок (Н1), красного цвета, в виде бегущей строки: Интеллектуальная разминка.

5)    Названия загадок — заголовки второго уровня (Н2), выровненные по центру.

6)    Загадки — абзацы, выровненные по левому краю, размер символов 4 единицы.

7)    Отгадки — абзацы, выровненные по правому краю, оформить курсивным начертанием, цвет символов — черный.

8)    Между загадками — горизонтальные линии красного, синего, зеленого цветов шириной 100 %, толщиной 3 пиксела.

Загрузите файл в файловый архив сайта гимназии (Главная /  Файловый архив / Раздел "11 классы"/ Раздел "Информатика"/  Команда "Загрузить файл" (справа) / Заполните поле "Название" / Кнопка "Выберите файл" / Кнопка "Сохранить").

2. Изучение нового материала

Краткий конспект урока

Этапы работы по созданию веб-сайта:
1) Определение тематики сайта, его целей и задач.
2) Проектирование структуры сайта, определение разделов и связей между ними.
3) Разработка дизайна сайта.
4) Подготовка материалов.
5) Конструирование страниц.
6) Размещение в сети и тестирование сайта.

Рассмотрим этапы создания сайта из нескольких страниц на примере. Файлы для работы из папки Достопримечательности Витебска скачайте на свой компьютер.

Задание
Создайте фрагмент веб-сайта «Достопримечательности Витебска» из четырех страниц, связанных гиперссылками. 

 §  Главная страница (index.htm) содержит:

Фоновое изображение: из файла Фон.jpg. 

Заголовок: «Достопримечательности Витебска», заголовок 1-го уровня, цвет – тёмно-красный, выравнивание по центру.

Поясняющий текст: Страницы этого сайта позволят Вам больше узнать о Витебске, его достопримечательностях. Размер текста - 3 ед., выравнивание по центру.

Изображение: из файла Вид.jpg. Выравнивание по центру.

Навигационную панель: гиперссылки на 3 другие страницы sobor.htm, ratusha.htm, shagal.htm.

 §  Вторая страница (ratusha.htm) содержит:

Фоновое изображение: цвет фона - tan. 

Заголовок: «Ратуша», заголовок 2-го уровня, цвет – коричневый, выравнивание по центру.

Поясняющий текст: из файла Достопримечательности Витебска.doc, выравнивание по центру.

Изображение  из файла Ратуша.jpg.  Размер изображения: 350 Х 250, выравнивание по центру.

Навигационную панель: гиперссылка на главную страницы index.htm.

 §  Страницы sobor.htm и shagal.htm оформите в таком же  стиле  как страницу ratusha.htm.

- Что собой представляет информационная модель сайта? - модель состоит из 4 страниц: index.htm, ratusha.htm, sobor.htm, shagal.htm. Имеет двухуровневую структуру. На первом уровне - Главная страница, остальные - страницы второго уровня.
- Каково содержание и связи? - см. рисунок.

Создадим главную страницу сайта по алгоритму:

1) Открыть программу Блокнот.
2) Набрать html-код.
3) Выполнить команду Файл - Сохранить как

• Выбрать тип файла "Все файлы"
• Ввести имя с расширением .htm
• Нажать кнопку "Сохранить"

4) Открыть созданный документ в браузере.

 Сохраним ее с именем index.htm. Просмотрим в браузере результат работы. Затем откроем эту страницу в Блокноте и  сохраним ещё раз с именем ratusha.htm.  Внесем в html-код изменения для страницы о Ратуше. Просмотрим работу ссылок в браузере. Аналогично создадим страницу shagal.htm и sobor.htm.

Проверь себя! Главная страница, Ратуша, Собор (html-код страниц).


3. Домашнее задание: §1 (п. 2), §5 (п.4).