X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Html верстка на конкретном примере
kranopodem
kranopodem
Topic Starter сообщение 18.11.2012, 23:12; Ответить: kranopodem
Сообщение #1


Привет всем посетителям данного форума! Я решил взяться за статью связанную с HTML вёрсткой. Я объясню вам, как из обычного макета сделать полноценный HTML шаблон. Скажу сразу, я не профессионал в этом деле, но все свои знания в статью я точно вложу.

Для того чтобы сверстать шаблон нам понадобятся 2 программы:
  1. Adobe Photoshop CS3
  2. Notepad++ (или любой другой текстовый редактор)


Также нам понадобится макет в формате .psd, с которым мы собственно и будем работать.
Я уже создал простенький макет, можете скачать его и работать параллельно со мной.
Вот готовый сверстанный шаблон с макетом - https://dl.dropbox.c...x1r/Shablon.rar

Для начала создаём папку с шаблоном, я назвал её shablon, и в ней создаём 3 файла и 1 папку:
  1. index.html – собственно в нём мы и будем верстать наш шаблон;
  2. 1.html – полная статья. Здесь будет шаблон одной статьи;
  3. style.cssфайл со стилями, то есть в нём мы будем придавать красоту и респектабельный вид нашему сайту;
  4. И папку img, в которой будут храниться все наши изображения.

Также нам понадобится файл border-radius.htc, который тоже нужно закинуть в папку с шаблоном. Он нужен для того, чтобы круглая рамка правильно отображалась в старых версиях Internet Explorer.

Запускаем Notepad ++, открываем в нём два наших файла (index.html и style.css) и начинаем верстать! В Index.html пишем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" /> <!--Подключение стилей -->
<title>Наш Шаблон</title>
</head>

<body>
</body>

</html>


Внутри тега <head> мы подключили файл стилей(style.css) кодом:

<link href="style.css" rel="stylesheet" type="text/css" />



Небольшое пояснение:

Хочу заметить, что во всей статье я буду использовать комментарии, то есть пояснять код.
HTML комментарий (в файле с расширением .html) пишется так - <!--Комментарий -->
А CSS комментарий (в style.css) так - /*Комментарий*/
  • Html теги – это то что пишется в <></>
  • Свойства стилей – это то, что мы применяем к стилю, например цвет, рамку, подчеркивание… (пример – color:#fff;)
  • Блоком я буду называть тег <div></div>. Например блок "primer" - <div class="primer"></div>

Каждый тег и любое свойство стиля вы можете посмотреть на сайте http://htmlbook.ru. Слева ищите или вбиваете в поиск, например любой тег, и справа появляется все, что вам необходимо узнать о данном теге, с примерами!


Потом открываем style.css и вписываем в него:

/* CSS Reset */
* {
margin:0; padding:0; /* сбрасываем стандартные отступы */
}

a{ /*Стиль для ссылки*/
color:#0078FF;
}

a:hover{ /*Стиль при наведении на ссылку*/
color:#f89200;
}

a img, a img:hover{ /*Если картинка является ссылкой,то*/
    border:none; /*Удаляем рамку вокруг картинки(было замечено в Internet Explorer)*/
}


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

Следющим шагом в style.css добавляем фон нашего будущего шаблона. Можно поставить просто белый, это делается кодом:

body {
  background:#FFFFFF;
}


background – означает фон, задний план. А #FFFFFF – белый цвет.
Или сделать как в нашем случае, картинкой (хотя её почти не заметно)
[img]http://s019.radikal.ru/i617/1211/67/0b404dd26d9c.jpg[/img]
Для этого пишем:

body {
background: url(img/light_wool.png) repeat;
}


В url() мы задаём картинку, которая будет у нас фоном.
Repeat - означает повторить картинку по горизонтали и вертикали.

В теге <body></body> создаём блок (div) с id "container", в котором собственно и будут находиться все наши остальные блоки: блок статей, шапка, сайдбар и подвал.

То есть внутри <body></body> размещаем код:
<div id="container">
</div>


Еще одно небольшое пояснение насчёт class и id. Id я буду использовать в этих блоках:
  1. Container
  2. Header
  3. Content
  4. Sidebar
  5. Footer

Я использую Id для того, чтобы легче ориентироваться и не сделать ошибок, так как id можно использовать 1 раз, а class неограниченно.
Также придание стиля блоку с id начинается с # (пример #header), а class начинается с точки (пример - .title)

А в файл стилей пишем:
#container {
  margin:0 auto; /*Выровнял шаблон по центру*/
  width:1000px; /*Ширина шаблона*/
}


margin:0 auto; - этим я выровнял наш шаблон по центру.

width:1000px; – это ширина нашего шаблона. Я сделал её 1000px, а не 1024 потому что, ширина полосы прокрутки занимает в среднем 24px. Можно сделать 960px, если хотите чтобы сайт был не на всю ширину экрана, но я для примера взял 1000px.

Если вы хотите сделать ширину сайту для другого разрешения, следуйте данной таблице:
[img]http://s017.radikal.ru/i404/1211/c5/6640423fc876.jpg[/img]
Так выглядит 5-ка самых популярных разрешений:
[img]http://s019.radikal.ru/i608/1211/ac/777bf68257f3.jpg[/img]

