Trebuie să faceți mai întâi pregătirile necesare pentru configurarea site-ului web. Creați structura de directoare dorită. Aceasta ar putea arăta de exemplu așa:
steuerberater
---images
---css
Aceasta este o structură de directoare foarte tipică. Pe nivelul principal se adaugă paginile HTML. Fișierele CSS sunt mutare în directorul css-, în timp ce toate imaginile sunt salvate în directorul images-. Așadar, adăugați în directorul images- toate imaginile pe care le-ați tăiat anterior din machetă.
Construirea scheletului
Creați un nou fișier CSS în directorul css-. Acesta va fi apoi inclus în fișierul HTML. (În exemplul meu, fișierul HTML va avea numele ) index.html. Acest fișier este punctul de plecare al tutorialurilor următoare.
Mai întâi, adăugați structura de bază HTML deja cunoscută în fișierul index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Steuerberater </title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Asigurați-vă că includeți și fișierul cu stiluri. Și acum să începem.
Elementul exterior este un container div.
<div class="main-container"> </div>
Acest container poate fi de asemenea formatat direct cu sintaxa CSS.
.main-container {
width: 100%;
float: left;
}
Containerul principal este echipat cu o lățime de 100% și se aliniază la stânga. Avantajul lățimii setate la 100%: de exemplu, puteți insera o imagini de fundal cu gradient de culoare. Acest fundal va acoperi întreaga lățime a ecranului.
Adăugăm două elemente div suplimentare în interiorul containerului principal.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Aceste elemente sunt formatate, de asemenea. Aria de conținut real obține o lățime de 1000 pixeli. Prin specificarea margin: 0px auto; se realizează o centratizare orizontală a elementului.
.container {
width: 1000px;
margin: 0px auto;
}
Trecem la formatul elementului page.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Acest element este adevărata zonă de conținut a paginii. Aici sunt plasate toate celelalte elemente. Acest element primește, de asemenea, o lățime fixă de 1000 pixeli. Specificarea padding-ului stabilește definiția marginilor interioare. Astfel, marginile interioare superioară este de 40 pixeli, iar celelalte margini sunt de 0 pixeli.
Astfel avem deja structura generală a machetei implementată.
Acum trebuie să umplem această structură cu conținut. Pagina este împărțită inițial în trei rânduri.
• Antet
• Conținut
• Subsol
Pentru aceasta se definesc încă trei zone div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Aceste trei zone sunt, de asemenea, formatate, prin 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;
}
Acum zonele individuale pot fi mai departe stilizate.
Începem cu zona antetului paginii. Acesta este, la rândul său, alcătuit din mai multe elemente:
• Logo/Titlu
• Meniul superior
• Imaginea mare
Aceste trei elemente sunt definite în interiorul zonei top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Steuerberater</h1> </div> <div class="topmenu"> Meniul superior </div> <div class="header-img"> </div> </div>
Aceasta este structura de bază a antetului paginii. Acesta va fi, de asemenea, evident, stilizat prin 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;
}
Sintaxa conține două "particularități". Începeți prin examinarea conținutului clasei topmenu. Aici se remarcă două specificații referitoare la imaginea de fundal.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Fișierul grafic cu un pixel menue.jpg. reprezintă gradientul de culori cunoscut în meniul superior. Prin specificația background-repeat: repeat-x; imaginea este repetată orizontal de atâtea ori până când elementul este complet acoperit.
Divizarea zonei de conținut
div content. Această zonă este împărțită în diferite elemente. În primul rând, există o mică imagine teaser și un salut de bun-venit.
Sintaxa HTML corespunzătoare este următoarea:
<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">Bun venit pe site-ul nostru</h1> <p>Aici urmează un text de salut</p> </div> </div>
Această zonă este, de asemenea, împărțită în două. În stânga se afișează imaginea, iar în dreapta salutul de bun-venit. Importantă este clasa 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;
}
Această clasă înconjoară imaginea și salutul. În interiorul content-image există din nou alte două zone.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Bun venit</div>
Dacă doriți să afișați doar o imagine mare sau altceva în loc de această divizare în două, aceste două zone sunt grupate într-un element div comun. Sintaxa CSS pentru varianta cu două elemente este următoarea:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Rezultatul ar trebui să arate acum în browser așa:
• o cutie de text în stânga,
• o cutie de text în dreapta,
• meniul din dreapta.
În acest caz, sintaxa HTML arată așa:
<div class="teaser"> <div class="left"> Container pentru text în stânga </div> <div class="right"> Container pentru text în dreapta </div> </div> <div class="content-right"> Meniul din dreapta </div> </div>
Și aici, firește, sintaxa 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;
}La finalul acestui tutorial, structura de bază a site-ului nostru ar trebui să fie completă.
