Из PSD в HTML, создание дизайна вебсайта шаг за шагом

Дата публикации: 2010-03-17

как создать сайт

От автора: Сегодня я проведу вас через весь процесс получения из Photoshop HTML. Мы собираемся построить из 4 PSD макетов веб-сайт, который в конечном итоге станет темой WordPress. Это большая статья, поэтому, если вы собираетесь идти до конца, убедитесь, что у вас есть несколько свободных часов!

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Демо

Если Вы похожи на меня, Вам интересно посмотреть конечный результат перед началом. Вы можете увидеть четыре конечных файла HTML, следуя по этими ссылкам:

Portfolio Home

Blog Home

General Purpose Page

Alternate Colour Scheme

Скачать Файлы

Дополнительно вы можете скачать файлы download the full HTML/CSS/Image source files here.

Что мы будем создавать?

Как Вы, может, знаете или не знаете, я написал (очень медленно) книгу по темам WordPress. То, что мы создадим, является HTML, который я использую в книге для создания главного примера тем. Окончательный набор тем называется Creatif. Вы можете увидеть эти 4 макета, которые показаны в скриншотах ниже (щелкните, чтобы получить большие версии).

Вы можете получить полный набор PSD файлов от PSDTUTS Plus, но это обойдется вам в $ 9 в месяц за доступ. Если вы не хотите присоединиться, не беспокойтесь, поскольку вы сможете проследить сегодняшнюю статью, используя только JPG скриншоты .

как создать сайт

Часть 1 — Создание структуры и первой страницы

Эта статья обеспечивает приличного размера шаблон. Таким образом, мы собираемся сделать всё шаг за шагом. Сначала мы создадим структуру нашего сайта, затем первую страницу, а затем дополнительные страницы, и наконец дополнительный цвет схемы.

Шаг 1 — Подготовка

Итак, прежде всего, мы загружаем наш редактор кода на выбор. Я использую чаще всего Dreamweaver (и Textmate иногда). Я нахожу, что Dreamweaver имеет довольно приличные инструменты кода и некоторые особенности, которые я действительно использую (в частности, мощный Find+Replace и быстрое подключение <img>).

В любом случае первое, что делают — это создают структуру каталогов и готовятся к созданию сайта. Обычно я создаю папку images и папку scripts, а затем я кладу весь мой CSS и HTML в основу.

как создать сайт

Шаг2 – Быстрая предварительная разметка

Первое, что мы сделаем — это полная разметка HTML с некоторой частью CSS для того, чтобы просто удостовериться, что у нас есть солидная основа. Мы можем также проверить её в основных браузерах (IE7, IE6, Firefox, Safari) только, чтобы удостовериться, что мы находимся на твердой опоре. Нет ничего хуже, чем возвращаться полностью к началу, чтобы устранить проблемы совместимости браузеров. Намного лучше сделать это заранее.

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

Дизайн центрирован. Это сразу говорит нам, что мы должны обернуть его в контейнер и затем центрировать этот контейнер.

В сущности, дизайн представляет собой ряд горизонтальных блоков. Иногда блоки имеют два столбца, а иногда один. Поэтому мы можем сделать это в виде серии <div>-ов. Это хорошо потому, что мы можем смешивать и совмещать элементы из разных страниц, как это будет видно позже.

У нас есть нижний колонтитул, у которого другой цвет. Это означает, что фон должен быть того же цвета, в случае, если пользовательский браузер растягивается. Таким образом, нижний колонтитул должен будет находиться в другом контейнере (не в основном).

Итак, вот HTML разметка:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Creatif</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="main">

        <div class="container">

            <div id="header">

                Logo / Menu

            </div>

            <div id="block_feature">

                Featured Content

            </div>

            <div id="block_content">

                Content

            </div>

        </div>

    </div>

    <div id="footer">

        <div class="container">

            Footer Stuff Goes in Here

        </div>

    </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Creatif</title>

</head>

<body>

Logo / Menu

</div>

Шаг 3 – добавить некоторые фоновые изображения

Таким образом, наша разметка готова, но у нее есть только основные элементы, которые отцентрированы. Теперь придадим ей нужный внешний вид.

Первое, что нам нужно это несколько изображений. Вы можете сделать их сами, если у вас есть PSD, или просто возьмите download ZIP, и вы увидите некоторые изображения, которые я сделал раньше!

Вот скриншот первого изображения — большой фоновый JPG. Я использую это большое фоновое изображение, чтобы получить радиальный градиент на переднем плане, затем я буду использовать тонкий фрагмент в 1px, чтобы заполнить левую и правую стороны, таким образом страница будет растягиваться.

как создать сайт

Аналогичным образом мы создадим фоновое изображение для нижнего колонтитула, прокладывая границу между ним и основной областью, (Вы можете найти это изображение в ZIP архиве, оно называется background_footer.jpg). Теперь мы обновим файл CSS, чтобы удалить ту красную границу и добавить наши новые фоновые изображения, следующим образом:

@charset &quot;UTF-8&quot;;
/* Background-Styles */

body {
    margin:0px; padding:0px;
    background-color:#131211;
}
#main {
    background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
    background-image:url(images/background_light.jpg);
    background-repeat:no-repeat;
    min-height:400px;
}
#footer {
    background-image:url(images/background_footer.jpg);
    background-repeat:repeat-x;
    color:white;
    padding:40px;
}
.container {
    width:950px;
    margin:0 auto;
    position:relative;
}

@charset "UTF-8";

/* Background-Styles */

body {

margin:0px; padding:0px;

background-color:#131211;

}

#main {

background:#c4c0be url(images/background_light_slice.jpg) repeat-x;

}

#main .container {

background-image:url(images/background_light.jpg);

background-repeat:no-repeat;

min-height:400px;

}

