Zaczynamy od menu, które jest wyświetlane w górnej części okna.
Dla tego menu wykonaliście już sporo pracy przygotowawczej. Na pewno pamiętacie ładny przejście kolorów, które zostało zapisane jako grafika jednopikselowa. Teraz właśnie to będzie wykorzystane. Jednak wcześniej konieczne jest utworzenie odpowiedniej struktury HTML dla obszaru menu. Może to wyglądać następująco:
<div class="header"> <div class="header-top"> <h1>Twój doradca podatkowy</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Strona główna</a></li> <li><a href="#">O nas</a></li> <li><a href="#">Jak działamy</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Informacje o firmie</a></li> </ul> </div> <div class="header-img"> </div> </div>
Aby nadać tło, grafika jednopikselowa zostaje załadowana i powielana pionowo tak wiele razy, aż cały element zostanie wypełniony.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Następnie można sformatować menu. W zasadzie nie ma tutaj niczego szczególnego do uwzględnienia. Istotne jest zawsze tylko kilka aspektów przy tego typu menu:
• Ukrywacie punkty listy za pomocą list-style-type: none;.
• Upewnijcie się, że pozycje na liście są wyświetlane obok siebie.
Pracuję tutaj - jak wiecie od dawna - z przejściem kolorów zrealizowanym za pomocą grafiki. Oczywiście istnieje wiele innych opcji dostępnych teraz dla menu. Na przykład pomyślcie o frameworkach JavaScript, takich jak jQuery. Przedstawienie wszystkich tych możliwości byłoby zbyt szerokim tematem. Istnieje jednak wiele dostępnych online generatorów, które pozwalają stworzyć menu za pomocą kilku kliknięć. Jeden z nich - bez oceniania, czy jest to najlepsze narzędzie tego typu - znajdziecie pod adresem http://www.cssmenubuilder.com/.
Ja zdecydowałem się na następującą wersję:
.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;
}
Istotny jest właściwie tylko stan najechania. Gdy wystąpi to zdarzenie, wyświetlany jest inny obrazek tła.
Prawe menu
Strona internetowa nie ma tylko menu u góry, ale także menu jest wyświetlane w prawej części okna.
To menu należy do obszaru div o klasie content-right. Na etapie tworzenia strony umieściłem tam tylko przykładowe treści.
<div class="content-right"> <h2>Menu główne</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
Obszar ten najpierw jest umieszczany we właściwym miejscu i w oczekiwanej wielkości.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Następnie przechodzimy do definiowania właściwego menu. Tym razem pozycje są ułożone pionowo. Dlatego wystarczy pamiętać o ukryciu punktów listy. Reszta stylizacji menu pozostaje w gestii projektanta.
.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;
}W przeglądarce powinny teraz pojawić się następujące rezultaty:
Dolne menu
W dolnym obszarze strony internetowej będzie kolejne menu. Tutaj na PSD-Tutorials.de takie menu jest również używane do udostępniania linków do ogólnych informacji.
Na naszej stronie internetowej znajduje się również informacja o prawach autorskich. Obydwie rzeczy są całkiem typowe dla stron internetowych. Na początku znowu struktura HTML.
<div class="bottom"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">O nas</a></li> <li><a href="#">Nowości</a></li> <li><a href="#">Centrum kontroli</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Informacje prawne</a></li> <li><a href="#">Mapa strony</a></li> </ul> <p>© Prawa autorskie 2014 by PSD-Tutorials.de</p> </div>
To jest po prostu prosty ul-Lista. Każdy element listy zawiera pozycję w menu. Poniżej listy ul znajduje się element p, w którym znajduje się informacja o prawach autorskich. Teraz jedynie brakuje składni 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;
}
To, jak zaprojektujesz dolny obszar, zależy ostatecznie od ciebie. Ja ponownie używam gradientu kolorów. Ale możesz na przykład użyć po prostu koloru tła lub od razu składni CSS3. W przypadku mojej wersji graficznej jest jednak istotne, że powtarzanie jest uniemożliwione przez background-repeat: no-repeat;.
Sprawdź najpierw wynik:
To, co rzuciło się tutaj w oczy, to białe paski przy poszczególnych pozycjach w menu. Są one zdefiniowane za pomocą różnych deklaracji border-left, co ostatecznie oznacza, że każda deklaracja dotyczy lewej krawędzi elementu.
Ogólnie składnia dolnego menu wygląda następująco:
.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;
}
Jest tu pewna różnica w porównaniu do górnego menu. Faktycznie, przy najechaniu kursora nie jest ładowany kolejny obraz. Jednakże, aby odwiedzający nadal rozumieli, że najechanie kursora na link powoduje podkreślenie, poszczególne linki są podkreślane, gdy zachodzi zdarzenie najechania.
Na tym kończą się podstawowe kroki budowania strony internetowej. Teraz pozostaje jeszcze jej upiększenie. Więcej na ten temat w kolejnych samouczkach.
