Dream Weaver Par Tutoriaux

uoc clooJe Motcel kOuAkOu
hLLp://www.lnLras.fr/LuLorlels/dreamweaver/dreamweaver-presenLaLlon.php
1

Sommair
resenLaLlon
L'envlronnemenL
Le squeleLLe
Calque conLeneur
ConLeneur (sulLe)
leullle de sLvles
SLvles (selecLeur)
SLvles (ballse)
SLvles (classe)
SLvles (maraln)
Loao du slLe
Menu du slLe
Menu deroulanL
SLvles du menu
remlere paae
Colonne
lormulalre
AuLres LuLorlels

Dreamweaver est un outil trs complet qui justifie son prix d'achat.
Il comporte un diteur WYSIWYG (What You See Is What You Get, ce que vous voyez est ce que vous
obtenez) qui permet de construire sa page assez rapidement, un diteur HTML qui permet de voir le code
gnr, un outil FTP (File Transfert Protocol) qui permet d'envoyer les pages cres sur votre ordinateur
vers l'ordinateur qui hbergera votre site au final, un gestionnaire de fichiers qui permet de modifier
automatiquement les liaisons entre les fichiers quand ceux-ci sont dplacs ou renomms ainsi que des
bibliothques d'objet, des livres complets d'assistance intgrs au logiciel, un diteur syntaxique pour
afficher le code de vos programmes, des assistants pour vous aider rdiger du code Javascript (encore un
langage comprendre ;-) et d'autres outils encore...
Vous entendrez des puristes vous dire qu'il ne faut pas crer un site avec un diteur tel que Dreamweaver et
qu'il vaut mieux apprendre coder soi-mme. Je rpondrai ces pros du code qu'on peut aussi crire de
belles lettres la main avec une plume d'oie et de l'encre de chine mais qu'un brave traitement de textes reste
quand mme plus rapide ;-)
Le plus important pour moi est de comprendre ce que l'on fait, quel que soit l'outil...
Bucument realise par kBL4kBL Claude Harcel puur les debutants
2
Bien entendu, si vous devez entrer dans des considrations budgtaires, envisagez plutt d'utiliser un diteur
tel que Notepad++ mais il vous faudra apprendre le code HTML.
Je vous propose de vous apprendre vous servir de Dreamweaver.
Non pas en vous infligeant une srie d'exercices sur toutes les fonctionnalits du logiciel (vous mettrez de
toute faon plusieurs semaines tout matriser) mais en vous montrant les concepts de base tout en vous
faisant crer votre site tape par tape.

Vous allez donc rapidement voir quel code est cr, comment utiliser les styles pour construire une
maquette, comment utiliser Photoshop pour ajouter des visuels, puis le langage PHP pour ajouter
dynamiquement du contenu vos pages, donc comment utiliser un serveur Apache, puis comment utiliser
une base de donnes (nous utiliserons MySQL).

Vous ne deviendrez pas webmaster en quelques minutes mais vous devriez comprendre la logique de
conception d'un site web.
Commenons par dfinir l'environnement de travail de Dreamweaver...

Tutoriel Dreamweaver : l'environnement de travail
Dreamweaver doit pouvoir retrouver ses petits : tous les fichiers que vous allez crer pour construire votre
site devront se trouver sous un mme dossier (ce qui ne vous empchera pas de crer des sous-dossiers).

Exemple d'environnement de travail :
Chaque boite verte reprsente un dossier de votre ordinateur. Dans
l'image ci-contre, on voit que le dossier principal s'appelle "formation-siteinternet".
Il contient des sous-dossiers :
dreamweaver : dossier contenant toutes les pages traitant de Dreamweaver
images : dossier contenant toutes les images du site
3
inc : dossier contenant des morceaux de code (les menus par exemple)
php : dossier contenant des programmes en PHP
styles : dossier contenant le fichier styles.css qui contient tous les styles de mise en page

Et des fichiers :
index.php : page d'accueil du site (qui s'appelle toujours "index") et se situe toujours dans le dossier
principal

Chaque page du site est constitue d'un ou de plusieurs fichiers.
Pour crer votre site, vous allez donc commencer par crer un dossier sur votre ordinateur. Ce dossier
contiendra plus tard tous les fichiers constituant votre site web.
1. Ouvrez Dreamweaver
2. Cliquez sur la cration d'un nouveau site
3. Donnez un nom votre site (sans espace ni accent)
4. Choisissez le dossier principal de votre site (crez un nouveau dossier)
5. Crez un sous-dossier pour les images (imprativement dans le dossier principal du site)
6. Validez

IMPORTANT :
Votre ordinateur est trs tolrant (Windows, Mac, ...) et accepte probablement les noms composs d'accents
et d'espaces. Mais attention : votre futur site web sera hberg sur un ordinateur beaucoup moins tolrant qui
remplacera les lettres accentues et les espaces par des codes, ce qui rendra votre site totalement illisible.

4
Maintenant que l'environnement de travail a t dfini, nous allons crer un squelette de page qui servira la
construction de toutes les pages de votre site.

Tutoriel Dreamweaver : le squelette du site
Vous allez probablement crer toutes vos pages selon le mme canevas : un logo, un menu, un bas de page
(footer), une ou plusieurs colonnes de texte dans le centre de votre page.
Si vous rptez manuellement sur chacune de vos pages des informations identiques (un menu par exemple),
le jour o vous aurez plusieurs dizaines de pages modifier, vous devrez le faire la main... Pour viter ce
dsagrment, il vaut mieux anticiper en crant un modle partir duquel vous pourrez fabriquer toutes vos
pages.

