Création d une rubrique du Site Web de l établissement. 0 Ouvrir la page Publisher contenant la famille concernant le jeu Besoin/objet technique et leur histoire que vous avez réalisé. Sélectionner la page Clic droit (menu contextuel) Choisir enregistrer en tant qu image (dans l onglet devoir )
Création d une rubrique du Site Web de l établissement. 1 1 ) Créer dans «mes documents» un dossier nommé site histoire des tech.. A l intérieur de ce dossier créer un dossier nommé articles. Copier le dossier «objets» présent sur le bureau et le coller dans dossier Site Histoire Tech. Nous obtenons donc l arborescence suivante: Site histoire des tech. Articles Objets papier.gif bleucla_004.jpg 2 ) Création de sa page spécifique. (calculer) Lancer le logiciel NVU (une page sans titre s affiche) a) Nommer cette page et l enregistrer Menu Fichier..Enregistrer sous Nom de la page: (calculer) Enregistrer dans: articles Nom du fichier: (le même que celui de la page) b) -En début de page écrire le titre voir exemple ci-contre augmenter la taille choisir la couleur des lettres centrer.. - Sous le titre Insérer la photo créée à partir du fichier publisher. Centrer - Il est possible de définir un fond de page. Format: couleurs et fond de page Parcourir, choisir un fond. -Sauvegarder -Visualiser le résultats * réduire le travail en cours * dans le dossier site histoire des techniques Lancer le fichier: Famille-calculer.html Histoire des techniques Famille Calculer
3 ) Création de la page menu. 2 ouvrir une nouvelle page. Menu fichier.nouveau Enregistrer sous nom de la page: menu Enregistrer dans : site histoire des tech. nom du fichier: menu a) Écrire: Sommaire Accueil La mesure du temps Le Vélo Se déplacer sur l eau Conserver les aliments ( les éléments du menu sont à actualiser en fonction des pages devant être réalisées) b) Modifier la taille, la couleur des textes. c) Sélectionner de accueil jusqu au dernier élément. Format Liste numérotation d) -Ajouter un fond de page Format...couleurs et fond de page Image de fond..parcourir choisir dans «objets» papier.gif e) Enregistrer et visualiser le résultat 4 ) Création d une page phototitre ouvrir une nouvelle page. Menu fichier.nouveau Enregistrer sous nom de la page: phototitre Enregistrer dans : site histoire des tech. nom du fichier: phototitre a) Définir un fond de page Format...couleurs et fond de page Image de fond..parcourir choisir dans «objets» plage 14[1].jpg b) Écrire le titre sur l image, au centre. Histoire des Techniques Modifier la taille, la couleur des textes.
c) Afficher le code source de la page: En bas de l écran clic sur «source» La page est écrite suivant une manière compréhensible par l utilisateur. Le logiciel traduit la page en un code spécial «html» appelé CODE SOURCE qui est reconnaissable par n importe quelle type de navigateur Internet, celui-ci retraduira la page pour la rendre compréhensible par le nouvel utilisateur. 3 Ci-dessous le code source de la page que vous venez de créer. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type"> <title>photo</title> </head> <body style="background-image: url(objet/plage14%5b1%5d.jpg);"> <big><big><big><big><big><big =""> Histoire des techniques</big></big></big></big></big></big> </body> </html> Pour donner un certain effet à la page que nous venons de créer, nous souhaitons que le titre ne soit pas fixe mais défilent de gauche à droite. Pour cela nous allons agir directement sur le Code source en encadrant le titre des balises suivantes: <marquee>titre</marquee> <big><big><big><big><big><big =""> <marquee>histoire des techniques</marquee> </big></big></big></big></big></big> </body> </html> Revenir à l affichage normal: Le titre a disparu... c est normal! d) Sauvegarder et vérifier le résultat.
5 ) Création de la page index ( à partir de laquelle l ensemble du site est structuré) 4 a) Ouvrir dans NVU nouveau (c est à dire une page vierge ) b) Afficher le Code source Sélectionner l ensemble de la page clic droit «copier» réduire la page NVU c) Ouvrir un document Bloc-note clic droit «coller» Ci-dessous le code source de la page en cours de création <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="content-type"> <title></title> </head> <body> </body> </html> Supprimer les éléments grisés et les remplacer par les éléments ci-dessous <frameset cols="260,*"> <frame src="menu.html" name="sommaire"> <frame src="phototitre.html" name="articles"> </frameset> Sauvegarder Fichier Enregistrer sous Enregistrer dans: site histoire des tech. nom du fichier: Index.html Ne jamais ouvrir un fichier index avec NVU pour le modifier. Réduire NVU et lancer index; vérifier le résultats. Si l affichage est incorrect: dans le navigateur menu page sélectionner «Afficher la source» vérifier le code source de la page, supprimer si nécessaire les éléments inutiles ( /par ) Revérifier et si problème appeler les secours.
Lancer NVU Fichier Ouvrir un fichier Sélectionner «menu» 5 Nous allons créer le lien permettant d afficher la page la mesure du temps ou autres Sélectionner la phrase: La mesure du temps ou autres Cliquer sur l icône LIEN Une fenêtre s affiche qu il va falloir renseigner. Dans Emplacement du lien : *Clic sur parcourir et choisir «La mesure du temps» *Dans cible: Clic: le lien doit s ouvrir Choisir «dans ce cadre» *Clic sur Édition avancée La fenêtre Éditeur des propriétés avancées s affiche Clic sur ( signifie emplacement) Dans la case valeur Remplacer _blank par le nom de l emplacement choisi C est a dire articles Ok Ok Sauvegarder et vérifier le résultat. Le fichier Index fixe la structure d affichage du site ainsi crée à priori il n est pas nécessaire de le retoucher. Par contre les fichiers du dossier articles comme le fichier menu peuvent être modifiés, complétés, améliorés, transformés, etc....