Структура сайта

Прежде чем создавать сайт, необходимо представлять, какова будет структура сайта. То есть, нужно продумать расположение блоков, сколько будет колонок у сайта, где будет расположено меню и так далее. Другими словами, нужно продумать какой будет дизайн у сайта.

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

Блок - Шапка сайта, будет находиться в верхней части.

Структура простого одностраничного сайта

Структура сайта

Блок для Контента - будет идти ниже шапки сайта, в этот блок мы добавим статью и картинку.

И замыкать страницу сайта будет нижний колонтитул сайта или - Футер.

Верстка сайта

Теперь давайте определимся с версткой сайта. Мы с Вами будем использовать табличную верстку. Смысл табличной верстки заключается в следующем.

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

Мы знаем, что таблица может состоять из множества ячеек. Поэтому, можно для любого элемента веб страницы выделить ячейку таблицы.

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

И еще, на веб странице можно сделать так, что рамка таблицы отображаться не будет. Тем не менее, таблица на веб странице, все равно будет присутствовать, и выполнять свои функции. Это очень удобно при верстке.

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

Запускаем визуальный редактор html - NVU

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

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

Как создать html файл

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

Итак, выбираем в меню редактора «Файл», затем «Создать» далее выйдет окно «Новый документ». Отмечаем в данном в окне бокс «Пустой документ» и жмем кнопку «Создать».

Теперь сохраним созданный нами html документ, для этого нажимаем последовательно пункты меню - «Файл», «Сохранить», выйдет окно для ввода названия заголовка страницы.

Вводим заголовок страницы и жмем «ОК». Выходит еще одно окно, здесь мы набираем имя файла (index.html), выбираем папку, куда нужно сохранить файл, и жмем «Сохранить».

Как задать фон для веб страницы

Перед тем, как создавать блоки сайта, давайте зададим фон нашей веб страницы. Для этого, в окне программы визуального редактора кликаем «Формат» и «Цвета и фон страницы».

В новом окне «Цвета и фон», выбираем опцию «Использовать цвета», ниже ищем «Фон» и кликаем в бокс цвета, расположенный правее надписи «Фон».

Фон сайта

Нам откроется окно с палитрой самых разных цветов. Я выбираю серый цвет и с помощью инструмента «Оттенок, Насыщенность, Яркость», движком этого инструмента, настраиваю минимальную яркость цвета.

В результате, мною был выбран фон страницы бледно серого цвета с шестнадцатиричным кодом #F6F6F6.

Подбираем цвет для фона веб страницы

Подтверждаем выбор цвета фона страницы, нажав «ОК» далее откроется еще одно окно, где еще раз подтверждаем выбор цвета, нажав «ОК».

Структура сайта - итоги урока

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

В данном уроке, с помощью визуального html редактора NVU, мы создали главную, и пока единственную страницу сайта, и сохранили ее в файл с именем index.html.

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

В следующем уроке Мы будем работать над шапкой сайта.

Перейти к Уроку 4: Шапка для сайта

Перейти к Уроку 2: Визуальный редактор html

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