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

Коли отримуємо макет сайту, який потрібно зверстати, в першу чергу потрібно визначити на які частини буде ділитися сайт. Далі визначаємо чи є ширина і висота сайту фіксованою. Далі потрібно визначити які функціональні блоки знаходяться на сторінці і де саме вони розташовані.

Веб-сторінка зазвичай ділиться на такі частини:

  • Header - шапка сайту
  • Основна частина сайту - контент. Основна частина може також ділити на колонки. На сайті може бути одна, дві або три колонки.
  • Блок меню - може бути всередині однієї з частин або виділений окремим блоком
  • Footer - підвал сайту

Перейдемо безпосередньо з верстці макету. Я зупинюся на блокової верстці, так як сама її віддаю перевагу.

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

Тут у нас видно такі позиції:

  • Шапка. У ній логотип, меню, картинка (брелок)
  • банер
  • Дві колонки - контент і два блоки
  • підвал

Створюємо папку з назвою проекту. У ній створюємо html-сторінку. Нехай вона називається index.html. Робимо кілька папок - styles, images та, якщо потрібно, js. Створюємо css-файл style.css і кладемо його в папку styles.

У index.html підключаємо файл зі стилями. Для цього в документа пишемо:

де styles / style.css - шлях до файлу.

Так як ми вже визначили основну структуру документа, то так і пишемо в :