COURS DE WEB DESIGN - Le blog de Helmut - Ivoire Blog

jcmoutoh.ivoire.blog.com

COURS DE WEB DESIGN - Le blog de Helmut - Ivoire Blog

3131

NIVEAU : DEBUTANT

NOM :

PRENOMS :

CONTACT :

AUDITEUR

Formateur

Jean Claver MOUTOH Helmut

Blog : http://Jcmoutoh .ivoire-blog.com


1- IMAGES & COULEURS

COURS DE WEB DESIGN

Avant de se lancer dans le webdesign, il me semble intéressant de faire un petit rappel des choses

essentielles dans le traitement d’image. Certains éléments de ce rappel paraîtront simple à certains mais

seront utiles à d’autres…

Vocabulaires :

RVB : La couleur est définie par une combinaison de rouge, vert et bleu. Cette palette est dite additive.

CMJN : la couleur est définie par une combinaison de cyan, magenta, jaune et noir. Cette palette est dite

soustractive

Connaissances indispensables sur les images :

Le spectre : Il s’agit de toutes les couleurs possibles d’un espace chromatique comme le RVB ou CMJN.

La teinte : Elle définit un point précis du cercle chromatique ou spectre ci-dessus.

La valeur : Décrit la plage de couleurs, du pâle au vif. On modifie la valeur pour faire passer une image du

rouge foncer au rouge clair par exemple.

La saturation : Définit l'intensité d'une couleur. Les couleurs assourdies sont des couleurs dont la saturation

est très faible, on peut ainsi transformer une même couleur en plusieurs autres.

Le contraste : Il s'agit de l'écart entre les valeurs. La lisibilité d'un texte est liée au contraste. Il faut donc

faire très attention au contraste quand on réalise un logo par exemple.

Pour résumer :

Connaître la terminologie des couleurs est utile pour détailler le choix d'une combinaison de couleurs

efficace. La teinte, la valeur et la saturation sont les éléments clés d'une sélection de couleurs.

La valeur (luminosité ou absence de luminosité) de vos couleurs affecte la lisibilité du résultat final. Il est

important d'appliquer de forts contrastes aux zones de textes si vous utilisez une image de fond pour un

tableau par exemple.

Comme vous le savez déjà certainement chaque couleur à une signification, il faut absolument prendre en

compte ce critère lors de la création de votre charte graphique.

Il y a trois types de couleurs :

Les couleurs primaires : Il s’agit des couleurs de base, on ne peut pas les obtenir en mélangeant d’autres

couleurs. Ce sont les couleurs que nos yeux perçoivent le mieux : le rouge, le jaune et le bleu.

Les couleurs secondaires : Pour obtenir une couleur secondaire il faut mélanger deux à deux, à parts

égales les couleurs primaires.

Par exemple du jaune et du rouge donneront de l’orange, le bleu et le jaune du vert ou encore le bleu et le

rouge donneront du violet.

Les couleurs tertiaires : Pour obtenir une couleur tertiaire on mélange deux couleurs secondaires à part

égales. Ces couleurs sont toutes voisines sur la roue des couleurs, elles se marient facilement et donnent

ainsi un ensemble visuellement agréable. Les couleurs qui contrastent entre elles sont celles qui sont

diamétralement opposées sur la roue comme le vert et l'orange ou le violet et la jaune. L'association de deux

couleurs opposées donne un résultat assez fatiguant pour l'œil, donc à ne pas utiliser en webdesign.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 2


La signification des couleurs :

Rouge : Couleur chaude symbole de l'amour, il ne faut pas en abuser (rire) même en webdesign car le

rouge ressort beaucoup, la dominance du rouge dans une charte graphique n’est pas conseillée, mais à

faible dose pourquoi pas.

Orange : Couleur chaude source de tonicité, on l’utilise fréquemment en webdesign, mais avec une teinte

plutôt claire.

Jaune : Couleur chaude symbole de la richesse elle représente également l'univers intellectuel.

Vert : Couleur chaude couleur du végétal, elle est synonyme d'espérance et de fertilité mais elle n'est pas

source de gaieté ni de stimulation. On s'en lasse vite.

Bleu : Couleur froide, elle crée un climat frais, doux, calme, de grande sérénité. Elle agit sur nous en

stimulant notre intuition. Une couleur très utilisée en webdesign.

Violet : Couleur froide Favorise la méditation et le sommeil, calme les excités, nous apporte un équilibre

intérieur.

Blanc : Source de pureté et de transparence, recommandable pour les fonds de page.

Gris : symbolise l'infini , la quiétude, utilisable en fond de page également.

Noir : couleur de l'austérité, en webdesign il faut s’en servir presque uniquement pour les textes.

2-LE CHOIX DES POLICES

Lorsque le navigateur de votre visiteur accède à vos pages Web, il ne peut afficher que les polices qui se

trouvent sur son propre système, donc les polices installées par défaut avec Windows.

Si le visiteur ne possède pas la police que vous avez choisie, la police par défaut se chargera. Times New

Roman sous Windows et Times pour les MacOS.

Il faut donc faire attention :

-Utilisez pour vos pages des polices courantes que tout le monde possède comme Times New Roman, Arial,

Courrier New ou encore Verdana par exemple.

