Печать

Занятие 5. "Шкура"

Рейтинг:   / 0
ПлохоОтлично 

На этом занятии мы будем обсуждать вопросы изменения внешнего вида сайта, который в существующей терминологии принято называть «шкурой» (от английского skin – кожа, шкура). Эти вопросы могут касаться как изменения отдельных элементов «шкуры», например, логотипа (разумеется, если он является рисунком), кнопки меню и т.п., так и всего шаблона целиком. Здесь не помешает немного дополнительной информации о веб-дизайне.
Как правило, дизайн сайта изначально создается в графическом редакторе (обычно это Adobe Photoshop) в виде одного, достаточно большого по размеру изображения. Затем, согласно четко продуманной структуре будущего сайта, это изображение режется специальным инструментом на большое количество более мелких изображений. Если сделать видимой структуру дизайна сайта, то перед нами предстанет таблица, ячейки которой в качестве фона как раз и используют эти составные кусочки исходного изображения, образуя гармоничное целое. Непосвященному кажется, что он видит целый рисунок, но это не так.
Такая нарезка значительно ускоряет загрузку фона сайта, когда пользователь вводит его адрес в адресной строке браузера. Размеры ячеек таблицы (блоков) сайта строго прописаны в его коде языка разметки HTML, файлах каскадных таблиц стилей CSS, поэтому обычный пользователь не сможет изменить их, да и специалисту не всегда просто это сделать. Но заменить один кусочек другим, того же размера, всегда можно. Сейчас, например, мы это и сделаем с логотипом шаблона.

Изменение логотипа


Понятно, что с логотипом Joomla, несмотря на нашу искреннюю благодарность авторам оболочки, придется все же расстаться, поскольку логотип именно нашего сайта должен украшать наше веб-представительство в Интернете. Для этого нам потребуется любой графический редактор, позволяющий создавать и оптимизировать изображения. Мы остановились на GIMP, поскольку он достаточно функционален даже для профессионалов и, кроме того, бесплатен. Если вы когда-либо работали с графикой, но у вас нет GIMP, используйте другую программу, но все же я советую попробовать именно его в работе – не пожалеете. Скачать его можно по адресу: http://gimp.org

Для начала нужно узнать размеры логотипа, поскольку нельзя нарушать установленные в шаблонах оформления параметры, не пожалев потом об этом: если вы поместите в шаблон большее или меньшее по размерам изображение, чем то, которое было в шаблоне, «перекос» лица сайта вам обеспечен.
Размер нужного нам изображения можно узнать несколькими способами. Первый: щелкнуть правой клавишей по логотипу на сайте и выбрать «Свойства» (если браузер Internet Explorer) или сначала «Показать фоновое изображение», а потом «Свойства» (если браузер Mozilla Firefox). В появившемся окошке будет, кроме всего прочего, указан размер. Но лучше использовать второй способ, через ftp-сервер. Пароль и логин от него вам выдал хостер при установке вашего сайта. В любом случае, для работы с сайтом вам придется часто пользоваться этим веб-протоколом. Чтобы войти в свой сайт через ftp, вам нужно в адресной строке Проводника или ftp-клиента набрать ftp://isp.edurm.ru, а затем правильно ввести логин и пароль. Если в списке папок открывшегося окна есть папка public_html, смело входим в неё – это ваш сайт, если такой папки не наблюдается, то вы уже в своем сайте (такая неоднозначность зависит от того, на каком сервере вам выделили место под сайт, на виртуальном сервере сайт лежит в папке public_html, на «реальном» - в корне). Нас интересует папка templates, а внутри нее папка с тем шаблоном, который у вас в данный момент подключен. В нашем случае, это шаблон rhuk_milkyway, открываем одноименную папку. Внутри её открываем папку images, находим файл mw_joomla_logo.png и копируем его на свой компьютер. Щелкнуть правой клавишей по логотипу и выбрать «Свойства» - нам ничего не стоит. Точно таких размеров и создаем новое изображение в графическом редакторе. Мы будем ориентироваться на GIMP.
Запускаем GIMP. «Файл» - «Создать», в строках «Ширина» и «Высота» указываем нужные размеры. Жмем крестик «Расширенные параметры» и в строке «Фон» выбираем «Прозрачный» - «Ok». Берем инструмент «Текст» и протягиваем им по созданному изображению, рисуя прямоугольник текстовой рамки – это движение нам знакомо, именно так мы выделяем мышкой одновременно несколько папок на Рабочем столе. В появившемся окне редактора текста пишем название нашего сайта. Я пишу слова «Мой тестовый сайт». В панели инструментов настраиваем вид размер, цвет шрифта.
Просто буквы будут выглядеть бедновато, поэтому нам необходимо снабдить их хотя бы падающей тенью.
Делается это просто. Меню «Фильтры» - «Свет и тень» - «Отбрасываемая тень». В строках «Смещение по X», «Смещение по Y» ставим значение 2, в строке «Радиус размывания» - 2. Цвет у тени всегда черный. «Ok». Теперь сохраняем изображение под именем mw_joomla_logo.png куда-нибудь на Рабочий стол. Проверяем связь с ftp-сервером, если она оборвалась, соединяемся заново и в ту же самую папку, откуда копировали логотип - templates /rhuk_milkyway/ images – бросаем наш новый логотип, подтверждая замену старого логотипа в появившемся окне.
Переходим на главную страницу сайта и любуемся.

