Créer un site Web avec un style Css sous GoLive
Objectif de l'exercice
Ce travail doit permettre une initiation à la création d'un site Web avec l'utilisation de feuille de style en cascade. Il doit se terminer sur un travail finalisé.
Remarques pratiques
Les couleurs dans le corps du texte correspondent, sauf erreur, à ceci :
- en Noir aux noms de fichiers (sur le disque dur),
- en Pourpre, aux textes à saisir,
- en Marron, aux noms des menus et fenêtres des logiciels,
- les astérisques renvoient au lexique.
Pré-recquis
Avoir fait les deux exercices précédents.
1. Création du site
Importer depuis le dossier Australie
- Aller sur Fichier > Nouveau site...
- Vérifier que le bouton Utilisateur unique soit coché et aller sur Suivant.
- Cliquer sur Importer d'un dossier puis sur Suivant.
- Cliquer sur Parcourir pour aller pointer sur le dossier SiteAustralie. Si le dossier est bien fait et qu'il s'y trouve un fichier index.html, le logiciel va le reconnaître. Cliquer sur Suivant.
- Désigner l'endroit où GoLive va placer ses documents propres à la gestion du site.
- Cliquer sur Terminer.
GoLive va créer le site et l'ouvrir.
Il sera peut-être necessaire de faire deux chose en ouvrant les fichiers Html :
- Aller sur Fichier > Endodage du document > Occidental (ISO-8859-1).
- Aller sur Edition > Recréer le code source... GoLive vous fera un beau code source tout propre !
2. Création d'une feuille de style
- Ouvrir une page dans le site de GoLive. Faire un clic sur l'icône Ouvrir l'éditeur de style CSS située à droite de la page (elle ressemble à un escalier
.)
- Cliquer sur Créer un style de classe (le point •). Il ouvre un dossier Interne et propose un nom .class. Saisir GrandTitre.
- Aller dans l'Inspecteur Style CSS et lui attribuer...
Couleur : Purple
Corps : 18 points
Hauteur de ligne : Normal
Graisse : Gras - Cliquer sur Nouvelle police (en bas) et écire ou naviguer vers Verdana.
Recommencer pour Arial et Helvetica. - Enregistrer.
- Faire l'opération cinq fois pour…
Titre1
Couleur : Maroon
Corps : 14 points
Hauteur de ligne : Normale
Style : Normal
Graisse : Gras
Police : Verdana, Arial et Helvetica
Titre2
Couleur : Purple
Corps : 12 points
Hauteur de ligne : Normal
Style : Italique
Graisse : Gras
Police : Verdana, Arial et Helvetica
Normal
Couleur : Navy
Corps : 9 points
Hauteur de ligne : Normale
Style : Normal
Graisse : Normale
Police : Verdana, Arial et Helvetica
PetitTexte
Couleur : Blue
Corps : 8 points
Hauteur de ligne : Normale
Style : Normal
Graisse : Normale
Police : Verdana, Arial et Helvetica
Enregistrer. Aller dans la Source de la page et observer le résultat.
3. Exporter le style CSS
- Cliquer sur l'icône de flèche entourée d'un rond en haut et à droite de la feuille de style.
- Aller sur Exporter une feuille de style CSS interne...
- La placer dans le dossier Ressources et la nommer _styles.css afin qu'elle soit placée en haut du dossier.
4. Appliquer le style à vos pages
- Glisser-Déposer l'icône de la feuille de style externe sur l'icône de titre de la page Web
.
- Aller sur Fenêtre > CSS pour faire apparaître la fenêtre de style CSS.
- Sélectionner titres et paragraphe et cocher la case Par. du style désiré.
Sauvegarder
|
|
Pour sauvegarder le fichier : Enregistrer le document (sur le disque dur) puis sauvegarder le fichier sur une « Clef USB ». Ceci évite les pertes de données importantes. 1. Insérer une « clef USB » dans une prise USB de l'ordinateur. 2. Glisser l'icône du fichier du mémoire sur l'icône de la « porte-clef USB » (sur PC, aller dans le Poste de travail). 3. Éjecter le périphérique USB : • Sur Mac glisser-le vers la corbeille, elle se transforme en icône d'éjection  .• Sur P.C., cliquer sur la minuscule icône d'éjection située à droite dans la barre du bas :  ou  et attendre les instructions.
4. Mettre la « Clé Usb » en lieu sûr ! |
oOo