Как создать шаблон и дизайн для сайта (часть 2)

Это вторая часть курса «Создаём шаблон и дизайн для сайта».
В этой части мы подробно рассмотрим подготовку нашего шаблона к вёрстке.
Если вы не читали первую часть курса, то ознакомьтесь с ней:
Создаём шаблон и дизайн для сайта (часть 1)
Всего же в курсе три части:

- Создание дизайна;
- Подготовка к вёрстке;
- Вёрстка;

Итак, переходим ко второй части нашего курса.
Для того чтобы наш шаблон стал работоспособным, нам нужно над ним немного «поколдовать».
Главное для нас это выделить основные детали нашего шаблона.
Тоесть:

- фон;
- шапка;
- фон боковой колонки;
- фон контента;

Теперь, когда мы знаем какие детали нам будут нужны, мы с лёгкостью сможем их подготовить.
Для этого просто вырезаем с макета нашего шаблона нужные нам детали.
Как это сделать:

1) Выделите необходимую вам деталь
2) Нажмите копировать
3) Создайте новый файл Ctrl + N, по умолчанию новый файл будет иметь размеры изображения, которое находить в буфере обмена (скопировано).
4) Вставьте в новый файл скопированную вами деталь и сохраните с расширением .gif.

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

Оно имеет размеры 128х128 пикселей, и называется повторяющимся.
Это значит, что если мы вставим его подряд несколько раз, оно будет выглядеть как один цельный рисунок:

Видите?
Примеры повторяющихся изображений вы можете посмотреть вот на этом сайте:

Сайт с шаблонами

Вернёмся к нашим деталям.
Из своего макета я вырезал следующие фрагменты:

1)Фон:

2)Шапка:

3)Фон контента:

4) Фон боковой колонки:

Замете, что фон контента и боковой колонки в моём шаблоне так же имеют свойство повторяться.
Пример:

Теперь дадим нашим файлам соответствующие имена.
Для этого переименуем все названия из русских в английские.
Пример:

Было:
Шапка.gif

Стало:
hapka.gif

Это нужно для того, чтобы, когда мы зальём наше изображение на хостинг, оно бы имело нормальное название, а не %D1%88%D0%… и т.д.

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

А именно к вёрстке:

Вёрстка

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