Резиновый двухколоночный макет

Навигация слева

Первый способ формирования колонок основан на позиционировании. Для слоя layout задаём относительное позиционирование, а для внутренних слоёв абсолютное. При таком сочетании значений можно устанавливать положение элементов относительно родителя с помощью свойств left и top (пример 5.3).

Пример 5.3. Использование позиционирования

По умолчанию у свойства left значение 0, так что для sidebar это свойство не установлено. У абсолютно позиционированных элементов ширина равна ширине контента, так что значение width требуется указывать для каждого слоя.

Приведённый способ имеет то преимущество, что для него не играет большой роли порядок слоёв в коде. Можно с лёгкостью поменять их местами, на отображении колонок это не скажется.

Более простой стиль получается при использовании свойства float со значением left, которое задано для слоя sidebar. Но чтобы получилась не обтекаемая врезка, а подобие колонки, для слоя content также требуется установить свойство margin-left со значением равным ширине левой колонки или превышающим её (пример 5.4).

Пример 5.4. Использование float

Как вариант, можно убрать свойство margin-left, а для формирования колонок добавить к layout свойство overflow с значением auto или hidden.

Что такое psd шаблоны

Эти шаблоны являются исходным материалом для верстки сайта. Заготовка полностью отражает не только дизайн будущего ресурса, но и его размеры, схему расположения всех элементов. Создание psd шаблона для сайта является вторым этапом в цикле разработки веб-дизайна.

Перед этим с заказчиком обговариваются возможные варианты дизайна ресурса. На основании этих сведений и пожеланий клиента составляется техническое задание для художников и дизайнеров. По нему художники рисуют эскиз внешнего вида будущего ресурса, а дизайнеры создают в графических редакторах цифровое изображение художественного образца.

Разработка шаблона psd для сайта должна происходить с учетом возможностей воссоздания его дизайна с помощью языка html и css. Вот некоторые характеристики, которыми должен обладать качественный шаблон:

Каждый элемент дизайна должен быть выполнен на отдельном слое – структура шаблона становится видна при его раскрытии в Фотошопе. С помощью слоев все части дизайна можно редактировать независимо друг от друга.

Благодаря многослойности изменение одной части шаблона никак не отразится на всех остальных его элементах.

  • Рисунок шаблона сохраняется в формате psd (реже tiff) – только эти графические форматы поддерживают многослойную структуру изображений. Остальные являются лишь алгоритмами сжатия графических объектов;
  • Вложенность – все слои должны быть сгруппированы по принадлежности к определенному структурному элементу дизайна (подвал, шапка, меню);
  • Приоритет однородных тонов – для фона в шаблоне лучше использовать однородные повторяющиеся тона, которые можно легко отобразить с помощью html и css;
  • Как можно меньше фоновых изображений – использование в качестве фона полновесных рисунков сильно увеличивает объем всей страницы. А, следовательно, и время загрузки сайта. Особенно критично это требование для шаблона мобильного ресурса;
  • Использование направляющих – использование направляющих при выравнивании элементов psd шаблонов для сайтов является обязательным. Это во многом облегчает процесс верстки, когда некоторые части дизайна вырезаются и используются как изображения для фона:

  • Приоритет стандартным шрифтам – надписи лучше наносить стандартным набором шрифтов. При использовании редкого шрифта его файл должен прилагаться к шаблону;
  • Меньше нестандартного форматирования – изменять можно лишь стандартные параметры текста (размер, семейство, интервал). Искажение текста с помощью инструментов графического редактора (выгибание и другие эффекты) приведут к тому, что надпись будет использована как фоновый рисунок. А это ведет к увеличению веса всего шаблона:

Оптимальные размеры – по ширине psd шаблон для сайта должен быть не менее 1000 пикселей. При этом ширина фонового рисунка не может превышать указанную величину. Иначе это может привести к искажению отображения шаблона в браузере.

Шаблоны для баннеров

Создаются заготовки не только для сайтов, но и для отдельных элементов его дизайна. Качественный шаблон баннера должен обладать большинством из выше перечисленных характеристик. При этом выбор его размеров зависит от места расположения баннера на сайте.

Структура psd шаблонов баннеров также состоит из слоев, сгруппированных по соответствующим папкам. То есть такой шаблон представляет собой не простой рисунок, а составное изображение.

Благодаря послойной структуре шаблон баннера легко редактируется. Без нарушения общей структуры можно сменить все надписи и рисунки.


Но создать шаблон баннера под силу не только профессионалу, но и обычному пользователю. Для этого можно использовать ряд специальных онлайн-сервисов. Одним из них является сайт bannerfans.com:

Основы верстки

Рассмотрим на упрощенном примере, как происходит верстка. Для этого возьмем простой двухколоночный шаблон. В его шапке размещен логотип сайта, который мы вырежем, и будем использовать как фоновое изображение. Остальные части шаблона будем верстать с помощью html, а стили и размеры установим классами css:
Вот структура сайта, которую можно сверстать с помощью тегов

Навигация справа

П

øòõôÃÂýýÃÂõ òÃÂÃÂõ ÃÂÃÂøûø ôûàÃÂþ÷ôðýøàýðòøóðÃÂøø ÃÂûõòð üþóÃÂàñÃÂÃÂàûõóúþ ø÷üõýõýàø ÿþô ýðòøóðÃÂøàÃÂÿÃÂðòð. àôõùÃÂÃÂòøÃÂõûÃÂýþÃÂÃÂø, ÃÂð÷ýøÃÂð üõöôàúþûþýúðüø ÃÂþûÃÂúþ ò øàÃÂøÃÂøýõ ø ÃÂòõÃÂõ ÃÂþýð. ÃÂ÷üõýøò ÃÂð÷üõÃÂÃÂ, ÃÂòÃÂ÷ðýýÃÂõ àÃÂøÃÂøýþù ø ÿþüõýÃÂò üõÃÂÃÂðüø ÃÂþý, ÿþûÃÂÃÂøü ÃÂõ÷ÃÂûÃÂÃÂðÃÂ, úþóôð ýðòøóðÃÂøàÃÂöõ ÃÂðÃÂÿþûþöõýð ÃÂÿÃÂðòð. àÿÃÂøüõÃÂõà5.5 ÿþúð÷ðýð üþôøÃÂøúðÃÂøàúþôð ø÷ ÿÃÂøüõÃÂðà5.3.

ÃÂÃÂøüõà5.5. ÃÂÃÂÿþûÃÂ÷þòðýøõ ÿþ÷øÃÂøþýøÃÂþòðýøÃÂ

ÃÂÃÂø ÿþ÷øÃÂøþýøÃÂþòðýøø òþ÷üþöýàÿÃÂþñûõüààýðûþöõýøõü ÿþôòðûð (ÿÃÂø õóþ ýðûøÃÂøø) ýð ôÃÂÃÂóøõ ÃÂûõüõýÃÂÃÂ. íÃÂþàòþÿÃÂþàÃÂðÃÂÃÂüþÃÂÃÂõý ò ÃÂð÷ôõûõ, ÿþÃÂòÃÂÃÂõýýþü ÃÂõ÷øýþòÃÂü ÃÂÃÂÃÂÃÂúþûþýþÃÂýÃÂü üðúõÃÂðü.

ÃÂýðûþóøÃÂýþõ ôõùÃÂÃÂòøõ üþöýþ ÿÃÂþòõÃÂÃÂø ø àÿÃÂøüõÃÂþü, ò úþÃÂþÃÂþü ÃÂøóÃÂÃÂøÃÂÃÂõàÃÂòþùÃÂÃÂòþ margin-left. ÃÂþ ò ôðýýþü ÃÂûÃÂÃÂðõ ÃÂôþñýõõ øÃÂÿþûÃÂ÷þòðÃÂàÃÂòþùÃÂÃÂòþ float ÃÂþ ÷ýðÃÂõýøõü right. âðúöõ margin-left ÿþüõýÃÂõÃÂÃÂàýð margin-right (ÿÃÂøüõÃÂà5.6).

ÃÂÃÂøüõà5.6. ÃÂÃÂÿþûÃÂ÷þòðýøõ float

