Создание шаблона 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
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.