Блог
Верстка (нарезка) шаблона сайта на InlifeCMS
1. Беседа с дизайнером!
Перед нарезкой сайта обязательно обсудить с дизайнером готовый psd-макет!!!
Основные ключевые моменты:
- размер сайта– будут ли страницы фиксированной ширины или тянуться на весь экран, возможно будут тянуться отдельные части сайта;
- расположение на экране;
Выслушать рекомендации дизайнера и приступать в работе!
2. Настройка Dreamweaver-а
Каждый раз при нарезке нового сайта на www.proba.ru производим следющие действия:
- В верхнем меню выбираем Site => Manage sites => New => Site
- В появившемся окне вводим доменное имя будущего сайта =>
- Мы работаем с использованием серверной технологии PHP MySQL, что и необходимо выбрать в следующем пункте =>
- Редактировать файлы мы будем непосредственно на сервере, поэтому в следующем окне выбираем пункт 3 “Edit directly on remote testing server using local network”. Чуть ниже выбираем папку где будут храниться html-файлы. Адрес следующий: ” P:\www\proba.ru\< Имя сайта >\cur\html\”.
- Далее вводим URL-адрес в интернете, по которому сайт будет доступен в время его разработки. Если нажать кнопочку “Test Url” должно быть написано”The url Prefix test was successful”.
- Далее жмём “OK” , “Done” => сайт настроен! Кстати, сайт доступен с любого компьютера!
3. Подготовка графики для дизайна сайта
Получив от дизайнера макет в psd-формате, приступаем к подготовке графики. Т.е. вырезаем из макета все графические обьекты. При этом надо помнить что “вес” страницы сайта в основном задаёт именно графика! Графические фалы должны быть оптимизированы до минимального обьёма при практически незаметном для глаз снижении качества картинки.
4. Собственно нарезка шаблона
Как известно, дизайн всех страниц содержится в одном шаблоне (если имеется несколько вариантов дизайна – то в нескольких, но об этом чуть позже).
1.Открываем в Dreamweaver-е этот шаблон
(лежит на “ P:\www\proba.ru\< Имя сайта >\cur\etc\templates\ main.tpl ” )
Если его там нет, то копируем из папкиP:\www\proba.ru\< Имя сайта >\cur\setup\templates\
Открываем таблицу стилей P:\www\proba.ru\< Имя сайта >\cur\html\design.css
Если нужный файл отсутствует – создаем сами.
В шаблоне сайта main.tpl удаляем всё между тегами <body> и </body> и приступаем!
Небольшие рекомендации по дизайну:
- необходимо включить в дизайн в main.tpl переменную контента “{literal}{$content}{/literal}”, без этого невозможно будет редактирование страниц и структуры сайта {literal}{$content}{/literal} временно можно поставить в любую часть main.tpl (между тегами <body> </body> разумеется)
- для избежания возможных проблем с кодировкой русского текста вставляем между тегами <head> </head> “ “meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ”
- мозилла по умолчанию делает отступ от рамок браузера, чтобы избежать этого в теге <body> надо прописать “leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"”
- логотип компании является ссылкой на главную страницу при создании таблицы не забывать об атрибутах тега <table> (width, height; параметры cellspacing и cellpadding обычно должны быть равны “0”, т.к. в ином случае браузеры по умолчанию разделяют таблицы на несколько пикселей в результате чего может поехать весь дизайн)
- в design.css задать общие стили для тегов “body, li, ol, ul, table, p, div”, также для “ h1, h2, h3 ”; “ h4 ”; “a ”; “a:hover ” ссылки укаывать только абсолютны.
- если необходимо переделать внешний вид какого-либо ресурса/плагина (например меню, новости, форум) предварительно нужно скопировать из \cur\setup\ в соответствующуюс папку каталога \cur\etc; стилей, применяемые в этих ресурсах/плагинах уже предопределены в документе style.css (лежит в \cur\setup\). Менять style.css нельзя!! Вместо этого можно переопределить нужный стиль скопировав его оттуда в design.css, где уже можно будет произвести необходимые изменения.
Контентные блоки (Content blocks)
Всё содержимое main.tpl отображется на всех страницах сайта, однако зачастую нужно разместить блоки информации, которые будут видны только на определенных страницах. Например, для интернет-магазина компьютерных комплектующих это может быть блок “специальное предложение”, причем на страничке с мониторами будет спецпредложение по мониторам фирмы “Benq”, а на странице жестких дисков – акция по винчестерам “Seagate”.
(!) Для работы с контент-блоками должен быть создан пункт admin в admin mode нашего сайта. Если такового нет, то создаем в следующем порядке:
- Залогиниваемся в Мозилле на нашем сайте (обычно подходит стандартный логин/пароль admin/admin-password)
- Добавляем статическую страницу admin
- В разделе access страницы “admin” необходимо назначить права доступа на эту страницу и все вложенные (страница должна быть доступна администратору и недоступна для простых юзеров). Для этого в поле доступ ставим “запретить”, в поле “ Действия ” отмечаем галочкой “все”, и в поле “ Субъекты ” выбираем “все субьекты”; после чего нажимаем “Добавить правило”
- К ресурсу admin добавляем последовательно разделы Content Blocks, Picture manager и Service (при этом выбираем соответствующий Тип ресурса внизу).
Для удобства можно сверстать содержимое будущего контент блока непосредственно в main.tpl, затем делаем следующее:
- Заходим в раздел admin=> Content Blocks
- Справа в поле “Имя (атрибут name)” вводим имя блока (произвольное, лучше легко запоминающееся, отражающее содержание блока); в поле “ Содержимое
блока ” соответственно переносим html-код блока из main.tpl, затем жмём “Добавить блок”. - Заходим в раздел admin =>service => редактор именованных множеств ресурсов каталога сайта. Там как раз мы сможем очень быстро и легко выбрать те страницы, на которых будет отображаться наш контент-блок. Делаем так: в таблице “Named sets” жмём “Create new” и вводим имя (можно как у контент-блока, чтобы не перепутать, ведь их моежт быть несколько) Далее проставляем галочки напротив нужных нам страниц и жмём “Submit Query”
- В main.tpl делаем следующую запись {literal}{content_block name=” имя блока ” namedset=”имя неймед сета”}{/literal}
- Проверяем проделанную работу в Internet Explorer
Зачастую контент блоки имеют непростую структуру (состоят из одной или более таблиц, либо строки таблицы). В данном случае контент-блок необходимо вставлять таблицей целиком, в шаблоне это должно выглядеть так
<td valign=”top”>{literal}{content_block…}{/literal}</td>
либо, если контент блок является строкой таблицы
….
</tr>
{literal}{content_block…}{/literal}
<tr>
…
Добавление страницы – заставки сайта (intro.htm)
Для добавления заставки сайта поступаем так:
1. Открываем engine.ini нашего сайта (лежит в ) \cur\etc\. Ищем там строку “;inherit_main_tpl = off”
Здесь:
; - комментарий – удаляем его
inherit_main_tpl = off - наследование main.tpl выключено. Меняем значение на “on”, сохраняем и закрываем файл.
2. Создаем в папке \cur\html\ файл intro.htm.
3. В дримвивере генерим html-код в соответствии с прилагаемым psd-макетом
Заставка готова!
Дополнительные шаблоны
Как мы знаем, в шаблоне main.tpl содержится дизайн сайта. Однако часто бывает что страницы сайта отличаются настолько сильно, что одним шаблоном тут не обойтись, или даже имеется несколько различных вариантов дизайна страниц, в этом случае необходимо сделать несколько шаблонов.
Пример 1. Дизайн страницы “игровые автоматы” отличается от всех остальных страниц сайта, имеющих одинаковый дизайн.
- Открываем engine.ini, ищем пункт
; etc/templates/main_<resource id>-personal.tpl
убираем комментарий. - Заходим в “edit” admin mode в мозиллу на страницу “игровые автоматы”. В атрибутах ресурса в пункте “Файл” из длинной строки запоминаем последние цифры (это id ресурса – запоминаем его например ….static_18 – отсюда id=18)
- Создаём файл main_18-personal.tpl, генерим html => страница готова!
Пример 2. Дизайн страницы “игровые автоматы” и вложенных в неё отличается от всех остальных страниц сайта, имеющих одинаковый дизайн.
- Снимаем комментарий в engine.ini с
; etc/templates/main_<resource id>.tpl - Создаём файл main_18.tpl, генерим html => готов шаблон страниц начиная с уровня “Игровые автоматы” и вложенных.