Основы верстки

Лучшие комментаторы

основы версткиЧто необходимо понимать в плане верстки веб-страниц? Как основы верстки, это создание содержимого какой-либо страницы в html-коде, позволяющего располагать элементы веб-страницы (такие как текст, фотографии, линии, ссылки, видеоматериалы и т.п.) в необходимых местах документа, отображая их в браузерном окне согласно составленному макету. При этом нужно понимать, что есть ограничения, присущие языкам CSS и HTML, учитывая браузерные особенности, и знать нужные приемы верстки.


 

Основы верстки или правильное создание шаблонов

Чтобы понимать основы верстки, и что она является достаточно сложным и важным этапом по созданию страницы сайта, разберем маленький пример. Стоит сразу отметить, что под версткой не надо понимать составление четких алгоритмов, т.к. процесс данный – творческий. По началу, дизайнер изготавливает в графическом редакторе макеты веб-страниц (ну из основных, это Adobe Illustrator либо Adobe Photoshop). Далее он их утверждает у заказчика и дает верстальщику на дальнейшее формирования в HTML-коде.

Окей, макет передан, теперь нужно разобраться с рисунком и решить, каким образом это будет выглядеть в веб-странице. В удобном случаи, картинка разбирается логическим методом на отдельные блоки, с которыми происходит дальнейшая работа по созданию страницы. Полагаю, вы уже уведомлены о таких блочных элементах, как #sidebar, #content, #footer и пр. чтобы понимать суть данного материала. Для примера, есть два больших блока, основной контент и шапка.

основы верстки

Из них, рассмотрим шапку страницы.  У нас есть несколько методов для применения ее элементов на странице в браузере (таких, как изображения, тексты, заголовки, ссылки и прочие):


  • Создать один рисунок, применяя к нему карту-изображение
  • Можно разрезать изображения на фрагменты, каждый из которых отдельным образом будет являться ссылкой на страницу
  • Использовать позиционирование элементов страницы

Каждый из представленных методов может привести к нужному результату, но стоит также учитывать и недостатки, о которых должен иметь представление работающий в сфере веб-технологий. Окей, первый блок воплощен в виде HTML-содержимого, едем дальше. Мы понимаем, что у браузера есть свои стандарты относительно стилизации такого содержимого, поэтому нужно формировать и стилевой файл CSS:


  1. Это цвет фоновой заливки веб-страницы
  2. Основной шрифт, его размер и цвет
  3. Размер текста отдельных модулей, типа заголовков
  4. Также размер, цвет и гарнитура заголовков
  5. Параметры линий горизонтальных линий и т.п.

Полагаю, вам хорошо видно изображение созданного макета страницы для понимания.

основы верстки

Дальше, верстальщику предстоит использовать созданный файл стилей CSS, где будет применяться конечный результат HTML-содержимого. Вы полагаете, что стили надо прописывать только для завершения содержимого? Не только, ведь стили предназначены еще и для переделывания текущих стилей (если понимаете, не вникайте). И это касается каждого раздела в содержимом HTML-разметки. Итак, во время работы над текущим шаблоном и по окончанию такой работы, нужно задать ряд вопросов проделанным действиям, из них:


  • Корректно ли в известных браузерах отображаются станицы?
  • Происходит ли сохранение полноты содержимого при изменениях со шрифтами, цветными элементами либо изменяя размеры окон?
  • Если отключить показ фото, можно продолжать работать с сайтом?
  • Как разрешение монитора может влиять на вид текущей страницы?

Что еще необходимо знать про основы верстки страниц?

Следует учитывать и то, что статьи могут иметь разный объем и веб-страница должна сохранять пропорции в не зависимoсти от этого. Если были обнаружены недочеты с внешним видом страницы, то они исправляются до момента сведения их к принятому минимуму. 

Как правило, верстальщик (или человек, создающий шаблоны сайтов), не создает сами веб-страницы, а лишь определенное кол-во документов, которые после обработки становятся шаблонами.

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

Подсказка для инвалидов

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

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Пост опубликован: