Тело пустого шаблона Joomla 1.5
Создать наш первый шаблон будет очень-очень легко! Готовы?
Все, что мы должны сделать, это использовать выражения Joomla для вставки содержимого всех модулей в mainbody.
<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>
На этом этапе (если вы попробуете установить этот шаблон), наш сайт смотрится не слишком воодушевляюще. Результат показан на рис 9.3.
рис. 9.3. Шаблон без стилей
Шаблон содержит следующие модули, размещенные в достаточно логичном порядке:
- название сайта
- верхний модуль
- левые модули
- основной контент
- правые модули
Стоит заметить… Самый простой шаблон всего лишь загружает модули Joomla и mainbody (компонент). Разметка и дизайн — дело CSS, а не Joomla.
Наша цель состоит в том, чтобы приблизиться к семантической разметке насколько это возможно. С точки зрения Сети это означает, что страница может быть прочитана любым браузером, роботом или программой чтения экрана. Семантическое расположение — краеугольный камень доступности сайта.
Внимание! Что мы видим сейчас на экране — на самом деле только набросок для семантической разметки. Если мы двинемся в сторону усложнения шаблона и будем размещать дополнительные модули в произвольные места, первоначальный логичный порядок нарушится. Общепринятым критерием оценки шаблона сайта на CMS является мнение, что шаблон настолько хорош, насколько хорошо он наполняется контентом. Именно поэтому разработчики столь часто бывают удивлены результатами проверки сайтов на валидность.
Как вы могли заметить, что мы использовали при создании этой страницы первую из многих команд, специфичных для Joomla:
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
Выражение PHP (echo) просто выводит значение, взятое из файла configuration.php. В данном случае это имя нашего сайта. Столь же легко мы можем извлечь оттуда и другие значения:
Название этого сайта <?php echo $mainframe->getCfg('sitename');?><br />
Email администратора <?php echo $mainframe->getCfg('mailfrom');?><br />
Шаблон расположен в директории <?php echo $this->template?><br />
URL сайта <?php echo JURI::base();;?>
Выражение jdoc вставляет в страницу вывод XHTML от модулей и компонентов.
Эта строка вставляет вывод компонента. Что это будет за компонент — определит ссылка меню:
<jdoc:include type="component" />
Внимание! Довольно интересно, что на первый взгляд можно использовать вывод компонента несколько раз. Не представляю, зачем вам это может понадобиться, но на всякий случай скажу. Это может вызвать ошибку.
Эта строка вставляет вывод модулей справа:
<jdoc:include type="modules" name="right" />
…ее полный синтаксис выглядит так:
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
Мы рассмотрим различные параметры стилей в разделе этой главы, посвященной модулям.
CSS Template Tutorial первый этап
Пока мы получили абсолютно чистый шаблон. Я создал установочный шаблон, который можно скачать в библиотеке Compass:
CSSTemplateTutorialStep1.zip
Пакет установит шаблон, в котором есть всего два файла — index.php и templateDetails.xml. Я удалил ссылки на другие файлы, чтобы получить каркас шаблона без CSS. На самом деле у нас получился очень полезный диагностический шаблон; Вы можете установить его и отследить ошибки в компоненте или модуле.
Использование CSS для создания бестабличной разметки
Мы будем использовать чистый CSS для создания шаблона Joomla с разметкой страницы в три колонки. Кроме этого, мы будем делать эту разметку «резиновой». Есть два главных типа разметки веб-страницы — фиксированная и плавающая и обе они обращаются к методу управления шириной разметки.
Ширина страницы — вечная головная боль разработчиков из-за многих различных разрешений мониторов у людей, просматривающих сайт. Примерно у 17% веб-серфингистов установлено разрешение 800x600 точек, хотя этот процент постоянно снижается. Большинство, 79%, использует 1024x768 точек и выше. Создание плавающей разметки может докакой-то степени гарантировать, что ваша столь важная веб-страница не будет узкой выглядеть полосой на 1024 точках и будет полностью видна на мониторах с меньшим разрешением.
Типичный сайт мог бы использовать таблицы для разметки страниц. Они достаточно широко в этих целях используются и вам достаточно будет только установить ширину колонок в процентах (или пикселях), но у них есть ряд недостатков. Например, использование таблиц порождает много дополнительного кода по сравнению с разметкой средствами CSS. Это приводит к большему времени загрузки (что так не любят пользователи), и более плохой индексации поисковыми машинами. Размер страницы может примерно удвоиться, не только засчет лишнего кода, но и такой штуки gif'ы-«распорки».
Даже крупные компании иногда попадают в ловушку таблиц, как, например, можно видеть в новой версии сайта disney.co.uk. (Ну сейчас-то они исправились и сделали сайт на флэше. Правда, в текстовой версии сайта кое-где таблицы еще остались… — прим.перев.)
С сайтом, в котором используется табличная разметка, есть несколько больших проблем:
- Его труднее поддерживать. Чтобы что-то добавить, вы должны выяснить назначение всех табличных тегов в верстке, таких как td/tr. В CSS нужно внимательно просмотреть только несколько строк.
- Такой сайт не может быть контент-ориентированным. Многие веб-серфингисты не увидят вашу страницу в браузере. Это те, кто пользуется текстовым браузером или программой чтения экрана, которые читают страницу от верхнего левого угла до нижнего правого. Это означает, что они сначала увидят все, что помещено в заголовке и левой колонке (для расположения в три колонки) а потом только доберутся до собственно контента в средней колонке. Разметка CSS, с другой стороны, вполне подходит для учитывает контент-ориентированной разметки, это означает, что контент может быть перемещен в коде в нужное место. Возможно, самый важный посетитель вашего сайта — Google, а он использует для чтения вашего сайта некое подобие читалки экрана.
Давайте задействуем в нашей разметке CSS. Вы можете использовать CSS для размещения элементов (содержимого) несколькими способами. Для быстрого введения в предмет неплохо почитать «Разметку CSS» Брэйнджера.
Если вы плохо знакомы с CSS, то для начала прочтите хотя бы один справочник по CSS для чайников. Вот несколько таких справочников:
Стоит заметить… Современный веб дизайн использует CSS вместо таблиц для позиционирования элементов страницы. Этот метод непросто освоить, но легко применять. Есть множество ресурсов (не связанных с Joomla), которые могут в этом помочь.
Мы будем использовать плавающую разметку для позиционирования контента. В самом общем случае, шаблон мог бы выглядеть как указано на рис. 9.4. Все еще не особенно впечатляет, но уже понятно что к чему относится.
Здесь стили CSS определены в заголовке файла, чтобы их можно было рассмотреть в совокупности с обращением к ним, но обычно они выносятся в файл template.css.
Все содержится в элементе под названием #wrap. Его ширина может изменяться от 760 до 960px.
рис. 9.4. Базовая разметка шаблона
На рисунке 9.4 левая, средняя и правая колонки определены каждая собственным элементом. Все элементы имеют плавающую позицию и заданную в процентах ширину, общая щирина трех элементов при этом составляет 100 %. Атрибут clear:both в стиле нижнего блока страницы говорит браузеру о том, что надо прекратить подбор ширины и растянуть блок на все три колонки. При создании следующего шаблона в этой главе мы используем более продвинутую технику сброса плавающей ширины.
Для улучшения внешнего вида нашей разметки и упрощения чтения контента, мы должны добавить нашим колонкам некоторый интервал, в полиграфии именуемый «gutter» (пробел, образуемый смежными отступами). К сожалению, здесь есть одна засада. Как вы, видимо, уже слышали, Internet Explorer не совсем правильно интерпретирует CSS. В данном случае проблема в том, что он вычисляет ширину несколько иначе. Мы можем решить эту проблему, не используя установки отступа или границы, в общем либого параметра, связанного с шириной. Чтобы получить нужный пробел, мы добавим внутрь колонок еще один элемент <div>.
В таблице стилей мы укажем:
.inside {padding:10px;}
Получившийся в результате код для <body> в index.php
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg('sitename');?>
<jdoc:include type="modules" name="top" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" />
</div>
</div>
<div id="content"> <div class="inside">
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" />
</div>
</div>
<div id="footer">
<div class="inside">Powered by <a href="http://joomla.org">Joomla!</a>.
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
</div>
</div>
<!--end of wrap-->
</body>
А файл template.css должен выглядет примерно так:
#wrap {
min-width:760px;
max-width:960px;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Совет: «Стенографическая» форма записи CSS
Можно сократить количество кода CSS если использовать сокращенную форму записи. Одним из примеров такой записи могут быть установки отступов и интервалов элемента, где запись:
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
…может быть заменена на:
margin: 5px 10px;
Практически для каждого атрибута стиля есть «стенографичаская» форма записи. После того, как вы отладите стили, замените длинные записи на стенографические и сократите объем файла стилей. Пример синтаксиса:
font: font-size | font-style | font-variant | font-weight | line-height | font-family
Так что вместо записи:
font-size:1em;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:1.3em;
можно использовать ее сокращенную форму:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;
О сокращенных формах записи можно почитать во «Введении в стенографию CSS» (http://home.no.net/junjun/html/shorthand.html)
Эта простая разметка вполне подходит для изучения применения CSS в Joomla, так как демонстрирует два основных преимущества CSS перед таблицами — более компактный код и более легкую поддержку. Однако, эта разметка пока не может быть названа контент-ориентированной. Для этого мы должны использовать более развитую разметку, известную как плавающее вложение (nested float).
Контент-ориентированная разметка лучше в плане SEO чем, та где важное содержание находится глубоко в коде страницы. Если рассматривать это утверждение в понятиях Joomla, то важное содержание — то, что дает на выходе компонент.
CSS по умолчанию
До сих пор все, что мы писали в наш файл CSS было предназначено для разметки страницы, внутри блоков содержимое выводилось в дефолтном виде. Добавим немного форматирования:
body {
text-align:center;
}
#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}
#content {
float:left;
width:60%;
overflow:hidden;
}
#footer {
clear:both;
}
.inside {
padding:10px;
}
#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Мы центрировали страницу при помощи маленького хака. Стоит это делать именно так, потому что Internet Explorer не точно интерпретирует CSS. В браузере, работающем по стандартам, мы могли бы сказать только margin:0 10 %; для центрирования страницы, но IE на в этом случае не поймет и нам придется центрировать «текст» всей страницы и затем выравнивать его снова в левой колонке.
С появлением (наконец то!) в IE7 поддержки min/max width (чего не было в IE6), мы можем указать минимальную и максимальную ширину. Заметим, что нам все равно придется добавить крошечный хак для IE6, так как он их не понимает. Он проигнорирует выражение !important и оставит просто старую ширину в 960px.
Внимание! Могло бы показаться странным, что мы определяем ширину наших колонок в процентах и при этом заключаем их в DIV с фиксированной шириной. На самом деле есть несколько соображений на этот счет:
- Наличие плавающих колонок в контейнере фиксированной ширины делает шаблон очень гибким. Если мы захотим ввести переключение ширины, нам понадобится поменять только одно значение.
- У нас установлена максимальная ширина, а почему бы не сделать всю страницу резиновой? У многих пользователей Сети стоят мониторы с очень большим разрешением. Соображения простоты использования говорят нам, что строки текста по 900px шириной сложно читать, потому что глаза должны пойти длинный путь перед переходом на следующую строку. Ограничение максимальной ширины делает сайт более доступным.
Мы также добавили новую опцию колонок: overflow:hidden. Это сделает разбиение страницы более последовательным, поскольку мы уменьшаем ее ширину.
Перед форматированием элементов текста мы установим некоторые общие значения и проделаем действие, обычно называемое «общий сброс»:
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}
Всем элементам назначается нулевые отступы и интервалы а всем блочным элементам устанавливается нижний отступ. Это помогает достигнуть согласованности браузеров. О процедуре общего сброса можно почитать у clagnut(www.clagnut.com/blog/1287/) и left-justified (http://leftjustified.net/journal/2004/10/19/global-ws-reset/).
Размер шрифта установлен на 76%. Идея состоит в том, чтобы попробовать получить более последовательные размеры шрифта в разных браузерах. По этой же причине все размеры шрифтов указываются в em. Параметр line-height:1.3 делает текст более удобочитаемым. Кроме того, повышается доступность сайта, потому что пользователь сможет изменить размер шрифта на более удобный для себя. Подробно это обсуждается в статье Оуэна Бриггса «An experiment in typography» на The Noodle Incident (http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html).
Если мы добавим некоторые второстепенные цвета для заголовка, правого/левого блоков и контейнера, мы увидим нечто, подобное рис. 9.5.
рис. 9.5. Шаблон с типографикой
Обратите внимание, что правая и левая колонки стороны не достают до низа страницы. Высота колонок по умолчанию определяется только их содержанем; там где слева и справа фон белый — колонок уже нет.
Если в нашем шаблоне белый фон во всех трех колонках, это не проблема. Мы будем использовать этот подход зададим рамки вокруг модулей. Если же вам хочется видеть окрашенные или имеющие обрамление колонки равной высоты, вам стоит задать фоновое изображение с вертикальным заполнением. Эту технику называют «ложными колонками» (Faux Columns), она описана у Дугласа Боумэна и Эрика Мейера (www.stopdesign.com/log/2004/09/03/liquid-bleach.html, http://www.alistapart.com/articles/fauxcolumns/).
Дальше »
|