Fall 08 uCoz: создание сайта




Сторінка16/16
Дата конвертації18.04.2016
Розмір5.77 Mb.
1   ...   8   9   10   11   12   13   14   15   16
раздел «Глобальные блоки» в этой главе.

Как правильно работать с этим кодом? Если вы плохо разбираетесь в HTML, прежде всего,

отставьте священный трепет.

Если вы что-то сделаете не так, и дизайн «поедет», всегда можно будет воспользоваться

восстановлением и вернуться к исходной точке при помощи кнопки Восстановить

стандартный шаблон справа вверху.

Для мелких изменений подойдет визуальный редактор — в нем проще поправить какое-

то слово или убрать выделение, чем искать нужное место в коде.

Вот так выглядит страница Доступ запрещен в редакторе:

uCoz: создание сайта Глава 27. Дизайн

316

Редактор дает общее представление о том, как будет выглядеть страница, и не

отображает содержимое глобальных блоков и системных кодов (о работе с редактором и

назначениях кнопок см. в главе «Основные инструменты работы с системой»). Для более

тонкой настройки код можно скопировать в программу для верстки веб-страниц,

например Dreamweaver, FrontPage или HomeSite.

Код страницы Доступ запрещен в Dreamweaver выглядит так:

uCoz: создание сайта Глава 27. Дизайн

317

А страница на сайте — так:

После внесения изменений в код их нужно сохранить, и если операция сохранения

пройдет успешно, над кодом появится следующая надпись:

Итак, принцип работы с редактором шаблонов таков:

если в страницу нужно внести минимальные изменения, воспользуйтесь



визуальным редактором;

если изменения средние, и вы знакомы с HTML, просто прямо редактируйте код и



сохраняйте изменения;

если назрела масштабная переделка, копируйте код в сторонний редактор, там



внесите все необходимые изменения, копируйте код обратно и сохраните работу;

uCoz: создание сайта Глава 27. Дизайн

318

если вы испортили шаблон, воспользуйтесь восстановлением стандартного вида.



Но учтите: если вы поэтапно вносили разные изменения, они все сбросятся. Если

вы хотите откатиться к какому-то конкретному шагу, делайте резервную копию

шаблона на этом шаге (подробнее см. в разделе «Backup шаблонов» в этой главе).

Дальнейшее рассмотрение редактора шаблонов невозможно без понимания того, что

такое глобальный блок.

Глобальные блоки

В текущей версии системы шаблоны многих страниц построены на глобальных блоках.

Чтобы вы лучше поняли, что это такое, вернемся к разделу «Структура страницы сайта».

Сайт будет состоять из набора страниц, построенных по определенному принципу.

При перемещении между страницами некоторые его части будут оставаться

неизменными: шапка и подвал будут одинаковыми и на главной странице, и на странице

обратной связи. Меню тоже может оставаться одним и тем же для всего сайта. Поэтому

логично описать внешний вид сайта один раз, чтобы весь набор шаблонов для дизайна

выглядел не так (каждая страница описана отдельно):

а вот так:

uCoz: создание сайта Глава 27. Дизайн

319

Подобную структуру сайта позволяют реализовать глобальные блоки.

По умолчанию в системе четыре глобальных блока:

Верхняя часть сайта — отвечает за шапку;

Нижняя часть сайта — отвечает за подвал;

Первый контейнер — отвечает за левую колонку;

Второй контейнер — отвечает за правую колонку.

Внимание!

В системе есть дизайны, в которых только одна колонка — при этом остается только три

глобальных блока.

Щелкнув по любому блоку, вы увидите его содержимое:

Работать с ним нужно точно так же, как и с любым другим шаблоном.

Как же вставить эту шапку в другие шаблоны? С помощью системного кода:

$GLOBAL_AHEADER$ — системный код шапки;

$GLOBAL_BFOOTER$ — системный код подвала;

$GLOBAL_CLEFTER$ — системный код левой колонки;



$GLOBAL_DRIGHTER$ — системный код правой колонки.

Открыв в редакторе шаблонов страницу Доступ запрещен, которую мы уже

рассматривали, в ее коде вы сможете найти все эти четыре кода.

Расшифровывая данный код, браузер подставит его шаблон вместо $GLOBAL_AHEADER$,

отобразив шапку.

Вы можете добавлять глобальные блоки в систему самостоятельно (подробнее см. в

разделе «Управление глобальными блоками»). Однако сначала уделим немного

внимания системным кодам.

uCoz: создание сайта Глава 27. Дизайн

320

Системные коды в дизайне

