Что такое верстка ?
(представьте что у вас есть куча картинок и текста,
а также банеры, реклама, менюшка и.т.п., вот чтобы
всю эту груду материала превратить в сайт, вам нужно
сверстать его, а именно расставить всё по своим местам)
Кто такой верстальщик ?
(это человек, который занимается версткой, то есть собирает
из кучи разнообразного материала уже готовый, рабочий сайт)
Какая бывает верстка ?
Блочная верстка
На данный момент самая востребованная верстка, которая создаётся
с помощью слоёв, а именно блоков <div>, то есть вы создаёте какое
то количество блоков, которые как слои накладываются друг на друга,
кто пользуется фотошопом думаем хорошо понимает что такое слои
вы можете в любой момент удалить или перенести любой требуемый
вам блок, ниже смотрите пример блочной верстки сайта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Название</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="sidebarL">
</div>
<div id="sidebarR">
</div>
<div id="content">
</div>
<div id="footer">
</div>
<div>
</body>
</html>
То есть мы берём общий блок, помещаем внутрь него несколько других
блоков, так же мы можем в любой из блоков, поместить другие блоки и
в любой момент возможно скрыть или удалить любой нужный нам блок.
Каждый блок имеет свой личный идентификатор id="текст", к которому
мы привязываем различные правила в css стилях для их общего вида.
Чтобы расставить блоки по своим местам, мы приписываем нужному
блоку свойство float в css стилях, например float:left; блок слева и.т.п.
Табличная верстка
Создаётся с помощью обычной таблицы, таблица делится на колонки,
а колонки на ячейки, в каждой ячейке можно расположить то, что вам
требуется шапка, меню, контент, подвал и всё что должно быть по
задумке на сайте. Получается эдакая сетка, внутри которой уже
расположены разнообразные элементы, каждый в своей клеточке.
Рассмотрим ниже пример табличной верстки сайта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Название</title>
</head>
<body>
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td height="30" colspan="3" bgcolor="#F0FC0A">
Заголовок сайта
</td>
</tr>
<tr>
<td bgcolor="#990033" valign="top">
Левая колонка
</td>
<td bgcolor="#999966" valign="top">
Контент
</td>
<td bgcolor="#09EDD6" valign="top">
Правая колонка
</td>
</tr>
<tr>
<td height="30" colspan="3" bgcolor="#cccccc">
Подвал страницы
</td>
</tr>
<table>
</body>
</html>
У нас есть общая оболочка <table>, уже внутри неё распологаются
колонки <tr>, а внутри колонок находятся ячейки <td> именно в этих
ячейках будут распологаться все нужные вам на вашем сайте элементы,
оболочке, колонкам и ячейкам так же как и в блочной верстке мы можем
назначить идентификаторы id="текст", которым зададим стили в css.
Преимущества и недостатки
Теперь мы знаем какая верстка что из себя представляет, но выбрать
надо одну, поэтому разберём достоинства и недостатки каждой верстки.
Блочная верстка:
+ компактный код, небольшой вес страниц
+ отличная индексация поисковиками
+ слои можно накладывать друг на друга
+ быстрая загрузка страниц
- сама по себе верстка сложная
- трудно обеспечить одинаковый вид во всех браузерах
- при уменьшении разрешения экрана/браузера блоки съезжают
друг на друга (нужна настройка в стилях под разрешения экрана)
Табличная верстка:
+ сама по себе верстка простая
+ легко обеспечить одинаковый вид во всех браузерах
+ резиновая верстка, при изменении разрешения экрана,
таблица формируется автоматически, растягивая и сжимая ячейки.
- много лишнего кода, большой вес страниц
- не каждый дизайн возможно создать
- медленная загрузка страниц
Кратко выводы:
- блочная верстка намного лучше чем табличная, но только в том
случае, если вы добьётесь кроссбраузерности и хорошего
отображения сайта при разных разрешениях экрана
- если вы недостаточно опытны, используйте табличную верстку
Кроме того существуют такие понятия как...
Фиксированная верстка
Это верстка, в которой мы задаём каждому элементу фиксированный
размер, например мы прописываем что ширина сайта будет 1000 px
это значит, что если у посетителя нашего сайта экран монитора равен
500 px то наш сайт не поместиться у него полностью на экране и при
просмотре сайта на таком экране появится полоса прокрутки, или если
у посетителя экран монитора равен 2000 px то наш сайт он увидит
полностью но не на весь экран, а шириной в 1000 px, которую мы
установили и не более, такой размер можно дать любым элементам
вашего сайта, как всем так и отдельным.
Например сайт, на котором вы сейчас находитесь имеет фиксированную
ширину 800 px, ширина нашего рабочего монитора 1368 px, если мы
уменьшим окно браузера вдвое, то появляется полоса прокрутки, а если
открыть наш сайт на большом мониторе к примеру в 2000 px, то сайт
останется неизменной ширины, хотя вы всегда можете увеличить
масштаб окна вашего браузера и смотреть сайт во всё его окно.
Резиновая верстка
Это верстка, при которой сайт растягивается на ширину равную вашему
разрешению экрана монитора, то есть если у вас монитор равен 500 px
то сайт будет шириной 500 px, а если ваш монитор равен 2000 px то и
сайт растянется и станет 2000 px, то есть ширина сайта полностью
зависит от разрешения вашего монитора или окна браузера и может
как растягиваться так и сжиматься до нужного размера.
Происходит это за счёт табличной верстки, другой верстки с указанием
размеров в процентах width:80%;, фиксированой и резиновой верстки
одновременно, например сайдбар фиксировано 200 px, а контент auto.
Семантическая верстка
Верстка, где тэги используются в соответствии со структурой документа,
то есть валидная верстка, которая соответствует рекомендациям W3C.
Проще говоря, вы должны соблюдать правила оформления документа,
а именно правила для того документа, который вы редактируете.
Как это происходит, если вы редактируете страницу HTML то ищем
спецефикацию HTML и оформляем всё на странице по её правилам.
Например:
- заголовки оформляют с помощью тэгов от <h1> до <h6>
- абзац <p>
- список <ul> - ненумерованный, <ol> - нумерованный
- <strong> - полужирным, <em> - курсивом
- верстка блочная
- в таблицах размещаем только табличные данные
- идентефикаторы, классы и.т.п. должны иметь понятные имена
например ссылка = link, шапка = header, список = list
и многое другое...
Валидная верстка
Это соблюдение стандартов опять же W3C, сайты, которые созданы
при помощи валидной верстки практически во всех браузерах выглядят
одинаково, что говорит о их кроссбраузерности и даёт высокую оценку.
Как узнать является ли ваш сайт, страница валидными?
Очень просто идём СЮДА и проверяем, вводим адрес нужного сайта,
страницы и жмём chek и смотрим результаты, если валидатор найдёт
ошибки или предупреждения значит ваш сайт, страница не валидны.
Кроссбраузерная верстка
Это значит сайт выглядит и работает одинаково в популярных браузерах.
У каждого браузера есть свои понятия о том, как должна выглядить
страница с определёнными тэгами, или некоторые тэги вообще не
воспринимаются, наша задача сделать сайт всебраузерным, а значит
использовать haki или отдельные css стили для каждого браузера.
На данный момент популярными считаются браузеры:
Firefox, Opera, Chrome, Safari, IE
Главные наши враги, это старые версии браузера IE5, IE6, которые
не хотят нормально показывать сайты, уродуют их и отключают скрипты,
из за чего зайдя на сайт можно увидеть его перекошенным, кривым,
со съехавшими блоками и ссылками, без баннеров или с неработающим
меню, авторизацией или комментариями (зависит от технологии).
