_blank

_Blank – Etape 03

17 mars 2019

1Création de la « page »

Manipulation

Dans le fichier index-ALL.html (avec Notepad++)
Afin d’éviter que l’ensemble de la page n’occupe la largeur totale de l’écran (« et laisser un peu d’air »), il faut créer un premier « contenant » – la « page ».

Utiliser les commentaires afin de :

Nommer les différentes parties de la page
Garder une trace des différentes actions menées sur le fichier

Ligne 32 = insérer le commentaire 
Ligne 33 = insérer la balise <div> ouvrant le contenant, lui appliquer la class/le style container. Soit <div class="container">
Ligne 36 = insérer le commentaire 
Ligne 37 = insérer la balise </div> afin de « fermer » le contenant

Observation

<body>

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

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

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

2Création des « lignes »

Manipulation

Ligne 35 = insérer le commentaire 
Ligne 36 = insérer la balise <div> ouvrant le contenant, lui appliquer la class/le style container. Soit <div class="row">
Ligne 38 = insérer le commentaire 
Ligne 39 = insérer la balise </div> afin de « fermer » le contenant

Observation

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

	<!-- ENTETE -->
	<div class="row">
	
	<!-- /ENTETE -->
	</div>

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

A noter

Cette ligne – commentée ENTETE contiendra l’identité du site ainsi que sa navigation.
Cette étape doit être répétée autant de fois que nécessaire afin de délimiter chaque partie de la structure.

Définir :

ACCUEIL (2 lignes)
2 COLONNES 2/3+1/3
2 COLONNES 1/3+2/3
PLEINE LARGEUR
PIED

3Résultats

<!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">

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

</head>
<body>

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

	<!-- ENTETE -->
	<div class="row">
	
	<!-- /ENTETE -->
	</div>
	
	<!-- ACCUEIL ligne 1 -->
	<div class="row">
	
	<!-- /ACCUEIL ligne 1 -->
	</div>
	<!-- ACCUEIL ligne 2 -->
	<div class="row">
	
	<!-- /ACCUEIL ligne 2 -->
	</div>
	
	<!-- 2 COLONNES 2/3+1/3 -->
	<div class="row">
	
	<!-- /2 COLONNES 2/3+1/3 -->
	</div>
	
	<!-- 2 COLONNES 1/3+2/3 -->
	<div class="row">
	
	<!-- /2 COLONNES 1/3+2/3 -->
	</div>
	
	<!-- PLEINE LARGEUR -->
	<div class="row">
	
	<!-- /PLEINE LARGEUR -->
	</div>
	
	<!-- PIED -->
	<div class="row">
	
	<!-- /PIED -->
	</div>

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

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

Chaque ligne est prête à recevoir les différentes colonnes nécessaires à la structure.

Précédent Suivant