Travail à réaliser : Projet de site Web statique
Avant de vous lancer !
étape 1 : maquetter une application
étape 2 : maquetter et mettre en forme
- Durée : 1/2 journée
-
Etapes :
- Maquetter vos pages (Utiliser Pencil ou faites le sur papier)
- Elaborer la cinématique de votre site (liens entre les pages)
- Définir la forme des pages de votre site avec un fichier CSS
- Ecrire vos pages en HTML (sous Notepad++, VSC, Eclipse ou autre)
Compétences
- Maquetter une application.
- Réaliser une interface utilisateur web statique et adaptable.
Cahier des charges : Site web statique
Avec les notions de base en HTML5 et CSS3 que vous venez d’acquérir récemment, vous allez pouvoir réaliser un site web statique de 6 à 7 pages (maximum) pour présenter :
- une de vos passions en différentes rubriques (sur plusieurs pages HTML)
- Votre CV avec les infos détaillées sur votre parcours professionnel
- Liste des compétences que vous allez acquérir chez Simplon
Vous pouvez aussi choisr un autre sujet (locations appartements, sport, gastronomie,…)
Vos pages HTML seront toutes construites de la même façon :
- Fichier CSS externe lié par la balise
<link>dans le<head>de vos pages HTML. - Entête pour afficher un bandeau graphique ou textuel (
<header>) - Menu
<nav>avec les balises<ul>,<li>et<a> - Contenu structuré avec un titre de niveau 1
<h1>obligatoire pour chaque page. - Sections avec les balises
<section>,<article>ainsi des titres de niveau 2<h2>ou 3<h3>si besoin. - Textes dans des paragraphes avec la balise
<p></p> - Pied de page avec la balise
<footer>pour afficher le copyright ©
Organiser vos différentes pages
- Bandeau en haut
- Menu horizontal sous le bandeau ou vertical à gauche (au choix)
- Partie correspondant au contenu à droite du menu vertical gauche ou bien sous le menu horizontal
- Pied de page en tant que dernière section
Vous êtes libre pour le choix des couleurs, des polices et des tailles de la largeur de vos pages HTML. Pour toutes questions sur la réalisation de ce travail, vous pouvez vous adresser à vos camarades ou bien à vos formateurs.
étape 3 : Rendez votre site responsive, utilisez le CSS Materialize
Bon courage !