#footer {

background-image:url(images/background_footer.jpg);

background-repeat:repeat-x;

color:white;

padding:40px;

}

.container {

width:950px;

margin:0 auto;

position:relative;

}

Две вещи к сведению:

Есть несколько способов установить фон. В #main я использовал однин селектор ,который устанавливает три свойства — цвет, изображение, повторить изображение. Но вы можете также установить каждое свойства индивидуально, как я сделал это в #main .container и #footer.

Обратите внимание, что, поскольку я хочу применить фоновое изображение «background_light.jpg» к <div class=’container’>, который находится внутри #main, а не к тому, что находится внутри #footer,поэтому я написал #main .container. Иными словами, это применяется только к элементам класса class=’container’ , которые находятся внутри элементов с id=’main’.

Шаг 4 – Тестирование в браузерах

Пока неплохо. Не забывайте проверять в различных браузерах. Здесь Вы можете видеть в IE7, это выглядит великолепно!

как создать сайт

Шаг 5 – делаем прозрачный логотип

Затем я создал Логотип. Поскольку в дальнейшем мы будем работать с альтернативной цветовой схемой, я собираюсь использовать прозрачный фон PNG файла. Вы можете сделать это, выключив фон в Photoshop и затем выполнить в File > Save for Web and Devices и выбрать PNG-24. Вы должны знать, что PNG-24 это файлы довольно большого размера. Для маленького изображения как наше это нормально, но для больших изображений файл может быть слишком большим.

(Если кто знает, как сделать сжатый файл PNG, оставьте комментарий, потому что я уверен, что есть способ сделать это, но я просто не знаю, как!) Во всяком случае, вы можете получить прозрачный логотип PNG здесь.

как создать сайт

Теперь мы добавим наш логотип, а также меню при помощи этого HTML кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Creatif</title>
    <link href="step_2.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
</head>

<body>
    <div id="main">
        <div class="container">

            <div id="header">

                <ul id="menu">
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Testimonials</a></li>
                    <li><a href="">Request a Quote</a></li>
                </ul>

                <div id="logo">
                    <h1>Creatif</h1>
                    <small>A Family of Rockstar WordPress Themes</small>
                </div>

            </div>

            <div id="block_feature">

                Featured Content

            </div>

            <div id="block_content">

                Content

            </div>

        </div>
    </div>

    <div id="footer">
        <div class="container">

            Footer Stuff Goes in Here

        </div>
    </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Creatif</title>

</head>

<body>

<li><a href="">Portfolio</a></li>

<li><a href="">Services</a></li>

<li><a href="">About</a></li>

<li><a href="">Testimonials</a></li>

<li><a href="">Request a Quote</a></li>

</ul>

<h1>Creatif</h1>

<small>A Family of Rockstar WordPress Themes</small>

</div>

Шаг 6 – Установка прозрачности в IE6

Теперь есть одна проблема с прозрачным PNG и она заключается в том, что наш друг Internet Explorer 6 не поддерживает его! К счастью эта проблема относительно легко устраняется благодаря статье, которую я нашел — The Easiest Way to Fix PNG for IE6 (Пока еще нет перевода данной статьи). Мы только загружаем скрипт и добавляем эту строку в наш CSS:

/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }

1 2	/* Fix up IE6 PNG Support */ img, #logo { behavior: url(scripts/iepngfix.htc); }

К сожалению, моя проверка в IE6, не дала результатов потому что я использую Mac, а проверка на Mac. через Darwine — не распознает исправление.. Таким образом, я понятия не имею, работает ли это 🙂

Так во всяком случае на данном этапе я не уделяю много внимания IE6 :-).

В любом случае, вот скриншот того, что мы получили в IE6, когда прозрачность не работает…

как создать сайт

Шаг 7 – Установка меню

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

ul#menu {
    margin:0px; padding:0px;
    position:absolute;
    right:0px;
}
ul#menu li {
    display:inline;
    margin-left:12px;
}
ul#menu li a {
    text-decoration:none;
    color:#716d6a;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
    color:#211e1e;
}

ul#menu {

margin:0px; padding:0px;

position:absolute;

right:0px;

}

ul#menu li {

display:inline;

margin-left:12px;

}

ul#menu li a {

text-decoration:none;

color:#716d6a;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

font-weight:bold;

text-transform:uppercase;

}

ul#menu li a.active, ul#menu li a:hover {

color:#211e1e;

}

Здесь нет ничего интересно, за исключением того, что мы определили сласс «active», который такой же, как стиль :hover (а именно это более темный оттенок). Это означает, что мы можем написать <a href=»» class=»active»> и ссылка потемнеет. Позднее в WordPress мы сделаем так, что можно будет сказать, на какой странице вы находитесь в любой момент времени.

как создать сайт

Шаг 8 –Добавление содержимого в Content

Теперь у нас есть основа нашей страницы и пора начать добавлять содержимое блоков. Как я упоминал ранее, мы собираемся сделать этот сайт как ряд взаимозаменяемых блоков содержания. Первый блок «Featured Project «. Итак, давайте добавим HTML:

 <div id="block_featured" class="block">
    <span class="block_inside">

        <div class="image_block">
            <img src="images/sample_feature.jpg" />
        </div>
        <div class="text_block">
            <h2>Eden Website Design</h2>
            <small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>

            <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
            <br />
            <a href="" class="button">View Project</a>
        </div>

    </span>
</div>

</div>

<h2>Eden Website Design</h2>

<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>

<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>

<br />

<a href="" class="button">View Project</a>

</div>

</span>

</div>

Таким образом, этот код ниже <div id=»header»> </ div> кода из предыдущих шагов. И без стилей это выглядит так:

как создать сайт

Следует отметь две важные вещи:

