Dans ce tutoriel, nous allons vous montrer comment pourrez utiliser le fond d’écran que nous avons créé avec le tutoriel Fond d’écran Obama (1ère partie). Mais nous nous n’allons pas seulement voir comment créer le corps d’un site, mais également comment créer et structurer les principales régions du site, comme le menu, le contenu principal, la colonne de support et le pied de page.
Notre objectif n’est pas seulement d’assembler le site, mais aussi de montrer quelques concepts de base de CSS et Fireworks avec Intrégration Web.
ETAPE 1
La première chose que nous devons faire est d’exporter nos images. Tant que nous serons sur la conception de la strcture de base, nous n’aurons besoin que de deux images: l’arrière-plan et le logo.
ETAPE 2
Maintenant, nous allons créer le fichier html. La structure disposera de 4 régions: # header, # main, # sidebar et # footer. Notez que nous allons insérer le # main et # sidebar à l’intérieur d’un # content, de cette façon, nous aurons une plus grande souplesse pour modifier les choses aux étapes suivantes.
<body> <div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div> <div id="menu">MENU </div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT </div> <div id="sidebar">SIDEBAR </div> <div> <div id="footer">FOOTER </div> </div> </body>
ETAPE 3
Maintenant, nous allons créer le CSS. Vous pouvez utiliser l’éditeur de texte CSS de votre choix.Nous utilisons ici CSSEdit, et nous allons ouvrir Live Preview. Avec cela, nous serons en mesure d’afficher en temps réel les choses que nous modifions. Notez que la structure est très simple. Nous insèrons un corps # total avec « margin: 0 auto » et tous les autres éléments à l’intérieur.
body {
margin: 0;
color: #999;
font-weight: bold;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 2em;
background: #01245c url(bg_obama.jpg) no-repeat center top;
}
// AQUI ESTÁ NOSSO BG!
// Repare também que usamos a cor #01245C.
#total {
width: 960px;
margin: 0 auto;
}
#header {
height: 160px;
}
#header img{
border: 0;
}
#menu {
height: 60px;
background: #FFF;
text-align: center;
line-height: 60px;
}
#main {
float: left;
width: 650px;
background: #f0f0f0;
height: 400px;
text-align: center;
padding-top: 100px;
}
#sidebar {
float: right;
width: 310px;
background: #dadada;
height: 400px;
text-align: center;
padding-top: 100px;
}
#footer {
height: 150px;
text-align: center;
padding-top: 50px;
clear: both;
color: #15539c;
}
ETAPE 4
Vérifiez le résultat final … vraiment simple, non? Vous avez seulement à bien structurer le code et à pratiquer!
A propos de l’auteur
Je suis du Brésil, co-fondateur de Zee avec Fabio. Aujourd’hui, j’aime à jouer avec Fireworks, Photoshop et améliorer mes compétences en CSS. Je vous invite à me suivre sur Twitter.
-
Pages
Archives
Categories
- Inspiration (54)
- Interviews (5)
- Tutoriels (70)
- Conseils rapides (2)
- Fireworks (15)
- Illustrator (7)
- Photographie (1)
- Photoshop (37)
- Pixelmator (6)
- video (1)
- Wallpapers (34)
PUB
Commentez, réagissez. Donnez nous votre avis.
Laisser un commentaire ci-dessous.