• Страница 1 из 1
  • 1
Форум » Уроки html » Уроки html для новичков » Блочная верстка (div)
Блочная верстка
ReactorДата: Суббота, 28.12.2013, 17:34 | Сообщение # 1
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
Шаблон вебсайта мы будем делать с помощью блочной верстки, использую тег – «DIV».

Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.

HTML - это язык разметки гипертекста. С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например: <div></div>). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Для начало, напишем простые теги нашей страницы

Код
<html>   
   <head>   
           
   <title></title>   
           
   </head>   
           
   <body>   
           
   </body>   
   </html>

Важным тегом для структурирования страницы является тег <div>. Используя его, вы можете делить свою страницу на блоки.

Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS.

Примерно так, выглядит наша страница написанная на div'ax


Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div:

Код
<html>   
   <head>   
           
   <title></title>   
           
   </head>   
           
   <body>   
           
   <div id="container">   
   <div id="header">   
           
   </div>   
           
   <div id="navigation">   
           
   </div>   
           
   <div id="menu">   
           
   </div>   
           
   <div id="content">   
           
   </div>   
           
   <div id="footer">   
           
   </div>   
   </div>   
           
   </body>   
   </html>

Как видите, каждому тегу div мы дали определенный селектор ID. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов. ID - используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS - применятся для обозначения повторяющихся блоков.
Также, мы заключили все блоки внутрь блока "container". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.

Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.

Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS.

Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:


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

Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей.

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

Для записи селекторов, кроме тега body, используются знаки "#" либо ".". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID, второй, соответственно на селктор CLASS. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{}".

У нас имеются следующие селекторы:

Код
body  container   
   header   
   navigation   
   menu   
   content   
   footer

Нам нужно задать им стили.

Свойства и возможные значения CSS:

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).
Свойство color используется для определения цвета текста.

font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size - размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.

width - ширина блока.

height - высота.

float - свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

Пишем в файлике "style.css"

Код
body { background: #f3f2f3;   
color: #000000;   
font-family: Trebuchet MS, Arial, Times New Roman;   
font-size: 12px;   
}   
#container {   
background: #FFFFFF;   
margin: 30px auto;   
width: 900px;   
height: 1000px;   
}   
#header {   
background: #838283;   
height: 200px;   
width: 900px;   
}   
#navigation {   
background: #a2a2a2;   
width: 900px;   
height: 20px;   
}   
#menu {   
background: #333333;   
float: left;   
width: 200px;   
height: 600px;   
}   
#content {   
background: #d2d0d2;   
float: right;   
width: 700px;   
height: 600px;   
}   
#footer {   
background: #838283;   
height: 180px;   
width: 900px;   
}

Сохраняем и открываем в браузере наш "index.html" файл и смотрим результат smile Если что-то не получилось или есть вопросы, задавайте, ответим.

В следующем уроке, я научу Вас HTML 5 и CSS 3.

Сообщение отредактировал Reactor - Суббота, 28.12.2013, 17:35
«Пред. тема | След. тема»
Форум » Уроки html » Уроки html для новичков » Блочная верстка (div)
  • Страница 1 из 1
  • 1
Поиск:
Понравилась тема? Расскажи друзьям...