CONSTRUIRE LES PAGES et Y NAVIGUER - Freeagalia.free.fr/acappella/wa_files/PAGES.pdf · Créez votre maquette comme n'importe quelle page. Elle peut par exemple se composer d’images,

Dossier : Construire les pages et y naviguer 1 maj 05/10

CONSTRUIRE LES PAGES et Y NAVIGUER

Dossier par Clochar

SOMMAIRE 1 . Organisation des pages ...................... 1 2 . Affichage de la page ............................ 2 3 . Ajouter une Page ................................. 2 4 . Arrière plan et taille de la page .......... 3 5 . Protection de la page .......................... 3 6 . Paramétr ages avancés de la page ...... 4 7 . Maquettes ............................................ 5 8 . Pieds de page ...................................... 6 9 . Editeur de thème visuel ...................... 7 10 . Bibliothèques d'images et de fichiers 10 . Lien hypertexte ................................. 9 11 . Ancre HTML ....................................... 11 12 . Frame ................................................. 13 13 . Bouton ............................................... 14 14 . Menu dynamique ............................... 17


1. - ORGANISATION DES PAGES Lorsque vous créez un site contenant de nombreuses pages, il n’est pas forcément évident de s’y retrouver. L'explorateur de page facilite l'org anisation et la gestion de vos pages.

Dossiers : Web Acappella vous permet d’organiser vos pages dans des dossiers. Vous pouvez ainsi regrouper plusieurs pages dans un même dossier afin de les classer par thème et d’y accéder rapidement. Par exemple: Dossier « Pages photos », Dossier « Pages produits », Dossier « Pages achat »... Cliquez simplement sur l'icône ……… pour accéder au menu. Cliquez ensuite sur "Créer un nouveau dossier". Ensuite, faites glisser simplement les pages dans le dossier. Renommer : Vous pouvez renommer vos pages et vos dossiers. Les noms donnés dans l'explorateur n'ont aucune influence sur le nom de vos pages en ligne. Pour renommer une page ou un dossier: -Sélectionnez une page ou un dossier. Effectuez un simple clic dessus ou ouvrez le menu et cliquez sur "Renommer". Attribuez un nom de votre choix. Changer la page d'accueil: La page affichée par défaut lors de l'ouverture du site est la page d'accueil de votre site. Cependant, vous pouvez choisir une autre page qui sera mise en page d'accueil. Pour cela, sélectionnez la page désirée et cliquez sur le menu ……. . Cliquez ensuite sur "Définir comme page d'accueil du site Web". La page sélectionnée sera alors automatiquement placée en page d'accueil. 2. - AFFICHAGE DE LA PAGE Web Acappella vous donne la possibilité de travaill er en plein écran (menu « Affichage » « Mettre la fenêtre en plein écran ») afin de profite r au maximum de la taille de votre écran d’ordinateur. De plus, si vous voulez travailler dans le détail les éléments de votre site (taille des objets, alignement, ...) vous pouvez effectuer un zoom de 200% ou 300 % et revenir plus tard à la taille normale (100%). 3. - AJOUTER UNE PAGE Suivant vos besoins vous aurez à créer plusieurs pa ges pour votre site. Par défaut, Web Acappella ouvre votre première création sur la page «Accueil». Cette page est obligatoire et ne peut pas être supprimée. Elle est la base de votre site et lors de la mise en ligne elle sera la première page (page d’accueil) de votre site Web. Ajoutez simplement vos pages grâce au bouton «Ajouter une nouvelle page» (icône + dans l’explorateur de page) ou par l’intermédiaire du menu «Pages / Maquettes» «Ajouter une nouvelle page». N’importe quelle page créée peut être mise en page d’accueil grâce au menu «Pages/Maquettes» -«Mettre la page courante en Page d’accueil».


4. - ARRIERE PLAN ET TAILLE DE LA PAGE Un Clic droit sur la page permet d'accéder aux Propriétés de la page Vous pouvez ici choisir la couleur de l’image ou d’ arrière plan du site de votre page en cours.

Vous pouvez modifier la taille de votre page Changez simplement la hauteur et la largeur grâce a ux menus déroulants (les dimensions sont exprimées en pixels). Si vous cochez la case "Plan de travail centré lors de la publication", votre site sera automatiquement centré dans votre navigateur Intern et et dans votre espace de travail. Si vous décochez cette case, la page sera alignée à gauche.

Note : l’élément placé le plus bas dans la page déterminera la fin de votre page et par conséquent la fin du défilement vertical. Pour aller plus loin dans la gestion de l’arrière-plan, vous pouvez consulter la partie «Maquettes»

Choix de la largeur voir dossier résolution d'écr an Si on utilise une maquette, la largeur est obligato irement celle de la maquette Fond de page en dégrade 1/ Ajouter une zone de couleur de la taille de la page faire un clic droit avec la souris cliquer sur mettre en arrière plan, puis dans la zone de travail cocher la case "dégradé" en dessous choisir les couleurs et l'importance du dégradé. 2/ Astuce qui nécessite l'utilisation d'un logiciel genre Photoshop ou GIMP (gratuit) Créer une image en dégradé de 1 ou 2 pixels de large sur 1500 pixels de haut environ (+ ou - selon la taille de la page), Aller dans "propriétés de la page" et choisir cette image comme fond au lieu d'une couleur. Mettre cette image en mosaïque pour obtenir un fond de page dégradé Les gifs animés ne sont pas pris en compte en fond de page 5. - PROTECTION DE LA PAGE Cette partie vous permet de protéger l’accès de vot re page par un mot de passe. Ce mot est commun à toutes les pages protégées ; chaque page n'a pas son propre mot de passe voir plus loin) Cochez la case pour protéger votre page par le mot de passe.


Le mot de passe est à déterminer dans les propriétés du site Web. Pour avoir plusieurs mots de passe, allez voir ESPACE MEMBRES dans le document Fonctionnalités externes pour WA 6. - PARAMETRAGES AVANCES DE LA PAGE

• Dans le menu contextuel "Propriétés de la page" • Icone "Avancé" (Roue dentée) • Champ "Nom de votre page"

Cet onglet vous permet l’ajout de code dans la part ie « Head » de la page HTML générée par Web Acappella (réservé aux utilisateurs expérimenté s).

Renommer les pages Cet onglet vous permet aussi de modifier le nom du fichier HTML (nom de la page ) et ainsi remplacer l’intitulé « crbst_xx » par un nom de votre choix (exemple: pagecontact ou albumphoto). Il est impératif de ne pas mettre d’espaces ou de caractères spéciaux. WA accepte des noms de pages personnalisés comprenant 5 à 15 caractères. Ne pas utiliser d'espace ou de caractère accentué, sous peine d'incompréhension En effet, les pages portent à leur création un nom HTML défini par Web Acappella, différent de celui que vous lui donnez dans l'explorateur de page. Elle va ainsi se nommer Crbt_ Ce nommage automatique peut être gênant dans ce cas il est judicieux de nommer la page avec le même nom que dans l'explorateur de pages. Attention si on donne un nom qui existe déjà la page ancienne sera effacée Page en construction: Si une page de votre site n'est pas encore prête à être publiée, mais que vous souhaitez publier les autres pages, cochez simplement cette case pour que le contenu de la page en cours n'apparaisse pas une fois publiée sur votre espace Web.


DUPLIQUER UNE PAGE Sur le même site ou d'un site A sur un site B. Aller dans Edition (sélectionner tout) et (Copier) Eventuellement, changer d`espace web (onglet Fichier) de site A à site B Ouvrir une nouvelle page - attention a la largeur et longueur de la page qui doivent être identiques Faire Copier avec le clic droit, La couleur de fond est éventuellement à replacer et une partie des propriétés de la page sont à redéfinir :référencement, nom de page, ainsi que les liens sur les objets (bouton, images....) PAGE QUI DISPARAIT AU BOUT DE X SECONDES Faire une page d'ouverture du site (avec un message de bienvenue par exemple) qui disparait ensuite pour arriver sur la vraie page d'accueil index. a/1ere script Mettre ce code dans une zone HTML dans la page

<script type="text/javascript"> setTimeout("document.location = 'page.html' ", 5000) </script>

Remplacez " page.html" par l'adresse de la page qui doit s'ouvrir et "5000" par le temps voulu (en millisecondes) avant son ouverture automatique b/ 2eme script

<script type="text/javascript"> window.setTimeout("location=('http://www.nomdusite/nom-de-la-page-de-destination.html');",10) </script>