Вы увидите, что у нас есть <div class=»block»> идущий перед <span class=»block_inside»>. Это объясняется тем, что у полей, которые мы рисуем есть двойная граница, сначала там есть 1px темно- серая граница, затем 1px белая граница. Так наличие двух элементов означает, что у нас может быть граница на каждом. Я не знаю, почему я использовал <span> и Вы увидите позже, как мы это изменим 🙂

У нас есть кнопка View Project, вместо изображения, мы создали создать класс ‘button’, а затем применим к нему несколько стилей, и ссылка будет выглядеть действительно, как кнопка.

Шаг 9 – Добавление некоторых базовых стилей

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

/*
    Block-Styles
*/

.block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
}
.block_inside {
    display:block;
    border:1px solid #ffffff;
    background: #ffffff url(images/background_block_slice.jpg) repeat-x;
    padding:30px;
    overflow:auto;
}

.image_block {
    border:1px solid #b5b5b5;
    background-color:#d2d2d2;
    padding:5px;
    float:left;
}
.image_block img {
    border:1px solid #b5b5b5;
}
.text_block {
    float:left;
    width:430px;
    margin-left:30px;
}

Block-Styles

.block {

border:1px solid #a3a09e;

background-color:#ffffff;

margin-bottom:20px;

}

.block_inside {

display:block;

border:1px solid #ffffff;

background: #ffffff url(images/background_block_slice.jpg) repeat-x;

padding:30px;

overflow:auto;

}

.image_block {

border:1px solid #b5b5b5;

background-color:#d2d2d2;

padding:5px;

float:left;

}

.image_block img {

border:1px solid #b5b5b5;

}

.text_block {

float:left;

width:430px;

margin-left:30px;

}

Как было упомянуто выше, у нас есть класс .block, который просто устанавливает границу и нижний margin. Сразу внутри него у нас есть класс .block_inside, у которого есть белая граница, тонкий кусочек фона (для придания слабого градиента), padding, и, наконец, значение overflow.

У нас overflow:auto, поскольку у нас будет два floated элемента внутри. Раньше я использовал clearing

,но кто-то в моих предыдущих комментариях отметил, что это работает так же хорошо и намного чище!

Внутри у нас идет класс .Image_block, который дает нашему изображению двойную границу (одну на

и одну себе на <img>), и которому указано float:left. Text_block, также имеет свойство float:left, что формирует мини колонки разметки. Таким образом, наша разметка теперь выглядит следующим образом:

как создать сайт

Шаг 10 – Добавление стилей текста

Теперь займемся текстом. Это текст выглядит неплохо на предыдущем скриншоте, потому что у Firefox, который я использовал, стоит по умолчанию шрифт Sans-Serif. Но если бы я б сделал скриншот IE, то Вы бы увидели бы вместо этого шрифта Serif. Таким образом, мы должны разобраться теперь с текстом. Мы добавим эти кусочки CSS к нашей таблице стилей:

 body {
    margin:0px; padding:0px;
    background-color:#131211;
    font-family:Arial, Helvetica, sans-serif;
    color:#7f7d78;
    font-size:13px;
    line-height:19px;
}

/*
    Text-Styles
*/

h2 {
    margin:0px 0px 10px 0px;
    font-size:36px;
    font-family:Helvetica, Arial, Sans-serif;
    color:#000000;
}
small {
    color:#595856;
    font-weight:bold;
    font-size:11px;
    display:block;
    margin-bottom:15px;
}
a {
    color:#007de2;
    text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
    background:#32312f url(images/button_bg.jpg) repeat-x;
    padding:5px 10px 5px 10px;
    color: #ffffff;
    text-decoration: none;
    border:1px solid #32312f;
    text-transform:uppercase;
    font-size:9px;
    line-height:25px;
}
a.button:hover {
    background:#007de2 url(images/button_bg_o.jpg) repeat-x;
    border-color:#007de2;
}

body {

margin:0px; padding:0px;

background-color:#131211;

font-family:Arial, Helvetica, sans-serif;

color:#7f7d78;

font-size:13px;

line-height:19px;

}

Text-Styles

h2 {

margin:0px 0px 10px 0px;

font-size:36px;

font-family:Helvetica, Arial, Sans-serif;

color:#000000;

}

small {

color:#595856;

font-weight:bold;

font-size:11px;

display:block;

margin-bottom:15px;

}

a {

color:#007de2;

text-decoration:none;

}

a:hover { text-decoration:underline; }

p { margin: 0px 0px 15px 0px; }

a.button {

background:#32312f url(images/button_bg.jpg) repeat-x;

padding:5px 10px 5px 10px;

color: #ffffff;

text-decoration: none;

border:1px solid #32312f;

text-transform:uppercase;

font-size:9px;

line-height:25px;

}

a.button:hover {

background:#007de2 url(images/button_bg_o.jpg) repeat-x;

border-color:#007de2;

}

Итак:

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

Затем мы создали стиль для <h2>, который устанавливает margins и шрифт Helvetica.

Мы также создали стиль для <small> — подзаголовков (например, в какой категории находится пост и т.д),

Мы создали стиль ссылки и стиль link:hover

Мы сбросили стили абзацев <p>, чтобы в margins отступов по умолчанию.

Наконец, мы создали тот самый класс button. Обратите внимание, что я определил его как «a.button», или, другими словами все теги <a> с классом = «.button». Почему я просто не сделал его как «.button»? Лучше делать это именно так, чтобы иметь возможность сделать второй класс button для <input> и он будет немного отличаться. Таким образом, они не будут взаимодействовать друг с другом.

В классе button вы увидите, что мы установили некоторые padding, border, фоновое изображение, Hover стиль и атрибут line-height … Подождите line-height атрибут? Да, к сожалению, это устанавливается для IE, что бы все выглядело как кнопка.

