Kurs HTML praktycznie - Menu na stronie

Artykuł
01/09/2012

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2012-01-09

W samouczku Kontener ze stopką przygotowałeś miejsce pod stopkę witryny oraz wykorzystałeś poziomą listę nieuporządkowanych punktów do rozłożenia treści w stopce. Witryna powinna posiadać menu, charakterystyczny wygląd, który będzie utożsamiany z konkretną stroną, oraz najważniejsze – treść. Ten samouczek pozwoli dokończyć Ci pracę nad Twoją witryną.

Po wykonaniu zadań nauczysz się:

przygotowywać menu górne w nagłówku,
przygotowywać menu dolne w nagłówku,
przygotowywać menu lewe,
formatować nagłówek witryny,
ustalać wygląd odnośnika,
zaokrąglać narożniki kontenerów,
wykorzystać przezroczystość.

Implementacja

Rozpoczynając pracę powinieneś posiadać:

Microsoft Visual Web Developer 2010 Express
pliki wynikowe z samouczka Przygotowanie kontenera z stopką; jeśli ich nie posiadasz, pobierz je z archiwum Samouczek-HTML-CSS.zip.

Informacja

Microsoft Visual Web Developer 2010 Express możesz pobrać bezpłatnie ze strony:

https://www.microsoft.com/visualstudio/en-us/products/2010-editions/express

* *

Celem tego samouczka jest przygotowanie ostatecznej wersji witryny. Wykorzystaj do tego kod HTML i style CSS. Na samym początku przygotuj menu górne, dolne oraz tekst w nagłówku. Następnie utwórz menu z lewej strony witryny. Ostatecznie zakończ przygotowanie witryny tak, aby uzyskać zamierzony efekt. Następnie sprawdź, czy Twoja witryna jest zgodna ze standardami web.

Wynik końcowy został przedstawiony na Rys. 1.

Rys. 1. Gotowa witryna.

Twoim zadaniem jest przygotowanie menu górnego, treści oraz menu dolnego w nagłówku.

Dodaj bloki stylu z prefiksem nagłówek_ do pliku styl.css, by otrzymać poniższy efekt:

#naglowek
{
margin-top: 15px; /* margines górny */
margin-bottom: 15px; /* margines dolny */
background: white; /* ustawienie koloru tła */
min-height: 200px; /* minimalna wysokość kontenera */
width: 100%; /* szerokość 100% dziedziczona po nadrzędnym */
    opacity: 0.8; /* przezroczystość */
}
#naglowek_gora
{
height: 20px; /* wysokość kontenera */
position: relative; /* pozycja relatywna */
}
#naglowek_gora_menu
{
position: absolute;/* pozycja obbiektu*/
top: 0px;/* odległość od góry */
right: 40px;/* odległość od prawej */
}
#naglowek_gora_menu ul li
{
display: inline; /* sposób wyświetlania obiektu */
color: blue; /* kolor czcionki */
}
#naglowek_gora_menu ul a
{
display: inline-block; /* sposób wyświetlania obiektu */
background: #00041B; /* kolor tła */
color: aqua; /* kolor czcionki */
padding: 5px 40px 5px 40px; /* oddalenie */
border-radius: 0px 0px 10px 10px; /* zaokrąglenie obramowania(CSS3) */
}
#naglowek_gora_menu a:hover
{
background-color: aqua; /* kolor tła */
height: 25px;/* wysokość obiektu */
color: black; /* kolor czcionki */
}
#naglowek_srodek
{
height: 140px; /* wysokość logotypu */
margin-top: 40px; /* położenie od szczytu kontenera nagłówek */
}
#microsoft
{
padding-top: 20px; /* odstęp od góry */
font-size: 17px; /* rozmiar czcionki */
margin-left: 90px; /* margines lewy */
}
#wak
{
font-size: 50px; /* rozmiar czcionki */
margin-left: 120px; /* margines lewy */

font-family: "Gill Sans Ultra Bold Condensed"; /* krój czcionki */
}
#podtytul
{
font-size: 17px; /* rozmiar czcionki */
margin-left: 600px; /* margines lewy */
}
#naglowek_dol
{
height: 20px; /* wysokość kontenera */
position: relative; /* pozycja relatywna */
    }
     #naglowek_dol_menu
{
position: absolute;/* pozycja obbiektu*/
bottom: 0px; /* oddalenie od dołu */
left: 40px; /* oddalenie od lewej */
}
#naglowek_dol_menu ul li
{
display: inline; /* wyświetlanie obiektu */

}
#naglowek_dol_menu ul a
{
display: inline-block; /* wyświetlanie obiektu */
background: #00041B; /* kolor tła */
color: aqua; /* kolor czcionki */
padding: 5px 40px 5px 40px; /* odstęp */
border-radius: 10px 10px 0px 0px;/* zaokrąglenie obramowania(CSS3) */
}
#naglowek_dol_menu ul a:hover
{
background-color: aqua; /* kolor tła */
color: black; /* kolor czcionki */
}