Exemple de structure d'un site web :
Il est important que vos visiteurs sachent toujours dans quelle
zone de l'cran trouver vos informations.
Le haut de l'cran est rserv au logo de votre entreprise ainsi qu' l'affichage d'ventuelles bannires de
publicit car c'est l que l'oeil se pose en premier.
Le menu droulant est une solution pratique si vous pensez avoir modifier souvent les rubriques de votre
site (en les faisant drouler, vous gardez de la place pour l'affichage et vous n'tes pas limit dans le nombre
de rubriques)
La zone d'affichage des textes est la zone la plus grande. Attention : selon la taille des crans de vos
visiteurs, elle aura plus ou moins de largeur. On choisit souvent de fixer une largeur moyenne (la majorit
actuelle des crans est en 1024 pixels de largeur par 728 en hauteur (mais on peut toujours faire dfiler
l'cran vers le bas, bien entendu).
3
Le bas de page (footer) permet d'ajouter des liens standards, tels que les informations lgales du site, le
copyright ou encore des liens de sites partenaires (les sites changent des liens entre eux de faon se faire
connatre).
IMPORTANT : Prenez le temps de bien rflchir la structure de votre site car une fois qu'il sera construit,
il sera difficile de le modifier...

L modl d pag
Dreamweaver possde un mcanisme, appel modle de page, qui permet de dupliquer un modle pour en
faire autant de pages que ncessaire. Si le modle est modifi, les pages qui en dcoulent sont modifies
aussi. Cela a l'air sympa mais cela comporte un inconvnient majeur : si vous utilisez ce mcanisme, votre
site devient dpendant de Dreamweaver. Vous serez oblig de continuer utiliser ce logiciel pour mettre
jour votre site.

L langag PHP
Pour viter cela, nous n'allons pas utiliser le modle de page !
Nous allons par contre apprendre quelques rudiments trs simples d'un langage de programmation, appel
PHP, qui vous permettra de rester maitre de la conception de votre site. Ce langage est gratuit, mais il
ncessite d'installer un serveur Apache sur votre machine de dveloppement, pour simuler le
fonctionnement de votre site une fois qu'il sera plac sur le vrai serveur d'hbergement.
Toutes les pages de votre site qui contiendront du code PHP devront avoir l'extension .php pour que le
serveur interprte le code qui s'y trouve.
Si vous souhaitez installer un serveur, je vous propose de consulter la formation PHP qui vous montrera
comment installer, gratuitement, le serveur Wamp.
Sinon, continuons directement par agencer la structure de votre squelette...

Tutoriel Dreamweaver : structure de votre site
Nous allons crer la premire page avec Dreamweaver.
1. Ouvrez Dreamweaver
2. Choisissez "Fichier" puis "nouveau", puis "page dynamique" puis "php".
Enregistrez immdiatement cette nouvelle page sous le dossier principal de votre site avec le nom
modele.php
6
Pour les besoins de cette formation Dreamweaver, j'ai cr un dossier demo dans lequel vous trouverez tous
les exemples servant aux exercices.
Ouvrez la page modele1.php situe dans le dossier dmo

Une page HTML est constitue de plusieurs zones distinctes et obligatoires : l'en-tte et le corps (en anglais
"head" et "body").
Ces zones sont dlimites par des balises HTML. L'ensemble des balises d'une page web constitue le code
HTML de la page.
Pour voir ce code, cliquez sur l'icone .
Vous devriez voir le code suivant :
<!uCC1?L hLml u8LlC "-//W3C//u1u xP1ML 1.0 1ranslLlonal//Ln" "hLLp://www.w3.ora/18/xhLml1/u1u/xhLml1-
LranslLlonal.dLd">
<hLml xmlns="hLLp://www.w3.ora/1999/xhLml">
<head>
<LlLle>uocumenL sans LlLre</LlLle>
<meLa hLLp-equlv="ConLenL-1vpe" conLenL="LexL/hLml, charseL=uLf-8">
</head>
<body>
</body>
</html>
Dfinitions du HTML
Une balise est un terme encadr par des crochets, comme ceci : <head>
Une balise "ouvrante" est presque toujours suivie par sa copine "fermante" : </head>
<head> et </head> sont un "couple de balises".
Chaque balise HTML a une signification particulire.
La balise <head> par exemple indique que le code qui suit fait partie de l'en-tte de la page.
La balise </head> indique la fin de cette zone.
Si vous ne voyez pas exactement le code suivant quand vous crez une nouvelle page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Alors, vous devez vous rendre dans les prfrences de Dreamweaver et demander rendre le document
compatible avec le XHTML qui est une version plus rcente du langage HTML. Pour cela, suivre les
instructions :
7
1. Choisir "Edition", puis "Prfrences"
2. Aller sur "Nouveau document"
3. Cochez la case "rendre compatible avec le XHTML"
Continuons explorer le code produit lors de la cration d'une nouvelle page :
Vous l'avez devin : le couple de balises <body> et </body> entoure tout ce qui fera partie du corps de la
page. Seul le corps de la page sera visible pour l'internaute.
Nous allons utiliser une balise "fourre-tout", appele <div> (et appele calque par Dreamweaver...). Elle
nous permettra d'encadrer une zone prcise laquelle nous voudrons attribuer des proprits particulires.

Voyons comment crer le calque "conteneur" qui contiendra tous les autres calques...

Tutoriel Dreamweaver : calque conteneur
Pourquoi faire ?
Parce que les crans des internautes n'ont pas tous la mme largeur. Nous allons donc en crer un calque qui
servira de boite tous les autres calques et combler l'espace laiss vide autour de cette boite par une couleur
de fond.
Et que contiendra le conteneur ?
Tous les autres blocs de votre site. Chacun de ces blocs (appels "calques" par Dreamweaver) contiendra un
morceau de vos pages. Nous pourrons ainsi grer chaque morceau indpendamment des autres. Vous
verrez... c'est trs pratique.
Que faire de tout l'espace libre qui apparaitra de chaque ct ?
Et bien... nous y mettrons une chouette couleur d'arrire-plan orange par exemple.
Commenons par crer la zone en question. Nous allons utiliser pour cela le couple de balises <div> et
</div>.
C'est avec cette balise que l'on cre les fameux "calques".

8
Le code sera modifi ainsi :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="conteneur">
</div>
</body>
</html>
Voir la page cre avec ce code.
Maintenant que le conteneur est en place, voyons comment crer les autres calques de la structure...

Cration des calques de la structure
Nous allons maintenant placer dans le conteneur, les autres calques :
logo, menu, affichage et footer.
Ceci se fait en ajoutant la main dans le code des couples de balises <div> et </div>
avec comme paramtre un identifiant ayant le nom du calque.
Le plus rapide est de passer en affichage du code de votre page modele.php et de saisir par quelques
copier/coller les diffrentes balises crer.

9
<div id="conteneur">

<div id="logo">ici on placera le logo</div>
<div id="menu"> ici on aura le menu droulant</div>

<div id="affichage">
ici tout l'affichage
</div>
<div id="footer"> ici le pied de page</div>

</div>
Voir le rsultat de cet exercice dans la dmo
Pour grer la couleur du fond, les dimensions du conteneur et tous les autres lments de votre structure,
nous allons devoir crer des styles.
Ces styles seront stocks dans un fichier spcial, appel feuille de style. Cration de la feuille de style.

La feuille de styles : prsentation
La feuille de style est un fichier au format CSS qui contient toutes les dfinitions de style pouvant
s'appliquer des lments de votre site web.
Comme ces styles vont tre utiliss sur toutes les pages du site, autant les placer dans un fichier part, la
feuille de style, qui sera relie aux pages.
Cration d la fuill d styls
Elle sera cre automatiquement ds que l'on crera un premier style pour la page. Une liaison entre cette
feuille de styles et la page sera galement cre automatiquement. Merci Dreamweaver !
Cration du prmir styl

10
1.Allez sur la fentre des styles (en haut et droite du logiciel ou en passant par le menu "Fentres"
2. Cliquez sur le petit picto montrant un signe + au bas de cette fentre (voir le dessin ci-contre)
Au fur et mesure que vous aurez cr des styles, leur liste apparatra dans la fentre des styles. Il vous
suffira alors de cliquer sur l'un d'eux pour le modifier. Et ce qui est super, c'est que si ce style est utilis sur
des dizaines de pages de votre site, les modifications apportes ce style apparaitront immdiatement sur
toutes ces pages.
Comme pour un traitement de textes, les styles vont donc vous permettre de crer des dfinitions pour
chaque lment de vos pages. Par exemple, vous pourrez choisir une police de caractres et une couleur pour
les titres, une autre pour les sous-titre, une largeur prcise pour un tableau, une couleur d'arrire-plan pour
un paragraphe de texte, etc.

Pour l'instant, nous allons nous servir des styles pour dfinir la structure de chaque lment de votre
modele.php

1. Cliquez sur "Redfinir la balise HTML"
2. Faites dfiler le choix des balises et slectionnez "body"
3. Choisissez Dfinir dans "Nouveau fichier feuille de style"
4. Crez un fichier nomm "styles.css" que vous sauvegarderez dans un nouveau dossier "styles"
(La cration du dossier et le choix du nom se fait dans une fentre Windows de gestion de fichier et vous
tes cens savoir vous servir de Windows, sinon nous sommes mal partis...
Ds que vous aurez valid en cliquant sur OK, Dreamweaver se chargera de crer le fichier et d'ajouter un
lien dans la partie <head> de votre page, ceci afin de relier la page cette nouvelle feuille de styles.
La feuille de styles est pour l'instant vide car vous n'avez pas encore dfini de style. On y va de suite...

11

Une nouvelle fentre s'est ouverte ds que vous avez valid la cration de la feuille de styles.
Comme vous avez demand Dreamweaver de redfinir la balise <body>, il s'est empress de vous ouvrir la
fentre de dfinition des styles, brave petit !
1. Dans les catgories, choisissez "Arrire-plan"
2. Dans couleur d'arrire-plan, choisissez une couleur (pour moi ce sera orange)
3. Cliquez sur OK

Instantanment, votre page est devenue orange.
La balise <body> tant la balise qui regroupe TOUT le contenu visible d'une page web, en mettant un style
pour changer la couleur d'arrire-plan, vous obtenez ce superbe rsultat.
Voir le rsultat dans notre dmo...

Si vous affichez le code de cette page, vous verrez une balise <link> dans la partie <head> de votre page.
C'est le lien menant la feuille de styles.
<head>
<LlLle>modele3</LlLle>
<meLa hLLp-equlv="ConLenL-1vpe" conLenL="LexL/hLml, charseL=uLf-8">
<||nk href="sty|es_demo.css" re|="sty|esheet" type="text/css">
</head>
Puisque la feuille de styles est un fichier part, rien ne nous empchera de crer un lien vers ce fichier
depuis toutes les pages du site. Ainsi, en changeant un style dans ce fichier, toutes les pages qui l'utilisent
seront automatiquement mises jour. Pratique, non ?
Il nous reste maintenant mettre une couleur d'arrire-plan blanche au calque "conteneur" et limiter ses
dimensions pour obtenir un squelette de page vos dimensions.
Modification du style pour le calque conteneur

12
La feuille de styles : slecteur CSS
Nous voulons changer le style du calque que nous avons appel "conteneur". Les noms de calque permettent
de slectionner le calque sur lequel le style doit s'appliquer. Nous allons donc utiliser les slecteurs de style.

1. Cliquez de nouveau sur l'icone de cration
d'un nouveau style
2. Choisissez cette fois "Utiliser le slecteur CSS"
3. Ecrivez #conteneur dans la zone de saisie du slecteur
4. Choisissez "Dfinir dans styles.css" (votre feuille de styles)
5. Cliquez sur OK.

Dreamweaver cre le style et ouvre de nouveau la fentre permettant de choisir les paramtres de votre style.

Choisissez cette fois une couleur d'arrire-plan blanche.

1. Allez dans la catgorie "boite"
2. Entrez la valeur 1000 dans la largeur et choisissez l'unit "pixels"
3. Entrez la valeur 10 dans la zone "Remplissage" (pour faire une marge interne dans le calque)
13
4. Allez dans la catgorie "Bordure"
5. Choisissez une bordure solide, de largeur 1 pixel et de couleur noire
6. Validez ce style

Vous devriez maintenant voir un cadre blanc bord de noir par dessus un fond orange bien ptant.

Voyons comment centrer le conteneur dans la page

La feuille de styles : modification de balises
Nous devons centrer le calque. Bizarrement, il ne suffit pas de mettre une proprit de centrage au calque
"conteneur" pour cela.
En fait, nous allons dfinir une largeur fixe au calque et demander crer des largeurs de marge
automatiques gauche et droite du calque.
Ainsi, en fonction de la largeur de l'cran, la taille des marge gauche et droite du calque "conteneur"
s'adaptera automatiquement.

Mais cela ne suffira pas...
Il faudra galement modifier les styles pour la balise <html> et pour la balise <body>, ce qui relve un peu
du "bidouillage" mais qui est ncessaire.

14

1. Revenez sur la fentre des styles
2. Cliquez une fois sur le style #conteneur qui apparait dans la liste des styles dj crs
3. Cliquez sur l'icone avec un petit crayon qui sert diter le style existant
Vous revoil dans la fentre des paramtres du style.
4. Allez dans la catgorie "boite"
5. Entrez la valeur 780 pixels pour la largeur
6. Dcochez la case "Idem pour tous" dans la colonne des marges
7. Entrez la valeur "auto" pour la marge gauche et pour la marge droite puis validez

Occupons-nous maintenant des balises <html> et <body> :
1. Crez un nouveau style pour <html>
2. Dans la catgorie bloc, choisissez de centrer le texte et dans la catgorie boite mettez une largeur de
100%


Nous allons maintenant crer une classe de styles pour les calques de la structure...
La feuille de styles : classe de style
13
Quand vous aurez cliqu sur le + pour crer un
nouveau style, vous verrez apparatre la fentre de paramtrage des nouveaux styles.
1. Dans la zone "Nom", entrez le mot .cadre sans oublier le point
2. Choisissez le type "Crer un style personnalis (classe)"
3. Choisissez "Dfinir dans nouveau fichier feuille de style" et validez

Dreamweaver vous demande maintenant comment appeler la feuille de styles et o la placer.
Crez un nouveau dossier appel "styles" et nommez la feuille de styles "styles.css".

Une fois la feuille de styles cre, Dreamweaver va ouvrir une nouvelle fentre pour vous permettre de
dterminer quoi ressemblera votre style.

1. Allez dans la catgorie "Bordure"
2. Choisissez un style de type "solide"
3. Entrez une largeur de trait de 1 pixel
4. Choisissez une couleur de trait noire
Tout ceci vous permettra de crer une bordure noire avec un trait d'un pixel d'paisseur.
Une fois le style cr, validez la fentre.
La classe de style .cadre est cre, mais il faut l'appliquer quelque chose pour qu'il se voit.
16

Revenez sur la page que nous sommes en train de construire.
Au bas de la zone d'affichage de la page, juste au dessus de la fentre des proprits, vous verrez une bande
grise sur laquelle apparaissent les balises prsentes l'endroit o se trouve le curseur de votre souris. Placez
votre souris sur la phrase "ici le logo".
Vous verrez apparatre <div#logo> dans la bande grise.
1. Faites un clic droit avec la souris en vous plaant sur <div#logo> .
2. Dans la petite fentre qui vient de s'ouvrir, choisissez "Dfinir classe", puis la classe "cadre". Tiens, la
revoil !
Instantanment, vous verrez apparatre une bordure noire autour de la zone correspondant au logo.
Reproduisez la mme opration pour toutes les autre zones de la structure.

Pourquoi mettre un moche cadre noir autour des calques ?
Pour les voir ! Le temps de les construire comme il faut. Nous supprimerons ces cadres ensuite.


Nous allons maintenant rgler les marges internes et externes de chacun des calques..

La feuille de styles : margin et padding
Nous devons maintenant intervenir individuellement sur chaque calque afin de rgler ses marges. Pour cela,
nous allons modifier les styles d'un seul calque...
17

1. Cliquez sur le + de la fentre des styles pour crer un nouveau style
2. Saisissez #liens dans la zone slecteur
3. Cochez le choix "Utiliser le slecteur CSS"
4. Laissez sur "Dfinir dans" avec votre feuille de styles
5. Validez
En rsum, vous pouvez dfinir 3 types de style diffrents :
- la classe (avec un point) quand vous voulez que le style s'applique diffrentes balises
- la balise HTML quand vous voulez que le style s'applique uniquement une balise donne
- le slecteur quand vous voulez appliquer le style un lment nomm

Vous arrivez maintenant la fentre de dfinition du style :
1. Allez sur la catgorie "Boite"
2. Saisissez la valeur 5 pixels pour "Remplissage" et cochez "Idem pour tous"
3. Saisissez la valeur 10 pixels pour "Marge" et cochez "Idem pour tous"
Dreamweaver appelle "remplissage" le paramtre "padding" qui correspond l'espace entre les bords d'un
calque et son contenu (ses marges internes).
Dreamweaver appelle "marge" le paramtre "margin" qui correspond l'espace extrieur autour du calque
(ses marges externes).
Le changement de ces valeurs affecte les dimensions d'affichage du calque.

18

Bizarrement, si vous crez un calque de 1000 pixels de large et que vous dcidez de lui ajouter un espace
intrieur (padding) de 10 pixels de tous les cts, votre calque va enfler.
Il va faire 10 + 1000 + 10 = 1020 pixels. Ce qui va le faire dpasser en largeur par rapport aux autres
calques.
Il faut donc modifier la largeur du calque ainsi : 10 + 980 + 10 = 1000 pixels
Idem si vous ajoutez une marge autour de ce calque (margin) de 10 pixels de chaque ct.
Mais nous n'aurons pas besoin de marges pour le calque affichage. Nous mettrons juste un padding de 10
pixels de chaque ct afin d'arer un peu le texte. Tous les autres calques doivent avoir une marge nulle de
valeur zro.
Je vous laisse faire les modifications dans la feuille de styles ;-)
Vous comprenez mieux maintenant pourquoi il faut d'abord crer la structure complte du site avant de se
lancer dans la conception des pages !

Maintenant que la structure est quasi termine, nous allons pouvoir commencer mettre du contenu dans
nos calques.
Commenons par la mise en place du logo.

Insertion du logo dans la page modle
Pour apprendre comment crer votre logo avec Photoshop, allez consulter la formation photoshop (ou bien
rcuprez notre modle dans le site de dmo)...
Puis revenez ici insrer le logo une fois cr.

19

1. Revenez sous Dreamweaver
2. Placez votre curseur dans le bloc "logo" visible sur votre page modle
3. Effacez le texte "ici le logo" qui ne servira plus rien
4. Slectionnez "Insertion" dans les menus droulants de Dreamweaver
5. Choisissez "Insertion image" et slectionnez votre fichier "logo-monsite.jpg"
Le logo de votre site doit maintenant apparatre dans votre page modle. Ce logo sera visible sur toutes les
pages de votre site. Un bon moyen de signer l'identit visuelle de votre entreprise sur le web.
Euh... J'ai un peu modifi le logo dans le modle de page, mais bon, c'tait pour mettre un peu de couleur
dans ces exercices.
Prenons quelques instants pour voir le code qui a t cr.
Nous pouvons nous passer de cette tape, mais n'oubliez pas : c'est vous le patron !
Il faut que vous soyez toujours capable de comprendre ce qui se passe bord...

Voici le code cr par l'insertion du logo :
...
<div id="logo">
<img src="images/logo.gif" width="1000" height="200" alt="logo de mon site" border="0" />
</div>

20
src : contient le chemin menant l'image. Si une image ne s'affiche pas, une seule cause possible : LE
CHEMIN MENANT A L'IMAGE N'EST PAS LE BON CHEMIN. Le chemin est toujours affich
RELATIVEMENT la position o se trouve la balise qui appelle l'image. L'image n'est pas prsente DANS
la page. Elle est dans un fichier qui est appel dans la page. Nuance !
width et height : largeur et hauteur en pixels de l'image. Utile pour que le navigateur rserve la place
ncessaire en mmoire.
alt : il faut toujours mettre un texte pertinent ici pour amliorer le rfrencement de votre page
border = "0" : pour ne pas voir de cadre autour de l'image si jamais vous l'associez un lien...
Remarquez qu'il n'y a pas de balise fermante pour img. La balise se ferme toute seule par />

Les choses vont se compliquer encore un peu pour crer le menu de votre site. Nous pourrions le faire
l'aide des modles de page de Dreamweaver, mais cela reviendrait vous rendre dpendant de ce logiciel.
Au lieu de cela, nous allons apprendre quelques petits rudiments du langage PHP qui vous permettront
d'insrer un bout de code dans votre page.
Vous allez voir quel point cela ouvre des possibilits intressantes pour la suite...
Prt passer aux pages dynamiques ?
Alors, voyons comment crer le menu des pages de votre site...
Cration du menu du site
Votre menu va tre constitu de plusieurs liens. Un lien est une zone (de texte, ou une image) qui est
cliquable. Exactement comme le menu du site intras.fr que vous voyez ci-dessus dans la barre bleue.

Voici un exemple de code pour un lien menant vers une page "index.php" :
< a href="index.php">Ici le texte cliquable pour le lien</a>
Mais si nous nous contentons de crer ces liens directement dans la page servant de squelette et que nous
crons toutes nos pages en recopiant ce qui est dans ce modle de page, nous allons dupliquer du contenu.
Le jour o vous voudrez modifier l'un des liens du menu, vous devrez ouvrir toutes les pages du site, une par
une... Ae ! Galre !
Pour viter cela, nous allons inclure un fichier HTML dans un autre fichier HTML. Mais pour cela, nous
devons utiliser un langage de programmation. Ce sera PHP.
Mais... Le langage PHP n'est pas compris par le navigateur. Ce langage est lu depuis le serveur (nom donn
l'ordinateur qui vous "sert" les pages sur votre navigateur).
21
Quand on construit un site, on doit d'abord vrifier sur son propre ordinateur si tout
fonctionne correctement avant d'aller le placer disposition de tous sur Internet. Pour cela, nous allons avoir
besoin d'installer un serveur sur notre ordinateur. Rassurez-vous, ce n'est pas plus compliqu que d'installer
un logiciel.
Mais comme cela dborde du sujet de la formation Dreamweaver, vous trouverez les explications sur
l'installation d'un serveur Apache dans les pages de la formation PHP.

Prparation du mnu
Maintenant que votre serveur est install et lanc, passons la conception du menu.
1. Ouvrez une nouvelle page dans Dreamweaver
2. Placez-vous dans la zone d'criture de la nouvelle page
3. Cliquez sur l'lment de liste dans la fentre des proprits
4. crez la liste suivante :
La socleLe
resLaLlons
CaLaloaue
Accuell
5. Enregistez votre page dans un nouveau dossier nomm inc sous le nom menu.php

Insrtion du mnu dans votr modl d pag
1. Ouvrez si ncessaire la page modele.php dans laquelle vous avez cr les diffrentes zones de votre
squelette de page.
2. Placez le curseur dans la zone du menu (donc entre <div id="menu"> et </div>)
3. Passez en affichage de type code
4. Insrez le code suivant :
<div id="menu">
<?php include("inc/menu.php"); ?>
</div>
Voil... Vous venez d'crire votre premier code en PHP. Chapeau bas !
Tout code PHP commence par la balise <?php suivie d'un espace
Tout code PHP se termine par la balsie ?> suivie d'un espace
22
La fonction include() permet d'incorporer le fichier menu.php, situ dans le dossier inc/.
L'instruction se termine toujours par point-virgule.
Attention : les fautes de syntaxe sont interdites dans un langage de programmation. Le moindre oubli, ne
serait-ce que d'un point ou d'une virgule, peut crer une erreur, appele bug.
Voir la page cre avec ce code
Pour l'instant, nous avons une liste avec des puces avec chaque lment du menu l'un en dessous de l'autre.
Pour obtenir un menu droulant, nous allons faire de nouveau appel aux styles...

Cration du menu du site
Votre menu va tre constitu de 4 rubriques : La socit, Prestations, Catalogue, Accueil.
Les 3 premires rubriques auront chacune un menu droulant qui sera constitu d'une seconde liste
imbrique dans la premire, comme ceci :
La socit
o Prsentation
o Recrutement
o Contact
Prestations
o Nos services
o Nos comptences
Catalogue
o Voir le catalogue
o Le tlcharger
Accueil
Comme chaque lment servira aller quelque part, il comportera un lien. Mais comme nous ne savons pas
encore o ira le "quelque part", nous mettrons pour l'instant le caractre # comme adresse de destination.
1. Placez-vous sur chaque lment de la liste en le slectionnant la souris, puis, dans la fentres
2. Dans la fentre des proprits de Dreamweaver, allez dans la zone de saisie du Lien
3. Ecrivez le caractre #
Voici ce que vous obtenez :
La socit
o Prsentation
o Recrutement
o Contact
Prestations
o Nos services
o Nos comptences
Catalogue
23
o Voir le catalogue
o Le tlcharger
Accueil
Voici le code HTML correspondant :
<div id="menu">
<ul>
<li><a href="#">La socit</a>

<ul>
<li><a href="#">Prsentation</a></li>
<li><a href="#">Recrutement</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Prestations</a>
<ul>
<li><a href="#">Nos services</a></li>
<li><a href="#">Nos comptences</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Catalogue</a>
<ul>
<li><a href="#">Voir le catalogue</a></li>
<li><a href="#">Le tlcharger</a></li>
</ul>
</li>
</ul>

<ul>
<li><a href="#">Accueil</a></li>
</ul>
</div>
Le couple de balises <ul></ul> entoure une liste puces et le couple <li></li>entoure chaque item de la
liste.
Dans le code ci-dessus, vous voyez que pour les 3 premires <li>, une seconde liste <ul> est imbrique.
Le couple de balises <a>,</a> cre le lien. L'adresse du lien se met dans le paramtre href de la balise a,
comme ceci : <a href="#">
Pour obtenir l'effet de menus droulants, nous allons utiliser les styles qui permettront de mettre la liste
l'horizontale, d'entourer chaque item d'un cadre pour lui donner l'apparence d'un menu et de jouer sur la
dtection de la souris pour crer l'apparition et la disparition du menu. Le tout uniquement grce aux styles.
24

Le style : c'est la classe ! (J'en ai beaucoup du mme style ;-)

1. Recopiez le code ci-dessus dans votre fichier menu.php situ dans le dossier .inc.
2. Vrifiez que le menu apparat bien dans votre page modle, grce l'inclusion du menu dj en place en
PHP.
Voyons maintenant comment crer les styles du menu droulant...

Cration des styles du menu droulant
Au lieu de passer par la fentre des styles de Dreamweaver, nous allons ouvrir directement le fichier de la
feuille de styles.
1. Allez sur "Fichier", puis "Ouvrir"
2. Slectionnez le fichier styles.css prsent dans le dossier styles
Je vous rappelle que vous avez cr un calque nomm "menu" dans lequel toutes balises du fichier
menu.php apparaissent grce l'inclusion en PHP.
Nous allons donc indiquer la feuille de styles que nous voulons crer des styles pour le slecteur #menu,
comme ceci :
#menu {
}
A l'intrieur du calque #menu, nous devons faire un style concernant les listes puce, soit sur les balises
<ul>.
Ce qui donnera en CSS :
#menu ul {
}

