Контакты:

psdhtml 318-140-781

Документация

Нижеследующая документация носит рекомендательный характер, однако при создании разметки настоятельно рекомендуется ознакомится с основными положениями данного документа. Это позволит не только улучшить код, но и сделать его более понятным так как он будет носить документированный характер. Документ содержит основные правила применяемые к HTML(XHTML) документу и CSS файлам. Содержит подробную информацию о применяемых стандартах кодирования, информирует об используемых версиях HTML(XHTML) и CSS, выбранных уровнях доступности, поддерживаемых браузерах и принципах кодирования. Информирует о структуре страниц и элементах стилей

Правила кодирования (разметки) HTML(XHTML) документа

Декларация DOCTYPE

Виды используемых объявлений DOCTYPE

В зависимости от выбранного DOСTYPE или его отсутствия браузер выбирает режим вывода (стандартный, нестандартный, почти стандартный), если объявление является полным и правильным, то браузер выведет страницу в стандартном режиме. Если объявление DOCTYPE не содержит адрес URL страница будет выведена в нестандартном режиме, то же самое касается если страница не содержит объявления DOCTYPE

Ниже приведены полностью сформированные объявления DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
		
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-scrict.dtd">

Объявление XML

Объявление XML — необязательный компонент файла XML. Оно определяет используемую версию XML и формат кодирования символов. К сожалению, если объявление DOСTYPE не является первым элементом страницы, браузер IE 6 переключается в нестандартный режим, следовательно, если страница должна обрабатывается как документ XML, она не должна содержать объявление XML

<?xml version="1.0" encoding="utf-8"?>

Подключение CSS к HTML(XHTML) странице

Способы подключение CSS файлов к странице

Подключение CSS

Cуществует всего два легальных способа и различные их комбинации. Наиболее эффективной комбинацией можно назвать подключение корневого файла стилей при помощи элемента <link> и подключение дополнительных стилей уже в корневом файле при помощи директивы @import:

<head>
 <link rel="stylesheet" type="text/css" href="/css/main.css"/>
</head>

И в самом начале файла main.css:

@import "layout.css";
@import "forms.css";
@import "catalog.css";

Вариант с элементом <style> и директивной @import прямо в голове вашего документа, как и HTML-комментарии внутри этого элемента, выглядят как архаизм. Дополнительные стили для специфичных разделов подключаются либо при помощи @import при генерации корневого файла стилей на сервере, либо дополнительным элементом <link>.

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

В случае, если необходимо сделать печатную версию и версии для карманных компьютеров используйте атрибут media в теге link, либо используйте различные методы представление в самом CSS файле используя директивы @media screen, @media print и @media hand

Рекомендации к структуре

Рекомендации к использованию и названию различных элементов на странице

Смысловая разметка (семантическая)

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

Используйте отступы в соответствии со вложенностью элементов, чтобы повысить читабельность кода, отделяйте отдельные блоки комментариями

Постарайтесь использовать ниже приведенные элементы, в каждом случае когда фрагмент страницы имеет определенное значение.

h1, h2, h3, h4, h5;
ul, ol, dl;
strong, em;
blockquote, cite;
abbr, acronym, code;
fieldset, legend, label;
caption, thead, tbody, tfoot;
Названия классов и идентификаторов

Рекомендовано давать смысловую нагрузку так же и на имена идентификаторов и классов. Используйте словари, наименование транслитом делает названием не читабельным и незапоминаемым.

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

.error
#secondaryContent
#mainNav
.firstContentNav

Рекомендуется использовать как можно меньше классов и идентификаторов на странице. При возможности использовать принципы наследования, специфичности и каскадирования 

<h3 class="newHead">Our Site</h3>
<p class="textNews">Text about Us</p>
<p class="more"><a href="#">More information</a></p>


Более правильный вариант
<div class="news">
<h3>Our Site</h3>
<p>Text about Us</p>
<p><a href="#">More information</a></p>
</div>

Далее используя принцип каскадирования в CSS назначить нужные стили каждому заголовку, тексту и ссылке.

Дескрипторы div и span

Элемент div имеет смысловую нагрузку подразумевающую разделение документа на смысловые области, однако чтобы уменьшить объем разметки элемент div следут применять только в том случае если для выделения области не подходит никакой другой элемент страницы

<div id="mainNav">
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Links</li>
	</ul>
</div>


Более правильный вариант
<ul id="mainNav">
	<li>Home</li>
	<li>About</li>
	<li>Links</li>
</ul>

Элементы span используются в основном для идентификации или группирования строковых элементов.

Главная наша цель сделать код как можно более чистым и осмысленным.

Valid документа

