Создание шаблона Joomla за 6 шагов. Шаг 2.
Общая структура данных шаблона была построена на предыдущем уроке и пора определяться с формой вывода.
Используем CSS сетку
Шаблон урока будет иметь фиксированную ширину. В настоящее время имеется тенденция использовать в дизайне веб страниц три типа шаблонов: шаблон с фиксированной шириной, резиновый шаблон и эластичный шаблон.
- Шаблон с фиксированной шириной имеет жестко заданную ширину элементов.
- Резиновый шаблон может изменять ширину элементов в зависимости от размеров экрана браузера.
- Эластичный шаблон похож на резиновый, но диапазон изменения ширины у него ограничен максимальным и минимальным размером.
Не смотря на кажущееся неоспоримое преимущество резинового шаблона, он имеет существенный недостаток. Элементы могут стать такими широкими, что читать информацию будет неудобно. Поэтому в примере к уроку используется шаблон с фиксированной шириной. Однако переделать его в резиновый или эластичный шаблон вполне возможно. Для этого, в качестве величин, определяющих ширину элементов нужно использовать проценты.
От табличного дизайна разметки мы отказываемся сразу, так как она достаточно трудоемка в обслуживании. Любое изменение потребует тщательной проверки взаимодействия всех тегов 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" />
CSS по умолчанию
Весь выше описанный код CSS касался только размещения информации на странице. Нужно позаботиться и о форматировании текста.
Добавим несколько общих стилей и глобальный сброс в основной файл template.css(файл с таким именем подключается в основном файле нашего шаблона index.php).
* { 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; }
Данный код осуществляет глобальный сброс CSS для нашего шаблона. Такое действие помогает добиться единообразной работы кода в разных браузерах.
Затем мы устанавливаем размер шрифта 76%, опять же для единообразного отображения в разных браузерах. Для размера шрифта используются единицы em (1 em = размеру текущего шрифта документа) . Высота строки устанавливается равной 1.3 em. Использование единиц em позволяет обеспечить простую настройку размера шрифта страницы без существенных искажений шаблона.
Взглянем, как выглядит наш шаблон после установки правил CSS. Для большей наглядности в левую часть были добавлены модули основного меню и формы регистрации на сайте, а в правую - модуль с меню информации о Joomla.
В заголовке сайта выведено его название, сформированы три колонки, и они расположены рядом одна с другой.
Анонс
На следующем шаге мы разберемся, как представлять модули в шаблоне.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bpvePNNWFbw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Человек - аристократ среди животных Гейне Генрих - (1797-1856) - немецкий поэт и публицист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.