Créer un menu newspound avec Fireworks (2nd partie) | RED INTERACTIV BLOG | le Red Blog

Titre de nos articles, tutoriels et wallpapers

Créer un menu newspound avec Fireworks (2nd partie)

Créer un menu newspound avec Fireworks (2nd partie)

Il s’agit de la deuxième partie de la conception de sites Web, ce tutoriel traite de comment créer un site web en utilisant ensuite Fireworks CSS et XHTML.
Il ya quelques jours nous avons publié la première partie du tutoriel lorsque nous avons conçu la page, maintenant dans cette partie, nous allons vous montrer comment passer de cette image à la page web, en utilisant une CSS et HTML.

ETAPE 1
Premièrement, nous allons étudier la mise en page et régler certains paramètres, comme quelles seront les principales régions, afin que nous puissions structurer le html.

ETAPE 2
Pour créer le fichier html, ouvrez votre éditeur de texte préféré (Bloc-notes, Dreamweaver, TextMate, etc.) Ici, j’ai utilisé Smultron. Ce que nous avons à faire maintenant c’est créer les domaines suivants les régions que nous avons mis en avant:
HEADER
<div id= »header »>
<div><img src= »images/logo.jpg »/></div>
</div>
CONTENU
Ici nous utilisons 2 div pour contenu central car nous utilisons des ombres sur les deux côtés.
<div id= »content »>
<div id= »main »>
</div>
</div>
MENU
<div id= »content »>
<div id= »main »>
<div id= »menu »>
<!– * Main menu * –>
<ul>
<li><a href= »# »>Home</a></li>
<li><a href= »# »>About</a></li>
<li><a href= »# »>Works</a></li>
<li><a href= »# »>Contact</a></li>
</ul>

<!– * Links right side * –>
<ul>
<li><a href= »# »>Login</a></li>
</ul>
</div>
</div>
</div>
SUPPORT SOUS LE MENU
<div id= »content »>
<div id= »main »>
<div id= »menu »>
<!– * Main menu * –>
<ul>
<li><a href= »# »>Home</a></li>
<li><a href= »# »>About</a></li>
<li><a href= »# »>Works</a></li>
<li><a href= »# »>Contact</a></li>
</ul>
<!– * Links right side * –>
<ul>
<li><a href= »# »>Login</a></li>
</ul>
</div>
<div id= »sub_nav »>
<span>Zee is a small studio located in Brazil.</span>
<span><a href= »# »>Register</a> | <a href= »# »>Request Password</a></span>
</div>
</div>
</div>
CODE COMPLET
<body>
<div id= »header »>
<div><img src= »images/logo.jpg »/></div>
</div>
<div id= »content »>
<div id= »main »>
<div id= »menu »>
<!– * Main menu * –>
<ul>
<li><a href= »# »>Home</a></li>
<li><a href= »# »>About</a></li>
<li><a href= »# »>Works</a></li>
<li><a href= »# »>Contact</a></li>
</ul>
<!– * Links right side * –>
<ul>
<li><a href= »# »>Login</a></li>
</ul>
</div>
<div id= »sub_nav »>
<span>Zee is a small studio located in Brazil.</span>
<span><a href= »# »>Register</a> |
<a href= »# »>Request Password</a></span>
</div>

<!– * Round corners for the content * –>
<div>
<div>
<!– * Round corners each item * –>
<div>
<div>
<div>
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<!– * Round corners each item * –>
<div>
<div>
<div>
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id= »footer »></div>
</body>
Enregistrez ce fichier sous menu.html.

ETAPE 3
Maintenant que nous avons le code prêt, nous allons ouvrir le Fichier png. et exporter les images que nous allons utiliser dans nos CSS. Pour ce faire, nous allons utiliser l’outil Slice, et nous allons créer toutes les tranches nécessaires avec cet outil, comme on en voit dans les images ci-dessous:

ETAPE 4
Enregistrez toutes vos images dans le dossier images, à droite sur la racine où est le fichier menu.html.

ETAPE 5
Avec toutes ces images et le code prêt, nous allons commencer notre CSS. J’ai utilisé CSSEdit pour faire cela, mais vous pouvez utiliser l’éditeur de votre choix. Pour commencer, collez le code suivant à l’intérieur du paragraphe «Head» sur menu.html:
<link rel= »stylesheet » type= »text/css » href= »style.css »/>

ETAPE 6
Nous utilisons ici aussi un fichier pour réinitialiser toutes les configurations tag, ce qui rendra la manipulation des objets dans la mise en page beaucoup plus facile. Téléchargez le fichier « reset.css » (il est joint à la fin de ce tutoriel) et déposez-le sur la racine (Root) avec le fichier menu.html. Ouvrez un document CSS et enregistrez-le sous le nom de « asstyle.css. » Dans le haut du document, importez les reset.css avec le code suivant:
@import url(« reset.css »);

