Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Основные виды layout веб-страниц




Проверка документов на соответствие спецификациям

Использование CSS свойств

Не стоит увлекаться использованием однопиксельного прозрачного изображения, если вам не нужна совместимость документа со старыми браузерами. Вместо этого используйте CSS атрибуты, такие как margin (см. 5.5.9), padding (см. 5.5.10) и text-indent.

Для того чтобы убедиться, что ваш документ соответствует заданной (и описанной в DOCTYPE) спецификации, существует специальный сервис, или так называемый валидатор, предоставленный консорциумом W3C и доступный по адресу: http://validator.w3.org/

W3C валидатор является весьма удобным средством для проверки валидности документов и выявления ошибок. Он четко покажет в какой строке ошибка и на что следует обратить внимание для документов данного типа. Помимо проверки HTML и XHTML это средство также пригодно для оценки документов, имеющих родство с XHTML, таких, как, например XHTML+MathML, XHTML+MathML+SVG, а также SVG.

Проверка CSS файла также возможна, используя соответствующий W3C сервис, доступный по адресу: http://jigsaw.w3.org/css-validator/

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

Все примеры ориентированы на реализацию при <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1. Фиксированный (fixed) - имеет фиксированную ширину контента.


HTML:

<div id="main">

<div id="header">

header

</div>

<div id="leftcolumn">

left column

</div>

<div id="content">

content

</div>

<div id="rightcolumn">

right column

</div>

<div id="footer">

footer

</div>

</div>

 

CSS:

#main {

margin: 0 auto;

width: 710px;

}

#header {

width: 710px;

height: 50px;

}

#footer {

width: 710px;

height: 50px;

clear: both;

}

#leftcolumn {

width: 100px;

float: left;

}

#content {

width: 500px;

float: left;

}

#rightcolumn {

width: 110px;

float: left;

}


 

1.1. Может содержать резиновые шапку (header) и/или подвал (footer).


HTML:

<div id="header">

header

</div>

<div id="main">

<div id="leftcolumn">

left column

</div>

<div id="content">

content

</div>

<div id="rightcolumn">

right column

</div>

</div>

<div id="footer">

footer

</div>

 

CSS:

#main {

margin: 0 auto;

width: 710px;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

#leftcolumn {

width: 100px;

float: left;

}

#content {

width: 500px;

float: left;

}

#rightcolumn {

width: 110px;

float: left;

}


 

 

2. Резиновый (flexible) - имеет динамически меняющуюся ширину контента, зависящую от размера окна браузера.


HTML:

<div id="main">

<div idclass="header">

header

</div>

<div id="content">

content

</div>

<div id="footer">

footer

</div>

</div>

 

CSS:

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

#content {

width: 100%;

float: left;

}


 

 

2.1. Может содержать одну или более колонок фиксированной ширины.


HTML:

<div id="main">

<div id="header">

header

</div>

<div class="content-holder">

<div id="leftcolumn">

left column

</div>

<div id="rightcolumn">

right column

</div>

<div id="content">

content

</div>

</div>

<div id="footer">

footer

</div>

</div>

 

Замечание: Если ширина правой колонки меньше чем отведенное для нее в contentHolder'е место и если между rightcolumn и content должен быть отступ (допустим в 5px), то для IE (как 6-й так и 7-й версий) надо указать левый отступ для rightcolumn.

CSS:

* html #content {

margin-left: 5px;

}

*+html #content {

margin-left: 5px;

}

Замечание: Сокращать до * html.content,*+html.content
нельзя.

 

CSS:

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

.content-holder {

padding: 0 110px 0 100px;

}

#leftcolumn {

width: 100px;

float: left;

display: inline; /* решение проблемы в IE [1]*/

position: relative;

margin-left: -100px;

}

#rightcolumn {
width: 110px;
float: right;
display: inline; /* решение проблемы в IE */
position: relative;
margin-right: -110px;
}

#content {

width: 100%;

float: left;

}


 

2.2 Может содержать одну или более колонок относительной ширины.

 


HTML:

<div id="main">

<div id="header">

header

</div>

<div class="content-holder">

<div id="leftcolumn">

left column

</div>

<div id="rightcolumn">

right column

</div>

<div id="content">

content

</div>

</div>

<div id="footer">

footer

</div>

</div>

 

CSS:

#main {

width: 100%;

}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100%;

height: 50px;

clear: both;

}

.content-holder {

padding: 0 22% 0 20%;

}

#leftcolumn {

width: 20%;

float: left;

display: inline; /* решение проблемы в IE */

position: relative;

margin-left: 20%;

}

#rightcolumn {

width: 22%;

float: right;

display: inline; /* решение проблемы в IE */

position: relative;

margin-right: 22%;

}

#content {

width: 100%;

float: left;

}


Основные элементы страниц: логотип, меню, табы, формы; применение готовых JS решений




Поделиться с друзьями:


Дата добавления: 2014-12-16; Просмотров: 532; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.028 сек.