пособие для чайников
Меняем дизайн. Создаем блог «Письма друзьям». Урок 7 |
Надеюсь, вы достаточно хорошо изучили код шаблона "Myblog" и теперь можно приступать к самому интересному – изменению дизайна блога. Изначально в шаблоне сделан дизайн «Фото на песке». Сейчас вы сможете прочувствовать уникальные возможности таблиц стилей CSS и поймете на сколько они облегчили жизнь веб-мастерам.На смену дизайна блога уйдет всего несколько секунд. 1. Открываем из архива Myblog папку с дополнительными материалами myblog2. 2. Из папки Myblog2 копируем папку images и вставляем ее вместо папки myblog/images нашего активного шаблона. И вот уже перед нами совсем другой дизайн, который я назвала «Письма друзьям». Мы сменили дизайн, даже не прикасаясь к коду шаблона Myblog. Если у вас возникнет желание внести изменения в этот дизайн – флаг вам в руки. PSD – исходники вы найдете в папках myblog1, myblog2, myblog3. Прежде чем вы приступите к дизайнерским экспериментах , хочу дать несколько рекомендаций.Не забывайте, что высота и ширина изображений должна соответствовать высоте и ширине DIVов в которые они будут вставляться, иначе будет полная … Для удобной кройки изображений в Фотошопе используйте направляющие. Сначала выстройте направляющими границы блоков, затем размещайте изображение.Изображение в блоке art_top лежит под изображением, в блоке header, поэтому задний план блока header должен быть прозрачным, если вы хотите, чтобы через него была видна картинка блока art_top. Если в header вы не помещаете картинку, то обязательно задайте фиксированную высоту блока, иначе он свернется и контент закроет изображение блока art_top. Аналогичная картина и с блоками art_bot и footer. Будьте внимательны при размещении изображений в вышеупомянутых блоках. Посмотрите на дизайн «Фото на песке». Если предметы лежат друг на друге, значит и в блоках они должны располагаться подобным образом. Сначала слой с песком, заданный в body. Изображения, которые больше ширины страницы ( задана в DIVе Page) блога должны располагаться на заднем плане в блоках art_top и art_bot они , как бы лежат на фоне body. Затем следуют блоки с изображениями самой страницы. Например: горизонтальное меню лежит на фотографиях, оно засыпано песком и на нем лежат ракушки. Если вы разместите ракушки в блоке art_top, то выйдет неувязочка. Ракушки от которых падает тень, будут лежать под меню, которое в свою очередь, плотно лежит на песке. Иногда подобные казусы портят все впечатление от дизайна. Хотя все мы не идеальны.На следующем уроке предлагаю реализовать третий дизайн блога «Записки на заборе».
|