W pliku index.html zastąp kod HTML dotyczący nagłówka (element <div id="naglowek") za pomocą poniższego kodu:

<div id="naglowek" class="zaokraglenie_z_kazdej_strony">
<div id="naglowek_gora">
<div id="naglowek_gora_menu">
<ul>
<li><a href="https://www.xbox.com">Xbox</a></li>
<li><a href="https://www.microsoft.com/windows mobile/pl-pl/default.mspx">Windows Phone 7</a></li>
<li><a href="https://live.com">Microsoft Live</a></li>
</ul>
</div>
</div>
<div id="naglowek_srodek">
<span id="microsoft">Microsoft &reg</span><br>
<span id="wak">Wakacyjna Akademia Kontentu</span>
<span id="podtytul">czyli jak tworzymy nasz wirtualny świat!</span>
</div>
<div class="czyszczenie_lini"></div>
<div id="naglowek_dol">
<div id="naglowek_dol_menu">
<ul>
<li><a href="https://msdn.microsoft.com/pl-pl/library/hh403956.aspx">Kurs HTML i CSS</a></li>
<li><a href="#">Kurs ASP.NET</a></li>
<li><a href="#">Kurs jQuery</a></li>
<li><a href="#">Kurs Silverlight</a></li>
<li><a href="#">Kurs SQL</a></li>

</ul>
</div>
</div>
</div>

Twoim zadaniem jest zagospodarowanie części środkowej witryny, tj. przygotowanie menu lewego oraz miejsca na treść właściwą.

W pliku index.html przygotuj kontener zawartosc_własciwa jak poniżej:

<div id="zawartosc_wlasciwa" class="zaokraglenie_z_kazdej_strony">
<div id="menu_lewe">
<ul>
<li><a href="index.html">Nowości</a></li>
</ul>
<p class="bold">
 Przydatne oprogramowanie:</p>
<ul>
<li><a href="https://www.microsoft.com/visualstudio/en-us/products/2010-editions/express">Microsoft Visual Web Developer 2010 Express </a></li>
<li><a href="http://www.getpaint.net">Paint.net</a></li>
</ul>
<p class="bold">
 Przydatne linki:</p>
<ul>
<li><a href="https://msdn.microsoft.com">MSDN.microsoft.com</a></li>
<li><a href="http://Code Guru.pl">Code Guru.pl</a></li>
<li><a href="http://wss.pl">WSS.pl</a></li>
</ul>
<p>
Walidacja:<br>
<a href="http://validator.w3.org/check?uri=referer"><imgsrc="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a><br>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><imgsrc="http://jigsaw.w3.org/css-validator/images/vcss" alt="Poprawny CSS!"></a>
</p>
</div>
<div id="glowna_tresc">
<h1>Nowości</h1>
<p>Strona, którą widzisz drogi użytkowniku prezentuje, jak w łatwy, szybki i efektowny sposób, przy pomocy jednego obrazka, kodu HTML oraz arkusza stylów CSS, możesz przygotować prostą stronę internetową</p>
<p>W tym kursie dowiesz się, jak praktycznie wykorzystać wiedzę teoretyczną, zawartą w wielu publikacjach, zarówno książkowych jak i internetowych.</p>
</div>
<div class="czyszczenie_linii"></div>
</div>

Dodaj bloki stylu, dotyczące części środkowej witryny, do pliku styl.css:

