128

Розмітка html сторінки. Відеоуроки верстки сайтів, 2

Перший і дуже важливий крок у верстці сайту — розмітка сторінки. Візуально оцінюємо psd макет, розбиваємо на логічні блоки та записуємо їх файлі html, відповідними тегами. 

Зазвичай сайти мають подібну структуру і складаються з таких частин:

  • хедер (<header>);
  • меню (<nav>);
  • блок основного контенту;
  • сайдбар (<aside>);
  • футер (<footer>);

Якщо сайт має фіксовану ширину і вміст центрується, то всі ці елементи вкладаємо в блок з окремим класом (<div class=”wraper>), а йому даємо стиль: margin:0 auto;.

До елемента body записуємо фон і стандартні стилі для шрифту, які будуть застосовуватися до всього сайту. Тому зразок цього шрифту беремо у макеті, де поміщено текст публікації. Вгорі css файлу, також, записуємо стандартні стилі до інших елементів сторінки (посилання, заголовки, форми і т.д.).

Далі починаємо уже верстку самої сторінки в порядку: згори → донизу. Перший блок який робимо — хедер, потім по структурі. Кожен елемент макету досліджуємо інструментами photoshop і описуємо їх за допомогою html та css, як це показано на відеоінструкції.

Читайте також: