Разметка шаблона сайта с использованием CSS. Урок 4

На прошлых уроках мы сделали исходный установочный комплект для шаблона trip, который состоит из файлов index.php, templateDetails.xml и две папки css и image.

Если вы все делали правильно, то шаблон устанавливается на Joomla 3 без проблем. Далее мы будем работать над каскадными таблицами стилей, которые отвечают за оформление страниц сайта.

Момент 1. При создании таблиц я буду использовать язык CSS2. В отличии от CSS3, он проще для понимания. Это важно, т.к. большая часть аудитории моего сайта – новички в веб-программировании. Также есть еще один минус CSS3 - этот язык в настоящий момент не поддерживается всеми браузерами. Для тех же, кто мало знаком с CSS2, для лучшего понимания, в работе над таблицами, предлагаю использовать справочник «HTML, CSS, PHP».

Момент 2. Я всегда создаю сайты и отрабатываю шаблоны только на локальном сервере, установленном на моем компьютере. На хостинг заливаю уже готовый, полноценно функционирующий сайт с начальным контентом.

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

Момент 3. Я никогда не редактирую код шаблона из админпанели Joomla , а использую только программу Macromedia Dreamweaver. Открываю нужный мне файл, редактирую его, сохраняю (но не закрываю файл) и смотрю сразу же, какие изменения произошли на сайте. Если они мне не нравятся – отменяю, произведенные ранее действия.

ВНИМАНИЕ: Откатится назад в админке Joomla при редактировании кода невозможно!

С программой Macromedia Dreamweaver очень удобно работать – она подсвечивает код, помогает писать его очень быстро, выделяет ошибки, позволяет произвести откат. Всю документацию по Macromedia Dreamweaver и саму программу вы можете найти на сайте.

Ну вроде все рассказала и можно приступать к работе. Первым делом, необходимо правильно расставить все блоки DIV на странице. Сейчас они пока стоят друг за другом (смотрите скришот с предыдущего урока).

Чтобы в процессе работы хорошо видеть, как встают блоки,  в менеджере модулей CMS Joomla я  создала модуль поиска по сайту и поставила его в позицию «user1», модуль горизонтального меню - в позицию «user2», модуль навигации по сайту – в позицию «user3», три модуля с произвольным HTML кодом – в позиции «left», «right», «footer».

Изначально я решила блок «header» сделать универсальным и предусмотрела в нем позицию для вывода модулей «header». В этой позиции можно вывести какой-нибудь ротатор изображений или с помощью модуля с произвольным HTML кодом просто вывести изображение, любой высоты, при этом ширина должна быть всегда 950рх (ширина страницы). Это изображение можно сделать кликабельным, а также с легкостью его менять. Для начала я просто создала подобный модуль и разместила в нем картинку размером 950х250.

Итак, все модули расставлены и опубликованы, далее открываем файл template.css из паки css нашего шаблона trip и пишем код. Для наглядности все блоки разукрашиваем, т.е. задаем везде цвет фона.

Используйте справочник по стилям CSS, если вам не понятны какие либо параметры.

Сначала оформляем блок «body», зададим ему пока серый цвет фона. 

Body {background-color:#c6c6c6;}

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

#page {

width:950px;

font:14px Arial, Helvetica, sans-serif ;

line-height:1.3;

color:#000;

text-align:left;

margin:auto;

background-color:#fff;

overflow:hidden;

}

Блоки "logo" и "user1" будут выводиться в контейнере «top», зададим высоту, а ширина будет занимать 100% ширины страницы, т.е. 950px.

#top{

height:60px;

width:100%;

}

Блоку "logo" зададим фиксированную высоту и ширину, а также синий цвет фона. Определим выравнивание по левой стороне, при этом остальные элементы будут обтекать его с других сторон.

#logo {

height:60px;

width: 600px;

float: left;

background-color:#0099FF;

}

Блоку "user1" зададим фиксированную высоту, ширину, желтый цвет фона, выравнивание по левой стороне.

#user1 {

height:60px;

width: 350px;

float: left;

background-color:#CCFF00;

}

Блок вывода горизонтального меню «user2» будет иметь ширину 100% от ширины страницы, т.е. 950px. Высота блока будет растягиваться до высоты модуля меню.

#user2 { width: 100%;}

Блок вывода шапки сайта «header» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты изображения, которое будет выводиться в модуле.

#header {width:100%;}

Блок «user3» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «user3» .

#user3 {

width: 100%;

background-color:#CC9900;

}

Оформление левой колонки блок «left»

#left {

float:left;

width:200px;

background-color:#FF6666;

}

Оформление правой колонки блок «right»

#rigth {

float:left;

width:200px;

background-color:#66FF33;

}

Теперь разберемся с контентом. Если в левой и правой колонке будут выводиться модули, то ширина компонента контент будет 550рх (950-200 -200).

#content60 {

float:left;

width:550px;

}

Если модули будут выводиться или только в левой или только правой колонке, то ширина компонента контент будет 750рх (950-200).

#content80 {

float:left;

width:750px;

}

Если будут отключены обе колонки, контент занимает 100% страницы, т.е. 950рх.

#content100 {

float:left;

width:100%;

}

Блок «footer» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «footer». Отменим обтекание блока одновременно с правого и левого края, чтобы футер не поднимался вверх.

#footer {

clear:both;

background-color:#82b5bf;

}

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


P.S. Для тех у кого возникли трудности с написанием кода файлов или инсталляцией шаблона, я сделала установочный пакет TRIP, который должен быть у вас к концу этого урока.

 

Комментарии 

 
# Валентин 07.02.2013 09:45
У кого получилось то что на картинке изображено?
Ответить | Ответить с цитатой | Цитировать
 
 
# Антонио1992 08.02.2013 10:47
У меня всё получилось(прав да не с 1 раза),но получилось,сейч ас делаю шаблон в стиле bmw m3
Ответить | Ответить с цитатой | Цитировать
 
 
# Павло 06.09.2013 17:57
Подскажите какие модули в позиции Left и Right?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 16.09.2013 16:58
Цитирую Павло:
Подскажите какие модули в позиции Left и Right?

Любые
Ответить | Ответить с цитатой | Цитировать
 
 
# СТС 11.09.2013 09:46
Как получить вид контента как на скрине?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 16.09.2013 17:02
Цитирую СТС:
Как получить вид контента как на скрине?

Мне кажется я разжевала все очень подробно. Наверное я плохой учитель, или может почитать Вам еще раз все хорошо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Владимир 13.10.2014 21:37
Разжовано более чем подробно, если после 3 рюмки коньяка я до сих пор понимаю. И у меня все получается) :-*
Ответить | Ответить с цитатой | Цитировать
 
 
# Виктор Ефимов 27.09.2013 08:27
В правой колонке разве не должно быть float:right?
Чтобы та уплыла вправо или я быть может пропустил чего?
Ответить | Ответить с цитатой | Цитировать
 
 
# Шишкин Сергей 20.10.2013 09:55
Нет, дело в том, что позиции left, materiаl и right должны следовать "в одной строке", друг за другом, поэтому у все у них выравнивание по левому краю.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 21.10.2013 16:20
а у меня почему-то таблица стилей не подключается, несколько раз уже все проверил, вроде все как написано....а оформления никакого....
Ответить | Ответить с цитатой | Цитировать
 
 
# Женя 08.12.2013 18:30
Такая же проблема
Ответить | Ответить с цитатой | Цитировать
 
 
# Леонид 06.11.2013 21:10
Подскажите, почему правая колонка у меня отображается слева, под левой колонкой, хотя в параметрах прописано rigth?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 10.11.2013 18:40
Ширину левой колонки или контента вы увеличили, поэтому правая колонка не встает на место, а отображается под левой колонкой.
Ответить | Ответить с цитатой | Цитировать
 
 
# Альберт 30.11.2013 17:48
Справочник «HTML, CSS, PHP» во всех 4-х файлах показывает только содержание в левой половине окна, правая же всегда пустая. В чём может быть проблема?
___________
Win7x64Макс
Ответить | Ответить с цитатой | Цитировать
 
 
# root4me 06.01.2014 04:57
Мне после перегрузки шаблона потребовалось обновить кэш . Иначе отображался старый вариант .
Ответить | Ответить с цитатой | Цитировать
 
 
# Serik 15.01.2014 21:59
Первый раз делал шаблон, все получилось. Вот делаю второй... колонки "левая и правая" если добавляю float:left то они не вмещаются в блок (блок становится меньше (выше сьезжает), а колонки левая и правая, выходят за его пределы вниз.
Вот скрин: http://s7.uploads.ru/cIjWV.jpg
в чем проблема в моем случае?
Ответить | Ответить с цитатой | Цитировать
 
 
# Алмас 17.01.2014 08:52
Получилось, единственное поменял rigth на right в CSS и Index.
Автору респект и уважуха!
Ответить | Ответить с цитатой | Цитировать
 
 
# Константин 20.02.2014 18:18
Скажите, пожалуйста, как всунуть модуль внутрь модуля, например, с правой стороны внутри позиции header?
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 13.03.2014 04:06
Цитирую Константин:
Скажите, пожалуйста, как всунуть модуль внутрь модуля, например, с правой стороны внутри позиции header?

Чтобы поместить модуль внутрь другого модуля можно использовать расширение notebook-net.ru/index.php/rashirenija-joomla/49-modulesanywhere.html
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 07.04.2014 12:53
Проблема, после модуля текст уплывает по всей ширине экрана, скрин по ссылке
http://sc.uploads.ru/N84kp.jpg

как поправить? За ранее спасибо.
PS. Спасибо автору за отличные уроки!
Ответить | Ответить с цитатой | Цитировать
 
 
# Страдалец 08.05.2014 21:39
у меня почему то поле поиска светло зеленого цвета а не желтого а правая колонка без фона, подскажите что не так я сделал?
Ответить | Ответить с цитатой | Цитировать
 
 
# Страдалец 08.05.2014 21:49
разобрался, поправил rigth на right, в CSS и Index.
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 13.08.2014 14:47
а как вы картинку в header вставили? :-)
Ответить | Ответить с цитатой | Цитировать
 
 
# sundeath 25.09.2014 14:12
:eek:
Добрый день.
Помогите пожалуйста советом, очень нужно Ваше содействие.
Вопрос такой: создавал файлы шаблона точно по схеме, загрузил шаблон удачно, но при разметке (Урок № 4) в меню менеджера модулей не нашёл позицию "logo", чтобы её определить для банера.
В чём моя ошибка?
Скриншот окна Joomla и код файла index.php прилагаю.
Надеюсь на Вашу помощь.