С нашим дополнительным моделированием страница начинает обретать форму!

как создать сайт

Шаг 11 – Добавление ленты

Одной из изящных вещей в этом дизайне является маленькая голубая лента в правом верхнем углу. Благодаря сочетанию CSS, прозрачных файлов PNG и абсолютного позиционирования, она действительно несложно добавляется. Итак, сначала мы должны сделать изображение. Еще раз мы создаем изображение с прозрачным фоном и сохраняем его как PNG-24, вот изображение:

как создать сайт

Далее нам нужно поместить изображение в наш HTML, это можно сделать следующим образом:

<div class="block">
<img src="images/ribbon_featured.png" class="ribbon"/>
            <span class="block_inside">

                <div class="image_block">
                    <img src="images/sample_feature.jpg" />
                </div>
                <div class="text_block">
                    <h2>Eden Website Design</h2>
                    <small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>

                    <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
                    <br />
                    <a href="" class="button">View Project</a>
                </div>

            </span>
        </div>

</div>

<h2>Eden Website Design</h2>

<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>

<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>

<br />

<a href="" class="button">View Project</a>

</div>

</span>

</div>

Таким образом, Вы можете видеть тег <img> там во второй строке. Заметьте, что я присвоил ему class= «ribbon» и поместил в <div class= «block»> .block, а не в <span class= «block_inside»>. Это потому что, если мы поместим его внутрь .block_inside, это сделает путаницу со свойством overflow:auto, которое мы устанавливаем ранее. Во всяком случае , прямо сейчас это только запутает нашу разметку, так что давайте добавим стили :

.block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    position:relative;
}
.ribbon {
    position:absolute;
    top:-3px;
    right:-3px;
}

.block {

border:1px solid #a3a09e;

background-color:#ffffff;

margin-bottom:20px;

position:relative;

}

.ribbon {

position:absolute;

top:-3px;

right:-3px;

}

Вы можете видеть, что у нас есть:

Добавляется position:relative к классу .block. Таким образом, мы можем использовать абсолютное позиционирование внутри относительно элемента с классом .block (а не для целой страницы)

Затем мы установили изображение, которое появиться на 3px выше верхнего края и на 3px правее правого края.

Легко! Ещё бы день назад, мы должны были бы использовать супер сложную <table> разметку, чтобы достигнуть того же самого эффекта. Вот то, как это смотрится сейчас:

как создать сайт

Шаг 12 – Создание второго блока

С добавленной лентой наш первый блок закончен! Теперь пришло время начинать следующий <div> блок. В нем будут темы и список последних проектов. Итак, для начала мы добавляем немного HTML:

<div id="block_portfolio">

            <div id="portfolio_items">

                <div class="mini_portfolio_item">
                    <div class="block_inside">
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                         <h3>PSDTUTS Theme Design</h3>
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
                         <a href="#" class="button">View Project</a>
                     </div>
                 </div>

                <div class="mini_portfolio_item">
                    <div class="block_inside">
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                         <h3>PSDTUTS Theme Design</h3>
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
                         <a href="#" class="button">View Project</a>
                     </div>
                 </div>

                 <div class="mini_portfolio_item">
                    <div class="block_inside">
                         <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                         <h3>PSDTUTS Theme Design</h3>
                         <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
                         <a href="#" class="button">View Project</a>
                     </div>
                 </div>

             </div>

             <div id="text_column">
                 <h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creatives</h2>
                 <p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar WordPress Designer</a> by Rockstar Resources due for release in 2008.</p>
                 <p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
               <p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="//psdtuts.com">PSDTUTS</a> and <a href="//nettuts.com">NETTUTS</a>.</p>
  </div>

         </div>

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>

<a href="#" class="button">View Project</a>

</div>

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>

<a href="#" class="button">View Project</a>

</div>

<h3>PSDTUTS Theme Design</h3>

<p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>

<a href="#" class="button">View Project</a>

</div>

<h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creatives</h2>

<p>You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar WordPress Designer</a> by Rockstar Resources due for release in 2008.</p>

<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>

<p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="//psdtuts.com">PSDTUTS</a> and <a href="//nettuts.com">NETTUTS</a>.</p>

</div>

Кажется так много кода, но на самом деле это не так. Давайте пройдемся по нему:

Сначала мы создали контейнер <div id=»block_portfolio»>, чтобы обернуть все содержимое этого блока.

Далее у нас есть <div id=»portfolio_items»>, который содержит три идентичных <div class=»mini_portfolio_item»>. Мы поговорим об этом чуть позже.

Затем у нас идет <div id=»text_column»>, который заполнен некоторым текстом и, у которого есть заголовок <h2>.

То, что мы собираемся сделать — это два столбца. Один из них с текстом, второй с темами. Чтобы сформировать два столбца, применим в стилях свойство float.

Мы заменим <h2> фоновым изображением.

И мы разработаем те mini_portfolio_item div-вы, чтобы смотрелось хорошо использование эффекта аналогичного двойной границе, как мы делали это ранее.

Вот CSS:

/*
    Portfolio-Home-Styles
*/

#block_portfolio {
    overflow:auto;
    margin-bottom:20px;
}
#portfolio_items {
    width:615px;
    margin-right:25px;
    float:left;

}
#text_column {
    float:right;
    width:310px;
}
#text_column h2#text_title {
    text-indent:-9999px;
    background-image:url(images/creatif.jpg);
    background-repeat:no-repeat;
    width:310px;
    height:129px;
}

.mini_portfolio_item {
    border:1px solid #a3a09e;
    margin-bottom:10px;

}
.mini_portfolio_item .block_inside {
    background:none; background-color:#e2dddc;
    padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

Portfolio-Home-Styles

#block_portfolio {

overflow:auto;

margin-bottom:20px;

}