áÃÂøûø ôûàúþûþýþú ýõ ÃÂÃÂøÃÂÃÂòðÃÂàýõúþÃÂþÃÂÃÂàòõÃÂõù, úþÃÂþÃÂÃÂõ ÃÂðÃÂÃÂþ ÿÃÂøÃÂÃÂÃÂÃÂÃÂòÃÂÃÂàýð ÃÂõðûÃÂýÃÂàÃÂðùÃÂðÃÂ. àÃÂðÃÂÃÂýþÃÂÃÂø, ýõ ÃÂúð÷ðýàÿþûÃÂ, ÿþÃÂÃÂþüàÃÂõúÃÂàòÿûþÃÂýÃÂàÿÃÂøûõóðõàú úÃÂðàúþûþýþú. ÃÂþñðòûõýøõ ÃÂòþùÃÂÃÂòð padding ÿÃÂø ÷ðôðýýþü width ÃÂðÃÂÃÂøÃÂÃÂõàÃÂøÃÂøýàÃÂûõüõýÃÂð, ÿþÃÂÃÂþüàýõþñÃÂþôøüþ ÃÂüõýÃÂÃÂøÃÂà÷ýðÃÂõýøõ width ýð òõûøÃÂøýàÿþûõù øûø ôþñðòøÃÂàòûþöõýýÃÂù ÃÂûõüõýààÿþûÃÂüø øûø þÃÂÃÂÃÂÃÂÿðüø.

àÿÃÂøüõÃÂõ 5.7 ÃÂðÃÂÃÂüþÃÂÃÂõý úþô, ò úþÃÂþÃÂþü ýðòøóðÃÂøàÃÂðÃÂÿþûþöõýð ò ÿÃÂðòþù úþûþýúõ, ÃÂðúöõ ÿÃÂøÃÂÃÂÃÂÃÂÃÂòÃÂõàÿþôòðû, ø ÃÂÃÂøÃÂÃÂòðÃÂÃÂÃÂàÿþûÃÂ.

ÃÂÃÂøüõà5.7. ÃÂòÃÂÃÂúþûþýþÃÂýÃÂù üðúõÃÂ

XHTML 1.0CSS 2.1IECrOpSaFx

àõ÷ÃÂûÃÂÃÂðàôðýýþóþ ÿÃÂøüõÃÂð ÿþúð÷ðý ýð ÃÂøÃÂ.à5.12.

àøÃÂ. 5.12. ÃÂòÃÂÃÂúþûþýþÃÂýÃÂù üðúõÃÂ

С чего начать создание собственного шаблона для материалов категории

Шаблон или макет для материалов это не то же самое что шаблон для сайта целиком, прошу не путать. Если Вы читали статью «Переопределение макета блога категории в Joomla 3» то уже знаете, что за вывод материалов в виде блога категории отвечают два основных файла blog.php, blog_item.php расположенные в папке components/com_content/views/category/tmpl. Кроме того в этой же папке находятся файлы отвечающие за вывод материалов категории в виде списка — default.php, default_item.php.

Именно на основе данных файлов мы и будем создавать собственный альтернативный макет с привязкой к пункту меню в панели управления. Я за основу буду брать файлы блога категории, однако можно взять и файлы, отвечающие за вывод материалов в виде списка, тут кому как больше нравится.

Для начала копируем вышеуказанные файлы (в моем случае blog.php, blog_item.php), а так же файл blog.xml из папки components/com_content/views/category/tmpl в папку templates/имя_вашего_шаблона/html/com_content/category. Теперь следует дать данным файлам новое название. Я решил назвать данные файлы так: new-blog.php, new-blog_item.php, new-blog.xml

Обратите внимание, что символ подчеркивания может быть только у одного файла и только в одном экземпляре

Файлы созданы и находятся на своем месте, отлично, теперь необходимо внести некоторые изменения в файл с инструкциями new-blog.xml. Для этого открываем его и смотрим на его содержимое, в самом начале файла Вы можете наблюдать следующий код (строки с 1 по 8):

<?xml version="1.0" encoding="utf-8"?>

Все что нам потребуется это внести изменения в константы и заменить в них фразу BLOG на NEW-BLOG. В итоге Ваш код должен получиться следующим (строка с 3 по 8):

Сохраняем файл, он нам больше не пригодиться. Теперь можно перейти в панель управления и посмотреть, что у нас получилось. В менеджере меню открываем один из пунктов для редактирования и жмем на кнопку «Выбрать» напротив типа пункта меню. Вот что у нас должно получиться:

Переопределение языковых констант

Новый тип пункта меню появился и даже работает, но его название мягко сказать неприличное. Давайте, это исправим и дадим нашему новому типу пункта меню адекватное название.

Для решения подобной задачи можно воспользоваться несколькими способами, самый простой это перейти в раздел панели управления «Менеджер языков: Переопределение констант» (Расширения -> Языки -> Переопределение констант). С помощью фильтра выбираем раздел «Панель управления» и жмем кнопку «Создать».