Проверка документа на действительность

Проверить на действительность можно либо используя специальные программы либо на сайте http://validator.w3.org/

Полезно как можно чаще проверять на действительность документ с самого раннего этапа структуирования кода(разметка), так как это позволит выявить и не допустить ошибки. Однако как не важна проверка, валидность документа не является панацеей, поэтому нужно доверять не только проверке но и здравому смыслу

Title, Keywords and Decription

Описание элементов

Ниже приведенное стандартное объявление вышеперечисленных элементов

<title>Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Keywords" content="" />
<meta name="Description" content="" />

Ссылки

Рекомендации к использованию ссылок

Рекомендуется указывать у ссылок title, а также использовать динамические селекторы псевдоклассов в CSS

a:link, a:visited, a:hover, a:active (LoVe and HAte)

Комментарии

Рекомендации к использованию комментариев, а также условных комментариев дя IE

Комментарии

При указании кодировки в Unicode (рекомендовано), возможно написание комментариев на русском языке, что является предпочтительным. При комментировании кода нередко возникают ошибки при отображении в различных браузерах. Рекомендуется объявлять в комментариях начало блоков и конец

<!--Header-->
</div id="header">
  . . . 
</div>
<!--/Header-->
Условные комментарии для IE

Условные комментарии — это патентованное нестандартное расширение обычных комментариев HTML(XHTML) разработанных компанией Microsoft

При использовании трюков только для IE можно используя условные комментарии ограничить видимость такого кода только для браузеров IE определенной версии. В основном это приминяется к файлам CSS

<!-- [if IE] (или [if IE5], [if gte IE5.0000], [if lt IE6])
<style type="text/css">
	@import("ie.css");
</style>
-->

Правила для CSS

Рекомендации к структуре

Рекомендации по организации структуры CSS файлов

Рекомендуется разделять базовые стили для структуры, типографические стили, возможно выделение и цветовых стилей, в различные файлы, либо в разделенных комментариями частях одного файла

Рекомендованный стиль написания файла — в одну строчку, что уменьшает размер файла и облегчает поиск.

#logo {margin: 5px 0 2px 4px; color: #45baba; font-size: 2.5em}

Селекторы

Применение универсальных и дочерних селекторов

Универсальный селектор

Универсальный селектор (*) используется для стилизации каждого элемента страницы. Напрмер отменить вывод отступов (внешних и внутренних) можно следующим правилом

* {margin: 0; padding: 0}

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

/* v1.0 | 20080212 */    
html, body, div, span, applet, object, iframe,    
h1, h2, h3, h4, h5, h6, p, blockquote, pre,    
a, abbr, acronym, address, big, cite, code,    
del, dfn, em, font, img, ins, kbd, q, s, samp,    
small, strike, strong, sub, sup, tt, var,    
b, u, i, center,    
div, dt, dd, ol, ul, li,    
fieldset, form, label, legend,    
table, caption, tbody, tfoot, thead, tr, th, td {    
	margin: 0;    
	padding: 0;    
	border: 0;    
	outline: 0;    
	font-size: 100%;    
	vertical-align: baseline;    
	background: transparent;    
}    
body {    
	line-height: 1;    
}    
ol, ul {    
	list-style: none;    
}    
blockquote, q {    
	quotes: none;    
}    
blockquote:before, blockquote:after,    
q:before, q:after {    
	content: '';    
	content: none;    
}    

/* remember to define focus styles! */    
:focus {    
	outline: 0;    
}    

/* remember to highlight inserts somehow! */    
ins {    
	text-decoration: none;    
}    
del {    
	text-decoration: line-through;    
}    

/* tables still need 'cellspacing="0"' in the markup */    
table {    
	border-collapse: collapse;    
	border-spacing: 0;    
}
Дополнительные селекторы

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

Возможно имитировать кроссбраузерный дочерний селектор

#nav > li {font-weight: bold}
/*Для IE*/
#nav li {font-weight: bold}
#nav li * {font-weight: normal}

Комментарии

Рекомендации по применению комментарий в файлах CSS

При написании комментариев на русском языке будьте внимательны к кодировке документа, должна быть unicode. Так же не помещайте комментарии внутри стиля, так как это вызывает сбой в IE

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

Примеры блоков
/*--------------------------------------------------
Таблица стилей для браузера IE 6
(поправка к основным стилям отдельно для браузера IE6)
дата создания:		10/06/2008
автор:			Иванов Иван
ICQ:			3333344
---------------------------------------------------*/
/*--------------------------------------------------
Базовая таблица стилей
(описывает основную структуру документа)
дата создания:		10/06/2008
автор:			Иванов Иван
skype:			ivan
---------------------------------------------------*/
/*--------------------------------------------------
Типографическая таблица стилей
(описывает основные типографические правила для документа)
дата создания:		10/06/2008
автор:			Иванов Иван
email:			ivan@ivan.ru
---------------------------------------------------*/
Комментарии разделяющие части файла CSS

