Эта запись написана мною в 2011 году. В те времена деревья были высокими, а доллар стоил меньше 40 рублей. С тех пор прошло много времени и многое изменилось. Учитывайте это, читая.
Я решил написать некий гайд по созданию собственного дизайна на uCoz . Он будет состоять из 2-х частей. Во второй части рассказывается о самой вёрстке шаблона.
Обязательно прочтите о проблемах , которые вы можете встретить при создании 1-ого шаблона.
Что такое шаблон для uCoz? Это лишь описание расположения элементов сайта и графический вид сайта.
Каким должен быть шаблон сайта
?
Шаблон должен быть устроен так, что бы он «обрамлял» контент сайта, ни в коем случае не мешал пользователям. Пытайтесь создать шаблон, уникальный по своей идее, чтобы пользователи запоминали ваш сайт. К примеру, существует огромное кол-во вроде разных, но внешне очень похожих игровых шаблонов (все тёмные, в полоску). Когда пользователь будет открывать такой сайт, ему будет казаться, что здесь он уже был. Придумайте некую изюминку.
Шаблоны бывают резиновыми и фиксированными . Резиновый — шаблон растягивается по ширине экрана. Фиксированный — ширина шаблона задана и остаётся постоянна при любой ширине экрана пользователя. Шаблон моего блога, на котором вы сейчас находитесь, является фиксированным.
Советую первый свой шаблон делать фиксированным т.к. при вёрстке вам будет гораздо легче.
Сначала представьте, как будет выглядеть ваш будущий шаблон в общих чертах. Затем возьмите лист А4 и карандашом нарисуйте эскиз будущего дизайна. Так вам будет намного проще, к тому же нередко во время рисование приходят замечательные идеи. Именно на своём эскизе вы должны продумать устройство шаблона.
После чего вы можете смело включать Photoshop . Размер файла выберите равный разрешению вашего экрана (у меня 1280 на 1024 пикселей). Грамотно подойдите к выбору цветовой гаммы вашего будущего шаблона. В основу нужно брать 2-3 цвета, они должны гармонировать между собой. Цвета желательно должны быть естественными. Для выбора естественных цветов отлично подойдёт какая-нибудь фотография. Открываете её в фотошопе и через пипетку смотрите коды цветов.
В подборе цвета вам может помочь специальный сервис Color Wizard . Вводите в спец. поле код цвета и нажимаете «set».
Если у вас не хватает идей оформления сайта, то просто открывайте первый же сайт с уроками фотошопа и смотрите все подряд. Иногда их части бывают очень полезны.
Не забудьте хорошо продумать навигацию. Она должна быть удобной и интуитивно понятной
P.S. наткнулся на интересный блог об оптимизации/раскрутке. Нравится тем, что автор ставит опыты над поисковиками.
Прежде чем перейти к процессу установки необходимо найти подходящий дизайн. Я бы рекомендовал использовать шаблоны только из проверенных источников, таких как: официальный магазин от uCoz или же на сайтах, которые специализируются на данном направлении.
В этом случае вы можете быть уверены в качестве шаблона и его работоспособности. Безусловно, можно нагуглить или использовать различные варезники - но очень часто на них попадаются рипы, нерабочие дизайны или еще хуже файлы с вирусами. Поэтому подойдите к вопросу выбора источника со всей серьезностью, так как от этого зависит не только успех проводимой операции, но и безопасность вашего сайта. В рамках этой статьи я буду устанавливать бесплатный шаблон DesktopChaos с uTemplate.pro.
Итак, загружаем архив с шаблоном:
Внутри архива находятся несколько вложенных папок:
Также в архиве, как правило, присутствуют:
Примечание: содержимое вашего архива может отличаться от моего шаблона (это зависит от типа, структуры, сложности шаблона и других факторов).
Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)
Для этого - заходим в "Панель управления" своего сайта - "Дизайн" - "Резервное копирование шаблонов":
Нажимаем в правом верхнем углу кнопку "Создать резервную копию", после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида "1372338464.zip" с датой создания в скобках:
И, еще один момент: перед установкой нового шаблона рекомендую активировать все необходимые модули : те, которые вы в данный момент хотите использовать и те, которые возможно вы захотите использовать в будущем. Это делается для того, что бы ваш новый шаблон корректно установился и отображался во всех модулях.
Установка шаблона делается согласно той инструкции, которая находится внутри вашего архива с шаблоном . Как я уже говорил в рамках этой статьи я буду показывать установку шаблона DesktopChaos .
Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.
Первый способ - через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/ .
После этого, на главной странице Панели Управления жмем и задаем новый пароль:
После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем "Быстрое соединение":
В левой части менеджера находим папку с картинками своего шаблона, жмем на ней правой кнопкой мышки, в появившемся меню нажимаем "Закачать на сервер". Готово. Теперь картинки находятся на нашем сервере.
Данным способом удобно пользоваться если нужно закачать много изображений, или других файлов.
Второй способ - загрузка изображений через Файловый менеджер . Переходим на главную страницу ПУ и нажимаем на "Файловый менеджер":
В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:
Заходим в эту папку. Что бы закачать в нее картинки нажимаем "Выберите файл", выбираем картинку и жмем Загрузить файл. Зеленым плюсиком можно добавлять поля для нескольких файлов.
Таким образом закачиваем на сервер все картинки из папки images.
Устанавливаем (если нужно) значение тега . Заходим в "ПУ (Панель Управления)" - "Настройки" - "Общие настройки" и в соответствующее поле вставляем код:
Устанавливаем Таблицу стилей. Для этого, находим в архиве файл "Таблица стилей.txt", открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в "ПУ" - "Дизайн" - "Управление дизайном (CSS)" - "Таблица стилей (CSS)":
Устанавливаем код из файла "Конструктор шаблонов". Открываем файл из архива "Конструктор шаблонов.txt", копируем все содержимое и вставляем его в "ПУ" - "Дизайн" - "Конструктор шаблонов", нажимаем кнопку "Создать шаблоны":
Теперь, аналогичным образом переносим содержимое файла "Вид материалов.txt" в вид материалов модулей: "Новости сайта", "Блог", "Каталог файлов", "Каталог статей". Идем в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)":
Код из файла "Вид комментраиев.txt” аналогично копируем в "Комментарии" - "Вид комментариев".
Создаем Глобальный блок. Переходим в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки":
В правом верхнем углу жмем "Добавить блок", в появившемся поле пишем названия блока INFO и нажимаем "Добавить":
Находим в архиве папку "Глобальные блоки" и открываем файл "INFO.txt", копируем содержимое файла и вставляем в только что созданный глобальный блок INFO, сохраняем:
Устанавливаем необходимые значения:
Жмем "Создать".
После этого чуть ниже появляется блок с созданным нами информером, справа в нем видим иконки, выбираем первую из них "Управление дизайном информера" и в появившееся окно вставляем из папки "Информеры" содержимое файла "Последние новости", сохраняем:
Код данного информера $MYINF_1$ вставляем в созданный нами ранее глобальный блок INFO .
Информер для форума создается похожим образом.
На этом установка шаблона DesktopChaos завершена.
К стати, если вы так и не разобрались с установкой нового шаблона на свой сайт, то в официальном магазине uTemplate.pro можно заказать услугу по установке шаблона.
Сегодня мне хотелось бы поделится с вами своим опытом внедрения на сайте конструктора дизайна. Так как у меня используется нестандартный дизайн - мне нужно внести изменения таким образом, чтобы можно было работать с сайтом при помощи конструктора.
Что мне это даст?
Во-первых
- удобный способ управлять дизайном сайта и блоками, не заходя в панель управления.
Во-вторых
- быстрое добавление нужных мне блоков, которые уже будут оформлены в нужном мне дизайне.
В-третьих
- возможность использовать в блоках предоставляемые системой возможности - например гаджеты и виджеты.
В-четвертых
- самое важное преимущество. При создании каркаса система сама сгенерирует все шаблоны для всех модулей - и мне не нужно будет менять их руками, для каждого используемого мною модуля.
Полезность очевидна - вооружусь терпением и начну вносить изменения.
Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:
Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
- в этом блоке я размещу верхнюю часть (шапку) сайта.
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент.
- здесь будет нижняя часть сайта - счетчики, копирайты и прочее.
Отдельно бы хотелось остановится на описании кода
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент.
Результат: дизайн разбит на три больших части, каждая из которых имеет свое значение. Но - для того чтобы я мог управлять блоками и сгенерировать шаблоны для всех модулей мне нужно рассказать системе о том, как будут выглядеть блоки, и где они будут расположены.
Так как основная часть сайта (колонки) размещена в блоке
- добавим в него нужные коды.
При помощи кода
я определяю в моем дизайне область, в которой будут содержаться блоки, например "Опросы", "Календарь", "Поиск" и другие. При помощи этих кодов я точно указываю системе, где разрешено размещать новые блоки. В моем случае это левая и правая колонка средней части страницы. Прописываем коды в дизайн, например вот так:
TITLE |
CONTENT |
Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они:
-
: заголовок страницы
-
: путь к файлу с css-стилями
-
: основная часть страницы
-
: копирайт системы uCoz
У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:
|