#portfolio_items {

width:615px;

margin-right:25px;

float:left;

}

#text_column {

float:right;

width:310px;

}

#text_column h2#text_title {

text-indent:-9999px;

background-image:url(images/creatif.jpg);

background-repeat:no-repeat;

width:310px;

height:129px;

}

.mini_portfolio_item {

border:1px solid #a3a09e;

margin-bottom:10px;

}

.mini_portfolio_item .block_inside {

background:none; background-color:#e2dddc;

padding:25px 30px 15px 30px;

}

.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

ОК еще раз, выглядит внушительно, но это не так плохо. Пройдем всё шаг за шагом:

Сначала мы снова использовали overflow:auto для главного блока с классом #block_portfolio. Т.к. у нас снова есть два floated столбца и если мы не сделаем этого, то они наедут на нижний колонтитул.

Затем мы установили для #portfolio_items float left, имеющий margin, чтобы отделить его от текстового столбца, и ширину 615px.

Для #text_column установлено float right с шириной 310px.

В столбце текста мы снова применили маленькую хитрость к нашему <h2> тегу, где мы используем большой текстовый отступ, чтобы текст исчез, а затем вместо него используем фоновое изображение.

Затем у нас есть три определения стиля для класса .mini_portfolio_item следующим образом:

Сначала мы устанавливаем 1px темной границы и margin между ними

Затем мы переопределяем стили .block_inside, чтобы они подходили этим элементам. Помните, что класс .block_inside был определен ранее, когда мы делали Featured Project область. Таким образом, здесь мы убираем фоновое изображение, изменяем цвет фона и изменяем padding.

Итак, в целом это выглядит вот так:

как создать сайт

Шаг 13 – Добавление ленты

Теперь мы хотим добавить «Recent Projects» ленту к самому верхнему элементу. Сделать это мы можем так же как и для предыдущей ленты:

<div class="mini_portfolio_item">
                <img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
                <div class="block_inside">
                      <img src="images/sample_mini_portfolio3.jpg" class="thumbnail" alt="AudioJungle" />
                      <h3>AudioJungle Site Design</h3>
                      <p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>
                      <a href="#" class="button">View Project</a>
                  </div>
              </div>

<h3>AudioJungle Site Design</h3>

<p>Website design for leading photoshop tutorial site and creation and maintenance of WordPress theme. </p>

<a href="#" class="button">View Project</a>

</div>

Затем мы добавляем атрибут position:relative в элемент mini_portfolio_item следующим образом:

.mini_portfolio_item {
    border:1px solid #a3a09e;
    margin-bottom:10px;
    position:relative;
}

.mini_portfolio_item {

border:1px solid #a3a09e;

margin-bottom:10px;

position:relative;

}

Но что-то странное происходит … Хотя правая сторона выглядит правильно, верх отрезался, как видно на скриншоте:

как создать сайт

Причина в том, что наш элемент находится внутри mini_portfolio_item, который обрезает его. Таким образом, все mini_portfolio_item внутри <div id= «portfolio_items»>. Решение является достаточно простым, мы добавим 3px отступа сверху, которых достаточно для нашей ленты. Вот скорректированный CSS:

#portfolio_items {  
        width:615px;  
        margin-right:25px;  
        float:left;  
        padding-top:3px;  
    }

#portfolio_items {

width:615px;

margin-right:25px;

float:left;

padding-top:3px;

}

Шаг 14 – Завершение элементов портфолио

Наконец я сменил несколько изображений и заголовков, чтобы мы могли увидеть, как страница выглядит с 3 различными элементами вместо одного и того же. Затем я также решил избавляться от кнопки View Project и оставить только текст ссылки. Это выглядит чище и менее грузно. Таким образом, вот конечный раздел элементов портфолио (показанный в Safari, не забывайте проверять в различных браузерах!):

как создать сайт

Шаг 15 – Добавление содержания в нижний колонтитул

Теперь есть еще один раздел на нашей странице: Footer! Давайте добавим текстовое содержание к нему:

<div id="footer">
    <div class="container">

        <div class="footer_column long">
               <h3>Designed by Collis Ta’eed, do with this as you please</h3>
               <p>You can read a photoshop tutorial for creating the design at <a href="//psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href="//nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a WordPress theme in the upcoming book <a href="//freelanceswitch.com/book">How to be a Rockstar WordPress Designer</a></p>
        </div>

        <div class="footer_column">
               <h3>More Links</h3>
            <ul>
                   <li><a href="//vectortuts.com">VECTORTUTS</a></li>
                <li><a href="//activeden.net">FlashDen</a></li>
                <li><a href="//audiojungle.net">AudioJungle</a></li>
                <li><a href="//freelanceswitch.com">FreelanceSwitch</a></li>
                <li><a href="//faveup.com">FaveUp</a></li>
               </ul>
           </div>

           <div class="footer_column">
               <h3>RSS</h3>
            <ul>
                   <li><a href="">RSS Feed</a></li>
                <li><a href="">What is RSS?</a></li>
               </ul>
           </div>

       </div>
   </div>

<h3>Designed by Collis Ta’eed, do with this as you please</h3>

<p>You can read a photoshop tutorial for creating the design at <a href="//psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href="//nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a WordPress theme in the upcoming book <a href="//freelanceswitch.com/book">How to be a Rockstar WordPress Designer</a></p>

</div>

<h3>More Links</h3>

<ul>

<li><a href="//vectortuts.com">VECTORTUTS</a></li>

<li><a href="//activeden.net">FlashDen</a></li>

<li><a href="//audiojungle.net">AudioJungle</a></li>

<li><a href="//freelanceswitch.com">FreelanceSwitch</a></li>

<li><a href="//faveup.com">FaveUp</a></li>