Все четыре языковые константы нам переопределять нет смысла, достаточно будет переопределить константу с заголовком типа пункта меню (TITLE) и с кратким описанием (DESC), данные константы у нас расположены в строках 3 и 6 файла new-blog.xml:

  1. COM_CONTENT_CATEGORY_VIEW_NEW-BLOG_TITLE
  2. COM_CONTENT_CATEGORY_VIEW_NEW-BLOG_DESC

Прописываем данные константы, даем им свое название и сохраняем, результат должен быть примерно таким:

Более подробно про переопределение языковых констант и локализацию Joomla 3 я расскажу в следующей статье, а сейчас давайте посмотрим, что у нас получилось. Снова переходим в редактор пункта меню и смотрим, как отображается наш новый тип пункта меню:

Вот и все, затратив всего 5-10 минут, мы создали новый тип пункта меню и привязали его к панели управления. Осталось лишь изменить файлы new-blog.php и new-blog_item.php по своему усмотрению, чтобы сделать наш макет уникальным. Как редактировать файлы макета, подробно написано в статье «Переопределение макета блога категории в Joomla. Часть-2».

CSS стили резинового макета.

В файле style.css пишем стили.

html, body {  height: 100%;  background: #000;
}.wrapper {  margin: 0 auto;  width: 90%;  max-width: 1200px;  height: 100%;  overflow: hidden;
}.head {  width: 100%;  height: 100px;  text-align: center;  background: #ccc;  margin: 0.5% 0;
}.sidebar {  float: left;  width: 20%;  height: 70%;  text-align: center;  background: #ccc;  margin: 0.5% 0.5% 0.5% 0;
}.content {  background: #ccc;  width: 58%;  float: left;  margin: 0.5%;  height: 70%;  text-align: center;
}.advert {  background: #ccc;  width: 20%;  float: right;  margin: 0.5% 0 0.5% 0.5%;  height: 70%;  text-align: center;
}.footer {  background: #ccc;  margin: 0.5% 0;  height: 70px;  float: left;  overflow:hidden;  width: 100%;  text-align: center;
}

Обратите внимание, что ширину и высоту блоков в большинстве случаев мы указываем в процентах

HTML разметка резинового макета.

Ф°Ã¹Ã» index.htmlàÿÃÂõôÃÂÃÂðòûÃÂõàÃÂþñþù ñûþÃÂýÃÂàòõÃÂÃÂÃÂúÃÂ.

à à àà à à à à charset=»utf-8″>à à à à à rel=»stylesheet» type=»text/css» href=»style.css» />à à à à à àõ÷øýþòÃÂù üðúõàÃÂðùÃÂðà à àà à àà à à à à class=»wrapper»>à à à à à à à àclass=»head»>à à à à à à à à à à

CSS ÃÂÃÂøûø ÃÂõ÷øýþòþóþ üðúõÃÂð.

àÃÂðùûõ style.css ÿøÃÂõü ÃÂÃÂøûø.

html, body {à height: 100%;à background: #000;
}.wrapper {à margin: 0 auto;à width: 90%;à max-width: 1200px;à height: 100%;à overflow: hidden;
}.head {à width: 100%;à height: 100px;à text-align: center;à background: #ccc;à margin: 0.5% 0;
}.sidebar {à float: left;à width: 20%;à height: 70%;à text-align: center;à background: #ccc;à margin: 0.5% 0.5% 0.5% 0;
}.content {à background: #ccc;à width: 58%;à float: left;à margin: 0.5%;à height: 70%;à text-align: center;
}.advert {à background: #ccc;à width: 20%;à float: right;à margin: 0.5% 0 0.5% 0.5%;à height: 70%;à text-align: center;
}.footer {à background: #ccc;à margin: 0.5% 0;à height: 70px;à float: left;à overflow:hidden;à width: 100%;à text-align: center;
}

ÃÂñÃÂðÃÂøÃÂõ òýøüðýøõ, ÃÂÃÂþ ÃÂøÃÂøýàø òÃÂÃÂþÃÂàñûþúþò ò ñþûÃÂÃÂøýÃÂÃÂòõ ÃÂûÃÂÃÂðõò üàÃÂúð÷ÃÂòðõü ò ÿÃÂþÃÂõýÃÂðÃÂ.

Ссылка на основную публикацию