Оформление сайта

Мы продолжаем двигаться по боковой панели формы Управление сайтом и переходим к следующей группе — Оформление сайта

Разговор об оформлении сайта мы уже начали в предыдущих главах, когда создавали страницы и занимались организацией структуры сайта. Сейчас перейдем к разработке единого оформления сайта. Все параметры, относящиеся к оформлению сайта, представлены тремя группами:

Макет сайта; Цвета и шрифты; Темы.

Макет сайта Google мы уже частично рассмотрели, он достаточно прост, и может показаться, что не оставляет возможности для создания интересного дизайна. Я постараюсь подсказать вам, какие параметры и где необходимо изменить, чтобы вы могли выразить свою фантазию, умения и владение компьютерной графикой.

В открывшейся перед вами (рис. 13.1) форме параметров наст- роек оформления сайта выделены четыре области сайта:

Заголовок;

Боковая панель; Содержание страницы; Нижний колонтитул.

Рис. 13.2. Изменение формата сайта

Две области из них зарезервированы. Доступ к одной из них — области Содержание страницы — осуществляется при переходе в режим редактирования текущей страницы сайта. Содержимое другой области — Нижний колонтитул — формируется автоматически. Здесь же к общим параметрам сайта относятся только настройки области Заголовок и Боковая панель, в каждой из них вы видите ссылки для перехода к установке параметров указанных областей. Однако перед тем как мы познакомимся с ними, нажмите кнопку Изменить оформление сайта, осуществляя переход к установке общих параметров формата сайта (рис. 13.2), к которым относятся параметры ширины сайта, высоты заголовка боковой панели.

Ширина сайта по умолчанию определяется равной 800 px (пикселов), что видно из предлагаемой формы (см. рис. 13.2). Помнить об этом параметре необходимо при создании формата сайта, когда можно увеличить ширину боковой панели для навигации сайта. В дальнейшем, определяя макет страниц сайта, вам будет легче ориентироваться при распределении пространства на экране, если понимать (хотя бы приблизительно), сколько пикселов осталось для размещения на странице графических иллюстраций,

текста.

Например, расширяя боковую панель до 230 пикселов, считайте ширину страницы равной около 570 пикселов. Если для оформления содержания страницы решите выбрать макет , значит, ширина каждой вертикальной полосы — 285 пикселов. Соответственно, графические иллюстрации или гаджеты, размещаемые в столбце такого макета, должны быть по ширине менее 280 пикселов. Аналогично прикидывайте для других вариантов макета.

Этот параметр важен также в случае, если вы не выбрали темы для оформления при создании сайта, а решили оформить сайт сами. Тогда вам надо знать, что создаваемый сайт по умолчанию выравнивается в левый верхний угол. Не всем нравится, что левая вертикальная граница сайта уходит в край экрана, а справа остается широкая полоса от края сайта до правой вертикаль- ной границы экрана. Оставить слева вертикальную полосу вдоль левого края сайта можно, если уменьшить ширину сайта, поставив в окно ввода параметра 95—85%.

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

Как влияет выбор нового параметра на внешний вид сайта, можно увидеть, если нажать кнопки OK и Предварительный просмотр. Окончательно завершить выбор параметра можно подтверждением кнопки Сохранить изменения и переходом « Вернуться на сайт.

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

При определении параметра Высота заголовка вы можете вообще отказаться от использования области заголовка. Кроме выбора параметра "по умолчанию", который соответствует выбранной теме (см. рис. 13.2), значение может быть установлено вами самостоятельно указанием высоты в пикселах по размеру заранее подготовленного логотипа (в каком-либо графическом редакторе). Причем здесь вы только указываете, что будете использовать размер логотипа, сам логотип загружается в окне другого меню

(Дополнительные действия → Оформление сайта → Макет), что будет рассмотрено далее.

Л оготип (др. греч. Λόγος — слово и τύπος — отпечаток) — оригинальное начертание полного или сокра щенного наименования организации или товара. Логотип является словесной частью товарного знака.

