Kurs HTML praktycznie - Kontenery z menu oraz treścią właściwą

Artykuł
01/05/2012

Autor: Łukasz Kazimierz Krajkowski

Opublikowano: 2012-01-04

W poprzednim samouczku Tło i nagłówek witryny określiłeś proste tło z elementem grafiki zewnętrznej. Wycentrowałeś główny kontener, który będzie zawierał pozostałą treść witryny. Przygotowałeś również miejsce na dwa menu oraz logotyp w nagłówku. Istotną kwestią witryny jest jednak treść właściwa. Strona może istnieć bez grafiki, bez żadnych dodatkowych ozdobników, jednak musi zawierać zawsze treść, która powinna być odpowiednio wyeksponowana. Stronę warto budować od góry ku dołowi. Należy najpierw przygotować główne kontenery, a następnie zagłębiać się w każdy z nich z osobna. Pozwala to na efektywne przygotowanie witryny i skupienie się na jednym elemencie, od początku do końca pracy nad nim.

Po wykonaniu zadań:

przygotujesz kontener z właściwą zawartością,
wydzielisz miejsce na menu,
wydzielisz miejsce na treść, którą chcesz przekazać użytkownikowi.

Implementacja

Rozpoczynając pracę powinieneś posiadać:

Microsoft Visual Web Developer 2010 Express,
pliki wynikowe z samouczka Tło i nagłówek witryny, jeśli ich nie posiadasz, pobierz je z archiwum Samouczek-HTML-CSS.zip z katalogu Samouczek-HTML-CSS\HTML-Praktycznie\04.Przygotowanie-kontenera-z-menu-oraz-trescia-wlasciwa\Start\.

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 odpowiednia treść, która pozwoli użytkownikowi odnaleźć zawartość, której szuka. Aby ułatwić przeszukiwanie Twojej witryny, musisz zadbać o przejrzystą nawigację. Standardowym miejscem elementów nawigacyjnych, takich jak różnego typu menu, jest lewa strona witryny. Celem tego samouczka jest przygotowanie kontenera z właściwą zawartością, zgodnie z projektem dostarczonym przez grafika. Wykorzystaj do tego zarówno kod HTML jak i CSS. Następnie utwórz nagłówek. Następnie utwórz kontener na menu lewe oraz treść właściwą, umieszczoną po prawej stronie menu lewego.

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

Rys. 1. Efekt końcowy.

Przygotowanie głównego kontenera na zawartość właściwą

Twoim zadaniem jest przygotowanie kontenera, w którym umieścisz menu w późniejszym czasie oraz treść, którą będziesz chciał przekazać Twojemu użytkownikowi.

Uruchomienie Projektu.

Przejdź do katalogu, w którym zapisałeś projekt z samouczka Tło i nagłówek witryny.
Klikając dwukrotnie plik AK2011.sln, uruchom środowisko pracy.

Ustawienie wyglądu kontenera #zawartosc_wlasciwa w CSS.

Otwórz plik styl.css, klikając na niego dwukrotnie w panelu Solution Explorer.
Dopisz poniższy kod:

#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*/
}

Uruchom witrynę w przeglądarce. Powinieneś ujrzeć widok podobny jak na Rys. 2.

Rys. 2. Widok witryny po zmianach w styl.css.

Przygotuj teraz kontener na główne menu witryny, umieszone po lewej stronie treści, którą chcesz przekazać użytkownikowi.

Dodanie kontenera z menu ustawionego po lewej stronie kontenera #zawartosc_wlasciwa.

Przejdź do pliku index.htm.
Usuń treść zawartą pomiędzy znacznikami kontenera zawartosc_wlasciwa.
W kontenerze zawartosc_wlasciwa dodaj element div o id menu_lewe:

<div id="menu_lewe"></div>

Wewnątrz nowoutworzonego kontenera wpisz:

menu

Zapisz zmiany, stosując skrót Ctrl+Shift+S.

Ustawienie wyglądu #menu_lewe w CSS.

W pliku styl.css dodaj styl dla kontenera o id menu_lewe:

#menu_lewe
{
  width: 200px; /* szerokość menu */
  min-height: 600px; /* minimalna wysokość */
  float:left; /* oblewanie element */
  margin-left: 20px; /* odstęp kontenera od lewej krawędzi kontenera nadrzędnego */
}

Uruchom stronę.
Przez dodanie wpisu do bloku, zmień kolor tła kontenera #menu_lewe :

background-color: Red; /* kolor tła */

Odśwież stronę. Zauważysz, że po lewej stronie witryny jest odpowiednio wypozycjonowany kontener przeznaczony na menu (Rys. 3.).

Rys. 3. Czerwony kontener przeznaczony na menu.

Przygotowanie kontenera dla treści właściwej

Przygotuj teraz kontener, w którym umieścisz najważniejszą treść witryny dla użytkownika strony.

Przygotowanie kontenera od strony HTML.

Dodaj nowy div do kontenera #zawartosc_wlasciwa:

<div id="glowna_tresc">treść właściwa</div>

Stylizacja kontenera w CSS.

Dodaj nowy blok do styl.css:

#glowna_tresc
{
  margin-left: 240px; /* margines od lewej */
  margin-right: 20px; /* margines od prawej */
  background-color: Red; /* kolor tła */
  min-height: 800px; /* wysokość minimalna */
}

Uruchom witrynę. Powinieneś ujrzeć widok, jak na Rys. 4.

Rys. 4. Dwa kontenery w głównej części witryny.

Wyczyszczenie zmian pomocnych przy debugowaniu

Ponieważ dodałeś kilka elementów, które miały Ci ułatwić zobrazowanie zmian w kodzie, musisz oczyścić swój kod.

Usuń następującą linijkę z bloku #menu_lewe:

background-color: Red;  /* kolor tła */

Usuń następującą linijkę z bloku #glowna_tresc:

background-color: Red;  /* kolor tła */

Podsumowanie

W tym samouczku nauczyłeś się, jak wykorzystać kod HTML i CSS do przygotowania kontenera, który jest przeznaczony na menu główne oraz treść właściwą witryny.

W kolejnym samouczku nauczysz się, jak przygotować kontener ze stopką.

Dodatkowo zobacz:

Udostępnij za pośrednictwem