- Ou bien utilisez des images sur lesquelles vous aurez écrit avec la police désirée mais attention ceci

rallonge le temps de chargement. Cette méthode n’est recommandable que pour les titres de catégorie.

Conseils :

- Courrier et le Courrier New sont des polices à chasse fixe, tous les caractères ont la même largeur, comme

sur une machine à écrire.

- Times & Times New Roman : Polices avec shérif (anglais : empattements). Elles sont agréables à lire pour

un document imprimé mais plus difficiles à comprendre sur un écran d’ordinateur.

- L'Arial et l'Helvetica sont des polices sans shérif, donc plus faciles à lire sur un moniteur.

Vous pouvez choisir les polices :

Dans l’exemple ci-dessous le navigateur va d’abord chercher à charger la police Verdana, s'il ne trouve pas

celle-ci il cherchera Arial et ainsi de suite.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 3


La balise est celle qui concerne la police. L’utilisation de l'attribut face permet de préciser une liste

de polices. Voici par exemple comment attribuer les polices Futura, Arial et Helvetica au texte "Fin du cours

de webdesign" :

Fin du cours de Webdesign

3- GIF OU JPEG ?

GIF et JPEG, Définition :

Les formats GIF et JPEG sont deux formats de fichiers d'images au même titre que TIFF, PICT, BMP et

autres dont vous avez certainement déjà entendu parler. Si les formats GIF et JPEG sont si populaires c'est

surtout parce qu'ils sont les deux formats standards pour Internet. En d'autres termes, pour placer des

images sur vos pages Web il faut qu'elles aient été sauvegardées soit au format GIF ou soit au format

JPEG ...

Pourquoi GIF et JPEG :

L'un des soucis premiers du webmaster est de réussir le difficile équilibre entre un site au graphisme

alléchant et un temps de chargement supportable pour les internautes. Les formats GIF et JPEG sont

intéressants parce qu'ils permettent de réduire considérablement la taille (en kilo-octets) des images. Même

avec la généralisiation de l'adsl, il faut faire attention au poids des images et procèder à leur compression en

les mettants en GIF ou JPEG.

Le Format GIF :

Le format GIF est un format qui utilise une compression sans perte de qualité.

Les images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté

pour les photographies, les images nuancées et les dégradés. Par contre ce format donne d'excellents

résultats pour les images avec un petit nombre de couleurs, les logos, les formes géométriques, boutons

etc...

Le format GIF supporte la transparence et il permet également de créer des animations : Les Gifs Animés.

L'option d'entrelacement permet d'afficher l'image progressivement, l'image étant flou au début du

chargement et devenant de plus en plus précise.

Le Format JPEG :

JPEG (Joint Photographic Experts Group) est une alternative à GIF. Ce format de compression est très

efficace mais entraîne une perte de qualité. Plus l'image est compressée, plus la qualité de l'image diminue.

Il convient donc de trouver un compromis permettant un chargement rapide tout en gardant une qualité

acceptable. Les logiciels graphiques permettent de régler le facteur de compression qui va de 1 à 99.

Le format JPEG est particulièrement adapté et recommandé pour les images de type Photographies, il peut

supporter en effet 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les

dégradés. Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations.

GIF ou JPEG ?

Il n'y pas de réponse absolue même si dans certains cas le choix de l'un ou de l'autre des formats s'impose

comme une évidence. C'est à vous de voir quel est le meilleur rendu avec le poids le faible possible.

Le formt PNG

De l’anglais : Portable Network Graphic.

Format de fichiers graphiques. Un candidat à la sucession du format GIF, plus complet, il est capable de

contenir des tracés vectoriels plus légers et indépendants de la taille en pixels du fichier, et surtout la

transparence. Ce format existe depuis quelques années déjà, peut être affiché par les dernières versions

d’internet explorer et netscape, mais est bizarrement peu employé sur internet.

Il est pourtant en open source, c’est à dire que son utilisation n’est pas protégée par un brevet, tous les

programmeurs peuvent donc l’utiliser sans payer des droits de licence.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 4


DREAMWEAVER

1-PRESENTATION GENERALE DE DREAMWEAVER

Dreamweaver est l'éditeur HTML par excellence. Non seulement il est WYSIWYG (What You See Is What

You Get, utilisable comme un traitement de texte), mais en plus :

• il rédige un code HTML économique (pas de code inutile pour alléger la page)

• il utilise le HTML à 100% (ce qui n'est pas le cas de Front Page qui possède ses composants

propres)

• l'affichage sous Netscape et Internet Explorer est plus fiable. (Front Page est essentiellement

optimisé pour Internet Explorer)

Vous pouvez télécharger une version d'évaluation sur le site de Macromedia

Voici un aperçu des différentes fonctionnalités de Dreamweaver :

• les modèles : changez l'apparence de l'intégralité de votre site en quelques clics.

• La bibliothèque : Certaines icônes (contact, forum ou autre) reviennent souvent, faites-en un

élément de la bibliothèques, vous pourrez alors l'ajouter en 1 Clic à vos pages.

• Vérification des liens (indispensable pour éviter les erreurs de lien)

• Vous voulez changer tous les liens qui pointent vers X vers Y. Pas de problème. Dreamweaver le fait

automatiquement en 2 coups de clics.