</ul>

</div>

<ul>

</ul>

</div>

Обратите внимание:

Я создал три <div class= «footer_column»>, в которых расположено содержание колонтитула, мы пустим их на свои места очень быстро.

Так как первый столбец другой ширины, я присвоил ему другой класс, названный «long». Отметьте, что Вы устанавливаете два класса следующим образом: class= «class1 class2» , не как : class= «class1» class= «class2» , что является недопустимым.

Внутри столбцов я использовал списки <ul> и теги заголовков <h3>. Всегда хорошо использовать правильную семантическую разметку, и это делает ее более читаемой и поисковым системам нравится видеть эти заголовки и перечислять их правильно.

Вот как это выглядит!

как создать сайт

Шаг 16 – моделирование колонтитула

Моделирование колонтитула является довольно простым, вот код, который нам нужен:

/*
    Footer-Styles
*/

#footer {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
}
.footer_column {
    float:left;
    width:120px;
    margin-right:30px;
}
#footer .long {
    width:610px;
}
#footer h3 {
    color:#e2dddc;
    text-transform:uppercase;
    font-size:10px;
}
.footer_column ul li, .footer_column ul {
    list-style:none;
    margin:0px;
    padding:0px;
}

Footer-Styles

#footer {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

}

.footer_column {

float:left;

width:120px;

margin-right:30px;

}

#footer .long {

width:610px;

}

#footer h3 {

color:#e2dddc;

text-transform:uppercase;

font-size:10px;

}

.footer_column ul li, .footer_column ul {

list-style:none;

margin:0px;

padding:0px;

}

Пройдемся подробно:

Сначала мы устанавливаем шрифты для #footer области

Затем мы задали всем столбцам float с шириной по умолчанию 120px

Мы отменяем эту ширину для столбца с классом .long. Обратите внимание, что я установил «#footer .long» вместо просто «.long». Причина в том, что»long» является общим названием, которое я мог бы использовать где-нибудь в другом месте, так что это хорошая идея определить его более подробно.

Наконец <h3> и <ul> теги получают простые Стили

как создать сайт

Шаг 17 – Добавление иконки!

Мы почти закончили нашу первую страницу. Пришло время добавлять некоторые тонкости. Сначала иконка. Это те маленькие иконки, которые появляются в адресной строке. Мне не нужно ничего придумывать, просто маленький черный квадратик с С для Creatif будет красиво. Итак, сначала мы создаем квадратное изображение как это:

Есть множество сайтов по созданию иконок (Visit SixRevisions for a list of them), но я всегда использую html-kit’s. Вы просто загружаете изображение и нажимаете создать Favicon.ico. Затем мы соединяем это вот с такой строкой HTML:

<link rel="shortcut icon" href="images/favicon.ico" />

1	<link rel="shortcut icon" href="images/favicon.ico" />

как создать сайт

Шаг 18 — Проверка!

Теперь пришло время проверять, что наша разметка w3c валидная! Поэтому мы идем в валидатор, вставляем наш код и скрещиваем пальцы… и епрст 🙁 не правильно. Я не помню, что я у меня было всё когда-нибудь правильно с первого раза, должны же быть у меня плохие привычки!

как создать сайт

Посмотрите, там 14 ошибок. Проблема номер один заключается в отсутствии сопроводительного текста на каждое из моих изображений… к сожалению! Поэтому вернемся и добавим его следующим образом:

 <img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>

1	<img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>

следует исправить много ошибок. Итак, теперь мы запустим его снова и… барабанная дробь… По-прежнему неправильно. ОК, это оказалось немного сложнее:

как создать сайт

К счастью, оставшиеся 8 ошибок на самом деле та же самая проблема. В основном я уже использовали встроенный элемент (в частности, <span class= «block_inside»>), а затем попытался поместить элементы блочного уровня, такие как

внутрь. Видимо, что не правильно … Ого!

К счастью, это легко исправлена, мы просто изменяем каждый экземпляр <span class= «block_inside»> на<div class= «block_inside»>. И… УРА!Прошло:-)

как создать сайт

Конец первой части!

Отлично, мы успешно сделали нашу основную страницу! Здесь Вы можете видеть, что я проверяю это в IE7 и к счастью нет никаких ошибок.

Вот законченная страница

как создать сайт

Часть 2 – Создание разновидностей

С помощью нашей основной структуры мы можем создать дополнительные страницы и альтернативные цветовые схемы. К счастью, у нас есть хорошая основа, и мы можем использовать часть кода, который мы уже писали. Именно поэтому очень важно планировать всё заранее.

Шаг 19 – Создание домашней страницы блога

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

Поэтому сначала мы дублируем наш index.html, и назовем новый файл blog.html.

В нашем blog.html мы для начала удалим все <div id= «block_portfolio»>. Мы скоро заменим этот блок на другой. Затем мы заменим содержимое блока <div id= «block_featured»>, которые немного отличается, и выглядит следующим образом:

<div id="block_featuredblog" class="block">

            <div class="block_inside">

                <div class="image_block">
                    
                </div>
                <div class="text_block">
                    <h2>New Blog Design Launched</h2>
                    <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
        <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. </p>
                    <br />
                    <a href="" class="button">Read More</a>
                </div>

            </div>
        </div>

</div>

<h2>New Blog Design Launched</h2>

<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. </p>

<br />

</div>

Итак, все, что я сделал — это изменил изображение ленты и содержимое в блоке с id = block_featuredblog. По сути это та же разметка. Так что, давайте посмотрим, как это выглядит теперь:

как создать сайт

Шаг 20 – Небольшие изменения CSS

Итак, чтобы все работало, мы только немного скорректируем CSS вот так:

#block_featuredblog .text_block { padding-top:5px; width:490px;}

