• Artykuł

          

Samouczek: Layout WWW - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Kędziora

Opublikowano: 2011-10-05

Jednym z podstawowych zadań podczas projektowania stron WWW jest opracowanie odpowiedniego układu całej strony, nazywanego najczęściej layout WWW.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • projektować różne układy elementów na stronie,
  • określać odpowiednie style CSS dla poszczególnych elementów.

Implementacja

Twoim zadaniem będzie utworzenie za pomocą HTML i CSS różnych układów strony. Najważniejszym znacznikiem składni HTML, którym będziemy się posługiwać jest div, to właśnie za jego pomocą oraz odpowiednich właściwości stylów CSS będziemy tworzyć szablony stron.

Informacja

Najczęściej spotykanymi szablonami są te o stałej szerokości strony – ten samouczek dotyczy właśnie takich szablonów.

Dzięki temu, że zastosujemy stałą szerokość strony, będziemy mieli pewność, że gdy użytkownicy będą używali różnych rozdzielczości ekranu, strona będzie miała ten sam układ elementów.

Szerokość szablonu ustala się w pikselach, ponieważ to właśnie w nich wyrażana jest rozdzielczość ekranu (monitora). Obecnie najbardziej standardowa jest rozdzielczość o wymiarach 1024x768 pikseli. W związku z tym przygotujemy szablon o szerokości 1000 pikseli (24 piksele zostawiamy na boczny pasek przewijania strony góra-dół).

Przygotowanie strony

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszą część kursu Pierwsza strona internetowa.

  1. Otwórz edytor HTML i utwórz szkielet strony.
<html>
    <head> 
    <title>Layout WWW</title>
    </head>
    <body>
    </body>
</html>
  1. Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej.

Szablon złożony z dwóch kolumn

W tym zadaniu przygotowujemy szablon tak, jak na Rys. 1., złożony z następujących elementów:

  • nagłówek – miejsce, w którym możemy umieścić baner w postaci obrazka (Sprawdź: Wstawianie grafiki na stronie www),
  • boczne menu nawigacyjne,
  • środek strony, w którym będziemy umieszczać zawartość, tj. tekst, grafikę,
  • stopka strony (w stopce możemy np. podać dane kontaktowe).

 

Rys.1. Schemat szablonu złożonego z dwóch kolumn.

  1. Do strony index.html, w sekcji HEAD, dodaj poniższy kod:
<style type="text/css">
html, body {
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 0; }

#strona {
    width: 1000px; }

#gora {
    background-color: #BBB; }

#menu {
    width: 200px;
    float: left;
    overflow: hidden;
    background-color: #DDD; }

#zawartosc {
    width: 800px;
    float: left;
    overflow: hidden;
    background-color: #FFF; }

#stopka {
    clear: both;
    width: 100%;
    background-color: #EEE; }
</style>
  1. W sekcji BODY wstaw następujący kod:
<div id="strona">
    <div id="gora">Miejsce na baner / logo</div>
    <div id="menu">Menu nawigacyjne strony</div>
    <div id="zawartosc">Zawartość strony tj. miejsce na tekst / zdjęcia</div>
    <div id="stopka">Stopka strony</div>
</div>
  1. Zapisz zmiany w pliku i otwórz lub odśwież go w przeglądarce. Sprawdź, czy otrzymałeś wygląd podobny jak na Rys. 2.

Rys. 2. Szablon z dwiema kolumnami – podgląd w Internet Explorer 9.

Informacja

Najważniejsze elementy składni HTML i CSS, których użyliśmy, to:

  • background-color: #BBB; – kolor tła,
  • color: #FFF; – kolor tekstu,
  • margin: 0; – marginesy,
  • padding: 0; – odstawanie,
  • width: 1000px; – szerokość,
  • float: right; – wyrównanie elementu, dzięki temu mogliśmy ustawić dwa bloki DIV obok siebie (menu i zawartość),
  • overflow: hidden; – własność przepełnienia, polega na tym, że gdy umieścimy w naszym bloku coś ,co będzie od niego większe, np. obrazek, to zostanie on obcięty do wymiarów bloku,
  • clear: both; – własność przylegania,
  • <div id="gora"> – element blokowy z id, który odwołuje się do stylu CSS o tej samej nazwie.