• Comme dans Front Page, Dreamweaver vous propose une arborescence de votre site.

• Possibilité de vérifier la compatibilité de la page avec différents navigateurs

• ...

2- LA MISE EN PAGE AVEC DREAMWEAVER

Pour que l'affichage soit compatible avec les 2 principaux navigateurs, un seul moyen : les tables. Il est vrai

que Dreamweaver gère les calques admirablement mais l'affichage sous Netscape peut s'avérer

extrêmement capricieux. Je ne vous le conseille donc pas.

Comment faire votre première table ? Créez un nouveau document (Control - N ou menu Fichier >>

Nouveau fichier).

Menu : Insertion Tableau (touche de raccourci : Control - ALT - T) Vous arrivez sur cette fenêtre :

Vous allez définir les grandes lignes de votre table avec cette boîte de dialogue. Inscrivez simplement le

nombre de lignes et de colonnes. L'aspect de la table est modifiable après via les propriétés de la table.

Les propriétés de la table

Exemple de table en mode rédaction au sein de DW :

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 5


Sélectionnez la table en cliquant sur une des lignes de la table (sauf celles à gauche et en haut). Si la palette

propriétés n'est pas affichée, allez dans le menu Modifier - Propriétés de la sélection (la touche de raccourci

est Control - F3)

La palette propriétés (1) :

Espace V : voir schéma (bas de page)

Espace H : inutile

Nombre de lignes/colonnes : si vous voulez ajouter des lignes ou des colonnes mieux vaut passer par le

menu contextuel (bouton droit) pour ajouter/supprimer lignes/colonnes.

Largeur/Hauteur : 2 possibilités : pixels ou pourcentage (voir note ci-dessous)

Bordure claire/Sombre : vous permet d'attribuer une couleur à vos bordures. Dans ce cas là il faut que la

largeur de bordure soit minimum à 1 (voir plus bas) :

Remarque :

Vous pouvez attribuer un pourcentage (80 % de largeur par exemple). Sachez simplement que votre page

n'aura pas le même aspect sur un écran configuré en 800x600 ou en 1024x768. Plus la résolution sera

grande plus votre table sera grande. Si vous décidez d'opter pour une largeur fixe (400 pixels par exemple),

n'oubliez pas - si vous êtes en 1024x768 - que beaucoup de monde se trouve en 800x600. Si vous mettez

une largeur de table de 900 pixels, les postes en 800 x 600 seront obligés de faire défiler horizontalement

votre page (pas très pratique).

La palette propriétés (2) :

Remplissage : voir schéma (bas de page)

Espacement de cellule : voir schéma (bas de page)

Aligner : Pour aligner à gauche, droit ou au centre une table, vous devrez passer par ce menu.

Bordure (1) : largeur de la bordure.

Arrière-plan (1) : mettre une image en arrière plan de la table. Si oui cliquez sur le dossier jaune et

naviguez jusqu'au fichier image.

Arrière-plan (2) : pour appliquer une couleur de fond à votre table.

Bordure (2) : si vous désirez que votre bordure soit colorée.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 6


Voici un schéma qui explique les différentes possibilités de mise en page d'une table :

3- LES COMMANDES DISPONIBLES

Les tables servent à mettre en page. Voici l'explication des différentes commandes et comment les obtenir :

Diviser la cellule en ligne ou en colonnes

Vous êtes dans une cellule, vous souhaitez insérer une ligne/colonne au sein de cette cellule :

Positionnez le curseur à l'intérieur de celle-ci puis cliquez sur dans la palette propriétés (ou Clic Droit /

tableau / fractionner la cellule), vous arrivez sur cette fenêtre :

Sélectionnez lignes ou colonnes puis indiquez le nombre souhaité

La commande insérer ligne ou colonne depuis le bouton droit

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 7


