Основы CSS и HTML. Блочная верстка
Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.
Верстка сайта – ремесло для посвященных
Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:
Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.
В процессе верстки кодом html происходит разбивка «скелета » сайта на части. А с помощью css (каскадных таблиц стилей ) задаются размеры его «костей », цвет и расположение.
Различают несколько видов верстки:
I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег
< div class = "header" > < / div > < div class = "sidebar" > < / div > < div class = "content" > < / div > < div class = "footer" > < / div > |
Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.
Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.
Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету id имеет больше привилегий, чем class .
Это я поясню в видео шпаргалке ниже.
У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой . selector
Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.
Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.
Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:
Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)
< ! DOCTYPE HTML > < html > < head > < meta charset = "utf-8" > < title > Примериспользованияdiv тегов< / title >
< / head > |
Верстка веб сайта осуществляется с применением двух основных способов: табличной и блочной div верстки. Блочная верстка более функциональна и предоставляет больше возможностей благодаря использованию CSS.
Как работает блок?
Для выполнения данного типа верстки используются два файла (index.html и style.css ) содержащие код HTML и стилевое оформление сайта соответственно.
В первом файле прописываются непосредственно div -контейнеры, которые являются своеобразным фундаментом для макета, а во втором - описываются стилевые особенности и положение наших div -контейнеров.
Чтобы наблюдать результат совершаемых манипуляций в реальном времени, необходимо ввести в адресной строке браузера: http://URL/test.
Основы верстки
Двухколоночный макет, который мы попытаемся создать, можно схематически отобразить так:
Все элементы нашего макета необходимо поместить в один общий, чтобы иметь возможность задавать параметры всего макеты в целом. Содержимым общего контейнера будут div -ы, которые формируют отдельный блоки. С помощью CSS мы можем настроить следующий параметры: размер, расположение на странице, стили и цвет.
Блочная верстка сайта
Каждый элемент макета необходимо поместить в отдельный «контейнер», с помощью тега div . В файле CSS необходимо добавить свойства элементов, определив параметры внешнего вида и размещения элементов (ширина, высота, шрифт, кегль и так далее).
Для того, чтобы не путаться, необходимо в каждый контейнер вписать название данного блока, выглядеть это будет приблизительно так:
"http://www.w3.org/TR/html4/loose.dtd">Блочная верстка - дубль 2 ШапкаЛевая колонкаСодержимое страницы
После выполненных манипуляций необходимо открыть файл Style.css и описать стили для данных контейнеров. В первую очередь необходимо описать стили для основных тегов Body и Html , обнулив отступы от края страницы, чтобы обеспечить кроссбраузерную совместимость:
body, html {
margin:0px;
padding:0px;
}
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}
Чтобы получить более подробный мастер-класс на тему того, как сверстать сайт на основе div , вы можете просмотреть следующие видео:
https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI
Была рассмотрена резиновая табличная вёрстка, а в этом уроке будет продемонстрировано создание шаблона для сайта с помощью блоков.
В качестве примера будет сделана фиксированная (жёсткая) блочная вёрстка – то есть при изменении размеров окна веб-браузера сайт будет сохранять свои размеры. Шаблон будет иметь: шапку; блок для контента; левый блок; и подвал;
Хоть выше и было названо 4 блока – на самом деле их будет больше. Для того что бы технология блочной вёрстки была понятна – рассмотрим каждый блок и идентификатор применяемый к нему по отдельности:
#main_pole { … } () – внутри этого блока находится вся конструкция сайта. С помощью стилей применяемых к нему определяется положение сайта относительно окна веб-браузера, длина шапки и поля с контентом (но не подвала);
#header { … } () – это блок располагается над всеми остальными и равен длине всего сайта. В нём актуально разместить название сайта. С помощью стилей ему можно задать: высоту, цвет отступы и другие параметры;
#middle { … } () – большой блок внутри которого находятся ещё три. С помощью стилей можно задать ширину поля с контентом и отступ от подвала сайта. В нём актуально разместить горизонтальное меню, так как оно будет растянуто в длину всего сайта и находиться над полем для контента и правой колонкой.
В селекторе #middle:after { … } будет три атрибута, значение которых наврятли вам известны:
Сам элемент (свойство) :after – означает, что содержимое блока, к которому применено это свойство будет отображаться после него. То есть если написать вместо:after свойство:before – то подвал сайта "залезет" под шапку поверх других блоков (можете попробовать);
Content: " " - отображать весь написанный контент после этого блока;
Clear: both - задаёт, что с обеих сторон элемента запрещено его обтекание другими элементами;
Display: table – данный атрибут придаёт элементу свойство блочной таблицы;
#container { … } () – разместив что-либо в этом блоке, это будет отображаться поверх всего контента, но на одном уровне с правой колонкой.
#content { … } () – В этом блоке должен располагаться весь основной контент (статьи, таблицы, картинки ссылки и прочее). В селекторе прописан единственный параметр, задающий отступы.
#right_bar { … } () – правая колонка. В селекторе значение параметра margin-left: … должно быть равно ширине (длине) блока.
#footer { … } () – подвал сайта, в котором размещают счётчики и ссылки на обратную связь, службу поддержки и другое. В селекторе значение параметра width: … должно быть равным значению width: … в #main_pole.
Создайте файл div_style.css и поместите в него ниже написанный код. Это файл стилей может являться шаблоном для страниц вашего будущего сайта.
#main_pole { width : 1000 px ; margin : 0 auto ; } #header { height : 140 px ; background : #F0CF63 ; padding : 0 0 0 16 px ; } #middle { width : 100 % ; padding : 0 0 70 px ; height : 1 % ; position : relative ; } #middle :after { content : "" ; clear : both ; display : table ; } #container { width : 100 % ; float : left ; background : White ; } #content { padding : 0 250 px 0 10 px ; } #right_bar { float : left ; width : 240 px ; margin-left : -240 px ; background : #F1FFE4 ; } #footer { width : 1000 px ; margin : -70 px auto 0 ; height : 70 px ; background : #B6E781 ; font-size : 12 px ; } p { margin : 16 px 10 px 20 px ; } a { color : Green ; outline : none ; text-decoration : underline ; } a :hover { text-decoration : none ; }Теперь создайте файл index_test.html . В нём будет размещена структура шаблона, а так же некоторые примеры, демонстрирующие работу стилей. В частности будет размещено горизонтальное выпадающее меню, создание которого рассматривалось в одном из предыдущих уроков . В голове страницы (
) подключаются стили для страницы и меню. <html > <head > <title > Шаблон для сайта - фиксированная блочная вёрсткаtitle > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <link rel="stylesheet" href="page_style.css" type="text/css" /> <link rel="stylesheet" href="drop_vert_menu.css" type="text/css" /> head > <body style="background-color: WhiteSmoke" > <div id="main_pole" > <div id="header" > <br > <br > <h1 style="color: White;" > Название сайтаh1 > div > <div id="middle" > <ul class="menu" > <li > <a href="#" > Главнаяa > li > <li > <a href="#" > Второй пунктa > <ul > <li > <a href="#" > Подпункт 1a > li > <li > <a href="#" > Большое подменю 2a > li > <li > <a href="#" > Подпункт 3a > li > ul > li > <li > <a href="#" > Пункт 3a > li > <li > <a href="#" > Пункт 4a > <ul > <li > <a href="#" > Подпункт 4a > li > <li > <a href="#" > Подпункт 5a > li > <li > <a href="#" > Подпункт 6a > li > <li > <a href="#" > Подпункт 7a > li > <li > <a href="#" > Подпункт 8a > li > ul > li > ul > <div id="container" > <div id="content" > <h2 align="center" > Демонстрация h2 > <p > Текст между тегами <b > b > , для которых прописаны стилевые параметры.p > <i > Наклонный текст между тегами <b > b > , для которых стили не прописаны.i > <br > <br > <a href="#" > Ссылка зелёного цветаa > <br > <br > <big > Большой текст без применения стилей.big > <br > <br > <p > Контент заключённый между тегов , в котором уже с другими отступами отображаются: <br > <br > <i > Наклонный текст между тегами .i > <br > <br > <a href="#" > Ссылка зелёного цветаa > <br > <br > <big > Большой текст между тегов .big > <br > <br > <div style="height:78px; width:512px; margin: auto; background-color:#EDEDED; border-left:4px solid #8B8B8B;" align="center" > <q > Целью школы всегда должно быть воспитание гармоничной личности, а не специалиста.q > <p align="right" > <sub > А. Эйнштейнsub > p > div > p > div > div > <div id="right_bar" > <h4 align="center" > Новостная колонкаh4 > <table align="center" width="230" border="1" cellspacing="2" cellpadding="8" > <tr > <td > Первая новостьtd > tr > <tr > <td > Вторая новостьtd > tr > <tr > <td > Интересные событияtd > tr > <tr > <td > Архив новостейtd > tr > table > <br > <br > <p > Это правая колонка светлозелёного цветаp > div > div > <div id="footer" > <br > <b > Тут могeт быть размещены счётчикиb > div > div > body > html >
Вы можете и сами дописать необходимые стилевые атрибуты для блоков, опираясь на информацию изложенную в уроках по CSS и HTML .
Таким образом можно сделать простой движок для своего сайта, если каждый из блоков поместить в отдельный файл и подключать его с помощью PHP – Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).
Загрузка...