Вёрстка сайта – процесс творческий. Его главной задачей является создание такой гипертекстовой разметки, с помощью которой можно оптимально удобно размещать элементы Web-страницы, чтобы они корректно отображались в окнах браузеров в соответствии с задуманным макетом. Здесь также нужно принимать во внимание те ограничения, которые присущи как CSS, так и HTML, а также обращать внимание на индивидуальные особенности браузеров и владеть приёмами вёрстки, чтобы получить оптимальный результат.
Чётких алгоритмов в вёрстке сайта не существует. Единственное, все страницы следует создавать в едином стиле. Это значительно облегчает вёрстку и придаёт сайту единое смысловое направление.
Адаптированность размера полотна сайта под различное разрешение монитора
Посетители сайта используют самые разные мониторы и браузеры. Они не одинаково интерпретируют HTML код и стили. В связи с этим создатель Web-страниц использует всевозможные приёмы. Они позволяют довести до посетителей страницу без заметных искажений и не доставляют им неудобства при просмотре.
Немаловажное значение имеет окно браузера. Здесь подразумевается ширина, которая у каждого пользователя своя. Она зависит от длины диагонали монитора, разрешения и формы экрана. С учётом этой особенности вёрстка сайта осуществляется с фиксированным и «резиновым» макетами.
При фиксированном макете условно выбирается средний размер монитора. Например, 1000 на 800. Размеры, естественно, даются в пикселях. Данный макет имеет много преимуществ. Под фиксированную ширину легко подгоняется дизайн. При любом разрешении он остаётся незыблемым. Только при больших величинах на экране справа и слева будут пустые области.
Если при разрешении 1024 на 768 макет займёт весь экран монитора с диагональю 17 дюймов, то при смене разрешения на 1280 на 1024 справа и слева останутся свободные области по 150 пикселей. Иногда вебмастера ведут отчёт от левого края. Тогда страница окажется сдвинутой в левый угол экрана. Не очень удобно для просмотра, но в целом терпимо. Чтобы сгладить недостатки, можно сделать красивый фоновый рисунок. Он «зальёт» все пустоты. Большинство сайтов делается именно с фиксированным макетом.
«Резиновый» макет полностью заполняет весь экран независимо от разрешения монитора и его размеров. То есть в стилях вместо фиксированной ширины в 1000 px указывается ширина 100%. Единственным ограничением ширины может стать размер рисунка. Если картинка с размерами 800 на 600, то соответственно на маленьком экране макет может исказиться. Поэтому ставится минимальная ширина в 800 px.
На широком же экране текст может расползтись на невероятную ширину, и его неудобно будет читать. Отсюда можно сделать вывод: «резиновый» макет хоть и создаёт видимые удобства, но в то же время применять его следует очень осторожно, учитывая все нюансы своего ресурса.
Модульная сетка
Вёрстка сайта включает в себя также такое понятие как модульная сетка. Представить её можно в виде невидимых направляющих, вдоль которых размещаются элементы страницы. Сетка значительно облегчает распределение информационного материала. Благодаря ей, обеспечивается хорошая визуальная связь между разными блоками. Помимо этого сохраняется незыблемость стиля на всех страницах ресурса.
Модульная сетка может быть одноколонная, двухколонная, трёхколонная и т. д. Можно сделать хоть 100-колонную сетку. Дело, как говорится, хозяйское. Но самые распространённые модульные сетки – это двухколонная и трёхколонная.
При двухколонной сетке сайт разбивается на две вертикальные половины или части. В левой можно расположить меню сайта со ссылками, а в правой контент. Не нужно также забывать о «шапке» и «подвале». «Шапка» — это то, что находится в самой верхней части сайта. Многие вебмастера помещают туда рисунки или рекламу. «Подвал» — самая нижняя часть. В нём обычно находятся счётчики, контактная информация, другие данные, не имеющие непосредственной связи с контентом. Такая сетка очень удобная и пользуется большой популярностью.
Не менее популярна трёхколонная сетка. Здесь уже имеется три вертикальных колонки. В левой меню, в правой реклама, а в средней контент, ради которого сайт и создаётся. Имеются также «шапка» и «подвал». Это обязательные атрибуты при любом макете. Можно также сделать комбинированную сетку. Тут всё упирается во вкус и фантазию.
Табличная и блочная вёрстки
Объекты размещаются на страницах при помощи таблиц или блоков. То есть вёрстка сайта включает с себя такие понятия как табличная и блочная вёрстки. Какая из них лучше? Тут мнения самые разные. Половина вебмастеров предпочитает всё делать в таблицах, иногда разбавляя их блоками. Другая же половина отдаёт предпочтение блокам, также иногда разбавляя их таблицами.
Большой плюс таблиц в том, что в большинстве браузеров они отображаются практически одинаково. При разных разрешениях колонки всегда сохраняют свой исходный вид. Таблицы легко регулируются с помощью CSS. Они сравнительно быстро загружаются, а чтобы ускорить процесс загрузки, в ячейках можно создать дополнительные таблицы.
Это, кстати, является и недостатком, так как исходный код страницы становится громоздким. Нет также стилей, применимых к столбца. При этом приходится давать стиль каждой ячейке, что ещё больше усложняет исходный код. Но если человек привык делать свои ресурсы при помощи табличной вёрстки, то к блокам он относится с предубеждением, считая их менее удобными при компоновке различных пластов информации.
Сторонники блочной вёрстки утверждают, что хотя блок и обладает теми же самыми свойствами, что и ячейка в таблице, но имеет более широкие возможности. Каждому блоку можно задать индивидуальную ширину, высоту, величину отступа, а также произвольное размещение (float) и управление обтеканием (clear). Во многих случаях при вёрстке сайта это имеет очень большое значение.
При блочной вёрстке, как многие утверждают, страница загружается гораздо быстрее, чем при табличной вёрстке. С этим можно не согласиться, так как здесь нужно учитывать и другие факторы. Но недостатком блоков в любом случае является его «чувствительность» к стилям. Современные браузеры с ними работают корректно, но иногда отображают по-разному.
Браузеры иногда не однозначно интерпретируют высоту и ширину блока. Ведь она определяется не только height (высота) и width (ширина), но и величиной полей, отступов и границ. Одни браузеры спецификацию поддерживают, а другие игнорируют. Особенно это касается старых версий Internet Explorer. Всё это затрудняет создание универсальных страниц.
Есть и ещё недостаток. При уменьшении окна браузера блоки смешаются, то есть правый блок может «прыгнуть» под левый. Но некоторые разработчики это свойство удачно используют при создании «резиновых» макетов. Впрочем, связать блоки друг с другом совсем не сложно. С этим прекрасно справляются даже начинающие вебмастера.
Верстка мобильной версии сайта
И ещё нужно сказать несколько слов о мобильных устройствах. Всё больше и больше людей заходят в Интернет именно с них. При этом многие сайты ориентированы только на настольные компьютеры или платформы desktop, а поэтому на платформах tablets и high-end mobile devices они отображаются некорректно.
Некоторые владельцы ресурсов создают отдельные мобильные версии, а другие стараются адаптировать сайт под все платформы. Для этих целей делается «резиновый» макет из блоков. На мобильных устройствах в область просмотра вписывается 950 px. Если же макет имеет фиксированную величину, равную, к примеру, 1000 px, то он уже не будет отвечать требованиям для мобильных устройств.
Следует увеличить активные элементы страницы (ссылки), чтобы пользователи с сенсорными экранами могли на них беспроблемно нажимать. И расстояние между ссылками необходимо сделать достаточно большим.
Что касается рисунков, то они должны быть динамичными, то есть расширяться и сужаться вместе с макетом сайта. Для этого существуют специальные классы и теги, которые прописываются в файле CSS и на Web-странице.
Вот собственно и всё, что нужно знать, чтобы вёрстка сайта соответствовала вашим желаниям и стремлениям. Главное, чтобы было желание создать по-настоящему качественный макет. Он будет радовать глаз и поспособствует в какой-то мере притоку посетителей. А это в Интернете самое главное.