Скрин кода index.php: http://pastebin.com/MvRKuEhd

Скрин окна менеджера модулей:
http://s1.radikale.ru/uploads/2014/9/25/72bf8ffefc9d4017d066e70963c629c9-full.jpg


Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Roman 13.11.2014 09:48
Не могу никак понять, как Вы прикрепили фоновый рисунок к Хедеру? В CSS пишу:#header {width:100%; background-image: url('../images/joomla_logo_bla ck.jpg');
}

и никакого результата. Почему?
Ответить | Ответить с цитатой | Цитировать
 
 
# Reaper 16.11.2014 14:21
В хедере позиция для модуля. А картинка в модуле. Есть такой модуль в джумле как "произвольний хтмл" или както так. В него вставь картинку, а модуль помести в хедер. Профит))
Ответить | Ответить с цитатой | Цитировать
 
 
# DMN 23.01.2015 17:26
Цитирую Reaper:
В хедере позиция для модуля. А картинка в модуле. Есть такой модуль в джумле как "произвольний хтмл" или както так. В него вставь картинку, а модуль помести в хедер. Профит))

а можно отвязать модуль, что бы менять картинку в CSS?
Ответить | Ответить с цитатой | Цитировать
 
 
# Eduard 21.12.2014 18:55
подскажите, пожалуйста, делал все по инмтрукции, но между модулями у меня есть расстояние, а на скрине они слитно?
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 26.12.2014 17:20
Спасибо за этот урок. Сделал все пошагово. Результат - на 5+!!! И теперь все понятно, откуда и как что выводится. Автору - ОГРОМНОЕ человеческое СПАСИБО!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Анна 30.04.2015 11:59
а где размер самого шаблона 1002рх или он 4000рх, его то как сделать?
Ответить | Ответить с цитатой | Цитировать
 
 
# WolFeG 07.09.2015 12:54
До блока #user1 (включительно) все получалось и отображается. Далее почему то код не читается и все остальные блоки из урока не отображаются. Что делать?
Ответить | Ответить с цитатой | Цитировать
 
 
# Костя 17.09.2015 19:20
Добрый вечер! Меню не встает в линию, что может быть? Выбрал позицию user2 в модуле главного меню. Шаблон с вашего архива
Ответить | Ответить с цитатой | Цитировать
 
 
# Ser 02.11.2015 07:51
Те кто пишет ""Всё понятно", объясните, почему тогда, если пишешь вместо
#user2 { width: 100%;}
#user2 { width: 100%; color: red;}, цвет не меняется(хоть background, всё равно цвет не меняется...)
Ответить | Ответить с цитатой | Цитировать
 
 
# #420everyday 23.11.2015 08:59
Цитирую Ser:
Те кто пишет ""Всё понятно", объясните, почему тогда, если пишешь вместо
#user2 { width: 100%;}
#user2 { width: 100%; color: red;}, цвет не меняется(хоть background, всё равно цвет не меняется...)


Цвет нужно представлять в 16-ричной системе исчисления, т.е. типа #FFFFF. http://html-color-codes.info/Cvetovye-kody-HTML/ Вот сайт цветов с выводом номера.
Ответить | Ответить с цитатой | Цитировать
 
 
# Lora 07.02.2016 07:11
А почему у меня после установки шаблона trip_3 кроме шапки, home и фона ничего не отобразилось? Как включить все остальное, спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Алина 26.02.2016 20:57
Доброго времени суток! Помогите решить проблему, пожалуйста! Делаю все по уроку, а цветом заливаются только блоки user 1 и logo. Блоки user 3, left, right и footer остаются неокрашенными. Подскажите, пожалуйста, в чем здесь может быть проблема?
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 18.10.2016 17:09
У меня таблица стилей не подхватывается. Что делать?
Ответить | Ответить с цитатой | Цитировать
 
Главная Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Разметка шаблона сайта с использованием CSS. Урок 4

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

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

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

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

Подробнее

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

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

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

Подробнее

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

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

Подробнее

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

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

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

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