#zawartosc_wlasciwa
{
background: white; /* ustawienie koloru tła */
min-height: 600px; /* minimalna wysokość kontenera */
width: 100%; /* szerokość 100% kontenera nadrzędnego */
padding-top: 30px; /* odstęp od krawędzi górnej kontenera */
padding-bottom:30px; /* odstęp od krawędzi dolnej kontenera*/
}
#menu_lewe ul
{
list-style: none; /* Styl listy */
color: black; /* kolor tekstu */
display: block; /* styl wyświetlania elementu */
}
.bold
{
font-weight:bold; /* pogrubienie czcionki */
}
#menu_lewe ul li
{
padding-left: 10px; /* odstęp od lewej */
margin-top: 10px; /* margines od góry */
border-left: 2px solid #00041B; /* obramowanie(rozmiar, styl linii, kolor) */
font-size: medium; /* średni rozmiar czcionki */
}
#menu_lewe ul li:hover
{
border-left: 2px solid orange; /* obramowanie(rozmiar, styl linii, kolor) */
margin-left: 20px; /* margines od lewej */
}
#menu_lewe p
{
margin-top: 30px;/* margines od góry */
}
#menu_lewe a
{
color: black; /* kolor tekstu */
}
#menu_lewe a:hover
{
color: navy; /* kolor tekstu */
}
#glowna_tresc h1
{
font-size: 20px; /* Rozmiar czcionki */
margin-bottom: 10px; /* margines od dołu */
}
#glowna_tresc p
{
font-size: 14px; /* Rozmiar czcionki */
margin-bottom: 10px; /* margines od dołu */
text-align: justify; /* justowanie tekstu */
}
#menu_lewe
{
width: 200px; /* szerokość menu */
min-height: 600px; /* minimalna wysokość */
float:left; /* oblewanie elementu */
margin-left: 20px; /* odstęp kontenera od lewej krawędzi kontenera nadrzędnego */
}
#glowna_tresc
{
margin-left: 240px; /* margines od lewego marginesu */
margin-right: 20px; /* margines od prawej */
min-height: 800px; /* wysokość minimalna */
}

W przeglądarce uruchom index.htm, aby zobaczyć efekt.

Ukończona aplikacja

Celem cyklu HTML praktycznie było przygotowanie witryny. Zwróć uwagę na elementy, umieszczone w kodzie, które nie zostały opisane w samouczkach kursu HTML i CSS. Są to np. zaokrąglenia narożników czy kolorystyka hiper łączy. Końcowy kod HTML i CSS możesz znaleźć w archiwum HTML-Praktycznie.zip.

Walidacja

Twoim zadaniem jest sprawdzenie, czy cała witryna jest poprawna pod względem standardów web. Sprawdź poprawność kodu HTML oraz stylów CSS. Pamiętaj, że należy sprawdzić składnię, a nie wartość użytkową danego kodu.

Sprawdzenie kodu HTML.

Otwórz plik index.html w edytorze.
Z pliku skopiuj całą zawartość HTML i przenieś ją do schowka.
W przeglądarce uruchom stronę http://validator.w3.org/.
Przejdź do zakładki „Validate by directinput”.
W pole tekstowe, dostępne na witrynie, wklej kod.
Kliknij opcję Check.
Twoja witryna uzyskała status zgodnej z standardem HTML 4.01.

Rys. 2. Przykład witryny zgodnej ze standardem HTML 4.01.

Sprawdzenie kodu CSS.

W edytorze otwórz plik styl.css.
Z pliku skopiuj do schowka całą zawartość CSS.
W przeglądarce uruchom stronę http://jigsaw.w3.org/css-validator/.
Przejdź do zakładki „poprzez wprowadzenie kodu”.
W pole tekstowe, dostępne w witrynie, wklej kod.
Następnie kliknij Więcej opcji.
Wybierz profil: CSS wersja 3.
Kliknij Sprawdź.
Gratuluje! Twoja witryna jest zgodna ze standardem CSS3.

Rys. 3. Przykład witryny zgodnej ze standardem CSS3.

Podsumowanie

W tym cyklu samouczków nauczyłeś się, jak wykorzystać kod HTML i CSS do przygotowania witryny. Gratuluję! Dotarłeś do końca cyklu HTML-Praktycznie.

Dodatkowo zobacz:

Kurs HTML praktycznie - Menu na stronie

Autor: Łukasz Kazimierz Krajkowski

Implementacja

Przygotowanie górnego menu, treści oraz dolnego menu w nagłówku

Przygotowanie menu lewego

Ukończona aplikacja

Walidacja

Podsumowanie

Dodatkowe zasoby