Vous devriez d'abord faire les préparatifs nécessaires pour la mise en place du site Web. Créez la structure de répertoire souhaitée. Cela pourrait ressembler à ceci, par exemple :
steuerberater
---images
---css
C'est une structure de répertoire très typique. On place les pages HTML sur le niveau principal. Les fichiers CSS vont dans le répertoire css-, tandis que toutes les images sont stockées dans le répertoire images-. Ainsi, ajoutez toutes les images dans le répertoire images- que vous avez précédemment découpées dans la mise en page.
Construire l'ossature
Créez un nouveau fichier CSS à l'intérieur du répertoire css-. Ensuite, liez-le à votre fichier HTML. (Dans mon exemple, le fichier HTML s'appellera index.html). Ce fichier est désormais le point central des tutoriels à venir.
Ajoutez d'abord la structure HTML de base que vous connaissez déjà à index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dein Steuerberater</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Assurez-vous également d'inclure immédiatement le fichier de feuille de style. Et maintenant, c'est parti.
L'élément externe est un conteneur div.
<div class="main-container"> </div>
Vous pouvez également formater ce conteneur immédiatement avec la syntaxe CSS.
.main-container {
width: 100%;
float: left;
}
Le conteneur principal est doté d'une largeur de 100%, et il flotte sur la gauche. L'avantage de la largeur définie à 100% : vous pouvez par exemple insérer un fond avec dégradé de couleurs. Ce fond s'étendrait ensuite sur toute la largeur de l'écran.
Je crée deux autres éléments div à l'intérieur du conteneur principal.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Ces éléments seront également formatés. La zone du contenu proprement dite aura une largeur de 1000 pixels. En spécifiant margin: 0px auto;, une centration horizontale de l'élément est également obtenue.
.container {
width: 1000px;
margin: 0px auto;
}
Poursuivons avec le formatage de l'élément page.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Cet élément est la zone de contenu réelle de la page. C'est là que tous les autres éléments sont placés. Cet élément a également une largeur fixe de 1000 pixels. La spécification de padding définit les marges internes. Ainsi, la marge supérieure est définie à 40 pixels, et les autres marges sont définies à 0 pixel.
À ce stade, nous avons déjà mis en place la structure (assez) générale de la mise en page.
Il est maintenant temps de remplir cette structure de contenu. La page est d'abord divisée en trois lignes.
• En-tête
• Contenu
• Pied de page
Pour cela, trois autres zones de div sont définies.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Ces trois zones sont bien sûr également mises en forme à l'aide de 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;
}
À présent, les différentes zones peuvent être davantage personnalisées.
Commençons par le formatage de la zone d'en-tête de la page. Celle-ci est à son tour composée de plusieurs éléments :
• Logo/Titre
• Menu supérieur
• Grande image
Ces trois éléments sont définis à l'intérieur de top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Dein Steuerberater</h1> </div> <div class="topmenu"> Le menu supérieur </div> <div class="header-img"> </div> </div>
C'est la structure de base de la zone d'en-tête de la page. Elle sera également formatée en 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;
}
La syntaxe contient deux "particularités". Regardez d'abord le contenu de la classe topmenu. Deux spécifications concernant l'image d'arrière-plan sont remarquées ici.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
La petite image d'un pixel menue.jpg. est intégrée. Cela représente le dégradé de couleur que vous connaissez dans le menu supérieur. En spécifiant background-repeat: repeat-x;, l'image est répétée horizontalement jusqu'à ce que l'élément soit entièrement rempli.
Diviser la zone de contenu
Poursuivez avec la zone de la page où les contenus seront finalement affichés. Cela se fait à l'intérieur de l'élément div content. Cette zone est divisée en plusieurs éléments. Tout d'abord, il y a une petite image d'accroche et un message de bienvenue.
La syntaxe HTML correspondante est la suivante :
<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">Bienvenue sur notre site web</h1> <p>Voici un texte de bienvenue</p> </div> </div>
Cette zone est également subdivisée en deux parties. L'image est affichée à gauche, suivie du message de bienvenue à droite. La classe content-image est cruciale à cet égard.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Cette classe enveloppe l'image et le message de bienvenue. À l'intérieur de content-image, il y a à nouveau deux autres sections.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Bienvenue</div>
Si vous souhaitez afficher une seule grande image ou autre chose à la place de cette division en deux parties, vous regroupez ces deux parties dans un élément div. La syntaxe CSS pour la variante à deux éléments est la suivante :
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Le résultat devrait maintenant s'afficher dans le navigateur de la manière suivante :
Continuons avec trois autres éléments:
• une boîte de texte à gauche,
• une boîte de texte à droite,
• le menu de droite.
La syntaxe HTML est la suivante dans ce cas :
<div class="teaser"> <div class="left"> Conteneur pour le texte à gauche </div> <div class="right"> Conteneur pour le texte à droite </div> </div> </div> <div class="content-right"> Le menu de droite </div> </div>
Et bien sûr, voici également la syntaxe 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 fin de ce tutoriel se trouve la structure de base de notre site web.
Cette structure de base doit maintenant bien sûr être remplie avec les contenus appropriés. Cela se fera dans le prochain tutoriel.