Шапка

В следующем шаге мы создаём нашу шапку (header). Создаём внутри блока "container" - блок "header". Получается следующее:

<div id="container">

<div id="header">
</div>

</div>


Теперь научимся мерить высоту и ширину любого объекта, который вам нужен. В фотошопе это делается с помощью инструмента "Прямоугольная область" (горячая клавиша M). С помощью него выделяем объект, который нужно измерить и смотрим справа в окне "Инфо". Шширина. Ввысота.
[img]http://s017.radikal.ru/i415/1211/4b/62cfbb6660fa.jpg[/img]

Цвет мы узнаем с помощью пипетки. Выбираем ее слева (горячая клавиша - i) и нажимаем на цвет, который нам нужно узнать. Потом жмем на палитру (слева внизу) и жмем на выбранный нами цвет. Появляется в окно, где внизу справа написан код цвета. Именно он нам и нужен.

[img]http://i082.radikal.ru/1211/10/81cbe995c4b6.jpg[/img]

Меряем высоту шапки. У меня она получилась 260px, её цвет #fff7e0 и по бокам рамка. В файл стилей заносим эту информацию:

#header{
    height:260px; /*Высота шапки*/
    border-right: 1px solid; /*Рамка справа*/
    border-left: 1px solid; /*Рамка слева*/
    background: #fff7e0;  /*Фоновый цвет шапки*/
}


Шапка. Название сайта(title)

Шапка готова, осталось занести на неё остальную информацию. Начнём с названия сайта. Внутри блока "header" создаём блок с классом "title" и вписываем в него название сайта, в нашем случае "Я название сайта".
<div id="container">
    <div id="header">
         <div class="title">
         Я название сайта
         </div>
    </div>
</div>


В файле стилей присваиваем данному классу следующий стиль:
.title{
    color: #008AFF; /*Цвет текста*/
    font-family: Arial; /* Шрифт текста */
    font-size: 34px; /* Размер шрифта */
    padding: 15px 0 0 10px; /*Отступ сверху 15px и слева 10px*/
    text-decoration: underline; /*Подчеркивание текста*/
}


В свойстве padding я использовал краткую форму. Можно было написать так:
padding-top:15px;
padding-left:10px;

В краткой форме отсчет идёт сверху и по часовой стрелке, то есть так:

[img]http://i056.radikal.ru/1211/a4/a4c279e75726.jpg[/img]

Это относится не только к padding, но и ко всему, где используется top (верх),right (право),bottom (низ),left (лево).

На данный момент шапка должна выглядеть так:

[img]http://s019.radikal.ru/i617/1211/84/078640df91db.jpg[/img]

Шапка. Лого

Заголовок готов. Перейдём к логотипу. Cначала нужно вырезать наш логотип, для этого скройте все остальные слои. Это делается путём выделения нужного нам стиля (Лого), и нажатием правой кнопкой на значок глаза (справа названия слоя).

Откроется меню в котором нужно выбрать "Показать/Спрятать остальные слои"

[img]http://s47.radikal.ru/i117/1211/a9/72b65977ecf2.jpg[/img]

Когда все слои уберутся, выберите инструмент рамка [img]http://s51.radikal.ru/i131/1211/cf/40614bf0661f.jpg[/img] (Горячая клавиша “C") и вырежете лого примерно так:

[img]http://s018.radikal.ru/i523/1211/52/0b243278f928.jpg[/img]

Потом нажмите на нём правой кнопкой и выберите "Кадрировать". И сохраняете его для Web (Alt+Ctrl+Shift+S) в формате PNG-24, то есть с такими установками.

[img]http://i068.radikal.ru/1211/dd/eed933d5d8e9.jpg[/img]

Сохраняете под именем logo.png. В нашу папку с изображениями shablon/img. Чтобы вернуться обратно к макету из режима Кадрирования жмите Ctrl+Alt+Z, пока не появится макет.
Всё готово! После блока с нашим заголовком вставляем код:

<div class="logo">
<a href="index.html"><img src="img/logo.png" /></a>
</div>
  • <a href="index.html"></a> - ссылка на главную страницу нашего сайта.
  • <img src="img/logo.png"/> - наше лого

И в файл стилей закидываем следующий код:

.logo{
margin-top:50px; /*Отступ сверху 50px*/
margin-left:10px; /*Отступ слева 10px*/
}


Этим кодом мы делаем отступ сверху 50px и слева 10px. Или как мы уже знаем можно сократить код таким образом:

margin:50px 0 0 10px;


[img]http://s017.radikal.ru/i425/1211/ab/08b8b99910fe.jpg[/img]

На этом пока что закончим возню с шапкой, социальные кнопки сделаем потом, а пока перейдём к меню.

Меню

В блок "header" больше не лезем, лезем чуть пониже. Внутри блока "container", ниже блока "header" (не в нём) создаём следующий код:

<div class="menu">
       <ul>
             <a href="index.html"><li>Главная</li></a>
             <a href="#"><li>О сайте</li></a>
       </ul>
</div>
  • <div>ом мы создаём блок с классом "menu".
  • Кодом <ul> мы создаём список, в котором будет наше меню.
  • <a href=""> - создает ссылку на главное меню и на страницу "О Сайте".
  • <li> - создаются пункты списка, которые и являются пунктами меню.

В файл стилей добавляем следующее:

.menu{
    background: #9ddbff; /*фон*/
    border: 1px solid #000; /*Рамка, размером 1px, сплошная, цвет черный*/
    height:50px;  /*Высота 50px */
}
.menu ul{
    list-style: none;  /*Выключаем маркировку списка*/
}
.menu li {
    font-family:Arial;  /*Задаём шрифт*/
    font-size:20px;  /*Размер шрифта*/
    color:#000; /*Цвет текста*/
    font-weight:bold; /*Делаем текст жирным*/
    border-right: 1px solid; /*Справа каждого пункта, создаём сплошную рамку размером в 1px. Цвет стоит по умолчанию - черный*/
    float: left; /*Выравниваем списки по левому краю*/
    padding: 10px 10px 15px 10px; /*Делаем оступы*/
}
.menu li:hover{
    text-decoration: underline; /*Подчеркиваем текст, при наведении на него*/
}


Дааааа, код длинненький, но после каждого пункта, написано, что он означает.

[img]http://s16.radikal.ru/i190/1211/0e/dc39da2936fc.jpg[/img]

Меню. Поиск

Теперь в этом же меню добавим еще и поисковую форму. Делается это следующим кодом (добавляем в блоке "menu", перед </div>):

<form method="get" class="search" action="#">
<input name="q" class="form-query" value="" placeholder="Поиск по сайту...">
<input src="img/search.png" type="image" style="vertical-align: bottom; padding: 0;"/>
</form>


В файл стилей пишем:

.search{
   float: right; /*Делаем поиск - справа*/
}
.form-query{
    height: 30px; /*Высота блока, где вводим поисковой запрос*/
    margin-top: 10px; /*Отступ блока сверху*/
    padding-left: 10px; /*Отступ текста слева*/
}


[img]http://i068.radikal.ru/1211/4d/9eb875d209e5.jpg[/img]

Вот и поиск у нас готов. Меню завершено) Осталось сделать блок статей, сайдбар и футер. Сейчас займемся ими. А пока посмотрим, какой код должен был получиться у вас.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Наш Шаблон</title>
</head>

<body>
  <div id="container">

       <div id="header">
              <div class="title">
              Я название сайта
              </div>
                  <div class="logo">
                  <a href="/"><img src="img/logo.png" /></a>
                  </div>
       </div>
                      
       <div class="menu">
               <ul>
                      <a href="/"><li>Главная</li></a>
                      <a href="/about"><li>О сайте</li></a>
               </ul>
       <form method="get" id="search" action="#">
                 <input name="q" id="form-query" value="" placeholder="Поиск по сайту...">
                 <input src="img/search.png" type="image" style="vertical-align: bottom; padding: 0;"/>
       </form>
       </div>
                      
  </div>
</body>
</html>



Блок статей

Начнем делать блок со статьями. Сделаем ему id "content". Он будет находиться перед последним </div>, то есть в блоке <div id="container">. Создаём его, как и все прошлые:

<div id="content">
</div>



Его ширина - 631px, располагается слева, цвет - #ebfbff, рамка - 1px сплошная черная. Отступ сверху примерно 33 px.
Также тут появляется новый код border-radius, то есть округление углов, справа сверху на 30px и справа снизу на 30px. Также можно сделать высоту (НА ВРЕМЯ! Не забудьте потом её удалить, или лучше можете вообще не создавать), чтобы посмотреть, как будет выглядеть наш блок. В общем, код получается такой:

#content{
    width: 631px; /*Ширина*/
    float:left; /*Выравниваем по левому краю*/
    background: #ebfbff; /*Фон*/
    border: 1px solid #000; /*Рамка*/
    margin-top:33px; /*Отступ сверху*/
    border-radius:0px 30px 30px 0px; /*Округляем рамку*/
    -moz-border-radius:0px 30px 30px 0px;/*Округляем рамку для Mozilla*/
    -webkit-border-radius:0px 30px 30px 0px; /* Округляем рамку для Safari и Chrome*/
    -khtml-border-radius:0px 30px 30px 0px; /* Округляем рамку для Linux браузеров */
    behavior:url(border-radius.htc);/*Округляем рамку для IE*/
    height:500px; /*Высота, на время*/
}


[img]http://s018.radikal.ru/i518/1211/06/34e618d9f567.jpg[/img]

Для того чтобы понять почему именно так располагаются цифры в border-radius вам поможет следующая картинка:

[img]http://s019.radikal.ru/i609/1211/91/08d481938168.jpg[/img]

Стрелками показано, к каким углам относятся цифры.

Блок статей. Шаблон статьи

Теперь перейдем к созданию шаблона статьи. Блок будет с классом "post", создаём его в блоке "content", то есть вот так:

<div id="content">
       <div class="post">
                                              
       </div>
</div>


Блок статей. Шаблон статьи. Заголовок

В блоке "post" создадим заголовок. Он будет в теге <h1></h1> и являться ссылкой.

<div id="content">
       <div class="post">
       <h1><a href="#">Я рыбный заголовок</a></h1>
        </div>
