Важность шапки сайта

Шапка для сайта – это один из самых главных блоков любого ресурса в сети Интернет. Именно на шапку сайта в первую очередь обращают внимание его посетители.

Конечно, это не значит, что шапку для сайта нужно разукрасить во все цвета радуги, вовсе нет. В шапке сайта должно быть сделано все аккуратно и лаконично, в соответствие с темой, которая раскрывается на данном сайте.

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

Шапка для сайта

Ну что же, теперь мы подошли собственно к теме урока, начнем создавать для сайта шапку.

Запустите визуальный редактор NVU. Для начала произведем выравнивание курсора по центру окна редактора. Для этого, в редакторе NVU на панели инструментов, кликните значок «Выровнять по центру». После этого курсор окажется в центре рабочего окна редактора.

В предыдущем уроке, мы с Вами отметили, что верстать сайт, мы будем с помощью таблиц.

Шапка сайта у нас будет представлять собой таблицу, состоящую из одной ячейки.

Ну что же, давайте для формирования шапки сайта, с помощью инструментов визуального редактора, добавим таблицу, состоящую из одной ячейки.

В меню htmlредактора, кликаем последовательно следующие пункты меню: «Таблица» - «Вставить» - «Таблица», здесь курсором мышки выбираем количество ячеек. В нашем случае, шапка для сайта будет состоять из одной ячейки, поэтому, выбираем одну ячейку и кликаем в нее левой кнопкой мыши.

В результате, в окно html редактора, добавится ячейка таблицы.

Теперь зададим параметры таблицы, чтобы шапка сайта, приобрела нужные нам размеры.

Выберем только что созданную таблицу, кликнув в нее левой кнопкой мыши. Теперь, для задания параметров, кликнем на панели инструментов редактора иконку с надписью – «Таблица».

Нам откроется окно свойств таблицы в верхней части которой расположено два пункта меню - «Таблица» и «Ячейка».

Сначала выберем вкладку «Ячейка», здесь нас интересуют свойства выравнивания. Задаем вертикальное выравнивание – Посередине, а горизонтальное – По центру.

Теперь переходим на вкладку «Таблица»: 

На этой вкладке задаем следующие параметры: строк и столбцов – по одному, высота ячейки 90 пикселов, ширина 770 пикселов, рамка таблицы – 1 пиксел, поля между ячейками и внутри ячейки – 0 пикселов, выравнивание таблицы – по центру, цвет фона таблицы и ячейки – белый.

После задания параметров, жмем «Применить» и «ОК».

Теперь проверим, как наша страница откроется в браузере. Для этого зайдем в папку, где мы сохранили файл страницы - index.html и откроем этот файл браузером.

Если мы все сделали правильно, то откроется страница, в верхней части которой, будет расположена таблица шапки сайта с белым фоном и серой рамкой. Обратите внимание на фон страницы, он должен быть светло серый:

Ну что же, шапка сайта у нас практически готова, осталось только в нее добавить название сайта: «Мой первый сайт в Интернет».

Для добавления текстовой фразы в шапку сайта, сначала кликаем левой кнопкой мышки в ячейку таблицы. Как Вы помните, в свойствах таблицы шапки сайта, мы выставили вертикальное и горизонтальное выравнивание - соответственно по середине и по центру, поэтому курсор окажется прямо в середине ячейки.

Следующим шагом, выберем размер добавляемого текста «Заголовок 1», это мы сделаем в левой части панели инструментов визуального html редактора.

Размер «Заголовок 1», для шапки сайта выбран не случайно. Дело в том, что текст с таким размером высоко ранжируют поисковые системы. Нам важно, чтобы название сайта поисковые системы ранжировали высоко!

Итак, с размером текста мы определились, теперь давайте наберем текст и зададим его цвет. Кликнем в ячейку шапки сайта левой кнопкой мыши и наберем название сайта: «Мой первый сайт в Интернет».

По умолчанию текст в визуальном редакторе набирается черным цветом. Чтобы изменить цвет текста, выделим его курсором и кликнем инструмент «Выбор цвета для текста»:

В ответ на наш выбор, откроется окно с палитрой цветов. Выбираем темно оранжевый цвет с кодом #FF6600 и жмем кнопку «OK». Цвет для заголовка шапки сайта мы задали.

Для проверки изменений, обновим нашу страницу в браузере. В результате мы должны получить страницу с шапкой сайта:

На этом данный урок закончен, в следующем уроке, мы создадим таблицу для контента.

Перейти к Уроку 5: HTML таблица - для контента

Перейти к Уроку 3: Структура сайта. Фон сайта

Автор: Виктор Милованов