| |
|
|
|
|
|
Créer un site web
Les Cadres sont les fenêtres dans une page Web.
Une division verticale ou horizontale en deux espaces Rectangulaires que l'on peut redimensionner, et qui possèdent leurs propres ascenseurs, pour y faire défiler ou non un texte
Par exemple notre MINISITE présente (cf image)
*un
Menu à Gauche de l'écran qui reste affiché en permanence
et qui nous permet de naviguer n'importe où,
* quelle que soit la page affichée à droite.
Droite et Gauche forme les 2 CADRES de notre JEU.
Présentation pratique de l'encadrement des pages WEB
===========
Menu || Page
===========
Nous n'insisterons
pas sur la syntaxe HTML de programmation des cadres qui fait appel aux balises
:
* <Frameset> (Jeu de cadres) * et <Frame> (Cadre) car elle est relativement
complexe, pour ne traiter que la simplissime réalisation visuelle d'un
encadrement sous DreamWeaver 2
(Pour les intéressé(e)s de scripts, ll suffit de cliquer sur le bouton HTML de la barre de statuts (voir leçons précédentes)
Avec sa version 2, il existe 2 méthodes dont, pour plus de détails l'aide intégrée décrit de façon tout a fait transparente la seconde méthode
==>> Faire AIDE/INTRO/VISITE GUIDEE <<=
(La version 4 a créée une Palette spéciale supplémentaire pour jouer avec les cadres)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Le but de chaque manip' comprend 3 étapes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<//>> 1. Créer un Jeu de Cadres <//>> 2. Nommer ces Cadres <//>> 3. Et enfin Lier les Cadres nommés
1. Comment créer 2 cadres juxtaposés verticalement ?
=======================================
1a. Méthode Simple
=======================================
A partir d'une NOUVELLE PAGE
Cliquez sur le MENU "MODIFIER" => Puis "Jeu de Cadres" ===> Puis "Fractionner le Cadre à Gauche" Et hop!
Une Barre verticale apparaît immédiatement au milieu de la page blanche
+------------||--------------+
« _^
Nous la déplaçons un peu vers la Gauche avec la souris pour faire un petit et un grand côté, ainsi:
+----||----------------------+
^
NB: Nous obtiendrions exactement le même effet en choisissant "Fractionner le Cadre à Droite" car cette commande n'a d'intérêt qui s'il existait déjà des cadres que nous voulons encore subdiviser.
=======================================
1b. Méthode Simplissime (c'est elle qui est décrite dans l'aide)
=======================================
Il faut d'abord cliquer dans le MENU AFFICHAGE => Et Cocher l'option "Bordure de Cadre"
La page sans cadre s'encadre immédiatement
|-----------------| (sans bordures)
||----------------|| (avec bordures)
===> Puis tout en maintenant fermement la touche ALT appuyée Déplacer les Bordures selon l'effet désiré, C'est tout
||----------------||
^_ + <ALT>
-------||---------||
....._^
=======================================
2. Argumenter les propriétés des cadres
=======================================
Pour accéder aux propriétés des cadres il faut afficher *** la palette *** qui leur correspond
MENU <FENETRE> => CADRES ou CTRL+F10
Une petite Miniature de notre page apparaît représentant les 2 Cadres créés
A ][ B
Cliquons a Gauche pour afficher le propriétés du cadre gauche, et a droite pour le Droit. Le <Panneau> "Cadre" ad-hoc s'affiche toujours en bas de l'écran
+Cadre------------------------------------
|
(au besoin faire FENETRE Propriétés, si ce panneau était masqué)
--------------------------------------------
2a. NOMMER LES CADRES
--------------------------------------------
Pourquoi les Nommer ? Une seule bonne raison, pourquoi donne t on un nom à un homme?
Dans la zone de saisie tout a gauche située en dessous du mot "Cadre" Entrons un nom pour le CADRE Pour le cadre de gauche nous tapons "menu" et celui de droite "page"
Cadre-------------------------------------+ [menu....] |
|
Nous voyons immédiatement apparaître le Nom "Menu" et "Page" dans la Miniature
Menu ][ Page
--------------------------------------------
2b. Charger une Page Web dans chaque Cadre
--------------------------------------------
Dreamweaver nous permet de créer des pages en écrivant directement dans les cadres. Cependant comme nous avons déjà préparé nos pages dans les leçons précédentes, Nous allons simplement les intégrer maintenant dans notre tout nouveau jeu de cadres
D'abord il faut Ouvrir la Carte de Notre MINISITE
FICHIER => Ouvrir Site ===> Nous choisissons "MINISITE" dans la liste
RenommonsFichier index.php =>Pointer index.php ===> Clic Droit =====> Renommer ========> Appelons le désormais "menu.htm"
On remarque que DeamWeaver nous propose d'emblée de mettre à jour ce nouveau nom dans tous les fichiers du site. Répondons [OK]
C'est l'intérêt de réaliser chaque manipulation à partir du Centre de gestion du Site, qui maintient en permanence la cyber-cohésion des pages.
Ouvrons maintenant notre FRAMESET => FENETRE ==> Cadres
Sans oublier => FENETRE ==> Propriétés (si celle ci est masquée)
Argumentons le champ SRC (source) en cliquant sur le petit dossier "parcourir". Et en sélectionnant le fichier "menu.htm" pour le Cadre MENU
+Cadre------------------------------------ [menu....] Src. [menu.htm....] ¤
Et de la même façon page1.htm pour le cadre Droit
+Cadre------------------------------------ [page....] Src. [page1.htm....] ¤
=======================================
2c. NOUS POUVONS MAINTENANT SAUVEGARDER NOTRE JEU DE CADRE
=======================================
=> FICHIER ==> Enregistrer le Jeu de Cadres
A la place de "UntitledFrame.htm" nous écrivons maintenant "index.php" Car c'est lui que l'on va désormais charger à l'ouverture de notre MINISITE
RAPPEL UTILE
Notre Jeu de cadre est donc constitué de 3 pages HTML
@1. La première index.phpl est la page que l'on appelle par internet et qui ne contient que la présentation des 2 autres (C'est le FRAMESET proprement dit)
@.2 La Seconde menu.html est la page qui s'affichera dans le cadre de gauche
@3. Et la troisième est variable, page1, puis page2, puis page3.html s'affichera dans le cadre de droite selon notre choix au menu.
=======================================
3. Comment afficher une page dans le cadre cible
=======================================
Si nous chargeons notre FRAMESET en lançant le fichier index.php, nous constatons que les 2 pages se chargent parfaitement bien, Mais que malheureusement quand nous cliquons sur les liens du menu, les pages s'affichent du mauvais côté, (à gauche) et effaçant notre menu de la façon la plus disgracieuse, rendant la lecture impossible par défaut de place...
Dans l'exemple cité dans le lien à la fin j'ai rajouté volontairement une erreur par défaut de cible pour en visualiser l'effet désastreux (Il faudra cliquer sur "PAGE PRECEDENTE" dans le navigateur pour retrouver le menu
Pour corriger ce petit bug, il nous suffira de reprendre les 3 liens, l'un après l'autre en corrigeant leur propriété "CIBLE", dans leur panneau respectif
+----------------------------------------------------
Format [__________] Taille Lien [page1.htm__] ***CIBLE***[ page
+----------------------------------------------------
Format [__________] Taille Lien [page2.htm__] ***CIBLE***[ page
+----------------------------------------------------
Format [__________] Taille Lien [page3.htm__] ***CIBLE***[ page
Il n'est pas besoin de se casser la tête pour l'écriture de la cible, DreamWeaver, proposant automatiquement la liste des NOMS DE CADRES disponibles dans son jeu.
Voila ce que ça doit donner en vrai