Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Резиновый дизайн - заканчиваем работу над сайтом в Dreamweaver

В данном случае мы делаем резиновый дизайн, значит нам нужно сделать размеры сайта не жесткими, а именно указать некоторые размеры в процентах, а не в пикселях, чтобы наш сайт был всегда по всей ширине окна, то есть заполнял окно браузера на 100% (www.baxtop.ru может послужить примером).

После прошлого урока у нас получился следующий код:

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="750" height="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td>
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td>
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td>
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td><img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td width="750" height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

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

<tr>
<td><img src="images/index_01.jpg" width="177" height="87" alt=""></td>

<td><img src="images/index_02.jpg" width="359" height="87" alt=""></td>

<td><img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>


<tr>
<td><img src="images/index_04.jpg" width="177" height="101" alt=""></td>

<td><img src="images/index_05.jpg" width="359" height="101" alt=""></td>

<td><img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

Вы же помните, что наша шапка состоит из двух строк и трех колонок? Вот наша первая строка и три колонки

<tr>
<td><img src="images/index_01.jpg" width="177" height="87" alt=""></td>

<td><img src="images/index_02.jpg" width="359" height="87" alt=""></td>

<td><img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>

И вот соответственно вторая строка и ее три колонки

<tr>
<td><img src="images/index_04.jpg" width="177" height="101" alt=""></td>

<td><img src="images/index_05.jpg" width="359" height="101" alt=""></td>

<td><img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

На данном этапе бывали проблемы, поэтому немного забежим вперед, чтобы потом было более понятно. Так вот, в дальнейшем мы преобразуем наш сайт в резиновый, мы сделаем его на весь экран браузера, в связи с этим он разъедется и получится дыра, пустое пространство. Для того, чтобы нам его заполнить опять же понадобятся маленькие изображения для бекграунда. Здесь как хотите, в зависимости от вашего дизайна берете либо первый вариант либо второй, то есть нужно отрезать полоски от шапки и пусить их на задний фон как продолжение. А теперь непосредственно к делу.

Запускаем фотошоп, открываем сохраненный сайт с направляющими, увеличиваем область, показанную на рисунке.

Прямо на стыке двух изображений, которые разделяются вертикальной направляющей мы должны вырезать узкую вертикальную полоску, как показано на рисунке ниже, а именно 1*87 пикселей (2*87, 3*87 тоже можно). Это требуется для того, чтобы заполнить пустое пространство между двух изображений фоном, который будет растягиваться в зависимости от ширины монитора. И чтобы элементы хорошо состыковывались и не образовывали резких границ, полоска вырезается на стыке изображений.

В большинстве случаев полоска вырезается слева от направляющей (то есть первый вариант), а правая картинка слегка может быть подтерта ластиком (что мы и сделали ранее), чтобы был плавный переход. Я выбрал второй вариант, поскольку это моя фантазия, у вас все будет зависеть от вашего дизайна. На сайте http://www.baxtop.ru/, например, вырезано слева, на данном учебном сайте - справа.

Главное понимать что такое бекграунд. Бекграунд имеет свойство повторения, когда пространство большое, а само фоновое изображение маленького размера.Узкая полоска в данном случае размножается по горизонтали и если, например, в нее попадет один черный пиксель, то в размноженном виде получится черная горизонтальная линия.

Берем инструмент Рамка и выделяем вертикальную узкую полоску от верха до горизонтальной направляющей. Жмем Enter. Происходит кадрирование у нас должна остаться узкая выделенная часть - изображение шириной в 1 пиксел и высотой 87 пикселов, идем в Файл - Сохранить для Web и устройств. Сохраняем в папку images, называем bg.

Точно также вырезаем изображение для второй картинки. Для этого опять берем инструмент Рамка и выделяем узкую вертикальную полоску от направляющей шириной в 1 пиксел и высотой 101 пиксел. Опять сохраняем для веб, даем имя bg1.

Теперь у нас получилось два изображения:

одно высотой 87 пикселей (как у изображений, расположенных в первой строке!!!), с именем bg.

<tr>
<td>
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td>
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td>
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>

и второе высотой 101 пиксель (как у изображений, расположенных во второй строке!!!) с именем bg1.

<tr>
<td>
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td>
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td>
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

Немного корректируем код.

Делаем ширину всей таблицы 100%

<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">

Желательно прописать ширину каждой колонки такую же, как и ширина изображения, находящегося в этой колонке. То есть первая ячейка (колонка) содержит в себе изображение с шириной width="177", значит эту ячейку надо тоже сделать такой же ширины, вставляем width="177" в ячейку (выделено красным цветом).

Во вторую ячейку вставляем бекграунд картинки bg.

С третьей строкой обстоит тоже самое, что и с первой ячейкой: тоже берем ширину картинки width="214" и копируем в саму ячейку.

<tr>
<td width="177"><img src="images/index_01.jpg" width="177" height="87" alt=""></td>

<td width="100%" background="images/bg.jpg"><img src="images/index_02.jpg" width="359" height="87" alt=""></td>

<td width="214"><img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>

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

<tr>
<td width="177"><img src="images/index_04.jpg" width="177" height="101" alt=""></td>

<td width="100%" background="images/bg1.jpg"><img src="images/index_05.jpg" width="359" height="101" alt=""></td>

<td width="214"><img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>

и в ячейке подвала <td width="750" height="45" colspan="3" background="images/kadrir.jpg"></td> можно удалить width="750", так как не нужна нам пока эта ширина.

В итоге код получается таким:

<html>
<head>
<title>Все о компьютерах</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="177">
<img src="images/index_01.jpg" width="177" height="87" alt=""></td>
<td width="100%" background="images/bg.jpg">
<img src="images/index_02.jpg" width="359" height="87" alt=""></td>
<td width="214">
<img src="images/index_03.jpg" width="214" height="87" alt=""></td>
</tr>
<tr>
<td width="177">
<img src="images/index_04.jpg" width="177" height="101" alt=""></td>
<td width="100%" background="images/bg1.jpg">
<img src="images/index_05.jpg" width="359" height="101" alt=""></td>
<td width="214">
<img src="images/index_06.jpg" width="214" height="101" alt=""></td>
</tr>
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>

return_links(1); ?>

А сайт принимает новый вид. Если что не понятно в моих объяснениях, пишите на e-mail, который найдете в контактной информации, пострараюсь помочь разобраться с непонятками!

Теперь попробуйте изменить размер окна программы Dreamweaver или браузера. У нас получился резиновый дизайн.

Можно было бы на этом остановиться, но лучше уделить сайту еще немного времени и сделать его структуру немного надежней, что защитит нас от возможных капризов таких браузеров как google chrome или safari, например.

Далее

Уроки по созданию дизайна сайта в Photoshop
Добавление картинки в дизайн сайта
Добавление второго изображения в дизайн нашего сайта
Усложнение дизайна сайта добавлением картинки
Изменение контрастности изображения. Работа с текстом
Нарезка готового дизайна сайта в Photoshop
Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе
Продолжаем работу над сайтом в Adobe Dreamweaver CS3
Дорабатываем html-код сайта в Adobe Dreamweaver CS3
Доработка сайта в Dreamweaver - добавление колонки меню
Резиновый дизайн - заканчиваем работу над сайтом в Dreamweaver
Чтобы дизайн сайта не разъехался в google chrome и safari
Жесткий дизайн сайта
Добавляем независимую таблицу в код - создаем бордюры
Убираем ненужные параметры
Добавление бэкграунда в бордюры сайта
Не отображается бэкграунд в пустой ячейке таблицы

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!