Главная - Дизайн - Как создать шаблон и дизайн для сайта (часть 3)

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

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

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

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

Переходим к заключительной части создания шаблона для сайта.
В своём примере я расскажу, как сделать вёрстку вашего шаблона, если ваш сайт стоит на движке WordPress.
Итак, после того как мы залили детали нашего шаблона на свой хостинг, переходим в файл стилей темы (css), тема может быть абсолютно любой.
И начинаем верстать!

1)
Фон:
Ищем в файле стилей вот такой вот отрывок:

body {
background: url(здесь адрес картинки текущего фона);
background-position: top left;
background-color: #e5e9ee;
}

И вставляем в строчку background: url адрес картинки на наш фон, естественно адрес должен быть в скобках.

С остальными элементами будет намного проще.
Так как мы будем добавлять новые div классы, а добавлять мы их будем в самый конец файла стилей.
Итак, начнём.

2)
Шапка:

#hapka {
background: url( адрес картинки ) no-repeat center top;
width: высота px;
height: ширина px;
margin-bottom: 10px;
}

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

#content-p {
background: url( адрес картинки ) left top;
background-repeat: repeat-y;
}

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

#sidebar-fon {
background: url( адрес картинки ) left top;
background-repeat: repeat-y;
}

Всё!
Наши стили добавлены
Теперь будем делать их рабочими.
Фон уже должен измениться и функционировать, так как он задействован в шаблоне.
А вот классы

#sidebar-fon

#content-p

#hapka

Мы сейчас будем делать активными.
Переходим в шаблон главной страницы (WordPress это файл index.php).
В этом файле мы задействуем фон контента.
Находим строчки:

<div id=»content»> — может называться подругому.
<?php if (have_posts()) : ?>

И теперь мы активируем фон контента.
Для этого перед этими двумя строчками вставим вот такой код:

Тоесть теперь этот отрезок выглядит следующим образом:

<div id=»content-p»>
<div id=»content»> — может называться подругому.
<?php if (have_posts()) : ?>

Теперь опускаемся в самый низ этого файла и перед подвалом вставляем:
</div>
Вот и всё!
Нажимаем «сохранить», и смотрим, что у нас получилось.
Если вдруг отображается некорректно, то попробуйте перенести </div> немного выше.
Например поставить его после <?php endif; ?>.
Потом делаем то же самое в шаблоне одной записи и шаблоне одной страницы.
Итак, с фоном контента мы закончили.
То же самое мы делаем и с фоном боковой колонки.
Так же находим там нужный участок в начале и вставляем:

Потом находим нужный участок в конце, и вставляем </div>.
Готово!

Остаётся сделать шапку.
Это очень просто.
Переходим в файл header.php и после открывающегося тега <body> вставляем такую вот строчку:

Теперь немного о границах.
Чтобы вставить в шаблон границу например такую:

Нужно просто перед закрытием и открытием какого-либо div класса, вставить картинку этой границы при помощи атрибута img src

Вот и всё!
Теперь всё работает!
Если вы хотите, чтобы в шапке был текст, то можно поступить двумя способами:
1)

<div id=»hapka»>
Здесь текст, который должен быть в шапке.
</div>

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

Вы можете самостоятельно добавлять и изменять дополнительные div классы в файле стилей. Помните:
Главное для вас это создать свой уникальный дизайн для сайта.
Не бойтесь! Экспериментируйте! И изменяйте свой сайт в лучшую сторону!
Запомните:
Ваш сайт — это ваша территория! И какой там будет дизайн, решать только вам!
Искренне ваш «Мудрый кот».

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

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

Подписаться вы можете с помощью

или

, но самый удобный способ это:

Сомневаетесь? Тогда прочитайте: почему необходимо стать подписчиком

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

Информация о статье:
Опубликовано: 28 августа 2011, в рубрику Дизайн.
Теги: вёрстка , дизайн , как , шаблон.

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

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

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