Как сделать блок в html и умело научиться размещать его на своей web-странице. Блочная модель
10.11.14
58.7K
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html
кода и таблиц css
скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка «скелета
» сайта на части. А с помощью css
(каскадных таблиц стилей
) задаются размеры его «костей
», цвет и расположение.
Различают несколько видов верстки:
I. Табличная
– ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег
и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:
Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.
Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.
Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.
Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.
II. Блочная
– в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:
Отделение стиля элементов от кода html
;
Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
Лучшая индексация поисковиками;
Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок
).
Основным недостатком блочной верстки является некая «двусмысленность
» понимания ее кода различными браузерами. Поэтому часто html
страницы приходится «доводить
» путем использования специальных хаков.
С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).
Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.
Основным элементом, применяемым в блочной верстке, является тег
. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html
в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css
:
Как происходит блочная верстка?
Перед началом верстки готовый psd
макет сайта в графическом редакторе разрезают на блоки (слои
). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:
Для примера возьмем вот такой макет сайта, созданный в Photoshop
. Сначала в текстовом редакторе с помощью div
задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id
. Получается такая структура:
Затем к готовой структуре сайта на html
строкой прикрепляем файл css
. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.
Более подробно ознакомиться со всеми свойствами css можно из технической документации к языку.
Вот так наш пример блочной верстки сайта выглядит в окне браузера.
Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.
Позиционирование по умолчанию (static)
Если вы не указали position у блочного элемента или указали static , что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left , top , right и bottom .
Абсолютное позиционирование (absolute)
При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left , top , right и bottom . Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left , то же самое касается top и bottom , в которых больший приоритет имеет расстояние top . Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
Фиксированное позиционирование (fixed)
Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left , top , right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).
Относительное позиционирование (relative)
Относительное позиционирование задаётся с помощью задания расстояний left , top , right и bottom относительно его текущего положения.
Однако такое положение блока можно создать и с помощью свойства margin (отступы).
Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.
Рассмотрим варианты:
Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия
о HTML и CSS
. Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.
Шаблон вебсайта мы будем делать с помощью блочной верстки
, использую тег - «DIV
».
Шаг 1 - Разметка веб страницы с помощью тегов HTML
Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.
HTML
- это язык разметки гипертекста
. С его помощью создается структура
веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".
Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:
). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.
Каскадные таблицы стилей
CSS
применяются позже. Они необходимы для того, чтобы разместить содержимое тегов в определенных местах страницы, а также придать этому содержимому желаемый вид.
Простейшие теги веб страницы это:
Впоследствии, именно между тегами вы будете размещать другие теги для разметки элементов веб страницы.
Важным тегом для структурирования страницы является тег
. Используя его, вы можете делить свою страницу на блоки.
Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS.
Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы:
Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div
:
Как видите, каждому тегу div
мы дали определенный селектор ID
. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.
Существует два вида селекторов
. ID
- используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS
- применятся для обозначения повторяющихся блоков.
Также, мы заключили все блоки внутрь блока "container
". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.
Шаг 2 - прикрепление таблицы стилей CSS
Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.
Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS.
Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:
Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей.
Шаг 3 - задаем стиль
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, для которого вы хотите определить внешний вид придавая ему разнообразные свойства. Свойство задается с помощью различных атрибутов, которые в свою очередь могут принимать разные значения.
Для записи селекторов, кроме тега body
, используются знаки "#
" либо ".
". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор
ID
, второй, соответственно на селктор
CLASS
. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{}
".
#selector {
property:value;
property:value;
property:value;
}
.selector {
property:value;
property:value;
property:value;
}
У нас имеются следующие селекторы:
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; }
На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content
.
Вот его код HTML:
#clear { clear:both; }
А между тегами head
записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:
Финальный код HTML:
Основы HTML и 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;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Надеемся, данный урок позволил вам понять основы работы с HTML и CSS
.
Вот как это выглядит в браузере:
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена . Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега
, то концепция блочной вёрстки основана на активном использовании универсальных тегов
, внутрь которых помещается содержимое, включая другие теги.
Блочная вёрстка лишена недостатков табличной - поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки
, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как
- это таблица, которую нужно использовать для отображения табличных данных и не более того.
Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок
: верх сайта - в первый, меню - во второй, контент - в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков
с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом , или как минимум в контейнере
