Така започва менюто, което се показва в горната част на прозореца.
Вие вече сте извършили доста предварителна работа за това меню. Със сигурност си спомняте за красивия градиент, който е запазен като графика с един пиксел. Точно този градиент се използва сега. Все пак, на първо място трябва да бъде създадена съответната HTML структура за областта на менюто. Тя можеше да изглежда така:
<div class="header"> <div class="header-top"> <h1>Твоят данъчен съветник</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Начало</a></li> <li><a href="#">Относно нас</a></li> <li><a href="#">Как работим</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Импресум</a></li> </ul> </div> <div class="header-img"> </div> </div>
За оформянето на фона се вгражда графиката с един пиксел и се повтаря вертикално толкова пъти, докато елементът целият бъде запълнен.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
След това мениюто може да бъде форматирано. В принцип няма специални страници за внимание. Съществените неща за такива мениуса обикновено са само следните аспекти:
• Скрива точките по алфавит с list-style-type: none;.
• Осигурява се, че елементите на списъка се показват до тях.
На това място работя – вие вече знаете – с градиент, който се реализира чрез графика. Междувременно за мениюта разбира се има много други опции на разположение. Мислете например за JavaScript библиотеки като jQuery. Разкриването на всички тези възможности би надвишило разговора. Все пак, вече има множество онлайн генератори, чрез които може бързо да се създадат мениута. Един от тях – без стойностно оценяване, дали това е най-гениалното от своя сорт – можете да намерите на http://www.cssmenubuilder.com/.
Въпреки това аз съм се решила за следната вариант:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Съществен е всъщност само състоянието при прехвърляне с мишката. Ако се появи този случай, се показва различна графика на фона.
Дясното мению
Уебсайтът не разполага само с горно меню, в дясната област на прозореца също се изобразява едно меню.
Това меню принадлежи към областта с
div с клас content-right. За разработката на страницата аз поставих само прототипни съдържания там.
<div class="content-right"> <h2>Главно меню</h2> <ul> <li><a href="#">Линк 1</a></li> <li><a href="#">Линк 2</a></li> <li><a href="#">Линк 3</a></li> <li><a href="#">Линк 4</a></li> <li><a href="#">Линк 5</a></li> <li><a href="#">Линк 6</a></li> <li><a href="#">Линк 7</a></li> <li><a href="#">Линк 8</a></li> <li><a href="#">Линк 9</a></li> <li><a href="#">Линк 10</a></li> </ul>
Областта първо се позиционира на подходящото място и с желан размер.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Следва задаването на реалното меню. Този път обаче записите са поставени една под друга. Затова трябва просто да се уверите, че точките на алфавита са скрити. Останалото оформяне на менюто остава най-сетне на вас.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}В браузъра вече трябва да се получи следното изображение:
Долното меню
В долната част на уебсайта ще има още едно меню. Тук на PSD-Tutorials.de се използва подобно меню, за да се предоставят връзки към обща информация.
На нашия уебсайт има съобщение за авторски права. И двете неща са типични за уебсайтове. Първо ще разгледаме HTML структурата отново.
<div class="bottom"> <ul> <li><a href="index.html">Начало</a></li> <li><a href="#">Относно нас</a></li> <li><a href="#">Новини</a></li> <li><a href="#">Контролен панел</a></li> <li><a href="#">Контакт</a></li> <li><a href="#">Импресум</a></li> <li><a href="#">Карта на сайта</a></li> </ul> <p>© Авторски права 2014 от PSD-Tutorials.de</p> </div>
Това е прост списък от ul. Всеки елемент от списъка съдържа меню елемент. Под списъка ul има елемент p, в който се намира съобщението за авторски права. Сега липсва CSS синтаксисът.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Как ще стилизирате долната част на уебсайта зависи изцяло от вас. Аз използвам отново градиент. Можете обаче да използвате например един цвят на фона или директна CSS3 синтакса. В случая с моята графична вариация обаче е важно да се предотврати повторението чрез background-repeat: no-repeat;.
Първо погледнете резултата:
Кое привлича вниманието тук, са белите линии, които се показват до всеки меню елемент. Те се дефинират чрез различни border-left упътвания, което като цяло означава, че упътванията се отнасят за лявата граница на елемента.
Общият вид на синтаксиса за долното меню изглежда по следния начин:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Има едно различие от горното меню. В случай на ховър, наистина няма да се зареди допълнителна графика. Въпреки това, за да се разбере на посетителите, че преминават с мишката си върху една връзка, отделните връзки се подчертават, когато се появи събитието ховър.
В края на този урок основните стъпки за уебсайта са завършени. Остава само да украсим сайта. За повече информация в следващите уроци.
