Дизайн сайта

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

Изменить дизайн сайта можно с помощью инструментов Темы, цвета и шрифты раздела Еще - Управление сайтом.


Темы

Многие из вас, создавая сайт, обратили внимание на возможность выбора разных стилевых вариантов оформления сайта под названием "Тема".


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

Стандартные темы сайтов Google

Google предлагает сегодня на выбор 52 варианта оформления сайта (на скриншоте показаны не все):

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

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

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

Темы сторонних разработчиков

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

Для этого, находясь в режиме изменения дизайна (Еще - Управление сайтом - Темы, цвета и шрифты), кликните по кнопке Просмотреть другие темы:

Просматривая шаблоны сайтов, созданных другими авторами, вы можете позаимствовать с выбранного сайта тему для своего сайта. Несмотря на то, что шаблон сайта включает не только тему, но и структуру, на ваш сайт будет перенесена только тема, т.е. дизайн.
Кроме того, можно воспользоваться еще 8 вариантами оформления дизайна сайта, выбрав один из них на странице http://blog.cloudy-office.ru/2012/07/google-sites.html. Инструкция по применению шаблона приведена там же.

Цвета и шрифты

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

Изменение параметров дизайна осуществляется в верхней области экрана:


Сначала необходимо выбрать область изменений, затем элемент области, после чего выбрать параметры дизайна для выбранного элемента. Выбранные область и элемент выделяются цветом. 

Для разных элементов задаются разные параметры дизайна: для текста - шрифт, цвет, размер; для фона - цвет, изображение и т.д. 

Практически для каждого параметра дизайна на выбор предлагаются 3 варианта:

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

Стоит внести небольшие пояснения относительно названий областей изменения дизайна: 

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

Пример

Следующий пример показывает, как оформить область содержания с использованием фонового изображения. Например, я хочу, чтобы фоном всех моих страниц сайта было изображение со снежинками. 
  1. Я подобрала для этих целей небольшую картинку (100х100 пикселей) со снежинкой, оформленную в сдержанных тонах, чтобы не отвлекать внимание посетителей сайта:
  2. В режиме изменения дизайна выбираю Область содержания - Фон - Изображение - Мой вариант:
  3. Для того, чтобы рисунок заполнил сеткой всю область содержания, необходимо задать параметры вставки изображения Повторить по горизонтали и вертикали (установлен по умолчанию).
После сохранения настроек область содержания приобретает вид:

Рекомендации по подбору элементов дизайна сайта можно прочитать на странице Практические советы.