 |
 |
 |
 |
 |
 |
Главная
Заказать статью
Связь с автором
Заказать сайт
Статьи
|
|
Резиновый дизайн - заканчиваем работу над сайтом в DreamweaverВ данном случае мы делаем резиновый дизайн, значит нам нужно сделать размеры сайта не жесткими, а именно указать некоторые размеры в процентах, а не в пикселях, чтобы наш сайт был всегда по всей ширине окна, то есть заполнял окно браузера на 100% (www.baxtop.ru может послужить примером). После прошлого урока у нас получился следующий код: <html> Для того, чтобы в дальнейшем не путаться возьмем из кода шапку нашего сайта и для наглядности расставим код немного удобней. <tr> <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>
<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> <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> <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>
На данном этапе бывали проблемы, поэтому немного забежим вперед, чтобы потом было более понятно. Так вот, в дальнейшем мы преобразуем наш сайт в резиновый, мы сделаем его на весь экран браузера, в связи с этим он разъедется и получится дыра, пустое пространство. Для того, чтобы нам его заполнить опять же понадобятся маленькие изображения для бекграунда. Здесь как хотите, в зависимости от вашего дизайна берете либо первый вариант либо второй, то есть нужно отрезать полоски от шапки и пусить их на задний фон как продолжение. А теперь непосредственно к делу.
Запускаем фотошоп, открываем сохраненный сайт с направляющими, увеличиваем область, показанную на рисунке.
Прямо на стыке двух изображений, которые разделяются вертикальной направляющей мы должны вырезать узкую вертикальную полоску, как показано на рисунке ниже, а именно 1*87 пикселей (2*87, 3*87 тоже можно). Это требуется для того, чтобы заполнить пустое пространство между двух изображений фоном, который будет растягиваться в зависимости от ширины монитора. И чтобы элементы хорошо состыковывались и не образовывали резких границ, полоска вырезается на стыке изображений. В большинстве случаев полоска вырезается слева от направляющей (то есть первый вариант), а правая картинка слегка может быть подтерта ластиком (что мы и сделали ранее), чтобы был плавный переход. Я выбрал второй вариант, поскольку это моя фантазия, у вас все будет зависеть от вашего дизайна. На сайте http://www.baxtop.ru/, например, вырезано слева, на данном учебном сайте - справа. Главное понимать что такое бекграунд. Бекграунд имеет свойство повторения, когда пространство большое, а само фоновое изображение маленького размера.Узкая полоска в данном случае размножается по горизонтали и если, например, в нее попадет один черный пиксель, то в размноженном виде получится черная горизонтальная линия. Берем инструмент Рамка и выделяем вертикальную узкую полоску от верха до горизонтальной направляющей. Жмем Enter. Происходит кадрирование у нас должна остаться узкая выделенная часть - изображение шириной в 1 пиксел и высотой 87 пикселов, идем в Файл - Сохранить для Web и устройств. Сохраняем в папку images, называем bg.
Точно также вырезаем изображение для второй картинки. Для этого опять берем инструмент Рамка и выделяем узкую вертикальную полоску от направляющей шириной в 1 пиксел и высотой 101 пиксел. Опять сохраняем для веб, даем имя bg1.
Теперь у нас получилось два изображения: одно высотой 87 пикселей (как у изображений, расположенных в первой строке!!!), с именем bg. <tr> и второе высотой 101 пиксель (как у изображений, расположенных во второй строке!!!) с именем bg1. <tr> Немного корректируем код. Делаем ширину всей таблицы 100% <table width="100%" height="750" border="0" cellpadding="0" cellspacing="0"> Желательно прописать ширину каждой колонки такую же, как и ширина изображения, находящегося в этой колонке. То есть первая ячейка (колонка) содержит в себе изображение с шириной width="177", значит эту ячейку надо тоже сделать такой же ширины, вставляем width="177" в ячейку (выделено красным цветом). Во вторую ячейку вставляем бекграунд картинки bg. С третьей строкой обстоит тоже самое, что и с первой ячейкой: тоже берем ширину картинки width="214" и копируем в саму ячейку.
<tr> <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> Со второй строкой проделываем тоже самое! В первую и третью ячейку дописываем ширину, находящихся в них изображений, а во вторую ячейку вставляем бекграунд нашего второго изображения, сделанного в фотошопе bg1. <tr> <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> и в ячейке подвала <td width="750" height="45" colspan="3" background="images/kadrir.jpg"></td> можно удалить width="750", так как не нужна нам пока эта ширина. В итоге код получается таким: <html> последние расценки на отделочные работы А сайт принимает новый вид. Если что не понятно в моих объяснениях, пишите на e-mail, который найдете в контактной информации, пострараюсь помочь разобраться с непонятками!
Теперь попробуйте изменить размер окна программы Dreamweaver или браузера. У нас получился резиновый дизайн. Можно было бы на этом остановиться, но лучше уделить сайту еще немного времени и сделать его структуру немного надежней, что защитит нас от возможных капризов таких браузеров как google chrome или safari, например. Уроки по созданию дизайна сайта в Photoshop
|
|
© 2009-2011 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!! |
|
