Меняем дизайн. Создаем блог «Письма друзьям». Урок 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

Интересные статьи

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

Как сделать шаблон с нуля для Joomla 2.5 и 3.0

На горизонте замаячила Joomla 3.0. За разработчиками этого движка трудно угнаться, но мы попытаемся. Будем разбираться как сделать шаблон для Joomla 2.5 и 3.0 с нуля. Для тех кто смутно догадывается ч...

Подробнее

Свой бизнес в Интернете или как заработать на видео уроках

Свой бизнес в Интернете или как заработать на видео уроках

Если вы хотите зарабатывать серьезные деньги на своем интернет ресурсе, то самый лучший способ реализовать свою цель – это создавать полезные для людей инфопродукты, в частности видео-уроки. Народ на...

Подробнее

Как сделать интернет - магазин

Обсуждая создание собственного бизнеса в Интернете, невозможно обойти тему интернет - магазинов. Собственное дело – мечта, пожалуй, каждого молодого человека в нашей стране, никто не хочет работать на...

Подробнее

Как заработать на Youtube

Как заработать на Youtube

В настоящее время YouTube является самой крутой интернет - площадкой для бизнеса. Изначально сервис YouTube создавался как сайт, на который пользователи могли загружать различные видео-ролики  дл...

Подробнее
Каталог@Mail.ru - каталог ресурсов интернет