Udostępnij za pośrednictwem

  • Artykuł

          

Kurs HTML praktycznie - Kontener ze stopką  Udostępnij na: Facebook

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2012-01-05

W samouczku Kontenery z menu oraz treścią właściwą przygotowałeś miejsce pod menu główne oraz treść.

Witryna powinna posiadać miejsce, w którym użytkownik będzie mógł znaleźć informacje kontaktowe, ewentualne regulacje prawne lub dane dotyczące twórcy witryny. Polskie prawo wymaga podawania danych firmy na stronie. Naturalnym miejscem do umieszczenia takich informacji jest stopka.

Po wykonaniu zadań nauczysz się:

  • wykorzystywać poziomą listę wypunktowania,
  • przygotowywać kontener na stopkę witryny.

Implementacja

Rozpoczynając pracę powinieneś posiadać:

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

* *

Ważnym elementem każdej witryny jest stopka, która zawiera niekiedy kluczowe informacje, takie jak numery ewidencyjne lub dane kontaktowe. Celem tego samouczka jest przygotowanie stopki tak, aby informacje w niej zawarte były interesujące i czytelne dla odbiorców. Aby to wykonać, wykorzystaj kod HTML i style CSS. Na samym początku przygotuj kontener na stopkę. Następnie utwórz nieuporządkowaną listę poziomą , aby przedstawić informacje o autorach oraz o opiekunie Wakacyjnej Akademii Kontentu.

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

Rys. 1. Wynik końcowy.

Przygotowanie miejsca na stopkę

Twoim zadaniem jest przygotowanie kontenera, w którym umieścisz treść stopki.

  1. Uruchom projekt z samouczka Kontenery z menu oraz treścią właściwą.
  2. Do pliku styl.css dodaj blok stylu dla kontenera stopka.
#stopka
    {
margin-top: 15px; /* odstęp od poprzedniego kontenera */
margin-bottom: 15px; /* odstęp pomiędzy dolną krawędzią */
width: 100%; /* szerokość 100% */
background-color: RED; /* kolor tła */
color: white; /* kolor tekstu */
text-align: right; /* wyrównanie tekstu w kontenerze do prawej */
    }
  1. W przeglądarce uruchom index.htm.
  2. Przewiń stronę do samego dołu, aby zobaczyć widok podobny do Rys. 2.

Rys. 2. Kontener na stopkę.

  1. Usuń tło ze stylu kontenera stopka.

Przygotowanie stopki

Twoim zadaniem jest przygotowanie treści stopki i odpowiednie jej rozmieszczenie wewnątrz. Do tego celu wykorzystaj poziomą listę wypunktowaną. W treści stopki dodaj informacje o autorach cyklu samouczków.

  1. Dodanie paragrafu tekstu.
  • Usuń zawartość kontenera stopka.
  • W kontenerze stopka dodaj paragraf tekstu:
<p>Wakacyjna Akademia Kontentu</p>
  1. Dodawanie listy nieuporządkowanej.
  • Poniżej paragrafu, w kontenerze stopka, dodaj listę wypunktowaną z 2 elementami:
<ul>
<li>Autorzy: Aurelia Tokarek, Łukasz Krajkowski</li>
<li>Osoba nadzorująca: Piotr Bubacz</li>
</ul>

Rys. 3. Stopka w kolorze tła z czarnymi napisami.

  1. Nadaj styl paragrafowi.
  • Do paragrafu, w kontenerze stopka, dodaj blok stylu:
#stopka p /*paragraf */
{
font-weight: bold; /* pogrubienie tekstu */
color: white; /* kolor tekstu */
}
  1. Nadaj styl elementom listy wypunktowanej.
  • Do pliku styl.css dodaj poniższy blok:
#stopka ul li /* elementy listy wypunktowanej */
{
color: white; /* kolor tekstu */
display: inline-block; /* wyświetlanie w linii w postaci blokowej */
border-left: 2px solid white; /* obramowanie ramki elementu z lewej */ 
padding-left: 5px; /* odstęp wewnątrz elementu z lewej */
margin-left: 10px; /* odstęp pomiędzy elementami z lewej */
margin-top: 10px; /* odstęp elementów od góry*/ 
}
  1. Uruchom witrynę w przeglądarce.
  2. Sprawdź wygląd strony w przeglądarce po usunięciu wyświetlania elementów w linii.
  • Zakomentuj wyświetlanie w linii.
  • Odśwież stronę w przeglądarce.
  • Odkomentuj wyświetlanie w linii.

Podsumowanie

W tym samouczku nauczyłeś się, jak wykorzystywać kod HTML i CSS do przygotowania stopki oraz nieuporządkowanej listy poziomej, prezentującej pewne informacje.

W kolejnym samouczku nauczysz się konstruowania menu górnego w nagłówku.

Dodatkowo zobacz: