8 800 222 77 23

Язык: Русский

Регион: Новосибирск

Выбран ваш город?

Выберите Ваш город

Выберите из списка:

Статьи

7 октября 2014

Вёрстка сайта - один из важных этапов создания веб-ресурса

вёрстка сайта - один из важных этапов создания веб-ресурса
Вёрстка сайта – процесс представления разработанных дизайнером макетов в html-редакторе с обязательным учётом размещения отдельных элементов в необходимых местах. Различают два принципиально отличных друг от друга способа реализации этого процесса: табличный и блочный. В первом случае возможно создание рамок, расположение модулей по сетке, изменение цветового фона, выравнивание элементов с точностью до пикселя и пр. Блочная вёрстка реализуется при помощи отдельных слоёв (блоков) и описывающих их каскадных таблиц стилей, но этот способ является более трудоёмким. Разметка html при вёрстке веб-страниц может быть логической или презентационной, при этом первый вариант позволяет исключить зависимость изображения от типа экрана и используемых для просмотра устройств, поскольку регуляция внешнего вида корректируется файлами стилей.
Вёрстка макета может быть реализована тремя способами, каждый из которых обладает своими преимуществами и недостатками и может быть применим для реализации концептуальных задумок разработчиков:
·         фиксированный (жёсткий) – в этом случае ширина структурных элементов задаётся в пикселях, это облегчает работу дизайнера, поскольку внешний вид страниц всегда будет одинаков, но применение такого макета с адекватным отображением содержимого страницы возможно только при определённом разрешении экрана;
·         резиновый (расширяемый) – ширина модулей привязана к проценту от текущего разрешения монитора, это способствует адекватному отображению содержимого в любом браузере и на экранах с любым разрешением, но при этом происходит непредсказуемая перестройка дизайна, особенно при максимальных величинах разрешения;
·         эластичный (адаптивный) – макет способен перестроиться под разрешение экрана не только путём изменения размеров отдельных блоков, но и их перестройкой или заменой, что позволяет пользоваться интернет-ресурсами на стационарных компьютерах и портативных устройствах, но при этом необходима предварительная подготовка нескольких макетов;
·         смешанный – часть элементов задаётся в относительных величинах, часть – в абсолютных.
Таблица расценивается как один единый и неделимый объект, поэтому при загрузке интернет-страниц, свёрстанных табличным способом, её содержимое не проявляется до полной загрузки всех строк и столбцов, что съедает значительное количество трафика и замедляет работу пользователей, особенно в случае использования вложенных элементов. Поэтому современные тенденции предполагают использование таблиц только по их прямому назначение – представление информации, а позиционирование слоёв описывают стилистическими таблицами и посредством иных элементов.
Вместо таблиц при вёрстке сайта применяют слоевое размещение основных блоков на веб-странице, которое определяется координатами относительно некоего статично расположенного элемента. Для динамического изменения параметров применяют скрипты, которые позволяют создавать эффект всплывания, выпадения, постепенного разворачивания и пр. Основные же параметры структурных элементов задаются таблицами стилей, которые сокращают длину программного кода, увеличивая эффективность, выразительность и привлекательность сайта.
Сдерживающим фактором для использования слоёв при блочной вёрстке ресурса является сложность разработки универсального кода, который бы адекватно воспринимался различными платформами браузеров. При этом постепенная подгрузка содержимого страницы может отображаться в виде «скачков», но замедления работы пользователя не происходит, как в случае табличного способа.
Вёрстка сайта – прямой функционал мастера-верстальщика, который переводит дизайнерский макет в программный код, оформленный встроенными средствами html-разметки и каскадными css-таблицами. Для этого применяются различные редакторские и графические прикладные программы, позволяющие не вникать в тонкости html-кодирования и создавать базовый код, который впоследствии дорабатывается для адекватности реализации концепции проекта. Одним из обязательных этапов является и проверка разработанного кода на его валидность – соответствие стандартам W3C с учётом версии языка разметки.
Превратить дизайнерский макет в полноценную веб-страницу можно разными методами, выбор которых зависит от предпочтений верстальщика, но в конечном итоге определяет результат работы сайта, быстроту его отображения, доступность для разных устройств и браузеров. Эффектный внешний вид может быть подкреплён не менее эффективным программным кодом, только в этом случае будет получена высокоскоростная, адекватная и адаптивная реализация веб-проекта. Неграмотно составленный код добавит «головной боли» не только разработчикам, но и пользователям будущего интернет-ресурса.
В профессиональных веб-студиях, как правило, придерживаются основных правил качественной и грамотной вёрстки сайта, которые заключаются в следующем:
·         тестирование созданного кода для 5 основных браузеров и различных разрешений мониторов;
·         валидация всех без исключения страниц проекта;
·         соответствие получаемого внешнего вида дизайнерскому макету с отклонением для размещения элементов не более чем в 6 пикселей;
·         html и css коды минимизируются и размещаются в отдельных документах.