Podstawowa struktura strony internetowej – część 2

Bardzo ważną częścią kwalifikacji E.14 jest umiejętność stworzenia podstawowej struktury strony przy użyciu przede wszystkim tzw. divów czyli bloków. Do jej stworzenia poza znacznikami używanymi w języku HTML potrzebne nam będą elementy języka CSS.

Naszym celem jest tak wyglądająca strona:

stronadivy

Zaczynamy od wstawienia do pliku z rozszerzeniem .html znanych nam znaczników tworzących strukturę dokumentu HTML wraz z podziałem na bloki. Poza tym w środku znacznika head umieszczamy odwołanie do pliku CSS:

<html>

<head>

   <meta charset=”UTF-8″>

   <link rel=”stylesheet” type=”text/css” href=”arkusz.css”>

</head>

<body>

<div>     </div>

<div>     </div>

<div>     </div>

</body>

</html>

Efektem końcowym jest 5 bloków: menu lewe, prawe, baner, blok przeznaczony na treść oraz stopka. Żeby stworzyć taki podział najpierw dzielimy stronę na 3 bloki: menu lewe, menu prawe i blok pomiędzy nimi, który podzielimy na sekcje banera, treści i stopki.

Tym razem użyjemy klas zamiast identyfikatorów. Poprzez klasę tak jak w przypadku identyfikatorów możemy nadać danemu obiektowi specjalną nazwę (w tym przypadku klasę), dzięki której będziemy mogli odwołać się do tych obiektów w kodzie kaskadowych arkuszy stylów CSS.

Klasę nadajemy w następujący sposób:

<div class=”nazwa”>     </div>

Nazwy są opcjonalne, najlepiej jednak dopasować je zgodnie z przeznaczeniem danego bloku.

<body>

<div class=”menul”>  

  <a href=”Strona1.html” target=”ramka”> Link_1 </a>

<br>

   <a href=”Strona2.html” target=”ramka”> Link_2 </a>

</div>

<div class=”srodek”>     </div>

<div class=”menup”>  

   <a href=”Strona3.html” target=”ramka”> Link_3 </a>

<br>

   <a href=”Strona4.html” target=”ramka”> Link_4 </a>

</div>

</body>

Wewnątrz bloków menu wprowadzamy od razu hiperłącza. Żeby rozmieścić je w taki sposób jak na przygotowanym szablonie u góry posta możemy je przesunąć w dół dzięki znacznikom <br>, natomiast chcąc w prosty sposób odsunąć je od lewej krawędzi bloków wprowadzamy spacje &nbsp.

Teraz blok, znajdujący się w środku z nadaną klasą srodek dzielimy w następujący sposób:

<div class=”srodek”>    

<div class=”baner”> </div>

<div class=”tresc”>

  <iframe src=”ramka.html” name=”ramka”> </iframe>

</div>

<div class=”stopka”> </div>

</div>

Wewnątrz bloku tresc tworzymy ramke z użyciem znacznika iframe, do której będą przesyłane hiperłącza.

Mamy już podział na divy, czas na rozmieszczenie ich na stronie przy pomocy CSS.

Do klas odwołujemy się poprzez wpisanie nazwy klasy poprzedzonej kropką.

body,html{margin:0;
                    padding:0;}
.menul{height:100%;
              width:12%;
              float:left;
              background-color:yellow;}
.srodek{height:100%;
               width:76%;
               float:left;}
.menup{height:100%;
               width:12%;
               float:right;
               background-color:yellow;}

Na początek co jest ważne to to, że nie mamy już znacznika <style>, ponieważ jesteśmy w zewnętrznym arkuszu CSS (oddzielnym pliku). Tutaj po prostu wprowadzamy kod CSS.

Zaczynamy od opcjonalnego usunięcia marginesów, a następnie określamy wysokość, szerokość, położenie czy tło naszych trzech głównych bloków.

.baner{height:12%;
             width:100%;
             background-image: url(‘baner.png’);
             background-position:center;
             background-size:100%;}
.tresc{height:78%;
            width:100%;
            background-color:gold;}
iframe{height:100%;
             width:100%;
             border:none;}
.stopka{height:10%;
               width:100%;
               background-color:orange;
               clear:both;}

Następnie określamy wymiary bloków oraz ramki (będącej w bloku tresc) znajdujących się w tym większym środkowym. W porównaniu z poprzednim postem widać jedną zmianę w sekcji banera. Tym razem w banerze nie mamy tekstu tylko obrazek, który jest tłem tego bloku. Dodajemy ścieżkę do obrazka, który ma być tłem, określamy np. jego położenie oraz rozmiar.

Koniec zadania.

Kod pliku HTML:

<html>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”arkusz.css”>
</head>
<body>

<div class=”menul”>

<br>
<br>
<br>
<br>
<br>
<br>

&nbsp&nbsp <a href=”Strona1.html” target=”ramka”> Link_1 </a>

<br>

&nbsp&nbsp <a href=”Strona2.html” target=”ramka”> Link_2 </a>

</div>
<div class=”srodek”>

<div class=”baner”> </div>

<div class=”tresc”>

<iframe src=”ramka.html” name=”ramka”> </iframe>

</div>

<div class=”stopka”> </div>

</div>
<div class=”menup”>

<br>
<br>
<br>
<br>
<br>
<br>

&nbsp&nbsp <a href=”Strona3.html” target=”ramka”> Link_3 </a>

<br>

&nbsp&nbsp <a href=”Strona4.html” target=”ramka”> Link_4 </a>

</div>

</body>
</html>

Kod pliku CSS:

body,html{margin:0;
padding:0;}
.menul{height:100%;
width:12%;
float:left;
background-color:yellow;}
.srodek{height:100%;
width:76%;
float:left;}
.baner{height:12%;
width:100%;
background-image: url(‘baner.png’);
background-position:center;
background-size:100%;}
.tresc{height:78%;
width:100%;
background-color:gold;}
iframe{height:100%;
width:100%;
border:none;}
.stopka{height:10%;
width:100%;
background-color:orange;
clear:both;}
.menup{height:100%;
width:12%;
float:right;
background-color:yellow;}

Gotowa strona:

stronadivy

 

 

 

 

 

Dodaj komentarz