Главная страница » Инструкция пользователя » Дизайн сайта » Установка своего персонального дизайна (для вебмастеров) »
Установка своего персонального дизайна (для вебмастеров)
Рассматривать будем на примере установки дизайна на сайт www.25canal.dimitrovgrad.info
Исходные файлы
Исходные файлы дизайна у вас уже должны быть подготовлены до начала установки дизайна на ваш сайт-визитку.
Пример. Дизайнер сделал нам дизайн для сайта в виде:
Дизайн представлен файлами:
index.htm - сам файл дизайна в виде html-кода style.css - стили CSS описывающие оформление 25canal.gif - далее идут картинки к дизайну bg.gif dot.gif dot1.gif line.gif line_1.gif logo.gif p.gif
Обращаем ваше внимание, код дизайна должен исходить из того, что файлы CSS, Javascript и картинки будут находиться на том же уровне, что и страница. Эти файлы не могут быть в разных папках и подпапках.
Важно! Для получения возможности установить абсолютно свой дизайн на сайт необходимо, чтобы был включён пакет услуг "Всё включено"
Устанавливаем в коде дизайна метки
1. В index.htm с помощью текстового редактора (рекомендуем Блокнот, HomeSite или DreamViewer, не рекомендуем Word, FrontPage) заменяем "Текст страницы" на ОСНОВНОЙТЕКСТ Обратите внимание, написание очень важно: именно заглавные буквы, слитно, без пробелов. ОСНОВНОЙТЕКСТ - это метка, когда система встретит её, то в этом месте будет выводить основной текст страницы.
2. Также с помощью текстового редактора в index.htm пишем ТЕМАСТРАНИЦЫ в тех местах, где должен будет подставляться заголовок страницы. Обязательно стоит эту метку установить внутри тегов <title>ТЕМАСТРАНИЦЫ</title> и хотя бы разок где-то на странице среди тегов <h1>ТЕМАСТРАНИЦЫ</h1>, <h2>ТЕМАСТРАНИЦЫ</h2> или <h3>ТЕМАСТРАНИЦЫ</h3> Это важно для хорошей находимости Вашего сайта в поисковых системах.
3. Где-то в дизайне обязательно делаем ссылку на страницу mapsite.html
mapsite.html - это автоматическая карта сайта
Карта сайта в случае ошибки в дизайне позволит вашему сайту быть проиндексированным поисковыми системами.
Дизайн стал выглядеть так:
Загружаем файлы на сайт
Входим в систему управления сайтом-визиткой.
С помощью пункта "Картинки и фотографии" меню "Контент" в верхней полоске системы управления загружаем на сайт все картинки jpg, gif и png
С помощью пункта "Файлы CSS, JS и SWF" меню "Контент" в верхней полоске системы управления загружаем на сайт все файлы css (стили), js (java-script) и swf (флеш-анимация)
Настраиваем меню навигации
В index.htm вырезаем часть кода, отвечающую за меню, и пишем на месте этого кода метку МЕНЮНАВИГАЦИИ
Вырезанный код вставляем в пустой другой текстовый файл, он нам сейчас пригодится.
В нашем случае вырезанный код, управляющий меню, выглядит как:
<TABLE cellSpacing=0 cellPadding=0 width="158" border=0><TR height=6><TD><img src="line.gif" width="158" height="6" border="0"></TD></TR>
<TR><TD width="100%"><A href="/index.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Главная</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/about.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> О нас</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/price.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Расценки</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/script/reklama.html" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Реклама</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/script/message.html" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Объявления</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
<TR><TD width="100%"><A href="/pay_org.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Заказ на рекламу</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
</TABLE>
Цветами я выделил для вас код, который нам нужен для настройки меню.
Открываем систему управления сайтом-визиткой. Под меню навигации слева на странице есть ссылка "Настройка меню". Нажмите на неё.
Внизу страницы будет ссылка "Настройка html-кода для отображения меню", нажмите на неё. Откроется форма.
В поле "1. Код в начале меню" мы вводим пурпурный код:
<TABLE cellSpacing=0 cellPadding=0 width="158" border=0><TR height=6><TD><img src="line.gif" width="158" height="6" border="0"></TD></TR>
В поле "2. Код в конце меню" мы вводим оранжевый код:
</TABLE>
В поле "3. Шаблон пункта меню" мы вводим красный код:
<TR><TD width="100%"><A href="/index.htm" class="menu"><img src="dot.gif" width="7" height="7" border="0"> Главная</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
только в нём заменяем /index.htm на метку ССЫЛКА, а Главная заменяем на метку НАЗВАНИЕ
В результате содержимое поле получится:
<TR><TD width="100%"><A href="ССЫЛКА" class="menu"><img src="dot.gif" width="7" height="7" border="0"> НАЗВАНИЕ</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
Присланный дизайн дизайнером не предусматривал, чтобы какой-то пункт меню отличался от других, если мы в нём уже находимся. Мы же с вами давайте выделим текущий пункт.
В поле "4. Шаблон текущего пункта меню" вставляем тоже самое, что вставляли в поле "3. Шаблон пункта меню". Только мы с вами для ячейки добавим фон красный. Содержимое поля получится в виде:
<TR><TD width="100%" bgcolor="red"><A href="ССЫЛКА" class="menu"><img src="dot.gif" width="7" height="7" border="0"> НАЗВАНИЕ</A></TD></TR><TR height=2><TD><img src="p.gif" width="154" height="2" border="0"></TD></TR>
Обратите внимание! Если вы не хотите, чтобы текущий пункт меню как-то выделялся, то тогда в поле 4 скопируйте тоже самое, что в поле 3. Тогда текущий пункт будет выглядеть точно также как и остальные пункты меню, ничем не выделяясь.
Поскольку у нас с вами подменю не предусмотрено дизайном, все остальные поля мы делаем пустыми.
Сохраняем настройки кода меню.
Подключаем дизайн на сайте
Заходим в пункт "Персональный дизайн" меню "Дизайн" в верхней полоске системы управления на сайте-визитке.
Нажимаем на ссылку "Добавить новый дизайн".
Пишем какое-то условное название для дизайна. В поле "HTML-код дизайна" вставляем через буфер обмена код файла index.htm, в котором мы ранее сделали уже все метки. Нажимаем на кнопку "Сохранить", а потом сразу на ссылку "Перейти в список дизайнов". Это важно! Дизайн мы загрузили на сайт, но пока его ещё не включили. Давайте его включим.
На открывшейся странице в разделе "Оформление страниц сайта в дизайн" для пункта "Дизайн по умолчанию" выбираем наш новый дизайн и нажимаем на кнопку "Сохранить".
Всё готово! На обычных страницах сайта у вас будет работать ваш дизайн, а на страницах системы управления будет стандартный дизайн, чтобы всегда и легко можно было исправить ошибки дизайна.
Дополнительные возможности
Вы можете в любой части дизайна сделать какую-то область текста, которую можно будет визуально редактировать отдельно от основной части текста.
Например, у вас три колонки. В центральной колонке стоит ОСНОВНОЙТЕКСТ. А в левой и правой колонках какие-то свои тексты, которые нужно, чтобы пользователь также мог править. Это возможно сделать в системе.
Для этого через пункт "Страницы сайта" меню "Контент" создайте пустую страницу. Запомните её номер. Номер можно узнать перейдя на эту страницу. В адресной строке браузера будет написано, например, www.25canal.dimitrovgrad.info/page20.html, где 20 - это номер страницы, который вам нужен.
Запомнили этот номер.
Открываем в пункте "Персональный дизайн" меню "Дизайн" ваш дизайн на редактирование.
В коде дизайна там где должен вставляться редактируемый блок напишите метку СТРАНИЦА20
20 - это как раз номер страницы, что мы с вами запоминали из примера. Сохраните дизайн.
Всё, теперь у вас на месте метки СТРАНИЦА20 будет появляться блок текста, который можно будет в любой момент вызвать на редактирование.
Содержимое блока будет храниться в странице №20 списка страниц.
Главная страница » Инструкция пользователя » Дизайн сайта » Установка своего персонального дизайна (для вебмастеров) »