Nous voulons que les puces des listes disparaissent. Pour cela, nous utiliserons la proprit liste-type.
#menu ul {
list-style-type: none;
}

Nous voulons que les lments des listes soient aligns les uns ct des autres et non pas la verticale, ce
qui donnera :
23
#menu ul {
list-style-type: none;
}
#menu li {
float:left;
}

Les prochains ajouts de style sont directement comments dans le code ci-dessous :
#menu {
height:30px; /* hauteur de la barre de menu */
width:990px; /* largeur du menu en tenant compte des marges */
background-color:#FFCC33; /* couleur d'arrire-plan pour tout le menu */
margin:-25px 0 0 0; /* largeur de marge dfinie dans l'ordre : haut, droite, bas, gauche */
padding:0 0 0 10px; /* marges intrieures */
font-family:arial; /* police de caractre arial */
font-weight:bold; /* caractres gras */
}

#menu ul { /* liste des rubriques visibles par dfaut */
margin:0; /* annulation de toute marge externe */
padding:0; /* annulation de toute marge interne */
list-style-type:none; /* mise l'horizontale des lments de la liste */
text-align:center; /* alignement au centre des lments de la liste */
}

#menu li { /* style pour les lements de la liste principale */
float:left; /* mise l'horizontale */
margin:auto; /* centrage de l'lment de liste */
padding:0; /* annulation de toute marge interne */
background-color:#FFCC33; /* couleur orange d'arrire-plan */
line-height:20px; /* hauteur de l'lment de liste */
}

