2017-11-01
162Верстка сайта
Верстка, каркас
Что такое верстка?
Верстка сайта – это расстановка исходного материала (баннеры, реклама, меню и.т.п.) по своим местам.
Кто такой верстальщик?
Это человек, который занимается версткой сайта, то есть собирает
из разнообразного материала уже готовый, рабочий сайт)
Какая бывает верстка?
Блочная верстка
На данный момент самая востребованная верстка, которая создаётся
с помощью слоёв, а именно блоков <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="текст".
Чтобы расставить блоки по своим местам, мы приписываем нужному
блоку свойство float, например 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="текст".
Преимущества и недостатки
Теперь мы знаем какая верстка что из себя представляет, но выбрать
надо одну, поэтому разберём достоинства и недостатки каждой верстки.
Блочная верстка:
+ компактный код, небольшой вес страниц
+ отличная индексация поисковиками
+ слои можно накладывать друг на друга
+ быстрая загрузка страниц
- сама по себе верстка сложная
- трудно обеспечить одинаковый вид во всех браузерах
- при уменьшении разрешения экрана/браузера блоки съезжают
друг на друга (нужна настройка в стилях под разрешения экрана)
Табличная верстка:
+ сама по себе верстка простая
+ легко обеспечить одинаковый вид во всех браузерах
+ резиновая верстка, при изменении разрешения экрана,
таблица формируется автоматически, растягивая и сжимая ячейки.
- много лишнего кода, большой вес страниц
- не каждый дизайн возможно создать
- медленная загрузка страниц
Кратко выводы:
- блочная верстка намного лучше чем табличная, но только в том случае, если вы добьётесь хорошего отображения сайта при разных разрешениях экрана
- если вы недостаточно опытны, используйте табличную верстку
