Sujet de stage:
Elaboration de différents modèles de pages HTML en vue de proposer un choix de design Web à des clients.
Objectif
La société Janeiro Studio envisage de mettre en place un catalogue de design Web destiné aux clients qui souhaitent pouvoir choisir parmi un panel de styles. Le but est de proposer des chartes graphiques sur des thèmes différents afin d'orienter le choix des sociétés ou particuliers qui envisage la création de leur site.
Afin d'optimiser l'intégration et la mise en œuvre de ces sites, il convient de garder au maximum une forme HTML commune à ces sites. Pour cela, vous devrez concevoir au préalable la forme structurel de votre site en utilisant des div.
Mise en œuvre
Vous êtes libre d'utiliser les outils que vous souhaitez.
Si vous souhaitez intégrer des photos ou des publicités fictives, vous devez utiliser des images libre de droits ou des photos personnelles.
Vous devez prévoir dans votre conception:
Un système de menu à 3 niveaux maximum (rubriques, chapitres, sections)
Des emplacements pour les liens annexes (contacts, liens utiles, etc…)
Un emplacement pour les résumés des actualités
Design de la page représentant le détail des actualités
Design de la page représentant le résultat de la recherche
Design de la page représentant le plan du site
Design de la page représentant les liens utiles
Design de la page représentant les contacts sous forme de listing
Design de la page représentant les contacts via un formulaire
Une partie centrale
Une partie ou plusieurs parties réservées à la publicité
Un emplacement pour le champ texte du moteur de recherche
Résultats attendus
Il vous est demandé de concevoir au moins 2 chartes graphiques sur des thèmes et des styles librement choisi par vous. Ces chartes seront fournies sous la forme d'un document psd non aplati* et d'une ou plusieurs page HTML intégrant le style.
* Pour le respect des droits d'auteur les calques des psd peuvent être fusionnés à conditions que tous les éléments de la charte graphique peuvent être déplacés ou isolés pour faciliter le découpage (psd vers HTML)
Convention
Le site devra avoir une largeur maximale de 800 pixels (même si ce n'est plus une obligation mais le respect de cette règle assure une compatibilité pour les basses résolutions)
Noms des éléments HTML/CSS pour le positionnement : Entête (id="Header"), bannière (id="Banner"), colonne gauche (id="LeftCol"), colonne droite (id="RightCol"), colonne centrale, si elle existe (id="CenterCol"), pied de page (id="Footer"),
Noms des éléments HTML/CSS divers : moteur de recherche (id="Search"), menu horizontal (id="HnavContainer), menu vertical (id="VnavContainer")
Noms des éléments HTML/CSS pour les espace publicitaires : publicité haut (id="TopView"), publicité gauche (id="LeftView"), publicité droite (id="RightView"). Il est important de ne pas utiliser les mots AD, ADS, PUB pour les éléments pour éviter les systèmes contre l'affichage de la publicité basés sur les blocs CSS.
Contraintes
L'intégration devra prendre la forme d'une ou plusieurs page HTML conformes xhtml 1.0 strict.
Le design sera séparé de la sémantique grâce à la réalisation de feuilles de style séparées.
Si pour les besoins du design il est nécessaire d'utiliser des styles spécifiques pour Internet Explorer, séparer ceux-ci sur une feuille de style à l'aide des commentaires conditionnels. Dans la mesure du possible favoriser un CSS aux normes s'appliquant à tous les navigateurs, ça évitera les corrections futures quand Internet Explorer supportera correctement le CSS.
L'utilisation de tableaux HTML est réservé aux données tabulaires et n'est pas autorisé pour le positionnement des éléments dans la page.