Верстаем дизайн для блога. Часть 1



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

В чем верстать выбор лично ваш, я предпочитаю NetBeans.

Для начала создадим 2 файла «index.html» и «style.css», а также папку «images» в ней мы будем хранить картинки для шаблона.

В файл «index.html» добавим следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Дизайн блога</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

</body>
</html>

А в файл «style.css»:

* {
	margin: 0;
	padding: 0;
}
html {height: 100%}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {margin: 0 0 18px}
img {
	border: none;
}
input {vertical-align: middle}

Получим, пустую страницу с заголовком «Дизайн блога».

Первое что мы сделаем это фон нашей будущей страницы. Для этого из нашего шаблона вырежем кусочек фона 3х3 пикселя:

bg_verstka

Сохраним его в папке «images» под именем «bg.gif» и добавляем в файле «style.css» в теге «body» следующий код «backgroundimage: url(‘images/bg.gif‘);» получаем:

body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;

    background-image: url('images/bg.gif');
}

На данный момент мы имеем страницу, залитую нашим паттерном для фона.

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

В файле index.html добавим следующий код:

<div id = "wrapper">

<div id="heightFixer"></div>

<!--      Шапка         -->
<div id="header">
Шапка
</div>

<!--      Контент         -->
<div id="content">
Контент
</div>

<div style="clear:both; height:1px; width:5px; float:right;"></div>

<!--      Футер         -->
<div id="footer">
Футер
</div>

</div>

Дивы для шапки, контента и футера и небольшой трюк «<div styleclear:both; height:1px; width:5px; float:right;»></div>», что бы футер располагался там где нужно.

Теперь добавим стили, в «style.css» пишем следующие:


#wrapper
{
    width: 1000px;
	margin: 0 auto;
	height: 100%;

    background: #fff;

    text-align: left;
}

#heightFixer
{
    float:right;
    height:100%;
    width:1px;
    margin-right:-5px;
    margin-bottom:-100px;
}

/*     Шапка        */

#header
{
  background: #FFE680;
}
/*     Контент       */
#content
{
    padding-bottom:100px;
}

/*     Футер        */
#footer
{
   clear:both; 
   height:99px;

   background: #BFF08E;
}

Получаем следующие:

razmetka_bez_sidebar

Теперь добавим сайдбар примерно в 1\3 ширины шаблона. Для этого в файле «index.html» в теге «content» добавляем:


<div id="main">Контент</div>
<div id="sidebar">Сайдбар</div>

<div style="clear:both; float:right;"></div>

И в стилях:


  #main
 {
       float: left;
 }
#sidebar
{
        float: right;
        width: 33%;
}

/* Только для IE */
* html #footer
{
	height:82px;
}

razmetka_s_sidebarom

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

shadow_r

shadow_l

И сохраняем их в папке «images» под именами «shadow_l. gif» и «shadow_r.gif» соответственно. Далее добавляем в файл «index.html» после «<div id=”wrapper”>» следующие строки:


<div id="shadow_r">
<div id="shadow_l">

<!— /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:»»; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:»Times New Roman»; mso-fareast-font-family:»Times New Roman»;} @page Section1 {size:612.0pt 792.0pt; margin:2.0cm 42.5pt 2.0cm 3.0cm; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} —>

И конечно закрываем теги после:


<div id="footer">
Футер
</div>

Добавляем:


</div>
</div>

В итоге код «index.html» выглядит следующим образом:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Дизайн блога</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id = "wrapper">

<div id="shadow_r">
<div id="shadow_l">

<div id="heightFixer"></div>

<!--      Шапка         -->
<div id="header">
Шапка
</div>

<!--      Контент         -->
<div id="content">

    <div id="main">Контент</div>
    <div id="sidebar">Сайдбар</div>

<div style="clear:both; float:right;"></div>

</div>

<div style="clear:both; height:1px; width:5px; float:right;"></div>

<!--      Футер         -->
<div id="footer">
Футер
</div>

</div>
</div>

</div>


</body>

</html>

Осталось добавить стили.

/* Тени */

#shadow_r
{
    padding-right: 16px;
    height:100%;
    background:url('images/shadow_r.gif') repeat-y right;
}
#shadow_l
{
    padding-left: 8px;
    height:100%;
    background:url('images/shadow_l.gif') repeat-y left;
}

Файл стилей в итоге выглядит так:


* {
	margin: 0;
	padding: 0;
}
html {height: 100%}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;

    text-align: center;

    background-image: url('images/bg.gif');
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {margin: 0 0 18px}
img {
	border: none;
}
input {vertical-align: middle}

#wrapper
{
    width: 1000px;
	margin: 0 auto;
	height: 100%;

    background: #fff;

    text-align: left;
}

#heightFixer
{
    float:right;
    height:100%;
    width:1px;
    margin-right:-5px;
    margin-bottom:-100px;
}

/*     Шапка        */

#header
{
  background: #FFE680;
}
/*     Контент       */
#content
{
    padding-bottom:100px;
}
    #main
    {
        float: left;
    }
    #sidebar
    {
        float: right;
        width: 33%;
    }

/*     Футер        */
#footer
{
   clear:both;
   height:99px;
   background: #BFF08E;
}
/* Только для IE */
* html #footer
{
	height:82px;
}

/* Тени */

#shadow_r
{
    padding-right: 16px;
    height:100%;
    background:url('images/shadow_r.gif') repeat-y right;
}
#shadow_l
{
    padding-left: 8px;
    height:100%;
    background:url('images/shadow_l.gif') repeat-y left;
}

А шаблон:

razmetka_final

На этом все. В следующем уроке мы сверстаем шапку сайта.

Файлы проекта.



Теги: , , ,

Комментарии

  1. я так понимаю — в конечном итоге получится в ручную сверстанная оболочка с авторским дизом ?

    имхо было бы интересно если полученный дизайн в виде темы можно было накатить на WP — или это планируется в продолжениях ?

    еще бы доходчиво о написаниях плагинов не помешало 🙂

    Reply

  2. Да в итоге будет авторский дизайн на блог.
    На wp как тема планируется, про плагины пока не думал)

    Reply

  3. Целиком и полностью присоединяюсь. Ибо весьма и весьма хороший пост. Даже добавил в закладки. 🙂 Рекомендую для этих целей мемори.ру

    Reply

  4. У вас примеры html-кода видимо распознаются браузером.От это примеров не видно, а дизайн поста поехал во все стороны. Получилось ХЗ что.

    Reply

  5. @jaZZa
    Это из-за плагина для подсветки кода. Спасибо, что сказали, щас должно быть все нормально.

    Reply

  6. Пожалуйста:) Да, теперь все ок, но, при выделении и копировании кода, в буфер попадают также и номера строк. Хотя, наверное, мне, как чайнику, полезно понабивать код ручками.

    Reply

  7. … нашел, можно копировать кнопкой плагина. Придется лениться…

    Reply

Оставить комментарий