#menu li a { /* lien prsent dans la liste principale */
display:block; /* dtection du lien sur toute la surface */
width:150px; /* largeur de la surface de clic */
color:#000000; /* couleur noire du texte */
text-decoration:none; /* suppression du soulignement sous le lien */
padding:5px; /* marge interne autour du lien */
border-right:dotted 1px #eeeeee; /* ajout d'un trait de sparation droite de chaque item */
}
#menu li a:hover { /* survol du lien de la premire liste */
color:#FFFFFF; /* couleur blanche du texte lors du survol */
}
26

#menu ul li ul { /* sous-liste */
display:none; /* cache par dfaut */
}

#menu ul li:hover ul { /* affichage de la sous-liste quand on passe la souris sur la liste principale */
display:block; /* attention : ne marche pas sous IE sans le bout de code mis au dbut de menu.php */
}

#menu li:hover ul li { /* correction ncessaire pour IE */
float:none;
}

#menu li ul li{ /* trait de sparation sous chaque item du menu droulant */
border-top:dotted 1px #eeeeee;
}

#menu li ul li a:hover { /* changement de couleur du menu droulant lors du survol de chaque item */
background-color:#FFFF00;
color:#000000;
}

Houl ! Que de code ! Ben oui, mais voil : Dreamweaver ne sait pas faire de menu droulant. Du moins,
pas encore...
Et pour vous, ce bout de code est un vrai cadeau car vous pourrez le rutiliser sur tous vos sites web
puisqu'il est isol dans un fichier qu'il suffit d'inclure dans vos futures pages...
Attention : Internet Explorer (IE pour les intimes), ne fait rien comme tout le monde et ne comprend pas
l'utilisation du :hover sur la balise <li>.
Plus exactement, il ne comprenait pas jusqu' la version 8 o il a enfin dcid de faire comme ses copains.
Pour pallier ce dfaut (et comme malheureusement une grande majorit de gens utilisent toujours ce
logiciel), nous allons devoir rajouter le bout de code suivant au tout dbut de notre fichier menu.php :

<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>


Voir la page cre avec ces styles

Vous avez termin la phase de construction du modle de votre site.
Vous voil prt maintenant crer vos pages. Commenons par crer votre premire page, pour la
prsentation de votre socit...

Premire page du site
Vous disposez pour l'instant d'un fichier modele.php.
Nous allons dupliquer ce fichier pour crer votre premire page qui sera la page de prsentation de votre
socit.
A noter : bien que la page index.php soit la page d'accueil d'un site, elle est gnralement ralise en dernier
car elle reprsente la synthse de tout ce que vous voulez montrer sur le site. Comme elle comportera des
liens vers les autres pages du site, il est plus simple de crer d'abord ces autres pages pour savoir quels liens
crer vers elles.
Pour crer votre premire page, procdez de la manire suivante :
1. Avec Dreamweaver, ouvrez le fichier modele.php
2. Choisissez "Enregistrer sous"
3. Crez le fichier "presentation.php" que vous enregistrez dans le mme dossier que modele.php
Vous voil prt travailler sur votre nouvelle page presentation.php

Modification ds lins du mnu
La premire chose faire est de crer le lien permettant votre menu droulant de rejoindre cette page.
1. Ouvrez le fichier menu.php
2. Affichez son code
3. Modifiez le code comme suit :

<div id="menu">
<ul>
<li><a href="#">La socit</a>