Attention il y a une différence entre la commande précédente (diviser à l'aide de ) et la commande

accessible depuis le Clic Droit dans une cellule / tableau / Insérer ligne(s)/colonne(s). Cette deuxième

commande va insérer une ligne sur toute la hauteur (colonne) ou largeur (ligne) de votre table. Tandis que la

précédente ne va effectuer la même opération que dans la cellule en cours.

Remarque : la commande insérer ligne ou colonne depuis le bouton droit, insère la cellule à gauche (pour la

colonne) ou en haut pour la ligne. Si vous souhaitez ajouter une ligne/colonne de l'autre côté ou si vous

voulez en ajouter plusieurs à la fois, sélectionnez insérer des lignes et des colonnes. Vous pourrez alors

choisir combien en insérer et à quel endroit.

Fusionner les cellules

Il vous faut sélectionner plusieurs cellules pour avoir accès à cette commande. Pour sélectionner plusieurs

cellules, maintenez le Clic et allez d'une cellule vers l'autre. Sur l'exemple ci-dessous, les 2 cellules

supérieures sont sélectionnées et peuvent donc être fusionnées.

4- LES PALETTES

Le lanceur est très pratique si vous ne connaissez pas les touches de raccourcis. Il vous permet d'accéder à

la majorité des commandes ou interfaces disponibles de Dreamweaver. Une nouveauté pour cette version 3,

la possibilité de personnaliser ce lanceur (voir plus bas).

Icone Descriptif Raccourci

Carte de votre site

(arborescence de votre site)

Bibliothèque (élément

F5

préenregistrés et réutilisables

dans n 'importe quelle page)

Les styles (ce ne sont pas les

F6

feuilles de style) permet

d'enregistrer un style de texte

(gras, italique ...)

Ctrl F7

Les feuilles de styles (CSS) F7

Insérer un script préenregistré

ou le créer

Historique : permet d'annuler

F8

(ou enregistrer) une série

d'actions

Mode HTML. Ouvre une

F9

fenêtre supplémentaire

affichant le code de la page au

format HTML

F10

Personnaliser le lanceur Pour le personnaliser, rendez-vous dans les préférences de DW, pour les afficher :

menu édition préférences ou Control - U. Vous arrivez sur cette fenêtre, sélectionnez dans la zone de liste

gauche, Palettes flottantes :

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 8


Pour ajouter cliquez sur + (plus) , pour en supprimer cliquez sur - (moins). Vous pouvez également choisir

d'organiser dans l'ordre que vous le souhaitez, les éléments du lanceur grâce aux 2 boutons sur la droite

(Haut - bas).

Voici les différents raccourcis palettes que vous pouvez avoir. Vous serez amener à (si vous l'utilisez)

changer le lanceur, suivant les fonctionnalités que vous utilisez ou pas. Si vous n'utilisez pas les cadres,

enlevez cette commande du lanceur, si vous ne comprenez rien au HTML, enlevez Source HTML etc, etc ...

N'oubliez pas que chacune de ces palettes est accessible depuis une touche de raccourcis ou depuis le

menu fenêtre.

5- CREATION DU SITE

Avant de pouvoir créer un site sur Dreamweaver, il vous faudra créer un répertoire vide sur votre disque dur.

Ce sera dans ce répertoire que sera placé votre site. Nommons ce répertoire : C:siteweb

Vous pouvez maintenant ouvrir Dreamweaver. Vous arrivez sur une fenêtre avec 2 volets vides. Cliquez sur

, vous arrivez sur cette fenêtre :

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 9


Nom du site : cette information est utile uniquement si vous gérer plusieurs sites Internet. Cela sera le nom

qui s'affichera quand vous basculerez d'un site à un autre.

Dossier racine local : où se trouve les fichiers de votre site sur votre disque dur ? Cela correspond au

dossier que l'on vient de créer.

Actualiser automatiquement la liste des fichiers locaux : cochez cette option. Elle permet, lors de la

copie de fichiers sur votre site local, que les fichiers s'affichent automatiquement. C'est un peu moins rapide

mais plus sûr lorsque vous copiez des fichiers dans votre répertoire.

Option de gestion des liens :

Adresse HTTP : inscrivez l'adresse de votre site dans cette case. Si vous inscrivez un lien complet (du type

http://votresite.com/lien.html), il sera mis à jour en cas de déplacement d'un fichier. Par exemple vous avez

un fichier A qui pointe vers le fichiers B de cette façon : http://www.votresite.com/B. Si vous décidez de

mettre B dans un autre répertoire, Dreamweaver va automatiquement mettre jour le fichier A avec la bonne

adresse.

Cache : Cette case doit être cochée. Elle permettent d'accélérer la mise à jour en cascade. (Plusieurs

fichiers à la fois).

Infos du serveur Web :

Dans cette partie seront entrées vos informations pour la mise à jour de votre site via FTP. (Ce qui vous

permet de mettre vos fichiers sur Internet)

Hôte FTP : l'adresse de votre serveur. Lorsque vous créez un compte chez un hébergeur (gratuit ou pas),

vous recevez ces informations par courrier électronique. Ces informations se trouvent également

généralement dans la FAQ de l'hébergeur.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 10


Répertoire hôte : si votre répertoire pour déposer vos fichiers ne se trouve pas à la racine de

ftp.serveur.com. Si vous ne comprenez pas, laissez tomber pour l'instant vous comprendrez en vous

connectant la première fois à votre serveur.

Nom d'utilisateur et mot de passe : donné lors de votre inscription chez votre hébergeur (vous avez

également du les recevoir par courrier)

Utiliser le FTP passif / Pare Feu : ne s'applique que dans le cas des connexions à Internet via un réseau

local.

6- GESTION DE VOTRE SITE

La fenêtre site vous permet de gérer vos fichiers html/images. Avec l'affichage en arborescence, vous aurez

une vision globale de la structure de votre site. Explications :

Vous êtes dans la fenêtre site (si vous n'y êtes pas appuyez sur F5), cliquez sur .

Après avoir analysé le site, Dreamweaver vous affiche l'arborescence. Si vous obtenez un message d'erreur

vous indiquant qu'il n'y a pas de page d'accueil définie, c'est expliqué un peu plus bas.

Le fichier d'accueil est index.html, analysons les pages enfants

En bleu : ce sont les liens externes.

En noir : les liens vers les pages de votre site.

En rouge : Problème - la page n'existe pas.

Vous pouvez, si votre site comporte beaucoup de niveaux, changer la page d'accueil pour l'affichage. Cela

vous évitera de rechercher dans les sous fichiers. Pour ce faire, Clic Droit sur le fichier que vous voulez

mettre en page d'accueil et sélectionnez Définir en page d'accueil. Par exemple sur l'image ci-dessous, j'ai

défini forum.html comme page d'accueil.

Comme vous pouvez le constater, seuls les enfants de cette page sont affichés.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 11


Personnaliser l'affichage

vous pouvez personnaliser l'affiche de l'arborescence. Allez dans les options de votre site, cliquez sur

, sélectionnez le nom de votre site puis cliquez sur Mise en forme de la carte du site

(ou menu Affichage - mise en forme), vous arrivez sur cette fenêtre :

Nous retrouvons dans le champ Page d'accueil la même fonctionnalité accessible depuis le bouton droit [voir

plus haut] vous pouvez personnaliser l'affichage physique : largeur et nombre de colonnes.

Etiquettes des icones : il est très pratique de cocher titres des pages. Cela vous permet de retrouver très

facilement les pages auxquelles vous avez oublié de donner un titre (par défaut la page se nomme - Untitled

Document)

Afficher les fichiers dépendants : si vous cochez cette case, vous verrez également les liens vers les

images par exemple

7- VERIFICATION DE VOS LIENS

La vérification de votre site sur votre poste local est indispensable pour éviter ces fameuses erreurs 404

(fichier non trouvé) ou de surcharger votre serveur de fichiers inutiles. dreamweaver vous propose de

rechercher les liens brisés ainsi que les fichiers orphelins.

Les liens brisés sont des liens au sein de votre document qui pointent vers un autre document ou image qui

n'existe pas.

Les fichiers orphelins sont des fichiers qui ne sont en liens sur aucun autre fichier. Très pratique pour ne pas

surcharger votre serveur avec des fichiers qui ne seront jamais ouverts par l'internaute car aucun lien ne

pointe vers ceux-ci. Il peut d'agir de document HTML ou d'images.

Pour commencer nous devons recréer le site du cache. Menu Site - recréer le site du cache. Si cette option

est inaccessible, vous pouvez l'activer dans les options de votre site.

Remarque : Le fait que le cache soit activé accélérera la recherche des erreurs. Par contre, si le cache est

activé et qu'il n'est pas à jour, Dreamweaver risque de ne pas trouver toutes les erreurs. N'oubliez pas cette

étape !

Pour lancer la vérification sur votre site, Menu Site - vérifier tous les liens du site (touche de raccourci

Control - F8). La vérification se lance.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 12


Dans le cas de site comportant beaucoup d'erreurs, il est conseillé d'enregistrer le rapport à l'aide du bouton

à cet effet pour avoir un rapport détaillé dans un fichier texte.. Vous pourrez ouvrir ce rapport à l'aide de

n'importe quel éditeur de texte.

En effet, peu d'améliorations ont été apportées à ce vérificateur de liens depuis la version 2. Si vous doublecliquez

sur un des fichiers incriminés, le fenêtre du vérificateur reste au premier plan gênant la correction.

Espérons que cela sera modifié pour la version 4.

Remarque : Pour les sites semi-dynamiques, les liens du style http://www.memoclic.com/?id=3 provoqueront

un lien erroné même si ce n'est pas le cas. Nous n'avons pas la possibilité d'ignorer les paramètres de

l'URL.

8- INSERER UNE IMAGE

1/ Insérer une image normale

2/ Faire une image survolée (rollover)

3/ Faire une image carte : comportant plusieurs zones cliquables(image map)

1/ Insérer une image normale

Rendez vous sur votre document puis positionnez le curseur là où vous voulez placer l'image (vous pourrez

la bouger après). Menu Insertion - Image (touche de raccourci : Control - ALT - I). Vous arrivez sur cette

