Печать
Категория: Создание дизайна сайта. Выводы и содержание
Просмотров: 837

С.1. Если мы задумались над дизайном сайта. После того, как мы установили и настроили Joomlu!, нужно как можно быстрее, пока ещё никто не видел нашего сайта, создавать его дизайн! Но вот только, для того чтобы очень быстро определиться с дизайном сайта, нужно сначала очень быстро определиться с вариантом, по которому мы будем этот дизайн создавать и внедрять. Поэтому нам понадобится камень -  большой камень у развилки дорог (помните, наверное: направо пойдёшь – коня потеряешь, налево пойдёшь -… и так далее, как положено). Если мы пойдём направо, то мы сможем оставить тот шаблон, в котором сайт уже отображается. Если мы пойдём налево, то сможем воспользоваться другим – вторым шаблоном, припрятанным в Joomle! Если мы пойдем прямо, то нам нужно будет искать шаблон на стороне. Например, мы можем попробовать найти бесплатный вариант шаблона в Интернете. Или в том же самом Интернете найти платный шаблон, и купить его. Вот так вот. Мы, вроде бы, перечислили все дороги: направо, налево, прямо. Но, оказывается, ещё один вариант, и даже непонятно куда поворачивать: то ли назад, то ли куда-нибудь по диагонали. Но в любом случае этот путь, это направление, этот вариант у нас есть – мы можем сами написать себе шаблон. Вот так вот. И стоя у камня, и ломая голову так и эдак, мы, наверное, ну, скорее всего, придём к выводу, что надо бы взять тот шаблон, который уже есть в Joomle! (или тот, который уже сейчас активирован, или тот другой, припрятанный про запас), и использовать его. Но, конечно, не так как есть, а всё-таки внести в него кое-какие правки, чтобы придать нашему сайту более или менее божеский вид.

То есть нам надо поработать над шаблоном. А для того чтобы над ним поработать, нам нужно понять, что шаблон, по своей сути, «должен уметь» взять контент сайта: тексты, картинки и что мы там ещё подготовили; соотнести всё это с программным обеспечением; и создать то, что будут видеть в своих браузерах посетители нашего сайта, ведь есть вероятность, что они у нас появятся. Более подробно можно прочитать здесь…

 

С.2. Менеджер шаблонов (Template Manager). После того, как мы определились с вариантом, можно уже задать вопрос о том, как этот вариант реализовать – как настроить и отредактировать шаблон в Joomle!? И на этот вопрос мы вполне способны получить очень даже чёткий ответ: с помощью Менеджера шаблонов (Template Manager), который нам надо бы открыть. А для этого нужно на Панели управления (Control Panel) зайти в верхнее меню и там сначала выбрать пункт Расширения (Extensions), а потом подпункт Менеджер шаблонов (Template Manager).

На открывшейся панели мы обнаружим две вкладки: Стили (Styles) и Шаблоны (Templates), что, возможно, несколько нас озадачит. То, что для настройки дизайна нужен шаблон, это более или менее понятно. А вот зачем понадобилось придумывать такое явление технической мысли как стили, понятно уже не совсем. Но тут вот выясняется, что стиль – это очень нужная и важная вещь. Дело в том, что на основе одного шаблона мы можем сделать несколько стилей, а может быть даже и не несколько, а очень много, и использовать их, как сочтём нужным. Например, какие-то страницы могут отображаться в одном стиле, а какие-то в другом. Или мы можем сделать несколько стилей, и с определённой периодичностью менять их, меняя вид сайта. Или мы хотим поэкспериментировать с дизайном. Поэтому тот стиль, в котором сайт сейчас отображается, мы оставляем неизменным, делаем его копию, и в этой копии проводим эксперименты. Если они окажутся неудачными, то неудачный стиль мы удалим без содрогания души. А сайт и отвечающий за его вид стиль останутся неиспорченными. Вот поэтому в Joomle! кроме шаблонов, есть ещё стили. И работать нам придётся больше всего именно со стилями.

После того, как через верхнее меню на Панели управления (Control Panel) мы открыли Менеджер шаблонов (Template Manager) и обнаружили две вкладки Стили (Styles) и Шаблоны (Templates); на вкладке Шаблоны (Templates) мы можем увидеть список этих самых шаблонов. Изначально в Joomle! (если мы ничего не добавляли) - два шаблона для сайта, и два шаблона для Панели управления (Control Panel). Наверху над перечнем шаблонов рядом со строкой Поиск есть переключатель области системы. Можно переключиться на область «Сайт», чтобы посмотреть какие шаблоны можно использовать для создания дизайна сайта. А можно переключиться на область «Панель управления», и посмотреть какие шаблоны можно использовать для создания стиля Панели управления (Control Panel).

Что-то похожее мы найдём и на вкладке Стили (Styles). Здесь тоже есть список, но уже список стилей. Жёлтая звёздочка стоит рядом с тем стилем, который назначен стилем по умолчанию. Если при создании новой страницы, веб-мастер не назначает стиль, то страница создаётся в стиле по умолчанию. На вкладке имеются кнопки, которые позволяют копировать и удалять стили. А кнопка Редактирование стиля открывает панель Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles). На этой панели стиль можно редактировать.

Кроме всего прочего, на панели Менеджер шаблонов (Template Manager) можно обнаружить ещё одну интересную кнопку. Она присутствует вне зависимости от того, какая вкладка открыта: Стили (Styles) или Шаблоны (Templates). Кнопка эта называется Настройки. С помощью неё открывается панель Настройки менеджера шаблонов (Configure the template Manager). На этой панели можно сделать то, чего лучше не делать: определить права для отдельных групп пользователей в области настройки дизайна сайта, задать форматы файлов, которые могут размещаться на сайте. Все эти параметры и так уже настроены без нас, и, по правде говоря, сложно представить, в каких таких специфических случаях может понадобиться перенастраивать эти параметры. Но всё-таки, эта панель и её параметры не настолько уж и бесполезны. Ведь именно здесь можно включить режим, при котором будет отображаться местоположение модулей. Но об этом чуть ниже. Более подробно можно прочитать здесь… 

 

 

C.3. Смена шаблонов и стилей. А пока надо выбрать, в каком из предлагаемых Joomloy! стилей будут отображаться Панель управления (Control Panel) и сам сайт. Хотим, сделаем стилем для  Панели управления (Control Panel) стиль Hathor -Default, хотим - isis-Default. То же самое справедливо и для сайта. Его можно делать либо в стиле protostar -Default, либо в стиле Beez3-Default. Получается, что мы можем довольно таки просто кардинально поменять стиль, как сайта, так и Панели управления (Control Panel). Жалко только то, что существует всего лишь два варианта стилей, как для сайта, так и для Панели управления (Control Panel). Однако в будущем мы можем загрузить или создать другие стили и шаблоны. Более подробно можно прочитать здесь…

 

 

С.4. Редактирование стилей шаблонов. С.4.1. Редактирование стиля шаблона Beez3. Если мы решим создавать дизайн нашего сайта в стиле Beez3, то нам нужно будет совершить три шага. Для начала нужно назначить стиль Beez3 главным и все разделы сайта (или те, которые мы хотим видеть в этом стиле) привязать к нему. Потом можно скопировать стиль и поменять его имя, то есть провести редактирование характеристик стиля.

И уже после этого, можно редактировать стиль, а значит, и менять общий вид сайта. И для этого была придумана специальная вкладка Дополнительные параметры (Advanced Options). Можно отключить логотип, или включить его снова. Можно вывести описание сайта. Можно изменить заголовок сайта. Можно изменить цвет баннера в шапке сайта. А можно в шапке сайта разместить другой баннер из рисунков, которые есть в Медиа-менеджере (Media Manager). А можно использовать для этих целей свой собственный рисунок. Его просто надо загрузить в Медиа-менеджер с компьютера. Можно изменить расположение меню, ну, и, конечно же, поменять цвет фона сайта.

Итак, изменение дизайна сайта в стиле шаблона Beez3 укладывается в три шага: 1) назначение стиля шаблона Beez3 главным, 2) редактирование характеристик стиля и 3) редактирование стиля на вкладке  Дополнительные параметры (Advanced Options). Однако у нас нет гарантии, что созданный за счёт этих трёх шагов дизайн абсолютно нас устроит. В таком случае нам остаются два возможных варианта действий: либо продолжать экспериментировать со стилем шаблона Beez3, либо переключиться на стиль шаблона  Protostar, который, как и шаблон Beez3, входит в стандартный установочный пакет Joomla! Более подробно можно прочитать здесь…

