Основные понятия курса HTML верстки

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

Верстка – этапы изготовления шаблона

Верстку невозможно вписать в рамки простого написания кода. Поэтому этапы этого процесса начинаются еще до написания непосредственно страницы. Они выглядят так:

1. Концепция. Исходя из цели создания ресурса и поставленных маркетинговых задач, дизайнер разрабатывает визуальную концепцию и определяет ключевые элементы оформления страницы.
2. Макетирование. Далее с помощью специальных графических редакторов специалист создает макет будущей веб-страницы. Он создает графический файл, который по сути является отображением сайта: здесь присутствуют все элементы графики, шрифты и остальное оформление. Макет обычно создают с помощью графических редакторов из пакета Adobe: Photoshop, InDesign и Illustrator, или аналогичных программ, например, Corel Draw.
3. Верстка. Для того чтобы сайт стал визуально точной копией макета, его условно разделяют на отдельные части – прямоугольные блоки, каждый из которых обрабатывается отдельно. Достигнув этого этапа, верстальщик начинает писать код. Сделать это он может с помощью использования языков HTML, CSS, jQuery и т.п. Каждая из используемых технологий имеет свои возможности и ограничения, выбор зависит от типа созданного макета и наполнения будущего сайта.

Разновидности дизайна верстки веб-страниц

В зависимости от того, как был разработан макет, веб-страницы можно разделить по трем видам дизайна:

• Фиксированный – этот способ верстки является самым простым, так как размеры графических элементов прописываются в пикселях и таким образом фиксируются на странице. Будущий сайт будет иметь строго установленное разрешение, поэтому при открытии на устройствах с небольшим экраном соответственно появится горизонтальный скроллинг – лента прокрутки. Это может затруднить просмотр страницы на планшете или смартфоне, поэтому при проектировании дизайнеры стараются не использовать такой способ верстки. Единственным его преимуществом является относительная простота в написании кода.
• Резиновый – здесь размер всех элементов указывается в процентном соотношении к размерам экрана того устройства, с помощью которого пользователь посещает сайт. Это обеспечивает одинаковое отображение ресурса на всех устройствах, горизонтальная прокрутка не появляется. Однако такой подход также имеет свои недостатки: на гаджетах с очень большим разрешением экрана строки текста будут выглядеть чересчур длинными, а на маленьких экранах – наоборот, а это ухудшает читабельность. Именно поэтому до недавнего времени создавались отдельные версии сайтов для мобильных телефонов.
• Адаптивный – является наиболее приспособленным к современным пользовательским потребностям, ведь такой сайт автоматически подстраивается под разрешение экрана. Благодаря этому отпала необходимость создавать отдельные домены для мобильных версий сайта. Единственным недостатком этого метода является сложность в проектировании макета и написании кода.

Конечно, после окончания верстки разработка сайта не заканчивается. Далее проводится тестирование, производится оптимизация и вносятся коррективы.