fenêtre :

Choisissez l'image que vous voulez insérer. Voyons maintenant les propriétés de l'image incluse.

Pour afficher les propriétés de l'images, faîtes un simple Clic sur l'image puis menu - modifier - propriétés de

la sélection. (Raccourci - Control - F3)

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 13


Les propriétés de l'image

Carte : vous permet de définir plusieurs zones cliquables au sein d'une même image. La version 3 a

proposé une amélioration de cette fonctionnalité. Les zones cliquables sont maintenant faisables depuis la

page en cours. Pour la version 2, il faut cliquer sur Image Map et définir ses zones.

Largeur/Hauteur : par défaut , lors de l'insertion de l'image, la largeur et hauteur correspond à la taille

exacte de l'image. Vous pouvez avoir besoin (rarement) de changer ces informations. à savoir : le poids de

l'image reste le même. Si vous avez modifié la taille de l'image et voulez revenir à sa taille initiale, faîtes un

Clic droit sur l'image puis choisissez Actualiser la taille.

Espace Vertical/Horizontal : cela correspond à l'écart (horizontal ou vertical) entre l'image et le texte au

dessus ou à côté.

Source : le chemin de cette image (où se trouve-t-elle ?). Si vous définissez le chemin de l'image en absolu

(c'est à dire avec http://), l'image n'apparaîtra pas sous Dreamweaver mais apparaîtra dans le navigateur.

Lien : Voulez vous définir un lien lors du Clic sur l'image ? si oui indiquez le chemin de la cible (ou naviguez

dans vos répertoires à l'aide du dossier jaune)

Cible : cette option est grisée sur mon image car il n'y a pas de lien. Si vous mettez un lien vous pourrez

choisir d'ouvrir le lien précisé dans la case au-dessus, dans une nouvelle fenêtre (_blank), au dessus de

tous les cadres (_top), dans le cadre en cours (_self), le cadre parent (_parent) ou un autre cadre (défini par

vous-même).

N'utilisant pas les cadres : je n'expliquerai pas cette fonctionnalité. (en plus j'aime pas ça (;-)

Source faible : si votre image est très lourde (+ de 100 Ko est vraiment aux limites du raisonnable pour une

image), vous pouvez indiquer le chemin d'une image très très légère (de la même hauteur et largeur) pour

indiquer à l'internaute qu'une image lourde se charge.

Aligner : permet d'aligner l'image à une certaine position par rapport au texte.

Sec : cela correspond au texte qui s'affiche lorsque vous survolez une image avec la souris. Survolez

l'image ci-dessous par exemple.

Bordure : oui ou non. Si, lorsque vous faîtes un lien sur l'image, une bordure s'ajoute, mettez 0 (zéro) dans

cette case.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 14


2/ Faire une image survolée (rollover)

Qu'est-ce qu'une image survolée (rollover) ? Placer votre souris au dessus de cette image :

Comment faire ? Confectionnez déjà vos deux images : celle qui apparaîtra normalement et celle qui

s'affichera lors du passage de la souris.

Remarque : La seconde image ne nécessite pas un effet trop marqué, c'est souvent les effets les plus

discrets qui sont les plus esthétiques.

Ensuite, dans Dreamweaver, menu Insertion >> Image survolée. (Dans Dreamweaver 2 : Insertion >> Image

retournée). La fenêtre suivante s'affiche :

Nom de l'image : donnez si possible un nom parlant à cette image (évitez accents, majuscules ou espaces)

Image originale : l'image qui s'affichera en premier

Image survolée : celle qui s'affichera lors du passage de la souris

Précharger les images : les images qui apparaissent lors du passage de la souris, seront chargées dès le

début. Si vous avez beaucoup d'images survolées, décochez cette case. Il n'est pas conseillé d'en mettre

trop.

Si cliquée, aller à l'URL : le lien

Remarque : Le nombre des images étant doublé, il est indispensable de partir à la chasse au Ko (faire en

sorte que vos images soient le plus légère possible)

3/ Faire une image carte (image map)

L'image "carte" permet, avec une seule image de définir plusieurs zones cliquables.

Pour dessiner une zone cliquable procédez comme suit :

Donnez un nom à votre carte dans la zone de texte à droite de Carte. Sélectionnez l'outil pour dessiner votre

zone cliquable. puis dessinez la sur l'image même (la zone qui apparaît ne s'affichera pas dans le

navigateur). La palette des propriétés change et devient ceci :

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 15


Lien : correspond au fichier qui va être ouvert. Cliquez sur le dossier jaune pour trouver le fichier cible.

Cible : même remarque que pour la page précédente. (Où va s'ouvrir le lien ?)

Sec : même remarque que sur la page précédente (le texte qui va apparaître en survolant la zone).

Vous êtes maintenant capable de créer une image contenant plusieurs liens.

Remarque : Pour créer ceci sur la version 2 de Dreamweaver, cliquez avec le bouton droit sur l'image puis

sélectionnez Carte graphique. La présentation diffère mais le principe reste le même.

9- LES PROPRIETES DE VOTRE PAGE

La fenêtre des propriétés de la page inclue des fonctionnalités importantes. Pour afficher cette fenêtre :

Affichage >> Propriétés de la page ou plus rapide : Control - J. (Dans Dreamweaver 2, Modifier >>

Propriétés de la page) :

Explications des champs

Titre : cette information - malgré les apparences - est capitale. Ce titre apparaîtra dans la barre de titre du

navigateur mais aussi et surtout, c'est ce titre qui sera repris par les moteurs de recherches quand vous

vous référencerez. Ce mini texte ne doit pas excéder 100 caractères - dans le cas contraire votre titre sera

tronqué. Plus d'informations sur le référencement.

Image d'arrière plan : cette image constituera le fond de votre page. Au lien du blanc ou une autre couleur

quelconque, l'image sera affichée en mosaïque. Vous rédigerez votre page normalement par dessus.

Couleur d'arrière plan : par défaut, la couleur est #FFFFFF (c'est-à-dire blanc). Attention si Blanc n'est pas

précisé, votre page aura un fond gris sur certains navigateurs. Consultez cette page pour connaître le code

de la couleur que vous souhaitez.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 16


Remarque concernant votre fond de page :

Évitez bien sûr les images trop lourdes. Il faut également que l'image (ou la couleur) de fond contraste

suffisamment avec votre couleur de texte (et lien). Par exemple avec un fond noir, vos liens seront illisibles

en bleu foncé. Cela parait évident mais énormément de sites sont illisibles.

Couleur du texte : ce champ vous permet de définir, une fois pour toute, votre couleur de texte. Si vous

avez choisi un fond noir - changez la couleur du texte en blanc dans cette fenêtre et la couleur sera

automatiquement appliquée à toute votre page

Couleur des liens : pareil que texte mais pour les liens.

Couleurs des liens visités : pareil que lien mais uniquement ceux qui ont été déjà visités par l'internaute.

Couleur des liens actifs : pareil mais ne concerne que ceux qui sont sélectionnés (cliqués).

Marge Gauche/Haut - Largeur/Hauteur Marge : ces 2 champs font à peu près la même chose, à savoir

définir les marges. Si vous voulez le même affichage (en ce qui concerne les marges) avec les 2 navigateurs

(Internet Explorer et Netscape), vous devez remplir les 4 champs. Marge Gauche/Haut fonctionnera avec

Internet Explorer tandis que largeur/Hauteur marge fonctionnera avec Netscape.

Remarque : Si vous ne précisez pas de marge, celle-ci ne sera pas de zéro. Il faut indiquer zéro pour

supprimer les marges.

Tracé de l'image : très spécifique. Si vous avez une maquette (image) de votre page, vous pouvez indiquer

l'emplacement de l'image dans ce champ, cette image sera alors votre fond. Rédigez alors votre page par

dessus. Cela permet d'avoir votre maquette sous les yeux. Si vous utilisez ceci, vous pouvez également

ajuster la transparence de façon à voir la différence entre le tracé et ce que vous rédigez.

STYLES CSS

1. Empêcher l'ouverture des fichiers CSS lors d'une modification

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 17


Dans Dreamweaver MX 2004, chaque modification de style entraîne l'ouverture de la feuille de style. Je vous recommande ce

changer dette préférence si vous ne souhaitez pas modifier votre feuille de style externe dans le code. Pour ce faire :

Aller dans les Préférences de Dreamweaver Choisir la catégorie Styles CSS Décocher l'option

"Ouvrir les fichiers CSS lors d'une modification

2. Créer une feuille de style externe

Aller dans le menu fichier > Nouveau Puis choisissez la catégorie : Page

de base Dans Page de base, sélectionnez CSS Cliquez sur le bouton créer

Une fois créée enregistrez votre feuille de style externe : Menu Fichier >

Enregistrez sous

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 18


3. Attacher une feuille de style externe

Pour attacher une feuille de style externe à un document html :

Ouvrez le document html Dans la Fenêtre style CSS, cliquez sur le bouton "Attacher une feuille de style"

Dans la boîte de dialogue suivante, cliquez sur le bouton parcourir pour sélectionner le ficher css que vous souhaitez attaché.

4. Modifier Un style

Menu Fenêtres > Style CSS Sélectionner le style à modifier Cliquer sur le bouton Modifier le style (vous pouvez aussi faire un clic

droit sur le style à modifier)

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 19


5. Appliquer un style personnalisé (class)

Méthode 1 (approximative)

Dans votre page sélectionner l'élément sur lequel vous souhaitez appliquer un style Aller dans la Fenêtre des

propriétés Dans le menu déroulant "Style" sélectionner le style à appliquer

Pour enlever un style personnalisé sélectionner "Aucun" dans le menu déroulant Style.

Méthode 2 (plus fiable) : utilisation du sélecteur html

Sélectionner via le sélecteur Html la balise sur laquelle vous souhaitez appliquer le style personnalisé (classe)

Effectuer un clic Droit (CTRL + clic sur mac) puis dans le menu Contextuel choisir "Définir Classe"

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 20


CREER SON SITE DE A A Z AVEC DREAMWEAVER MX ( HTML )

1 ) Creer le site

