Урок
ПРИМЕР 1:
HTML файл
Трябва да поставим неподреден списък <ul>,
в който в елементите <li> поставяме линковете си:
1
2
3
4
5
6
7
8
|
<ul>
<li><a href="link-1.html">Начало</a></li>
<li><a href="link-2.html">За
IG Designers</a></li>
<li><a href="link-3.html">Уеб
дизайн</a></li>
<li><a href="link-4.html">Лого
дизайн</a></li>
<li><a href="link-5.html">Предпечат</a></li>
<li><a href="link-6.html">Контакти</a></li>
</ul>
|
Вече имаме необходимите ни линкове. Сега ни остава да
ги облечем в дизайн. Нека разгледаме елементите един по един и да помислим как
те се представят в HTML:
· <ul> е тагът, отварящ неподреден списък – всички
елементи в него трябва да са <li>. Така казваме на HTML, че
всичко между <ul> и </ul> трябва
да следва логиката на списъците с булет;
· <li> казва на HTML, че имаме елемент от
списък. В него поставяме съдържанието;
· <a> е реалния линк към документа, който искаме да
посочим в менюто.
Ако сега запаметим нашия .html документ,
той ще изглежда много далеч от това, което искаме да постигнем – просто списък
с линкове без оформление, без визия, без дизайн.
Рамкиране на менюто
1
2
3
4
5
6
7
8
|
ul {
margin:0;
padding:0;
}
ul li {
list-style:
none;
float: left;
}
|
Така зададена, стиловата дефиниция казва на елемента <ul> да
няма никакви отстояния от околните елементи, а <li> елементите
да нямат списъков стил – да няма пред тях познатия булет (точицата, която сме
свикнали да виждаме пред такива списъци) и да плават наляво или просто списъка
да се появява на един ред, като най-горния ни елемент да поеме най-лявата
възможна позиция и следващите да се нареждат след него.
Оразмеряване на бутоните
Бутоните ни в менюто представляват самите <a>елементи.
Чрез CSS ще накараме линковете ни да приличат на бутони – да
имат конкретна широчина и височина; фон, който се променя според това къде се
намира мишката и как потребителят взаимодейства с бутона и т.н.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ul li a {
display:block;
padding:
10px 5px;
text-decoration:
none;
background:
url(btn_down.png) repeat-x;
color:
#000;
}
ul li
a:hover {
display:block;
padding:
10px 5px;
text-decoration:
underline;
background:
url(btn_up.png) repeat-x;
color:
#fff;
}
|
С тази дефиниция казваме на елемента <a> в
нормално състояние да се показва като блок/кутийка, която да има вътрешно
отстояние от рамките си (padding) от 10 пиксела отгоре и отдолу и 5
пиксела отляво и отдясно и да е с фон изображениетоbtn_down.png.
Настройките за текста са text-decoration: none; и color: #000; или
текста вътре в бутоните няма да бъде подчертан и ще бъде с черен цвят.
Когато потребителят мине с мишката през бутона
използваме фиктивния класa:hover. С него променяме настройките за фона –
задаваме btn_up.png; за текста – казваме му да е подчертан. Така
бутона се променя според поведението на потребителя и имитира напълно ефекта RollOver
Image.
Завършен,
нашия .html документ ще изглежда така:
ПРИМЕР 2:
Меню
HTML файл
CSS файл
.gif)