ETAPE 7
Maintenant, nous commencer à créer le style de nos principaux ID. Rappelez-vous, je vous ai dit auparavant que nous allions appliquer des ombres sur les côtés du contenu # et # main.
body {
font-family: Arial, Helvetica, Geneva, sans-serif;
color: #000;
background: #595D67;
}
#header {
height: 100px;
background: url(images/bg_header.jpg) left top repeat-x;
position: relative;
}
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
#main {
background: url(images/bg_shadow_right.jpg) right top repeat-y ;
padding-bottom: 30px;
}
#menu {
height: 30px;
background: url(images/bg_menu.jpg) left top repeat-x;
margin: 0 7px;
}
.wrapp {
width: 844px;
position: relative;
margin: 0 auto;
}
#footer {
height: 100px;
background: url(images/bg_footer.jpg) left top repeat-x;
position: relative;
}

Notez que la largeur du contenu # est 844px, parce que c’est la 700px pour le corps et un autre 7px d’ombre pour chaque côté. Il est important de savoir que nous allons centraliser le contenu principal. Nous utilisons 3 attributs à placer au centre du navigateur: largeur, la marge d’e position. regardez :
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}

ETAPE 8
Maintenant, le menu. J’attire votre attention sur le code que nous avons utilisés pour le faire.A l’intérieur du ul « » C’est là que nous plaçons tous les liens. Remarquez que nous avons utilisé une class = « Nav_right » sur le deuxième « ul », parce que nous allons le placer sur le côté droit du menu, c’est ce que nous avons utilisé ici pour notre lien de connexion.

#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
Voyons maintenant la position de notre « ul » S et placer les images qui vont sur les extrêmes menu:
#menu ul.nav_left {
padding-left: 30px;
height: 30px;
background: url(images/bg_leftMenu.jpg) left top no-repeat; / left image /
}
#menu ul.nav_right{
position: absolute; / position the menu on the right side /
right: 7px;
top: 0;
padding-right: 30px;
height: 30px;
background: url(images/bg_rightMenu.jpg) right top no-repeat; / right image /
}
Nous avons presque fini. Faites un style pour notre lien et vérifiez la façon dont ils vont apparaître.
#menu ul li {
float: left; / precisamos deste float para funcionar no IE /
background: url(images/divider_menu.jpg) left top no-repeat;
}
#menu ul li a.last { / add a image to the last element /
background: url(images/divider_menu.jpg) right top no-repeat;
}
#menu ul li a{
display: block;
float: left;
height: 30px;
padding: 0 18px;
text-decoration: none;
color: #FFF;
font: .96em/28px « Lucida Grande », Lucida, Verdana, sans-serif;
}
#menu ul li a:hover {
background: url(images/bg_menu_active.jpg) left top repeat-x;
}

ETAPE 9
Ici, nous pouvons voir comment le style va chercher le texte et les liens de soutien sous le menu. C’est alors que nous appliquons l’ombre au-dessous.
#sub_nav {
height: 50px;
background: url(images/bg_shadow_subNav.jpg) left top no-repeat;
margin: 0 7px;
line-height: 50px;
position: relative;
font-size: .8em;
color: #CCC;
}

#sub_nav span.tip {
left: 30px;
position: absolute;
}
#sub_nav span.links {
right: 30px;
position: absolute;
color: #F90;
}
#sub_nav span.links a{
text-decoration: none;
color: #F90;
}
#sub_nav span.links a:hover {
text-decoration: underline;
}

ETAPE 10
Maintenant, vous devez construire les cases de texte en bas afin que nous puissions terminer la mise en page.
Nous éviterons de nous perdre dans les détails parce que cette démarche n’est pas le coeur de notre objectif pour ce tutoriel, mas nous allons discuter plus avant sur les zones de coins arrondis e texte dans un autre article. Mais si vous téléchargez les fichiers finaux, vous pourrez constater que l’ensemble du processus est très simple.

RÉSULTAT FINAL
Pour voir à quoi votre présentation ressemblerait à cette étape, totalement tabless et multi-navigateur, cliquez ici pour voir le résultat final :

Auteur: Fabiano Meneghetti

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. Si vous avez des questions sur certains postes, s’il vous plaît n’hésitez pas à me contacter ou me suivre sur Twitter.

Commentez, réagissez. Donnez nous votre avis.
Laisser un commentaire ci-dessous.

© 2009 RED INTERACTIV BLOG | le Red Blog

Subscribe

Les contenus du Red Blog sont mis à disposition sous un contrat Creative Commons.