doccreation site NVU
download 
Plainte Transcription
creation site NVU
0 Création d’une rubrique du Site Web de l’établissement. 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 ) 1 Création d’une rubrique du Site Web de l’établissement. 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 2 3°) Création de la page menu. 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 b) Modifier la taille, la couleur des textes. Accueil c) Sélectionner de accueil jusqu’au dernier élément. Format Liste numérotation La mesure du temps Le Vélo Se déplacer sur l’eau Conserver les aliments d) -Ajouter un ( les éléments du menu sont à actualiser en fonction des pages devant être réalisées) 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);"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <big><big><big><big><big><big =""> Histoire des techniques</big></big></big></big></big></big><br> </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> <br> <br> <big><big><big><big><big><big =""> <marquee>Histoire des techniques</marquee> </big></big></big></big></big></big><br> </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> <br> </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 » 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. ... 5