Запоминаем, что в любом шаблоне есть папка images, в которой лежат изображения, его составляющие. Название этой папки так и переводится на русский язык – изображения. Если вы решите поменять в скором времени шаблон своего сайта, то этого логотипа на привычном месте не окажется, поскольку у каждого шаблона свое местоположение элементов. Но никто вам не запрещает проделать тот же путь по определению размеров нового логотипа и замены его своим, разумеется, откорректированным под новые размеры, т.е. повторить то, что мы только что сделали применительно к шаблону rhuk_milkyway.

Изменение шаблона


Мы уже говорили о том, что в любой момент шкуру сайта можно поменять на другую. В стандартную поставку joomla входят три шаблона, их мы и попробуем сейчас подключить. Существует огромное количество других шаблонов, в том числе и бесплатных, но их установку мы пройдем позже, поскольку для этого требуются дополнительные познания – будем торопиться постепенно.
Итак, меню «Расширения» - «Менеджер шаблонов». Мы видим список из вышеупомянутых трех шаблонов, в котором текущий отмечен желтой звездочкой. Ставим флажок напротив второго – «JA Purity» и жмем кнопку «По умолчанию», - при этом звездочка перескакивает на выбранный шаблон, затем - «Изменить» либо жмем на само название. Это переносит нас на страницу настроек шаблона. Менять в них ничего не нужно (хотя никто вам не запрещает поэкспериментировать – все настройки в ваших руках), на первый раз просто сохраняемся. (Можно, в принципе, воспользоваться функцией предпросмотра, нажав на кнопку – «Просмотр»; если вы разбираетесь в html и CSS, можете, нажав соответствующие кнопки, внести изменения вручную в текущий шаблон, повторяем, если разбираетесь!)
Переходим на главную сайта и видим, что новая шкура полностью изменила облик нашего сайта. Исчез и логотип, о чем я вас предупреждал. Но это не проблема, нужно просто наш логотип из папки прежнего шаблона перебросить в папку нового, /templates/JA Purity/images. Но простой перенос ничего не даст. Имя логотипа нового шаблона – logo.png, и именно оно прописано в коде шаблона. Мы не будем исправлять код, мы создадим новый логотип в GIMP и сохраним его как logo.png. с шириной 207, высотой – 80 пикселей. Откуда я все это узнал? Естественно, из папки нового шаблона. Я скопировал из него папку images (путь - /templates/JA Purity/images) на Рабочий стол, открыл все её изображения в графическом просмотровщике (Microsoft Office Picture Manager) и по внешнему виду вычислил логотип. Открыл его в GIMP, узнал размеры (меню «Изображения» - «Размер изображения») и создал новый логотип с такими размерами. В принципе, можно было стереть инструментом «Ластик» слова логотипа шаблона и поверху написать слова своего логотипа. Применил фильтр «Отбрасываемая тень». Сохранил изображение как logo.png.
Теперь бросаем плод нашего дизайнерского труда в /templates/JA Purity/images на сервере. Обновляем главную страницу. Результат – на рисунке.

Точно так же можно подключить и оставшийся шаблон, создав для него логотип, а в дальнейшем – и любой другой, который мы сначала скачаем и проинсталлируем в оболочку joomla нашего сайта. Но инсталляция дополнений – тема других занятий.


Контрольные вопросы

1. Что из себя представляет дизайн сайта?
2. Почему нельзя безнаказанно изменять параметры ячейки или блока?
3. Что собой представляет ваш сайт на ftp-сервере?
4. Почему при подключении нового шаблона исчез старый логотип?
5. Где расположены составляющие шаблон изображения?


Контрольные задания

1. Подключите оставшийся шаблон.
2. Создайте новый логотип (совет: залейте фон логотипа белым цветом, поскольку прозрачные gif-изображения с тенью ужасно выглядят в браузерах – это особенность формата, ничего не поделаешь!)
3. Загрузите его на сайт и обновитесь. Сайт должен выглядеть, как на рисунке.