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



Продолжаем строить табличный макет сайта.

Для удобства создадим таблицу стилей и с помощью файла CSS будем управлять дизайном. В программе Notepad++ создаем новую страницу style.css и прописываем свойства нашего шаблона. Присвоим атрибутам таблицы индивидуальные идентификаторы id .

Основной таблице присваиваем идентификатор id="conteiner" и зададим свойства border="0" cellpadding="0" cellspacing="0". Смотри урок.

Первой строке таблицы (шапка сайта) присваиваем   id="header" и пишем заголовок с использованием изображения и текста  <h1><img src="image/logo1.png" width="100" height="100" >Здесь Ваш логотип</h1>.

Во второй строке встроена таблица, которой присваиваем   id="center_table" и свойства  border="0" cellpadding="0" cellspacing="0".

Соответственно строкам (меню сайта)  id="menu" и заголовок <h2>Меню</h2>, (контент)  id="content" и заголовок  <h1>Табличный макет<h1>. Названия заголовков у вас будут свои.

И третья строка (низ сайта)  id="footer" с абзацем <p>Здесь - низ сайта<p>. Выравниваем абзац по центру  align="center" и для данного абзаца назначаем свой  id="footer_style"


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

<html> <head> <title>Табличный макет</title> </head> <body> <table id="conteiner" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="header"> <h1><img src="../Poleznoe/Les_Maket_saita/image/logo1.png" width="100" height="100" />Здесь Ваш логотип</h1></td> </tr> <tr> <td><table id="center_table" border="0"cellpadding="0"cellspacing="0"> <tr> <td id="menu"><h2>Меню</h2></td> <td id="content"><h1>Табличный макет</h1></td> </tr> </table></td> <tr> <td id="footer"><p align="center" id="footer_style">Здесь - низ сайта</p></td></tr> </table> </body> </html>

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

    ПРИМЕР


Кое-что уже изменилось, но этого недостаточно. Приступаем к формированию таблицы стилей. Обязательным условием является присоединение таблицы стилей <link href="css/style.css" rel="stylesheet" type="text/css" /> к HTML странице.


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

    Таблица стилей CSS

<html> <head> <title>Табличный макет</title> <link href="../Poleznoe/Les_Maket_saita/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="conteiner" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="header"><h1><img src="../Poleznoe/Les_Maket_saita/image/logo1.png" width="100" height="100" />Здесь Ваш логотип</h1></td> </tr> <tr> <td><table id="center_table" border="0" cellpadding="0"cellspacing="0"> <tr> <td id="menu"><h2>Меню</h2></td> <td id="content"><h1>Табличный макет</h1></td> </tr> </table></td> <tr> <td id="footer"><p align="center" id="footer_style">Здесь - низ сайта</p></td></tr> </table> </body> </html>

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

    ПРИМЕР


Тема урока "Универсальный табличный макет". В чем же его универсальность? Мы сейчас создали фиксированный макет шириной ( width)800 пикселей. Это прописано в стилях. Давайте поменяем ширину (width) на 100% и посмотрим результат.


    Таблица стилей CSS

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

    ПРИМЕР


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

Мы рассмотрели двухколочный макет. Так же можно создать 3-х колоночный, добавив еще один столбец.


Далее рассмотрим: Блочные элементы