Zapamiętaj powyższe informacje, ponieważ będziemy z nich korzystać w dalszej części samouczka!

Szablon złożony z trzech kolumn

W tym zadaniu przygotowujemy szablon tak, jak na Rys. 3., złożony z następujących elementów:

  • nagłówek – miejsce, w którym możemy umieścić baner w postaci obrazka (Sprawdź: Wstawianie grafiki na stronie www),
  • boczne menu nawigacyjne,
  • środek strony, w którym będziemy umieszczać zawartość, tj. tekst, grafikę,
  • dodatkowa kolumna z prawej strony, w której możemy umieścić dodatkowe informacje lub reklamy,
  • stopka strony (w stopce możemy np. podać dane kontaktowe).

Rys. 3. Schemat szablonu złożonego z trzech kolumn.

  1. Przygotuj ponownie pustą stronę HTML, zgodnie ze schematem przedstawionym powyżej, i nazwij ją index3.html.
  2. Do strony index3.html w sekcji HEAD wstaw poniższy kod.
<style type="text/css">

html, body {
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 0;
}

#strona {
    width: 1000px;
}

#gora {
    background-color: #BBB;
}

#menu {
    width: 200px;
    float: left;
    overflow: hidden;
    background-color: #DDD;
}

#zawartosc {
    width: 600px;
    float: left;
    overflow: hidden;
    background-color: #FFF;
}

#stopka {
    clear: both;
    width: 100%;
    background-color: #EEE;
}

#info {
    width: 200px;
    float: right;
    overflow: hidden;
    background-color: #DDD;
}

</style>
  1. Następnie w sekcji BODY wstaw następujący kod:
<div id="strona">
    <div id="gora">Miejsce na baner / logo</div>
    <div id="menu">Menu nawigacyjne</div>
    <div id="zawartosc">Zawartość strony tj. miejsce na tekst / zdjęcia</div>
    <div id="info">Dodatkowe informacje</div>
    <div id="stopka">Stopka strony</div>
</div>
  1. Zapisz zmiany w pliku i otwórz lub odśwież go w przeglądarce. Sprawdź, czy otrzymałeś wygląd podobny jak na Rys. 4.

Rys. 4. Szablon z trzema kolumnami – podgląd w Internet Explorer 9.

Zmiana układu elementów

Teraz nauczymy się, jak zmienić układ elementów strony, czyli np. jak przenieść menu na prawą stronę, a treść strony na lewą. W tym celu posłużymy się szablonem z dwiema kolumnami (plik index.html). Aby osiągnąć nasz cel zmodyfikujemy tylko i wyłącznie jedną linijkę stylu CSS. Aby ustawić menu z prawej strony, musimy określić jego wyrównanie do prawej strony, czyli zmienić własność elementu float z left na right.

  1. W pliku index.html w nagłówku zmień styl 3menu, zgodnie z przedstawionym kodem:
#menu {
    width: 150px;
    float: right;
    overflow: hidden;
    background-color: #DDD;
}
  1. Zapisz zmiany w pliku i otwórz lub odśwież go w przeglądarce. Sprawdź, czy otrzymałeś wygląd podobny jak na Rys. 5.

Rys. 5. Szablon z przestawioną kolumną menu na prawą stronę – podgląd w Internet Explorer 9.

Podsumowanie

W tym artykule nauczyliśmy się projektować dwa różne układy elementów na stronie WWW. Za pomocą znaczników div określiliśmy najważniejsze elementy strony, które później odpowiednio sformatowaliśmy za pomocą CSS.

W kolejnym artykule nauczymy się tworzyć i formatować menu w CSS.

Dodatkowo zobacz:

Z tego samouczka dowiesz się jak projektować dwa różne układy elementów na stronie WWW. Jak za pomocą znaczników div określić najważniejsze elementy strony, a następnie odpowiednio je sformatować za pomocą CSS.