Верстка сайтов
Внешний вид страницы (размеры, взаиморасположение отдельных элементов страницы, цвет, шрифт надписей и пр.) определяется в HTML шаблоне. Верстка — это превращение макета в веб-страницу, т.е. кодирование структуры сайта на HTML.
Слои или таблицы
Веб-страница — это набор прямоугольных блоков. И одним из важных моментов, где нужно принять решение — это каким образом будет компоноваться веб-страница: с помощью таблицы, с помощью слоев или комбинированно. У каждого способа есть свои плюсы и минусы и тут нужно определиться, что для вас важнее.
Фиксированная или резиновая
Верстка может быть фиксированной (жесткой) т.е. во всех браузерах будет отобажено одно и то же количество пикселов. А может быть резиновой, т. е. сможет растягиваться по ширине хоть до бесконечности.
«Жесткий» дизайн («фиксированный») – дизайн, в котором величина каждой ячейки либо задана в пикселах, либо задаётся картинкой или другим элементом, помещённой в эту ячейку.
«Резиновый» дизайн – дизайн, в котором ширина одной или нескольких ячеек задаётся в процентах от ширины окна.
«Жесткий» дизайн гораздо проще разрабатывать, поскольку все элементы фиксированной ширины, расположены статически друг от друга. Так что тем, кто хочет иметь больший контроль над разметкой страницы, следует разрабатывать страницы фиксированной ширины, которая будет оставаться постоянной для всех пользователей, независимо от размера монитора или изменений размеров окна. Этот подход основан на принципах создания страниц в издательском деле, таких как поддержание постоянной сетки, отношений элементов, расположенных на странице, и удобные длины строк.
Недостатки:
У жёсткого дизайна есть только одно оптимальное разрешение экрана. Если при разработке упор был сделан на совместимость (оптимальный размер 640 х 480), то уже на 1024 х 768 поля занимают почти половину ширины страницы – и чем дальше, тем хуже.
Если при разработке акцент был сделан на «среднее» разрешение (800 х 600), то у пользователей маленьких мониторов появляется горизонтальная полоса прокрутки, и часть содержания им становится не видна. Некоторые разработчики ориентировались по своему монитору (1024 х 768), и у них даже для 800 х 600 (а это почти 50% всех пользователей) страница выглядит плохо – а для 640 х 480 обычно нечитабельна.
Достоинства:
- Страницы и столбцы с фиксированной шириной обеспечивают лучшее управление длинами строк. Слишком длинные строки неудобны для чтения;
- Страница будет выглядеть одинаково независимо от разрешения монитора. Это представляет огромный простор для создания сложных и стильных дизайнов.
Желание целиком контролировать отображение страницы означает своего рода выступление против среды. Веб – это не печатное издание; у него нет «правильных стандартов», а HTML – язык универсальный с логической разметкой.
Тут на помощь приходит «гибкий» дизайн. Веб-страницы по умолчанию гибкие. Текст и элементы HTML-файла попадают в окно броузера, заполняя все доступное пространство, вне зависимости от размеров монитора. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. Разработчиков поначалу шокирует непредсказуемость места появления элементов страницы, но потом они обычно обучаются обходиться без полного управления страницей.
Недостатки:
На больших мониторах длина строки может оказаться чрезмерной, что ухудшает условия для чтения. Результаты гибкого дизайна часто непредсказуемы.
Браузерам (всем, но особенно Нетскейпу 4 версии очень тяжело переваривать ячейки переменной ширины. Каждому, кто писал совместимый HTML, знакомы ячейки шириной 100%, которые не занимают всю свободную площадь; ячейки фиксированной ширины, которые занимают больше, чем им положено; ячейки с заданной одинаковой шириной, но неизменно выходящие разной ширины и т.д. – перечислять фокусы каждого из браузеров можно очень долго.
Отливка «резиновой» страницы занимает вдвое-втрое больше времени от аналогичной «жёсткой». Так что теперь видно, что однозначно ответить на вопрос, какой дизайн подходит именно вам должны вы сами.
Но учтите, что при использовании «жесткого» дизайна невозможно точно расположить таблицу относительно фонового изображения. Единственным недостатком (притом очень крупным) были шрифты фиксированного размера. Это было сделано из-за того, что при укрупнении размера шрифта, происходили неожиданные изменения на странице, не в лучшую, понятно, сторону. В связи с этим дизайн этого сайта имеет полностью гибкую структуру. Вы должны всегда помнить, что выбор размера шрифта – право пользователя. Ведь страницу вы делаете для него? Тогда пользователь должен выбирать как ему удобно смотреть вашу страницу.
Достоинства:
- гибкую страницу можно настроить для вывода на любом дисплее;
- страницы будут отображаться на мониторах с разным разрешением.
Заполнено все пространство монитора, отсутствует нежелательное свободное место. Дизайн наиболее близок по духу к HTML.
Можно использовать также комбинированный подход, когда страница состоит из столбцов (или фреймов), заданных комбинациями абсолютных и относительных размеров. В этом случае при изменении размера окна один столбец сохраняет прежнюю величину, в то время как остальные изменяют размер и заполняют свободное место. В большинстве случаеы наиболее предпочтительно использовать именно этот метод.
В заключении скажем, что в веб-дизайне нет строгих законов и правил. Выбор в любом случае за вами, но все же рекомендуется, если есть возможность, использовать блочный, а лучше резиновый дизайн. Хотя это дольше и сложнее, но это наиболее удобно пользователю, и близко по духу идее Web.
Верстка сайта также нераздельно связана с созданием таблицы стилей (css).