В идеале логотип графическими средствами должен выражать основное направление деятельности фирмы. Все изображения для иллюстрирования веб-страниц должны быть заранее подготовлены в графическом редакторе GIMP, Adobe Photoshop и т. д. с разрешением 72 пиксела на дюйм и храниться у вас в папке в формате JPG или GIF. Замечу сразу, что здесь не будет уроков по веб-дизайну, и тех, кто хочет познакомиться с основами дизайна, отсылаю к большому количеству изданий по этой теме.

В справочной системе Google специалисты рекомендуют использовать размер логотипа: 145 пикселов в ширину и 52 пиксела в высоту. Конечно, вы можете определить любой размер логотипа, но если изображение слишком велико, логотип может выглядеть не так, как нужно, или вообще не отображаться.

Обратите внимание, что логотип не должен быть широким, т. к. отведенное под него место ограничено и обрезает часть изображения, выходящее за границу области заголовка. Не пытайтесь здесь вставить вместо логотипа широкий коллаж. Посмотрите, как формируется заголовок сайта (рис. 13.3). Кроме логотипа, в строке заголовка рядом расположен текст. Если весь текст заголовка не помещается в одну строку, он автоматически переносится на следующую строку (в данном случае — вторую, но может образоваться и третья строка при длинном названии сайта). Это происходит именно потому, что есть ограничения на ширину заголовка.

Как уже было отмечено ранее, в мастере сайта Google неудобно разнесены параметры области заголовка: в данном меню устанавливается один параметр, а остальные — в другом месте, хотя они естественно должны соответствовать друг другу. Поэтому, забегая вперед, отойдем от разговора о макете сайта и обратим внимание на смысл области заголовка сайта.

Область заголовка выполняет одну из самых ответственных функций вашего сайта, наиболее важную (ключевую) информацию принято располагать слева и вверху, потому что при изменении размеров экрана видимая область сайта будет обрезаться снизу и справа. Здесь кроме текста — заголовка сайта — могут быть размещены иллюстрации: логотип или фоновое изображение.

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

Дополнительные действия → Управление сайтом;

группа Настройки сайта → Общие.

В поле Название сайта (рис. 13.4) в любой момент вы сможете отредактировать текст, который выводится в область заголовка сайта, а флажок, расположенный ниже, убирает его, что можно сделать, если вы задумали разместить в область заголовка заранее подготовленное фоновое изображение.

Рис. 13.4. Изменить или скрыть заголовок сайта

1. Чтобы загрузить само фоновое изображение в область заголовка, нужно перейти:

меню Дополнительные действия;

ссылка Управление сайтом;

группа Цвета и шрифты параметров Оформление сайта.

1. Логотип, как рассматривалось ранее, размещается в левом верхнем углу области заголовка, занимает менее 50% ширины заголовка — того места, которое отведено под название сайта, относится к параметрам сайта, а вставить его можно последовательностью действий:

Дополнительные действия → Оформление сайта → Макет сайта.

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

Боковая панель имеет всего лишь три параметра, определяющих ее наличие или отсутствие, расположение слева или справа от содержания сайта и ширину в пикселах. Мы оставим боковую панель слева, но увеличим ее ширину до 200 пикселов.

В целом, выбранные нами параметры оформления сайта сейчас будут такими:

Ширина сайта — 90%;

Высота заголовка — Использовать размер логотипа; Боковая панель — слева, Ширина — 200 пикселов.

Зафиксировав выбранные параметры нажатием кнопки OK, можете предварительно ознакомиться с результатом, нажав кнопку Предварительный просмотр, вернуться назад и откорректировать все параметры так, как вам больше нравится. Окончательно завершить выбор параметра можно подтверждением Сохранить изменения.

Вернувшись в группу Оформление сайта (см. рис. 13.1), мы, наконец, можем закончить оформление области заголовка, загрузив изображение логотипа. Обратите внимание, что выбранный нами параметр Использовать размер логотипа зафиксирован в области заголовка (рис. 13.5).

Рис. 13.5. Отображение параметров заголовка на макете сайта

