Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:twintowers_page_accueil

Twin Towers - Page Accueil

Sur la base d'un projet de Tony Coelho.

Matériel de départ

Maquette Axure et son export.

Le texte :

TwinTowers
Un lieu, trois émotions

L'avant
Le 11 septembre
L'après
   

Sur ce site vous trouverez une chronologie sur le sujet des Twin Towers. Avant le 11 septembre 2001
les États-Unis étaient une nation très solide et sereine du fait de sa puissance économique et 
militaire. Les attentats du 11 septembre ont été les attentats les plus médiatisés au monde à cause
des dégâts. L'Amérique depuis reconstruit peu à peu son centre des affaires.


Contact

Mail
Coelho Tony
B2


Mentions Légales

Projet réalisé dans le cadre d'un exercice pédagogique au département src[*]média de montbéliard


Réseaux

Facebook
Twitter
Google+


Glossaire

Sur cette page vous trouverez les définitions des mots contenus dans ce site, dans le contexte et 
le domaine auquel ils se rapportent. accès au glossaire.

Et les médias (images, polices, …) à télécharger.

Reste le code du champ de recherche :

<form method="get" action="http://www.google.com/search">
  <input type="text" name="q" maxlength="255">
  <input type="submit" value="Recherche Google">
  <input style="display: none;" type="radio" name="sitesearch" value="src-media.com" checked="checked">
</form>

Travail

Une fois faite la page HTML vous devez avoir :

Remarque : Le titre “navigation principale” est “optionnel”, il sert pour la table des matières HTML5, il est dans la NAV. On le supprime par les CSS (display:none;).

Rappel : La structure vu en TD :

Et une vue 3D :

Typographie et couleurs

Le but est d'obtenir :

Pour visualiser la grille

Le pas de base est de 21px.

Les tailles de police sont : 14px, 21px, 42px (et 28px pour les H2, présent dans les articles des autres pages)

Les couleurs sont : blanc, noir, gris pour le texte du chapeau (#666) et vert pour le lien vers src-média (##87DF14)

Voir le cours si vous voulez afficher la grille (facultatif).

Aides pour les CSS

 
/* Pour tout le document : body */
 
  /* Famille de police CorbelRegular */
 
  /* Taille de police 14px */
 
  /* hauteur de ligne 21px */
 
 
 
/* Pour tous les textes ordinaires (p) */
 
    /* Taille de police 14px */
 
    /* Marge haut-bas de 14px */
 
 
 
/* Les titres, la navigation  et le chapeau de la page d'accueil */
 
  /* Famille de police WalkwaySemiBoldRegular */
 
  /* Graisse normale */
 
 
 
/* Les H1 */
 
  /* Taille de police 42px */
 
  /* Hauteur de ligne 42px */
 
  /* marge haut 42px, bas 21px */
 
 
 
/* Pour les H2 */
 
  /* Taille de police 28px */
 
  /* Hauteur de ligne 42px */
 
  /* Marge haut-bas 21px */
 
 
 
/* Pour le H1 du titre de page */
 
  /* Marge basse à 0*/
 
 
 
/* Pour le H2 du titre de page */
 
  /* Taille de police à 14px */
 
  /* Hauteur de ligne à 21px */
 
  /* Marge haut à 0 */
 
 
 
/* Les H3, le chapeau de l'accueil et la navigation */
 
  /* Taille de police à 21px */
 
  /* Hauteur de ligne à 21px */
 
  /* Marge haute 42px basse 21px */
 
 
 
/* Les chapeaux des articles */
 
  /* En italique */
 
 
/* tous les liens (par défaut) */
 
  /* text en noir, gras, non souligné */
 
 
 
 
 
/* Le bandeau de navigation et le footer de la page */
 
  /* Fond noir */
 
 /* Texte blanc */
 
 
 
/* Les liens qui sont sur les éléments précédents */
 
  /* Mettre explicitement leurs couleurs en blanc */
 
 
 
/* Le lien de SRC-MEDIA */
 
  /* En vert */

Styles graphiques

Le but est d'obtenir :

Pour l'ajout des images d'interface : images d'interface ajoutées :before :after.

Pour les icônes des liens sociaux, utilisez la technique du TP précédant en ajoutant : background-size: contain; pour redimensionner l'image.

La navigation :

  • Les LI en ligne avec inline-block
  • Mais ajouter aussi display:inline-block; à la NAV pour…
    • Le formulaire (FORM) passe à droite avec float:right;

J'allais oublier ! Le gris : #E4E4E4 pour le bord sous la navigation. Il est aussi utilisé comme couleur de fond au survol des liens de la même navigation (texte alors noir).

/* Le titre de la navigation */
 
  /* Le cacher (display:none) */
 
 
 
/* Les listes utilisées pour des raisons non sémantiques (navigation, projets, ...)*/
 
  /* Pas de puces */
 
  /* margin et padding à 0 */
 
 
 
/* le HGROUP de HEADER */
 
  /* "display:inline-block" pour ne pas prendre toute la largeur */
 
 
 
/* Le H1 de ce même HGROUP */
 
  /* En position relative pour l'image ajoutée en position absolue */
 
 
 
/* le pseudo élément ":after" de ce même h1 */
 
  /* en contenu, l'url de l'image */
 
  /* Placé en position absolue */
 
  /* Avec des coordonnées négatives par rapport à bottom/right
     Pour la sortir en bas à droite */
 
 
 
 
/* Le bandeau navigation */
 
  /* un bord gris en bas */
 
 
 
/* La nav du header */
 
  /* "display:inline-block" pour ne pas prendre toute la largeur
   nécessaire pour permettre au formulaire de recherche de remonter */
 
 
 
/* Les LI de la NAV */ 
 
  /* Les mettre en ligne */
 
 
 
 
/* Les liens de la navigation */
 
  /* Toujours mettre les liens utilisés comme éléments interactifs en "bloc" */
 
  /* Ajuster les marges et padding */
 
 
 
/* Les liens qui n'ont pas d'attribut "href" ou qui sont survolé */
 
  /* Texte en noir */
 
  /* Sur fond gris */
 
 
 
 
/* Le formulaire de recherche */
 
  /* En haut à droite par "float"
     A besoin de la NAV en inline-block pour pouvoir remonter */
 
  /* Ajuster le padding */
 
 
/* Chacune des colonnes du FOOTER */
 
  /* Largeur de 4 colonnes */

Mise en page

Le but est d'obtenir :

Si vous avez mis en place les DIV.centre comme indiqué dans la maquette, cela se fait en quelques lignes (fixer la largeur et centré). Pour être complet, table-cell met en colonnes les parties du FOOTER.

Les dimensions sont à lire sur la maquette (compter le nombre de colonnes de grilles).

/* L'élément HTML */
 
  /* une largeur mini de 960px
     pour éviter les problèmes avec des fenêtres (de navigateurs) trop petites */
 
 
 
/* les DIV de class "centre" */
 
 /* centrées */
 
  /* largeur 940px */
 
 
 
/* La DIV de class "centre" et "contenu-accueil" */
 
  /* Une largeur de 620px seulement */
 
}
 
/* les colonnes du FOOTER */
 
  /* en colonnes... */
 
 
 
 
/* la DIV de class "centre" du FOOTER */
 
   /* Nécessite d'étre un peu plus large */
cours2012/concepts_et_outils_pour_internet/twintowers_page_accueil.txt · Dernière modification: 2012/10/22 22:00 (modification externe)