Лабораторное занятие №14

Создание шапки и подвала сайта

Раздел 1. Установка и настройка аппаратных и программных средств доступа в сеть

Интернет
Тема 1.7 Принципы функционирования, организация и структура веб-сайтов

Цель работы: научить студентов созданию шапки и подвала сайта

1. Теоретические сведения:
В шапке сайта указывается самая главная информация – суть сайта: его название и
что предлагается.
Например, если цель сайта реклама такси, то пишем:

«Самое быстрое такси СПб

Все машины с кондиционерами
Бесплатный Wi-fi
Оплата наличными и по карте»

У нас цель – поверить в свои силы, понять, что сделать сайт самому бесплатно легко. Для
этого используются бесплатные программы, предлагается обучающее видео.
Как видите, создание шапки сайта, очень важная часть при оформлении веб-
страницы. Чем яснее она будет, проще и «полезнее»для посетителя, тем больше
вероятности, что он (посетитель) останется на сайте.
Рассмотрим шапку данного сайта:

Оформляем шапку сайта

 Фон отличный от фона страницы;
  Ячейка имеет рамку, которая дополнительно подчеркивает содержание;
 Текст выровнен по центру и по середине.
 Название сайта оформлено цветом, отличного от обычного текста;
 Под названием - уточнение, что посетитель может найти на сайте: статьи, видео
уроки, бесплатные программы;
 Можно добавлять тематическую картинку (даже «только»тематическую).
Создание шапки сайта
В предыдущей статье я показывал, как задать фон и границу ячейки. Повторим и
заменим границу на другой цвет.
Устанавливаем курсор в верхнюю таблицу – «Шапку сайта». Меняем фон ячейки,
для этого выполняем привычные действия: правая кнопка мыши – свойства ячейки – фон
– кнопка другой – 
выбираем цвет белый – ОК – ОК – Применить – ОК.
 устанавливаем цвет шапки сайта
Меняем границы ячейки: Правая кнопка мыши - Стиль - Формат - Границы -
выбираем цвет «Hex={33,66,СС}» и ширину 2 px.

Устанавливаем цвет и толщину границ шапки сайта

Печатаем наш текст в ячейке. Чтобы он был более привлекательным, необходимо
сделать выравнивание по горизонтали и вертикали – «по середине». Это можно сделать во
вкладке «Свойства ячейки». Правая кнопка мыши – «Свойства ячейки» - «По центру» -
«По середине» - применить – ОК.
 Устанавливаем положение текста в шапке сайта
Первая фраза самая главная. Сделаем её размер больше – 34, поменяем шрифт -
Arial, изменим цвет - «Hex={8C,1A,FF}». Правая кнопка мыши - Шрифт - и устанавливаем
шрифт, размер.

Редактируем текст шапки сайта

 Переходим на вкладку цвет и меняем его. Правая кнопка мыши - Шрифт - Цвет -
Другие цвета - Устанавливаем цвет «Hex={8C,1A,FF}».

Устанавливаем цвет текста в шапке сайта

Отделим вторую строчку от первой. Для этого устанавливаем курсор на первой
строчке. Переходим на вкладку «Формат», выбираем«Абзац» и устанавливаем параметры
отступа и интервала.

Устанавливаем параметры текста в шапке сайта

Проверяем, что у нас получилось. Жмём F12. И наблюдаем нашу шапкусайта.

Текст в Шапке сайта

Аналогичным образом меняем вторую строчку: размер – 14, шрифт - Arial, цвет
- «Hex={4B,4B,4B}».

Создание шапки сайта

Оформляем Подвал сайта

Обычно подвалу сайта уделяют минимум внимания. Естественно, если посетитель за 5-7
секунд определяет нравиться ему сайт или нет, то до подвала он не доберётся.

Зная это, никогда не располагайте в подвале меню навигации, важную информацию,

контакты, ссылки.
В подвале можно только дублировать её.
 Исходя из этого, рекомендую в шапку добавлять:
 Информацию о создании и создателе сайта;
 Контактную информацию;
 Ссылки на разделы сайта;
 Сервис рассылки.
Важно: Не размещайте в подвале ссылки на внешние источники. Поисковые
системы воспринимают их, как покупные – а это плохо отобразиться на продвижении
(данное правило не касается на свои странички в социальных сетях). Оформляем подвал
сайта - все действия аналогичны оформлению шапки сайта. А в итоге у Вас должно
получиться следующее:

Создание подвала сайта

Порядок выполнения практической работы

1. Повторение теоретического материала.
2. Получение задания у преподавателя.
 3. Выполнение задания по плану.
4. Оформление отчета о работе (вывод)
5. Подготовить ответы на контрольные вопросы.
6. Защита практической работы.

2. Алгоритм выполнения задания

1. Осмыслить полученное задание;
2. Выполнить задание
3. Сделать вывод, подготовиться к защите практической части.

3. Задание
1. Изучить теоретический материал
2. Выполнить вариант задания
3. Записать данные выполнения в отчет
Задание на практическую работу:
1. Создать шапку и подвал сайта
Порядок выполнения:
1. Выбрать вариант задания
2. Выполнить задание
3. Создать отчет о выполнении лабораторной работы 
Варианты
1. Сайт ВТИТБиД
2. Сайт Домашняя страница
3. Сайт любителей кошек
4. Сайт клуба собаководов
5. Сайт садовода-любителя
6. Сайт охотников
7. Сайт рыболовов
8. Сайт любителей футбола
9. Сайт города Волгодонска
10. Сайт Моя деревня
11. Сайт Планета кино
12. Сайт Моя семья
13. Сайт Кулинария
14. Сайт Познавательные странички
15. Сайт О звездах
16. Сайт Здоровье
17. Сайт Мода
18. Сайт Медицина
19. Сайт Автомобили
20. Сайт Спорт

4. Вопросы:
1. Где размещаются шапка и подвал сайта?
2. Какая информация помещается в шапку и подвал сайта?
3. Что нельзя помещать в подвал сайта?
4. Как установить параметры названия сайта?
5. Как установить цвет границ шапки?

5. Сделать вывод по практической работе.

Подвал сайта — это его самая нижняя часть, где обычно размещаются веб-
мастером ссылки для перехода на главную страницу, может быть и меню всего
сайта, постраничная навигация, об авторе, о проекте, о сайте, контактные данные,
переходы на страницы для часто задаваемых вопросов, ссылки на социальные
сети и их кнопки, информеры и счетчики и что только не размещается в подвале
сайта. Вся информация, которую только сможет придумать сам веб-мастер! И не
прав тот, кто думает, что в подвал сайта заходит мало посетителей, в корне не
прав! И исходя из этого, нужно уделять не меньше внимания подвалу сайта, чем
его, на первый взгляд, более видимым частям, как тело и шапка сайта. Хоть я и
повторяюсь, но думаю, что не зря. Это я пытаюсь таким образом объяснить вам
всю значимость и важность должного оформления подвала сайта!