- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Основные элементы страницы
К основным элементам страницы относятся логотип, меню, табы, формы и пр. Рассмотрим некоторые из них.
Логотип
При оформлении графического логотипа, слогана и т.п. используется подмена текста изображением:
HTML-код логотипа
<strong class="logo">
Logo Name
</strong>
CSS логотипа
.logo {
display: block;
width: 100px;
height: 100px;
background: url(logo.gif);
text-indent: -3000px;
overflow: hidden;
}
Если логотип – PNG-изображение (работа с PNG подробнее рассмотрена в «Способы использования PNG для отображения теней») и в то же время ссылка, то для IE6 приходится применять хитрость:
HTML-код логотипа-ссылки
<a href="#" class="logo">
Logo Name
</a>
CSS для логотипа-ссылки
a.logo {
display: block;
width: 100px;
height: 100px;
background: url(logo.png);
text-indent: -3000px;
overflow: hidden;
}
* html a.logo {
backgound-position: -100% -100%;
background-repeat: none;
cursor:pointer;
filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/logo.png', sizingmethod='crop');
}
Таким образом, в местах прозрачности курсор не будет «проваливаться» и переставать видеть ссылку. Это может оказаться крайне полезным, если логотип представлен в виде текста, см. Рисунок 7-1.
Рисунок 7‑1. Логотип.
Меню
Меню (или навигация) в соответствии с правилами оптимизации кода для поисковых систем (см. раздел ) оформляется с использованием элементов ul и li. Рассмотрим пример одноуровнего меню, см. Рисунок 7-1.
Рисунок 7‑1. Структура одноуровнего меню.
HTML-структура одноуровнего меню
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
Подобным образом оформляется и многоуровневое меню, когда элементы одного меню вложены в элементы другого, см. Рисунок 7-1.
Рисунок 7‑1. Многоуровневое меню.
HTML-структура многоуровневого меню
<ul>
<li>
<a href="#">List item 1</a>
<ul>
<li><a href="#">List item 1.1</a></li>
<li><a href="#">List item 1.2</a></li>
<li><a href="#">List item 1.3</a></li>
</ul>
</li>
<li>
<a href="#">List item 2</a>
<ul>
<li><a href="#">List item 2.1</a></li>
<li><a href="#">List item 2.2</a></li>
<li><a href="#">List item 2.3</a></li>
</ul>
</li>
<li>
<a href="#">List item 3</a>
<ul>
<li><a href="#">List item 3.1</a></li>
<li><a href="#">List item 3.2</a></li>
<li><a href="#">List item 3.3</a></li>
</ul>
</li>
</ul>
Для реализации выпадающего меню, такого, напрмер, как показано на Рисунок 7-1, можно воспользоваться следующей структурой HTML-кода и CSS.
Рисунок 7‑1. Выпадающее меню.
HTML-структура выпадающего меню
<ul id="menu">
<li>
<a href="#">List item 1</a>
<ul>
<li><a href="#">List item 1.1</a></li>
<li><a href="#">List item 1.2</a></li>
<li><a href="#">List item 1.3</a></li>
</ul>
</li>
<li>
<a href="#">List item 2</a>
<ul>
<li><a href="#">List item 2.1</a></li>
<li><a href="#">List item 2.2</a></li>
<li><a href="#">List item 2.3</a></li>
</ul>
</li>
<li>
<a href="#">List item 3</a>
<ul>
<li><a href="#">List item 3.1</a></li>
<li><a href="#">List item 3.2</a></li>
<li><a href="#">List item 3.3</a></li>
</ul>
</li>
</ul>
CSS выпадающего меню
#menu li {
border: 1px solid #000;
width: 150px;
background: #fff;
list-style: none;
}
#menu li.hover,
#menu li:hover {
position: relative;
}
#menu li.hover ul,
#menu li:hover ul {
display: block;
}
#menu ul {
display: none;
position: absolute;
left: 50%;
top: 50%; /* left и top смещение относительно родительского элемента */
}
Для IE6 нам также понадобится небольшой фрагмент JavaScript для того, чтобы выпадающее меню заработало.
JavaScript выпадающего меню для IE6
function initMenu()
{
var nodes = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<nodes.length; i++)
{
nodes[i].onmouseover = function()
{
this.className += " hover";
}
nodes[i].onmouseout = function()
{
this.className = this.className.replace(" hover", "");
}
}
}
if (document.all && !window.opera || (typeof document.body.style.maxHeight == 'undefined')) attachEvent("onload", initMenu);
Табы
Табы являются очень распространенным элементом веб-страниц, см. Рисунок 7-1, поэтому рассмотрим некоторые способы их реализации.
Рисунок 7‑1. Табы.
HTML-структура табов
<div class="tabset">
<a href="#tab1" class="tab active">Tab1</a>
<a href="#tab2" class="tab">Tab2</a>
<a href="#tab3" class="tab">Tab3</a>
</div>
<div id="tab1" class="tab">Tab1 text</div>
<div id="tab2" class="tab">Tab2 text</div>
<div id="tab3" class="tab">Tab3 text</div>
CSS для табов
.tabset {
float:left;
}
a.tab {
border: 1px solid #000;
float: left;
margin: 0 0 -1px;
position: relative;
}
a.active{
border-bottom-color: #fff;
}
div.tab {
border:1px solid #000;
clear: both;
}
Для переключения табов нам понадобится JavaScript.
JavaScript для переключения табов
function initTabs()
{
var sets = document.getElementsByTagName("div");
for (var i = 0; i < sets.length; i++)
{
if (sets[i].className.indexOf("tabset") != -1)
{
var tabs = [];
var links = sets[i].getElementsByTagName("a");
for (var j = 0; j < links.length; j++)
{
if (links[j].className.indexOf("tab") != -1)
{
tabs.push(links[j]);
links[j].tabs = tabs;
var c = document.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1));
//reset all tabs on start
if (c) if (links[j].className.indexOf("active") != -1) c.style.display = "block";
else c.style.display = "none";
links[j].onclick = function ()
{
var c = document.getElementById(this.href.substr(this.href.indexOf("#") + 1));
if (c)
{
//reset all tabs before change
for (var i = 0; i < this.tabs.length; i++)
{
document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = "none";
this.tabs[i].className = this.tabs[i].className.replace("active", "");
}
this.className += " active";
c.style.display = "block";
return false;
}
}
}
}
}
}
}
if (window.addEventListener) window.addEventListener("load", initTabs, false);
else if (window.attachEvent) window.attachEvent("onload", initTabs);
Формы
Основные тэги, используемые при создании форм указаны в Error: Reference source not found
При оформлении форм необходимо учитывать, что при прикручивании к движку на сервере тэг form может быть удален из тела документа (в ASP.NET тэг form должен быть один на весь документ). Т.е. делаем так:
HTML форм
<form action="#">
<div class="form">
...
</div>
</form>
И теперь все оформление привязываем к div.form.
Привыкнув так оформлять формы, мы убиваем двух зайцев: избавляемся от возможных проблем с клиентским ASP и пишем валидный код под XHTML 1.0 Strict, где элементы форм относительно тэга <form> должны быть завернуты в блочный элемент.
При оформлении форм необходимо использовать определение полей label с привязкой к соответствующему полю ввода:
HTML форм с label
<label for="first-name">First Name</label>
<input type="text" id="firstName"/>
<label for="country">Country</label>
<select id="country">
<option>Afghanistan</option>
<option>Albania</option>
...
</select>
Важно! Для обеспечения правильного отображения информации при отключенном CSS (а это одно из требований accessibility) необходимо располагать тэг label непосредственно перед соответствующим ему элементом формы.
Важно! Параметр name в элементах формы вводить не надо, это сделают программисты в соответствии со своими потребностями.
При идущих подряд полях ввода с одним описанием привязку делаем на первое поле:
HTML: форм с select
<label for="date">Date</label>
<select id="date">
<option>Year</option>
<option>1972</option>
<option>1973</option>
...
</select>
<select>
<option>Month</option>
<option>1</option>
<option>2</option>
...
</select>
<select>
<option>Month</option>
<option>January</option>
<option>February</option>
...
</select>
Поле ввода типа textarea должно содержать параметры col и row:
HTML форм с textarea
<textarea cols="20" rows="5"></textarea>
Замечание в принципе col и row можно оставить пустым, но хорошим тоном считается оформить textarea так, что бы и без CSS вид был приличный.
При визуальном оформлении элементов форм можно пользоваться как чистым CSS, так и внешними скриптами, берущими на себя эту задачу (частично, как будет видно далее).
При оформлении средствами CSS надо учитывать, что:
-
в IE у select нельзя штатными средствами поменять оформление border’а;
-
в Safari padding в полях ввода воспринимается как отступ внутри указанной ширины (подобное поведение для padding наблюдается в IE при DOCTYPE HTML 4.01 Transitional);
-
центровка текста в полях типа text производится манипуляциями с верхним и нижним padding (FF и Opera) и line-height (IE) методом подбора значений (как правило, если получившееся значение height поставить в line-height, то в IE все становится на свои места);
-
для IE7 надо персонально указывать высоту поля select.
-
Рассмотрим NiceForms (http://www.badboy.ro/articles/2007-01-30/niceforms/) на данный момент версии 1.0
Стандартный вид (в IE)
Вид с включенным NiceForms (в IE)
Скрипт занимается подстановкой изображений (края, уголки, чекбоксы, флаги и т.п.) к уже оформленным через CSS элементам форм.
Область действия определяется назначением класса niceform на тэг form, т.е. при порезке под ASP определить, какие блоки оформлять, а какие нет – нельзя: оформлены будут или все формы, или ни одна (хотя, конечно, можно отредактировать родной JS и поменять критерии поиска блока, в котором скрипт будет работать). Имена изображений можно менять в «родном» JS.
Ограничения для всех подобных решений – невозможно сделать оформление для полей типа text, textarea, button, file в Safari.
Есть способ оформить поле ввода типа file, но сделать его одинаково корректно работающим во всех браузерах невозможно, поэтому он рассматриваться не будет, и лучше этого не делать вообще.