formation dreamweaver cs4

8/7/2019 Formation DREAMWEAVER CS4

1/92

FORMATIONDREAMWEAVER CS4

PAGES EN HTML

Patrick QUINIOdition mars 2009

SOFTTOP

http://softtop.free.fr


2/92

SOMMAIRE Prsentation de Dreamweaver CS4 Cration dun site

Cration dune page Web

Les balises html

Les feuilles de style CSS

Insertion dimages

Prsentation et modle dun site avec CSS

Les tableaux

Les comportements (insertion de code Javascript)

Configurer les prfrences

Placer sur le serveur

La suite de cette formation est un deuxime module pour lacration de sites dynamique avec PHP MYSQL et mise au pointavec un serveur perso APACHE et base de donne MYSQL


3/92

Prsentation de DREAMWEAVER

Dreamweaver est un logiciel de conception de

site Web.

Il intgre tout les outils permettant de

dvelopper des sites dynamiques.

Ce logiciel est Wysiwyg, vous concevez vos

pages web en plaant les objets de cette page

votre convenance et Dreamweaver crit le codecorrespondant (HTML, XML, JavaScript,

PHP,ASP etc.)


4/92

Prsentation de DREAMWEAVER

Barre de menu

Barre doutils

Onglet de barres doutils

Volets des fentres

doutils

Outils de gestion

des sites

Fentre doutils, iciles fichiers locaux

Panneau de

lancement rapide

Fentre doutils, ici

les proprits

Pour dsactiver le panneau

de lancement rapide cliquer

ici


5/92

La barre de menus


6/92

Fentre cration et code

Cliquer sur

Fractionner

Fentre de cration

Fentre de code

Barre doutil de code


7/92

Etapes de cration de site

RflexionQuel est le but du site?

Rles de chaque pages web

Structure du site

Cration des dossiers ncessaires

Css pour les fichiers Css

Img pour les fichiers images


8/92

Cration du site

La cration du site se fait via le menu Site

Un assistant va vous guider si vous choisissez

longlet lmentaire.

Commencer par donner un nom votre site, topsoft

dans notre exemple. Si vous disposez dun domaineweb, donnez ladresse HTTP dans la seconde zone

de texte(facultatif)

Cliquez sur suivant.


9/92

Cration du site(onglet avanc)Nom du site

Emplacement

des fichiers

pages web

Emplacement

des fichiers

imagesAdresse du site

web


10/92

Cration du site(onglet avanc)

Laccs au

serveur par

protocole FTPAdresse du

serveur FTP hte

Infos de scuritdaccs au

serveur

Si votre

fournisseur

daccs permetlIPv6 et si vous

lavez activ

cochez cette

case

Si cette case est

coche vos fichiers

sont mis jour sur le

serveur distant

chaque sauvegarde

Cliquer sur OK


11/92

Cration du site

Cration de nouveaux dossiers

Cliquer avec le

bouton droit

Cliquer sur

nouveau dossier


12/92

Cration du site

Premire page ou page daccueil du site

La page daccueil ou page dindex doitobligatoirement sappeler index.

Soit index.htm ou index.html si cest unepage code en html

Soit index.php si cest une page contenant ducode PHP.

Soit index.asp si cest une page contenant ducode asp.

Dautres extension existent et dpendent dulangage mais surtout des possibilits du serveur.


13/92

Droit lerreur

Grace lhistorique vous pouvez revenir

en arrire mme en cas dintervention

dans le code depuis la version CS3 et qui

samliore avec la version CS4.

Utilisez la commande Ctrl+Z ou le

panneau historique.


14/92

Cration dune page Web

Cliquer sur

nouveau

Cliquer sur

Page vierge

Cliquer sur

HTML

Cliquer sur 1 colonne

fixe centre

Cliquer surCrer

Onglets despages ouvertesType

daffichagesOutils de gestion

des fichiers

Cliquer sur le titre

Linspecteur deproprits Format

affiche En-tte1

Cliquer sur le texte

Linspecteur deproprits Format

affiche Paragraphe

Slecteur de balises

Rducteur de

panneaux en iconesUn clic droit sur les

onglet ouvre un menu

permettent de fermer

les panneaux inutiles


15/92

Enregistrer

Surtout enregistrer rgulirement son

travail en cliquant sur licne disquette.

