_blank

_Blank – Etape 07

30 mars 2019

1Manipulation

Ouvrir index-ALL.html depuis Notepad++
Renseigner les textes donnés (Clic droit > « enregistrer la cible du lien sous » dans le dossier BASE) et remplacer les numéros attribués à chaque zone.
(Chaque texte DOIT figurer dans un paragraphe)

(Zone Verte Haute) Ici l’identité et la navigation du site.
(Zone Violette) Ici un slogan/une image représentative de l’identité/un service/un produit mis en avant.
(Zone Magenta) Ici un service/un produit mis en avant. (x3)
(Zone Bleue) Ici le texte principale de la page – Peut contenir, texte, lien, image(s), vidéo imbriquée, Google Map imbriqué.
(Zone Orange) Contenu secondaire – peut contenir liens relatifs au site pointant vers d’autres pages du site ou autres sites – Images, Annonces publicitaires, vidéo imbriquée, Google Map imbriqué.
(Zone Verte Basse) Ici Rappel de l’identité/Adresse/Tél. et navigation secondaire du site – lien vers une page contact/les mentons légales/politique de confidentialité/Cookies/Conditions Générales d’Utilisation/Conditions Générales de Vente.

2Code html

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/monstyle.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body class="gris">

<!-- PAGE -->
<div class="container">

	<!-- ENTETE -->
	<div class="row">
		<header class="twelve columns vert">
		<p>Ici l'identité et la navigation du site.</p>
		</header>
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
		<div class="twelve columns violet">
		<p>Ici un slogan/une image représentative de l'identité/un service/un produit mis en avant.
		</p>
		</div>
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
		<article class="four columns magenta">
		<p>Ici un service/un produit mis en avant.</p>
		</article>
	<!-- /ACCUEIL ligne 2 -->
    </div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
		<main class="eight columns bleu">
		<p>Ici le texte principale de la page - Peut contenir, texte, lien, image(s), vidéo imbriquée, Google Map imbriqué.</p>
		</main>
		<aside class="four columns orange">
		<p>Contenu secondaire - peut contenir liens relatifs au site pointant vers d'autres pages du site ou autres sites - Images, Annonces publicitaires, vidéo imbriquée, Google Map imbriqué.</p>
		</aside>
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 ATTENTION L'ORDRE DES COLONNES EST GERE DANS LA FEUILLE DE STYLE-->
	<div class="row inversion">	
		<main class="eight columns bleu bureauDroit">
		<p>Ici le texte principale de la page - Peut contenir, texte, lien, image(s), vidéo imbriquée, Google Map imbriqué.</p>
		</main>
		<aside class="four columns orange bureauGauche">
		<p>Contenu secondaire - peut contenir liens relatifs au site pointant vers d'autres pages du site ou autres sites - Images, Annonces publicitaires, vidéo imbriquée, Google Map imbriqué.</p>
		</aside>
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
		<main class="twelve columns bleu">
		<p>Ici le texte principale de la page - Peut contenir, texte, lien, image(s), vidéo imbriquée, Google Map imbriqué.</p>
		</main>
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
		<footer class="twelve columns vert">
		<p>Ici Rappel de l'identité/Adresse/Tél. et navigation secondaire du site - lien vers une page contact/les mentons légales/politique de confidentialité/Cookies/Conditions Générales d'Utilisation/Conditions Générales de Vente.</p>
		</footer>
	<!-- /PIED -->
	</div>

 
<!-- /PAGE -->
</div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

3Regarder la page dans son navigateur

Le texte déborde des zones secondaires (Orange).

Rappel : la hauteur des colonnes a été définie à 100px pour nous permettre de voir les étapes précédemment réalisées.

.column,
.columns {
height: 100px;
}

Commenter/Supprimer ces lignes suffiront à corriger cette erreur.

Hypothétiquement, si cette valeur de 100px de haut était requise, il est possible de :

Masquer le contenu « qui déborde ».
Faire en sorte qu’une barre de défilement apparaisse si un contenu « débordait »

Ceci grâce à la propriété CSS overflow.

Dans Notepad++, ouvrir skeleton.css et commenter les lignes 443 à 446

/*.column,
.columns {
height: 100px;
}*/

4Dans votre navigateur

Précédent Suivant