Верстка — одна из важных частей работы при создании сайта, от которой зависит, насколько красиво ваш программный код преобразится в интерфейс и дизайн страницы. Обычно ее выполняют профессиональные программисты на чистом HTML и CSS, адаптируя визуальные элементы под нужды и задачи ресурса, но можно воспользоваться готовыми фреймворками и CMS, что сэкономит время и деньги. Вот как действует квалифицированная команда разработчиков, готовые работы которой можно увидеть на сайте агентства Artweb: сначала создается простейшая структура файлов с названием портала, именно ее потом закачивают на сервер.
В главной папке нужны подразделы, каждый из которых содержит отдельную часть кода: HTML-каркас, CSS-стили и в последней директории лежат картинки, загружаемые при “прочтении” браузером. Затем берем макет в формате PSD и открываем его в графическом редакторе Photoshop: он должен выглядеть в виде готовой страницы со всем элементами и блоками, удобное расположение которых придумал и нарисовал дизайнер. Дальше общее изображение нарезается на простые одноцветные куски, которые проще всего “написать” при помощи разметки HTML и оформить стилями CSS. Логотипам, иконкам и простым картинкам назначают имена и складывают их в определенные файлы, обязательно сохраняя в формате JPG, тогда как фотографии — в PNG.
Чтобы определить цвет и размер шрифтов в специальной кодировке, которая поможет перенести свойства и стили элементов в программный код, достаточно нажать на просмотр параметров изображения в редакторе Photoshop. Дальше начинают создавать “каркас” сайта, вписывая в HTML-файл известные каждому разработчику декларативные конструкции из тегов head, title, body и др. На готовой странице не забывайте указать кодировку UTF-8, а также подключить стили CSS. Сейчас программисты верстают сайты на HTML-5, поэтому многие компоненты создаются по новой методике: к примеру, header — “шапка” вашего ресурса, footer — “подвал”, content — середина с содержимым и контентом, а sidebar — полоса прокрутки с новостями или обновлениями на интернет-площадке. Все элементы страницы выравниваются относительно друг друга и выстраиваются в колонки с помощью указания размеров в CSS-стилях. Основные части сайта — header и footer — не “монолитные” блоки, поэтому могут разбиваться на отдельные области с помощью тегов div для удобного размещения информации. Кнопки социальных сетей, лента “Твиттера” и другие интерактивные элементы реализуются функциями из Javascript.