Najpierw powinniście przygotować niezbędne przygotowania do uruchomienia strony internetowej. Stwórzcie pożądaną strukturę katalogów. Mogłaby wyglądać na przykład tak:
steuerberater
---images
---css
To jest całkowicie typowa struktura katalogów. Na głównym poziomie umieszcza się strony HTML. Pliki CSS trafiają do katalogu css-, podczas gdy wszystkie obrazy są przechowywane w katalogu images-. Wstaw do katalogu images- wszystkie obrazy, które wcześniej wycięliście z projektu.
Budowanie podstawy
Wewnątrz katalogu css- stwórz nowy plik CSS. Następnie dołączcie go do pliku HTML. (W moim przykładzie plik HTML będzie nosił nazwę index.html). Ten plik będzie teraz punktem wyjścia dla następnych samouczków.
Najpierw dodajcie do index.html znany już szkielet HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Twój doradca podatkowy</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Upewnijcie się również, że od razu dołączycie plik arkusza stylów. A teraz można zaczynać.
Zewnętrznym elementem jest kontener div.
<div class="main-container"> </div>
Ten kontener możecie od razu sformatować za pomocą składni CSS.
.main-container {
width: 100%;
float: left;
}
Główny kontener zostanie wyposażony w szerokość 100 procent i zostanie "float:left". Zaletą ustawienia szerokości na 100 procent jest możliwość wstawienia tła z gradientem kolorów na przykład. Tło to będzie rozciągać się na całej szerokości ekranu.
Tworzę dwa kolejne elementy div wewnątrz głównego kontenera.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Te elementy również zostaną sformatowane. Obszar treści otrzymuje szerokość 1000 pikseli. Przez deklarację margin: 0px auto; uzyskuje się również poziome wyśrodkowanie elementu.
.container {
width: 1000px;
margin: 0px auto;
}
Przechodzimy teraz do formatowania elementu strony.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Ten element stanowi właściwy obszar treści strony. Tutaj umieszczane są wszystkie inne elementy. Ten element również otrzymuje stałą szerokość 1000 pikseli. Deklaracja padding służy do określenia wewnętrznych marginesów. Górny margines wewnętrzny wynosi 40 pikseli, a pozostałe marginesy wewnętrzne wynoszą 0 pikseli.
Udało nam się już zrealizować (bardzo) ogólną strukturę układu.
Teraz nadszedł czas, aby wypełnić tę strukturę treścią. Stronę dzielimy na trzy wiersze.
• Nagłówek
• Treść
• Stopka
W tym celu definiujemy trzy kolejne obszary div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Te trzy obszary również zostaną oczywiście sformatowane za pomocą CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Teraz możemy dalej dostosowywać poszczególne obszary.
Najpierw zajmijmy się nagłówkiem strony. Składa się on z kilku elementów:
• Logo/Tytuł
• Górne menu
• Duży obraz
Te trzy elementy są zdefiniowane wewnątrz obszaru top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Twój doradca podatkowy</h1> </div> <div class="topmenu"> Górne Menu </div> <div class="header-img"> </div> </div>
To jest podstawowa struktura nagłówka strony. Także ten nagłówek jest teraz oczywiście formatowany za pomocą CSS.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
Składnia zawiera dwie "cechy specjalne". Najpierw spójrz na zawartość klasy topmenu. Tutaj wyróżniają się dwie informacje dotyczące obrazu tła.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Dołączony jest jeden pikselowy obrazek menue.jpg. Reprezentuje on znany wam gradient kolorów w górnym menu. Dzięki deklaracji background-repeat: repeat-x;, obrazek jest powtarzany poziomo aż do wypełnienia całego elementu.
Podział obszaru treści
Kolejnym krokiem jest obszar strony, w którym w końcu wyświetlane są treści. Dzieje się to w obrębie elementu div o klasie content. Ten obszar jest podzielony na różne elementy. Po pierwsze, jest mały obrazek zwiastujący i powitanie.
Składnia HTML dla tego fragmentu wygląda następująco:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Witajcie na naszej stronie</h1> <p>Oto tekst powitalny</p> </div> </div>
Ten obszar jest również podzielony na dwie części. Po lewej stronie wyświetla się obraz, a obok niego jest powitanie. Istotna tutaj jest klasa content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Ta klasa otacza obraz i powitanie. Wewnątrz klasy content-image są znowu dwie inne części.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Witajcie</div>
Jeśli zamiast takiego podziału chcecie wyświetlić tylko duży obraz lub coś innego, połączcie te dwie części w jeden element div. Natomiast składnia CSS dla wersji dwuelementowej wygląda tak:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Wynik powinien teraz wyglądać w przeglądarce następująco:
Kolejnymi trzema elementami są:
• lewy panel tekstowy,
• prawy panel tekstowy,
• prawe menu.
Składnia HTML dla tych elementów wygląda w tym przypadku następująco:
<div class="teaser"> <div class="left"> Obszar tekstowy po lewej stronie </div> <div class="right"> Obszar tekstowy po prawej stronie </div> </div> </div> <div class="content-right"> Menu po prawej stronie </div> </div>
Znów, tutaj jest oczywiście składnia CSS:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Na koniec tego samouczka znajduje się podstawowa struktura naszej strony.
Ta podstawowa struktura teraz musi zostać wypełniona odpowiednimi treściami. Będzie to miało miejsce w następnym samouczku.
