Читайте также:
|
Шаблон урока будет иметь фиксированную ширину. В настоящее время имеется тенденция использовать в дизайне веб страниц три типа шаблонов: шаблон с фиксированной шириной, резиновый шаблон и эластичный шаблон.
Несмотря на кажущееся неоспоримое преимущество резинового шаблона, он имеет существенный недостаток. Элементы могут стать такими широкими, что читать информацию будет неудобно. Поэтому в примере к уроку используется шаблон с фиксированной шириной. Однако переделать его в резиновый или эластичный шаблон вполне возможно. Для этого, в качестве величин, определяющих ширину элементов нужно использовать проценты.
От табличного дизайна разметки мы отказываемся сразу, так как она достаточно трудоемка в обслуживании. Любое изменение потребует тщательной проверки взаимодействия всех тегов tr и td. Кроме того, табличный шаблон будет вызывать затруднения у тех посетителей, которые используют программы для чтения страниц с экрана. Обычно текст страницы читается слева-сверху по направлению вправо-вниз. В результате содержание левой боковой панели будет перемешиваться с содержанием центральной части и правой боковой панели, что затруднит восприятие информации. Самыми важными читателями, которые столкнутся с данной проблемой будут роботы поисковых серверов.
Идея заключается в том, чтобы построить внешний вид шаблона с использованием правил CSS. Таким образом можно добиться кросс-браузерной совместимости шаблона и разделения данных и презентации. Воспользуемся системой 960.gs - рабочей средой, которая позволяет быстро создать пространственную структуру шаблона. На сайте RUSELLER.COM есть уроки, которые раскрывают возможности данной системы. Для нее существует CSS генератор, с помощью которого можно быстро и наглядно создать набор стилей для нужной структуры страницы.
В нашем шаблоне используется сетка из 12 столбцов общей шириной 960 px.
Заголовок страницы будет растягиваться на все 12 колонок:
| <div id="header" class="container_12"></div> |
Для трех основных разделов внутри контейнера мы создадим сетку:
| <div id="content" class="container_12"> | |
| <div id="" class="grid_3 "> |
| <jdoc:include type="modules" name="left" /> | |
| </div> |
| <div id="" class="grid_6"> | |
| <jdoc:include type="modules" name="breadcrumbs" /> |
| <jdoc:include type="component" /> | |
| </div> |
| <div id="" class="grid_3"> | |
| <jdoc:include type="modules" name="right" /> |
| </div> | |
| </div> |
Между колонками в сетку будет оставаться пространство размером в 10 px. Оно генерируется рабочей средой 960.gs, а код воспринимается всеми браузерами (в том числе и Internet Explorer).
После применения классов к нашему шаблону раздел body файла index.php будет иметь вид:
| <body> | |
| <div id="header" class="container_12"> |
| <?php echo $app->getCfg('sitename');?><br /> | |
| <jdoc:include type="modules" name="top" /> |
| </div> | |
| <div id="content" class="container_12"> |
| <div id="sidebar" class="grid_3 "> | |
| <jdoc:include type="modules" name="left" /> |
| </div> | |
| <div id="maincolumn" class="grid_6"> |
| <jdoc:include type="modules" name="breadcrumbs" / | |
| <jdoc:include type="component" /> |
| </div> | |
| <div id="sidebar-2" class="grid_3"> |
| <jdoc:include type="modules" name="right" /> | |
| </div> |
| </div> | |
| <div id="footer" class="container_12"> |
| <jdoc:include type="modules" name="footer" /> | |
| </div> |
| <jdoc:include type="modules" name="debug" /> | |
| </body> |
Файл CSS сгенерированный для нашего шаблона системой 960.gs называем grid.css и помещаем в каталог /RusellerSimple/css. Обычно нет необходимости ужимать его сильно. Основная часть кода, важная для нашего шаблона выглядит так:
| .container_12 { | |
| margin-left:auto; |
| margin-right:auto; | |
| width:960px; |
| } | |
| .alpha { |
| margin-left:0!important; | |
| } |
| .omega { | |
| margin-right:0!important; |
| } | |
| .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9, |
| .grid_10,.grid_11,.grid_12,.grid_12 {display:inline; | |
| float:left; |
| position:relative; | |
| margin-left:10px; |
| margin-right:10px; | |
| } |
| .container_12.grid_1 { | |
| width:60px; |
| } | |
| .container_12.grid_2 { |
| width:140px; | |
| } |
| .container_12.grid_3 { | |
| width:220px; |
| } | |
| .container_12.grid_4 { |
| width:300px; | |
| } |
| .container_12.grid_5 { | |
| width:380px; |
| } | |
| .container_12.grid_6 { |
| width:460px; | |
| } |
| .container_12.grid_7 { | |
| width:540px; |
| } | |
| .container_12.grid_8 { |
| width:620px; | |
| } |
| .container_12.grid_9 { | |
| width:700px; |
| } | |
| .container_12.grid_10 { |
| width:780px; | |
| } |
| .container_12.grid_11 { | |
| width:860px; |
| } | |
| .container_12.grid_12 { |
| width:940px; | |
| } |
Все достаточно просто. Все блоки сдвигаются влево, различная ширина элементов сетки устанавливается на основе нужного размера базовой ячейки. В нашей решетке с 12 колонками grid_6 означает шесть колонок, которые будут иметь ширину 460 px (с учетом отступа). Использование такой системы дает очень наглядный пример преимущества CSS правил для форматирования содержания над таблицей. Получается меньше кода и его легко поддерживать.
Чтобы правила действовали в шаблоне файл grid.css необходимо подключить в заголовке нашего index.php, сразу после подключения template.css:
| <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" /> | |
| <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template?>/css/grid.css" type="text/css" /> |
Дата добавления: 2015-07-21; просмотров: 50 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Установка шаблона | | | CSS по умолчанию |