Création d’un site web statique avec front page 2003

2. Création d’un site
web
Jihen damerji toumi

3. Notion de site web
Est un ensemble de fichiers HTML,
liés par des liens hypertextes,
stockés sur un serveur web, c'est-à-
dire un ordinateur connecté en
permanence à internet, hébergeant
les pages web.

4. 1. En éditant les fichiers HTML « à la main », c'est-à-
dire en saisissant le code HTML dans un fichier texte à
l'aide d'un simple éditeur de texte.
2. En Utilisant un éditeur HTML WYSIWYG (What You
See Is What You Get,): Il s'agit d'un logiciel
(exemple:Dreamweaver,Nvu,FrontPage,etc)
permettant de créer des pages web visuellement en
plaçant des objets et des contrôles. Le logiciel se
charge de générer le code HTML automatiquement
Il existe deux façons de créer ce type de
fichier :

5. Démarrage de Microsoft FrontPage
Lancer Microsoft FrontPage
Une page vide se lance automatiquement
Commencer l’insertion des informations.

6. Trois onglets sont sur le bord inférieur :
• NORMAL : Mode création pour insérer les informations avec divers
formats.
• HTML: Hypertext Markup Language : Langage de commandes
permettant d’inclure des attributs de texte, d’insérer des
différents formats d’information et des liens dans un document
Web.
• APERCU : Active un mode d’affichage qui présente la page sous un
aspect identique à celui qu’elle aurait dans le navigateur.

7. Activité:3P116

8. Activité:3P116 q1
1. Enregistrement
1)Menu Fichier.
2)Ouvrir le chemin d’accès de l’emplacement où on va
créer le dossier qui va contenir les pages à créer.
3)Créer le dossier avec le bouton Nouveau Dossier puis
(taper son nom)
4)Ouvrir le nouveau dossier dans le champs ‘ Dans : ‘
5)Saisir le nom de la page.
6)Cliquer sur le bouton ‘Enregistrer’

9. Activité:3P116 q2
2. Mise en forme d’un texte ou d’un paragraphe
1)Sélectionner le texte ou le paragraphe à mettre en forme
2)Appliquer un style (Gras, Italique, Souligné) ou un
alignement.
3)Agrandir ou rétrécir (éventuellement) la taille du texte
Ou
Cliquer le Menu FORMAT et choisir l’option POLICE

10. Activité:3P116 q3
3. Insertion d’une image :

11. 1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion.
3)cliquer sur Images (a partir du fichier/image
clipArt)
4)indiquer le chemin de recherche de l’image (disque
dur, Disquette)
5)valider l’insertion de l’image en cliquant sur Insérer.

12. 4. Insertion d’un fichier :
1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion.
3)cliquer sur fichier
4)indiquer le chemin de recherche de fichier (disque dur,
Disquette etc) ainsi que le type du fichier à insérer
5)valider l’insertion du fichier en cliquant sur ouvrir après
avoir sélectionner le nom du fichier.

13. 5. Insertion d’un symbole :

14. Activité:3P116 q4
6.Insertion d'une ligne horizontal:
1)se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur Insertion puis
choisisser la commande trait horizontal.

15. Activité:3P116 q5
7.Insertion d'un tableau:
1)Se positionner à l’endroit d’insertion
2)cliquer dans la barre de menu sur
Tableau.
3)cliquer sur Insérer.
4)Spécifier le nombre de lignes et de
colonnes.
5)Spécifier l'alignement, bordures et la
taille (en pourcentage ou en pixels).

16. Activité:3P116 q6
8.Listes numérotées et puces:
1)Sélectionner le texte ou le paragraphe à mettre sous
forme d’une liste
2)Activer le menu format puis la commande puces et
numéro
3)Choisir le type de la liste(numérotation ou puces)

17. Activité:3P116 q8
9.Insertion d’une couleur,
image ou thème d’Arrière Plan :
1)Cliquer dans le menu Format.
2)Choisir l’option Thème ou Arrière Plan.
3)Choisir un thème dans la liste des thèmes
affichés, dans l’autre cas choisir une couleur
dans la liste des couleurs ou une image
d’Arrière Plan en indiquant le chemin d’accès
du fichier image.

18. Activité:3P116 q9;10;11;12;13
10. Insertion d’un lien hypertexte :
Un lien hypertexte est une marque spéciale
représentant une URL d’une page Web cible qui
s’affiche en cliquant sur ce lien.
Les liens sont deux types : internes ou externes par
rapport à la page actuelle.

19. A. insertion d’un lien hypertexte
externe:
1)Sélectionner le texte du lien
2)Cliquer Menu Insertion puis l’option Lien hypertexte.
3)Choisir le fichier qui sera la cible du lien ou saisir url
s il s'agit d »un site web

20. Activité:3P116 q14
B. Lien interne:
1ere étape : Insertion d’un signet
1)Sélectionner le mot du signet
2)Cliquer Menu Insertion puis l’option Signet.
3)Dans la boite de dialogue qui s’affiche spécifier le nom
du signet.
4)Cliquer OK pour qu’il s’ajoute à la liste.

21. 1)Sélectionner le texte ou
l’objet (marqueur du lien
qui peut être une image
ou un graphique comme
un bouton) du lien
2)Cliquer Menu Insertion puis l’option Lien hypertexte.
4)Dans la boite de dialogue choisir le signet correspondant
dans le champs Signet et confirmer dans le champs des
signets.
5)Cliquer Ok.
2ere étape : Liens internes vers le
signets :

22. 11. Insertion d'un texte défilant:

23. • Se positionner à l’emplacement d’insertion
• Cliquer Menu Insertion puis l’option
Composant Web.
• Choisir dans la fenêtre effets dynamique
l'option texte défilant.
• Saisir le texte et appuyer sur OK.

24. 12,Insertion d'un bouton sensitif:
• Se positionner à l’emplacement d’insertion
• Cliquer Menu Insertion puis l’option bouton interactif.
Saisir le texte du bouton

25. 13.Transition de page
1.Choisir le menu format
2.Choisir la commande transition de page
3. Sélectionner un effet de transition
4.Sélectionner un événement
5.Choisir la durée

26. 14.Bordure et trame:
choisir le menu format+ la commande bordure
et trame