Pour les noms de fichier nemployer aucuncaractre accentu ni les caractres

suivants *:/ \ =+#&?!()^.


16/92

Formatage des titres

Titre (code gnr): raccourci clavier.

Titre 1(): Ctrl + 1

Titre 2(): Ctrl + 2 Titre 3(): Ctrl + 3

Titre 4(): Ctrl + 4

Titre 5(): Ctrl + 5 Titre 6(): Ctrl + 6


17/92

Les autres balises

Si vous regardez dans la page de codevous verrez que les paragraphe sontdlimits par ces balises
.
Un saut de ligne par
ou
.

Caractres en italique par.

Caractres gras par.

Soulign par. Une liste par et lment de liste

par.


18/92

Travailler sur le code

Pour voir et modifier le code cliquer sur lebouton code ou encore le boutonfractionnerqui permet davoir le code et la

cration en mme temps. Si vous souhaitez avoir plus de contrle sur le

code source sur un second moniteur, utilisezlinspecteur de code. Il affiche le code dansune fentre distinct. Appuyez surF10 pour ouvrircette fentre et de nouveau F10 pour larefermer. Vous pouvez y accder par le menufentre | Inspecteur de code.


19/92

Ajouter des lignes de sparation

Cliquer sur licne

Barre horizontale

Ou Cliquer sur

InsertionPuis Cliquer sur HTML

Et sur Barre horizontale

Le code de la baliseHTML est


20/92

Titre du document

En HTML, chaque document possde un

titre figurant dans lentte (HEAD) du code

source, spcifi entre les balises

. Le titre est dfini par la

balise ; il saffiche dans la

barre de titre des navigateurs et sert

lindexation des moteurs de recherche.


21/92

Dfinir un titre

Saisir le titre dans la

zone titreSaisir le titre dans la

zone entre les balisesFaire des titres explicites car les moteurs derecherches en retiennent les mots clefs

Cliquer surAffichage puis

contenu de len-tte

De nouvelles icones

apparaissent

Cliquer sur le bouton de gauche

correspondant au titreLes proprits du titre

apparaissent


22/92

ISO, UTF8 cest quoi?

A cot du bouton titre se trouve le bouton Mtabalise du jeu de caractre.

Dreamweaver insre automatiquement cette

information importante dans len-tte. Lencodage par dfaut depuis la version CS3 est

UTF-8 et iso-8859-1 sur les versions 8 etantrieures. Les deux conviennent. iso-8859-

1permet dencoder la plupart des languesdEurope alors quUTF-8 la quasi-totalit deslangues du monde.


23/92

Affichage en direct

Grande nouveaut de la version CS4 elle permet

de visualiser la page comme dans un navigateur

en tant directement connect au serveur.

Il est aussi possible et mme ncessaire devisualiser la page dans le navigateur de votre

choix

Conseil faite un test avec au moins 2 navigateurs

Internet Explorer (Microsoft) et firefox(Mozilla)

voir mme Chrome(Google) et Safari(Apple)


24/92

Aperu dans le navigateur

Clic droit sur la mappemondeSlectionner votre navigateur

Bien que firefox ait de nombreux

utilisateurs, Internet explorer reste le

navigateur le plus utilis dans le monde.

Pour modifier la liste des

navigateurs cliquer ici


25/92

Modifier la liste des navigateurs

Pour ajouter un navigateurs

cliquer ici

Indiquer le nom

du navigateur

Indiquer lemplacement

du programme(cliquer sur parcourir)

Cliquer sur OK


26/92

Vrification du code source

Un outil de Dreamweaver permet de tester la

conformit du code source

Cliquer valider lemarqueurCliquer valider le

document actuel

La fentre infrieur

vous donne le rsultat

de lanalyse


27/92

Insrer du texte

Vous pouvez rcuprer des texteprovenant dautres diteurs comme Wordpar exemple.

Utilisez le copier et collage spcial.

Attention si vous importez en prenant tousles attributs de Word vous allez gnrer

un style CSS pour chacun deux ce quipeut vous posez des problmes pour votremise en page.


28/92

Mise en forme avec les CSS

Fixer la police du document

Le groupe de panneaux CSS

Formatage des caractres et desparagraphes

Utilisation de la balise DIV pour fixer la

largeurs des colonnes. Cration de fichiers CSS


29/92

Feuille de style CSS