h2 {
    margin:0px 0px 10px 0px;
    font-size:36px;
    font-family:Helvetica, Arial, Sans-serif;
    color:#000000;
    line-height:39px;
    letter-spacing:-1px;
}

#block_featuredblog .text_block { padding-top:5px; width:490px;}

h2 {

margin:0px 0px 10px 0px;

font-size:36px;

font-family:Helvetica, Arial, Sans-serif;

color:#000000;

line-height:39px;

letter-spacing:-1px;

}

Здесь я скорректировал «text_block» класс, но только тогда, когда он находится в #block_featuredblog элементе. Теперь он имеет небольшой отступ сверху и он стал шире.

Также я добавил соответствующую высоту строки заголовка и по моей прихоти поправил кернинг текста на -1px. И мы закончили с этим элементом!

как создать сайт

Шаг 21 — Создание области основного содержимого

Создание этой области является последней большой вещью, которую мы должны сделать. Это сформирует не только основу этой страницы, но также и базу для других универсальных страниц (с некоторыми изменениями конечно!). Что ж сначала давайте вставим некоторую основу HTML:

<div id="block_content">

                <div id="content_area" class="block">
                    <div class="block_inside">

                        Content

                    </div>
                 </div>
                 <div id="sidebar">
                    <div class="block_inside">

                        Sidebar Content

                    </div>
                 </div>

            </div>

Content

</div>

Sidebar Content

</div>

Так в основном то, что мы создали это элемент — <div id= «block_content»> и внутри у нас есть два блока, которые мы собираемся прижать к обеим сторонам. Вы видите, что я использую наши добрые старые <div class= «block_inside»> , чтобы добавить двойные границы. Вот CSS, чтобы сделать это правильно:

/*
    Block-Content-Styles
*/

#block_content {

}
#content_area {
    width:665px;
    float:left;
}
#sidebar {
    float:left;
    width:281px;
    position:relative;
    left:-1px;
    margin-top:15px;
    background-color:#e2dddc;
    border:1px solid #a3a09e;
}
#sidebar .block_inside {
    background:none;
    background-color:#e2dddc;
}

Block-Content-Styles

#block_content {

}

#content_area {

width:665px;

float:left;

}

#sidebar {

float:left;

width:281px;

position:relative;

left:-1px;

margin-top:15px;

background-color:#e2dddc;

border:1px solid #a3a09e;

}

#sidebar .block_inside {

background:none;

background-color:#e2dddc;

}

Разберемся со стилями:

Мы назначили блоку #content_area и блоку #sidebar ширину и float.

Затем я переместил боковую панель влево на 1px, используя position:relative. Я сделал это для того, чтобы создать эффект, как будто она выдается вперед.

Дополнительно я добавил 15px к главному margin так, чтобы боковая панель не была выровнена сверху. В данный момент это выглядит немного странно, но когда мы добавим содержание, это будет выглядеть лучше.

Наконец я переопределил .block_inside внутри #sidebar, чтобы отменить фоновое изображение и вместо этого сделал background-color:#e2dddc;.

как создать сайт

Шаг 22 – Добавляем содержание

Теперь мы добавляем содержание к нашим двум элементам:

<div id="block_content">

            <div id="content_area" class="block">
                   <div class="block_inside">

                    <h2>Working on a New Project</h2>
                       <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
                    <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>

                       <div class="separator"></div>

                       <h2>Design Awards!</h2>
                       <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
                    <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>

                       <div class="separator"></div>

                       <h2>This Site is Almost Complete Finally...</h2>
                       <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
                    <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>

                   </div>
                </div>
                <div id="sidebar">
                    
                    <div class="block_inside">

                    <h3>Subscribe</h3>

                       <ul>
                        <li><a href="">RSS Feed</a></li>
                        <li><a href="">Email Updates</a></li>
                    </ul>  

                       <h3>Categories</h3>

                       <ul>
                        <li><a href="">News</a></li>
                        <li><a href="">Marketing</a></li>
                        <li><a href="">General</a></li>
                        <li><a href="">Great Sites</a></li>
                    </ul>  

                       <h3>Archives</h3>

                       <ul>
                        <li><a href="">June 2008</a></li>
                        <li><a href="">May 2008</a></li>
                        <li><a href="">April 2008</a></li>
                        <li><a href="">March 2008</a></li>
                    </ul>                            

                   </div>
                </div>

                <!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
                <div style="clear:both"></div>

           </div>

<h2>Working on a New Project</h2>

<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>

<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>

<h2>Design Awards!</h2>

<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>

<h2>This Site is Almost Complete Finally...</h2>

<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>

</div>

<h3>Subscribe</h3>

<ul>

<li><a href="">Email Updates</a></li>

</ul>

<h3>Categories</h3>

<ul>

<li><a href="">Marketing</a></li>

<li><a href="">General</a></li>

<li><a href="">Great Sites</a></li>

</ul>

<h3>Archives</h3>

<ul>

<li><a href="">April 2008</a></li>

<li><a href="">March 2008</a></li>

</ul>

</div>

</div>

OK три важные вещи, которые стоит упомянуть здесь:

Сначала в области содержания я добавил три заметки, и между ними пустые <div class= «separator»> для того, чтобы добавить между заметками тонкую линию с некоторым интервалом.

Затем мы добавили изображение ленты к боковой панели аналогичным способом как и ранее.

Наконец, я использовал очищающий <div> внизу. Затем, как и ранее в этой статье я использовал overflow:auto; чтобы разобраться с floated столбцами, но когда мы добавляем margin-top в предыдущем шаге, чтобы сместить боковую панель ниже, это смешивается с overflow и создает полосу прокрутки. Таким образом, поскольку возможны случаи, когда боковая панель будет длиннее, чем блок содержания, то в этих случаях используют метод очищающего <div> -а.

