CONSTRUIRE LES PAGES et Y NAVIGUER

Transcription

CONSTRUIRE LES PAGES et Y NAVIGUER
Dossier par Clochar
SOMMAIRE
1 . Organisation des pages ......................
2 . Affichage de la page ............................
3 . Ajouter une Page .................................
4 . Arrière plan et taille de la page ..........
5 . Protection de la page ..........................
6 . Paramétrages avancés de la page ......
1
2
2
3
3
4
7 . Maquettes ............................................
8 . Pieds de page ......................................
9 . Editeur de thème visuel ......................
10 . Bibliothèques d'images et de fichiers
10 . Lien hypertexte .................................
11 . Ancre HTML .......................................
12 . Frame .................................................
13 . Bouton ...............................................
14 . Menu dynamique ...............................
5
6
7
Dossier : Construire les pages et y naviguer
1
9
11
13
14
17
maj 05/10
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'organisation 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 travailler en plein écran (menu « Affichage » «
Mettre la fenêtre en plein écran ») afin de profiter 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 pages 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».
2
maj 05/10
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 aux 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 Internet 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'écran
Si on utilise une maquette, la largeur est obligatoirement 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 votre 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.
3
maj 05/10
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 partie « 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.
4
maj 05/10
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)
ensuite pour arriver sur la vraie page d'accueil index.
qui disparait
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 dans 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 votre site aura un visuel global homogène
(pas de décalage dans les menus ou les éléments récurrents 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.
5
maj 05/10
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
fin de sauvegarder votre page
- N'oubliez pas à la
Les maquettes et leurs éléments sont systématiquement 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 maquette 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 !!
6
maj 05/10
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 que 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
7
maj 05/10
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
8
maj 05/10
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
9
maj 05/10
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
10
maj 05/10
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 naviguer dans un site, envoyer vos visiteurs
vers d’autres sites, envoyer des e-mails, sélectionner 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 mot 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 maintenant 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
11
maj 05/10
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 !
12
maj 05/10
« 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 des 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
13
maj 05/10
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
14
maj 05/10
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).
15
maj 05/10
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).
16
maj 05/10
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
17
maj 05/10
<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.
18
maj 05/10
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éroulent 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 la droite
Il n'existe pas de menu dynamique vertical qui s'entrouvre entre 2 menus pour montrer les sous
menus
Les sous menus ne restent pas ouverts, dès qu'on sort la souris de la zone, ils se rétractent.
Les largeurs des cadres des menus ne sont pas réglables, elles s'ajustent à la longueur du titre.
19
maj 05/10
ASTUCE pour que les largeurs des cadres aient toutes 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.
20
maj 05/10

CONSTRUIRE LES PAGES et Y NAVIGUER

Transcription

Documents pareils

http://www.ca-cotesdarmor.fr Vider les fichiers temporaires et l

1er pas dans I-Prof

Guide: Cre er son site Web Creator pour Mobiles

USAGE DE WINAMP

RAILY 4 SE – version d`évaluation

Télécharger - Devoir.tn >> Devoir Tunisie

detecter et supprimer les faux logiciels sous

assemblage du brassard lumineux

Guide de mise à jour logiciel PMD-B200P Version 2.0

Comparer des documents à l`aide de la visionneuse en ligne