Tutoriel interface finale 50d
Dans Dreamweaver
Dans le dossier de votre site, créer un nouveau dossier qui portera le même nom
que votre interface,
le mien (interfinale_50b)... dans ce dossier nous y placerons aussi les
images, les tubes
et la musique de
cette interface.
Mes tubes, et ma musique ici
Voici le résutat de l'interface ici
Voici le résutat de l'interface accueil ici
1 - Ouvrir dreamweaver, puis ... fichier / Nouveau ... ensuite,
comme la capture du dessous.
Puis cliquer sur créer...
2-Écrire le ... titre ... de sa page (interfinale_50b)
3-Fichier / Enregistrer sous ... on enrégistre dans le dossier qu’on vient de créer
(interfinale_50b).
__________________________________
On place la règle Css pour le body
Pour travailler avec des calques ou des éléments PA, on se doit de mettre un wrapper.
Style Css pour le Body.
On place la règle Css pour le body
On clique sur l’icône … règle Css dans
le panneau à droite comme ci-dessous
Un panneau va s’ouvrir
On place le ... Type de Sélecteur ... sur ... Balise
Et le nom du sélecteur ... Body
P/S : si le body est sélectionné dans la barre d’état
il s’inscrit tout seul.
On clique sur ok
Dans la fenêtre qui s’ouvre, comme la capture ci-dessous.
On clique sur ... Arrière plan ... et on lui donne une couleur pour le moment,
on pourra la changer plus tard, on en a besoin pour le wrapper.
Balise Div
4-On place notre balise div afin de convenir à toutes les résolutions d’écrans.
Nouvelle règle Css pour de ID
On clique sur l’icône … règle Css dans le panneau à droite comme ci-dessous
Un panneau va s’ouvrir comme ceci,
On place le ... Type de Sélecteur ... sur... Balise
Le nom du sélecteur ... on écrit ... div.
puis ... ok
Un autre panneau s’ouvre que voici
On se place sur ... Positionnement ... puis on clique sur la petite flèche
de ... Position... que j’ai encerclé puis sur... relative... et sur ok.
Maintenant c’est fixé pour toutes les div et le wrapper.
________________________
5-On crée maintenant notre wrapper, qui est le contenant de notre page, qui
contiendra tout ce qu’on y ajoutera.
Nouvelle règle Css pour le ID du wrapper
Type de sélecteur : ID
Nom du sélecteur : wrapper ... puis ok.
Dans la fenêtre qui apparait, on clique sur
Boite
Puis on écrit la largeur et la hauteur de notre boite.
Le Padding ... laisse une marge pour notre police d’écriture
Le margin : Centre le contenant dans notre page.
Puis on clique sur ... Positionnement ... et on met le ... Z-Index ... à 1,
car cette div sera à la première position sur le body, les autres la superposeront,
la prochaine sera index 2 puis 3 etc.
6-Insérer une balise div pour le wrapper
____________________________________________
Insérer : Au point d’insertion
ID : Wrapper
Puis ok.
Comme la capture ci-dessous
Si vous mettez une couleur dans la règle Css du wrapper et celle du body
vous les voyez très bien tous les deux.
* Placer le fond-interface50d dans le wrapper.
Dans la règle Css du wrapper, cliquer sur ... Arrière plan ...
comme sur la capture,
puis placer la couleur du ... Background-color... La mienne : #C6D3DD
puis, cliquer sur ... Parcourir ... et aller chercher votre image de fond
que nous avons fait avec le masque dans psp.
Puis on clique sur ok
Et voilà notre bg du wrapper est placé.
_____________________________
7 -Élément Pa (calque) dans le wrapper
Pour que l’élément Pa ou calque soit dans le wrapper. On lui fait une règle Css
avec
un identifiant (le mien ... Texte...)
On sélectionne le wrapper dans le sélecteur de balise
et on est prêt à faire notre Css.
Type de sélecteur : Composé
Nom du sélecteur : #wrapper #texte ... avec un espace entre les deux noms.
Puis on clique sur ok
Dans la fenêtre qui s’ouvre
On clique ... Positionnement
Position : Absolute
Widht : 300 et Height : 300
Placement :
Top : 100 et right : 100
Z-Index : 2
Puis on clique sur ok.
On pourra changer ses grandeurs plus tard!
8_Insérer une balise div
Insérer : Après le début de la balise wrapper
ID : texte
puis sur ok
Le Pa ou calque apparait, on peut le déplacer et les configurations changent dans la
règle Css du #wrapper #texte.
Si on veut d’autre élément Pa dans le wrapper on refait le #7
et #8… et on en a une autre.
Ne pas oublié de changer le chiffre du ... Z-Index ...
Dans chaque calque (Pa) on place des images, des gif, du texte et ce qui est
merveilleux tout reste bien centré...
Nous allons y placer notre bouton ... Entrer ...
 
Nous avons enrégistré ces deux boutons dans le dossier
de notre interface...
Nous placons un élément Pa ou calque en répétant le no. 7 et 8...
puis on clique sur ...
Insertion / Objets image / Image survolée ...
dans le panneau qui s'ouvre (comme la capture)
On écrit : Le nom de l'image
On clique sur... parcourir
... de ... Image originale ...
et on va chercher le bouton que l'on verra le premier...
On clique sur ... Parcourir ... de ... Image survolée ...
le bouton qui s'ouvrira au survol de la souris.
Dans ... Texte secondaire ... on peut écrire une courte d'escription.
Et voilà notre bouton entrer est maintenant fonctionnel.
9- Si on veut écrire plusieurs textes de différentes couleurs, grandeur ou de
polices différentes, on clique sur ... Format ... En-tête 1...
Puis on fait une règle css avec les coordonnées qui nous plaît.
Comme ceci
On tape ok puis...
Dans type :
La police, la grandeur, la couleur et cochez none,
si on ne veut pas de décoration.
Si on veut centrer son texte
On clique sur ... Bloc ... puis sur la petite flèche de ... Tex-Align ...
et on y place ... Centrer ...
On peut avoir 6 configurations de texte, toujours en cliquant sur ... Format ... puis sur le
chiffre de 1 à 6 puis faites votre Css et quand vous écrivez un texte vous le mettez
en surbrillance et cliquez sur ... Format ... puis sur un des chiffres que l’on désire.
On peut faire les 6 configurations du ...Format : en-tête ... et s’en servir plus tard dans
notre page.
10_Copier les codes pour la page accueil
Voici une façon de faire
afin de ne pas tout recommencer ses règles Css
pour chaque page.
Une fois l'interface fait, on copie les règles Css et on les colle dans
une nouvelle page
sur (aucun style défin)i, comme sur la capture ci-dessous
afin de faire sa page d'accueil sans trop de difficulté.
Voici le résultat que ça donne :
Ensuite, nous avons juste à ... Insérer une balise div ...
come ceci...
Insérer : Après le début de la balise wrapper
ID : texte
puis sur ok
et notre calque (div)apparaît...
On fait la même démarche pour les autres calques.
En bas de notre page à droitre, on se crée une div pour écrire le nom de nos amies
du cours dreamweaver et on se fait une nouvelle page... qu'on donne comme titre ...
amis_dream ... Cete page est toute simple ... juste un tabeau et un peu de texte comme
la page ici
Et voilà c'est teminé!
Bonne réalisation à tous!
Ptite Louve
03-2012
|