</div>



Готово. Осталось привести его в надлежащий вид. Это как вы уже знаете, делается в файле стилей.
.post h1{
font-size: 25px; /*Размер шрифта*/
font-family:Tahoma; /*Задаём шрифт Tahoma*/
padding:13px; /*Делаем отступ со всех сторон 13 px*/
}
.post h1 a{ /*Стиль для ссылки */
font-weight:normal; /*Делаем не жирный шрифт (По умолчанию у ссылки стоит жирный  шрифт)*/
color:#0078ff; /*Задаём цвет*/
}
.post h1 a:hover{ /*Стиль ссылки при наведении*/
color:#ffb638; /*Меняем цвет на оранжевый*/
text-decoration:none; /*Убираем подчеркивание*/
}


[img]http://s019.radikal.ru/i609/1211/3d/722ba54facce.jpg[/img]

Блок статей. Шаблон статьи. Дата и Категории

Заголовок готов, теперь идёт дата с категориями.
Создаём блок "dc", а в нём два span’a (span нам нужен только для того, чтобы придать класс тексту) с классами "date" и "cat", соответственно, то есть получается вот такой код:

<div class="dc">
        <span class="date">30.10.12 |</span>
        <span class="cat">Категория: Уха</span>
</div>


В файл стилей пишем следующее:

.dc{
    padding-left:25px;  /*Отступ слева 25px*/
    padding-bottom: 5px; /*Отступ снизу  5px*/
    color: #694000; /*Задаём цвет*/
    font-family: Tahoma; /*Задаём шрифт Tahoma*/
    font-size: 12px; /*Размер шрифта – 12px*/
    border-bottom: 1px solid black; /*Создаём снизу  рамку в 1px, сплошную, черного цвета*/
}
.dc .date{  /*Стиль для даты*/
    color: #694000; /*Цвет*/
    font-weight: bold; /*Жирный шрифт*/
}


Для категории мы ничего не задаём, т.к. там и так всё нормально получается.

[img]http://i022.radikal.ru/1211/f4/2242dd5b3605.jpg[/img]

Блок статей. Шаблон статьи. Оформление картинки

Следующим делом мы будем оформлять картинку. Но сначала удалим в файле стилей высоту 500px у блока "container".
Находим у #container свойство height:500px; и удаляем его.

[img]http://i023.radikal.ru/1211/02/1534c93605c7.jpg[/img]

Первым делом нам нужно выбрать картинку: вы можете вырезать её, также как мы вырезали лого в самом начале, выбрать свою или взять отсюда.

[img]http://s43.radikal.ru/i101/1211/85/174123f64067.png[/img]

Вставляем её кодом:
<img class="image" src="img/image.png">


Вместо image.png вставляйте название своей картинки.

Наш код получается таким:

<div class="post">
<h1><a href="#">Я рыбный заголовок</a></h1>
<div class="dc">
<span class="date">30.10.12 |</span>
<span class="cat">Категория: Уха</span>
</div>[/indent]
<img class="image" src="img/image.png" />
</div>


В файле стилей задаём ширину, добавляем рамку и отступы:
.post .image{
    width:210px; /*Ширина*/
    border: 1px solid; /*Рамка*/
    margin: 25px 20px 15px 15px;/*Отступы сверху 25px, справа 20px, снизу 15px и слева 15px*/
    float:left; /*Выравниваем картинку по левой стороне, чтобы текст обтекал её справа*/
}

Картинка готова!

[img]http://i031.radikal.ru/1211/5b/2fc728faf374.jpg[/img]

Блок статей. Шаблон статьи. Текст

Пора добавлять текст. Добавляем его в блоке с классом "text". Получается вот так:

<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар</div>



В файле стилей пишем следующее:

.post .text{
    font-family: Arial; /*Шрифт Arial*/
    font-size: 12px; /*Размер шрифта 12px*/
    padding: 24px 7px 5px 25px;    /*Отступ сверху 24px, справа 7px, снизу 5px и слева 25px*/
}


Получается следующее:

[img]http://s017.radikal.ru/i438/1211/fa/12779b9128fd.jpg[/img]

Блок статей. Шаблон статьи. Ссылка "Читать статью"

Теперь добавим ссылку "Читать статью" и применим к ней стили.
Добавляем её перед закрывающим тегом </div>, то есть должно получиться следующее:

<div class="text">Погранслой упруго переворачивает кристалл, и это неудивительно, если вспомнить квантовый характер явления. Если предварительно подвергнуть объекты длительному вакуумированию, то колебание отталкивает тахионный фотон в полном соответствии с законом сохранения энергии. Колебание заряжает разрыв, при этом дефект массы не образуется. Квантовое состояние искажает коллапсирующий пульсар <a class="more" href="#">Читать статью</a>
</div>


В файл стилей заносим:

.post .text .more{
    font-size:16px; /*Размер шрифта 16px*/
    font-weight:bold; /*Шрифт жирный*/
    color:#0078FF; /*Цвет*/
}


Получилось!

[img]http://s49.radikal.ru/i123/1211/a6/e6d8ecd591a4.jpg[/img]

Блок статей. Шаблон статьи. Вторая статья

