Блочная верстка сайта (верстка с помощью DIV и CSS)

26.02.2010. CSS, HTML, Дизайн

2

Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в Photoshop, GIMP или любом другом графическом редакторе и только после этого с макета дизайн переносят на html и css (иногда на flash, но у нас не тот случай). Вот этот перенос и называется версткой сайта, о которой я сегодня начну рассказывать.

Я расскажу, как верстать шаблон на примере простого макета:

Как видите, наш макет ужасно приметивен. Он состоит из двух сайдбаром, шапки, подвала и места под текст.

Теперь начнем его верстать.

Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"

В результате у вас должен быть примерно такой html-файл:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="main">
<div id="header">
Шапка
</div>
<div id="sidebar1">
Сайдбар 1
</div>
<div id="sidebar2">
Сайдбар 2
</div>
<div id="text">
Это будет центральный блок с текстом
</div>
 
<div class="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</div>
 
</body>
</html>

Сохраняем файл и открываем наш файл стилей (style.css)
В нем первым делом создаем пустые описания наших классов и id:

#main
{
 
}
 
#header
{
 
}
 
#text
{
 
}
 
#sidebar1
{
}
 
#sidebar2
{
 
}
 
#footer
{
 
}
 
.clear
{
 
}

Теперь начнем все это заполнять.
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}

У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:

#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}

Сохраняем CSS и открываем html-файл в каком-нибудь браузере. Все, что у нас написано, должно быть выравнено по центру.

Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:

#header

{

background:green;

height:300px;

width:100% //шапка занимает все 980px в ширину

}

Установим наш блок с текстом по центру:

#text

{

background:#999; //серый фон

position:relative; //опять выравниеваем по центру

margin:0 auto;

width:600px;

}

Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:

#sidebar1

{

width:190px;

background:yellow;

float:left;

}

#sidebar1

{

width:190px;

background:yellow;

float:right;

}

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

.clear

{

clear:both;

}

Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.

Теперь подвал:

#footer

{

background:red;

width:100%;

height:100px;

}

В результате должна получится вот такая css:

body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
#main
{
position:relative;
margin:0 auto;
width:980px;
 
}
 
#header
{
height:300px;
background:green;
}
 
#text
{
 
margin:0 auto;
background:#999;
width:600px;
 
}
 
#sidebar1
 
{
 
width:190px;
 
background:yellow;
float:left;
 
}
 
#sidebar2
 
{
 
width:190px;
 
background:yellow;
 
float:right;
 
}
 
#footer
{
background:red;
 
width:100%;
 
height:100px;
}
 
.clear
{
clear:both;
}

Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.

Обновился дизайн!

23.02.2010. Новости

2

Обновился дизайн. Пока что имеются баги. Всем пользователям Internet Exporer рекомендую сменить браузер на Mozilla Firefox или Google Chrome

Что такое CSS?

8.02.2010. CSS, Дизайн

0

Что такое CSS?

CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.

Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.

Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:

селектор селектор2 селектор3

{

//стиль

}

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

В стеле описываются свойства и их значения. Синтаксис выглядит так:

свойство: значение;

Например, запись color:red задает свойству "цвет текста" значение красный.

Еще немного про селекторы:

Селектор, означающий имя тега пишется также, как и имя тега:

Например, селектор тега <a> пишется a:

a

{

color:green;

}

Здесь, для текста внутри тега <a> устанавливается зеленый цвет.

Селектор-класс должен начинаться с точки:

.myclass

{

font-size:14pt;

color:#FFF;

}

В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.

Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":

<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>

Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:

#myid

{

background:grey; //установка фона в серый цвет.

}

-----------------------------------

<div id="myid">

Текст с примененным стилем myid. Этот текст будет на сером фоне

</div>e

Способы подключения CSS к HTML:

Подключить CSS к HTML-файлу можно несколькими способами:

  1. Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
  2. Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:

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

  3. Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:

    <span style="color:green background: black">зеленый текст на черном фоне</span>

Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз

P.S. Нужен реферат? Вот вам рефераты на заказ.

Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги