Меняем дизайн. Создаем блог «Письма друзьям». Урок 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, то выйдет неувязочка.  Ракушки от которых падает тень, будут лежать под меню, которое в свою очередь, плотно лежит на песке. Иногда подобные казусы портят все впечатление от дизайна. Хотя все мы не идеальны.

На следующем уроке предлагаю реализовать третий дизайн блога «Записки на заборе».

 
Главная Разработка шаблона блога для joomla 1.5 Меняем дизайн. Создаем блог «Письма друзьям». Урок 7