ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Стилевое оформление веб-страницы

Стилевое оформление веб-страницы

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

<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Компания АВС</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<header id="page_header">
<header>
<h1>Компания АВС</h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<section id="post">
<header>
<h2>HTML5 и CSS3 как стандарты веб-программирования</h2>
</header>
<article>
<p>Статья создана в<time datetime="2013-03-7T14:00"> марте 2013 в 2:00PM</p>
<aside>
<p>HTML5 предоставляет веб-разработчикам много новых инструментов улучшающих пользовательский интерфейс. В их числе более содержательные теги, средства межсайтовых и межколонных коммуникаций, а также анимация и улучшенная мультимедийная поддержка.</p>
</aside>
<p>Сложилось твердое убеждение, что один год в веб-программировании равен трем годам реального времени. И это действительно так. То, что происходит на наших глазах в области интернет-технологий поражает воображение не только самых консервативных и скептически настроенных членов нашего общества, но и далеко продвинутых пользователей этих технологий.
<p>Еще совсем недавно HTML5 и CSS3 казались делом будущего, но уже сегодня веб-разработчики вовсю используют эти технологии в своей работе. В этом во многом способствуют создатели веб-браузеров (Chrome, Safari, Firefox и Opera) реализовавшие часть этих спецификаций.
Вполне понятно, что технологии HTML5 и CSS3 закладывают основу следующего поколения веб-приложений. Сайты, созданные с использованием этих технологий, более просты как в разработке, так и в сопровождении и что не менее важно больше нравятся пользователям. В HTML5 появились новые элементы для определения структуры сайта и встроенного контента, которые избавляют от необходимости использовать дополнительную разметку и плагины. CSS3 предоставляет расширенные селекторы, графические усовершенствования, улучшенную поддержку работы со шрифтами.
И так HTML5 и CSS3 — это следующее поколение постоянно используемых технологий, созданное для упрощения работы и удобства тех, кто повсеместно занимается разработкой веб-приложений.</p>
<footer>
<p>Комментарии:</p>
</footer>
</article>
</section>
<section id="sidebar">
<nav>
<h4>Архив</h4>
<ul>
<li><a href="#">Январь</a></li>
<li><a href="#">Февраль</a></li>
<li><a href="#">Март</a></li>
<li><a href="#">Апрель</a></li>
<li><a href="#">Май</a></li>
<li><a href="#">Июнь</a></li>
<li><a href="#">Июль</a></li>
<li><a href="#">Август</a></li>
<li><a href="#">Сентябрь</a></li>
<li><a href="#">Окатябрь</a></li>
<li><a href="#">Ноябрь</a></li>
<li><a href="#">Декабрь</a></li>
</ul>
</nav>
</section>
<div class="spacer"></div>
<footer id="page_footer">
<p>© Компания АВС 2013 год</p>
</footer>
</div>
</body>
</html>

Без применения стилей страница выглядела бы довольно скучно. Стилевое оформление к новым элементам применяется точно также как и к тегам div. Для определения стилей мы создали файл style.css и присоединили его к документу HTML, включив ссылку на файл в заголовок.

@charset "utf-8";
/* CSS Document */

body{
width:900px;
margin:0 auto;
background:#f6f6f6;
font-size: 13px;
line-height: 1.231;
font-family: sans-serif;
color: #222;
}
#container{
background:#fff;
position:absolute;
top:0;
}
h1{font-size: 250%}
h2{font-size: 200%}
h3{font-size: 170%}
h4{font-size: 150%}
h2,h3,h4,h5{font-weight:500}
p{padding:0 0.2em 0.2em 0.2em; text-align:justify;}
li{line-height:18px}
#page_header{
display:block;
height:80px;
}
h1{
color:#0000FF;
margin:10px 0 10px 10px;
}
#page_header ul {
margin:5px 0 5px -30px;
display: block;
}
#page_header ul li{
list-style-type:none;
padding:5px 5px;
float:left;
}
#page_header ul li a:hover{
text-decoration:none;
color: #000082;
}
#post{
width:695px;
margin:0 2px 0 0;
padding:4px;
float:left;
}
#post h2{ margin:5px 5px}
#post aside {
float:right;
width:50%;
margin:-15px 0 0 8px;
color:#0000FF;
background:#F7F7F7;
padding:2px;
}
#sidebar{
width:190px;
float:right;
}
#sidebar h4{margin:5px 5px}
#sidebar nav ul{
margin:5px 0 0 2px;
display:block;
}
#sidebar nav ul li {
list-style-type:none;
margin:0 0 0 -40px;
}
#sidebar nav ul li a{text-decoration:none}
#sidebar nav ul li a:hover{text-decoration:underline}
.spacer {clear:both}

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

body{ width:900px;
margin:0 auto;
background:#f6f6f6;
font-size: 13px;
line-height: 1.231;
font-family: sans-serif;
color: #222;
}
h1{font-size: 250%}
h2{font-size: 200%}
h3{font-size: 170%}
h4{font-size: 150%}
h2,h3,h4,h5{font-weight:500}
p{padding:0 0.2em 0.2em 0.2em; text-align:justify;}

Определили фон веб-страницы в целом и фон содержательной ее части.

#container{
background:#fff;
position:absolute;
top:0;
}

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

#page_header ul {
margin:5px 0 5px -30px;
display: block;
}
#page_header ul li{
list-style-type:none;
padding:5px 5px;
float:left;
}
#page_header ul li a:hover{
text-decoration:none;
color: #000082;
}

Раздел post размещаем слева, задаем его ширину. Выноску к статье размещаем справа, выделяем ее фоном и цветом шрифта.

#post{
width:695px;
margin:0 2px 0 0;
padding:4px;
float:left;
}
#post aside {
float:right;
width:50%;
margin:-15px 0 0 8px;
color:#0000FF;
background:#F7F7F7;
padding:2px;
}

Раздел sidebar размещаем справа. Стилевое оформление навигационных ссылок осуществляем преобразование удаления маркеров.

#sidebar{
width:190px;
float:right;
}
#sidebar nav ul{
margin:5px 0 0 2px;
display:block;
}
#sidebar nav ul li {
list-style-type:none;
margin:0 0 0 -40px;
}
#sidebar nav ul li a{text-decoration:none}
#sidebar nav ul li a:hover{text-decoration:underline}

Для предотвращения обтекания самым нижним разделом footer раздела post, создан блок spacer со свойством clear, которому придано значение both.

.spacer {clear:both}