Разделяйте части используя следующий синтаксис

/*Стили для элемента header*/
Комментарии описывающие применение хаков или других нестандарных приемов

Используйте для этого ниже приведенный синтаксис

/*
Для правильного отображения элемента
в IE6 используется унивирсальный
селектор для задания высоты
*/
* html .error {height: 1px;}

При разработке крупных проектов, рекомендуется также использовать ключевые слова

/* :TODO: (сделать) удалить правило для IE6*/
/* :KLUDGE: (трюк) проблема решена, в стилях для IE используем замену рисунком*/
/* :BUG: (ошибка) Неправильное отображение в IE7*/
/* :TRICKY: (каверзный) Используется нестандартный подход*/

Поиск и устранение ошибок

Поиск ошибок в таблицах CSS

Наиболее распространенные проблемы в CSS

Синтаксические ошибки

Большенство возникающих ошибок обусловлены опечатками и синтаксическими ошибками допускаемыми при написании кода. Самым эффективным способом выявления таких ошибок является проверка на действительность http://jigsaw.w3.org/css-validator/

Проблемы связанные со специфичностью элементов

Определяя специфичность рекомендовано следовать таким правилам:

  • Правило записанное в атрибуте стиля, всегда более специфично чем любой другое правило
  • Правило с идентификатором более специфично чем правило без идентификатора
  • Правило с селектором класса более специфично чем с селекторами типов
  • Если специфичность двух правил полностью идентична то выполняется последнее

Ниже представлены таблица специфичности, для страницы с селекторами количеством менее 10

Таблица специфичности
Селектор Специфичность
style="" 1000
#main #mainNav {} 200
#container .date {} 110
div#main {} 101
#navigation {} 100
p.news .date {} 21
p.date {} 11
div p {} 2
p {} 1
Используйте плагины для FF

Используйте плагин для web- разработчиков, благодаря ему можно узнать в каком режиме отображается страница, ее кодировку, тип и т.д.

Использование самих стилей в поиске ошибок

Рекомендуется использовать для выявления ошибок метод border, который заключается в присвоении рамок подозрительным элементам

border: 1px solid blue;

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

position: relative; 
display: inline;
Создание минимально тестирующего кода

Локализуете проблему, выявите проблемный участок, скорее всего вы сразу найдете ошибку и исправьте ее.

Инструменты, трюки и фильтры

Инструменты для отладки и верстки

Различные инструменты (скрипты), помогающие в верстки документа

Просмотр страницы при различных разрешениях

Используйте ниже приведенный скрипт для определения вида страниц при различных разрешениях. Скопируйте строчку и вставте в строку адреса браузера. Укажите в скобках нужное вам разрешение.

javascript:self.resizeTo(1024,768)
Сетка для определения правильности определения элементов разметки

Поместите приведенный ниже скрипт в документ, появится сетка, размеры ячеек настраиваются под нужный размер

<script>
function _columns(a)
{
	document.write('<style type="text/css">
	.column_ { position: fixed; ' +
	'z-index: 999; top: 0; display: block; height: 100%;' +
	'border-right: 1px dashed #4affff; }' +
	'* html .column_ {position: absolute; } </style>');

	for (var i = 0, l = a.length; i < l; i++)
		document.write('<span class="column_" style="left: '
		+ a[i] + '%"></span>');
}
_columns([0, 10.8, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);
</script>

Заказ Online

Мы принимаем любые общедоступные графические форматы изображений, а также существующие страницы в качестве макета.

Если размер файла превышает 10 Мб, вы можете загрузить его на любой файлообменник и прислать нам ссылку.

Будьте внимательны при повторной разметки существующего сайта, по умолчанию цена не включает внедрение ссылок, скриптов и др. Заказывайте прямо сейчас! от 3825 руб.

Ваш заказ за 8 часов

Продолжительность выполнения одной (X)HTML страницы составляет  8 часов. В зависимости от сложности, на каждую следующую страницу уходит от 3 до 8 часов.
Наш график — с 10:00 до 18:00 вечера по московскому времени.

Срочные работы — по срочному графику! Укажите это в комментариях.

Другие услуги

Psdhtml.ru предоставляет услугу по внедрению вашей (X)HTML страницы в CMS, в такие как WordPress, Drupal, Joomla!, UMI.

Заказать | О нас | Гарантии | Работы | Оплата | Документация