Осталось щелкнуть по ссылке изменить логотип. В открывшемся окне:

1. Определите пользовательский логотип.

2. Укажите его расположение на своем компьютере (с помощью полос прокрутки в окне логотипа можете проверить правильность своего выбора).

3. Нажмите кнопку OK.

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

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

Вернемся к настройке параметров макета сайта (см. рис. 13.1). На следующем этапе переходим к параметрам области боковой панели.

На макете фиксирован параметр ширины боковой панели, который можно изменить (см. рис. 13.2), расположено окно навигации, особенности организации которой мы уже рассмотрели в предыдущем разделе. Ниже на макете предлагается ссылка Добавить элемент на боковую панель, элемент будет размещен под окном навигации. Нажмите на эту ссылку и ознакомьтесь, какие элементы могут быть здесь размещены.

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

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

Текст — добавить текст на боковую панель сайта. Окно текстового гаджета, в которое можно вставить изображение, таблицу, редактировать и форматировать текст и представить свой e-mail; объявление, анонсы новостей, на которые вы хотите, чтобы обратили внимание читатели.

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

Мое последнее действие — список последних действий текущего пользователя в системе. Удобно при отладке сайта несколькими соавторами.

Обратный отсчет — обратный отсчет дней до конкретной даты. Обычно учащиеся или студенты считают дни либо до каникул, либо до зачета. А вы до какого события установите счетчик дней?

Элемент размещения рекламы мы опустим. Элементы последних действий, более подходящих для отладки сайта, и дополнительное окно навигации, в связи с 2-уровневой организацией сайта сейчас рассматривать не будем, а обратимся к элементам текста и обратного отсчета. Добавим эти два дополнительных элемента простым нажатием соответствующей кнопки в окне дополнительных элементов. На боковой панели макета сайта должны появиться добавленные элементы (рис. 13.6).

Для того чтобы ввести информацию в добавленные элементы, необходимо нажать на ссылку изменить, далее в отведенные поля открывшегося окна следует ввести информацию. Редактирование информации заканчивайте нажатием кнопки OK. Не забудьте сохранить изменения. На рис. 13.7 приводится пример того, как теперь может выглядеть боковая панель вашего сайта.

Таким образом, постепенно формируется общий макет сайта, включающий элементы, присутствующие на всех страницах. Это второй этап после организации структуры сайта.

Рис. 13.6. Добавленные дополни- Рис. 13.7. Пример дополнительных тельные элементы элементов на боковой панели

П роверьте себя!

Поместите на боковую панель несколько дополнительных элементов — текстовых полей (гаджет) для вывода:

• ваших электронных адресов;

• адреса веб-страницы образовательного учреждения, в кото-ром вы работаете;

• новостей.

Цвета и шрифты — следующая группа параметров оформления сайта. Опыт работы с педагогами на курсах повышения квалификации показывает, что труднее всего при обучении педагогов идет освоение графических пакетов. Немного педагогов после обучения способны самостоятельно подготовить оптимизированное изображение для своей презентации, не говоря уже о том, чтобы продумать и подготовить собственный дизайн сайта.

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

Если вы не чувствуете себя уверенно в этой области, советую выбрать один из уже разработанных шаблонов — Темы, но тщательно продумать и подготовить иллюстрации. Выбирая шаблон для своего сайта, имейте в виду, что его тоже можно корректировать.

Темы — это готовые сочетания форматов, цветов и изобра- жений.

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

Фоновое изображение может быть вставлено в области всей страницы, упаковщика страниц, заголовка, содержания.

Напомню, что в области заголовка могут быть представлены логотип и фоновое изображение одновременно, но такое решение требует от автора при подготовке в графическом редакторе фонового изображения либо зарезервировать место под логотип (зная его размер), либо включить изображение логотипа в гра- фический файл с фоном, т. е. сделать его частью фона. В связи с тем, что фоновое изображение занимает полностью всю область заголовка, в отличие от текста заголовка и логотипа (менее 50% ширины экрана), можно разместить название сайта в фоновом изображении, избавившись, таким образом, от необходимости размещать еще и текст в область заголовка. Такой пример при- веден на рис. 13.8, сравните его с вариантом, представленным на рис. 13.3.