Pour quun site web soit agrable lire et

regarder le texte et les images doivent se

prsenter de faon identique sur toutes les

pages.

Le site web doit tre galement facile

maintenir.

Les feuilles de styles on t cres pour

cela.


30/92

Feuille de style CSS

Une feuille de styles permet de dfinir des

emplacements prcis dans votre page

web.

vous y dfinissez les styles de vos titres,

paragraphes liens etc..

Cration dune feuille de style


31/92


Les navigateurs affiche une police pardfaut qui est diffrente dun navigateur lautre et mme entre plusieurs utilisateurs

diffrents. Il est donc important dimposerau navigateur ce que lon veut afficher.

Bonne nouvelle les CSS (Cascading StyleSheet) ou feuille de style en cascadedisposent dun langage de formatageperformant.


32/92


Dans le panneau

proprit cliquez sur

proprits de la pageSlectionner la police dans

la liste droulante en

cliquant sur ce bouton

Code gnr par Dreamweaver.

Eviter les polices qui ne sont pas proposes par dfaut

laffichage dans le navigateur nest pas garantie.


33/92

Le groupe de panneaux CSS

Si vous avez modifier le code

cliquez sur actualiser

Dans la zone texte taper TitreSlectionneren-tte 1

(balises )

Clic droit

ClicClic

Balise

Clic

Slectionner

H1

Clic


34/92

Modifier un style CSS (H1)

Cliquer surcolor

Cliquer sur

OK


35/92

Importance des styles CSS

Vous avez la possibilit de faire des stylesapplicables toutes le pages ou certainespage ditant des feuilles de styles dans des

fichiers distincts Vous dterminez ainsi le style de tout un site lamodification dun lment sappliqueautomatiquement tout le site au aux pages quien dpendent

Enorme gain de temps pour la maintenance dusite et grande souplesse dans les possibilits deprsentation.


36/92

Style CSS: classe CSS

2 style classe CSS

Une classe commence par un point suivit du nom de

la classe.

Classe non lie peut sappliquer nimporte quellment de la page. Par exemple .SousTitre

Classe lie une balise DIV par exemple. Dans

#main2 .SousMenu #main2 reprsente une balise div

qui dfinie la forme et le contenu dun cadre engnral et .SousMenu une classe pouvant sappliquer

tout lment situ lintrieur de ce cadre.


37/92

Style CSS: classe CSS

Cliquer bouton

droit et

slectionner

nouveau

Slectionner

ClasseTaper le nom ici

FondJaune

Cliquer et

slectionner la

couleur jaune

Slectionner le

paragrapheSlectionner la

classe appliquer

Cliquer sur

FondJaune


38/92

Fixer la largeur des colonnes

Le bloc de texte que nous avons faitprcdemment prend automatiquement lalargeur que lon donne au navigateur. Cela

peut tre trs gnant et modifiercompltement votre mise en page.

Pour viter cela nous allons fixer la largeurdes blocs dans lesquels nous allonsmettre le contenu de notre page web pardes balises


39/92

Les blocs DIV

Ce sont des boites ou des cadres que lon peutimbriquer.

Elles peuvent tre dotes de styles et de classes. Celasignifie que lon peut tout dfinir aussi bien la forme,

laspect et le contenu de ces boites. Chaque balise DIV reoit un identificateur unique appelid. Notre premire balise DIV sera le cadre gnral de lapage que lon appellera contenu dubloc .

Le formatage de la balise div en CSS scrit #blocPage {

Attributs de format

}


40/92

Dfinition de laspect de la page

Nous voulons une page de largeur 1024px avec espace intrieur de 10px

Un bloc den-tte

avec texte centr 3 colonnes

Une colonne menu de largeur: 130px, texte centr,accol au cot gauche de page, des caractres de12px, en noir, et fond transparent.

Une colonne principale de largeur: 540px accol gauche (soit la colonne menu) texte gauche

Une colonne publicit de largeur: ce qui reste


41/92

Cration du bloc DIV de page

Cliquer bouton

droit et

slectionner

nouveau

Slectionner ID

Donner un nom ici

blocPage

Cliquer sur OK

Slectionner boite

1024 pour la

largeur

10 pour le

remplissage

Cliquer sur OK

Rien ne se passe

mais voici le codegnr par notre

action


42/92

Insertion de balise DIV

En mode cration