Nota 10 est la durée en secondes ?? NOMS DES PAGES INVISIBLES Pour qu' on ne puisse pas voir le nom des pages dan s la barre d'adresse, on peut appeler le site dans une page qui n'a qu'une frame (mettre le lien de la frame sur l'adresse du site) et il y aura toujours le même nom mais alors il n'y aura pas de référencement des pages. 7. - LES MAQUETTES Vous désirez appliquer un style visuel uniforme sur l’ensemble des pages de votre site? Grâce aux maquettes, la mise en page sera simplifiée et v otre site aura un visuel global homogène (pas de décalage dans les menus ou les éléments réc urrents de vos pages). Qu'est ce qu'une maquette? Une maquette est une page un peu particulière mais dont l'emploi est rigoureusement identique à celui d'une page. Vous pouvez placer les mêmes éléments et de la même manière que sur une page. L'utilisation des maquettes avec Web Acappella offre de nombreux avantages que nous allons énumérer ci dessous : En utilisant des maquettes, vous pouvez facilement uniformiser la présentation de votre site. Un menu dynamique sur une maquette (ou des boutons) sera présent sur toutes les pages qui utiliseront cette maquette, donc, simplification de la mise à jour des menus. Toutes les images utilisées dans une maquette seront gérées par le cache du navigateur ce qui accélèrera l'affichage des pages utilisant cette maquette. L'espace de travail sur une page utilisant une maquette est plus simple a manipuler (les éléments de la maquette étant protégés). La mise à jour des éléments communs à votre site est facile à réaliser, il suffit de modifier la maquette.


Ainsi, si vous désirez effectuer des changements graphiques ou contextuels, modifiez seulement la maquette. Les changements seront alors effectifs sur toutes les pages utilisant cette maquette. Voir plus bas

CREER UNE MAQUETTE:

Tout d'abord, prenez le temps de définir la charte de votre site (éléments qui sont communs à toutes les pages qui utiliseront cette maquette) : dimensions, fond de page, image d'arrière plan, couleurs, menus, logos... Pour créer une nouvelle maquette, cliquez sur l’icône de l'explorateur de maquette puis sur "Ajouter une nouvelle maquette" ou cliquez sur le menu « Pages / maquettes » puis « Ajoutez une nouvelle maquette ». Une nouvelle page vide s’ouvre dans l'explorateur de maquettes. Définissez les propriétés de cette maquette (dimensions, arrière plan, centrage) en faisant "Pages/Maquettes -> Propriétés de la page" et placez tous les éléments que vous avez définis dans votre charte. Créez votre maquette comme n'importe quelle page. Elle peut par exemple se composer d’images, de zones de couleur, de menus dynamiques et de boutons. Cette composition sera enregistrée comme maquette et pourra servir de base homogène à la création des pages de votre site. Enregistrez cette maquette. UTILISER UNE MAQUETTE POUR UNE PAGE: Une fois votre maquette créée, vous pouvez l’appliquer à vos pages. Dans la page en création, affichez les propriétés de la page. Dans l’onglet « Arrière plan » cochez la case « Utiliser une maquette comme arrière plan ». Sélectionnez ensuite votre maquette et cliquez sur « OK ». La maquette va apparaître en fond de votre espace de travail, et tous les éléments de la maquette sont verrouillés - Ensuite, finissez de construire votre page en y ajoutant ses éléments propres - N'oubliez pas à la fin de sauvegarder votre page Les maquettes et leurs éléments sont systématiqueme nt placés en arrière plan par rapport aux éléments d'une page. Vous ne pouvez pas directement modifier la maquette lors de la création des pages. Vous devez impérativement retournez dessus pour la retravailler. MODIFICATION D'UNE MAQUETTE Toutes les modifications effectuées sur votre maque tte seront automatiquement prises en compte sur les pages utilisant la maquette. ATTENTION Si vous modifier votre maquette, certaines modifications ne seront cependant pas prises en compte si cela est impossible Exemple : Vous avez défini pour la maquette une largeur de page de 1200 pixels et vous avez créé des pages qui remplissent cette largeur. En passant la largeur de la maquette à 1000 pixels, les pages ne pourront pas être rétrécies et resteront donc en 1200 ATTENTION En publication HTLM l'usage de Ctrl+ et Ctrl- pour zoomer sur une page du site ne "zoome"" pas les objets de la maquette et on a quelques surprises !!


A la publication de votre site, Webacapella créera une page html contenant la maquette et les éléments de votre page. 8. - PIEDS DE PAGE Les pieds de page fonctionnent de la même manière q ue les maquettes. Les éléments de la maquette sont en général en tète de page et sur les cotés Mais si les pages ont la même largeur, il n'en est pas de même pour la longueur et donc une seconde maquette est nécessaire pour le pied de page qui s'adaptera à cette longueur variable Ainsi, la hauteur d'une page est auto ajustée selon le contenu par l'utilisation d'un pied de page. Les pieds de pages sont généralement utilisés pour des liens vers les mentions légales, les contacts, le copyright.... . Libre à vous de choisir! Pour créer un pied de page: Créez une nouvelle maquette (que vous pouvez renommer « pied de page » pour la reconnaître plus facilement) et créez votre pied de page.

a/le pied de page est installé sur une page qui n'a pas de maquette Dans les Propriétés de la page, aller dans l’onglet « Arrière plan », section « Pied de page », cliquez sur « Choisir un pied de page ».

Sélectionnez votre pied de page dans la liste des maquettes puis cliquez sur « OK ». b/ le pied de page complète une maquette à laquelle il sera lié Appliquez directement le pied de page à la maquette. Il est impossible d’appliquer une maquette et un pied de page en même temps. Dans la page de la maquette, dans les Propriétés de la page? aller dans l’onglet « Arrière plan », section « Pied de page », cliquez sur « Choisir un pied de page ». Note: Le pied de page n’apparaît pas lors de la création. Vous pourrez le voir seulement en pré visualisation ou en ligne. Le pied de page s’adapte automatiquement à la hauteur de votre page et vient se placer juste après le dernier élément, en bas de la page. Remarque Pour que le pied de page se place directement sous la page il faut le placer tout en haut de la page "pied de page" ; attention il se place sous le dernier objet placé sur la page ; attention aux zones de couleurs qui descendent très bas et aux objets "oubliés". 9. - EDITEUR DE THEME VISUEL l'Editeur de thème visuel , (Menu: Site Web) vous permet de choisir une palette de couleurs et leurs


nuances. Ces couleurs et leurs nuances pourront être par la suite très simplement appliquées sur les éléments utilisant des couleurs (fond, bordures, dégradé...). Cet outil vous permettra de choisir des couleurs qui se marient bien ensemble et de créer un site aux couleurs homogènes. ONGLET HARMONIE 1. Choix de couleurs. Cliquez sur le menu "Site Web" / "Editeur de thème visuel". Choisissez premièrement votre mode composition des couleurs: analogue, monochromatique, triade, complémentaires, composé ou dégradé. Déplacez ensuite les curseurs dans la palette pour choisir vos nuances. Paramétrez ensuite la luminosité de vos couleurs et le paramètre des harmonies dans le mode analogue. Une fois votre choix effectué, cliquez sur OK pour sauvegarder vos nuances de couleur. Vous pouvez aussi sauvegarder plusieurs harmonies. Une fois votre harmonie de couleurs créée, cliquez sur le bouton "+" en bas de la fenêtre pour l'ajouter à vos harmonies. Vous pouvez aussi supprimer une harmonie en cliquant sur le bouton ". 2. Utilisation de la palette de couleurs. Sur tous les éléments qui vous donnent le choix dans les couleurs (zones de couleur, formulaire, boutons, menu dynamique, bordures...), cliquez sur le bouton de choix de couleur.

Cliquez ensuite sur le bouton "Couleurs du thème" pour accéder à vos nuances précédemment choisies.

Choisissez enfin une couleur pour l'appliquer sur votre élément. Note : le modèle "Divers 3" utilise une palette personnalisée pour la couleur de ses éléments. ONGLET FENETRES DE L'INTERFACE TRES IMPORTANT: on peut modifier les couleurs des "Fenêtres de l'interface" ( à fond blanc par défaut) et des boutons qui y sont intégrés


Ces paramétrages s'appliquent à toutes les fenêtres préprogrammées de Web Acappella et permettent de respecter la charte graphique du site. Mais la police de caractères est toujours celle d'origine et la forme des boutons n'est pas modifiable.

Beaucoup d'utilisateurs se plaignent du fond blanc des pages qui ne correspond à leur charte graphique, alors qu'ils ont ici la possibilité de les mettre en couleur. Regardez ce Panier du module E-commerce


10 - LES BIBLIOTHEQUES Toutes les images et tous les fichiers à insérer dans le site doivent OBLIGATOIREMENT être placés au départ dans une Bibliothèque (icones de l'interface ou par Site Web /Bibliothèque) 10.1 - BIBLIOTHEQUE DES IMAGES DE VOTRE SITE L'icône vous permet d'accéder à la bibliothèque d'images. Cet onglet contient les images intégrées dans votre site Web Acappella. Vous pouvez les renommer, les supprimer ou bien encore les classer dans des dossiers.

Pour ajouter des images à la bibliothèque de ressources et y avoir accès facilement, cliquez sur le bouton « Ajouter des images depuis votre ordinateur ».

Le boutons "Nettoyer les images inutilisées" supprime les images non intégrées aux pages de votre site. Web Acappella reconnaît automatiquement les images inutilisées. Bizarrement quand on doit integrer une image dans du code dans une zone HTML, le fichier de l'image doit etre placé dans la bibliothèque des Fichiers et non dans celle des images. 10.2 - BIBLIOTHEQUE DES FICHIERS L'icône vous permet d'accéder à la bibliothèque de fichiers.

Cet onglet contient les fichiers ajoutés à votre site Web Acappella. Vous pouvez les renommer, les supprimer ou bien les classer dans des dossiers. Pour ajouter des fichiers à la bibliothèque de ressources et y avoir accès facilement, cliquez sur le bouton « Ajouter des fichiers depuis votre ordinateur ». Le boutons "Nettoyer les fichiers inutilisés" supprime les fichiers non intégrés ou liés aux pages de votre site. Web Acappella reconnaît automatiquement les fichiers inutilisées.

Si vous effectuez des modifications sur un fichier, sélectionnez-le puis cliquez sur « Rafraîchir le fichier » pour le


mettre à jour (importez la dernière version de votre fichier depuis votre ordinateur). NOM DU CHEMIN DE LA BIBLIOTHEQUE DES FICHIERS Quand on utilise du code HTML, Web Acappella utilise une convention pour donner le chemin d'un fichier situé dans la Bibliothèque des Fichiers WA_INTERN_URL[mon_fichier] ce qui donnerait par exemple sur une ligne de code <img src="WA_INTERN_URL[image1.jpg]"> 11- LIEN HYPERTEXTE C'est grâce aux liens hypertexte que vous pouvez na viguer dans un site, envoyer vos visiteurs vers d’autres sites, envoyer des e-mails, sélection ner des fichiers ou bien encore de changer la langue de votre site.

Les liens hypertexte peuvent être appliqués sur: Le texte, Les images, Les bouton et menus dynamiques, Les zones de couleur, Les frames Les éléments multimédia Lorsque vous êtes sur un élément ou sur du texte, le menu de l'inspecteur de l'élément vous permet d'accéder aux différents types de liens hypertexte.

Remarque Dans une zone de texte mettre en surbrillance le mo t sur lequel on veut faire un lien et dans le menu de l'inspecteur la zone « liens hypertexte » est activée; le premier icone est main tenant rougeoyant. cliquer dessus Note : Pour chaque type de lien (sauf pour les e-mails), vous pouvez choisir de le rendre effectif dans la fenêtre courante (le changement de page s'effectue dans une même fenêtre) ou de l’ouvrir dans une nouvelle fenêtre (la nouvelle page s'ouvrira dans un nouvel onglet dans le navigateur Internet). On choisit généralement, cette dernière possibilité, si la page concernée n'est pas la suite logique de la page sur laquelle on est. « Lien vers une page de ce site Web »: Votre site comporte plusieurs pages et vous désirez créer un lien vers une de ces pages. Cliquez sur ce type de lien et l’explorateur de page ainsi que la liste des miniatures apparaissent. Choisissez ensuite la page vers laquelle le lien sera effectif. Par défaut, le curseur ira se placer en haut de la nouvelle page; mais vous pouvez indiquer; qu'à l'ouverture de la page; le curseur aille se placer en haut, en bas ou à tout autre endroit ou vous aurez préalablement poser une ancre . « Lien vers une Ancre HTML» Voir Ancre HTML « Lien vers un fichier »: Lien vers un document de votre choix. Choisissez un document dans l’explorateur ou importez en un de


votre ordinateur grâce au bouton « Ajouter un nouveau fichier ». Si vous avez effectué des modifications récentes sur un fichier, sélectionnez le dans votre liste de fichiers et cliquez sur le bouton « Rafraîchir », enfin choisissez le fichier et cliquez sur « ouvrir ». Lors du clic sur ce lien, le fichier sera: soit ouvert dans le navigateur Internet (ex: Pdf) soit ouvert par le logiciel approprié (ex: document Word, vidéo QuickTime...). « Lien vers une adresse Internet »: Le lien dirige les visiteurs vers un autre site Internet. Un champ apparaît vous demandant de « Taper une adresse Internet [...] ». Remplissez le champ avec l’adresse Internet vers laquelle le lien hypertexte pointera. N’oubliez pas de mettre « http:// » au début de votre adresse pour qu’elle soit correctement prise en compte. Si vous choisissez d’ouvrir le lien dans une nouvelle fenêtre, une info bulle générée par Web Acappella vous permettra d’ouvrir cette fenêtre sans être gêné par le système anti popup de votre navigateur Internet. LIMITES D'UTILISATION Liens externes et Flash en mode prévisualisation En mode Test , les liens vers des sites externes sont bloqués par Flash. Vous pouvez contourner cette limitation sans aucun danger pour votre ordinateur. Pour cela, il est nécessaire de télécharger (à la demande du programme) un fichier d’Adobe Flash Player sur le site d’Adobe F.P. qui va fairet une mise à jour de settings.xml Vous irez sur cette page: http://www.macromedia.com/support/documentation/fr/flashplayer/help/settings_manager04.html

Sur le « Gestionnaire des paramètres Adobe Flash Player »: - Menu déroulant « Modifier » -> « Ajouter » - Cliquer sur « Rechercher un dossier » - Sélectionner le dossier « WebAcappella » dans le répertoire « Mes documents » (ou dans le répertoire ou vous l'avez déplacé). - C’est fini !


« Lien vers une adresse E-mail »: Le lien envoie un Email vers l’adresse indiquée. Remplissez le champ avec l’adresse Email désirée. En cliquant sur ce lien, les visiteurs de votre site pourront envoyer un Email à l’adresse définie. Ce lien ouvre automatiquement l'utilitaire d'envoi d'Email par défaut du visiteur. Spécial e-commerce « Lien vers le panier d'achat" Uniquement disponible si un module E-commerce a été inséré sur le site.et ne fonctionne que sur les boutons Ce lien revoit automatiquement vers le panier d'achat. Dans le texte de votre bouton, ajoutez le symbole "%" qui sera automatiquement remplacé par le nombre d'articles présents dans votre panier. 12 - ANCRE HTLM L’élément « Ancre HTML va vous permette de créer de s liens à des endroits précis de vos pages. Cet élément est particulièrement utile lorsque vous créez des pages très longues. Par exemple, si vous créez une page contenant un long texte chapitré, vous pouvez attribuer une ancre HTML à chaque titre. Ainsi, en créant un menu utilisant ce type de lien, vous pourrez naviguer dans votre texte très facilement. L'insertion d'une ancre dans les pages de Web Acappella ne peut se faire que sur un emplacement vide de la page et non dans un texte ! (l'emplacement nécessaire est tout petit et sera invisible sur le site) En fait, il s'agit de mettre un repère invisible dans la marge devant la ligne ou l'on veut aller. Mais vous pouvez, aussi, insérer cette ancre à proximité de n'importe quel objet, à condition que l'emplacement d'insertion soit vide. Il est donc impossible de positionner votre ancre par rapport à une zone de texte avec ascenseur. Cliquez sur « ajouter une ancre HTML » et placez votre ancre à l’endroit désiré dans la page. Affichez les propriétés de l’élément (via l'inspecteur) puis donnez un nom à votre ancre HTML. La plupart du temps l'ancre est utilisée pour se déplacer à l’intérieur d’un même page mais elle peut aussi se mettre sur une autre page. Evidemment, l’ancre doit être créée AVANT le lien qui y fera référence En mode Test le lien peut ne pas fonctionner Pour cela, il est nécessaire de télécharger (à la demande du programme) un fichier d’Adobe Flash Player sur le site d’Adobe F.P. qui va faire une mise à jour de settings.xml Voir plus haut dans lien hypertexte comment résoudre cette limitation. "Lien vers une ancre"

Lorsque vous allez créer un lien hypertexte dans la page contenant cette ancre, dans la section "cible", choisissez votre ancre pour créer un lien direct dessus. Dans le texte mettez en surbrillance le mot ou l’expression qui doit contenir le lien ; dans le menu de l’inspecteur la zone « liens hypertexte » est alors activée; son premier icone est rougeoyant ; cliquez dessus pour ouvrir la fenêtre qui permet de choisir la cible. Pour les autres objets la fonctionnalité lien et son icone est


toujours visible. Choisir en haut « Lien vers une page du site », puis dans le tableau des pages cliquez sur la page ou se trouve l’ancre (souvent, celle ou vous êtes) ; puis choisissez « Fenêtre courante » ou « Autre fenêtre » ‘(si on reste dans la même page, choisir obligatoirement Fenêtre courante). Enfin, sous « Fenêtre courante » dans la zone avec …… développez et vous voyez apparaitre : Haut (de la page) , Bas (de la page) et les ancres créées sur cette page.; il vous suffit alors de cliquer sur celle que vous désirez. 13 - FRAME Web Acappella permet l’intégration de frames. Une frame (ou cadre en français) est une fenêtre aux dimensions ajustables à l’intérieur même d’une page dont le contenu est indépendant du reste de la page. Elle peut avoir les dimensions que vous souhaitez, à vous de l’adapter à son contenu. Le contenu d'une frame est directement visible dans l'espace de travail. La frame est l'outil par excellence pour intégrer des objets externes à Web Acappella comme certains scripts avec plusieurs fichiers ou des diaporama s complexes provenant de programmes externes Voir lien vers Internet plus bas

Différents types de liens peuvent être appliqués à une frame: « Lien vers une page de ce site Web » : Sélectionnez dans le menu déroulant « Lien vers une page de ce site Web ». Choisissez une page de votre site qui apparaîtra alors dans la frame. « Lien vers un fichier » : Ce lien ouvrira le fichier sélectionné à l’intérieur de la frame à condition que votre navigateur Internet soit équipé des fonctionnalités nécessaires à sa lecture (Adobe PDF Reader, images, fichiers en .txt (texte


simple)...). Dans le cas contraire, le fichier sera ouvert de manière externe (en dehors de votre navigateur Internet) par le logiciel correspondant au fichier (Word, Excel, vidéo, musique...). Sélectionnez « Lien vers un fichier » dans le menu déroulant. Cliquez ensuite sur « Ajouter un fichier » et sélectionnez le fichier voulu. « Lien vers une adresse Internet » : Votre frame aura pour contenu un site Internet dont vous aurez déterminé l’adresse. Ce type de frame est pratique lorsque vous désirez afficher un autre site Internet tout en permettant à vos visiteurs de rester sur votre site Web Acappella. On l'utilise également pour aller chercher des programmes externes à WA dans des répertoires que l'on a préalablement uploadés par FTP à la racine de son propre site. Ainsi on utilise son propre serveur comme un serveur externe Note : Pensez à adapter la taille de votre frame au site Internet mis en lien. Sélectionnez « Lien vers une adresse Internet » puis tapez l’adresse Internet dans le champ correspondant. Si une frame remplit la page on croit être en direct sur la page

Une frame a toujours les coins carrés mais on peut lui donner un effet de coins arrondis en mettant en arrière plan une zone de même couleur que le fond de la frame, aux coins arrondis, et un peu plus grand que la frame pour donner l'impression d'une bordure aux coins arrondis.

FRAME AVEC PLUSIEURS RENVOIS Quand on crée sur une même page une frame et un bouton, on voit apparaitre l'adresse de la frame en plus de fenêtre courante et nouvelle fenêtre; ce qui permet si on met plusieurs boutons d'envoyer dans la même frame plusieurs "objets" à partir des liens des boutons.

Zones HTLM versus Frames Quand on insère une zone HTML dans une page, son rendu diffère selon le navigateur utilisé. On peut limiter la casse, en ouvrant une frame et en y appelant ce code HTML LIMITES D'UTILISATION Si votre site est publié en Flash Les frames et zone de code HTML seront toujours placées au premier plan. Attention donc au positionnement de certains éléments comme le menu dynamique dont les sous-menus pourraient être partiellement cachés. Dans ce cas, votre frame peut très bien être couverte par une zone de code html ou un gif animé (il faut mettre la frame au premier plan) Si votre site est publié au format html vous devez gérer l'ordre des éléments 14 - BOUTON Afin de créer vos liens ou vos menus, Web Acappella met à votre disposition des boutons de navigation entièrement paramétrables. Pour insérer un bouton, cliquez sur le menu « Insertion » « Ajouter un bouton », ou cliquez sur l'icône: le paramétrage des boutons est très complet; Aspect général du bouton: Dans cette partie choisissez la forme générale de votre bouton: Pastille, Rectangle, Cercle ou rectangle arrondi (vous pouvez paramétrer le % du coin). Vous pouvez décider d’appliquer ou non un effet 3D et une ombre sur le bouton (cases à cocher).


ASPECTS GRAPHIQUES DU BOUTON: Il est possible de déterminer l’aspect du bouton sur 3 « États »:

État « normal »: bouton inactif. État « survolé »: lorsque la souris passe dessus. État « actif »: lorsque le bouton correspond à la page en cours de visualisation.

Apparence du fond.

Choisissez une couleur ou une image de fond pour votre bouton. Cliquez simplement sur une des deux cases pour sélectionner une couleur sur la palette ou sélectionner une image depuis votre « Bibliothèque de ressources ». De même vous pouvez appliquer un effet de lumière sur votre bouton.

Choisissez une couleur dans l’option « Luminosité bouton ». Vous pouvez régler le degré de transparence de la luminosité. Pictogramme

L’option « Pictogramme » vous permet d’insérer une image dans votre bouton afin de le personnaliser. Vous pouvez par exemple insérer votre logo ou tout autre élément décoratif. Si vous décochez l’utilisation du pictogramme dans l’ « États survolé » ou dans l’ «État actif », le pictogramme de l’ « État normal »

sera alors utilisé par défaut. Vous choisissez la taille de votre pictogramme (en %) grâce au menu déroulant. Propriétés du texte: Choisissez ici la couleur du texte de votre bouton. Vous pouvez lui ajouter un effet d’ombre ou bien encore le souligner.

Entrez le texte qui apparaîtra sur votre bouton. Pensez à adapter la taille du bouton à la taille de votre texte.

Choisissez une police de caractère, sa taille et ses attributs (gras ou italique) et déterminez l’alignement de votre texte (à gauche, centré ou à droite). La marge intérieure détermine l’emplacement du texte dans le bouton. Plus le pourcentage est élevé, plus le texte sera éloigné des bords du bouton. La marge intérieure est inefficace si le texte est centré. un bouton ne peut contenir du texte que sur une ligne ; mais un bouton peut contenir une image qui elle peut être fabriquée avec plusieurs lignes de texte. Autres caractéristiques l'info bulle Vous pouvez aussi faire apparaître une Info bulle. Lors du survol de votre bouton, le texte que vous aurez saisi apparaîtra dans une bulle. Cette option est pratique lorsque vous désirez décrire à quoi correspond le bouton. bruitage On n'a pas de possibilité d'ajouter un petit bruitage lorsque l'on passe la souris sur un bouton (ou tout lien en général).


Si on doit faire un menu avec des boutons, on peut choisir aussi « Menu dynamique » avec déroulement de sous menus On peut remplacer un bouton par une image un texte etc... avec lien et modification au survol; possibilité intéressante lorsque les boutons posent problème en publication HTLM Liens hypertexte: Dans l’onglet « Lien » des propriétés du bouton, choisissez la destination du lien hypertexte de votre bouton (voir section « Liens hypertexte »). BOUTONS SPECIAUX BOUTON VERS LE PANIER D'ACHAT. Si vous avez plusieurs modules E-Commerce sur votre site et que vous souhaitez un seul lien vers le panier, choisissez "lien vers le panier E-Commerce". Nous vous conseillons de placer ce bouton pointant vers le panier sur une maquette afin que le lien soit accessible depuis n'importe quelle page. BOUTON INVISIBLE Fonds et lettres en couleur transparente, taille au minimum souvent. L’usager peut quand même le repérer par la petite main qui apparait quand on le survole. BOUTON CLIGNOTANT Un bouton clignotant doit être fait comme pour un gif animé, pour cela il faut un autre logiciel Voir par exemple Google : http://www.google.fr/search?hl=fr& [...] =&aq=f&oq= BOUTON-MENU Exemple: un bouton Bureaux faire apparaitre des liens vers Direction et Secrétariat. Utiliser le menu dynamique. Un seul menu Bureaux avec 2 sous menus Direction et Secrétariat le tout entièrement transparent sans fond et en passant sur Bureaux, les 2 liens cliquables apparaissent. BOUTON DEBUT DE PAGE bouton qui ramène automatiquement en haut de la page Créer une "Ancre" HTML en haut de page et y faire pointer le bouton. ou mettre comme lien la page courante ce qui ramène en tete de page (moins bon car nécessite le réaffichage) BOUTON RETOUR VERS PAGE d’où l'on vient Mettre dans une zone HTML le code suivant <a href="javascript:window.history.go(-1)">Retour</a> ou <A HREF="javascript:window.history.back()">Retour</A> ou si image d'un bouton <a href="javascript:window.history.go(-1)"><img src="CARIBOOST_URL[boutonretour.gif]"></a> BOUTON RETOUR VERS LA PAGE SUIVANTE ne fonctionne que si on est revenu en arrière <A HREF="javascript:window.history.forward()">Suivante</A> BOUTON FERMER LA PAGE <A HREF="javascript:window.close()">Fermer</A> BOUTON POUR IMPRIMER UNE PAGE en HTML seulement Par rapport à la fonction Imprimer du navigateur lui-même, ce bouton n'a pas grand intérêt. Pour imprimer une page, insérer dans une zone de code html : <a href="javascript:window.print()">Imprimer cette page</a> ou pour mettre en plus du style pour couleur police et taille


<a style="text-decoration:none; font-size:15px; color:#000066; font-family:Comic sans MS;" href="javascript:window.print()">Imprimer cette page </a> ou pour mettre une image à la place du texte <a href="javascript:window.print()"><img src="adresse-de-l'image.gif" border="0" alt=""></a> Par exemple,"printer.gif" correspondrait à une image d'imprimante mise dans le répertoire des fichiers du site Pour indiquer l'image , aller dans l'inspecteur de la zone de code HTML de Web Acappella, positionner le curseur, entre les deux guillemets à la place de " adresse-de-l'image.gif" , et cliquer sur le bouton + (situé juste en dessous "Activer le code HTML" ). SIMULER UNE ZONE A COCHER Il n'y a pas de zone à cocher dans les éléments que propose WA. voici une astuce pour essayer de remplacer cette fonctionnalité Créer 2 pages une page A avec une frame qui appelle la page C une page C ou devrait se situer la case à cocher avec le texte afférant Sur la page C Mettre 2 boutons OUI et NON qui correspondraient respectivement à la case cochée et à la case non cochée Le bouton "OUI" envoie vers la suite 1 du site. Le bouton "NON" envoie vers la suite 2 du site" ATTENTION En lisant le code source , un visiteur peut voir vers quelle page pointe les boutons.


15 - MENU DYNAMIQUE Le menu dynamique facilite la navigation dans votre site en vous proposant un système de menus et de sous-menus. Organisation de votre menu : Créez autant de menus et de sous-menus que vous le souhaitez. Pour créer un nouveau menu principal, sélectionnez « Menu dynamique » puis cliquez sur ..... Pour un nouveau sous-menu, placez vous sur un menu principal et cliquez sur ..... Dans la fenêtre « Nom du menu », vous pouvez renommer vos menus et sous-menus puis leur attribuer un lien hypertexte. Réorganisez votre menu grâce aux boutons « Monter » et « Descendre ». Apparence de votre menu : L’onglet « Affichage du menu » permet de régler l’apparence de votre menu et de vos sous-menus.

Choisissez l’orientation, le fond, la police de caractère, la couleur des séparateurs, le style qui apparaîtra lors du survol du texte, l’apparence des coins, la bordure... Si le menu est horizontal, les sous menus se déroul ent vers le bas S'ils vont vers le haut c'est qu'il n'y a aucun autre élément en dessous dans la page; on peut mettre n'importe quoi d'invisible Si le menu est vertical, les sous menus vont vers l a droite Il n'existe pas de menu dynamique vertical qui s'en trouvre entre 2 menus pour montrer les sous menus Les sous menus ne restent pas ouverts, dès qu'on so rt la souris de la zone, ils se rétractent. Les largeurs des cadres des menus ne sont pas régla bles, elles s'ajustent à la longueur du titre.


ASTUCE pour que les largeurs des cadres aient toute s la même taille Il ne faut pas faire un menu dynamique avec plusieurs titres , mais faire un menu pour chaque titre En effet dans le cas du menu dynamique à un seul titre la largeur du cadre est réglable. Par défaut WA donne 3 titres de sous menus dans chaque menu dynamique menu 1, menu 2 menu 3, en supprimer deux . Par la suite on peut placer plusieurs menus dynamiques côte à côte ou les uns sous les autres et évidemment chaque menu peut avoir ses sous menus. Remarque En mode Flash, le déroulement des sous-menus d'un menu dynamique est occulté par une Frame. En mode HTML, le déroulement des sous-menus d'un menu dynamique s'effectue devant la Frame. note: Un menu dynamique qui disparait quand une vidéo QT est lancée.

Documents

CONSTRUIRE LES PAGES et Y NAVIGUER - Freeagalia.free.fr/acappella/wa_files/PAGES.pdf · Créez votre maquette comme n'importe quelle page. Elle peut par exemple se composer d’images,