Теперь мы добавим стили, чтобы привести это все в порядок:

#sidebar h3 {
    font-size:20px;
    line-height:23px;
}
#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }

#content_area h2 { font-size:32px; line-height:31px; }

#content_area .separator {
    border-top:1px solid #e3e3e3;
    margin-top:40px;
    padding-top:40px;
}

#sidebar h3 {

font-size:20px;

line-height:23px;

}

#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }

#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }

#sidebar ul li a { color:#7f7d78; }

#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }

#content_area h2 { font-size:32px; line-height:31px; }

#content_area .separator {

border-top:1px solid #e3e3e3;

margin-top:40px;

padding-top:40px;

}

Отметим две вещи:

Отформатирован <ul> список боковой панели для удаления маркеров и создания красивых отступов

Создан стиль .separator, использующий margin, padding и border-top:1px solid #e3e3e3; — для создания тонкой линии.

И вот наш #block_content элемент закончен! Вы можете увидеть работающий HTML здесь.

как создать сайт

Шаг 23 – Создание общей страницы

Создание нашей конечной страницы является частью проекта. Мы просто дублируем наш blog.html и называем его page.html. Затем удалите featured blog post и измените #block_content следующим образом:

<div id="block_content">

            <div id="content_area" class="block">
                 <div class="block_inside">

                     <h4>Services</h4>
                    <h2>Branding</h2>
                     <br />
                     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
            <p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>

                 </div>
              </div>
              <div id="sidebar">
                
                <div class="block_inside">

                    <h3>Services</h3>

                     <ul>
                        <li><a href="">Branding</a></li>
                        <li><a href="">Graphic Design</a></li>
                        <li><a href="">Web Development</a></li>
                        <li><a href="">Marketing</a></li>
            </ul>  

                     <h3>Related Portfolio Items</h3>

                     <ul>
                        <li><a href="">Eden Branding</a></li>
                        <li><a href="">FlashDen Logo Design</a></li>
                        <li><a href="">PSDTUTS Website</a></li>
            </ul>  

                 </div>
              </div>

              <!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
              <div style="clear:both"></div>

         </div>

<h4>Services</h4>

<h2>Branding</h2>

<br />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>

</div>

<h3>Services</h3>

<ul>

<li><a href="">Branding</a></li>

<li><a href="">Graphic Design</a></li>

<li><a href="">Web Development</a></li>

<li><a href="">Marketing</a></li>

</ul>

<h3>Related Portfolio Items</h3>

<ul>

<li><a href="">Eden Branding</a></li>

<li><a href="">FlashDen Logo Design</a></li>

<li><a href="">PSDTUTS Website</a></li>

</ul>

</div>

</div>

Это довольно большой кусок HTML аналогичный предыдущему, но с другим текстом и новой лентой. Единственное реальное изменение это то, что теперь у нас есть заголовок, выше которого подзаголовок обернутый в тег <h4>. Таким образом, мы можем разработать пару строк CSS следующим образом:

h4 {
    color:#007de2;
    margin:0px 0px 0px 0px;
}

h4 {

color:#007de2;

margin:0px 0px 0px 0px;

}

И вот! Увидеть окончательную универсальную страницу можно здесь.

как создать сайт

Шаг 24 — Это не имеет значения, черный или белый!

Теперь мы собираемся сделать очень простой CSS, чтобы переключить сайт со светлого фона на темный. Чтобы аккуратные это сделать мы просто должны изменить одну строку в HTML:

<body id="dark">

1	<body id="dark">

Вот и всё! С этим одним кусочком дополнительного кода HTML мы можем сделать все необходимые корректировки CSS. Это означает, что если бы вы пожелали, то смогли бы очень легко сделать маленькие JavaScript кнопки, чтобы переключать таблицы стилей. Этот способ будет работать для любого класса, который нужно изменить, мы просто добавляем дополнительный стиль, начинающийся с body#dark. Так что, прежде всего, мы говорим:

body#dark {  
        background-color:#1e1d1b;  
    }  
    body#dark #main {  
        background:#292826 url(images/background_dark_slice.jpg) repeat-x;  
    }  
    body#dark #main .container {  
        background-image:url(images/background_dark.jpg);  
    }  
   body#dark #footer {  
       background-image:url(images/background_dark_footer.jpg);  
   }  
   body#dark ul#menu li a.active, ul#menu li a:hover {  
       color:#ffffff;  
   }

body#dark {

background-color:#1e1d1b;

}

body#dark #main {

background:#292826 url(images/background_dark_slice.jpg) repeat-x;

}

body#dark #main .container {

background-image:url(images/background_dark.jpg);

}

body#dark #footer {

background-image:url(images/background_dark_footer.jpg);

}

body#dark ul#menu li a.active, ul#menu li a:hover {

color:#ffffff;

}

И это говорит браузеру, что если <body id= «dark»> затем отменить стиль для #main, #main.container, #footer, active и hover states меню и поменять фоновые изображения и изменить цвет текста на белый! Просто, как пирог!

как создать сайт

Шаг 25 — Границы и фиксация текста

Как Вы можете видеть, на изображении ниже наш колонтитул фиксируется благодаря новому фоновому изображению и цвету, есть только еще два исправления: «Creatif — WordPress…» текст и границы вокруг полей слишком светлые и должны быть теперь темными. Поэтому мы делаем так:

body#dark .block, body#dark .mini_portfolio_item {
    border-color:#1b1a19;
}
body#dark #text_column h2#text_title {
    background-image:url(images/creatif_dark.jpg);
}

body#dark .block, body#dark .mini_portfolio_item {

border-color:#1b1a19;

}

body#dark #text_column h2#text_title {

background-image:url(images/creatif_dark.jpg);

}

как создать сайт