Technologie Projet 2 : « Création d’un site WEB : info-infox » 3ème Séquence n°5
C C RÉATION RÉATION ET ET PUBLICATION PUBLICATION DE DE LA LA PREMIÈRE PREMIÈRE INFORMATION INFORMATION 1 )
1 ) C C
OMMENTOMMENTCRÉERCRÉERLESLESPAGESPAGESDD’ ’
INFOINFO/ /
INFOXINFOXLa page d'accueil est déjà faite en script. Elle possède trois zones cliquables vers 3 pages :
• info1.html
• info2.html
• info3.html
Pour créer ces trois pages, nous allons utiliser un logiciel qui génère les scripts HTML à partir d'une interface ressemblant à un traitement de texte.
Ce type de logiciel s’appelle un logiciel « wysiwyg »
Que veut dire l'acronyme wysiwyg et donner sa traduction ?
Le logiciel wysiwyg que nous allons utiliser s'appelle « BlueGriffon »
2 )
2 ) A A
PPRENTISSAGEPPRENTISSAGEDD' '
UNUNLOGICIELLOGICIEL« «
WYSIWYGWYSIWYG» »
Ce type de logiciel est très simple d'utilisation. Vous pouvez apprendre à l'utiliser tout seul en essayant les fonctionnalités (son interface ressemble beaucoup à un traitement de texte).
2.1 )
2.1 ) CCRÉERRÉERUNEUNENOUVELLENOUVELLEPAGEPAGE : :
Activites.odt Collèges - Briançon 1/4
Technologie Projet 2 : « Création d’un site WEB : info-infox » 3ème Séquence n°5
2.2 ) Interface du logiciel en mode « Page Web » :
Cette interface permet de travailler comme sur un « traitement de texte » (c’est le principe wysiwyg).
=> On insère les images, les textes, etc... directement sur la page par le menu « Insertion ».
2.3 ) Interface du logiciel en mode « Code source » :
Cette interface permet de travailler comme dans le logiciel notepad++
On peut travailler alternativement dans les deux interfaces en fonction de ce que l’on veut faire.
Activites.odt Collèges - Briançon 2/4
Technologie Projet 2 : « Création d’un site WEB : info-infox » 3ème Séquence n°5
2.4 )
2.4 ) RREMARQUESEMARQUES TRÈSTRÈSIMPORTANTESIMPORTANTES
Le logiciel génère le script html en fonction de ce que vous lui demandez de placer dans la page (textes, images, etc.). Il faut donc qu'il sache où trouver les images pour les insérer dans la page.
Pour ne pas avoir de problème avec l'affichage des images, il fau dra obligatoirement :
1 Enregistrer toutes les images que vous voulez placer dans votre page dans le sous-dossier
« MonSiteWEB » AVANT de les insérer dans la page.
2 Le nom des fichiers (html ou images) ne doit pas comporter d'espace , de caractère accentués ni de caractères spéciaux.
Exemple : « Mon schéma génial.jpg » à remplacer par « Mon_schema_genial.jpg »
3 Sauvegarder votre fichier html (généré avec BlueGriffon) dans le sous-dossier « MonSiteWEB » AVANT d'insérer les images dans la page. Le plus simple est de le faire dès sa création.
4 Au moment de l’insertion d’une image il faut cocher « Rendre l’URL relative au document » pour que le script de la page aille chercher l’image dans le même dossier que la page WEB
2.5 )
2.5 ) AAIDESIDESÉVENTUELLESÉVENTUELLES
En cas de blocage, vous pouvez demander de l'aide à votre professeur ou aller sur internet (notamment sur le site d'aide suivant : http://www.bricabracinfo.fr/Details/fiches_bg.php ).
3 )
3 ) C C
ONTENUONTENUDEDELALAPAGEPAGECréez la page sur votre première information de votre site en respectant le cahier des charges suivant : Cette page devra :
• S'appeler « info1.html », pour correspondre au nom de la première zone cliquable de votre image.
• Contenir le texte suivant (au début de votre page) :
Les informations placées sur cette page font parties d’un projet scolaire appelé « Création d’un site WEB : info-infox ». Elles peuvent donc être, dans ce cadre, de vrais informations ou parfois de fausses informations. A vous de vous faire une idée...
• Intégrer les images, le texte et tous ce que vous désirez placer dans cette page d’info (ou infox).
• Utiliser des couleurs sur le fond et les textes.
• Et surtout, être la plus belle et professionnelle possible.
Activites.odt Collèges - Briançon 3/4
Validation du professeur :
Technologie Projet 2 : « Création d’un site WEB : info-infox » 3ème Séquence n°5
4 )
4 ) P P
UBLICATIONUBLICATIONLorsque votre page est terminée, il faut la placer sur internet. On appelle ça « publier » son site WEB.
Demandez à votre professeur de publier votre page sur l'espace d'hébergement réservé.
Votre site sera ensuite accessible sur le site WEB : http://techno.briancon.free.fr/ (dans la page
« Publication élèves » correspondante à votre établissement, votre classe et votre n° de binôme ou de poste)
Vérifiez que votre page s'affiche correctement et qu'il ne manque rien.
5 )
5 ) A A
JOUTJOUTDEDELALASÉQUENCESÉQUENCEÀÀVOTREVOTRECLASSEURCLASSEURNUMÉRIQUENUMÉRIQUEA la fin de chaque séquence, vous devrez intégrer votre fichier de la séquence finie (le fichier
« activites.odt » dans lequel vous avez travaillé) dans votre classeur numérique.
Pour cela vous devez :
• Générer un fichier PDF à partir de votre fichier traitement de texte (ce fichier).
• Intégrer cette séquence (le PDF que vous venez de générer) à votre classeur numérique déjà existant.
Pour vous aider, vous avez le fichier « FicheAideClasseurNumerique.pdf » présent dans la séquence 0 (ou au début de votre classeur numérique).
Activites.odt Collèges - Briançon 4/4
