Личный опыт

Новое в блогах


Техноблог HTTPS и Amiro.CMS  1
Техноблог Обновление цен в каталоге интернет-магазина через CSV-файл 
Техноблог Подключаем и используем модуль «SEO Шаблоны»  1
Техноблог Использование модуля «Валюты» в интернет-магазине импортных товаров 
Личный опыт История от «Интер Электрик», #ОбновлениеЗаРассказ 
Личный опыт История от АвтоТехЦентр Субару Медведково, #ОбновлениеЗаРассказ 

Теги



Интернет-магазин за 6 вечеров. Вечер первый: макеты, стили, структура сайта

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

Приступаю непосредственно к описанию «посуточной» работы над проектом.

Кстати, если у вас возник вопрос, «А почему вечер, а не день?» - сейчас попытаюсь объяснить.

Если вы планируете запустить сайт интернет-магазина для себя  собственными же силами, то согласитесь: только в вечернее время у Вас будет время заняться собственным проектом. Если же вы фрилансер или сотрудник «виртуальной» студии без образования юридического лица — тем более понятно, что работой над проектом будете заниматься ближе к вечернему времени (в основное-то время, наверное — как и я, кстати — трудитесь в той компании, где у вас трудовая книжка находится? угадал?).

Ну а если у вас назначен выделенный сотрудник для проекта либо вы «честный» штатный специалист веб-студии, то аппроксимировать временные рамки под свои потребности особого труда не составит.

Вот краткая схема работ над проектом:

 

1-й час
Корректировка и создание новых макетов страниц демо-сайта
Amiro.CMS

Необходимые для работы ссылки на документацию Amiro.CMS:


Лирическое отступление

Наиболее подходящую цветовую гамму, макет страницы и шаблон дизайна можно выбрать на странице Конструктора сайта ВебСтолица.ру: http://www.webstolica.ru/builder/freedesign. В процессе оформления заявки на приобретение редакции просто укажите номер дизайна, и специалисты «Амиро» соберут дистрибутив выбранной вами редакции с указанным шаблоном.

Разработчики же как партнёры Amiro.CMS могут получить доступ к Партнёрскому конструктору сайта, в котором интеграция выбранного шаблона дизайна в выбранную редакцию происходит на лету, по нажатию одной кнопки. О доступе к Конструктору - см. инструкцию в Личном кабинете партнёра.


В Amiro.CMS макет дизайна страницы верстается блоками, которые представляют собой логические области дизайна, например, шапку, левую колонку, подвал, основную (контентную) часть. Содержимое каждого блока можно отредактировать в Визуальном редакторе Менеджера сайта. Но взаимное расположение блоков (так называемая сетка - gird) задается именно в макете страницы.

Редактировать макеты я предпочитаю прямо в Редакторе макетов самой CMS (хотя порой не хватает подсветки синтаксиса). Изредка, при использовании сложного макета, его верстку и проверку правильности отображения блоков я провожу во внешнем HTML-редакторе (например, NVU или Adobe Dreamveawer).

Макет страниц Amiro.CMS описывается обычным HTML-кодом. Так выглядит код макета страницы с шапкой и подвалом и трехколоночной центральной частью страницы.

##init##
<body>
<div id=stat>##stat_agent##</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id=lay_f1 valign="top" class="header">##lay_f1_body##</td>
</tr>
<tr height="100%">
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165px" id=lay_f2 class="left_colum" valign="top">##lay_f2_body##</td>
<td id=lay_body class="body_colum" valign="top">
##status_messages##
##lay_body_body##
</td>
<td width="165px" id=lay_f3 class="right_colum" valign="top"><!--правый столбец-->##lay_f3_body##</td>
</table>
</td>
</tr>
<tr><td id=lay_f4 class="footer" valign="top"><!--подвал-->##lay_f4_body##</td></tr>
</table>
</body>
##end##

Вот его отображение в окне просмотра. Перечень блоков отображается слева от окна просмотра, тут же задаются их наименования и наименование самого макета. Поскольку на одном сайте могут находиться страницы, выполненные в различных макетах, следует обратить внимание на следующее: если в двух макетах блоки lay_fN имеют одинаковое наименование (например, «Левая колонка»), то содержимое этих блоков будет ЕДИНЫМ для этих макетов. Т.е. внеся корректировки через Визуальный редактор Менеджера сайта в содержимое блока «Левая колонка» макета «главная страница», то содержание заменится и в блоке «Левая колонка» макета «Внутренняя страница». Поэтому если необходимо иметь уникальное содержание блоков в разных макетах, им необходимо дать различные наименования, например «Левая колонка главной» и «Левая колонка внутренней».

Еще одна особенность Amiro.CMS: возможно задать уникальное содержимое блоку одной конкретной страницы. Для этого в Визуальном редакторе на макете страницы ставится «кнопка». В этом случае изменения содержимого блока не будут автоматически распространятся на все страницы, использующие этот макет, а будут находится только на данной странице. В Карте сайта такие страницы отображаются значком , а на соответствующем макете .