Рис. 13.8. Фоновое изображение с логотипом и текстом

Параметр фонового изображения так же относится к параметрам сайта, но не к группе параметров макета (как логотип), а к группе параметров цвета и шрифтов.

Напомню, что перейти к настройкам Цвета и шрифты можно из режима редактирования сайта через меню Дополнительные действия → ссылка Управление сайтом → группа параметров Оформление сайта. Открыв группу Цвета и шрифты, вы увидите длинный список групп параметров, перечисленных в окне с полосой прокрутки соответственно области экрана или функционального элемента, к которому они относятся. Их общий список мы приведем позже. Пока продолжим разговор только об области заголовка.

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

Слабой стороной так организованной области заголовка является то, что при постепенном ограничении окна браузера справа и снизу, как было указано ранее, название сайта, размещенное на изображении, будет исчезать в результате ограничения экрана, чего не случится при оформлении заголовка сайта в виде текста. Заголовок будет виден, пока позволит остающееся место экрана. Кроме этого, текст заголовка сайта — ссылка может быть зафиксирован в поисковых системах.

Рассмотрим параметры выравнивания фонового изображения.

Повторить: если размер подготовленного вами изображения меньше ширины или высоты экрана, то оно будет повторно выводиться (горизонтально и вертикально, только горизонтально или только вертикально), пока не заполнит полностью всю зарезервированную область. Продемонстрируем этот параметр при оформлении фона упаковщика страниц.

Заранее необходимо подготовить небольшой фрагмент повторяющегося рисунка, например размером 25×25 пикселов — , сохранить его в файле. Затем выбрать пользовательские установки фона и зафиксировать данный фрагмент из соответствующего файла с помощью кнопки Обзор.... Результат действий сразу можно будет наблюдать в области предварительного просмотра. На рис. 13.10 продемонстрирована установка фона изображения упаковщика страниц из небольшого фрагмента. Слева от логотипа видно, что фрагмент повторяется и заполняет фон указанной области упаковщика страницы.

Рис. 13.10. Создание фона из повторяющихся фрагментов

Положение по горизонтали: выравнивание по горизонтали — слева, по центру или справа.

Вертикальное положение: выравнивание по вертикали — верх, по центру, низ.

Как вы могли уже заметить, в списке параметров Цвета и шрифты оформления сайта, кроме области заголовка, вставка фонового изображения может быть так же осуществлена в заголовки гаджетов содержания и навигации. На рис. 13.11 приведен пример фонового изображения заголовка текстового гаджета — дополнительного элемента боковой панели. Аналогично будет выглядеть фоновое изображение заголовка гаджета содержания страницы.

Фоновое изображение всей страницы будет видно за боковыми границами страницы сайта (рис. 13.12), а содержание страницы размещаться в области содержания. Если первое распространяется на всю ширину и высоту вашей страницы, то второе многократно повторяется, заполняя фон содержания сайта только по ширине, но не по высоте, более того, почему-то ограничивается высотой около 200 пикселов. Поэтому, задумав оформить сайт с использованием фоновых иллюстраций, имейте в виду, что они должны быть все подобраны по размеру. Здесь мы не можем уделить этой теме больше внимания.

Рис. 13.11. Фоновое изображение заголовка текстового гаджета

Рис. 13.12. Фоновые изображения: всей страницы, области содержания страницы, области заголовка

На рис. 13.12 макета сайта с фоновыми изображениями представлены настройки для фона содержания страницы, чтобы вы могли получить представление именно о фоновом изображении содержания. Размер изображения, которое вставляется как фон, 200×239 пикселов.

Помимо оформления сайта с помощью заранее подготовленных фоновых изображений, вы можете использовать свои настройки цветов. Далее приведены основные параметры для разработки оформления его цветовой схемы (параметры группы Цвета и шрифты).

Вся страница:

Цвет фона страницы;

Фоновое изображение страницы;