28
<ul>
<li><a href="presentation.php">Prsentation</a></li>
<li><a href="#">Recrutement</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
...
Affichez votre page modele.php depuis le navigateur.
Vous devriez constater que vous pouvez maintenant cliquer sur le lien "prsentation" du menu droulant et
afficher ainsi la page presentation.php (Rajoutez un peu de texte cette page pour la diffrencier du modle,
mais vous pouvez vrifier que le navigateure affiche bien le lien de la nouvelle page).

Prsonnalisation d la pag prsntation.pbp
Tout ce qui suit va vous paratre trs simple (en comparaison ce que vous venez de souffrir ;-)

Cration du titr d la pag

1. Placez-vous dans la zone blanche de la page
2. Ecrivez "Prsentation de la socit"
3. Slectionnez ce texte
4. Descendez dans la barre des proprits de Dreamweaver
5. Dans la liste droulante "Format", choisissez "Entte 1"

Votre titre change d'apparence. Si vous regardez le code gnr, vous devriez voir ceci :

<dlv class="cadre" ld="afflchaae">
<h1>rsentat|on de |a soc|t</h1>
<p>&nbsp,</p>
29
La balise <h1> est une balise crant un titre.
Les titres sont hirarchiss, du plus important : <h1>, au moins important <h6>.
Ces titres sont importants pour le rfrencement de votre page. Google et ses collgues vont y chercher des
informations pour dterminer quel est le thme principal de votre page. Pensez donc y placer une
information pertinente.

Appliqur un styl a un balis

Comment faire pour modifier le style de ce titre ?
Sl vous avez blen sulvl les exerclces precedenLs, vous savez malnLenanL qu'll sufflL de modlfler le sLvle d'une ballse
pour chanaer l'apparence du conLenu qul s'v rapporLe.
nous allons chanaer malnLenanL le sLvle de la ballse <h1>. ue ceLLe manlere, parLouL ou vous uLlllserez ce LlLre, ll
aura la mme apparence.
1. Slectionnez la fentre des styles
2. Cliquez sur l'icone + pour crer un nouveau style
3. Choisissez "Redfinir la balise HTML"
3. Choisissez la balise h1
4. Dans l'diteur de styles, choisissez une couleur orange et une taille 12 points
5. Validez votre style et enregistrez
Le titre de votre premire page a maintenant chang. Vous pouvez bien entendu vous amuser le
personnaliser votre guise.
Voir la page cre dans la dmo

