Как изменить дизайн сайта. Изменение цветового решения шаблона. Урок 7

Следующий способ изменить дизайн сайта – сменить его цветовое решение. Процесс выбора цветового решения сайта  всегда мучителен. Если у вас творческий кризис и нет четкой идеи, какие цвета использовать в оформлении сайта, то  вам может помочь программа Artisteer - генератор шаблонов для Joomla, WordPress, Drupal, DotNetNuke, Blogger.com .

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

После того, как вы выберите необходимые вам цвета оформления, создайте скриншот страницы с помощью программы Snagit.  Далее для составления цветовой карты шаблона, вам необходимо просканировать, созданный скриншот, при помощи маленькой программки Run Pixie. Наводите курсор на нужный вам цвет, и программа показывает код цвета в формате HTML. Запишите HTML – коды всех, необходимых вам цветов и сделайте цветовую карту.

Цветовая карта шаблона Likom содержит двенадцать цветов.

Цветовая карта шаблона

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

  • Откройте файл menu.css в программе  Dreamweaver;
  • Запустите программу Run Pixie и наведите курсор на фоновый цвет горизонтального меню шаблона, программа покажет вам HTML – код цвета;
  • Далее,  в программе Dreamweaver,  при помощи функции «найти и заменить», меняете код цвета на необходимый вам. Внимательно смотрите на комментарии кода, чтобы не сделать ошибки при замене цвета.

Подобным образом, вы сможете заменить цветовое оформление всех элементов сайта.

После смены цвета, вам необходимо будет заменить шапку сайта. В папка image шаблона Likom находится файл header.jpg.  Ширина изображения равна ширине страницы 950 px, а высота прописана в файле template.css и равна она 120 px.

Вы можете создать в программе Photoshop свой файл  header.jpg с такими же размерами,  и заменить им header.jpg в папке image шаблона Likom.

Как делать простейшие шапки для сайтов и как правильно их оптимизировать для WEB, вы можете посмотреть в уроках Photoshop.

Если вы хотите изменить высоту графического файла header.jpg , вам необходимо в файле template.css изменить высоту блока header  на необходимую вам, для корректной вставки графического файла в шаблон.

Итак, в результате смены цветов шаблона, графического файла header.jpg и перестановке блоков в файле index.php,  вы можете создать свой уникальный дизайн  на основе  шаблона Likom.

Архив шаблона Likom.

После того, как создан новый дизайн шаблона, необходимо создать его новый скриншот в файле  template_thumbnail.png.

 
Главная Разработка шаблона сайта для joomla 1.5 Как изменить дизайн сайта. Изменение цветового решения шаблона. Урок 7