Важная рекомендация: поскольку сайт собирается на основе демонстрационного сайта соответствующего пакета, то при создании новых макетов рекомендуется НЕ РЕДАКТИРОВАТЬ существующие макеты, а СОЗДАВАТЬ ИХ КОПИИ, давать им новые уникальные названия и уже в копии макетов вносить изменения. Причина этой рекомендации будет объяснена ниже.

Верстка макетов Amiro.CMS возможна не только в табличном формате, но и в DIV’ах.

2-й час
Корректировка общих таблиц CSS

Необходимые для работы ссылки на документацию:

Как и в случае с макетами страниц, можно использовать CSS-таблицу любого демо-пакета. Но в отличие от макетов страниц таблицу CSS стилей я предпочитаю «собирать» во внешнем CSS-редакторе (из–за подсветки синтаксиса, автоформатирования, визуального выбора значений атрибутов). В первую очередь я редактирую значения блока COMMON STYLES, COMMON STYLES FORM и COMMON STYLES TABLE. К содержимому остальных блоков таблицы CSS я обращаюсь в процессе настройки соответствующих шаблонов модулей и спецмодулей.



Рекомендация: редактировать содержимое CSS-таблицы без удаления имеющихся в демо параметров. Если какой-то набор стилей не используется (например, не собираетесь использовать модуль «Фотоальбомы» и соответствующий набор стилей) – не удаляйте его, в крайнем случае просто закомментируйте. Вполне может оказаться, что через некоторое время необходимость в модуле «Фотоальбомы» появится. 

Обращаю внимание, что кроме глобальных CSS стилей для каждого макета страниц существует своя, локальная таблица стилей, которая позволяет задать уникальные стили (вместе с уникальным дизайном) для соответствующей группы страниц сайта.

3-й час
Внедрение подготовленных макетов и CSS в демо-сайт, создание требуемой структуры сайта

Необходимые для работы ссылки на документацию Amiro.CMS:

Помните, на первом часе работы я рекомендовал создавать КОПИИ существующих макетов страниц демо-сайтов с новыми наименованиями? Причина в следующем: в демо-сайтах Amiro.CMS в блоках макета могут находится СПЕЦМОДУЛИ, такие как «быстрый поиск», «карта раздела», «анонс новостей», «новинки каталога», «меню клиента» и т.д. Если в макете страницы убрать, например, левую колонку (предполагается двухколоночное отображение конента сайта), то в «исчезнувшем» блоке могут находиться необходимые нам спецмодули. Поэтому сперва необходимо «пройтись» по Карте сайта в Мендеджере и удалить («стереть» в Визуальном редакторе) содержимое тех блоков макета, которые не будут использоваться в Ваших макетах. И только после такой чистки можно назначать страницам демо-сайта новый макет – это можно сделать «постранично» либо в пакетном режиме.


Внимание! Ни в коем случае не удаляйте демо-наполнение статических и динамических страниц до тех пор, пока Вы непосредственно не приступите к наполнению сайта своими данными! Тестовое наполнение сайта поможет Вам настроить дизайн и отображение примитивов Amiro.CMS под Ваши потребности (в процессе настройки модулей и спецмодулей, корректировки шаблонов). И только после настроек можно приступать к очистке сайта от демо-данных. Удалению демо-данных мы посвятим отдельный час в один из вечеров.

На этом же этапе я рекомендую просмотреть структуру демо-сайта и привести её в соответствие с требуемой структурой: отключить или удалить динамические страницы, чей функционал не требуется (например «Блог», «Форум», «Фотоальбом», «Файловый архив», др.), добавить необходимые согласно структуре сайта новые динамические и статические страницы и «пересортировать» их на Карте сайта: дело в том, что очередность следования страниц в списке Карты будет соответствовать очередности ссылок на эти страницы в динамически формируемом меню сайта.


Рекомендую всегда оставлять на сайте динамические страницы со следующими типами: «Поиск по сайту», «404 -страница не найдена», «Карта сайта», «Версия для печати». 

Важно: Очередность создания динамической страницы (на примере «Фотоальбома») следующая: создаете статическую страницу с наименованием «Наш фотокаталог», затем назначаете этой странице тип «Фотоальбом». В результате этого в блоке основного контента появится иконка выбранного модуля, кликнув по которой можно настроить параметры непосредственно фотоальбома и/или содержимого фотоальбома.

Важно 2: Наполнение динамическим контентом сайта ВСЕГДА должно предваряться созданием соответствующей динамической страницы в Менеджере сайта: сперва создаете страницу «Новости компании» с типом «Новости» - тогда в модуле «Новости» Панели управления данная лента будет доступна к наполнению. Создаете страницу «Отраслевые новости» с типом «Новости» - в Панели управления будут доступны две ленты новостей.

Читать продолжение

[05.07.11]  
Рейтинг: 3.4 (голосов: 5)
Комментировать

Теги: интернет-магазинhow-toпримерыинструкциямагазин за шесть вечеров
 
Вернуться к списку
Ваш комментарий