création et mise à jour de site Web avec Dreamweaver MX 2004

Transcription

Petit précis sur Dreamweaver MX 2004
par Sebastien Susset-Mirochnikoff
Objectif : création et mise à jour de site Web.
# entrée
Petit précis sur Dreamweaver MX 2004 par Sebastien Susset-Mirochnikoff
Tous les sites Web se composent au départ de pages HTML. À celles-ci sont attachés
des médias (images, animations, vidéo...), des bases de données (MySQL,
Coldfusion..) et d'autres composants de programmation externe à ces dernières (PHP,
ASP, JAVA...).
Il est possible de fabriquer ses pages HTML sur un simple éditeur de texte. Le langage
HTML est un langage extrêmement simple, son apprentissage est aisé. Toutefois, si ce
langage n'est pas difficile à mettre en action, son écriture est fastidieuse. L'une des
réponses à ce défaut est l'utilisation de logiciels de création et de mise à jour de site
Web. Dans le cadre de ce cours : Dreamweaver MX 2004 et/ou Dreamweaver MX.
I Qu'est-ce que le HTML et surtout qu'elle est sa logique ? (un
survol)
Le Langage HTML est simple.
-> Sa logique est basée sur celle des balises déclarantes.
< ceci est une page html > .... </ ceci était une page html >
< ceci est un texte en gras > .... </ ceci était un texte en gras >
< ceci est une image > .... </ ceci était une image >
-> Les documents HTML sont construits sur une même structure en association avec
les mêmes balises :
une "définition générale" <=> <html> <=> ceci est du langage HTML
un "en-tête" <=> <head> et </headl> <=> ceci est (ou était) l'en-tête"
puis le "corps de la page" <=> <body> et </body> <=> ceci est (ou était) le "corps de la
page"
une "définition générale" <=> </html> <=> ceci était du langage HTML
- En-tête ou </head>
L'en-tête d'une page Internet à une fonction de définition de la page. De plus, elle sert
à ajouter des fonctions ou des appels de programmation externe à la page Web. Si ce
n'est à travers ses balises de <title> </title> qui servent à définir le titre de la page Web,
l'en-tête est invisible à l'écran.
- Le corps de la page ou <body>
Le body correspond à ce qui est visible à l'écran et qui sert à l’interactivité directe des
pages Web. Les textes, les images, les vidéos... bref les médias mais aussi les liens y
sont situés. En effet, la révolution du Web est d'avoir intégrée directement les liens ou
hypertextes directement au sein des pages. D'un simple click, nous naviguons de page
en page.
Pour une action hypertexte nous utilisons deux balises qui sont indissociables.
<a href="ici l'adresse ou url auquel nous souhaitons accéder"> le texte ou image
déclenchant le lien </A>
-> Le langage HTML est un langage développé dans un esprit universel et donc basé
sur une dynamique linguistique anglaise. Ainsi les codes sont "bold" et non "gras", mais
c'est pour les caractères accentués que des codes ont été mis en place. Un " é "
devient en code HTML " é " ; un " à " devient pour sa part " & agrave; ".
Pour ceux qui le souhaitent, voici trois sites qui vous permettront de mieux
appréhender la programmation HTML simple.
http://www.allhtml.com/
http://nephi.unice.fr/CoursHTML/
http://web.ccr.jussieu.fr/urfist/html/html.htm
# suite
II Comment fonctionne Dreamweaver MX 2004 ? Quels sont ses
avantages et inconvénients ?
Dreamweaver MX 2004 est un logiciel développé par la société Macromédia dont le but
est la simplification de création et de gestion des sites Web (De nombreux autres
logiciels existent et possèdent des fonctions semblables), ses principaux défauts étant
son coût et une certaine complexité ergonomique du fait de ses possibilités.
- Intégration directe des images, des animations, des vidéos, des textes sans
traduction de caractères accentués...
- Gestion des derniers developpements technologiques.
- Création à la souris des pages Web
- Gestion des sites sans commande de programmation " Unix ", mais par simple
cliqué / déposé.
- Deux modes d'interface : Designer (création que nous utiliserons) et Codeur
(développement).
...
Dreamweaver sous un aspect complexe se révèle être simple d'utilisation si l'utilisateur
n'oublie jamais que ce n'est qu'un logiciel d'aide à la création et non "La Création".
À partir de maintenant nous opérerons le logiciel ouvert.
Ouverture en double click, via explorateur Windows ou via le finder Mac
par convention :
- nous noterons >menu, l'ensemble et sous-ensembles de choix des menus de
Dreamweaver
- => le résultat de ce choix.
- [action] les différents boutons, actions ou menus déroulants présents dans les
interfaces.
ex : >fichier >nouveau
=> ouverture d'un nouveau fichier
[Terminé]
Enfin lorsque nous devrons nommer, nous utiliserons uniquement des caractères non
accentués. Nous ne laisserons jamais de blanc ou d'espace. Notre adressage (le nom)
n’excédera pas 8 caractères. ex: bon nom : monchene.htm _ mauvais nom : mon
chêne.htm)
# suite
III Pratique
Pour faire un site Web, il convient de bien le définir.
L'utilisation de Dreamweaver permet une définition simple et
rapide des sites Web, grâce à ses fonctions de création /
gestion de site, comprises dans le menu >site ou dans
l'interface centrale "Macromedia Dreamweaver MX 2004".
1. Définition du Site
1.1. >Site >Gérer les sites
=> ouverture fenêtre : Gérer les sites
Boutons :
[Nouveau] sert à la création d'un site vierge
[Modifier] sert à la modification d'un site déjà existant
[Dupliquer] sert à faire une copie intégrale d'un site et permet
ainsi de faire des sauvegardes à étapes successives.
[Supprimer] détruit intégralement un site
[Exporter] permet de récupérer les composants du site en les
extrayant de la gestion de Dreamweaver MX 2004.
[Importer] permet de récupérer les composants d'un site, voir
un site complet externe à la gestion de Dreamweaver MX 2004
# suite
1.2. [Nouveau]
=>[Site] ou [Serveur FTP & RDS]
choisir [Site]
# suite
=> Définition du site pour Site sans nom 1
Si besoin cliquer sur [élémentaire]
Dans le champ vide donner un nom à votre site
ex : le_site
[Suivant]
# suite
=> Sélectionner [Non, je ne veux pas utiliser de technologie
de serveur]
Note : Le champ Positif est à cocher si nous utilisons des
interactions à des bases de données.
[Suivant]
# suite
=> a. Sélectionner [Modifier les copies locales sur ma
machine, puis télécharger vers le serveur lorsque je suis
prêt (recommandé)]
L'autre mode correspond :
Note : "Modifier directement sur le serveur à l'aide du réseau
local" sert lorsque le Site est enregistré sur une machine
distincte de la sienne.
b. Cliquer sur l'icône "dossier" correspondant au champ "Où
voulez-vous stocker les fichiers sur votre ordinateur".
[Suivant]
# suite
=> ouverture fenêtre qui vous permet de gérer l'emplacement
de votre site sur votre ordinateur.
=> Après la validation dans le champ "Où voulez-vous stocker
les fichiers sur votre ordinateur" apparaît le chemin
d'emplacement de votre site sur votre ordinateur.
[Sélectionner]
# suite
=> Comment vous connectez-vous à votre serveur distant ?
Choisir [Aucun] dans le menu déroulant.
(Les autres modes correspondant aux différentes possibilités
de connexions à son serveur distant.)
[Suivant]
# suite
=> Fenêtre récapitulative de la "Définition du site"
[Terminé]
=> Fermeture de la fenêtre de "Définition du site"
# suite
1.3. Dans la fenêtre "Gérer les sites" apparaît alors le nom de
votre site
[Terminé]
# suite
=> Fermeture de la fenêtre "Gérer les sites"
=> Apparition dans la fenêtre "Actif" et dans l'onglet
"Fichiers" de votre site à côté d'une icône dossier.
Cette dernière servira à visualiser l'ensemble de votre site à
venir
Votre site est maintenant défini, Dreamweaver MX 2004 est
maintenant apte à vous aider dans votre création.
Remarque : Il est possible aussi de définir un site en passant
par l'interface centrale de "Macromedia Dreamweaver MX
2004" et en cliquant sur [Site Dreamweaver]
# suite
2. Création de page HTML
>Fichier >Nouveau
=> Fenêtre de "Nouveau document" _ Si besoin [Général]
2.1. Dans Catégorie [Page de base]
2.2. Dans Page de base [HTML]
2.3 [Créer]
# suite
=> Création d'une page HTML vierge.
Celle-ci possède de nombreux boutons et champs dont nous
allons commenter :
- [Code] + [Fractionner] + [Création] sont les 3 modes de
présentation de la page HTML au sein de Dreamweaver MX
2004.
[Création] est la forme graphique de construction de
Dreamweaver MX 2004. Son utilisation est la plus simple car
elle ne nécessite pas de connaissance du HTML et c'est cette
forme que nous allons utiliser.
# suite
[Fractionner] permet d'agir indifféremment sur la page en
passant par le code HTML ou la partie graphique.
[Code] + [Fractionner] + [Création]
# suite
[Code] est la forme de développement visualisant le code
HTML
[Code] + [Fractionner] + [Création]
# suite
- Le champ [Titre] correspond au titre qui apparaîtra en haut de
la page Web dans le Navigateur.
Donc nous écrivons un titre à la page. ex : Ma première page
Web.
- [Erreur] permet de trouver les erreurs dans le code HTML.
Son utilisation requiert une connaissance du HTML et ne sera
donc pas utilisée dans notre cours.
- [Gestion des fichiers] permet de gérer les fichiers liés ou
dépendant de la page. Son utilisation requiert une
connaissance du HTML et ne sera donc pas utilisée dans notre
cours.
- [Aperçu] permet de visualiser la page dans le navigateur.
- [Actualisation] permet de recharger la page dans le cas
d'une réécriture complexe.
- [Afficher les options] permet de visualiser des parties ou
fonctions spécifiques. Son utilisation bien que simple, ne vous
servira pas car nos pages seront simples.
# suite
>Fichier >Enregistrer
=> Fenêtre d'enregistrement : Donner un nom EN
CONSERVANT IMPERATIVEMENT EN SUFIXE LE ".htm "
ex : page1.htm lapin.htm exemple.htm ex_01_06.htm
dans le menu déroulant où en principe apparaît [nom de mon
site]
[Enregistrer]
=> Dans la fenêtre "Actifs" "Fichier" apparaît votre page Web
dans le dossier de votre site.
# suite
=> Dans la fenêtre "Actifs" "Fichier" apparaît votre page Web
dans le dossier de votre site.
# suite
3. Suppression de page HTML
Dans la fenêtre Site, sélectionner (un clic avec la souris) la
page à supprimer
=> La page est noire dans cette fenêtre
>Edition >Effacer
ou
directement sur la touche "Suppr" du clavier
ou
dans le menu clic droit de la souris
> Modifier > Supprimer
4. Duplication de pages HTML
Dans la fenêtre Site, sélectionner (un clic avec la souris) la
page à supprimer
=> La page est noire dans cette fenêtre
>Edition >Copier
>Edition >Coller
=> Dans la fenêtre de Site apparaît un fichier "Copie de nom.
htm". Il ne reste plus qu'à modifier son nom.
# suite
5. En mode [Création], une page HTML se comporte un peu
comme une page de maquette (Xpress, Indesign...). Il y a les
éléments textuels, les éléments graphiques et enfin la
maquette ou structure de la page.
5.1. Les éléments textuels simples.
Il est possible de taper directement son texte dans
Dreamweaver MX 2004 ou bien d'importer un texte (ex :
copier / coller depuis Word).Toutefois, ce logiciel n'est pas un
traitement de texte.
- La mis en page ne s'effectue pas depuis des réglettes, le
texte n'est donc pas formaté en largeur mais proportionnel à
largeur de la fenêtre.
- Les sauts de ligne sont de deux types.
Le "Saut de ligne" s'opère grâce à la touche clavier
"ENTER".
Le "Retour à la ligne", lui s'obtient en associant les
touches-claviers "SHIFT" + "ENTER"
# suite
5.2. >Fenêtre >Propriétés
=> Apparition de la fenêtre "Propriétés" située en principe en
bas votre écran.
Note : Cette fenêtre va être récurrente dans l'utilisation de
Dreamweaver MX 2004, car c'est par elle que nous fixons la
plupart des propriétés des éléments dans les pages HTML.
5.2.1. Pour vous rendre compte des modifications de propriété
du texte, vous devez sélectionner le texte que vous venez de
saisir sur votre page HTML. Ensuite vous allez appliquer et
associer les propriétés.
[Format] [Police] [Taille] [Style] [Couleur = petit carré avec
petite flèche vers le bas] [B = graisse] [I = italique] les
quatre types ferrages [Gauche] [Centre] [Droit] [Justifié].
Les autres propriétés seront pour plus tard dans le cours.
Attention : les Propriétés de Ferrage ou d'alignement ne
s'applique qu'à des "Sauts de ligne" et non à des simples
"Retour à la ligne".
Exemple de gestion du texte
# suite
6. Mettre des Liens dans ces pages HTML.
La notion de Liens ou d'Hypertextes est le cœur du Web. Sans
ces derniers, le Web n'aurait pas connu son développement
actuel. L'idée qu'une page Web puisse proposer X liens vers
autant de sites ou de pages distinctes est passionnante. En
pratique la création de liens est aisée, elle ne demande qu'une
rigueur légère dans l'adressage.
Ainsi l'adressage du moteur de recherche google est différent si
l'on indique :
http://www.google.com (World), http://www.google.fr (France)
ou encore http://www.google.de (Allemagne)
De plus il convient de ne pas oublier un "BOUT DE
L'ADRESSE".
Pour le journal Le Monde, l'adresse est http://www.lemonde.fr
et non http://www.lemonde.
Enfin il ne faut jamais oublier de mettre l'adressage complet
donc avec http://www.lesite.com et non le simple www.lesite.
com
En pratique, dans Dreamweaver la création d'un lien est
simple. Il existe trois grandes pratiques du lien:
6.1. Vers une page externe à notre site (ex: vers Le Monde)
Il suffit de sélectionner dans le texte la zone qui va devenir
active et qui fera "pointer" le lien, puis dans >Propriétés >dans
le champ "Lien" saisir le lien complet (dans notre exemple
http://www.lemonde.fr)
Reste simplement à vérifier le lien en testant la page dans un
navigateur Web, en cliquant sur [Aperçu].
Remarque : il est possible de faire apparaître la nouvelle page
dans une nouvelle fenêtre en spécifiant dans >Propriétés
>Cible = _Blank. Les autres choix de "Cible" sont inopérants
pour notre type de page simple.
# suite
6.2. Vers une page interne à notre site
Note : condition première, votre site doit comporter au
minimum deux pages.
active et qui fera "pointer" le lien, puis dans >Propriétés
>cliquer en maintenant appuyer la souris sur la petite cible
située à droite du champ "Lien", puis de déplacer en
maintenant toujours la souris appuyer vers le fichier dans la
fenêtre "Actif >Fichiers" sur lequel le lien pointera (apparition
d'une flèche de visualisation), puis de relâcher la souris. Le lien
sera alors actif, il ne reste simplement qu'à le vérifier en testant
la page dans un navigateur Web, en cliquant sur [Aperçu].
# suite
6.3. Au sein de la même page.
Le code HTML nous offre la possibilité d'effectuer des liens
dans la même page ce qui est pratique dans le cas de "notes
en bas de pages" ou encore de "chapîtrage".
La procédure en 2 phases diffère un peu car il convient de
placer dans notre page un repère, une ancre sur lequel le lien
pourra pointer.
A. Placer l'ancrage dans le texte.
>Insertion >Commun > [Ancre] Cliquez et maintenez appuyer la
souris sur [Ancre] et placez celle-ci là où le lien va pointer, puis
relâchez la souris.
=>Fenêtre "Ancre nommée"
Fixer un nom pour cette ancre puis [OK]
=> Fermeture de la fenêtre "Ancre nommée" et apparition dans
la page d'un logo signifiant le point d'ancrage.
# suite
B. Faire le lien sur le point d'ancrage.
active et qui fera "pointer" le lien, puis dans >Propriétés
>cliquez en maintenant appuyer la souris sur la petite cible
située à droite du champ "Lien", puis de déplacer en
maintenant toujours la souris appuyer vers l'ancre au sein de
votre page Web, puis de relâcher la souris. Le lien sera alors
actif, il ne reste simplement qu'à le vérifier en testant la page
dans un navigateur Web, en cliquant sur [Aperçu].
Remarque : l'icône d'ancrage est invisible dans le Navigateur.
# suite
7. Mise en forme des pages HTML
Depuis le développement du Web, il y a toujours eu deux tendances chez les
programmateurs : "le code" et "le graphisme". Pendant longtemps et toujours
actuellement la tendance "code" est celle qui prend le dessus à travers les bases de
données, les "scripts d'action" ou encore les "ponts dynamiques" vers d'autres
langages de programmations. Les sites se sont donc développés vers plus de gestion
de requêtes, plus de données et surtout plus de commercial. Ainsi en règle générale,
les sites Web sont d'une laideur affligeante dont les incarnations sont les sites "fnac.
com, cdiscount.fr, tf1.fr... La recherche graphique et interactive a été reléguée aux
champs Web minoritaires. Cette relégation a une origine informatique : le temps de
transfert. Avant l'apparition des lignes à haut débit personnelle (ADSL, câble, T1, T2,
T3...), la norme était le RTC et son taux de transfert maximal de 56Kb. Ce taux
impliquait une conception des sites qui tendait vers "le plus léger" possible : petites
images compressées à l'extrême, son comprimé de plus bel, vidéo à la limite de la
lisibilité...
Note : Baud, l'unité, du nom de Baudot, l'inventeur (1845-1903). Le baud est l'unité de
rapidité de modulation, souvent confondu avec le bit par seconde. En général, 1 baud =
1 bps, mais cela dépend de la valeur du signal, "de la longueur d'onde".
8. Vers une "Mise en page Web"
L'idée d'une mise en page Web se différencie de celle du Papier sur un point
fondamental : "la virtualité". A la différence du "Papier", les pages Web ne sont pas
indexées à un physique (le support) mais à un désir créatif. Rien physiquement
n'empêche de définir une page Web de longueur de 1 500 pixels (50 cm) et de largeur
de 30 000 pixels (1058 cm), si ce n'est que l'habitude de lecture, héritage du livre, qui
fait que nous n'aimons pas avoir à l'écran un simple fragment de la page mais une
totalité et nous préférons une lecture vers le bas que vers la droite. La création Web
doit et surtout devra donc passer par la séparation avec le "Papier" et l'intégration du
Web à nos "Habitus".
Alors que dans le "Papier" les années 1990-2000 furent celles de l'explosion du
graphisme, de la remise en cause de la maquette, grâce au développement de
l'infographie grand public et à l'utilisation des 3 logiciels de référence : Photoshop,
Illustrator et Xpress; elles furent pour le Web celles de son émergence et du
développement de sa technologie. Paradoxalement si le Web a reçu immédiatement
un écho favorable, c'est principalement pour son caractère graphique (la création
repose sur une conception parallèle à celle du "Papier"), une idée de graphisme et
donc d'une "mise en page".
D'un point de vue pratique, la mise en page Web repose sur deux grands concepts
distincts mais compatibles : les tableaux et les calques. Ils reposent sur l'idée de la
fragmentarité du contenue de la page Web. Cette dernière est une somme de visibles
dissociés, gérable séparément, associant les éléments textuels, la programmation et
les médias. Leur dissociation réside dans le processus pour y parvenir :
Note : Pierre Bourdieu : L'habitus est un système de disposition à agir, percevoir, sentir
et penser d'une certaine façon, intériorisés et incorporés par les individus au cours de
leur histoire. Cet habitus se manifeste par le "sens pratique", c'est-à-dire l'aptitude à se
mouvoir, à agir et à s'orienter selon la position occupée dans l'espace social et selon la
logique propre au champ et à la situation dans lesquels on est impliqués. Tout cela se
fait sans recours à la réflexion consciente, grâce aux dispositions acquises
fonctionnant comme des automatismes.
- Pour les tableaux, le principe est celui du puzzle qui accole des éléments en
dépendance les uns aux autres afin d'obtenir une unicité de page Web.
- Pour les calques (terminologie exacte : layer), nous sommes plus proche du concept
d'Xpress, il s'agit de disposer des "Blocs <=> calque", définis indépendamment pour
obtenir une page unique.
# suite
9. Les Tableaux
Les tableaux reposent sur une structure en grille qui comporte des
lignes horizontales et verticales. Ces structures délimitent l'espace en
"Cellule" qui formeront la zone d'inscription des tableaux.
>Insertion > Mise en forme [Tableau]
=> Fenêtre Tableau composée de trois grandes parties.
8.3. Accessibilité
[Légende] = légende le tableau. Cette fonction ancienne est peu utilisée.
8.4. [OK]
9.1. Taille du tableau
[Lignes] = le nombre de lignes horizontales que le tableau possédera.
(minimum = 1).
[Colonnes] = le nombre de colonnes (verticales) que le tableau
possédera (minimum = 1)
[Largeur du tableau] = largeur totale du tableau pouvant être fixe
(expression en pixels) ou bien proportionnelle à la fenêtre du navigateur
(expression en %)
[Largeur de la bordure] = épaisseur du filet délimitant le tableau à
l'extérieur mais aussi à l'intérieur. Si la largeur de la bordure = 0, alors le
tableau est invisible, seuls les éléments contenus dans les cellules du
tableau sont visibles.
[Marge intérieure des cellules] = marge exprimée en pixels repoussant
des quatre côtés (Gauche, Droit, Haut, Bas) les éléments internes d'une
cellule. Si Marge = 0, alors les éléments internes de la cellule sont collés
aux bords (à la structure) de la cellule.
ex : Marge = 5 alors chaque cellule possédera une zone de 5 pixels
"vides" sur ses 4 bords.
[Espacement entre les cellules] = repousse les cellules les unes des
autres, cette fonction crée du "vide". Il s'exprime en pixel, et si
l'espacement=0, alors les cellules se touchent.
ex : Espacement = 5 alors chaque cellule sera à 5 pixels des autres.
9.2. En-tête
Cette fonction permet de fabriquer un "Pseudo sens" de lecture du
tableau en renforçant la graisse de la police des textes présents dans les
cellules sélectionnées pour être d'En-tête.
Nous choisirons donc [Aucune].
# suite
=> Fermeture fenêtre Tableau et apparition sur la page Web du
tableau que vous venez de définir.
Ce dernier apparaît sur la fenêtre avec des petits "Points" ou
"Poignées" de modification de taille du tableau. Si les
"Poignées" sont invisibles, cliquer une fois sur le tableau, elles
apparaîtront et rendront visibles les structures du tableau..
# suite
9.5. Propriétés du tableau
>Fenêtre >Propriétés, vous trouvez les paramètres du tableau que vous avez pour
certains préalablement définis mais qu'il est possible de modifier de nouveau.
[ID de tableau] fonction d'identification des tableaux en vue d'une gestion par base de
données.
[Lignes] = le nombre de lignes horizontales que le tableau possédera. (minimum = 1).
[Cols] = le nombre de colonnes (verticales) que le tableau possédera (minimum = 1)
[L] = largeur totale du tableau pouvant être fixe (expression en pixels) ou bien
proportionnelle à la fenêtre du navigateur (expression en %)
[H] =hauteur totale du tableau pouvant être fixe (expression en pixels) ou bien
proportionnelle à la fenêtre du navigateur (expression en %)
[Remplissage] = "Marge intérieure des cellules" exprimée en pixels repoussant des
quatre côtés (Gauche, Droit, Haut, Bas) les éléments internes d'une cellule.
[Espac. de cellule] = "Espacement entre les cellules" qui repousse les cellules les
unes des autres, cette fonction crée du "vide".
[Aligner] = Permet d'aligner le tableau sur la page Web
>Par défaut = pas d'alignement spécifique du tableau, celui-ci suivra l'alignement
général.
>Gauche = aligne le tableau à gauche
>Centre = aligne le tableau au centre
>Droit = aligne le tableau à droit.
[Bordure] = "Largeur de la bordure", épaisseur du filet délimitant le tableau à l'extérieur
mais aussi à l'intérieur.
[Aligner] = Permet d'aligner le tableau sur la page Web
>Par défaut = pas d'alignement spécifique du tableau, celui-ci suivra l'alignement
général.
>Gauche = aligne le tableau à gauche
>Centre = aligne le tableau au centre
>Droit = aligne le tableau à droit. = permet d'appliquer de style de polices
prédéterminées.
->Six petits icônes en bas à gauche de la fenêtre de propriétés présentés sur 2 lignes
et 3 colonnes.
colonnes 1 concerne la largeur du tableau
[largeur 1] = annule la dimension de largeur, le tableau se contracte en largeur
automatiquement sur lui-même afin d'être le plus petit possible.
[largeur 2] = exprime et fixe la largeur du tableau en pixels
[largeur 3] = exprime et fixe la largeur du tableau en %
colonnes 2 concerne la hauteur du tableau
[hauteur 1] = annule la dimension de hauteur, le tableau se contracte en hauteur
automatiquement sur lui-même afin d'être le plus petit possible.
[hauteur 2] = exprime et fixe la hauteur du tableau en pixels
[hauteur 3] = exprime et fixe la hauteur du tableau en %
[Couleur d'ar-pl.] = permet de définir une couleur de fond pour le tableau
[Couleur contour] = permet de définir une couleur des bords ou des contours du
tableau.
[Image ar-pl] = permet de placer sur le fond du tableau, une image..
# suite
9.6. Propriétés des cellules du tableau
En cliquant dans les différentes cellules, vous faites apparaître le curseur qui vous
permet d'y saisir du texte (ou de placer un élément Média). Le texte de cette cellule se
comportera ensuite comme un texte indépendant des autres présents dans les cellules
ou la page Web.
Vous retrouvez dans >Propriétés les fonctions de textes classiques (voir 5.2. >Fenêtre
>Propriétés), mais aussi celles propres aux tableaux.
[Cellule] = nous aborderons juste après ces fonctions.
[Horz] = permet d'aligner horizontalement les éléments de la cellule [Par défaut],
[Gauche] [Centre] [Droit]
[Vert] = permet d'aligner verticalement les éléments de la cellule [Par défaut], [Haut]
[Milieu] [Bas] [Ligne de base (fonction inutile à notre niveau)]
[L] = largeur de la cellule
[H] =hauteur de la cellule
[Pas de retour à la ligne auto] = Donnera la préférence au texte pour le retour à la
ligne et non à la largeur de la cellule.
[En-Tête] (voir 7.1.2. En-tête) Son utilisation requiert une connaissance du HTML et ne
sera donc pas utilisée dans notre cours.
[Ar-pl] (supérieur) = permet de placer sur le fond d'une cellule une image. Son
utilisation est problématique, car non uniformisé par les navigateurs et requiert une
connaissance du HTML donc ne sera pas utilisée dans notre cours.
[Ar-pl] (inférieur) = permet de définir une couleur de fond pour la cellule
[Brdre] = permet de définir une couleur des bords ou des contours de la cellule.
[Propriétés de la page...] Son utilisation requiert une connaissance du HTML et ne
sera donc pas utilisée dans notre cours.
# suite
9.7. Définition d'un tableau à cellules complexes.
Il est possible de définir un tableau dont la structure n'est pas
simple, mais répond à des exigences particulières : un tableau
de 3 lignes et de 3 colonnes qui, sur la première ligne comporte
non pas 3 mais simplement 2 cellules, l'une de ces cellules
étant la fusion de deux cellules préexistantes. De mêmes il est
possible qu'une cellule s'étende sur deux lignes et non une
seule.
Pratiquement pour effectuer ce type de fusion, il suffit de
cliquer dans une cellule puis en maintenant appuyer [Shift] de
cliquer dans la cellule à fusionner
=> les bords des cellules sont alors noirs.
>Propriétés >Cellules
[Combiner la sélection rectangulaire des cellules] => la
fusion est effectuée.
# suite
Il est possible de diviser la nouvelle cellule en cliquant sur
[Diviser la cellule en lignes ou en colonnes]
=>Fenêtre Fractionner la cellule
Fractionnez la [Lignes] ou la [Colonnes] en [Nombre de
colonnes ou de ligne]
[OK] => Fermeture Fractionner la cellule, la cellule du tableau
a été fractionnée.
9.8. Trucs et Astuces dans la mise en page Web avec des
tableaux.
La mise en page Web avec des tableaux est relativement aisée
même si toutefois elle réclame une légère conceptualisation
des pages.
Pour vous aider, n'hésitez pas à faire des maquettes.
Fractionnez vos tableaux en plusieurs plus simple. Enfin, il est
possible de placer un tableau dans une cellule d'un autre
tableau.
# suite
10. Les Calques
La mise en page Web avec l'utilisation des calques se
rapproche beaucoup de celle du "Papier" avec Xpress.
Il s'agit de positionner des blocks les uns à côtés des autres et
d'obtenir ainsi une mise en page. Cette technique est rendue
avec Dreamweaver MX 2004.
10.1. Création d'un calque
>Insertion > Mise en forme - [Dessiner un calque] (3e
bouton)
=> Le curseur devient sur la page une croix. Dans la page,
cliquez pour démarrer un tracé rectangulaire, puis, sans
relâcher le bouton de la souris, glisser sur la page afin de
fabriquer un blocks : un calque. Enfin relâcher
# suite
=> Le calque est créé sur la page. Il y a une zone dans
laquelle, il est possible de saisir ou de placer des éléments
comme au sein d'une cellule ou d'une page HTML vierge. Cette
zone est encadrée d'une bordure surmontée en haut à gauche
d'un petit icône symbole du calque.
En cliquant sur l'icône de calque, des "Poignées" apparaissent
et permettent de modifier la taille du calque.
# suite
10.2. Propriétés d'un calque
>Fenêtres >Propriétés
[ID de calque] = Nom du calque, par défaut laisser
Dreamweaver MX 2004 le gérer pour vous.
[G] = Défini le placement du calque sur la page. Attention,
définition à partir de la gauche de la page Web et la position du
coin supérieur gauche du calque. Cette taille est exprimée en
pixels.
[S] = Défini le placement du calque sur la page. Attention
définition à partir du haut (ou Sommet) de la page Web et la
position du coin supérieur gauche du calque. Cette taille est
exprimée en pixels.
[L] = défini la largeur du calque exprimé en pixels.
ex : L = 250 => largeur est de 250 pixels
[H] = défini la hauteur du calque exprimée en pixels.
Remarque : La hauteur et la largeur d'un calque peuvent être
rognées par certains navigateurs dans le cas où ceci
comporterait un texte inférieur à la taille demandée pour le
calque.
[Index Z] = Ordre de superposition des calques. Lorsque des
calques se superposent dans une page Web, L'Index Z est là
pour ordonner la prévalence des calques. Le classement
débute à 1 et la prévalence se fait dans un ordre croissant.
[Visib] = fonction liée à des scripts qui permet de faire
apparaître / disparaître, liée à des animations...
[Image ar-pl] : comme pour les tableaux, permet de placer en
fond du calque une image.
[Couleur ar-pl] : comme pour les tableaux, permet de définir
une couleur de fond du calque.
[Classe] + [Débord] + [Déc] sont des fonctions complexes,
leurs utilisations requièrent une connaissance du HTML
10.3. Trucs et Astuces dans la mise en page Web avec des
calques.
Même si l'utilisation des calques semble plus instinctive que
celle des tableaux, il y a deux erreurs a ne pas faire :
- Donner le même nom à deux calques différents.
- Jouer la superposition des calques en trop grand nombre. Les
navigateurs refusent leur gestion après un nombre variable.
# suite
11. Préparation des images à leurs utilisations dans une page Web.
Pendant longtemps, le principal obstacle des pages Web a été les temps de
transmissions des données via les différents réseaux. Plus un réseau est rapide, moins
la transmission des images est courte. Cependant même si les réseaux se sont
accélérés, ils demeurent majoritairement trop lents. Cette lenteur associée à l'obligation
de lisibilité maximale oblige les concepteurs de sites Web a utilisé des modes de
compressions d'images précises. Ces modes de compressions sont de deux grands
types : compression par synthèse chromatique, compression par structure
mathématique.
11.1. [compression par synthèse chromatique]
Le principe de ces compressions est de réduire le nombre de couleurs présentes sur
l'image. Moins une image comporte de couleur, plus elle est légère et donc rapide à
transmettre. Toutefois le pendant à cette restriction chromatique est la détérioration de
l'image, puisque l'image se compose alors au maximum de 256 couleurs.
La principale compression de ce type est la compression GIF (Graphics Interchange
Format - extension des fichiers .gif)
11.2. [compression par structure mathématique]
Le principe de ces compressions est de fragmenter l'image, la sectionner en X zones et
d'extrapoler à chacune de ces zones une structure "en dégradé" de l'image. Le
dégradé éliminant les éléments indépendants au sein de cette surface.
ex : pour une surface où le dégradé est du rouge au jaune, les points verts ou bleus
sera exclus.
Cette méthode de compression induit une détérioration de l'image. Cependant cette
détérioration est proportionnelle au degré de compression. Plus une image est
comprimée, plus l'image est détériorée.
La principale compression de ce type est la compression JPEG (Joint Photographic
Experts Group - extension des fichiers .jpg ou .jpeg). Elle est à la base de toutes les
compressions du type peg ou pg ex : mpeg, mpeg2; divX...
Une autre compression par structure mathématique est le format PNG (Portable
Network Graphics - extension des fichiers .png). Ce format est ultra-minoritaire, car
même s'il ne produit que peu ou pas de détérioration, l'image reste encore très lourde
et donc lente.
Pour en savoir plus : http://www.lookimage.com/formats/
http://www.w3.org/Graphics/PNG/
http://www.libpng.org/pub/png/
11.3. Comment comprimer et mettre en conformité les images pour le Web ?
La compression et la mise en conformité des images pour le Web peut-être effectué
par de nombreux logiciels. Toutefois, le principal logiciel est Photoshop dont les
créateurs ont intégré un module de compression Web.
11.3.1. Compression dans Photoshop.
Une image est définie par plusieurs facteurs : sa taille, sa définition (pour le Web 72
dpi), son Mode. Ces différents paramètres n'interviennent pas directement dans la
compression. Vous possédez une image dont vous pensez qu'elle est aboutie et ne
nécessite plus de modification.
11.3.1.1. GIF
>Fichier >Enregristrer pour le Web
=> Fenêtre "enregistrer pour le Web"
Cliquer sur onglet [Optimisée] : vous aurez ainsi une image tendant au maximum à
celle visible sur votre navigateur Web. Ne toucher pas aux boutons de gauche.
-Paramètres [GIF]
Utiliser les différents paramètres [Perception] + [Couleurs] (jouer ici afin de percevoir
la restriction des couleurs) + [Diffusion] + [tramage = 100%] + [Transparence]
[Enregistrer]
=> Interface d'enregistrement.
Enreg sous : name.gif
Format : [image] + [paramètres par défaut] + [toutes les tranches]
ENREGISTRER DANS VOTRE DOSSIER DE SITE.
=> La fenêtre d'enregistrement pour le Web disparaît, retour dans l'interface classique
Photoshop.
11.3.1.2. JPG
>Fichier >Enregristrer pour le Web
=> Fenêtre "enregistrer pour le Web"
Cliquer sur onglet [Optimisée] : vous aurez ainsi une image tendant au maximum à
celle visible sur votre navigateur Web. Ne toucher pas aux boutons de gauche.
-Paramètres [JPEG]
sélectionner Optimisé + jouer sur le curseur de [Qualité]. Plus la qualité est haute, plus
le poids de l'image est lourd.
[Enregistrer]
=> Interface d'enregistrement.
Enreg sous : name.jpg
Format : [image] + [paramètres par défaut] + [toutes les tranches]
ENREGISTRER DANS VOTRE DOSSIER DE SITE.
=> La fenêtre d'enregistrement pour le Web disparaît, retour dans l'interface classique
Photoshop.
# suite
11.4. Comment gérer les images dans Dreamweaver MX
2004.
En principe les images que vous avez préparées se trouvent
dans votre fenêtre Site, dans le cas contraire, Dreamweaver
MX 2004 vous propose une solution alternative.
Avec une page htm ouverte,
Dans le cas où votre image se situerait dans votre dossier Site.
Il suffit de sélectionner celle-ci dans votre fenêtre site puis de
faire un glisser / déposer sur la page Web.
ou
# suite
Dans la palette objets >fenêtre >Objets sélectionner >Commun
puis [Images : image]
=>Dans le menu déroulant sélectionner [Image]
=> interface "Sélectionner la source de l'image". Dans
l'explorateur, aller sélectionner l'image
[Relatif] choisir document - puis [Choisir]
Si l'image ne se trouve pas dans votre dossier Site,
-Voulez-vous y copier le fichier maintenant ?
[Oui]
=> Fermeture message + ouverture Fenêtre "Copier fichier
sous"
renommer si besoin sans oublier le suffixe .jpg ou .gif
[Enregistrer]
=>Fermeture de la fenêtre et apparition sur la page Web de
l'image.
# suite
En cliquant sur l'image, des poignées apparaissent. Comme
pour les tableaux et les calques, il vous est possible de retailler
l'image
Note : en appuyant sur Maj., il n'y a pas de déformation de
l'image dans les opérations de modification de l'image.
Généralement, l'image ayant été préparée dans Photoshop,
vous utiliserez les images à telle.
# suite
>Fenêtre >Propriétés
[Image] = permet de donner un nom à cette image, cette fonction est principalement
utilisée avec les bases de données.
[L] Largeur exprimée en pixels
[H] Hauteur exprimée en pixels
Remarque : Si la taille de l'image a été modifiée, un logo (flèche circulaire) apparaît à
côté des informations de taille. En cliquant dessus, l'image est initialisée à sa taille de
création.
[Src] relation au sein de la hiérarchie du site entre la page et l'image.
Il est possible de changer l'image en utilisant la cible situé à droite du champ de texte
et en visant un autre fichier image dans la palette >Fenêtre >Actifs >Fichiers
[Lien] permet de faire un lien d'action depuis l'image. Celui-ci s'effectue exactement
comme pour un lien au sein du texte (voir 6. Mettre des Liens dans ces pages HTML.)
[Sec.] permet de faire une description succincte de l'image. Cette fonction est surtout
utilisée par les navigateurs ne gérant pas les images (ex : non-voyant)
[Accentuer] permet de modifier la netteté des contours des objets présents dans
l'image.
[Classe] permet de lier les images à des feuilles de styles. Son utilisation requiert une
connaissance du HTML et ne sera donc pas utilisée dans notre cours.
[Carte] permet de fabriquer des zones actives au sein d'une image.
[Espace V] fabrique une marge verticale invisible au-dessus et en dessous de l'image
[Espace H] fabrique une marge horizontale invisible à gauche et à droite de l'image
[Cible] si lien il est possible de cibler celui-ci. Ouverture d'une nouvelle fenêtre avec
_Blank
[Src faible] fonction qui n'est plus utilisée qui permît de pré afficher une image lors du
chargement de l'image par le navigateur.
[Bordure] fabrique une bordure à l'image (en édition : un filet).
Les 3 icônes d'alignements sont identiques en fonction à ceux du texte.
[Aligner] l'image au sein de la page.
Remarque : les seules fonctions réellement utiles sont "Gauche" et "Droite".
Modifier :
[Edition] ouvre l'image dans le logiciel compresseur.
[Optimiser pour Fireworks] ouvre l'image dans le logiciel Fireworks (propriété de
Macromedia) afin de la recompresser.
[Recadrer] fonction utile qui permet de recadrer directement l'image dans le navigateur
via des petites poignées puis validation par "retour chariot".
[Rééchantillonner] permet une fois que vous avez modifier la taille de votre image de
la fixer dans sa nouvelle taille.
[Luminosité et Contraste] permet de modifier la luminosité et le contraste directement
dans Dreamweaver MX 2004.
11. Trucs et Astuces avec les images dans la mise en page Web et Conclusion de
la partie consacrée à la création des Sites Web.
Les images ont une importance capitale dans la mise en page Web. Elles peuvent être
seules, intégrées à un tableau ou à un calque. De leur gestion dépend énormément un
site Web. Avec le texte et sa faiblesse de mise en page principalement au niveau des
polices, elles peuvent sauver un site Web. Revers de la médaille, elles sont lourdes et
donc nécessitent une utilisation parcimonieuse. Ils ne vous restent plus qu'à
expérimenter Dreamweaver MX 2004.
# suite
# suite
# suite
# suite
# suite
# suite
# suite
# suite
Couverture
I Qu'est-ce que le HTML et surtout qu'elle est sa logique ? (un survol)
II Comment fonctionne Dreamweaver MX 2004 ? Quels sont ses avantages et
inconvénients ?
III Pratique
1. Définition du Site
1.1. >Site >Gérer les sites
1.2. [Nouveau]
1.3. Dans la fenêtre "Gérer les sites" apparaît alors le nom de votre site
2. Création de page HTML
2.1. Dans Catégorie [Page de base]
2.2. Dans Page de base [HTML]
2.3 [Créer]
7. Mise en forme des pages HTML
8. Vers une "Mise en page Web"
9. Les Tableaux
9.1. Taille du tableau
9.2. En-tête
9.3. Accessibilité
9.4. [OK]
9.5. Propriétés du tableau
9.6. Propriétés des cellules du tableau
9.7. Définition d'un tableau à cellules complexes.
9.8. Trucs et Astuces dans la mise en page Web avec des tableaux.
10. Les Calques
10.1. Création d'un calque
10.2. Propriétés d'un calque
10.3. Trucs et Astuces dans la mise en page Web avec des calques.
3. Suppression de page HTML
4. Duplication de pages HTML
5. En mode [Création], une page HTML se comporte un peu comme une page de
maquette (Xpress, Indesign...). Il y a les éléments textuels, les éléments graphiques et
enfin la maquette ou structure de la page.
5.1. Les éléments textuels simples.
5.2. >Fenêtre >Propriétés
6. Mettre des Liens dans ces pages HTML.
6.1. Vers une page externe à notre site (ex: vers Le Monde)
6.2. Vers une page interne à notre site
6.3. Au sein de la même page.
11. Préparation des images à leurs utilisations dans une page Web.
11.1. [compression par synthèse chromatique]
11.2. [compression par structure mathématique]
11.3. Comment comprimer et mettre en conformité les images pour le Web ?
11.3.1. Compression dans Photoshop.
11.3.1.1. GIF
11.3.1.2. JPG
11.4. Comment gérer les images dans Dreamweaver MX 2004.
11. Trucs et Astuces avec les images dans la mise en page Web et Conclusion de la
partie consacrée à la création des Sites Web.
Supplément :
Et le texte, alors !
Et le texte, alors ! Propriétés de la page.

création et mise à jour de site Web avec Dreamweaver MX 2004

Transcription

Documents pareils

Programme Formation Dreamweaver Perfectionnement

DREAMWEAVER Perfectionnement

Programme de formation DreamWeaver perfectionnement

DreamWeaver Dynamiser un site

Dreamweaver Perfectionnement

Formation Web Adobe DREAMWEAVER PERFECTIONNEMENT

gabarits Web.indd

Dreamweaver CC, Perfectionnement

PEM DEAMWEAVER-HCD63-SR

Formation Dreamweaver