Блочная верстка сайта (верстка с помощью DIV и CSS)
Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в 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; }
Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.
Обновился дизайн!
Обновился дизайн. Пока что имеются баги. Всем пользователям Internet Exporer рекомендую сменить браузер на Mozilla Firefox или Google Chrome
Что такое CSS?
Что такое 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-файлу можно несколькими способами:
- Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
- Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:
<link rel="stylesheet" type="text/css" href="style.css" />
- Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:
<span style="color:green background: black">зеленый текст на черном фоне</span>
Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз
P.S. Нужен реферат? Вот вам рефераты на заказ.
Loading ...