В этом уроке я хочу вам показать и подробно рассказать о так называемой резиновой верстке сайта, этим понятием награждают те сайты, которые растягиваются при изменении размера окна браузера или разрешения монитора. Итак делать мы будем сайт состоящий из шапки, 3-х колонок и подвал, в общем довольно стандартный вариант решения для сайта:
Для начала нам необходимо создать обычную html страничку, в это можете делать где вам больше нравиться я использую для этих целей Macromedia DreamWeaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример резиновой верстки сайта!</title>
</head>
<body style="padding:0; margin:0;">
</body>
</html>
Это просто пустая страница со всеми необходимыми параметрами языка, единственное, что я добавил это CSS стиль style="padding:0; margin:0;" который убирает все отступы чтобы у нас ни где не было белых пробелов.
Первое что нам необходимо сделать это так называемый каркас сайта:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" colspan="3"></td>
</tr>
<tr>
<td width="15%"></td>
<td width="70%"></td>
<td width="15%"></td>
</tr>
<tr>
<td width="100%" colspan="3"></td>
</tr>
</table>
Давайте разберем по порядку, я сделал таблицу, которая у нас будет растягиваться на ширину всего экрана за счет параметра width="100%", далее я убрал все отступы от таблицы и в ней самой, чтобы все вставляемые мной рисунки не имели пробелов, это осуществил с помощью параметров cellpadding="0" cellspacing="0" , ну и толщину стенок таблицы я сделал невидимой т.е. 0 с помощью параметра border="0".
Итак шапка здесь единственное, что мы изменим добавим это новый параметр Colspan=”3”, который говорит браузеру, что в этой строке объединены 3 столбца. Та же ситуация у нас и в подвале .
Двигаемся дальше давайте заполним шапку чтобы она у нас не была пустой:
<tr>
<td width="100%" colspan="3" background="up-bg.jpg"><img src="logo.jpg" alt="Логотип" /></td>
</tr>
Мы задали фоновый рисунок с помощью параметра background="up-bg.jpg", далее мы вставляем логотип с помощью img src="logo.jpg" параметр alt="Логотип" это альтернативное название рисунка его видно если в браузере отключена графика, что встречается достаточно редко. Вот собственно и все теперь шапка приобрела нормальный вид.
Пора переходить к телу будущего сайта здесь мы начнем с левой панели в которой у нас будет располагаться навигация по сайту.
<td width="15%" bgcolor="#F6E1AC"><h3 style="text-align:center; font-size:16px; color:#990033;”>Навигация по сайту:</h3>
<ul style="padding:5px; margin:5px; font-size:12px; color: #000000;">
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none; border-bottom: 0;">Игры</li>
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none; border-bottom: 0;">Фотографии</li>
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none; border-bottom: 0;">Животные</li>
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none; border-bottom: 0;">Гостевая книга</li>
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none; border-bottom: 0;">Форум</li>
<li style="background:#FFCC66; border: 1px solid #FF9900; list-style:none;">Чат</li>
</ul>
</td>
Как вы могли заметить здесь добавлено достаточно много стилей и они часто дублируются, это потому, что я не стал заводить отдельно таблицу стилей и просто приписываю каждому необходимому тэгу свой стиль, но в рамках этого урока это не страшно поскольку я верстаю только основные моменты, а не весь сайт и даже не полностью главную страницу.
Перейдем к разбору кода, первое что я изменил это цвет колонки bgcolor="#F6E1AC", затем я вставил заголовок <h3> и добавил ему стили, т.е. выронил его по центру text-align:center; изменил размер шрифта font-size:16px; и назначил цвет шрифта color:#990033.
Далее создаем меню или список <ul> здесь так же добавили стили назначили отступы padding:5px; margin:5px; ну и как в заголовке размер и цвет шрифта. Теперь пункты меню <li> здесь как вы могли заметить добавили так сказать красоты и оригинальности с помощью следующих параметров стилей background:#FFCC66; цвет фона border: 1px solid #FF9900; толщина рамки, стиль обводки и цвет рамки, list-style:none; с помощью этого параметра убрали точки в пунктах меню чтобы не портили красоты, ну и последнее border-bottom: 0; мы обнулили нижнюю часть рамки чтобы она не сливалась с верхней частью следующего пункта, как вы можете заметить этот параметр присутствует везде кроме последнего пункта меню.
Я думаю, с левой колонкой мы разобрались, переходим к основному содержанию:
<td width="70%">
<h1 style="text-align:center;">Львы</h1>
<img src="lev.jpg" alt="Лев" style="padding: 15px; float:left;" />
<p style="padding: 10px;">Львы — одни из немногих хищников, у которых ярко выражен половой диморфизм. Взрослые львы-самцы отличаются наличием гривы и выглядят намного крупнее львиц[1]. Гривы самцов бывают светлыми или тёмными. Существует мнение, что светлогривые львы обычно более смирные и покладистые, чем темногривые, хоть и слегка глуповатые[2]. Мех у львов короткий, его окрас сверху от песочного до рыжевато-коричневого, на брюхе почти белый. На кончике хвоста есть кисточка. Самцы весят обычно от 150 до 225[3] или 250 кг[4], в среднем — 188 кг[3]. Длина тела самца без хвоста — в среднем 170—250 см[3] (по другим данным — 180—240 см[1]), хвост — 90-105 см[3][4], высота в холке — около 123 см[3].</p>
<p>…</p>
…
Здесь всё просто мы сделали заголовок <h1> по центру, вставили фотографию льва назначили отступы от нее в 15px; и тут есть один параметр который мы не встречали раньше это float:left; он прижимает фотографию к левому краю при этом не дает возможность текс ту обтекать её на заданных отступах. И последнее сам текст оформленный в абзацы тегом <p> с заданными отступами.
Теперь давайте посмотрим правую колонку:
<td width="15%" bgcolor="#F6E1AC"><h3 style="text-align:center; font-size:16px; color:#990033;">Новости сайта:</h3>
<ul style="padding:5px; margin:5px; font-size:12px; color: #000000;">
<li><b>22/12/2003</b><br />
Случилось то чего вы долго
ждали, обновилось то чего не ожидали
и т.д. и т.п.
</li>
<li><b>22/12/2003</b><br />
Случилось то чего вы долго
ждали, обновилось то чего не ожидали
и т.д. и т.п.
</li>
…..
</td>
Здесь у нас как и с правой частью тот же фон, заголовок на список те же стили только пункты списка не стилизованы а стандартны единственное что здесь добавлена нового это тег <b> выделение текста жирным и <br /> переход на следующую строку.
Ну и наконец подвал:
<td width="100%" colspan="3" background="up-bg.jpg">
<p style="padding:20px; text-align:center">Copyright 2009 by Mysite.com все права защищены и т.д. и т.п.</p></td>
</tr>>
Здесь я думаю все понятно и просто и комментировать смысла не имеет. Это простейший пример резиновой верстки сайта который я вам хотел продемонстрировать, как я думаю вы поняли из урока основной принцип резиновой верстки заключается в том что вы выставляете размер таблиц и блоков в % а не в пикселях… Если у вас возникли какие либо вопросы пишите всегда отвечу.
Дата публикации:2009-11-19
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
