sharepoint designer 2007 en français

Pour installer à la maison le même logiciel d'aide à la conception de pages web qu'à l'école, téléchargez gratuitement SharePoint Designer 2007. N'oubliez pas de choisir la langue : en français ! ;-)

bac 2015 : jour j-6

Téléchargez :

• le fichier tournesol.html
• le texte source tournesol.txt
• l'image tournesol_spi.gif

Instructions :

Vous devez réaliser un petit site internet de deux pages qui présente la relation entre le nombre d'or et la fleur de tournesol. Vous disposez d'un premier fichier "tournesol.html" qui contient un tableau et une image (dessinée via un code Javascript, visible seulement dans le navigateur). Il faudra compléter ce fichier, et créer un second à partir de celui-ci.

1. Modifiez le fichier "tournesol.html" :
   1. le titre visible dans la barre de titre du navigateur est : "Tournesol et nombre d'or" ; la couleur de fond de la page est Tollens Tournseol, de code RVB #FAB257 ; les liens dans tous leurs états sont bleus de code #0B00FF
   2. le fond du tableau doit être blanc, il doit être centré sur la ligne, avoir une fine bordure extérieure noire ; ses 1re et 3e colonnes mesurent 100 pixels de large
   3. fusionnez les trois cellules de la première ligne, et tapez le titre de niveau 1 : "Dessiner la fleur de tournesol"
   4. dans la cellule en bas au milieu, collez le texte "En utilisant ... naturelles." dans un paragraphe justifié
   5. dans la cellule en bas à droite, tapez le texte "plus d'explications" dans un paragraphe centré (aligné en bas de la cellule) ; ce texte devra être transformé en lien hypertexte vers la deuxième page du site : "spirale-or.html"
2. À partir du fichier "tournesol.html", créez un fichier "spirale-or.html" :
   1. le titre de la fenêtre, les couleurs et le tableau sont identiques à ceux de la page "tournesol.html"
   2. le titre de niveau 1 est : "Spirale d'or" ; sous le titre, dans un paragraphe centré et en italique, tapez les dix premiers termes de la suite de Fibonacci
   3. dans la cellule centrale du tableau, effacez le canevas (balise <canvas>) et disposez le texte dans des paragraphes et une liste à puces selon le modèle
   4. dans la cellule du bas, insérez l'image "tournesol_spi.gif" au centre
   5. en bas à droite un lien hypertexte "fleur de tournesol" doit pointer vers le fichier "tournesol.html"

Modèles :

• Tournesol et nombre d'or

Sources :

• Whatever · Maths (2) dessiner la fleur du tournesol, http://hyperbate.fr/whatever/2010/02/28/maths-2-dessiner-la-fleur-du-tournesol/, consulté le 9 mai 2015
• Le nombre d'or, http://therese.eveilleau.pagesperso-orange.fr/pages/truc_mat/textes/nature_dor.htm, consulté le 9 mai 2015

mh370

Le 8 mars 2014, un avion parti de Kuala Lumpur (Malaisie) à destination de Pékin (Chine) disparaît. Dix jours plus tard, on ne sait toujours pas ce qu'est devenu l'avion. Préparez un petit site web de deux pages qui présente un résumé de l'affaire.

Téléchargez :

• les instructions
• le texte source
• l'image ci-dessous

Solution :

Ouvrez le site, et faites un clic à droite "Afficher la source" pour voir le code HTML.

css

La documentation est ici.

mh370

Le 8 mars 2014, un avion parti de Kuala Lumpur (Malaisie) à destination de Pékin (Chine) disparaît. Dix jours plus tard, on ne sait toujours pas ce qu'est devenu l'avion. Préparez un petit site web de deux pages qui présente un résumé de l'affaire.

Téléchargez :

• les instructions
• le texte source
• l'image ci-dessous

Solution :

Ouvrez le site, et faites un clic à droite "Afficher la source" pour voir le code HTML.

handball

Créez un petit site internet de 3 pages qui présente brièvement le championnat du monde de handball 2013.

Pour voir la solution, cliquez ici.

Téléchargez :

• les instructions
• le texte source
• toutes les images ci-contre et ci-dessous

bac : jour j-9

Instructions :

1. Créez deux pages web : jour-j-9-a.html et jour-j-9-b.html.
2. Le titre qui doit être visible dans la barre du navigateur : "Jour J-9 par xxx" (où xxx est votre prénom).
3. Pour les deux pages, les couleurs sont : vert foncé (#81741C) pour l'arrière-plan, orange clair (#FCB132) pour le texte, vert clair (#C3C95B) pour les liens hypertextes dans tous leurs états.
4. jour-j-9-a.html :
   • Tapez le titre de niveau 1 "Bac info" et centrez-le.
   • Créez un tableau de deux lignes et deux colonnes centré, largeur du tableau 50% de l'écran, colonnes de même largeur, marges intérieures des cellules 3 points, espacement entre les cellules 3 points, bordure de 3 pixels vert clair (voir code ci-dessus).
   • Dans la première ligne, tapez le texte "Mardi 21 mai 2013" dans la cellule de gauche, et appliquez-lui le style de titre de niveau 2 ; dans la cellule de droite, insérez l'image jour-j-9.png et alignez-la à droite dans la cellule.
   • Fusionnez les deux cellules de la seconde ligne, ajoutez une fine bordure orange clair, et tapez le texte "Plus d'informations..." dans un paragraphe centré. Ce texte est un lien vers la deuxième page.
5. jour-j-9-b.html :
   • Tapez le titre de niveau 1 "Plus d'infos..." et centrez-le.
   • Créez un tableau d'une ligne et deux colonnes centré, largeur du tableau 500 pixels, colonnes de même largeur, marges intérieures des cellules 3 points, espacement entre les cellules 3 points, bordure de 3 pixels vert clair, arrière-plan orange clair.
   • Insérez l'image jour-j-9.png au centre de la cellule de gauche ; si l'on clique sur cette image, on revient à la première page du site.
   • Tapez le texte "Cliquez sur l'image pour revenir à l'accueil" dans un paragraphe au centre de la cellule de droite ; faites-le apparaître en noir.

Modèle :

• Cliquez ici pour voir le résultat.

Bíró László

Téléchargez :

• les instructions
• le texte source (et ouvrez-le avec le bloc-notes !!!)
• les images (clic normal pour ouvrir en grand, puis clic à droite, "enregistrer l'image sous...")

Windows Phone

Voici exercice en HTML pour préparer le test de la semaine prochaine : il faut utiliser toutes les balises que nous avons déjà étudiées...

N'oubliez pas les quelques idées très importantes quand vous construisez une page HTML :

1. enregistrez tout de suite votre fichier .html dans le même dossier que les images
2. ne confondez pas : nom du fichier (exercice-01.html), titre du navigateur (Windows Phone - par xxx) et titre de la page (Windows Phone passe la barre...)
3. choisir le type d'élément (paragraphe, titre, liste, image, ...) et ensuite copier le contenu (ne copiez pas tout le texte source au début !! un élément à la fois !!)

Téléchargez :

• les instructions
• le texte source
• l'image ci-dessus

Modèle :

Solution : windows-phone-solution.html (clic à droite et "Afficher la source" pour voir le code, ou télécharger le fichier html pour l'ouvrir avec votre éditeur)

le handball

Créez un petit site internet de 3 pages qui présente brièvement le championnat du monde de handball 2013.

Pour voir la solution, cliquez ici.

Téléchargez :

• les instructions
• le texte source
• toutes les images ci-contre et ci-dessous

l'homme préhistorique

Créez deux pages web reliées entre elles pour présenter en quelques mots l'homme préhistorique. Il s'agit des questions du bac d'informatique en français de 2005 ; attention au vocabulaire qui n'est pas toujours très précis dans les instructions :

• explorateur --> navigateur (Internet Explorer, Firefox, Google Chrome, Opera, Safari, ...)
• cadre d'épaisseur d'un point --> bordure d'un pixel d'épaisseur
• hypertexte, hyperlink --> lien hypertexte

Téléchargez :

• les instructions avec modèle
• le texte source
• les 4 images ci-contre

l'histoire des jeux électroniques

Dans cet exercice (tiré du bac d'informatique d'automne 2011 - niveau moyen), vous devez créer un petit site internet de 4 pages présentant une brève histoire des jeux électroniques.

Cependant, avant de commencer à concevoir les pages web, vous devrez redimensionner certaines images (de façon proportionnelle !) au moyen d'un logiciel de dessin (Paint suffit ;))

Pour être plus efficace et gagner du temps, réalisez le plus correctement une page, avant d'en faire 3 copies : beaucoup d'éléments sont en effet identiques sur les 4 pages !

Téléchargez :

• les instructions
• le texte source et les images (au format .zip, à décompresser avant d'utiliser ;))

Source :

• Oktatási Hivatal - Informatika francia nyelven - Középszintű gyakorlati vizsga, 21 octobre 2011

Windows Phone

Voici un premier exercice en HTML, que nous avions déjà fait avec le bloc-notes et les balises, et que nous allons maintenant faire avec le programme SharePoint Designer.

N'oubliez pas les quelques idées très importantes quand vous utilisez ce programme :

1. enregistrez tout de suite votre fichier .html dans le même dossier que les images
2. ne confondez pas : nom du fichier (exercice-01.html), titre du navigateur (Windows Phone - par xxx) et titre de la page (Windows Phone passe la barre...)
3. choisir le type d'élément (paragraphe, titre, liste, image, ...) et ensuite copier le contenu (ne copiez pas tout le texte source au début !! un élément à la fois !!)

Téléchargez :

• les instructions
• le texte source
• l'image ci-dessus

Modèle :

Solution : windows-phone-solution.html (clic à droite et "Afficher la source" pour voir le code, ou télécharger le fichier html pour l'ouvrir avec votre éditeur)

SharePoint Designer

Pour installer à la maison le même logiciel d'aide à la conception de pages web qu'à l'école, téléchargez gratuitement SharePoint Designer 2007. N'oubliez pas de choisir la langue : en français ! ;-)

devoir-02

Devoir facultatif à renvoyer pour dimanche 27 mai 2012 :
- l'exercice ci-dessous (foot) ET...
- l'exercice-11 (médailles) OU l'exercice-12 (papillons).

Samedi, c'était la grande finale de l'UEFA Champions League ! Réalisez un petit site web de 3 pages qui présente le match et les deux équipes.

Créez la page finale.html (titre à voir dans le navigateur : "Finale de l'UEFA Champions League") en respectant les instructions suivantes :

1. le fond de la page est bleu nuit : #000D53, le texte et les liens hypertextes sont blancs
2. le premier titre est de niveau 1, le deuxième de niveau 2 et le troisième de niveau 3 ; ils sont tous centrés et il faut les taper ;)
3. insérez les deux petites images à côté du nom des équipes
4. le nom de chaque équipe est un lien hypertexte qui pointe vers une page de présentation : bayern.html et chelsea.html

Les deux pages bayern.html et chelsea.html suivent le même modèle ; le texte source est disponible dans ce fichier texte à télécharger (encodage : UTF-8) :

1. les couleurs d'arrière-plan, de texte et des liens hypertextes sont les même que ceux de la page finale.html
2. le titre est de niveau 1, centré ; c'est le même titre qui doit apparaître dans la fenêtre du navigateur
3. insérez un tableau de 2 lignes et 2 colonnes (largeur 700 pixels, hauteur automatique, sans bordure, marge intérieure des cellules de 5 pixels, espacement entre les cellules de 15 pixels) ; fusionnez les deux cellules de la première pour insérer au centre la photo de l'équipe (avec une bordure blanche de 3 pixels) et le premier paragraphe (sans espace, centré, juste sous la photo) ; copiez-collez les deux paragraphes (justifiés) dans les deux cellules (de largeur identique) de la deuxième ligne
4. insérez un lien hypertexte sur la photo : si on clique dessus, on revient à la page finale.html

Modèle : cliquez ici pour voir le petit site en vrai (on peut cliquer sur les liens hypertextes)

Important :

• utilisez absolument toujours, pour les images et pour les liens hypertextes, des adresses relatives !!
• ça veut dire que vous devez créer un dossier sur le disque dur de votre ordinateur, où on trouvera les 3 fichiers .html et les 4 images ; dans les balises img et a, les champs src et href ne doivent contenir que le nom du fichier source ou cible !!

Source : UEFA Champions League - Finale - UEFA.com, consulté le 14 mai 2012

html-exercice-12

Préparez deux pages web qui présentent les papillons de jour et de nuit !

Téléchargez :

• les instructions (avec modèle)
• le fichier ejjeli.html (à modifier)
• le texte source
• les images ci-contre

html-exercice-11

Voici un exercice que vous pouvez réaliser avec le programme SharePoint Designer, ou un autre programme de votre choix... Téléchargez :

• les instructions (avec modèle)
• le texte source
• les images ci-contre

installer sharepoint designer en français

Pour télécharger et installer le même programme de création de pages web qu'au lycée, c'est ici : Microsoft Office SharePoint Designer 2007 (FR)

N'oubliez pas de bien choisir la langue en français ! ;-)

bac info : devoir-11

Samedi, c'est la grande finale de l'UEFA Champions League ! Réalisez un petit site web de 3 pages qui présente le match et les deux équipes.

Créez la page finale.html (titre à voir dans le navigateur : "Finale de l'UEFA Champions League") en respectant les instructions suivantes :

1. le fond de la page est bleu nuit : #000D53, le texte et les liens hypertextes sont blancs
2. le premier titre est de niveau 1, le deuxième de niveau 2 et le troisième de niveau 3 ; ils sont tous centrés et il faut les taper ;)
3. insérez les deux petites images à côté du nom des équipes
4. le nom de chaque équipe est un lien hypertexte qui pointe vers une page de présentation : bayern.html et chelsea.html

Les deux pages bayern.html et chelsea.html suivent le même modèle ; le texte source est disponible dans ce fichier texte à télécharger (encodage : UTF-8) :

1. les couleurs d'arrière-plan, de texte et des liens hypertextes sont les même que ceux de la page finale.html
2. le titre est de niveau 1, centré ; c'est le même titre qui doit apparaître dans la fenêtre du navigateur
3. insérez un tableau de 2 lignes et 2 colonnes (largeur 700 pixels, hauteur automatique, sans bordure, marge intérieure des cellules de 5 pixels, espacement entre les cellules de 15 pixels) ; fusionnez les deux cellules de la première pour insérer au centre la photo de l'équipe (avec une bordure blanche de 3 pixels) et le premier paragraphe (sans espace, centré, juste sous la photo) ; copiez-collez les deux paragraphes (justifiés) dans les deux cellules (de largeur identique) de la deuxième ligne
4. insérez un lien hypertexte sur la photo : si on clique dessus, on revient à la page finale.html

Modèle : cliquez ici pour voir le petit site en vrai (on peut cliquer sur les liens hypertextes)

Important :

• utilisez absolument toujours, pour les images et pour les liens hypertextes, des adresses relatives !!
• ça veut dire que vous devez créer un dossier sur le disque dur de votre ordinateur, où on trouvera les 3 fichiers .html et les 4 images ; dans les balises img et a, les champs src et href ne doivent contenir que le nom du fichier source ou cible !!
• si vous souhaitez une correction, envoyez tout le dossier au prof ;)

Source : UEFA Champions League - Finale - UEFA.com, consulté le 14 mai 2012

html : 5 exercices

Avec un bloc-notes et un navigateur, on peut déjà créer des pages web. Voici les quelques petits exercices faits à l'école, et que vous pouvez refaire à la maison.

Télécharger :

• texte exercices-02-03

Exercice-02 :

• titre de la page
• styles titre 1 et titre 3
• liste à puces
• gras et italique
• alignement
• solution (clic normal pour ouvrir, puis clic à droite, afficher la source)

Exercice-03 :

• couleurs (jaune (fond) : RVB(255, 204, 68) / gris (texte) : RVB(152, 118, 84) / blanc (sous-titre) : RVB(255, 255, 255))
• solution (clic normal pour ouvrir, puis clic à droite, afficher la source)

Exercice-04 :

• insérer une image
• solution (clic normal pour ouvrir, puis clic à droite, afficher la source)

Exercice-05 :

• insérer un lien hypertexte
• solution (clic normal pour ouvrir, puis clic à droite, afficher la source)