Фоновое изображение упаковщика страниц;

Шрифт страницы;

Цвет ссылки на страницу;

Цвет ссылки на посещенную страницу.

Заголовок сайта:

Цвет заголовка сайта;

Цвет фона заголовка сайта;

Фоновое изображение заголовка сайта.

Область содержания:

Цвет заголовка содержания;

Цвет текста содержания;

Цвет фона содержания;

Фоновое изображение содержания.

Гаджеты области содержания:

Шрифт гаджета для содержания;

Цвет текста гаджета для содержания;

Цвет ссылки на гаджет для содержания;

Цвет фона гаджета для содержания;

Цвет текста заголовка гаджета для содержания;

Цвет фона заголовка гаджета для содержания;

Фоновое изображение заголовка гаджета для содержания;

Цвет строчного делителя гаджета для содержания.

Гаджеты боковой панели:

Шрифт гаджета боковой панели;

Цвет текста гаджета боковой панели;

Цвет ссылки для гаджета боковой панели;

Цвет фона гаджета боковой панели;

Цвет текста заголовка для гаджета боковой панели;

Цвет фона заголовка для гаджета боковой панели;

Фоновое изображение заголовка для гаджета боковой панели;

Цвет строчного делителя для гаджета боковой панели.

Гаджет навигации:

Фон текущей страницы в разделе навигации;

Цвет текста текущей страницы в разделе навигации.

Отсутствие опыта цветового оформления своей работы на компьютере ставит многих педагогов в затруднительное положение. С одной стороны, "хочется все попробовать", а с другой — "получается винегрет", признать который после многочасовой работы обидно и с чем жалко расставаться.

При подготовке изображений и подборе цветов используйте безопасную палитру из 216 цветов (веб-цвета), эти цвета стандартны для всех браузеров и платформ (PC и Macintosh). Такие цвета задаются как #RRGGBB (Red, Green, Blue). На разных сайтах, посвященных веб-дизайну, публикуются подборки таких цветов, например, на сайте студии Артемия Лебедева предлагается палитра цветов, рекомендуемых для экранного дизайна. Откройте эту палитру (или другую аналогичную), чтобы реально представлять то, что будет видеть посетитель вашего сайта, т. к. цвета из приведенной на сайте палитры везде будут отображаться без искажений. Любой из 216 цветов "безопасной" палитры может быть использован для графики, текста и фонов. Данный вариант представления удобен тем, что в таблице над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).

Рис. 13.13. Палитра из 32 сочетаний

Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего (рис. 13.13). Эти градации — 0, 51, 102, 153, 204, 255.

Например, первые две строки палитры приведены в табл. 13.1.

Таблица 13.1. Первые строки палитры "безопасных" цветов

Далее, просмотрев всю палитру, вы сможете подобрать контрастные, гармонирующие между собой цвета в группе тонов, наиболее симпатичных вам.

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

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

фон, текст, заголовок;

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

Начните с выбора цветов для первой группы, учитывая, что:

цвет фона и текста должны быть резко контрастными, лучше сделать светлый фон и темный текст (избегайте фона, который затемняет текст);

заголовок в тексте должен выделяться размером, цветом и шрифтом;

следуйте единому стилю оформления шрифтов на всех страницах сайта, старайтесь не выделять в тексте шрифт цветом и размером букв.

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

П роверьте себя!

• Познакомьтесь с различными вариантами оформления сайта коллекции Темы, предложенными для оформления сайта Google, просмотрев их на своем уже организованном сайте.

• Подготовьте логотип и вставьте его в область Заголовок сайта.

• Подумайте, что может стать фоновым изображением каждой области сайта. Нужен ли им фон?

• Найдите в Интернете сайты по теории цвета, попробуйте подобрать цвета в палитре безопасных цветов или на круге дополнительных цветов для своего сайта.

Мы с вами рассмотрели все основные параметры системы управления сайтом, которые являются настройками сайта в целом и отобразятся на всех его страницах.

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

А теперь рассмотрим параметры страницы, которые находятся в меню Дополнительные действия.