Corps pur et mélange
Résumé : Corps pur et mélange. Recherche parmi 300 000+ dissertationsPar Fifi Belle • 9 Janvier 2023 • Résumé • 1 837 Mots (8 Pages) • 304 Vues
Activité 4 : mise en page en utilisant des boîtes
Grâce au fichier css et aux feuilles de style, nous avons réussi à améliorer notre page Web mais nous sommes encore loin de la qualité de présentation des pages que nous consultons quotidiennement. Pour améliorer cette présentation, nous allons séparer notre page en différentes zones appelées boîte. Une boîte peut contenir des éléments très variés tels que des images, du texte, une vidéo …. Ou un menu pour accéder à une autre page mais nous n’irons pas aussi loin. Nous commencerons avec une mise en page simple avec des boîtes les unes sous les autres mais cela ne change pas beaucoup par rapport à ce que nous avons fait dans l’activité 3 puis nous améliorerons la présentation afin de mettre des boîtes dans des boîtes.
Document 1 : comment définir une boîte dans notre fichier css
Pour définir notre boîte, nous allons créer une balise dans le fichier CSS. Celle-ci peut être de type class ou id. Comme un cadre peut être amené à servir plusieurs fois dans la page, il peut être judicieux de choisir l’attribut class même si cela n’est pas obligatoire. Une boîte possède un certain nombre d’attributs comme sa taille, ses marges, son cadre et les couleurs associées. Tous ces paramètres n’ont pas forcément à être définis. Les ordinateurs n’ayant pas tous la même résolution d’écran, il peut être judicieux de remplacer le nombre de pixels en largeur par un pourcentage.
Document 2 : comment définir une boîte dans le fichier css et l’utiliser dans le code html
Pour définir la boîte dans la feuille de style CSS , utilise le code suivant :
explication | |
.boîte | Nom de la boîte |
{ | |
Float : none, left ou right ; | Position du cadre dans la page. |
Border : …px puis ajouter un style et une couleur ; | Style de la bordure |
Width : …px ou %; | Largeur du cadre |
Height : …px ; | Hauteur du cadre |
Margin : …px ou 0 auto ; | Distance par rapport à la page |
Padding : …px ; | Distance du texte ou image par rapport à la bordure du cadre |
Background-color : ajouter une couleur ; | Couleur de fond du cadre |
Color : ajouter une couleur ; | Couleur du texte |
Text-align : left / right ou center ; | Position du texte |
} |
Par exemple
.boîte
{float : left ;
border : 5px groove white ;
width : 80% ;
height : 300px ;
margin : 10px ;
padding : 5px ;
background-color : blue ;}
Permet de définir une boîte bleue avec une bordure blanche de 5 pixels occupant 80% de la largeur de l’écran et ayant une hauteur de 300 pixels.
Pour créer notre boîte dans notre page HTML, on utilise le code :
<body>
<div id = "boîte">
Le code de ce que l’on met dans la boîte
</div>
</body>
Document 3 : définition des dimensions du cadre
[pic 1]
A vous de créer une page HTML avec des cadres.
- Commençons par créer des cadres.
Comme dans les activités précédentes, il faut que l’ensemble des fichiers se situent dans le même dossier (MAPAGEWEB3 par exemple) : votre page web, le fichier CSS que vous allez créer et vos images éventuelles.
La résolution d’écran est différente d’un utilisateur à l’autre. On considère actuellement que seule 1% des utilisateurs utilise encore une résolution inférieure à 800 x 600. Nous disposons donc d’un écran d’au moins 800 pixels de large. Nous pourrons choisir une largeur de 700 pour nos boîtes.
Commençons par créer un modèle de boîte dans un fichier de style CSS, que nous nommerons « style.css ». Pour cela nous allons y ajouter le code suivant : (utilisez la fonction copier-coller pour ne pas retaper le code).
.boîteprincipale
{float : none ;
border : 10px solid gold ;
width : 700px ;
height : 350px ;
margin : auto ;
padding : 30px ;
text-align : center ;
background : beige ;}
Puis créer un fichier « index.HTML » comportant un entête et un corps.
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title> Le Web </title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "boîteprincipale">
<p>Nous ajouterons ici le code pour remplir cette boîte </p>
</div>
<br>
<div class = "boîteprincipale">
</div>
</body>
Enregistrer vos fichiers et ouvrir la page index.html créée.
Q1 : Combien de boîte obtenez-vous. Comment sont-elles disposées sur l’écran du navigateur ?
On a 2 boites disposé une en-dessous de l’autre qui sont au milieux
- Remplissons les cadres.
Avoir des cadres sur une page Web ne présente d’intérêt que s’ils sont remplis. Ajoutons maintenant un texte et une image dans le premier cadre. Pour cela, nous pouvons insérer le code suivant pour remplacer le texte présent dans le premier cadre :
...