FrontPage Express (v 2.0) Éditeur de pages Web Introduction

Dimension: px

Commencer à balayer dès la page:

Download "FrontPage Express (v 2.0) Éditeur de pages Web Introduction"

Jean-Jacques Carignan
il y a 7 ans
Total affichages :

1 Éditeur de pages Web Introduction Plusieurs versions du logiciel Frontpage existent. Dont FrontPage Express, qui est gratuit et librement diffusable. Il permet de débuter dans la confection de sites Internet. S il est déjà installé sur l ordinateur, vous le trouverez dans Programmes, Accessoires, Outils Internet, Front Page Express La prise en main en est très aisée, d autant plus si vous connaissez déjà Word, puisqu on en retrouve les barres d outils et les icônes standard. Pour découvrir les principales fonctionnalités du logiciel nous bâtirons un site personnel dont l architecture serait la suivante : Accueil Galerie photos Loisirs Sites Réal. Joël Leporcq CDDP des Zardennes

S il est déjà installé sur l ordinateur, vous le trouverez dans Programmes, Accessoires, Outils Internet, Front Page Express La prise en main en est très aisée, d autant

2 HTML HTML est un langage de description de pages destinées au Web. Un fichier (ou page) HTML est une suite d'instructions balisées à destination du navigateur internet qui les lira. Squelette d'une page HTML de base : <HTML> <HEAD> <TITLE>Titre du document</title> </HEAD> <BODY> Contenu du document </BODY> </HTML> Les commandes du vocabulaire HTML seront donc utilisées : soit à la manière de parenthèses délimitant une partie du texte : écrit en gras écrit en italique écrit en gras et italique soit à la manière d'instructions : : Passe une ligne dites "balises", selon une syntaxe normalisée. HTML?

Squelette d'une page HTML de base : <HTML> <HEAD> <TITLE>Titre du document</title> </HEAD> <BODY> Contenu du document </BODY> </HTML> Les commandes du

3 HTML Les images affichées dans une page Web ne font pas partie intégrante de la page HTML, qui n est qu un fichier texte. Elles accompagnent la page, qui doit pouvoir les localiser pour les présenter à l écran. <IMG SRC="ligne.gif"> Pages et fichiers

Elles accompagnent la page, qui doit pouvoir les localiser

HTML Le concepteur de pages Web travaillant avec FrontPage peut ne jamais voir le code HTML, puisque le but premier de ce logiciel est de servir d écran entre le code et le concepteur, ce qui est le

4 HTML Le concepteur de pages Web travaillant avec FrontPage peut ne jamais voir le code HTML, puisque le but premier de ce logiciel est de servir d écran entre le code et le concepteur, ce qui est le cas général des environnements de programmation. Rôle de Frontpage FrontPage Internet Explorer Pour apercevoir le code HTML ayant été reçu, et interprété, par le navigateur Internet, faire Affichage, Source. Dans FrontPage Express, faire Affichage, HTML

