Как устроен каркас сайта? Работаем с конструктором шаблонов uCoz
Сегодня мне хотелось бы поделится с вами своим опытом внедрения на сайте конструктора дизайна. Так как у меня используется нестандартный дизайн - мне нужно внести изменения таким образом, чтобы можно было работать с сайтом при помощи конструктора.

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

Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:
Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
<!-- <header> -->
<!-- </header> -->
- в этом блоке я размещу верхнюю часть (шапку) сайта.
<!-- <middle> -->
<!-- </middle> -->
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент.
<!-- <footer> -->
<!-- </footer> -->
- здесь будет нижняя часть сайта - счетчики, копирайты и прочее. Отдельно бы хотелось остановится на описании кода
<!-- <middle> -->
<!-- </middle> -->
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент.

Результат: дизайн разбит на три больших части, каждая из которых имеет свое значение. Но - для того чтобы я мог управлять блоками и сгенерировать шаблоны для всех модулей мне нужно рассказать системе о том, как будут выглядеть блоки, и где они будут расположены.
Так как основная часть сайта (колонки) размещена в блоке
<!-- <middle> -->
<!-- </middle> -->
- добавим в него нужные коды.
При помощи кода
<!-- <container> -->
<!-- </container> -->
я определяю в моем дизайне область, в которой будут содержаться блоки, например "Опросы", "Календарь", "Поиск" и другие. При помощи этих кодов я точно указываю системе, где разрешено размещать новые блоки. В моем случае это левая и правая колонка средней части страницы. Прописываем коды в дизайн, например вот так:
<td valign="top" width="175" style="padding:1px; background:#FFFFFF;
 border-right:1px solid #666666;" align="center">
<!-- <container> -->
<!-- </container> -->
 </td>
Теперь мне нужно как то рассказать системе, как будет выглядеть мой будущий блок. При генерации шаблонов система сгенерирует шаблоны с учетом этой информации, и все новые блоки будут сразу же добавляться в нужном мне дизайне. Самое замечательное в этом то, что мне достаточно описать дизайн блока только один раз - все остальное система сделает сама. Добавляю блок в контейнер:
<td valign="top" width="175" style="padding:1px; background:#FFFFFF;
 border-right:1px solid #666666;" align="center">
<!-- <container> -->
<!-- <block> -->
 <table border="0" cellpadding="0" cellspacing="0" 
style="background:#666666; margin-bottom:1px;" width="175">
 <tr><td height="17" style="color:#FFFFFF; border:1px solid #666666;
font-size:10px;padding-left:10px;">
<b>TITLE</b></td></tr>
 <tr><td align="center" style=" background-color:#EFEFEF; 
padding:5px 0 5px 0;
 border:1px solid #666666;">CONTENT</td></tr>
 </table>
 <!-- </block> -->
<!-- </container> -->
 </td>
Если дизайн блоков во всех контейнерах будет одинаковый, то достаточно сформировать лишь один блок, а второй контейнер создать пустым. Блок имеет два зарезервированных кода "TITLE" и "CONTENT", которые соответственно означают "Заголовок" и "Содержимое" блока.

Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они:
- [TITLE] : заголовок страницы
- [CSS_URL] : путь к файлу с css-стилями
- [BODY] : основная часть страницы
- [COPYRIGHT] : копирайт системы uCoz

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

<!-- <popup> -->
<!-- </popup> -->
У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:
<!-- <popup> -->
 <table cellpadding="0" cellspacing="1" style="background:#FFFFFF;">
 <tr><td>
 <table border="0" cellpadding="0" cellspacing="0" 
style="background:#666666; margin-bottom:1px;">
 <tr><td height="17" style="color:#FFFFFF; border:1px solid #666666;
font-size:10px;padding-left:10px;">
<b>[TITLE]</b></td></tr>
 <tr><td align="center" style=" background-color:#EFEFEF; 
padding:5px 0 5px 0;
 border:1px solid #666666;">[BODY]</td></tr>
 </table>
</td></tr>
 </table>
 <!-- </popup> -->
Этот код желательно размещать в коде в самом конце, например после закрывающего тега </html> - это поможет избежать лишней путаницы при создании каркаса.
Обратите также внимание на то, что в коде всплывающих окон [TITLE] пишется в квадратных скобках, тогда как в коде блока TITLE пишется без скобок. Это сделано специально, чтобы была возможность различать эти два кода.
После того как все готово - просмотрю результат работы. Выглядит все нормально - поэтому сохраню сделанное, нажав на кнопку "Создать шаблоны". Система сгенерирует шаблоны для всех активных на данный момент модулей.
Подведу итог. Доработка своего уникального дизайна, для того, чтобы на сайте работал режим конструктора - довольно несложное и быстрое занятие, которое, однако, способно принести массу удобств в будущем. Уже сейчас создание собственного каркаса сэкономило мне массу времени на настройку дизайна для всех нужных мне модулей.

Напомню, в данной статье речь шла о нестандартных дизайнах (созданных вами). Режим конструктора поддерживают все стандартные шаблоны для uCoz.
Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.
44 комментариев
1 2 »
1 Написал DefKiNG 02 Июль 2009, 19:10
Надо же, новые посты всегда появляются неожиданно biggrin
пост неплохой, хоть нового ничего не узнал, но кому-то точно пригодися wink
2 Написал weiss 02 Июль 2009, 21:54
Такими темпами глядишь года через 3 и сайт доделаете happy
3 Написал Styler 02 Июль 2009, 22:57
Ошибаетесь - по плану планируется получить первые доходы не позднее чем через два месяца. Сейчас мертвый сезон - можно посвятить себя вдумчивой разработке.
К тому же - мне, как автору статей, тоже хочется отдохнуть летом.
4 Написал DefKiNG 03 Июль 2009, 21:11
Упомянули про доходы, а значит можно ожидать этап с описанием того, какую рекламу лучше выбрать и т.д. и т.п.?
5 Написал Kron 04 Июль 2009, 10:35
вы же не думаете, что мы будем писать про сомнительные рекламные системы, с попапами и т.п...

в остальном выбор не велик - Google Adsense, Begun, YaDirect.

начните с адсенса...

6 Написал DefKiNG 04 Июль 2009, 16:43
Конечно нет, как раз и рассчитываю увидеть что-нибудь про Адсенс smile
9 Написал Kron 07 Июль 2009, 15:46
http://forum.searchengines.ru/ - больше чем тут мы точно не скажем...
20 Написал WarezKiller 14 Июль 2009, 23:06
adsense это хорошо. у них всё можно красиво настроить, но... выплаты они проводят как-то не понятно wacko был бы у них вебмани - все дороги открыты! Я.Директ отверг мой сайт (кстати так и не указав точной причины), а буген... тупо. я укоз рекламу отключил, а теперь поставлю такую же, только уже для себя. не солидно как-то!
25 Написал ganjas 16 Июль 2009, 18:15
А вы разве создаете сайт из чистой любви к этому делу? Реклама на сайте это естественно, кстати Яндексдирект иногда неприлично много платит за клик
7 Написал wangog 05 Июль 2009, 00:36
Ну вот еще 1 урок ! Сколька уроков будет ?! Радует ! Потехонку идём вперёд ! biggrin cry
8 Написал Slavito 07 Июль 2009, 15:18
+1
10 Написал mehaNik 07 Июль 2009, 18:09
следующий сайт буду именно так делать. +1
avatar
11 Написал Smerch4192 09 Июль 2009, 20:34
Привет всем ответте мне пожалуйста на вопрос ucoz - это платный или бес платный хостинг?
12 Написал Styler 09 Июль 2009, 23:45
Для того чтобы это понять достаточно зайти на главную страницу ucoz.ru - но вам видимо тяжело, потому отвечу тут - бесплатный.
23 Написал ganjas 16 Июль 2009, 18:02
Дополню styler-а: Ucoz - это непросто бесплатный хостинг, это хостинг, которому нет аналогов в рунете (насчет остального не знаю - с ин-язами туго), возможности Ucoz широки, более того Ucoz на мой взгляд действительно прост (но человеку который занимается подобным впервые придется потратить немного времени для того чтобы разобраться во всех деталях).
28 Написал diyakov-vlad 01 Август 2009, 17:42
Совершенно с Вами согласен!
avatar
13 Написал Smerch4192 10 Июль 2009, 10:11
Ага спасибо! И еще вопросик немогли бы вы разпиать как добавить картинку на сайт что бы она была сразу видна а не прекреплять ее. Я добовлял в файл менеджер потом в текст и у меня получался огромный плакат smile , как уменьшить размер этой картинки хотя нет как уменьшить ее границы? или я вообще все неправильно делую!?
14 Написал Styler 10 Июль 2009, 11:46
Намеки вы не понимаете - напишу ясно - с подобными вопросами обращайтесь на форум технической поддержки: http://forum.ucoz.ru
15 Написал Kron 10 Июль 2009, 15:24
да вы все делаете неправильно... при добавлении материала есть поле для выбора картинок, где сразу же можно указать размеры уменьшенной версии картинки, т.е. если картинка больше указанных размеров, то она автоматом уменьшается, а кликнув на нее человек увидит оригинал.
avatar
16 Написал Mihaus 11 Июль 2009, 12:15
всем привет.вот щас начал по тихоньку делаю сайт подскажите пожалста на какую тематику мне его делать что бы было востребовано но в тоже время конкуренция не оч большая
17 Написал weiss 11 Июль 2009, 13:23
Начали делать сайт, но не знаете на какую тематику его делаете? Забавно.
24 Написал ganjas 16 Июль 2009, 18:05
Опа, а вы сами не пробовали подумать? Не знаете чем заняться - делайте варез, серавно из этого ничего не выйдет! wacko
avatar
18 Написал Den4674 12 Июль 2009, 23:12
Кто ни буть подскажите как сайт сделать видемым в поисковиках???
avatar
19 Написал hit-alex 13 Июль 2009, 00:21
Для того что бы сайт был виден поисковикам нужно его раскрутить. Для этого нужно добавлять много материалов и иметь пользователей.
22 Написал ganjas 16 Июль 2009, 17:50
Странный вопрос, вы вобще давно сайты строить начали? Но на вопрос отвечу: для того чтобы сайт на Ucoz"е начал индексироваться поисковыми системами нужно чтобы прошло определенное количество времени, сколько точно - не знаю.
Ну а если вы имели в виду как дать знать поисковому роботу о вашем сайте то тут всё очень просто:
- Яндекс: у яндекса есть сервис яндекс вебмастер, в он позволяет добавить сайт, удальть УРЛ, указать путь к файлу sitemap.xml, а также многое другое!
- Google: в гугле есть "Инструменты для вебмастеров" - это примерно тоже что и "Яндекс. Вебмастер"
- Поиск@mail.ru: Насколько я знаю mail.ru использкет базы яндекса!
27 Написал diyakov-vlad 01 Август 2009, 17:40
Ой, не скажите.
1. Сделал сайт.
2. Через 7 дней предложил его к индексации Яндексу.
3. На следующий день после предложения в Яндексе появилась 1 страница с сайта.
4. Через 3 дня после предложения в Яндексе было уже 424 страницы.
26 Написал diyakov-vlad 27 Июль 2009, 17:50
Его надо предложить ПС к индексации.
В Яндексе, Рамблере, Го-Го, Гугл, Апорте этого будет достаточно.
Для этого есть хотя бы сервис от Яндекса
webmaster yandex ru
(пробелы заменить точками в английской раскладке клавиатуры).
У меня уже на следующий день после предложения к индексации сайты появляются в ПС.
Вот что значит тренировка
Если есть вопросы, обращайтесь ко мне, помогу.
Так как сейчас накопил много инструментов для веб-мастера и оптимизатора.
avatar
21 Написал Svetlana2220 16 Июль 2009, 09:51
Подскажите пожалуйста как сделать так чтобы виджет скайп при моем нахождении в сети светился а не был серого цвета как будто меня нет, хотя он работает. И второй вопрос. Как добавить рисунки в виджет слайд картинок.
avatar
29 Написал walt 01 Август 2009, 20:07
Я ПОНИМАЮ ЧТО ЭТО НЕ В ТЕМУ НО У МЕНЯ УКРАЛИ САЙТ ЭТО ЗДЕЛАЛ ХОЛОД ПРОЗЬБА ПРИНЯТЬ МЕРЫ КАК МОЖНО БЫСТРЕЕ
30 Написал Sub-Zero 06 Август 2009, 20:30
Извините, что не в тему, но как сделать чтобы ссылки были видны только зарегистрированным пользователям для скачивания? surprised
34 Написал Nexonion 14 Август 2009, 20:38
[hide][/hide]
avatar
31 Написал [ToXiC] 11 Август 2009, 17:14
Дайте код для создания Разделов новостей сайта )))))))))Плиззз ))))
avatar
32 Написал sellgi 12 Август 2009, 22:39
Есть крутая идея,вот только не прикалывает возиться с созданием сайта,извечный вопрос поставленный классиком:что делать?
33 Написал Nexonion 14 Август 2009, 20:35
У меня вопрос по дизайну блоков. В конструкторе очень удобно настроить дизайн всех блоков на сайте, но в таком случае они будут все одинаковы. Но к примеру мне надо чтобы их дизайн украшался разными картинками. То есть блок состоит из двух частей: заголовка (под которым находиться фоновая картинка) и основной части, где уже на усмотрение пользователя находиться разная информация. И мне хотелось бы сделать заголовки единой картинкой и для каждого блока красиво их оформить, но встаёт проблема конструктор может отредактировать дизайн сразу всех блоков (левых и правых по отдельности). Возможно ли как-то это реализовать?
avatar
35 Написал TOL6369 17 Август 2009, 02:01
Мне,как новичку, вся эта информация очень пригодится. smile
avatar
36 Написал АТА 19 Август 2009, 14:06
Как изобразить степень степени числа (т.е. "три этажа")?
Например: 4 в степени 32.
avatar
37 Написал Администратор1024 20 Август 2009, 08:30
Я новичок-чайник-самоучка. Очень хочу создать сайт (тема - супер!!!, аналогов почти нет). Но абсолютно не знаю языков программирования, даже на подбор фона у меня ушло часа 3.
Подскажите сайты, где можно научиться sad
avatar
38 Написал LEE 09 Сентябрь 2009, 03:41
SUPER tongue
39 Написал RUSH2280 25 Сентябрь 2009, 17:47
Видимо, у меня не активирован Конструктор. Как это сделать? wacko
1-20 21-25
Ваш комментарий