Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Дизайн - Как создать шаблон и дизайн для сайта (часть 2)

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



Создаём шаблон и дизайн для сайта (часть 2)

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

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

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

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

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

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

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

фон

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

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

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

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

1)Фон:

фон

2)Шапка:

Шапка

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

Фон контента

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

Фон боковой колонки

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



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

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

Стало:
hapka.gif

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

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

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

Вёрстка

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


Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Дизайн сайта — от зарисовки в тетрадке до готового макета
Как проверить отображение сайта в разных браузерах, да ещё и с разными размерами экранов — онлайн
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Изменяем цвет выделения текста с помощью небольшого CSS кода
Информация о статье:
Опубликовано: 28 августа 2011, в рубрику Дизайн.
Теги: , , , .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Путин гуляет с доберманом
    13.01.2012

    Я ничего не понял из этого урока — пустая страница :twisted:

    [Ответить]

    Мудрый Кот ответил(а):

    Уладим! Со временем :wink:

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


186 подписчиков

232 фолловера

Бесплатный курс "от Кота":


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка



Я читаю:

Записки ночного блогера
Blogger.omg-linux
Miroslavs

MAXCACHE: 0.84MB/0.00061 sec