Основные элементы страниц: логотип, меню, табы, формы; применение готовых js решений
Логотип
При оформлении графического логотипа, слогана и т.п. используется подмена текста изображением:
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;
filter: progid:dximagetransform.microsoft. alphaimageloader(src='images/logo.png', sizingmethod='crop');
}
Таким образом, в местах прозрачности курсор не будет «проваливаться» и переставать видеть ссылку. Этополезно,еслилоготипвыглядит, как текст.
Меню
Меню оформляется с использованием ul/li:
HTML:
<ul>
<li>
<a href=”#”>List1</a>
</li>
<li>
<a href=”#”>List2</a>
</li>
<li>
<a href=”#”>List3</a>
</li>
</ul>
Подобным образом оформляются и вложенные меню:
HTML:
<ul>
<li><a href="#">List1</a>
<ul>
<li>
<a href="#">List1.1</a>
</li>
<li>
<a href="#">List1.2</a>
</li>
<li>
<a href="#">List1.3</a>
</li>
</ul>
</li>
<li><a href="#">List2</a>
<ul>
<li>
<a href="#">List2.1</a>
</li>
<li>
<a href="#">List2.2</a>
</li>
<li>
<a href="#">List2.3</a>
</li>
</ul>
</li>
<li><a href="#">List3</a>
<ul>
<li>
<a href="#">List3.1</a>
</li>
<li>
<a href="#">List3.2</a>
</li>
<li>
<a href="#">List3.3</a>
</li>
</ul>
</li>
</ul>
Для реализации выпадающего меню добавляем id для корневого ul, это нужно для IE. Для остальных браузеров хватит CSS:
HTML:
<ul id="nav">
<li><a href="#">List1</a>
<ul>
<li><a href="#">List1.1</a></li>
<li><a href="#">List1.2</a></li>
<li><a href="#">List1.3</a></li>
</ul>
</li>
<li><a href="#">List2</a>
<ul>
<li><a href="#">List2.1</a></li>
<li><a href="#">List2.2</a></li>
<li><a href="#">List2.3</a></li>
</ul>
</li>
<li><a href="#">List3</a>
<ul>
<li><a href="#">List3.1</a></li>
<li><a href="#">List3.2</a></li>
<li><a href="#">List3.3</a></li>
</ul>
</li>
</ul>
CSS:
#nav li {
border: 1px solid #000;
width:150px;
background:#fff;
list-style:none;
}
#nav li.hover,
#nav li:hover {
position: relative;
}
#nav li.hover ul,
#nav li:hover ul {
display: block;
}
#nav ul {
display: none;
position: absolute;
left: 50%;
top: 50%; /* left и top смещение относительно родительского элемента */
}
JS:
initNav = function() {
var lis = document.getElementById("main-navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++)
{
lis[i].onmouseover = function()
{
this.className += " hover";
}
lis[i].onmouseout = function()
{
this.className = this.className.replace(" hover", "");
}
}
}
if (document.all && !window.opera && (typeof document.body.style.maxHeight == 'undefined'))
attachEvent("onload", initNav);
Табы
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 class="tab" id="tab1">Tab1 text</div>
<div class="tab" id="tab2">Tab2 text</div>
<div class="tab" id="tab3">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;
}
JS:
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 = docu.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1));
if (c)
if (links[j].className.indexOf("active") != -
c.style.display = "block";
else
c.style.display = "none";
links[j].onclick = function ()
{
var c = docu.getElementById(this.href.substr(this.href.indexOf("#") + 1));
if (c)
{
//reset all tabs
for (var i = 0; i < this.tabs.length;
{
document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = e";
this.tabs[i].className = .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);
Формы
Основняые тэги, используемые при верстке форм указаны в 6.1
При оформлении форм необходимо учитывать, что при прикручивании к движку на сервере тэг form может быть удален из тела документа (в ASP.NET тэг form должен быть один на весь документ). Т.е. делаем так:
HTML:
<form action="#">
<div class="form">
...
</div>
</form>
И теперь все оформление привязываем к div.form.
Привыкнув так оформлять формы, мы убиваем двух зайцев: избавляемся от возможных проблем с клиентским ASP и пишем валидный код под XHTML 1.0 Strict, где элементы форм относительно тэга <form> должны быть завернуты в блочный элемент.
При оформлении форм необходимо использовать определение полей label с привязкой к соответствующему полю ввода:
HTML:
<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:
<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 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, но сделать его одинаково корректно работающим во всех браузерах невозможно, поэтому он рассматриваться не будет, и лучше этого не делать вообще.