Создание шаблона 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
|
Общая структура данных шаблона была построена на предыдущем уроке и пора определяться с формой вывода. Используем CSS сетку Шаблон урока будет иметь фиксированную ширину. В настоящее время имеется |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.