HTML - Урок 6: Блочная верстка, div-блоки (Часть 2)

HTML - Урок 6: Блочная верстка, div-блоки (Часть 2)

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

Итак, я уже рассказывал про "тело" сайта, блоки DIV, а также про то, как подключить CSS стили в шаблоне. Далее я покажу примерный макет нашего будущего HTML шаблона:

<html>
<head>
	-- здесь кодировки, название и ключевые слова и другие элементы сайта --
</head>
<body>
 <div id="wrapper">
   <div id="header">
   -- здесь располагаются шапка сайта, гдавное меню, логотипы, баннеры --    
   </div><!-- end #header-->
 <div id="middle">
   <div id="container">
	 <div id="content">
                         -- здесь располагается все содержимое страницы --          
     </div><!-- #content-->
 </div><!-- #container-->
 <div class="sidebar" id="sideLeft" align="center">
                                         -- левый сайдбар --
 </div><!-- end.sidebar#sideLeft -->
 </div><!--end #middle-->
</div><!--end #wrapper -->
   <div id="footer">
                                      -- здесь блок футера --     
   </div><!--end #footer -->
</body>
</html>


Код шаблона взят с сайта kapon.com.ua.

Скачать: makethtml.zip

Итак, это уже готовый шаблон, правда пока ещё не очень функциональный. На основе этого макета мы и будем строить наш шаблон в будущем.
Рассказывать подробно про строение макета я не буду, так как комментарии в нем уже есть.

Как оформить блок DIV через CSS? На этот вопрос я отвечу дальше.

Итак, Вы из прошлого урока научились давать имена div блокам. Возьмем блок из данного шаблона, например "header". Также я говорил про подключение css стилей в шаблоне в уроке 3. У нас есть файл css, шаблон и блок - пора приступать к оформлению блока!

Для того, чтобы оформить блок с селектором ID нужно написать в файле стилей знак # (решетка), название селектора и открыть фигурную скобку. После того, написать нужные стили и закрыть скобки.

Получится примерно так:

#header {
blackground: red;
color: green;
}


Мы сделали фон блока красным, а текст зеленым.

А как оформить блок с селектором "class"? В макете, представленном выше нет блока с class, поэтому предлагаю оформить следующий блок из прошлого урока:
<div class="name2">


Для оформления блока с селектором class нужно написать точку, название блока и в фигурных скобочках нужные стили.

Пример:

 
.name2 {
color: #000;
size: 14 px;
}

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

Что ж, на сегодня всё. Помните, что создание шаблона html - не такое трудное дело, как кажется.
Автор: Zed от 2013-10-12 14:52:23   Просмотров: 3209

Теги: html уроки урок DIV верстка