Теперь добавим ниже еще 1 блок "post", просто скопировав полностью старый и вставив его ниже. Теперь в блоке "content" должно быть два идентичных блока "post". Примерно так:

<div id="content">
      <div class="post">
      </div>
      <div class="post">
      </div>
</div>


Получилось так:

[img]http://s42.radikal.ru/i098/1211/04/b836c30ef9e6.jpg[/img]

Как-то некрасиво. Нужно добавить стили! Добавим рамку снизу и сделаем отступы!

.post{
    overflow:hidden; /* Отображается только область внутри элемента*/
    border-bottom:1px solid; /*Рамка снизу*/
    margin-bottom:10px; /*Отступ снаружи*/
}
.post:last-child{
    border:none; /*Отменяем рамку*/
}


В последнем коде (.post:last-child) мы отменили вывод рамки для последнего элемента(:last-child).

Возьмите на заметку! Если нужно убрать, что-нибудь или добавить к последнему элементу приписывается :last-child, если к первому элементу то :first-child


Всё получилось! И так как нам нужно.

[img]http://i037.radikal.ru/1211/d4/1342d91a490c.jpg[/img]

Осталось сделать сайдбар, футер и добавить социальные иконки в шапку.

Сайдбар (Sidebar)

Перейдем к сайдбару. Он будет располагаться справа – значит, в стилях будет float:right;. Будет список - значит, будет <ul> и <li>. Название блока в сайдбаре будет в <h2> и подчеркнутым.
Ну а дальше разберемся по ситуации.

Сайдбар. Блок с категориями.

Создаём блок с идентификатором "sidebar", а в нём еще один блок с классом “block" и сразу пихаем в него (в block) заголовок в h2 и создаём список, чтобы потом не мучиться. То есть делаем так:

<div id="sidebar">
<div class="block">
<h2>Категории</h2>
<ul>
<li>Машинки</li>
<li>Игрушки</li>
<li>Самолетики</li>
</ul>
</div>
  </div>


Сразу применяем стили:

#sidebar{
    margin-top:33px; /*Отступ сверху 33px*/
    width:340px; /*Ширина 340px (чуть меньше чем у нас в макете, так лучше выглядит) */
    float:right; /*Выравниваем по правому краю*/
}


Получается вот такая ересь:

[img]http://s017.radikal.ru/i420/1211/40/bd8fdc67a6e1.jpg[/img]

Но зато всё выровнялось, так как надо. Перейдем к самому блоку в сайдбаре, у которого стиль “block". Применяем к нему следующие стили:

#sidebar .block{
border:1px solid; /*Делаем рамку*/
background:#ccfbff; /*Задаём цвет фона*/
border-radius:29px 29px 0 0;  /*Округляем рамку сверху на 29px*/
-moz-border-radius:29px 29px 0 0;/*Округляем рамку для Mozilla*/
-webkit-border-radius:29px 29px 0 0; /* Округляем рамку для Safari и Chrome*/
-khtml-border-radius:29px 29px 0 0; /* Округляем рамку для Linux браузеров */
behavior:url(border-radius.htc);/*Округляем рамку для IE*/
margin-bottom:20px; /*Делаем снизу отступ от блока, чтобы блок ниже не сливался*/
}


[img]http://s017.radikal.ru/i409/1211/27/b82f86cf12cf.jpg[/img]

Вооо, уже лучше!

Сайдбар. Блок с категориями. Заголовок

Перейдем к заголовку блока. Смотрим как у нас в макете и переделываем в файл стилей. Попробуйте сами без моей помощи. Подскажу только, что размер шрифта 24px и текст по центру выравнивается кодом text-align:center;

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

#sidebar .block h2{
    border-bottom:1px solid; /*Делаем рамку*/
    font-family:Tahoma; /*Задаём шрифт Tahoma*/
    font-weight:normal; /*Делаем шрифт нормальным, а не жирным*/
    font-size:24px; /*Размер шрифта 24px*/
    text-decoration:underline; /*Делаем подчеркивание*/
    padding:5px; /*Отступы со всех стороны в 5px*/
    background:#fff3e8; /*Задаём цвет фона*/
    border-radius:29px 29px 0 0; /*Округляем фон сверху*/
    -moz-border-radius:29px 29px 0 0;/*Округляем для Mozilla*/
    -webkit-border-radius:29px 29px 0 0; /* Округляем для Safari и Chrome*/
    -khtml-border-radius:29px 29px 0 0; /* Округляем для Linux браузеров */
    behavior:url(border-radius.htc);/*Округляем рамку для IE*/
    text-align:center; /*Выравниваем текст по центру*/
}


Вот это уже другое дело!

[img]http://i031.radikal.ru/1211/b4/6e0f89ed21d1.jpg[/img]

Сайдбар. Блок с категориями. Список

Осталось поработать со списком. Сначала каждый пункт списка нужно сделать ссылкой. Вот так:

<ul>
<li><a href="#">Машинки</a></li>
<li><a href="#">Игрушки</a></li>
<li><a href="#">Самолетики</a></li>
</ul>