Avant de lancer dreamweaver, creer un dossier ( appellez le comme le nom du site que

vous voulez faire par exemple ) n'importe ou sur votre disque dur. On aura besoin de ce

dossier pour y stocker les pages HTML que vous allez creer.

Lancez maintenant dreamweaver et cliquez sur Site puis sur Nouveau site comme

l'indique

l'image :

Une fenetre apparait, cliquez alors sur l'onglet Elémentaire, cela nous permettra de

configurer facilement notre nouveau site.

Pour le nom du site mettez ce que vous voulez, vous pouvez par exemple l'appeler

comme le nom du dossier que vous venez de creer.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 21


Cliquez ensuite sur suivant.

A la question posée, répondez non, je ne veux pas utiliser de technologie de serveur.

Cliquez alors sur suivant.

Pour la fenêtre suivante faite comme sur l'image suivante :

En répondant à la question Ou voulez vous stocker les fichier sur votre ordinateur en lui

indiquant le dossier creer au debut du tutoriel.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 22


Cliquez alors sur suivant.

Dans la fenêtre suivante mettez aucun comme suit :

Cliquez encore un fois sur suivant, puis il vous résumera les options choisies pour votre

site.

Faites alors terminer.

Pour ce tutoriel on va creer un page d'accueil assez basique.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 23