Fichiers du site Tous les fichiers nécessaires au site, pages HTML, images, vidéos, documents téléchargeables, éléments constitutifs du site seront sauvegardés dans le même dossier (éventuellement

5 Fichiers du site Tous les fichiers nécessaires au site, pages HTML, images, vidéos, documents téléchargeables, éléments constitutifs du site seront sauvegardés dans le même dossier (éventuellement structuré en sous-dossiers). Arborescence des fichiers du site Le fichier de la page de présentation sera la page d'accueil de votre site. Par convention, on appelle toujours ce fichier "index.htm". C'est le fichier ouvert par défaut par les navigateurs. Organisation du site

Arborescence des fichiers du site Le fichier de la page de présentation sera la page d'accueil de votre site.

Créer ses pages Créer une page (vide) et l enregistrer en spécifiant : - un titre (c est-à-dire la description de la page que l internaute pourra lire dans la barre de titre de l explorateur Internet

6 Créer ses pages Créer une page (vide) et l enregistrer en spécifiant : - un titre (c est-à-dire la description de la page que l internaute pourra lire dans la barre de titre de l explorateur Internet et grâce à quoi vous pourrez la retrouver dans FrontPage) «Page d accueil de mon site» Créer ses pages - un nom de fichier (page HTML dans le dossier du site) «index.htm» Voyez aussi clic droit : «Propriétés de la page» À propos des noms de fichiers sur le disque local : Bien que Windows permette des noms longs, avec espaces, caractères accentués, vous ne pouvez faire aucune supposition quant aux possibilités du système d exploitation du serveur distant qui hébergera votre site. Adoptez donc les conventions les plus prudentes : Huit caractères maximum pour le nom, le premier étant une lettre, pas de caractères nationaux ni d espaces, et le tout en minuscules (certains serveurs sont sensibles aux distinctions Majuscules/Minuscules) suivi de «.htm».

htm» Voyez aussi clic droit : «Propriétés de la page» À propos des noms de fichiers sur le disque local : Bien que Windows permette des noms longs, avec espaces, caractères accentués, vous ne pouvez

Formater le texte Comme dans un traitement de texte Sélectionnez les caractères ou le paragraphe et appliquez l instruction de formatage Formater le texte Voyez aussi clic droit : «Propriétés de la

7 Formater le texte Comme dans un traitement de texte Sélectionnez les caractères ou le paragraphe et appliquez l instruction de formatage Formater le texte Voyez aussi clic droit : «Propriétés de la police» À la différence d un traitement de texte Les styles disponibles sont ceux que reconnaît l HTML, de même que les tailles de caractères et les alignements. Certains caractères ne s afficheront pas (tabulations, suite d espaces, ) Vous ne devriez employer que des fontes «classiques», telles Times, Arial, car le visiteur de votre site ne dispose peut-être pas de celles dont vous êtes équipé.

HTML, de même que les tailles de caractères et les alignements.

8 Tableaux Les tableaux sont incontournables en HTML et garantissent la stabilité de votre mise en page sur tous les navigateurs. Un menu leur est d ailleurs consacré Tableaux dans FrontPage. Tableaux, Insérer un tableau, montre la fenêtre de définition d un tableau. Il sera par la suite toujours possible de revenir sur ses différentes propriétés ou sa construction. Le tableau ainsi créé permettra de disposer textes ou images dans chacune de ses cellules, préservant ainsi les dispositions relatives que vous leur aurez assignées. Les bordures restent visibles, même si vous avez choisi une taille de 0, mais uniquement dans FrontPage (voyez sinon la commande Affichage, Marques de format). Rappelez-vous que le visiteur de votre site n aura pas forcément un écran de la même dimension que le vôtre, et qu il peut aussi déformer la fenêtre de son navigateur Internet

Le tableau ainsi créé permettra de disposer textes ou images dans chacune de ses cellules, préservant ainsi les dispositions relatives que vous leur aurez assignées.

9 Tableaux On peut donc insérer du texte dans une cellule (le tableau se redimensionne en hauteur) : Insertions dans le tableau Ou une image, par le menu Insertion (en veillant à ce que le curseur soit placé à l endroit où l on souhaite insérer l image) : Une image peut être redimensionnée. En la prenant par l un de ses angles, vous conserverez ses proportions.

ce que le curseur soit placé à l endroit où l on souhaite insérer l image) : Une image

Tableaux - Cellules Tableaux Le - clic Cellules droit, par Propriétés de la cellule, permet de modifier quelques paramètres (alignement, couleur, largeur, ).

10 Tableaux - Cellules Tableaux Le - clic Cellules droit, par Propriétés de la cellule, permet de modifier quelques paramètres (alignement, couleur, largeur, ). Certaines de ces options demanderont toutefois à ce que le site soit testé avec d autres navigateurs qu Internet Explorer! Forcer un retour à la ligne : La touche Entrée introduit un nouveau paragraphe, rupture parfois trop importante en hauteur : Tandis que Shift + Entrée introduit un simple retour à la ligne :

Certaines de ces options demanderont toutefois à ce que le site soit testé avec d autres navigateurs qu Internet

11 Créer un lien La fonction Insertion, Lien permet de définir un lien hypertexte sur du texte (le texte sélectionné) ou sur une image. Lien vers une page d un autre Créer site, un ou lien vers une page de votre site. Premier cas - Création au vol de la page destinataire Le volet «Nouvelle page» vous donne cette possibilité. Vous pouvez alors spécifier le titre et le nom de fichier de la page, puis la créer (sur le disque local) : Second cas - La page destinataire existe Il faut qu elle soit présentement ouverte dans FrontPage, car dans le volet «Ouverture des pages» il ne vous listera que celles qui le sont : Vous pouvez, par la commande Fichier, Enregistrer tout, sauvegarder d un coup toutes les pages modifiées. Page contenant le lien Page cible du lien

Vous pouvez alors spécifier le titre et le nom de fichier de la page, puis la créer (sur le disque local) : Second cas - La page destinataire existe Il faut qu elle soit présentement ouverte

12 Créer un lien Le lien est créé, de la même façon sur une image Créer ou un sur liendu texte. Vous pouvez maintenant : Revenir sur les propriétés du lien (clic droit + «Suivre le lien» ou bien Ctrl + clic), y compris le supprimer. Vous pouvez circuler dans l historique des liens suivis grâce aux boutons «Précédente» et «Suivante» de la barre d outils standard (raccourcis clavier Alt+flèches gauche ou droite ).

13 Tableaux - Réorganisation Le menu Tableaux permet - Réorganisation toutes sortes de réorganisations des cellules d un tableau. Ajout de lignes ou de colonnes : un tableau créé peut à tout moment évoluer en fonction des données que nous avons à insérer. Ajout d'une cellule dans le tableau : au lieu d'une colonne ou d'une ligne entière de cellules, on peut être amené à n'ajouter qu'une seule cellule, ce que permet très simplement le logiciel. Réunion de deux ou de plusieurs cellules d'un tableau, ou bien partage en deux ou plus, verticalement ou horizontalement, d'une cellule donnée. Ajout d'une légende au tableau réalisé. Pour fusionner des cellules, il faut avoir fait un clic dans la première, et Shift + clic dans la dernière. On peut aussi pointer une ligne ou une colonne :

Ajout d'une cellule dans le tableau : au lieu d'une colonne ou d'une ligne entière de cellules, on peut être amené à n'ajouter qu'une seule cellule, ce que permet très simplement le logiciel.

14 Liens vers une adresse mail Il vous faut pour cela sélectionner, dans le volet «World Wide Web» de la fenêtre de définition de Liens vers une adresse mail lien, le type de lien «mailto» : Puis saisir l adresse mail du destinataire : Le texte du lien devant commencer par l instruction HTML mailto:

adresse mail lien, le type de lien «mailto» : Puis saisir l adresse mail

trouvent les mises à jour récentes du site. Ajoutons un nouveau lien Web, par exemple, dans la page Sites.

15 Liens vers un endroit précis d une page Ajoutons un lien Nouveautés dans le tableau de la page d accueil. Celui-ci sera Liens chargé vers d emmener un endroit les précis d une page visiteurs vers les endroits des pages où se trouvent les mises à jour récentes du site. Ajoutons un nouveau lien Web, par exemple, dans la page Sites. Puis, définissons un signet par Edition, Signet à cet emplacement précis. Le lien «Nouveau» peut maintenant pointer vers ce signet précisément.

Certains logiciels, comme PaintShop Pro, prennent en charge l optimisation des images pour le Web Ici, on a aussi spécifié une épaisseur de bordure et un espacement

16 Documents téléchargeables Dans une page «Photographies des Ardennes» on propose au visiteur de parcourir quelques prises de vue. Afin de faciliter son choix, des Documents vignettes téléchargeables sont d abord proposées. Images réduites, indicatives, GIF ou JPEG fortement compressé. Certains logiciels, comme PaintShop Pro, prennent en charge l optimisation des images pour le Web Ici, on a aussi spécifié une épaisseur de bordure et un espacement autour de l image. Sur chaque image, il est possible de créer un lien vers le fichier de l image originale Le type de lien à choisir sera «(autre)» et il faudra indiquer dans la zone «URL» le chemin et le nom du fichier à télécharger.

Documents pareils

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte