OBJETS MIS DANS UNE PAGE

of 20
119 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
OBJETS MIS DANS UNE PAGE dossier par Clochar Ce document reprend l'aide en ligne de Web Acappella enrichie des nombreux commentaires récupérés sur le forum auprès des divers contributeurs et utilisateurs.
Document Share
Document Transcript
OBJETS MIS DANS UNE PAGE dossier par Clochar Ce document reprend l'aide en ligne de Web Acappella enrichie des nombreux commentaires récupérés sur le forum auprès des divers contributeurs et utilisateurs. Rendons ici hommage à tous ces bénévoles qui essayent de nous dépanner sans aucune contrepartie Tout ce qui concerne les liens, ancres, boutons, menus. est dans le dossier Construire ses pages et y naviguer SOMMAIRE 1. Zone de texte... 2 Polices vectorisées Zone de couleur Image Album photo Ajout d'images 4.2 Assistant 4.3 Paramétrage du visuel et fonctionnalités 4.4 Plugins 5. Tableau Fichier Son Animation Flash Vidéo Formulaire de contact Moteur de recherche Compteur de visites Zone de code HTML AVERTISSEMENT Pour chaque objet, des indications sont souvent données pour utiliser une fonctionnalité, en utilisant du code HTML, à mettre dans une zone HTML. Il faudra dans ce cas, allez préalablement voir Zone de Code HTML en fin de dossier pour comprendre comment ce type de zone peut s'installer. Dossier : Objets mis dans une page 1 maj 05/10 1 - ZONE DE TEXTE Ajouter une zone de texte grâce à l icône «texte» ou pour le menu «Insertion» / «Ajouter du texte». Saisissez votre texte en double cliquant dans la zone. Appliquez ensuite divers procédés de traitement de texte tels que: l écriture en gras, italique et souligné, l alignement de votre texte à gauche, à droite ou centré, le changement de couleur et de taille. Faites en sorte que votre texte soit lisible sur des écrans en définition élevée. La taille de la police utilisée pour le texte courant doit correspondre, en Arial par exemple, à 12 minimum Si vous voulez qu une zone de texte garde une certaine taille mais que votre texte est plus long, la zone crée automatiquement une barre de défilement verticale. Cette barre peut être en permanence visible ou uniquement présente lors du survol du texte (cochez la case Cacher automatiquement pour cette visualisation). Il est impossible de modifier l'apparence des ascenseurs des blocs de texte (version Flash). Vous pouvez essayer de publier votre site au format HTML / CSS3 qui utilisera alors les visuels par défaut de votre système d'exploitation. Quand on agrandit une zone pour éviter un ascenseur,alors qu'il semble y avoir de la marge, il faut penser aux lignes vides en haut comme en bas qui invisibles sont en fait la cause de l'ascenseur; en fin de texte ne pas oublier de supprimer les retours chariot invisibles les marges intérieures de la zone de texte On doit laisser des bonnes marges par rapport au bord de la zone de texte, car chaque navigateur utilise des polices légèrement différentes et donc va modifier légèrement la taille des caractères et ceux-ci peuvent venir toucher les bords de la zone dont la taille, elle, ne variera pas et alors des barres de défilement vont apparaitre, ce qui peut aussi entrainer des décalages de blocs. De même ne pas s'approcher trop des bords de la page laisser au moins 10 pixels de marge Un objet peut changer de coté de page ou se décomposer en deux parties et apparaître des deux cotés ou empêcher les réglages de pages par sa position trop collée. TAILLE DES POLICES dans une zone de texte Dans WA certaines tailles de polices intermédiaires ne sont pas disponibles comme des tailles entre 37 et 48, 48 et 64. Les caractères spéciaux Pour insérer un caractère spécial comme, il y a un petit truc simple mais qui marche : le taper sous Word (ou autre) puis faire un copier/coller dans la zone de texte WA. comment mettre des caractères en indice ou exposant ( CO2 XXe siècle ), autrement que de repasser le fichier html par un autre logiciel d'édition comme Coda par exemple Pour les indices choisir une taille de caractères de 2 à 3 points inférieure CO2 Pour les exposants. Pas de réponse connue l'arobase Dossier : Objets mis dans une page 2 maj 05/10 L'arobase dans l' de contact ne peut être saisi par l'utilisateur, sur certains navigateurs Le problème est connu et a déjà été maintes fois abordé sur le forum mais WA ne l'a pas résolu. Le problème est généralement constaté avec certains navigateurs en présence d'une zone de code html, d'une frame, d'une image gif animée sur la page contenant le formulaire. Le seul conseil donné par WA est de retirer ces objets NOTE SUR LES CARACTERES ACCENTUES DANS LES SCRIPTS On peut avoir un problème d'affichage des cratères accentués d'un texte insèré dans un script en java ; les caractères accentués sont remplacés par des caractères bizarres. ajouter dans la première ligne du script charset= iso peut dans certains cas les remettre en place. Exemple scripttype= text/javascript charset= iso src= http://www.zeroscript.net/scripts/actus.js /script LE COPIER COLLER On peut utiliser le copier coller à partir d'un texte existant dans un traitement de texte mais toute la mise en page est perdue (ce qui n'était pas le cas dans l'ancien Cariboost ; pourquoi cette régression?) MISE EN FORME DE TEXTE Par ailleurs il est impossible d'insérer des images dans une zone de texte ; ce qui oblige à découper le texte en blocs pour entourer l'image. les puces variées et multiples sont inexistantes dans Web Acappella (on peut utiliser à la place les caractères un peu spéciaux du clavier * & ~ # ^ + = Il n'y a pas de tabs en HTML ni dans WA et chaque navigateur utilise des espaces différents, ce qui perturbe légèrement le résultat final en fonction du navigateur utilisé. ATTENTION, il est inutile d'essayer d'utiliser des tabs quand on tape le texte car ils disparaissent des que l'on teste ou publie Pour réaliser un alignement correct en vertical par exemple pour des produits et leur prix, on fait 2 zones de texte verticales cote à cote; on inscrit le nom d'un produit dans la première zone et son prix sur la même ligne mais dans la seconde zone. Cette astuce ne permet de résoudre le problème qu'en partie car les 2 zones doivent être en pleine page et on ne peut utiliser le SCROLLING car les 2 zones ne se dérouleraient pas ensemble. C'est pour toutes ces raisons, que certains utilisent l'astuce suivante: Ils tapent et mettent en page l'ensemble du texte et des images dans un traitement de texte, avec le même fond de page, puis ils font ensuite une copie écran et mettent l'image de la copie d'écran dans la page du site, Attention: Dans ce cas, sous cette image mettre une zone de texte avec le même texte (mais non mis en forme), afin que les moteurs de recherche puissent référencer les mots de ce texte. DEFILEMENT DE TEXTE Le défilement en continu du texte dans la zone (vertical ou horizontal) est aussi possible. Paramétrez les options de défilement directement dans l'inspecteur. Le défilement du texte est interrompu lors du survol de la souris. Par contre on ne peut pas le faire s'arrêter à un endroit précis (comme à la limite du bloc texte) L'inspecteur vous permet aussi d'éditer d'autres caractéristiques de la zone de texte: - Couleurs des liens, - Bordure, dégradé, arrière plan et transparence Texte clignotant: Dossier : Objets mis dans une page 3 maj 05/10 ouvrir une zone HTML et y mettre le code suivant (ajuster la taille de la zone à celle du texte table tr height= 50 td div id= monelement class= ex_div style= diplay:block; ICI ON MET LE TEXTE CLIGNOTANT /div /td /tr /table script function clignotement(){ if (document.getelementbyid( monelement ).style.display== block ) document.getelementbyid( monelement ).style.display= none ; else document.getelementbyid( monelement ).style.display= block ; } // mise en place de l appel régulier de la fonction toutes les 0.5 secondes setinterval( clignotement() , 500); /script On peut utiliser aussi une zone HTML avec la balise marquee qui permet toutes sortes de defilement Allez voir toutes les possibilités ici : Voir aussi sur le site de Gilbee INFOBULLE POUR UNTEXTE Comme elle n'existe pas pour les textes mais bien pour les images, on peut ruser en faisant une image entièrement transparente et en la mettant sur le texte; on met alors l'info bulle à l'image. LES LIENS HYPERTEXTE dans un texte De plus vous avez la possibilité de créer, de modifier ou de supprimer des liens hypertexte (liens internes ou externes) sur une partie ou sur l ensemble de votre texte (attention: en construction, vos liens hypertexte apparaîtront toujours en bleu). Pour cela il suffit de surligner le mot ou la phrase qui doit utiliser le lien avant d'aller indiquer le lien dans l'inspecteur LIMITES D'UTILISATION Les liens hypertexte dans les zones de texte (ouverture dans une nouvelle fenêtre) sont bloqués par le système anti-popup de Firefox. Une info-bulle générée par Web Acappella permet d éviter ce problème. LIEN VERS UNE IMAGE Comme on ne peut avoir une image en lien sur du texte, une solution consiste à mettre dans le texte le mot en gras, italique ou souligné pour le différencier et par-dessus un bouton sans fond et sans texte qui renverra vers l'image. ou bien mettre le bout de texte dans une zone Html avec le code suivant a href= wa_intern_url[nom_image.jpg] )' bout de texte /a Dossier : Objets mis dans une page 4 maj 05/10 TEXTE DE TITRE en IMAGE ou Bandeau Si vous désirez construire un gros titre de façon originale sous forme d'un bandeau, vous pouvez le créer sous forme d'une image. Vous pouvez le créer dans Word avec WordARt et le coupez-collez ou allez sur un site spécialisé comme : En ce qui concerne les polices, elles peuvent être vectorisées. VECTORISATION DES POLICES Les polices que vous utilisez doivent faire partie des polices admises sur le Web comme Arial ou Times Roman par exemple. Si vous utilisez une police exotique qui n'est pas dans le jeu de polices installées sur la machine de l'internaute elle est remplacée par une police standard ce qui dénature la présentation de texte et parfois la structure de la page. Pour résoudre ce problème il faut donc que le texte emmène sa police avec lui ; c'est ce qu'on appelle la vectorisation du texte. Pour chaque bloc de texte vous avez la possibilité d'activer cette vectorisation dans l'inspecteur. Comme cela rallonge le temps d'affichage de la page, il ne faut pas l'utiliser avec les polices admises sur le Web VECTORISATION des TEXTES en publication Flash WA ne permet plus de vectoriser le site en entier pour plusieurs raisons: -la lisibilité du texte qui se dégrade lorsque la taille de la police est faible -le poids du fichier des fontes qui peut augmenter considérablement avec de gros sites. Une fois vectorisées les lettres perdent en finesse (vérifier en visitant le site sur une machine qui n'a pas la police exotique) Pour améliorer la lisibilité on peut jouer avec la couleur de fond, et celle de la police ; parfois on améliore simplement en augmentant d'un ou 2 points la taille de la police,. VECTORISATION des TEXTES en publication HTML Normalement les polices ne sont pas vectorisables en HTLM On peut intégrer un script dans la page d'accueil qui installe automatiquement la police exotique sur la machine du visiteur POLICES VECTORISEES La vectorisation des polices vous permet d'utiliser n'importe quelle police présente sur votre ordinateur dans votre site Web Acappella. Les polices exotiques seront donc visibles par tous les visiteurs, y compris ceux qui n'ont pas cette police d'installée sur leur poste. Sur chaque élément utilisant du texte, vous pouvez choisir de vectoriser ou non le texte (nous vous conseillons de vectoriser le texte des éléments seulement si une police exotique est utilisée). Pour activer la vectorisation du texte sur un élément, cochez simplement la case Activer la vectorisation du texte . Limitation: dans le cas de certaines langues asiatiques utilisant des alphabets étendus avec de très nombreux caractères, comme le japonais, nous vous conseillons de ne pas utiliser la vectorisation du texte. En effet, la vectorisation de certains alphabets comportant plusieurs milliers de caractères (comme les Kanji japonais) peut provoquer un crash de l'application. RAPPEL: Pour installer une nouvelle police de caractères * dans Windows Téléchargez votre police puis copiez le fichier.ttf. Dossier : Objets mis dans une page 5 maj 05/10 Collez le simplement dans le dossier intitulé Font qui se situe dans C:/windows/ Une fois collée, votre police est installée automatiquement dans votre librairie de polices. * dans Mac Télécharger votre police sur votre ordinateur. Double cliquer sur votre police pour lancer son installation et cliquez sur le bouton «installer la police». Votre police s installe automatiquement. FONCTION BLOG CONTRAINTE TECHNIQUE Il faut disposer OBLIGATOIREMENT d'une base de données MySQL, du langage PHP (ca va généralement ensemble) et du service mail, fournis par le FAI ( comme le fait Free pour les pages perso) et le renseigner dans Paramètres de publication et Base de données Sur chaque zone de texte, vous pouvez ajouter la fonction Blog qui permettra à vos visiteurs de laisser un message ou de réagir à vos articles. la taille d'un commentaire laissé par un visiteur ne peut dépasser environ 500 caractères Il n'y a pas de possibilité d'être averti dès que l'on a un nouveau commentaire qui est posté. Les blogs ne sont actifs qu'une fois publiés Pour activer la fonction Blog, cliquez sur l'onglet Blog de l'inspecteur de zone de texte. Cochez ensuite la case Activer la fonction Blog . Un bouton apparaît en bas à droite de votre zone de texte. Une fois en ligne, le visiteur doit de cliquer sur ce bouton pour laisser un message. Le nombre de message laissé apparaît sur le bouton, avant l'intitulé commentaire(s) . Il n'y a pas de possibilité pour que la zone des messages reste apparente; Il faut obligatoirement cliquer sur : (x) commentaires pour les voir. Aussi, peut-il être judicieux de prévenir le visiteur pour qu'il laisse un commentaire sinon il risque de passer à coté de cette fonctionnalité. Le paramétrage de l'apparence du Blog, bouton, fond, couleur du texte et effet 3D se fait dans le Thème visuel du site de manière commune (dans menu Site Web). blog s'affiche trop en bas de page, adapter la maquette à la taille du site Le champ Identifiant de votre Blog est géré par Web Acappella. Un code est automatiquement généré. Nous vous conseillons de le renommer avec un nom plus explicite. Dossier : Objets mis dans une page 6 maj 05/10 Pour créer un blog on n`est pas obligé de placer un texte. On peut laisser la zone de texte vide ou n'y mettre qu'un titre; si on met un fond transparent, on pourra déplacer cette zone facilement Dans la fonction Blog, il n'existe pas de fonctionnalité qui permettrait à une personne qui revient régulièrement poster des commentaires sur le site, de ne pas avoir à rentrer à chaque visite les champs nom , url comme dans un forum. Les commentaires laissés par les visiteurs dans le blog sont mis dans un dossier dont le nom généré par Web Acappella ressemble à 23dk6023u7woz9 , Vous pouvez renommer ce fichier avec un nom plus explicite correspondant au blog en question et le nouveau nom s'affichera dans le gestionnaire de commentaires. Attention les anciens messages restent dans un répertoire avec l'ancien nom qui ne disparait pas de la liste des blogs; il est donc prudent de renommer le blog dès sa création. Le nom du blog peut être copié puis collé dans le champ Identifiants de votre blog d'un autre blog. Ce système permet de supprimer un blog d'une zone de texte et de transférer les messages déjà postés vers un autre blog Pour que tous les blogs situés sur le site, réunissent les messages au même endroit, il suffit de leur donner le même nom Dossier : Objets mis dans une page 7 maj 05/10 2. - ZONE DE COULEURS Les zones de couleurs sont des éléments qui pourront vous servir à créer un style visuel pour votre site mais libre à vous de choisir leur finalité. Aller visiter sur les zones de couleur Une vidéo très bien réalisée par l'équipe de Web Acapella. [...] ouleur.mov Puisque nous parlons de couleurs, pensez à définir une charte graphique pour votre site. Voir l'article qui lui est consacré Cliquez dans le menu «Insertion» puis sur «Ajouter une zone de couleur Une zone de couleur apparait avec une couleur aléatoire. Vous pouvez alors la redimensionner et choisir sa couleur ou son image d arrière plan. Via son inspecteur, déterminez une image d arrière plan et/ou une couleur d arrière plan. Vous pouvez par la suite régler son degré de transparence et lui attribuer une bordure. De même, vous pouvez appliquer un dégradé, des coins arrondis ainsi qu un effet d ombre portée. Note: En réglant son ordre d apparition dans la page (premier plan, arrière plan, avancer, reculer), vous pouvez vous servir de cet élément comme base d une interface graphique pour votre site. Une zone de couleur est limitée à 3000 pixels en hauteur. Si vous avez un page de 6000 pixels de hauteur il vous suffit de créer 2 zones de couleurs de 3000 pixels chacune et de les placer une en dessous de l autre. CHOISIR UNE COULEUR D'APRES SON CODE Dans l'emplacement encerclé, il n'y a pas moyen de taper un code d'une couleur connue,. Vous devez cliquer sur le bouton multicolore, devant la pipette, qui vous renvoie vers la fenêtre standard de Windows pour le choix d'une couleur. Il faudra connaitre le codage correspondant en RVB décimal car le codage RVB en hexa n'est pas repris sur ce tableau (par exemple 00=0 ff=255) Dossier : Objets mis dans une page 8 maj 05/10 JOUER AVEC LES ZONES DE COULEUR Vous pouvez voir ci dessous quelques exemples vous montrant que les zones de couleur sont un outil important pour la création de l'interface de votre site Web Dossier : Objets mis dans une page 9 maj 05/10 Créer une interface de site avec des zones de couleurs voici aussi 2 exemples d'interface de site créées uniquement avec des zones de couleurs Dossier : Objets mis dans une page 10 maj 05/10 3. - IMAGE Insérez des images dans votre site que ce soit pour créer une interface de navigation ou agrémenter le visuel de votre site. Web Acappella vous permet d intégrer autant d images que vous le désirez et de les placer où vous le souhaitez. Toutes les images qui figureront sur le site doivent être placées au préalable dans la Bibliothèque d'images du site, soit en bloc au départ, soit au coup par coup. (aller dans Site Web) Cependant les images qui seront appelées en tant que fichiers par du code mis dans une zone HTML devront être mises dans la Bibliothèque des fichiers! Cliquez sur l icône «Image» ou depuis le menu «Insertion» puis cliquez sur «Insérer une image». Cliquez sur le bouton «Choisir une image» dans l'inspecteur de l'image et choisissez une image depuis votre Bibliothèque d image qui s'ouvre automatiquement (ou ajoutez-la dans la bibliothèque si nécessaire) Le champ Info bulle va vous permettre d ajouter un nom ou un commentaire à l image. Une fois votre site en aperçu ou en ligne, positionnez votre souris sur l image pour voir apparaître un cadre contenant votre texte. Vous pouvez à tout moment supprimer cette image en cliquant sur la croix rouge (quand l image est sélectionnée). Une fois insérée dans la zone de travail, vous pouvez la redimensionner à votre guise, régler sa transparence, lui ajouter un lien hypertexte, une bordure ou un effet de reflet (uniquement visible sur votre navigateur Internet). Dans les propriétés géométriques, vous pouvez choisir de remettre l'image à ses dimensions originales en cliquant sur le bouton Dimensions d'origine . Dossier : Objets mis dans une page 11 maj 05/10 Survol de l image Web Acappella vous donne aussi la possibilité de créer un changement d image au survol de l image principale, donnant ainsi du dynamisme
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks
SAVE OUR EARTH

We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

More details...

Sign Now!

We are very appreciated for your Prompt Action!

x