slectionner tout le

contenu de la page

puis cliquez sur licne

balise DIVCliquez sur le bouton

slection de IDCliquez sur blocPage

Cliquez OK

Cliquez sur

affichage en direct

et vous constatez

que la largeur de lapage est fixe


43/92

Crer un fichier CSS

Dans lexemple prcdent les dfinitionCSS sont dans la page que vous avezcre. Mais si vous devez appliquer ces

rgles plusieurs pages vous devriezrecopier le code sur chaque pages.

Pour vitez cela et faciliter la maintenancedu site vous pouvez crer un fichiercontenant les rgles CSS de toutes lespages


44/92

Crer un fichier CSS

Cliquez Fichier

puis Nouveau

Cliquez sur CSS

Cliquez sur Crer

Cliquez enregistrer


45/92

Crer un fichier CSS

Mettre la page web formation.html en

mode code et slectionner le texte situ

enter les balises

Le copier puis le coller dans la page du

fichier formation.css .

Enregistrer les modifications

Joindre la feuille de style formation.css

la page web formation.html .


46/92

Joindre la feuille de style

Cliquez sur HTML Puis sur le bouton de

slection de classe

Cliquer sur joindre la

feuille de style

Cliquer Parcourir

Cliquer sur OK

Cliquer surFormation1

Cliquer sur OK


47/92

Appliquer une classe

de la feuille de style

Slectionner leparagraphe

Cliquer sur le

slecteur de classeCliquer sur leFondJaune

Le fond du

paragraphe est

maintenant Jaune


48/92

Insertion dimages

Les formats dimage reconnu par le Web.

Insertion dune image.

Rservoir dimage Position.

Texte de remplacement.

Lien.

Fond de page ou de cadre.

Code source de limage.


49/92

Les formats dimages

reconnu par le Web

GIF JPG PNG

Application Animation

, dessin

Photos Photos,

animation,

dessin

Couleurs 256 16,7millions

(true color)

16,7millions

(true color)

Transparence oui non oui

Infos Superpositionde plusieurs

images

Compression /

qualit variable

+ lourd non

reconnu par les

navigateurs

anciens


50/92

Rservoir dimage

Pour afficher une image dans une page webcette image dot tre prsente dans un dossiersur le serveur. Do limportance davoir undossier image pour les stocker.

Crer dabord ce dossier en local mettre lesimages dont on aura besoin dedans.

Si vous faite des galeries dimages faite un

dossier pour chaque galerie. Placer ensuite le dossier dimages sur le serveurweb.


51/92

Placer une image sur le serveur

Dans la boite outils fichiers slectionner ledossier images choisissez limage que vousvoulez mettre sur le serveur et utiliser lacommande placer.

Normalement lorsque lon place une page sur leserveur il est possible denvoyer les fichiers lismais a nest pas systmatique

Vous pouvez maintenant insrer des imagesdans vos pages Web en tant sur quellesapparaitrons dans votre navigateur.


52/92

Insertion de limageCliquer sur image

Cliquer sur dossier

Ouvrir le dossier image

et sectionner AG00011

Aperu de limageCliquer sur OK


53/92

Position

Cliquer sur Limage

Dplacer limage en

dbut de paragraphe

Cliquer sur le slecteur

dalignement

Cliquer Droite

Limage se positionne

droite du texte


54/92

Texte de remplacement.

Si limage ne saffiche

pas le texte deremplacement saffiche.

Trs important surtout si

limage a un lien vers

une autre page

Le texte de remplacement

se met ici


55/92

Lien

Si lon veut quen cliquant sur

limage on aille sur une autre

page, il faut crer un lien.

Cliquer sur dossier

Slectionner la pagedessin (par exemple)

Cliquer sur OK


56/92

Fond de page ou de cadre

Pour info on peut dtacher les

palettes doutils et le mettre en

mode flottant

Objectif: passer le fond de la

page qui est gris en orang

Cliquer sur body dans la feuilleCSS Formation1

Cliquer sur la

couleur orange

Cliquer sur le

bouton de couleur


57/92

Code source de limage

Regardons le code gnr par Dreamweaver.

En rouge la page de lien lorsque lon clique dessus.

En orange le lien ver le fichier de limage.

En bleu le texte de remplacement.

En vert la position.

Infobulle Le texte de remplacement apparat dans une infobulle dans

Internet Explorer.

Mais pour Firefox il faut rajouter title entre les balises.

Le code devient:


58/92

CSS prsentation de siteVoici ce que lonveut obtenir la fin

de ce premier

module de cours

sur Dreamweaver.

Pour cela nous

allons voircomment utiliser

les boites DIV, en

les positionnant de

faon relatives,

mais en fixant la

largeur maximalede la page.

Et aussi, comment

relier les pages et

les liens Hypertexte


59/92

Utilisation des boites DIV

Durant pas mal de temps les dveloppeurs Web ontutilis de tableaux pour avoir une belle prsentation.

Avec les nouveaux navigateurs ce nest plus ncessairepuisque lon dispose de boite DIV partie intgrante deCSS

Avantage le codes est plus facile maintenir il suffit demodifier la feuille CSS pour mettre jour un site entier.De plus le code est plus lger donc les pages sechargent plus vite.

Les tableaux seront donc utiliss uniquement pour

laffichage des donnes ou pour faire un formulaire, quipermet la saisie de ces donnes (objet du module deformation suivant).


60/92

Code source du fichier formation2.css(1)

body {

/* Jeu de police */

font-family: Georgia, Arial, Helvetica, sans-serif;

margin-top: 25px; /* marge superieure */

text-align: center;

background-color: #000000;

background-image:url(../IMAGES/Fond%20cadre%20haut.gif);

}

/* DIV global */

#Conteneur {

width: 1030px;


margin: 0;

border: 3px solid #666666;text-align: left; /* aligne a gauche */

color:#FFFFFF;

bottom: 0px;

padding-bottom: 0px;

}

/* DIV de bannire */

#Entete {

/*padding: 2px; /* remplissage */


text-align: center;

color: #FFFFFF;

}

/* Titre 1 de cet en tte */

#Entete h1 {

font-variant: small-caps; /* Petites capitales*/

color: white; /* blanc */

}


61/92

Code source du fichier formation2.css(2)/* DIV de la section principale */

#principale {background-color: #660000;

padding: 10px;table-layout:auto;width: 540px;margin-top: 0px;margin-right: 0px;margin-left: 0px;float: left;

text-align: left;}/* Titre 1 de la section principale */

#principale h1 {color: #FFFF00;font-size: 24px;

}/* DIV du menu */#menu {

font-size:12px;float: left; /* flotte gauche */width: 130px; /* largeur */background-color: #660000;

color:#FFFF00;/* gauche/droite 20, haut/bas 5 pixels */padding: 20px 0px;text-align: center;

}

/* DIV de la bande droite ou sera mis la pub */

#Pubdroit {background-color: #660000;

padding: 5px;float: inherit;top: 0px;text-align: center;width: auto;margin-left: 670px;margin-top: 5px;

color: #FFFFFF;}/*classe sous menu affect uniquement Pubdroit */

#Pubdroit .SousMenu{background-color:#000000;color:#FFFFFF;font-size:16px;font-family: Arial, Helvetica, sans-serif;word-spacing: 20px;margin: 4px;border: 3px solid #810005;padding-right: 3px;padding-left: 3px;

font-weight: bold;}


62/92

Code source du fichier formation2.css(3)

.pub1 {

font-family: Arial, Helvetica, sans-serif;


margin: 0px;

padding: 8px;

border-top-style: ridge;

border-right-style: ridge;border-bottom-style: ridge;

border-left-style: ridge;

float: none;

clear: none;

width: 310px;

position: relative;

font-size: 14px;font-weight: bold;

top: auto;


63/92

Elaboration du site TOP SOFT

Tout dabord nous allons

mettre en place les

lments de base de la

page.

Limage de la bannire

du site.

Les lments du Menu.

Un titre sur la page

principale.

Une image

Et un texte.

Un petit texte pour

llment de Publicit.

Cliquer sur le

slecteur de classe

Slectionner joindre la

feuille de style

Cliquer sur parc

Slectionner le dossier

CSS puisCliquer sur

Formation2.css

Cliquer sur OK

Cliquer sur OK

Utilisation de la boite DIV


64/92

Utilisation de la boite DIV1)conteneur

Toutslectionner

Cliquer sur

licne de la

balise DIV

Cliquer sur le

slecteur de IDCliquer sur

ConteneurCliquer sur OK


65/92