Теперь нужно задать фон, отступы, шрифт и сделать, чтобы вместо точек (слева каждого пункта) была картинка, в нашем случае галочка.
Вырезаем ее, как и раньше, инструментом "Рамка" и называем li.png или берём отсюда [img]http://s017.radikal.ru/i436/1211/30/99862f84d5d7.png[/img] , закидываем её в папку img.
Добавляется картинка этим кодом:
list-style-image: url(img/li.png);


Также работаем со стилем ссылки меняем цвет, также можно сделать, чтобы наводя на ссылку, она меняла цвет на оранжевый.

[img]http://s019.radikal.ru/i615/1211/c7/0eb2401dfc7a.jpg[/img]

В файле стилей должно получиться следующее:

#sidebar ul{ /*Стиль для списка*/
    font-family:Arial; /*Задаём шрифт Arial*/
    padding:15px 0 15px 40px; /*Делаем отступ сверху 15px, справа 0, снизу 15px и слева 40px*/
}
#sidebar ul li{ /*Стиль для пункта списка*/
    list-style-image:url(img/li.png); /*Задаём картинку маркировки пункта*/
    padding-bottom:5px; /*Делаем нижний отступ 5px от каждого пункта*/
}
#sidebar ul li a{ /*Стиль для ссылки пункта*/
    color:#1647ff; /*Цвет ссылки*/
}
#sidebar ul li a:hover{ /*Стиль ссылки пункта при наведенииl*/
    color:#f89200; /*Цвет ссылки при наведении */
}


Готово!

[img]http://i031.radikal.ru/1211/08/d410c94c2aff.jpg[/img]

Сайдбар. Блок со счетчиком.

Осталось добавить второй блок под названием Счетчики. Для этого просто скопируйте блок с категориями и вставьте его ниже. Во втором блоке поменяйте заголовок и сотрите списки. Должна получиться вот такая конструкция:

<div id="sidebar">
<div class="block">
<h2>Категории</h2>
<ul>
<li><a href="#">Машинки</a></li>
<li><a href="#">Игрушки</a></li>
<li><a href="#">Самолетики</a></li>
</ul>
</div>
<div class="block">
<h2>Счетчики</h2>
</div>
</div>


Теперь вырежем картинку счетчика из макета, назовём её count.png и запихаем в папку img или возьмём отсюда [img]http://s43.radikal.ru/i101/1211/34/2abc8ebbb22f.png[/img]

Создадим во втором блоке, после заголовка, тег <img class="count" src="img/count.png" /> и наша картинка появится во всей красе. Посмотрим, что у нас получилось:

<div class="block">
<h2>Счетчики</h2>
<img class="count" src="img/count.png" />
</div>


[img]http://s019.radikal.ru/i619/1211/78/a5bbb651a4b9.jpg[/img]

Осталось применить стиль.

#sidebar .count{
padding:20px; /*Отступ со всех сторон */
}


Сайдбар готов!

[img]http://s60.radikal.ru/i167/1211/ae/102dad883dca.jpg[/img]

Осталось совсем немного!

Подвал (Footer, футер)

Перейдём к footer (подвалу, футеру). С ним не должно возникнуть никаких проблем. Но для того чтобы прилепить подвал к низу, сначала создаём пустой блок с классом "empty":

<div class="empty"></div>


Задаём ему стиль:

.empty{
    clear:both;/*Отменяем обтекание слева и справа */
}


Создаём блок с id "footer", а в нём span с классом "copy" (в нём будет копирайт) и ссылку с классом “site". То есть должно получиться так:

<div id="footer">
<span class="copy">Copyright 2012 ©</span>
<a class="site" href="#">http://ясайт.ру</a>
</div>


Свойств будет много, но каждое я поясню.

#footer{
    margin-top:50px; /*Делаем отступ сверху */
    border-radius:20px; /*Округляем все углы */
    -moz-border-radius:20px;/*Округляем рамку для Mozilla*/
    -webkit-border-radius:20px; /* Округляем рамку для Safari и Chrome*/
    -khtml-border-radius:20px; /* Округляем рамку для Linux браузеров */
    behavior:url(border-radius.htc);/*Округляем рамку для IE*/
    border:1px solid; /*Делаем рамку */
    background:#edfffe; /*Задаём фон */
    width:1000px; /*Ширина футера */
    height:100px; /*Высота футера */
}
#footer .copy{
    font-family:Tahoma; /*Задаём шрифт */
    Font-size:45px; /*Делаем огромный шрифт */
    margin:20px; /*Отступ со всех сторон */
    float:left; /*Выравниваем по левому краю */
}
#footer .site{
    color:#000fd1; /*Цвет шрифта */
    float: right; /*Выравниваем по правому краю */
    font-family: Tahoma; /* Задаём шрифт */
    font-size: 45px; /* Делаем огромный шрифт */
    margin: 20px; /*Отступ со всех сторон */
}
#footer a:hover{
    color:#f89200; /*Цвет шрифта при наведении на ссылку */
}


Если вы всё сделали правильно, то футер должен быть внизу целый и невредимый. Вот такой вот:

[img]http://s019.radikal.ru/i608/1211/1f/91af9d9e9413.jpg[/img]

Социальный блок