Системные коды uCoz — это специфика системы. Таких кодов вы не найдете больше

нигде. Чтобы полностью освоить принципы работы с ними, изучите главу «Системные

коды», здесь же я расскажу про коды с точки зрения их применения в дизайне.

Итак, системный код — это специальная переменная, за которой прячется кусок кода.

Коды записываются большими буквами со значком доллара с двух сторон — $КОД$.

Что значит «прячется кусок кода»? Как и в глобальном блоке, о котором мы только что

прочли, за системным кодом $GLOBAL_AHEADER$ скрыт весь код шапки. И если мы что-то в

нем изменим, шапка поменяется на каждой странице сайта, в шаблоне которой прописан

$GLOBAL_AHEADER$.

Под каждым шаблоном вы видите перечень всех системных кодов, которые в нем можно

использовать. Рядом с каждым кодом есть краткое описание того, для чего он

предназначен.

Содержимое некоторых кодов зависит от настроек сайта. Например, $PM_URL$ — код

ссылки на личные сообщения пользователя. Их внешний вид (цвет, размер и вид ссылки)

определяется общим дизайном сайта. А содержимое других вообще весьма непостоянно:

$DATE$ — текущая дата, она будет постоянно меняться.

Системные коды вставляются в дизайн страницы очень просто — название копируется и

вставляется в место кода, где вы хотели бы видеть, скажем, текущую дату или ссылку на

личные сообщения.

uCoz: создание сайта Глава 27. Дизайн

321

С помощью системных кодов в дизайн вставляются и модули:

$POLL$ — модуль опросов;

$CHAT_BOX$ — модуль чата;

$COUNTER$ — модуль статистики;

$MFORM_1$ почтовые формы.

Системный код $BODY$

Такой код встречается во всех контент-модулях, за ним скрывается центральная часть

страницы и его содержимое, причем каждый раз разное.

Например, в шаблонах, относящихся к форуму, за кодом $BODY$, скрывается весь форум

целиком. Редактировать внешний вид форума вы можете только с помощью настроек

модуля и CSS, но никак не через HTML в шаблонах.

Управление глобальными блоками

Помимо глобальных блоков для частей сайта, существующих в системе по умолчанию,

можно создавать свои блоки. Для этого нужно попасть в интерфейс управления блоками.

В редакторе шаблонов в верхнем меню есть ссылка на него — Глобальные блоки:

uCoz: создание сайта Глава 27. Дизайн

322

Щелкните по этой кнопке, чтобы попасть в форму:

Внимание!

Помните, что в зависимости от выбранного дизайна, у вас может оказаться меньше

блоков.

Форма состоит из:

названия блока;



системного кода, которым этот блок вставляется в шаблоны.

Щелкнув по названию блока, вы попадете в редактор шаблонов в раздел Редактирование

кода блока:

Блоки, существующие по умолчанию, удалить нельзя — крестик рядом с ними неактивно

серый. Для добавления еще одного блока щелкните по кнопке над списком Добавить

блок:

uCoz: создание сайта Глава 27. Дизайн

323

После этого вам предложат ввести название нового блока. Оно может состоять только из

заглавных латинских букв. Введите название, щелкните по кнопке Добавить, и блок

появится в общем списке:

Ему будет присвоен системный код для вызова, состоящий из имени и слова GLOBAL. Я

добавила глобальный блок NEW, и система создала системный код $GLOBAL_NEW$ для его

вызова.

Созданный глобальный блок сначала будет пустым. В поле можно ввести любой HTML-

код и сохранить содержимое блока.

Что имеет смысл хранить в глобальном блоке? Сложные повторяющиеся элементы

дизайна, блоки типа «Друзья сайта» или любые куски кода, которые нужно использовать

неоднократно.

Типы шаблонов

Глядя на редактор шаблонов, вы, конечно, заметили, что разные шаблоны выделены

разным цветом. Это деление основано на типе шаблона.

Сначала идут шаблоны глобальных блоков — они красного цвета. Синим выделены

шаблоны «Страницы сайта». Они отвечают за странички, которые не относятся ни к

одному из модулей (по умолчанию этими шаблонами определяются три страницы:

uCoz: создание сайта Глава 27. Дизайн

324

«Главная страница», «Информация о сайте» и «Обратная связь»). Все страницы,

созданные при помощи редактора страниц, будут подчиняться этому шаблону.

Оранжевым выделен раздел для описания CSS. О нем будет подробнее рассказано далее.

За этим разделом следуют шаблоны, относящиеся к модулю Пользователи (если он у вас

активирован).