Utilisation de la boite DIV2)Entte

Slectionner

la bannire

Cliquer sur la

balise DIV

Slectionner

lID Entete

Cliquer sur

OK


66/92

Utilisation de la boite DIV3)Menu

Slectionner le

texte du Menu

Cliquer sur la

balise DIV

Cliquer sur

OK

Slectionner

le Menu


67/92

Utilisation de la boite DIV4)Principale

Slectionner le

texte et limage

sauf

lemplacement

Pub

Cliquer sur la

balise DIV

Cliquer sur

OK

Slectionner

Principale


68/92

Utilisation de la boite DIV5)Pub

Slectionner

lemplacement

Pub

Cliquer sur la

balise DIV

Cliquer sur

OK

Slectionner

Pubdroit


69/92

Appliquer la classe Pub1

Slectionner

lemplacement

Pub

Cliquer sur le

slecteur de

classe

Cliquer sur

Pub1


70/92

Liens du menu

Chaque lment du menu doit nous diriger

vers la page correspondante.

Pour cela nous allons crer des liens entre

les termes du menu et les pages vers

lesquelles ils doivent nous diriger.

Nous pouvons galement utiliser une

grande image dans laquelle on dfini deszones qui servent crer des liens.


71/92

Crer les liens du Menu

Slectionner

Accueil

Tirer la souris partir de

ce symbole vers le fichier

que vous voulez lier

Le nom du fichier

apparait dans le

champ lien

Vous pouvez galement cliquer

sur licne dossier pour

rechercher le fichier lier

Vous rptez la mme

opration pour chaque

lment du menu


72/92

Mettre un lien Email

Sur un site ne comportant pas de base de donne leseul moyen de recueillir des infos de vos visiteurs estquils vous envoie un Email.

Il est donc de la plus haute importance de mettre un liensur votre boite mail.

Problme ce lien pourra tre vu par tout le monde ycompris des robots rcuprateurs dadresses internet envu de spam (pub non dsire).

Vous trouverez dans les fragments de codes deslments pour que celle-ci ne saffiche pas. Vous pouvez

galement trouvez sur internet des scripts qui codentvotre adresse afin de la rendre compltement invisibleaux indsirables.


73/92

Crer un lien Email

Slectionner

Email

Cliquer sur Insertion

Cliquer Lien de messagerie

Cration du lien

mailto:courriel@domain_name

Modification du lien mailto:courriel@domain_name?subject=Site TopSoft

Si vous rajouter ce bout de code Site TopSoft apparaitra dans le champ

objet du mail que vous recevrez.


74/92

Crer un modle

Pour faire une nouvelle page vous pouvez

utiliser sur une page existante la fonction

enregistrer sous , donner un nouveau

nom et modifier la page pour quellecorresponde ce que vous voulez.

Autre solution partir dune page de base

vous crez un modle.


75/92

Cration du modleCliquer sur

Fichier

Cliquer sur Enregistrer

comme modle


76/92

Modle zones modifiables

Lorsque le modle est cr vous pouvez dfinirdes zones modifiables.

Par exemple ici on va mettre les boites

principale et Pubdroit en rgionmodifiables.

Tout le reste du modle est donc ensuiteprotg de toute modification intempestive.

Par contre si le modle est modifi toutes lespages utilisant ce modle pourront tremodifies en mme temps.


77/92

Dclarer une zone modifiable

Cliquer sur

Cliquer sur Insertion

Cliquer Objet de modle

Cliquer Rgion modifiable

Recommencer les mmes

oprations en slectionnant la

zone aprs

avoir cliqu dans cette zone


78/92

Les tableaux

Lusage des tableaux doit tre limit laffichage des donnes

Si une certaine poque les tableaux

savraient incontournable pour une belleprsentation lapparition des styles CSSon rendu cet usage caduque.

Dreamweaver vous donne dailleurs untrs important choix de modles deprsentation avec CSS

Ch i d t ti C


79/92

Choix de prsentation avec Css

propos par Dreamweaver CS4


80/92

Insertion dun tableau de donnes

Cliquer sur licne Tableau

Le tableau saffiche lemplacement du curseur

Vous pouvez ensuite modifier le

nombre de lignes et de colonnes

Toutes modifications sont possi

couleur de fond, cadrage du texte

chaque cellules, mais vous pouve

appliquer des classes Css aux ce