Vous avez maintenant toutes les informations ncessaires pour modifier toutes les balises utilises par
Dremweaver pour construire vos pages. Vous pouvez par exemple modifier l'apparence des sous-titres <h2>,
<h3>, etc. Vous pouvez changer la police par dfaut utilise partout (dans ce cas, modifiez le style de la
balise <body>).
30
Vous pouvez crer des listes puce avec un fond color, crer un tableau avec des bordures votre style,
mettre une image d'arrire-plan dans le fond d'un tableau, changer l'apparence des liens dans vos pages, etc.
Gardez bien l'esprit ces rgles de base :
Rgls ds styls CSS
Rgle 1 :
On redfinit le style d'une balise si on veut que ce style s'applique TOUTES les pages qui utiliseront cette
balise.
Rgle 2 :
On cre une classe de style quand on veut crer une apparence qui pourra resservir sur diffrentes balises
(exemple : on cre une classe fond_jaune qui crera un arrire-plan de couleur jaune pouvant s'appliquer
ensuite un titre, un sous-titre, un paragraphe, etc.)
Rgle 3 :
On utilise un slecteur CSS quand on veut nommer une balise (#nom) et crer un style UNIQUEMENT pour
cette balise nomme
Rgle 4 :
On ne peut utiliser un style QUE sur une balise. Si une portion de contenu ne contient pas de balise, alors on
peut utiliser <div> (pour crer un bloc de texte), ou alors la balise <span> qui ne s'applique qu' une chaine
de texte.
Rgle 5 :
Pas d'espace, d'accent dans les noms de style. Pas de style commenant par un chiffre. Pas de style avec le
nom d'une balise HTML.
Rgle 6 :
Le code d'une page Web est toujours interprt du dbut vers la fin. Dans un cas de conflit entre styles, ce
sera souvent le dernier style appliqu qui prendra la priorit.

Oui, parce que... Je vous voir venir : maintenant que vous savez faire, vous allez attraper une de ces tranges
maladies connues des concepteurs de sites web.

La plus connue est la divite : tendance rajouter une balise <div> ds que vous voulez rajouter un style
quelque part.
Une autre, tout aussi contagieuse est le conflit de styles : force de rajouter des styles par ci et par l, vous
vous retrouvez donner des ordres contradictoires au nivagateur qui ne sait plus quel style se vouer.
Pensez bien alors la rgle 6 pour trouver l'erreur : le code est toujours lu de haut en bas dans une page
HTML et c'est souvent le dernier code lu qui prime.

Pour faire pro, vous pouvez personnaliser votre maquette avec le fameux texte fictif en latin, appel lorem
lipsum.
31
1. Allez sur ce site
2. Gnrez du paragraphe de texte
3. Recopiez-le dans votre page de prsentation
4. Crez un style pour la balise de paragraphe <p> ou pour d'autres
Dans l'exercice suivant, nous allons voir comment crer une mise en page avec colonne.

Cration d'une colonne
Autrefois (il n'y a pas si longtemps), ds qu'il tait question de mise en page, de colonnes, on crait un
tableau et on jonglait avec sa mise en forme pour crer des colonnes. C'tait un peu fastidieux, lourd en
code, mais au moins cela marchait.

Aujourd'hui, la mise en colonne est devenue trs simple condition de bien comprendre le fonctionnement
des styles.
Par dfaut, tout code HTML fait partie du flux. Cela signifie que tout nouveau code se place la suite du
prcdent et passe la ligne quand il n'y a plus de place en largeur.

Pour crer une colonne, nous allons tout simplement forcer le positionnement de la colonne hors du flux.
Voici comment faire :

1. Ouvrez votre page presentation.php
2. Enregistrez-la sous le nom recrutement.php
3. Modifiez le menu.php pour ajouter un lien menant cette nouvelle page (c'est expliqu dans l'exercice
prcdent)
32
4. Passez en affichage du code pour la page presentation.php
5. Encadrez un paragraphe de texte au moyen d'un couple de balises <div> et </div>
6. Attribuez le nom d'identifiant id="colonne_droite" ce calque
5. Ajoutez un style ce calque pour le slecteur #colonne_droite
8. Choisissez la catgorie "Positionnement" dans la fentre de paramtrage des styles
9. Choisissez "absolu" puis optez pour un "Emplacement" haut gauche
10. Ajouter une marge interne de 5 pixels et une marge externe de 5 pixels
11. Ajouter une bordure gauche solide de 1 pixel et de couleur grise
12. Dfinissez une largeur de 200 pixels pour ce calque

Pourquoi un positionnement absolu ?
Pour faire sortir la colonne du flux.Ceci va nous permettre de choisir quel endroit placer le calque. Sa
position sera relative quelque chose. A quoi ? Et bien au reste du texte qui sera lui aussi plac dans un
calque que nous appelerons "texte_principal" et dont nous rduirons la largeur pour forcer le texte passer
la ligne plus tt.

Voici le code qui sera ncessaire la feuille de style :
#texte_principal {
position:relative; -> calque rfrent du calque absolu
width: 760px; -> limite sa largeur
text-align:justify;
}
#colonne_droite {
position:absolute; -> sort le calque du flux
top:200px; -> positionne sa hauteur sous le logo
margin-left: 770px; -> le dcale sur la droite aprs le relatif
padding-left: 10px;
width: 200px; -> largeur de la colonne
border-left-width: 1px; -> trait vertical gauche de la colonne
border-left-style: solid;
border-left-color: #CCCCCC;
}


Dans votre futur site, vous aurez sans doute envie que vos visiteurs vous laissent leurs coordonnes et autres
informations.

Nous arrivons l au coeur du problme : l'utilisation des formulaires, puis leur traitement par un programme.
33

Cration d'un formulaire
Un formulaire permet la saisie de donnes. Par exemple pour demander quelqu'un de s'identifier ou pour
rcuprer ses coordonnes.
Nous allons voir comment Dreamweaver peut nous aider crer un formulaire. Nous mettrons en page ce
formulaire grce aux styles. Mais pour traiter les donnes saisies dans le formulaire, ce n'est ni le langage
HTML ni le langage CSS qui le permettront.
La page qui contiendra le formulaire est vue sur le poste client. C'est l'interface entre l'internaute et le site.
L'interface est construite en HTML et en CSS.
Mais les donnes doivent tre envoyes vers le serveur. Et c'est sur le serveur que devra se trouver le ou les
programmes qui iront traiter ces donnes, par exemple pour vrifier qu'il ne manque rien. Ces programmes
seront faits en PHP.

