Типы верстки

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

Фиксированная верстка сайта отличается среди других видов HTML-верстки четко определенными размерами элементов. То есть, элементы веб-страницы имеют фиксированные размеры в пикселях. Основным преимуществом фиксированной верстки является тот факт, что HTML-кодер легко подгонит дизайн шаблона до пикселя, используя стили. Главным недостатком фиксированной верстки является, как раз таки, фиксированные размеры шаблона. При просмотре веб-страницы сайта с шириной шаблона 1000 px, на мониторе с разрешением в 1400px (по ширине), по бокам страницы остается свободное пространство в 200px. А при просмотре html-страницы на мониторе с разрешением в 900px (по ширине), часть страницы будет за кадром монитора, снизу появится скролбар (полоса прокрутки), что не очень удобно для пользователей.

Резиновая верстка сайта отличается от фиксированной верстки относительными размерами элементов веб-страницы (процентное отношение), все элементы соответственно имеют относительные размеры, в зависимости от размеров своих родительских элементов. Соответственно блок, имея ширину 80% от своего родительского элемента, который может иметь ширину как 10px так и 100000px. И от ширины родительского блока вычисляется 80%. В свою очередь родительский блок так же может иметь относительный размер. И, в конечном итоге, всё определяется шириной окна браузера. В отличие от фиксированной верстки, резиновая верстка позволяет адаптировать шаблон под любой тип и разрешение монитора, выводя элементы страницы в процентном отношении к монитору. Отчего и появилось ее название «резиновая верстка». Недостатком резиновой верстки, как правило, является нестабильность дизайна сайта, который также меняется в зависимости от разрешения монитора, и относительная сложность самой верстки. Хотя можно адаптировать дизайн шаблона сугубо под резиновую верстку.

В этой статье разберем пример фиксированной верстки, как более простой вариант для начинающих. Можно разместить допустим логотип, т.к. многие веб-мастера задают вопрос как разместить логотип на сайте ? вот как вставить его, хотя сложного нечего нет. В программе Notepad++ или в любом другом редакторе подходящем, нужно создать родительский контейнер. Выражение имеет вид: блок div родительский, атрибут id, который вам потребуется для задания стилей css для данного блока. Потом внутри него выводите логотип вашего сайта через тег img и указываете атрибут alt, который может иметь произвольное значение. Тут так же можно еще добавить, по поводу атрибута alt, т.к. часто возникают споры, зачем он нужен этот атрибут вообще, раньше да, у многих траффик был ограничен, и многие отключали изображения для экономии но сейчас оно не следует. Однако это не совсем правильно хоть и логика правильная, дело в том что, бывает так что скорость соединения низкая, или же сервер не выдерживает нагрузку и изображения не загружаются до конца, и при таком вот варианте будет отображен текст и пользователю будет понятно что за изображением, но вопрос остается вопросом и по этому еще до сих пор спорят, ну конкретно общая рекомендация — лучше оставлять этот атрибут.

Результат Вы можете увидеть, открыв страницу вашего сайта. Вот как это выглядит на примере:

Как видите, логотип разместился в углу. Наша задача переместить его в середину. Так же нужно убрать имеющиеся отступы.

Они появляются потому,что тег body имеет свои какие-то заранее уже заготовленные отступы и поля. Поэтому, чтобы их не было, нужно их сразу обнулить. Выражение обнуления полей имеет такой вид:

Если обновить страницу, то теперь никаких полей нет.

Теперь можно приступать к контейнеру. Продолжаем работать в Notepad++ или другом редакторе в котором Вы работаете. Записываем выражение такого вида:

Это выражение можно расшифровать так:

Первая строка: значок # — селекторid, container – его название
Вторая строка: свойство margin, через которое Вы выставите логотип по центру; 0 – означает, что отступы сверху и снизу нулевые; «авто» — слева и справа автоматическое выравнивание.
Третья строка: размер контейнера – 717 рх
Размер контейнера можно найти в папке images, где расположена
картинка вашего логотипа: