SIN 1/8
SITE WEB STI2D – PARTIE 1
1. Introduction, à la problématique
En fin de seconde, tout élève doit faire des vœux d'orientation. Filière L ? S? ES? Le choix est large
et il n'est pas facile pour certains de savoir ce qui leur conviendra le mieux pour la suite.
De même, chaque lycée ayant besoin de "remplir" ses sections, il est important pour eux de faire
connaitre les différentes spécialités qu'ils offrent. Ainsi, chaque année, le lycée Condorcet de
Montreuil, comme tous les autres lycées, organise une journée "portes ouvertes".
Constatant tous les ans que certains élèves potentiellement intéressés par les filières du lycée ne
peuvent se déplacer lors de cette journée, la direction du lycée a décidé de diversifier les actions
d'information. Ainsi s'est posé la problématique de :
Comment informer les élèves de 3ème et de 2nde sur ce qu'est la STI2D,
notamment au lycée Condorcet de Montreuil ?
2. Présentation du projet
Après une concertation avec les enseignants, il a été décidé, pour toucher le plus grand nombre, que
chaque section et/ou filière du lycée crée un mini-site Web vers lequel on pourra être redirigé depuis
la page officielle du lycée.
Concernant la filière STI2D, il a été confié aux élèves de SIN de réaliser ce site. Le plan de ce
dernier ainsi que son contenu ont été réalisé par l'équipe enseignante et sont fournis aux élèves sous la
forme :
D'un document pdf comprenant :
Le plan du site représentant les liens de navigation entre les pages.
L'aperçu de ce qu'on doit obtenir à la fin du TP pour chaque page. Notons que les pages de
la partie Itec n'ont pas été mises car elles sont similaires aux pages équivalentes de Sin.
Les photos et images nécessaires.
Les fichiers contenant, pour chaque page, le texte (titres, paragraphes…) à inclure.
Lycée Condorcet Projet site STI2D
, SIN 2/8
3. Activités
Lire et faire les exercices du cours-TP sur le Html5.
3.1.Préliminaires
Créer un répertoire "ProjetSiteSti2d" dans le répertoire "Sin" de votre espace de travail.
Y copier/coller les fichiers '.txt' fournis.
Créer un répertoire "data" dans le répertoire "ProjetSiteSti2d".
Y copier/coller les fichiers images ('.png', '.jpeg' et '.gif') fournis.
Ne manque plus, pour pouvoir commencer, que les diagrammes "camembert" représentant les
résultats des deux sections lors des 3 dernières années.
A partir des chiffres des résultats au bac fournis sur le site du lycée, créer pour chaque section
les "camemberts" de réussite des 4 dernières années :
Soit sous Excel ou Openoffice/Calc.
Soit sur un site en ligne tel que http://www.scriptol.fr/html5/canvas/diagramme.php ou
http://www.chartgo.com/index.jsp.
Stocker les 8 camemberts dans votre dossier "data" sous les noms annéeSpé (par ex 1789Sin).
Pour chacune des pages en annexe :
Repérer et annoter les éléments titres 1, titres 2, paragraphes, listes et tableaux.
Repérer les images et noter leur nom (sans oublier l'extension).
Entourer le texte mis en valeur par les balises i, b et mark en précisant le type à côté.
3.2.Créations des pages
Les éléments des différentes pages étant les uns sous les autres, la création de celles-ci ne nécessite
pas de commentaires particuliers si ce n’est que :
Le positionnement des photos de la page index avec le texte à coté se fait par 2 tableaux de
(1 ligne*2 colonnes) sans bordure.
Le positionnement des tableaux « centrés », la modification de la couleur du fond et l’ajout de
bordures se font en ajoutant des propriétés qui existaient en Html4 mais qui ne sont plus
supportées en Html5.
align="left,center,right" permet de positionner le tableau et/ou le texte dans les cellules.
bgcolor="lightblue" définit la couleur de fond de la cellule en bleu ciel. De très
nombreuses couleurs prédéfinies existent et sont disponibles en cherchant 10’’ sur google.
border="0,1" permet de préciser s’il y a une bordure ou pas.
Les photos des pages d'accueil Sin et Itec ont une hauteur de 300px (pixels).
Certains éléments se retrouvant sur différentes pages, il est conseillé de copier-coller…
Enfin, on vous laisse trouver comment regrouper deux cellules d’un tableau en html…
Bon, si le contenu du site que nous avons créé est satisfaisant, la présentation elle est vraiment
inexistante. La problématique est donc celle-ci :
Comment mettre en valeur le contenu d'un site web ?
Lire et faire les exercices du cours-TP sur le Css3.
Lycée Condorcet Projet site STI2D
SITE WEB STI2D – PARTIE 1
1. Introduction, à la problématique
En fin de seconde, tout élève doit faire des vœux d'orientation. Filière L ? S? ES? Le choix est large
et il n'est pas facile pour certains de savoir ce qui leur conviendra le mieux pour la suite.
De même, chaque lycée ayant besoin de "remplir" ses sections, il est important pour eux de faire
connaitre les différentes spécialités qu'ils offrent. Ainsi, chaque année, le lycée Condorcet de
Montreuil, comme tous les autres lycées, organise une journée "portes ouvertes".
Constatant tous les ans que certains élèves potentiellement intéressés par les filières du lycée ne
peuvent se déplacer lors de cette journée, la direction du lycée a décidé de diversifier les actions
d'information. Ainsi s'est posé la problématique de :
Comment informer les élèves de 3ème et de 2nde sur ce qu'est la STI2D,
notamment au lycée Condorcet de Montreuil ?
2. Présentation du projet
Après une concertation avec les enseignants, il a été décidé, pour toucher le plus grand nombre, que
chaque section et/ou filière du lycée crée un mini-site Web vers lequel on pourra être redirigé depuis
la page officielle du lycée.
Concernant la filière STI2D, il a été confié aux élèves de SIN de réaliser ce site. Le plan de ce
dernier ainsi que son contenu ont été réalisé par l'équipe enseignante et sont fournis aux élèves sous la
forme :
D'un document pdf comprenant :
Le plan du site représentant les liens de navigation entre les pages.
L'aperçu de ce qu'on doit obtenir à la fin du TP pour chaque page. Notons que les pages de
la partie Itec n'ont pas été mises car elles sont similaires aux pages équivalentes de Sin.
Les photos et images nécessaires.
Les fichiers contenant, pour chaque page, le texte (titres, paragraphes…) à inclure.
Lycée Condorcet Projet site STI2D
, SIN 2/8
3. Activités
Lire et faire les exercices du cours-TP sur le Html5.
3.1.Préliminaires
Créer un répertoire "ProjetSiteSti2d" dans le répertoire "Sin" de votre espace de travail.
Y copier/coller les fichiers '.txt' fournis.
Créer un répertoire "data" dans le répertoire "ProjetSiteSti2d".
Y copier/coller les fichiers images ('.png', '.jpeg' et '.gif') fournis.
Ne manque plus, pour pouvoir commencer, que les diagrammes "camembert" représentant les
résultats des deux sections lors des 3 dernières années.
A partir des chiffres des résultats au bac fournis sur le site du lycée, créer pour chaque section
les "camemberts" de réussite des 4 dernières années :
Soit sous Excel ou Openoffice/Calc.
Soit sur un site en ligne tel que http://www.scriptol.fr/html5/canvas/diagramme.php ou
http://www.chartgo.com/index.jsp.
Stocker les 8 camemberts dans votre dossier "data" sous les noms annéeSpé (par ex 1789Sin).
Pour chacune des pages en annexe :
Repérer et annoter les éléments titres 1, titres 2, paragraphes, listes et tableaux.
Repérer les images et noter leur nom (sans oublier l'extension).
Entourer le texte mis en valeur par les balises i, b et mark en précisant le type à côté.
3.2.Créations des pages
Les éléments des différentes pages étant les uns sous les autres, la création de celles-ci ne nécessite
pas de commentaires particuliers si ce n’est que :
Le positionnement des photos de la page index avec le texte à coté se fait par 2 tableaux de
(1 ligne*2 colonnes) sans bordure.
Le positionnement des tableaux « centrés », la modification de la couleur du fond et l’ajout de
bordures se font en ajoutant des propriétés qui existaient en Html4 mais qui ne sont plus
supportées en Html5.
align="left,center,right" permet de positionner le tableau et/ou le texte dans les cellules.
bgcolor="lightblue" définit la couleur de fond de la cellule en bleu ciel. De très
nombreuses couleurs prédéfinies existent et sont disponibles en cherchant 10’’ sur google.
border="0,1" permet de préciser s’il y a une bordure ou pas.
Les photos des pages d'accueil Sin et Itec ont une hauteur de 300px (pixels).
Certains éléments se retrouvant sur différentes pages, il est conseillé de copier-coller…
Enfin, on vous laisse trouver comment regrouper deux cellules d’un tableau en html…
Bon, si le contenu du site que nous avons créé est satisfaisant, la présentation elle est vraiment
inexistante. La problématique est donc celle-ci :
Comment mettre en valeur le contenu d'un site web ?
Lire et faire les exercices du cours-TP sur le Css3.
Lycée Condorcet Projet site STI2D
