Вёрстка сайта

Итак, основные знания, чтобы создать простенький сайт на HTML у вас имеються. Если нет, начинайте с первой страницы. Для современного интернета, html сайт в чистом виде, это вчерашний день. Современные профессиональные сайты - это динамичные сайты, способные показать одну и ту же страницу по разному, для разных пользователей, да и вообще на многое способные. Они создаются с использованием языков програмирования и баз данных. Но, основа любого сайта это HTML, и от этого пока никуда не деться. Поэтому информация, которую вы уже изучили (надеюсь) будет актуальна и востребована, если вы решите продолжить изучение сайтостроения.

В HTML вёрстке в основном используется два метода:

• Табличная вёрстка;
• Блочная вёрстка;

Табличная вёрстка веб сайтов

Поскольку мы с вами научились работать с таблицами, я думаю, вы уже догадались каким образом можно создать страницу с их использованием. Создаётся главная таблица на всю страницу, с необходимым количеством строк. Строки разбиваются на столбцы, так как замыслил веб-мастер. При необходимости используются подтаблицы. Можно создать несколько отдельных таблиц, в общем включайте свою фантазию. Вот здесь можно посмотреть готовый шаблон и его html код.

Говоря о преимуществах табличной вёрстки сайта обычно указывают следующие моменты:

• Проще и быстрее в разработке;
• Позволяет легко создать многоколоночный макет;
• При изменении расширения экрана все элементы остаются на своих местах;
• Представляет широкие дизайнерские возможности;
• В разных браузерах отображается практически одинаково.

В числе недостатков указывается:

• Более длительная загрузка страницы;
• Большой объём кода, в котором порой сложно разобраться;
• Затруднения при индексации страницы поисковиками;
• Нет разделения между информационным текстом и кодом оформления;

Блочная вёрстка веб сайтов

На ней остановимся подробнее. Итак, возьмем такой код:
<div >Тестовый блок</div >увидим следующее:

Возможности для редактирования блоков очень богатые, как вы наверное догадываетесь. Можно задавать фоновый рисунок, поля, отступы от других элементов, различные свойства текста, прозрачность фона и т.д. Совершенно ни к чему загромождать эту страницу подробными спецификациями. Всё это можно найти в справочниках, а их в сети хватает. Вот здесь можно посмотреть готовый шаблон и его html код.

В целом вёрстка слоями куда более сложное занятие. По умолчанию блоки стараются расположиться один над другим, и порой довольно трудно заставить их встать и оставаться там, где хочет разработчик. Разные браузеры отображают страницы свёрстанные блоками, по разному. Например Internet explorer включает поля padding в общую ширину блока, а большинство остальных браузеров прибавляют поля к ширине. Естественно картинки получаются разные.

Но, тем не менее, именно вёрстка блоками считается более прогрессивной, и новое програмное обеспечение разрабатывается с учётом этого. И последнее о чём хотелось бы сказать, так это о том, что на мой взгляд следует избегать фанатизма. Если в каком-то месте таблица лучше и проще, надо ставить таблицу и особо не заморачиваться.

На главную Дальше