Une fois ces donnes traites, il faudra les stocker dans une base de donnes. La base de donnes sera du
type MySQL.
Je ne peux pas vous former simultanment sur PHP, MySQL et en plus continuer vous former sur
Dreamweaver. Vous trouverez quelques bases de PHP et de MySQL dans les pages de ce site. Pour aller
plus loin, vous devrez aller vous former PHP puis vous former MySQL.
Comment ? Cela commence faire beaucoup ? Mais... Personne ne vous a dit qu'il suffisait de claquer des
doigts pour faire un site web.
C'est un vrai mtier.
Du moins, pour ceux qui veulent comprendre comment cela marche. Mais vous verrez, ce n'est pas si
compliqu que cela...
Ls cbamps du formulair
1. Dupliquez votre page modele.php en contact.php
2. Ajoutez le lien correspondant dans le menu.php
3. Ouvrez la page contact.php dans Dreamweaver
4. activez l'onglet "formulaires" de Dreamweaver en haut du logiciel
Tous les champs d'un formulaire doivent se trouver entre les balises <form> et </form> (Dreamweaver
affiche des pointills rouge pour les localiser).
Pour cela, allez dans "Insertion" et choisissez "formulaire". Vous devriez voir le couple de balises
apparatre si vous affichez le mode code de Dreamweaver.
Nous n'allons pas nous soucier de la mise en page au dbut. Pour que Dreamweaver ajoute automatiquement
tous les codes HTML ncessaires, nous allons modifier les prfrences du logiciel. Allez dans les
prfrences d'accessibilit (Edition -> Prfrences) et cochez la case "Objets de formulaire" pour les
attributs d'accessibilit.

34

Faites ensuite les insertions suivantes :
1. Dans "Insertion -> objet de formulaire", choisissez "jeu de champs"
2. Toujours dans "Insertion -> objet de formulaire", choisissez "champ de texte"
3. La fentre d'accessibilit s'ouvre. Choisissez "Joindre une balise d'tiquette avec l'attribut for"
4. Saisissez "Entrez votre nom" dans la zone de saisie de l'tiquette
5. Choisissez la position "Avant l'lment de formulaire"
6. Cliquez sur OK

7. Vous pouvez ensuite rpter l'opration pour ajouter un champ texte pour prnom.
8. Choisissez un champ de type "bouton radio" pour ajouter la civilit "madame"
9. Recopiez ce champ 2 fois pour ajouter "mademoiselle" puis "monsieur"
10. Rajoutez 1 champ texte pour demander l'adresse email
11. Ajoutez un champ "case cocher" avec comme libell "abonnement la newsletter"
12. Ajoutez un champ de type "liste" pour demander la prfrence d'envoi
13. Ajoutez un champ de type "bouton" avec comme tiquer "valider"
Voil... J'ai volontairement panach le plus possible de types de champs pour que vous puissiez voir chaque
cas particulier. Un vrai formulaire peut prendre beaucoup, beaucoup de temps pour sa ralisation car les
enjeux sont parfois importants.
33
Votre formulaire n'est pour l'instant pas trs prsentable et surtout pas fonctionnel.

Nous allons voir comment l'amliorer...
Si vous regardez le code source de votre formulaire, vous devez avoir quelque chose comme cela :
<fieldset>

<legend>vos cooordonnes</legend>
<p>
<label>Votre prnom</label>
<input type="text" name="textfield" />

</p>
<p>
<label>Nom</label>
<input type="text" name="textfield2" />

</p>
...

Mis n form du formulair

Maintenant que vous tes devenu un pro de la feuille de style, je suis sr que vous allez trouver tout seul
comment faire pour ...
1. Que chaque balise <label> qui entoure les intituls "nom", "prnom", etc. de vos champs puissent avoir
une largeur dfinie
2. Flotte sur la gauche des champs de formulaire (qui du coup se rangeront bien sagement sur la droite)
3. Ait une marge de droite de 10 pixels
4. Et que le texte soit cal sur la droite
Ce qui visuellement vous donnera un rsultat similaire celui de l'image ci-contre...
36

Mince ! Vous avez organis tout votre formulaire en un seul style ! Vous m'patez ;-)

Au niveau code, vous avez donc russi faire quelque chose comme ceci (vous pouvez ouvrir votre feuille
de styles avec Dreamweaver pour regarder ses codes) :

label [
floaL:lefL,
wldLh:200px,
LexL-allan:rlahL,
maraln-rlahL:10px,
}

Bon... La liste est un peu tristounette. Elle manque de valeurs.
Placez le curseur dessus et regardez dans la fentre des proprits : il y a un joli bouton "valeurs de la liste"

1. Cliquez sur le bouton "valeurs de la liste"
2. Saisissez 'contactez-moi par email' dans la zone "Etiquette de l'lment"
3. Saisissez 'email' dans la zone "valeur"
4. Idem pour un contact par tlphone
Votre liste est maintenant prte l'emploi.

Votre formulaire est prt... visuellement. Il reste tout le travail de rcupration des donnes saisies. Mais
ceci est une autre histoire que vous pourrez retrouver dans la formation PHP, du mme auteur ;-)

Le tutoriel : un bon moyen de prparer sa
formation
Ces tutoriels vous sont proposs par les membres de notre rseau.
Ils ne remplacent pas une formation mais vous permettent de dcouvrir un logiciel ou un mtier afin de
tester vos connaissances sur un sujet prcis.
Cet ensemble de tutos se constitue progressivement.
37
Donc, patience si vous ne trouvez pas immdiatement ce que vous cherchez...

Dramwavr
Logiciel permettant la conception de sites web, ce logiciel est capable de s'adapter un dbutant grce son
interface intuitive ou un professionnel grce ses puissantes fonctions avances.
Les tutorials Dreamweaver vous permettront de dcouvrir une mthode de conception de site web rapide et
efficace.
Mais si vous souhaitez apprendre la totalit du logiciel, il faudra plutt vous orienter vers la formation
Dreamweaver propose par l'un des formateurs de notre rseau.

PHP
Langage de programmation prsent sur de nombreux sites web (dont celui-ci ;-) PHP permet par exemple le
dialogue entre un serveur Apache, un base de donnes MySQL et les pages en HTML. Le langage permet de
crer dynamiquement des pages web en leur ajoutant une information variable et en s'adaptant aux
demandes des internautes.
Les tutoriels PHP vous permettront de dcouvrir les grands principes de programmation sous PHP et vous
donneront des trucs et astuces trs utiles pour la conception de vos propres programmes.
Mais ils ne remplaceront pas une vraie formation effectue par un professionnel. Si vous souhaitez acqurir
des bases solides dans ce langage, merci de consulter notre formation PHP propose par l'un de nos
membres.

MySQL
La plus connue des bases de donnes. Entirement gratuite et trs puissante, elle couvre la quasi totalit des
besoins de sites web, y compris pour les sites fort trafic tels que les sites de e-commerce. Son
apprentissage est relativement ais. Nos tutoriels MySQL vous en apprendront les fonctionnalits
principales avant de passer une formation MySQL plus complte vous permettant de matriser tables,
champs, enregistrements, cls primaires, requtes et autres termes propres la gestion d'une base de donnes
relationnelle.

Dream Weaver Par Tutoriaux

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Dream Weaver Par Tutoriaux

Загружено:

Авторское право:

Доступные форматы

uoc clooJe Motcel kOuAkOu

Вам также может понравиться