varve.ru/forum

Привет всем, кто хочет научиться верстать сайты. Для этого вы изучите основы HTML + CSS

Простейший урок - это различия в использовании дивной, табличной и резиновой верстки.

В чём их отличие ? Для этих 3х видов верстки применяются теги <div> </div> и <table> </table>

Резиновая верстка подразумевает, что созданная вами html-страница будет меняться в ширину в зависимости от количества контента

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

Давайте перейдём к делу.

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

Таблица создается вот таким кодом

Кроме того, учитывайте и тот факт, что современные сайты - это не набор html-файлов. Код html может располагаться изначально в виде html-макета. Затем макет может преобразовываться в специальный файл шаблона, например с расширением tpl или каким-то еще.

Разработчики всеми способами стремятся отделить логику работы сайта от его внешнего вида, а html-код от php кода. В этом случае и используются файлы шаблонов, примером такого применения может служить известная библиотека SMARTY.

И наконец пример почти полноценной страницы построенной только лишь на табличной верстке



Для наглядности я оставил бордюры в таблице, чтобы вы видели из каких элементов она состоит. Убираем бордюры и наша страница становится именно такой, как мы хотим.

Сохраните её из браузера и загляните в код

Теперь пришло время показать Вам пример простейшей страницы (макета) сверстанного исключительно на DIV'ах.

Вот ссылка -

Просто откройте эту страницу в браузере, сохраните её себе, а затем откройте локально её код и сами всё увидите.

Замечу, что описание стилей находится в файле css/style_x.css