С.4. Редактирование стилей шаблонов. С.4.2. Редактирование стиля шаблона Protostar. Редактирование стиля шаблона Protostar не очень сильно отличается от редактирования стиля шаблона Beez3. Так же, как и с шаблоном Beez3, с шаблоном Protostar стремление создать дизайн сайта потребует от нас решения не двух, не четырёх, а именно трёх задач. Мы должны, не то чтобы создать, а скорее скопировать новый стиль; привязать к нему все разделы сайта; и ещё на специальной вкладке Дополнительные параметры (Advanced Options) отредактировать вновь созданный стиль. На вкладке Стили (Styles) панели Менеджер шаблонов (Template Manager) в списке всех стилей находим стиль Protostar, копируем его и меняем имя. Затем присваиваем скопированный стиль нашему сайту. Назначаем стиль шаблона Protostar стилем по умолчанию: устанавливаем в списке стилей вкладки Стили (Styles) напротив стиля  Protostar жёлтую звёздочку  . А затем все разделы (все страницы) сайта привязываем к стилю Protostar (ну или, как говорят, привязываем к стилю Protostar все пункты меню сайта). Эта самая привязка производится на специальной вкладке панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles), которая называется Привязка к меню (Snap to menu).

И вот уже после всего этого, то есть после решения двух задач, мы можем перейти к задаче «номер три», в которой речь идёт о редактировании стиля шаблона Protostar на специальной вкладке всё той же панели Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles). Называется эта вкладка Дополнительные параметры (Advanced Options). Вот как раз именно здесь, на этой вкладке можно поменять цвет текста. Правда под всеобъемлющим термином «Цвет текста» скрывается возможность изменить только цвет гиперссылок, например ссылок меню. За цвет остального текста, как мы помним, отвечает Менеджер материалов (Article Manager).

Ещё можно задать тот цвет фона сайта, какой нам по душе. Мы можем поменять заголовок, описание и логотип сайта. Да и вообще мы можем поэкспериментировать с этой триадой: например, взять и из трёх оставить только два, а что-то убрать. Можно убрать, например, заголовок. Если же мы всё-таки решим заголовок не трогать, то можно поменять его шрифт. Joomla! устанавливает шрифт для заголовка с сервера Google, и у нас есть возможность сделать так, чтобы с сервера Google устанавливался другой шрифт, который нам больше нравится. Наконец, мы можем определить то, по какому алгоритму Joomla! будет ужимать и вмещать наш сайт в экраны компьютерных мониторов, но и не только, а и в экраны планшетов, а также и в экраны сотовых телефонов. Всё это, и то, и другое, и первое, и десятое, мы сможем установить, отладить, изменить, если проведём редактирование на вкладке Дополнительные параметры (Advanced Options).

Но чтобы мы не делали для редактирования стиля шаблона Protostar, всё это сводится к решению трёх задач:

1. Создаём (или точнее - копируем) файл стиля в списке стилей.

2. Меняем стиль сайта на стиль шаблона Protostar, или точнее, привязываем разделы (страницы, пункты меню) сайта к новому стилю.

3. Редактируем стиль шаблона Protostar на вкладке Дополнительные параметры (Advanced Options).

Вот эти три задачи и есть те три задачи, решение которых приводит к созданию дизайна нашего сайта. Более подробно можно прочитать здесь…

 

 