Всё! Мучения почти закончились! Осталось сделать лишь социальный блок в шапке.
Вернёмся к блоку "header" и между блоком "title" и "logo" создаём div с классом "social". Вот так:

<div id="header">

<div class="title">
Я название сайта
</div>
<div class="social">
</div>
<div class="logo">
<a href="/"><img src="img/logo.png" /></a>
</div>

</div>



Поработаем с этим блоком в файле стилей.

Сделаем ему белый фон. Каким свойством задаётся фон??? 10 секунд на размышление...1…2…3..4….5…6…7…8..9…10.! Правильно! Background.
Зададим ширину и высоту. Это вы тоже должны знать. Ширина – width. Высота – height.
Где находится блок с социальными кнопками в макете? Правильно, справа! Значит, задаём свойство float:right;
Мы видим рамку, а это будет свойство border, эта рамка закруглена, значит, еще будет и border-radius.

Теперь перейдём к новому свойству, который добавляет тень блоку – это свойство box-shadow. Оно работает таким образом:

[img]http://s019.radikal.ru/i619/1211/1b/451e0d9954f5.jpg[/img]

Подробнее можете почитать на сайте http://htmlbook.ru,как я и говорил в самом начале, там есть описание всех свойств.

Если хотите сделать тень тексту, вместо box-shadow используйте код: text-shadow.


Потом делаем отступы. Так как нижний отступ у меня не делался, я применил минусовой отступ от верха (если у вас тоже что-то не получается, ищите другие способы исполнить задуманное), т.е. так:

margin: -43px 16px 0 0;


Так что знайте, если нижний отступ не делается, можно применить этот способ.

Стиль получился таким:

.social{
    background:#fff; /*Фон*/
    width:215px; /*Ширина*/
    height:206px; /*Высота*/
    float:right; /*Выравниваем по правому краю*/
    border:1px solid; /*Рамка*/
    border-radius:20px; /*Округление рамки*/
    -moz-border-radius:20px;/*Округляем рамку для Mozilla*/
    -webkit-border-radius:20px; /* Округляем рамку для Safari и Chrome*/
    -khtml-border-radius:20px; /* Округляем рамку для Linux браузеров */
    behavior:url(border-radius.htc);/*Округляем рамку для IE*/
    box-shadow:5px 5px 5px #000; /*Тень*/
    margin: -43px 16px 0 0; /*Отступы*/
}



Блок должен выглядеть так:

[img]http://s61.radikal.ru/i173/1211/8a/195011af682f.jpg[/img]

Потом берём эти картинки и закидываем их в папку img. Можете вырезать их из макета.

[img]http://s017.radikal.ru/i408/1211/95/7cf765a2f5c2.png[/img][img]http://s018.radikal.ru/i527/1211/0e/2a3843a05dff.gif[/img][img]http://s018.radikal.ru/i524/1211/06/ef6ad9729120.png[/img][img]http://s017.radikal.ru/i434/1211/65/fd70c204e21f.png[/img]

И вставляем эти картинки в теге <img src="путь к картинке"> и делаем их ссылкой <a href="#">

Должно получиться так:

<div class="social">
<a href="#"><img src="img/facebook.png" /></a>
<a href="#"><img src="img/rss.gif" /></a>
<a href="#"><img src="img/twitter.png" /></a>
<a href="#"><img src="img/vk.png" /></a>
</div>



Не обращайте внимания, что получилось некрасиво, ведь мы еще не написали стиль.
А стиль следующий:

.social img{
    width:64px; /*Ширина картинки*/
    padding:20px; /*Отступ*/
}



Вот и всё. Социальный блок готов:

[img]http://s16.radikal.ru/i190/1211/9a/dd5cbf9573e4.jpg[/img]

Вот мы и закончили верстку нашего шаблона. Он должен получиться почти такой же, как и в макете, но если есть небольшие отличия, то это не страшно. Мы же только учимся)

Добавление страницы полной статьи.

Нам осталось только добавить страницу полной статьи – 1.html. Для этого копируем весь код из файла index.html и вставляем его в 1.html. Удаляем из блока "content" блок "post"(любой) и добавляем больше текста в блок "text". В блоке "content" у меня получился следующий код:

<div id="content">
    <div class="post">
    <h1><a href="1.html">Я рыбный заголовок</a></h1>
        <div class="dc">
            <span class="date">30.10.12 |</span>
            <span class="cat">Категория: Уха</span>
        </div>
<img class="image" src="img/image.png" />
    <div class="text">Версии происхождения названия блюда в основном сводятся к следующей: слово
        «уха» происходит от древнего индоевропейского корня *jus, означавшему «отвар» (
        «жидкость»). От данного корня образовалось слово jucha, которое, утратив начальны
        й j, дало слово «уха». Подтверждением тому служат примеры в других языках, берущ
        ие своё начало от корня jusa. В украинском и белорусском языках — юшка, тот же к
        орень имеют древнепрусское слово juse (суп с мясом), санскритское yus- (бульон),
        латинское ius (бульон, сок), сербо-хорватское јуха(похлёбка), словенское jucha (
        суп), чешское jicha (соус).</p>
        <p>Уха является одним из древнейших блюд русской кухни, но на момент возникновения (а его установить не
        возможно), оно не являлось характерным и уникальным блюдом русской кухни, каким является сейчас.
        По известным источникам ухой в XI—XII веках называли любой суп, из чего бы он сделан не был; более
        того, некоторые виды блюда представляли собой что-то подобное современному компоту.</p>
    <ul>
    Разновидности ухи по технологии
        <li>Сборная уха</li>
        <li>Опеканная уха</li>
        <li>Вялая уха</li>
        <li>Пластовая уха</li>
        <li>Сладкая уха</li>
        <li>Уха с раками</li>
    </ul>
    </div>
    </div>
