Универсальный табличный макет



В этом уроке мы рассмотрим построение двух колоночного табличного макета. Разберем принцип построения табличного макета и разницу между фиксированным макетом м резиновым (макет растягивается на всю ширину экрана).

У табличной верстки сайтов есть как плюсы, так и минусы. Главным плюсом является простота реализации. Макет - это уже практически готовый сайт.

С помощью таблицы CSS фиксированный макет преобразуем в резиновый. Одновременно будем использовать таблицы стилей.

Структуру сайта мы изучали на уроках "HTML новичкам". В качестве текстового редактора можно использовать блокнот, но удобнее работать в Notepad++ (скачать можно здесь). В этом редакторе весь код html подсвечивается и помогает в поиске ошибок.

На любом диске вашего компьютера создайте структуру сайта, например - папка "My_site", внутри создайте папку "images" (для хранения картинок) и страницу index.html

Макет сайта.Мой сайт

Организовав правильную структуру папок, вам легко будет работать в дальнейшем. Все последующие примеры будут правильно работать именно для такой структуры папок. Располагая материал в другой структуре, придется вносить изменения в код.




Простой макет двух колоночного сайта.


Макет двух колоночного сайта

Делим нашу страницу условно на структурные элементы. Мы получим 3 строки и 2 столбца.

В программе Notepad++ открываем созданную страницу index.html и набираем в ней основу страницы HTML.

Пример записи кода:

<html> <head> <title>Табличный макет</title> </head> <body> </body> </html>

Вставляем в нашу страницу между тегами <body> </body> наш код таблицы.

<html> <head> <title>Табличный макет</title> </head> <body> <table> <tr></tr> <tr></tr> <tr></tr> </table> </body> </html>

Теги <table> </table> обозначают начало и конец таблицы, а теги <tr> </tr> - строки в ней. У нас 3 строки, следовательно 3 пары тегов строк.

Далее. У нас 2 столбца, которые обозначаются тегами <td> </td> , Их 2, но они располагаются во второй строке. Поместим в эту строку дополнительно таблицу с 2-мя строками (для меню и контента).

Теперь ваша страница должна выглядеть так.



Пример записи кода:

<html> <head> <title>Табличный макет</title> </head> <body> <table> <tr> <td> Здесь будет шапка сайта</td></tr> <tr> <td><table> <tr> <td>Здесь будет меню сайта</td> <td>Здесь - контент</td></tr> </table></td> <tr> <td colspan="2"> Здесь - низ сайта</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Как видите, наша страница выглядит не так как мы себе представляем. Это потому, что мы не задали нашей странице никаких параметров.

Далее рассмотрим: Универсальный табличный макет (продолжение)