ou au tableau entier


81/92

Comportements

Les comportements sont des programmesJavascript permettant davoir des fonctionsou des effets spciaux sur la page web.

Dans le mme optique vous avez lesfragment de code qui peuvent vous aidez raliser un diaporama par exemple.

Dans lexemple qui sui nous allons activerune fentre de confirmation pour envoyerun message.


82/92

Appliquer un comportements

Cliquer sur Inspecteur de

balisesCliquer sur

ComportementsCliquer sur +

Slectionner

Courriel

Cliquer sur Pop-up

confirm message

Entrer le message de

confirmation

Cliquer sur OK

Cliquer sur

Affichage en

direct

Cliquer sur

Courriel

Cliquer sur Oui si vous tes daccord

La boite mail souvre automatiquement.

Sur Non il ne se passe rien


83/92

Configuration des prfrences

Comme de nombreux logiciel

Dreamweaver peut tre optimis pour

vous faciliter le travail en fonction de vos

habitudes.

La boite de dialogue prfrence permet de

rgler finement les fonctionnalits de

Dreamweaver.


84/92


Cliquer sur Edition puis

sur Prfrences

Cocher les cases qui

correspondent le mieux

vos habitudes

Ajuster ce nombre en fonctionde la capacit mmoire de

votre ordinateur

Penser utiliser

plusieurs navigateurs

pour tester vos pages


85/92


A la slection barre dtat dfinir lescaractristiques de la fentre pour laquellevous voulez optimiser votre site.

Choisir une vitesse de connexion pourindiquer le temps de chargement de lapage. Pour internet laisser 56k quicorrespond au bas dbit.

Pour la coloration du code cest au gout dechacun.


86/92


Pour la comparaison de fichiers il faut

utiliser un autre logiciel que lon indique ici.

En ce qui me concerne jutilise

Notepad++. Vous pouvez le tlcharger

gratuitement, cest un freeware, en allant

sur le site SOFTTOP .


87/92


Pour loption Copier coller cest selon vos

besoin sachez nanmoins que si vous

voulez tout copier dans un bloc de

slection vous devez cocher la deuximeoption. Et cocher toutes les cases

doptions.


88/92


Dans corriger le code, si vous ntes pas

sur de vous, cocher les 4 premires

options.

Laisser le reste par dfaut.

Dans lments invisibles cochez les

lments que vous voulez voir apparatre

(par une icne symbole) dans la page enmode cration.


89/92


Pour Elment PA, format de code, indicateur decodes laisser par dfaut.

Nouveau Document, cest en fonction du modede cration de pages que vous utilis. Si vous

navez que des pages en HTML laisser HTMLpar contre si vous introduisez des pages dansun autre langage prcisez ce langage(parexemple PHP si vous utilisez des pages avecdes lments de code PHP) pour que le serveur

le sache. Les langages que lon peut utiliser sontfonction des possibilits du serveur qui hbergevos pages web.


90/92


Pour Police, Programme de validation et

site je conseil de laisser par dfaut.

Pour style Css cocher tout ce qui est

forme courte vous conomisez du code.

Surbrillance cest selon vos gout et

couleurs.

Types de fichiers, laisser par dfaut.


91/92

Placer sur le serveur

Pour placer la page en

cours sur le serveur,

cliquer sur les flches

Cliquer sur Placer

Si vous avez activ cette option

lors de la configuration du site

(infos distantes) lenregistrement

du fichier fait automatiquement

cette opration.

Noubliez pas de placer

nouveau vos fichiers Css sur

le serveur distant en cas demodification de ceux-ci, sinon

elles ne serons pas prise en

compte lors de laffichage

dans les navigateurs.

Pour placer la page en

cours sur le serveur,

cliquer sur les flches puissur placer.


92/92

Conclusion

Dfinir le contenu du site, quelles pages, les titres, lesliens entre les pages etc...

Prparer une maquette graphique pour dfinirlapparence visuelle du site avec Photoshop ou Fireworkpar exemple.

Entrer les paramtres du site donns par votrehbergeur de site web.

Confectionner les pages.

Tester les pages en locale.

Placer les pages sur le serveur.

Tester nouveau les liens de toutes les pages dans desnavigateurs diffrents pour vrifier que laffichage estbien le mme dans tous les cas.

formation dreamweaver cs4

Documents