</div>


Как мы видим, список отображается не очень красиво:

[img]http://s018.radikal.ru/i502/1211/c3/24def443e7bf.jpg[/img]

Поэтому мы добавляем стили к спискам и делаем отступ абзацев:

.post ul, ol{ /*Стиль для списков*/
    padding:10px; /*Отступ со всех сторон*/
}
.post li{ /*Стиль для пунктов*/
    padding-bottom:5px; /*Отступ снизу*/
}
.post li:first-child{ /*Стиль для первого пункта*/
    padding-top:10px; /*Отступ сверху*/
}
.post p { /*Стиль для абзацев*/
    padding-bottom:20px; /*Отступ снизу 20px*/
}



Теперь полная статья выглядит так:

[img]http://s53.radikal.ru/i140/1211/9f/3ba20d6e0863.jpg[/img]

А шаблон главной страницы получился вот такой:

[img]http://s018.radikal.ru/i524/1211/0f/b6ea10f617b0.jpg[/img]

Вот мы и закончили верстать шаблон из макета в HTML код.

Надеюсь, всем было понятно, что да как устроено. Если что-то не получается, отписывайте в комментарии. Чем смогу - помогу.

Спасибо, до новых встреч!

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarEnek_mw
WarEnek_mw
сообщение 19.11.2012, 10:38; Ответить: WarEnek_mw
Сообщение #2


Ужасно выглядит. Даже врагу бы такой сайт не сделал.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kranopodem
kranopodem
Topic Starter сообщение 19.11.2012, 20:53; Ответить: kranopodem
Сообщение #3


Извините, но статья называется "Вёрстка шаблона", а не "Как создать самый красивый в мире шаблон"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarEnek_mw
WarEnek_mw
сообщение 20.11.2012, 15:00; Ответить: WarEnek_mw
Сообщение #4


Извините, но статья называется "Html верстка на конкретном примере", а не "Вёрстка шаблона".
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
swagytagy
swagytagy
сообщение 20.11.2012, 15:34; Ответить: swagytagy
Сообщение #5


То что расписали молодцы . Но вот поддержу
WarEnek

Могли бы взять любой psd из огромного количества в и-нете .
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kranopodem
kranopodem
Topic Starter сообщение 20.11.2012, 19:48; Ответить: kranopodem
Сообщение #6


Извините, но статья называется "Html верстка на конкретном примере", а не "Вёрстка шаблона".

Смысл остается прежним. Внимание в статье уделено верстке, а не созданию красивого дизайна.
[member=swagytagy], Да, в этом я промахнулся. Не додумал немного =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vervekin_mw
vervekin_mw
сообщение 20.11.2012, 22:25; Ответить: vervekin_mw
Сообщение #7


Статья полезная. Взяв за основу этот алгоритм, можно создать простую страницу и редактировать ее уже как вздумается. Вот только, если не ошибаюсь, скругления с использованием border-radius не всеми браузерами корректно отображается?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kranopodem
kranopodem
Topic Starter сообщение 22.11.2012, 20:37; Ответить: kranopodem
Сообщение #8


Спасибо за наводку) Проверил в Хроме, Мозиле, Опере - всё работало, а я забыл старые версии и всеми "любимый" IE. Сейчас исправил ошибки с border-radius и ссылками-картинками в IE.
Еще раз спасибо)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isvetlichniy
isvetlichniy
сообщение 29.11.2012, 0:11; Ответить: isvetlichniy
Сообщение #9


border-radius не всеми браузерами корректно отображается

В Осле 7-м и 8-м работать не будет

margin: -43px 16px 0 0;


А это не будет работать в хроме и сафари
Я весь код Ваш не пересматривал, возможно еще есть где то недочеты

Не сочтите за наглость или за что то еще мои исправления. Просто в моем понимании хорошая верстка прежде всего - кроссбраузерная
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Upgoing_mw
Upgoing_mw
сообщение 4.12.2012, 23:52; Ответить: Upgoing_mw
Сообщение #10


Не думаю что стоит цепляться по поводу простоты шаблона, ведь если бы автор взял за основу какой-нибудь шаблон с наворотами, то статья получилась бы куда длинней. Мне статья понравилась, для новичков, ни черта не смыслящих в нтмл и создании шаблонов это вообще самое то, что нужно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91392 11.3.2024, 19:59
автор: anchous
Горячая тема (нет новых ответов) Вёрстка HTML-писем
29 Vampler 28684 3.3.2024, 11:42
автор: Vampler
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17104 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3248 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3242 19.12.2023, 18:55
автор: CULA


 



RSS Текстовая версия Сейчас: 19.3.2024, 7:27
Дизайн