jeudi 5 mars 2009

 

     / Pratique-sitePerso /3_Presentation

Présentation du site

 

Présentation du site perso

Consignes

L'objectif de cette séance est que vous mettiez au point la présentation de votre site, en définissant ce qu'on appelle une feuille de style ("Cascading Style Sheets" en anglais). Une feuille de style est un fichier externe qui contient des informations vous permettant de communiquer au navigateur comment vous voulez qu'il présente les éléments HTML.

Cette feuille de style devra s'appliquer à toutes les feuilles d'index, présentes dans chaque dossier. En particulier, le dossier CV doit contenir un fichier d'index pour donner accès aux différentes versions du CV. Il devra aussi servir aux pages de description du site servant au rapport (interne et externe).

Pour les premiers pas sur les feuilles de styles, utilisez votre page d'accueil : le fichier "index.html" situé dans votre dossier principal.

Le contenu du fichier initial n'est pas très joli ( étant du même genre que celui-ci ou celui-là), bien qu'utile pour vous. Renommer-le en "_index.html" pour le conserver et toujours y accéder, mais que ce ne soit plus le fichier ouvert par défaut quand on arrive sur votre site.

Créez aussi un nouveau fichier au niveau de la racine, appelé : "_style.css". C'est ce fichier qui contiendra toutes les directives de présentation communes à toutes les pages de votre site.

Pour vous aider dans l'apprentissage des techniques pour agir sur la présentation d'une page Web, appuyer-vous sur le tutoriel de Jean-Claude Sohm du Cerig. Le premier chapitre présente un peu l'historique et la raison d'être des feuilles de style. Les chapitres suivants vous conduisent avec un "pas à pas" jusqu'à la création d'effets dynamiques comme une simulation de boutons pour les liens. À partir du troisième chapitre, les règles de présentation sont regroupées dans un fichier externe au document.

Une fois lus les 2 premiers chapitres, vous allez commencer à faire des essais d'application des règles du tutorial en les recopiant dans votre fichier "_style.css" et en les utilisant dans votre fichier "index.html"

consignes.php   consignes pour structurer les codes et copies d'écran d'exemples de maquettes http://tiprof.fr/SitesWebDynamic/Exemples/maquette/   exemple de site construit par composition
LicPro - PAGORA