Outils pour utilisateurs

Outils du site


cours2011:concepts_et_outils_pour_internet:demarche_html_css

Démarche HTML/CSS

Le but est de faire une ou plusieurs pages sur le modèle de ElegantPress HTML5 and CSS3 Template.

Comme ficher de support vous pouvez télécharger clone-elegant-press.zip. Une version refaite dans le but de monter comment décomposer le travail.

Activité préalable

Faire un zoning/wire-frame sur papier. L'annoter des éléments HTML.

Faire les fichiers et dossiers du projet :

Déroulement de l'activité

Bien séparer chaque partie dans votre code CSS (avec des commentaires).

Reprendre les mises en forme de “ElegantPress”, le but n'est pas de faire le graphisme. Mais de voir comment il se (re)construit.

Typographie

Écrire les styles pour la typographie et couleur de polices.

Mise en page

Faire la mise en page pour obtenir l'essentiel de votre “zoning/wire-frame”.

Pour les techniques, se référer aux TP précédents et à l'exemple fournis.

Charte graphique

Introduire les enrichissements graphiques en les reprenant du modèle.

Inutile de pousser la démarche trop loin, ce n'est pas le but du TP.

Pour la suite :

Faire d'autres pages avec des variantes de contenu/mise en page.

Lier les pages par des liens.

Publier les fichiers.

Exemple

Fait en 30 minutes :

Les fichiers (dans un dossiers “propre”

ou un projet Aptana) :
Les balises HTML :

Les sélecteurs CSS :

Le début du code CSS :

cours2011/concepts_et_outils_pour_internet/demarche_html_css.txt · Dernière modification: 2011/09/28 22:00 (modification externe)