Pour cela, faites fichier, nouveau. Cette fenêtre s'affiche : Cliquez sur l'onglet général,

puis HTML et creer. Cela va creer un document en HTML ou l'on pourra travailler

dessus.

Important : Pensez quand vous ouvrez un nouveau document à l'enregistrer de

suite. Pour le faire, faite Fichier, Enregistrer sous et nommez le index ( l'index est la

page qui s'ouvre en premier quand vous allez visiter un site ).

Une fois la page enregistrée, mettez le curseur de votre souris au centre de la page et faite un

click droit puis tout en bas choisissez propriétés de la page. Faites comme sur l'image: Mettez

un titre à votre page ( trés important pour être bien référencé, faites le sur toutes vos pages, en

leur donnant des titres différents ) Choisissez un couleur d'arrière plan, et mettez 0 ou c'est

indiquez ( marge gauche, marge haut ,largeur de marge , hauteur de marge ) cela permettra

de ne pas perdre d'espace sur la page.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 24


Faites ensuite OK puis Appliquer.

Etape importante : création de tableau

Le tableau sur une page html, c'est un peu comme les fondations d'une maison. Il permet de

structurer votre page.

Pour creer un tableau, cliquez sur l'icone insérer un tableau comme suit :

Cette boite de dialogur apparait alors : Remplissez la comme sur l'image

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 25


Il apparaitra alors ceci :

Cliquez alors sur le bord bas du tableau comme indiqué sur l'image et dans l'inspecteur des

propriétés

mettez la hauteur à 100%.

Mettre aussi les 3 cases de droite à 0 (zéro) : Ainsi, les bords du tableau seront invisibles dans le

navigateur.

Séléctionner ensuite la cellule en faisant : ctrl+clic gauche (n'importe où dans le tableau)

et éditez alors l'inpecteur de propriétés comme suit : Mettez a Horz : Centrer et à Vert : Milieu

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 26


Vous avait avec ceci un tableu centré dans la page et qui se deforme selon les dimension de celleci.

Maintenant nous allons creer la structure de l'acceuil.

Structure de l'accueil

Pour cela on va imbriquer des tableaux dans le grand tableau tout simplement grâce a la mise en

forme : Cliquez sur l'onglet mise en forme puis sur mise en forme comme indiqué sur l'image.

Une fois entré en mode mise en forme vous pouvez en cliquant sur Dessiner la cellule creer

d'autre tableaux en toute simplicité. Cliquez donc sur dessiner la cellule comme indiqué sur

l'image de dessous puis creer un tableau comme sur cette image. En laissant appuyé sur le bouton

droit de la souris.

Une fois creer, retourner en mode standard ( regardez sur l'image en haut c'est à coté du mode

mise en forme ).

Bravo, vous venez de creer la structure de votre index ;) Quoi cela vous semble un peu vide ? Il n'y

donc plus qu'a la remplir.

Par exemple cliquez ( click droit simple )sur le tableau du milieu que vous venez de creer et

aller dans l'inspecteur de propriétés pour lui donner une couleur spécifique.

Cliquez sur Ar-pl ( a coté de l'écriture ar-pl ) et choisissez un couleur.

Votre page devrait ressembler à ceci.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 27


Faites de même avec les autres tableaux qui sont en haut, en bas, a droite et a gauche de votre

tableau principal ( choisissez une autre couleur ,ce sera mieux vous verrez ).

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 28


Cela devrait vous donnez ceci

( utilisation de noir pour les tableaux à gauche et à droite et un bleu plus foncé pour haut et

bas ).Bien sur vous choisissez les couleurs que vous voulez

cela n'a aucune importance pour la suite.

Rajouter du texte

Tout ce qui vient maintenant sera trés simple puisque cela se rapproche de word que vous avez

surement du utiliser au moins une fois dans votre vie.

Attention : Sur Dreamweaver la touche entrée ne permet pas d'aller à la ligne mais de sauter un

paragraphe, pour sauter une ligne il faut faire touche maj+entrée.

On va creer un message de bienvenue tout simplement :

Cliquez sur le tableau du milieu ( le premier qu'on a créé ) et vous verrez que si vous vous mettez

à pianoter Le texte commencera non pas en haut du tableau mais au milieu. Pour que le texte

commence en haut du tableau il faut aller dan l'éditeur de propriété et mettre Haut à Vert comme

sur l'image :

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 29


Votre écriture commencera alors en haut. Les options pour la couleur ou centrer le texte et autres

se trouve a droite sur l'éditeur de propriétés :

Ecrivez alors un message du type : Bienvenue sur mon site

Pour inserer une image c'est trés simple :

Cliquez sur l'icone insérer une image qui se triuve sur la barre d'insertion :

Choisissez l'imge que vous voulez inserer et le tour et joué ! Elle s'insére la ou avez auparavant

placer votre curseur de souris. Sachez que vous pouvez la positionner comme si il s'agissait d'un

texte.

Inserer un lien hypertexte ( trés simple aussi )

Creer une nouvelle page, ( fichier, nouveau, général, HTML ) et enregistrer la sous le nom que

vous voulez.

On va creer un lien a partir du texte créer précédemment: Bienvenue sur mon site j'usqua cette

page :

Pour cela, sélectionnez le texte en mettant la souris en début de phrase et en laissant le bouton

droit de la souris enfoncé parcourez le texte jusqu'a arriver en fin de phrase. Lacher a présent

votre souris.

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 30


Cliquez sur l'icone en forme de cible en laissant appuyé et indiquez lui la nouvelle page en

relachant la cible sur la page que vous venez de creer.

Vous pouvez visualiser votre travail en appuyant sur la touche F12 du clavier, pour tester par

exemple votre lien hypertexte ;)

Cabinet de formation Le Groupe Bowl -JCMOUTOH Utiliser Dreamweaver 31

More magazines by this user
Similar magazines