Половина шаблонов — черная, половина — серая. Черные шаблоны — это шаблоны

полноценных страниц, в которые входит шапка сайта, все колонки, содержимое и подвал.

Серые шаблоны представляют собой шаблоны форм. Форма — это часть страницы или

всплывающее окошко. Например, серый шаблон «Форма входа пользователей» — это

всплывающее окно, которое просто появляется поверх основного дизайна.

После модуля Пользователи идут шаблоны для комментариев, выделенные зеленым

цветом:

Комментарий также не является полноценной страницей, а отвечает только за ее часть.

Этот шаблон — общий для всех модулей, в которых предполагаются комментарии

(изменяя его, вы измените вид комментариев и для Блога, и для Гостевой книги, и для

Фотоальбома и т. д.).

Ниже следуют шаблоны для всех активированных модулей трех типов:

полноценная страница (черная);

форма (серая);

вид материала (зеленый).



Графически разные шаблоны могут выглядеть на странице так:

1. Общий шаблон страницы —шаблон черного цвета. Это может быть любая

полноценная страница модуля.

2. Глобальный блок — очевидно, что здесь это шапка.

3. Глобальный блок — здесь может быть меню.

uCoz: создание сайта Глава 27. Дизайн

325

4. Шаблон вида материала — зеленый шаблон, отвечающий за способ выведения

содержимого страницы.

5. Шаблон вида комментариев — зеленый шаблон, отвечающий за вид

комментариев на странице.

6. Глобальный блок — подвал.

Так может выглядеть живая страничка, построенная по этому принципу. Это страница из

модуля Блог.

За отмеченные части отвечают следующие шаблоны:

«Страница материала и комментариев к нему» (в категории шаблонов Блог);

«Верхняя часть сайта» (в категории шаблонов Глобальные блоки);

«Первый контейнер» (в категории шаблонов Глобальные блоки);

«Вид материалов» (в категории шаблонов Блог);

«Вид комментариев» (в категории шаблонов Комментарии);



«Нижняя часть сайта» (в категории шаблонов Глобальные блоки).

uCoz: создание сайта Глава 27. Дизайн

326

Надеюсь, теперь вы легко найдете именно тот шаблон, который нужно редактировать для

реализации вашего замысла.

Backup шаблонов

Перед тем как что-то кардинально менять в шаблоне, рекомендую всегда создавать его

резервную копию! Опция Восстановление стандартного шаблона восстановит шаблон по

умолчанию — и если у вас были какие-то ценные изменения до того, как вы испортили

шаблон, они тоже будут потеряны. Резервная копия позволит откатиться к рабочей версии

сайта нужного вам вида.

Для создания резервной копии можно щелкнуть по ссылке Backup шаблонов в верхнем

меню в редакторе шаблонов:

или зайти во вкладку панели администрирования Дизайн Резервное копирование

шаблонов. Оба эти пути приведут вас в одно и то же место — интерфейс для создания

резервной копии. Всего можно создать 20 таких копий.

uCoz: создание сайта Глава 27. Дизайн

327

После щелчка по кнопке Создать резервную копию появится zip-архив, содержащий все

имеющиеся у вас шаблоны страниц и глобальные блоки. Рядом с именем архива будет

дата и время его сохранения.

Щелкнув по кнопке Восстановить, вы замените все текущие шаблоны сохраненными. Если

же вам нужно восстановить только один шаблон, скачайте архив, распакуйте его, найдите

нужный шаблон и скопируйте старый работоспособный код вручную в испорченный

вариант.

Управление CSS

Дизайны шаблонов в uCoz построены таким образом, что все цвета текстов, ссылок,

картинки-подложки и т. д. управляются через CSS. Без его знания глобальное изменение

дизайна невозможно.

Wiki

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания

внешнего вида документа, написанного языком разметки.

Для каждого дизайна существует специальный файл с расширением *.css. Именно в нем

описано, как должны выглядеть элементы вашего сайта. По сути, он представляет собой

огромный список, например, такого содержания:

-------------------------------------------------------------------

Если пользователь хочет использовать Стиль1:

- основной текст должен быть 12 размером шрифта

- таблицы должны иметь зеленую границу в 4 пикселя

- все заголовки — красные и жирные

Если пользователь хочет использовать Стиль2:

- основной текст должен быть 14 размером шрифта

- таблицы должны иметь синюю границу и голубые ячейки

- все заголовки — жирные, кегль шрифта — 17

----------------------------------------------------------------------

uCoz: создание сайта Глава 27. Дизайн

328

Конечно, содержимое записывается не таким текстом, а в специальном формате. Вот

описание того, как должны выглядеть ссылки, в формате CSS:

-------------------------------------------------------------------------

a:link {text-decoration:underline; color:#838383;}

a:active {text-decoration:underline; color:#838383;}

a:visited {text-decoration:underline; color:#838383;}

a:hover {text-decoration:none; color:#000000;}

-------------------------------------------------------------------------

Для изучения CSS можно найти учебники и материал в Интернете. Неплохая подборка

ссылок есть на нашем форуме forum.ucoz.ru. Любая более-менее серьезная переработка

дизайна завязана на изменение CSS текущего дизайна.

Приступайте к правке таблиц стилей только тогда, когда будете понимать, что делаете.

Редактируется CSS следующим образом: в списке шаблонов страниц в разделе Общие

шаблоны откройте Таблица стилей (CSS):

В открывшемся коде ищите нужный вам класс, отредактируйте его и сохраните

изменения:

uCoz: создание сайта Глава 27. Дизайн

329

Для редактирования CSS можно также пользоваться сторонними редакторами.

Как найти нужный для изменения класс

Допустим, вы решили внести в дизайн небольшое изменение — при наведении курсора

на пункт меню он становится черным, а вы хотите, чтобы он становился серым:

Как понять, какой класс раскрашивает пункт в ненужный нам цвет? Чтобы это выяснить,

нужно открыть исходный код страницы в браузере (например Mozilla Firefox) и найти

кусочек, которым описано меню.

Откройте правой кнопкой мыши исходный код и найдите в нем нужный кусок по словам

«Главная страница».

По коду сразу понятно, что за пункты меню отвечает класс uMenuItem. Откройте таблицу

стилей и найдите в ней этот класс — кусок, описывающий ссылки для него:

Обведенный фрагмент как раз раскрашивает ссылку в черный цвет, когда над ней

находится курсор. Замените цвет серым и сохраните изменения.

Что делать, если вы не знаете CSS

В этом случае вам на помощь придет визуальный редактор в меню Редактирование

шаблонов. В нем можно перекрашивать ссылки и тексты. Но для значительных

изменений придется либо изучать CSS, либо заказывать дизайн на стороне.

uCoz: создание сайта Глава 27. Дизайн

330

Конструктор шаблонов

Эта функция может понадобиться вам в двух случаях: если вы хотите поставить на сайт

готовый дизайн или, наоборот, сами серьезно перерабатываете дизайн сайта.

Конструктор шаблонов позволяет в особом синтаксисе создавать каркас сайта. Каркас

это описание структуры страницы на самом низшем блоковом уровне. Графически

подобная структура выглядит следующим образом:

Она описывает все страницы сайта в системе uCoz в разделах:

шапка сайта;

подвал сайта;

колонка сайта (может быть несколько);

блоки в колонке;

меню сайта;

середина сайта (все, что находится между шапкой и подвалом);

всплывающие окна.



uCoz: создание сайта Глава 27. Дизайн

331

Легко можно уловить аналогию с глобальными блоками и структурой дизайна

абстрактной веб-страницы вообще. На основе такого каркаса система сможет создать

шаблоны для страниц каждого модуля.

Теперь рассмотрим, как эта структура реализована на практике, и в чем ее отличие от

глобальных блоков и синтаксиса редактора шаблонов.

Открыть конструктор шаблонов можно несколькими способами: либо из меню

Управление дизайном по первой ссылке в верхнем меню:

либо через меню Дизайн на панели администрирования.

Конструктор шаблонов выглядит так:

В верхнем меню расположены ссылки:

Помощь — небольшая инструкция по работе с каркасами;

Пример каркаса — откроет пример HTML-кода, проектирующего каркас.

uCoz: создание сайта Глава 27. Дизайн

332

Можно щелкнуть по кнопке Посмотреть и увидеть, как этот каркас будет выглядеть

в виде сайта:

uCoz: создание сайта Глава 27. Дизайн

333

Каркасы стандартных дизайнов — можно по номеру выбрать один из стандартных



дизайнов и посмотреть, как он устроен, или работать на его основе;

Используется персональный набор стилей — ссылка на редактирование CSS для



каркаса.

Под верхним меню находится пустое поле, в которое предполагается поместить код

каркаса.

Правила создания каркаса

Итак, как же формируется код для каркаса, чтобы потом на его основании система смогла

создать шаблоны для всех модулей?

Правило 1. Код формируется как полноценная страница, и должен содержать теги

, , </b></i><i><b>, </b></i><i><b><body></b></i><i><b>.</b></i> <br /> <br /><i><b>Правило</b></i><i><b> 2</b></i><i><b>. </b></i><i><b>Код разбивается на части, приведенные на изображении в начале раздела.</b></i> <br /> <br /><i><b>Части оформляются специальными комментариями и могут быть вложены друг в друга,</b></i> <br /> <br /><i><b>например, так:</b></i> <br /> <br /><i><b>-----------------------------------------------------------------------------</b></i> <br /> <br /><i><b>-------------------</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>некий код для шапки</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>некий код, отвечающий за середину сайта</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>код оформления контейнера</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>код оформления блока</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>некий код отвечающий за середину</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>код, описывающий меню</b></i> <br /> <br /><i><b></i><i><b></sblock_menu> --></b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>некий</b></i><i> </i><i><b>код</b></i><i> </i><i><b>для</b></i><i> </i><i><b>подвала</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>код, описывающий, как выглядит всплывающее окно</b></i> <br /> <br /><i><b> --></b></i> <br /> <br /><i><b>-----------------------------------------------------------------------------</b></i> <br /> <br /><i><b>-------------------</b></i> <br /> <br /><i><b>Правило 3. </b></i><i><b>В коде используются специальные символы для управления содержимым,</b></i> <br /> <br /><i><b>заключенные в квадратные скобки:</b></i> <br /> <br /><i><b>uCoz: создание сайта Глава 27. Дизайн</b></i> <br /> <br /><i><b>334</b></i> <p>• <i><b>[TITLE] </b></i><i><b>— заголовок страницы, может использоваться в теге </b></i><i><b><title></b></i><i><b>;</b></i></p> <p>• <i><b>[CSS_URL] </b></i><i><b>— ссылка на СSS-файл со стилями, может использоваться один раз в</b></i> <br /> <br /><i><b>теге </b></i><i><b><link></b></i><i><b>;</b></i> </p> <p>• <i><b>[BODY] </b></i><i><b>— тело страницы. Вместо этого символа при генерации шаблонов на</b></i></p> <br /> <br /><i><b>основе каркаса система подставит свое содержимое для каждого модуля (обратите</b></i> <br /> <br /><i><b>внимание, что в общем случае </b></i><i><b>[BODY] </b></i><i><b>не эквивалентно </b></i><i><b>$BODY$</b></i><i><b>);</b></i> <p>• <i><b>[COPYRIGHT] </b></i><i><b>— копирайт системы uCoz. Логичнее располагать его в <a href="/testi-s-sajta-ct-k-krok-2-2014-dlya-inostrannih-studentov-pere.html">подвале сайта</a>,</b></i></p> <br /> <br /><i><b>но все зависит от вашей задумки.</b></i> <br /> <br /><i><b>Правило 4. </b></i><i><b>Существуют так называемые «зарезервированные надписи», встретив</b></i> <br /> <br /><i><b>которые, система трактует их как код, а не как просто текст. Вот некоторые из них: SITE</b></i> <br /> <br /><i><b>LOGO, Log out, Log in. Полный список приведен в помощи к разделу.</b></i> <br /> <br /><i><b>Дополнение к правилам</b></i> <br /> <br /><i><b>1. Блок </b></i><i><b> --> </b></i><i><b>имеет два зарезервированных кода </b></i><i><b>TITLE </b></i><i><b>и </b></i><i><b>CONTENT</b></i><i><b>.</b></i> <br /> <br /><i><b>2. Блок </b></i><i><b> --></b></i><i><b>, формирующий дизайн для страницы «Личные</b></i> <br /> <br /><i><b>сообщение», а также других страниц, открывающихся в новом окне, имеет два</b></i> <br /> <br /><i><b>зарезервированных кода: </b></i><i><b>[TITLE] </b></i><i><b>и </b></i><i><b>[BODY]</b></i><i><b>.</b></i> <br /> <br /><i><b>Пример каркаса, созданного по всем правилам</b></i><i><b>:</b></i> <br /> <br /><i><b><html></b></i> <br /> <br /><i><b><head></b></i> <br /> <br /><i><b><title>[TITLE]







-->

20pt;">SITE LOGO



-->

-->













-->

-->



TITLE
CONTENT



-->

-->

solid black;padding:5px">[BODY]


-->

-->



-->

uCoz: создание сайта Глава 27. Дизайн

335

-->


solid black;padding:5px;">[COPYRIGHT]
$POWERED_BY$


-->

1   ...   8   9   10   11   12   13   14   15   16


База даних захищена авторським правом ©mediku.com.ua 2016
звернутися до адміністрації

    Головна сторінка