С.5. О том, как сделать так, чтобы разные страницы веб-сайта отображались в разных стилях? Не обязательно делать так, чтобы весь сайт отображался в одном стиле. Мы можем взять, да и назначить одному из разделов, или как говорят, одному из пунктов меню другой стиль. И тогда этот раздел и будет отображаться в другом стиле. Весь сайт будет отображаться в стиле по умолчанию (в том, напротив которого на панели Стили (Styles) Менеджера шаблонов (Template Manager) стоит жёлтая звёздочка  , а наш раздел будет отображаться в другом, в специально заданном для него, стиле. 

Привязка стилей осуществляется на специальной вкладке Привязка к меню (Snap to menu). То есть, в Менеджере шаблонов (Template Manager)  на панели Стили (Styles) мы должны зайти в стиль, к которому собираемся привязать один из разделов сайта (один из пунктов меню). Щёлкнуть мышкой по стилю два раза. Откроется панель Менеджер шаблонов: Изменить стиль (Template Manager: edit Styles). На этой панели зайдём во вкладку Привязка к меню (Snap to menu). Напротив нужного раздела поставим галочку и нажмём на клавишу Сохранить (Save) .

Да, совсем забыли, если мы хотим какой-то один из наших разделов отобразить в стиле, не являющимся общим для нашего сайта, то значит, этот стиль надо создать. Нужно на панели Стили (Styles) Менеджера шаблонов (Template Manager) взять какой-то уже имеющийся там стиль и скопировать его, потом зайти в этот скопированный файл, и на вкладке Дополнительные параметры (Advanced Options) отредактировать его. А вот уже затем к этому новоявленному стилю и привязать какой-то там особый раздел, который, нам, вот вынь да положь, но надо, чтобы отображался в стиле, отличном от стиля сайта. В общем, так или иначе, а три шага нам сделать нужно:

1. Скопировать стиль.

2. Отредактировать стиль.

3. Привязать к стилю тот пункт меню (тот раздел сайта), который в этом стиле должен отображаться. Более подробно можно прочитать здесь…

 

 

С.6. Стили и модули. С.6.1. Как с помощью шаблона определять местоположение того или иного модуля, ну например, Меню? Всё то, о чём мы здесь говорили, - это, конечно, хорошо, но есть один вопросик. Вот смотрите: получается, что ни какой-нибудь там Менеджер, а именно Менеджер шаблонов отвечает за то, как наш сайт будет выглядеть, в каком стиле он будет сделан, какой у него будет дизайн. Но тут обнаруживается вот какая странная история. С одной стороны, дизайн – это: и Заголовок сайта, и Описание сайта, и Логотип, и собственно говоря, сам Материал, то бишь, текст, и Фон, на котором всё это отображено. Но с другой стороны, это ещё и модули – отдельные области, блоки на сайте: Ссылки на самые читаемые материалы, Ссылки на материалы, которые находятся в архиве, Баннеры (в том числе рекламные), Ленты новостей, Панель поиска, Статистические данные о сайте (прежде всего, о посещаемости), Модуль для ввода логина и пароля зарегистрированными пользователями, ну и, наконец, Меню.

Так вот эти самые модули и стали яблоком раздора. Вроде бы кажется, что модули – это часть дизайна. А за дизайн по полной программе отвечает Менеджер шаблонов (Template Manager). И если Менеджер шаблонов (Template Manager) отвечает за дизайн, значит, он отвечает и за модули. Но у модулей-то есть свой собственный Менеджер модулей (Module Manager). И как же это понимать? Кому подчиняются модули: Менеджеру модулей (Module Manager) или Менеджеру шаблонов (Template Manager)?   Работает себе веб-мастер с модулями через Менеджер модулей (Module Manager) и работает. Ан оказывается, что за положение модуля на странице отвечает вовсе не Менеджер модулей (Module Manager), а Менеджер шаблонов (Template Manager). Вот тебе и на…

В связи со сложившимися обстоятельствами полезно было бы знать три вещи:

1. Где и как узнать о том, какие у нас вообще есть модули, и какие из них активны, то есть в данный момент отображаются на сайте?

2. Как можно подвинуть какой-нибудь модуль с одного места на другое?

3. Как можно узнать обо всех возможных местах на сайте, где можно поместить модуль?

Ответы на эти три вопроса формулируются по-разному. Первая задача решается через Менеджер модулей (Module Manager). На Панели управления (Control Panel) в верхнем меню нужно выбрать пункт Расширения (Extensions). Откроется Менеджер модулей (Module Manager), и в нём можно посмотреть, какие есть модули, каких они типов, на каких они страницах сайтах отображаются (на всех или не на всех). Вторая задача, как и первая, тоже решается через Менеджер модулей (Module Manager). Мы можем зайти в него и поменять значение параметра Позиция. В результате этого модуль поменяет своё местоположение на сайте. А вот третья задача решается уже в Менеджере шаблонов (Template Manager). И это целая история.

Если нам зачем-то понадобилось определить, какие вообще позиции есть на нашем сайте, то нам нужно совершить ряд операций. Сначала надо будет зайти на панель Менеджер шаблонов (Template Manager), на вкладку Стили (Styles). Здесь надо посмотреть и выяснить: какой значок стоит рядом со стилями. Если стоит синий неперечёркнутый глаз, то режим просмотра позиций модулей включён. Если глаз не синий, а коричневый, да и ещё и перечёркнут, то режим просмотра позиций стиля выключен. Тогда его надо включить. А вот для того, чтобы его включить нужно: Во-первых: зайти на панель Настройки менеджера шаблонов (Configure the template Manager). Во-вторых: параметру Просмотр позиций модулей присвоить значение Включено. В-третьих: нажать на клавишу Сохранить и Закрыть. В-четвёртых: вернуться на панель Менеджер шаблонов (Template Manager), на вкладку Стили (Styles). В-пятых: выбрать из перечня нужный стиль и нажать на синий глаз рядом с ним. Вот тогда-то и откроется страница нашего сайта, но на ней будут выделены и проименованны те места, где можно поставить какой-нибудь модуль. Представляете?... То-то же… ! Более подробно можно прочитать здесь…

С.6. Стили и модули. С.6.2. Что делать, если модуль слишком большой и занимает слишком много места, или просто его нужно как-то выделить на фоне сайта? По мере развития сайта (а может быть и с самого начала, тут не угадаешь) мы можем столкнуться с двумя проблемами. И весь фокус в том, что из этих двух проблем решить можно только одну: либо первую (тогда вторая остаётся неразрешимой), либо вторую (тогда первая остаётся не у дел). А так получается потому, что решение проблемы связано с конкретным стилем шаблона. Так в стиле Beez3 можно решить проблему слишком большого модуля, который занимает слишком много места. А вот другая возможная проблема -  выделение модуля на фоне сайта – в этом стиле не может получить своего решения. Однако если мы создадим сайт в стиле шаблона Protostar, то мы сможем выделить модуль на фоне сайта. Однако проблему слишком большого модуля в этом стиле решить у нас не получится. Так что из двух проблем мы можем решить только одну, а решением другой придётся пожертвовать.

Если очень актуальна проблема слишком большого модуля, который занимает слишком много места, то надо менять стиль сайта на стиль шаблона Beez3. Почему? А потому, что именно в этом стиле можно разбить модуль на две вкладки («хром модуль» Tabs) или сделать модуль в виде ниспадающего списка («хром модуль» Hide). В то же время выделение модуля ото всего остального, что есть на сайте, - задача для стиля шаблона Beez3 не разрешимая. Если нам очень надо решить эту проблему, то придётся изменить стиль сайта на стиль шаблона Protostar. В этом стиле есть модуль, поле которого выделяется рамкой, а цвет чуть-чуть отличается от цвета сайта. Это «хром модуль» Well.

И вот смотрите, какая история: получается, что какую бы проблему мы не решали, делаем мы это за счёт неких нестандартных модулей – модулей, которые не похожи на обычные модули. Такие, непохожие на обычные модули, модули, (модули со специальным стилем) получили название «хром модули». И самое необычное во всей этой истории - это то, как сделать модуль «хром модулем». Оказывается, что за «хром модулями» жёстко закреплены определённые позиции – конкретные места на сайте. И для того чтобы модуль сделать «хром модулем», нужно просто разместить его на соответствующей позиции. Так если в стиле Beez3 мы поставим модуль на позицию position-5, то такой модуль автоматически станет модулем с двумя вкладками – «хром модулем» Tabs. Если же мы его поставим на позицию position-4, то он превратится в ниспадающий список – в «хром модуль» Hide. С сайтом, сделанным в стиле шаблона Protostar, - другая история. Если нам понадобилось для такого сайта сделать модуль с рамкой и отличающимся цветом, то есть сделать «хром модуль» Well, то нужно взять обычный модуль и поставить его в позицию position-7.

Такая жёсткая привязка «хром модулей» к соответствующим позициям несколько обескураживает. Но оказывается, не всё есть так на самом деле, как нам кажется. А на самом деле «хром модули» привязаны к позициям не так уж и жёстко: можно взять любой модуль, стоящий на любой позиции, зайти в него и на вкладку Дополнительные параметры (Advanced Options), и здесь параметру Стиль модуля присвоить значение Well. И тогда, не смотря на позицию, не смотря ни на что другое, ваш модуль обзаведётся рамкой и отличающимся от остального сайта цветом, то есть станет «хром модулем» Well. Вот такая вот история. Более подробно можно прочитать здесь...

 

 

И всё это, то есть всё то, о чём мы здесь говорили, связано с одной то ли простой, а то ли не очень, темой: Создание и редактирование стиля сайта:

C. Создание дизайна сайта. Работа с шаблонами.

С.1. Если мы задумались над дизайном сайта.

С.2. Менеджер шаблонов (Template Manager).

C.3. Смена шаблонов и стилей.

С.4. Редактирование стилей шаблонов.

С.4.1. Редактирование стиля шаблона Beez3.

С.4.2. Редактирование стиля шаблона Protostar.

С.5. О том, как сделать так, чтобы разные страницы веб-сайта отображались в разных стилях?

С.6. Стили и модули.

С.6.1. Как с помощью шаблона определять местоположение того или иного модуля, ну например, Меню?

С.6.2. Что делать, если модуль слишком большой и занимает слишком много места, или просто его нужно как-то выделить на фоне сайта?

 

 

Вот так вот как-то.