Différences

Ci-dessous, les différences entre deux révisions de la page.

--- clubinfo:premier_site_avec_css [2017/12/10 15:22]
mrcjl
+++ — (Version actuelle)
@@ Ligne 1: / Ligne 1: @@
-====== Premier site en CSS ======
-===== But =====
-Découvrir ce qui fait la richesse des pages HTML en les rendant agréables à regarder. Si le HTML décrit le contenu, le CSS décrit la mise en forme.
-Mettre en forme notre site pour le rendre plus agréable à regarder.
-===== Les commandes =====
-Elles sont de la forme "type_de_mise_en_forme: valeur_de_mise_en_forme;".
-L'élément à mettre en forme (balise généralement) peut dépendre d'un autre, appartenir à une catégorie ("class") ou être unique ("id").
-Elles sont dans un fichier séparé dont le contenu est par exemple.
-<code css nom_feuille_de_style.css>
-h1 {
-  color: red;
-  font-size: 24pt;
-}
-p {
-  color: blue;
-  font-size: 12pt;
-}
-</code>
-Le fichier HTML doit contenir dans l'entête :
-<code html page.html>...
-<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
-...</code>
-===== Activité =====
-Pour mettre en forme nous allons :
-    * Diminuer la largeur de la page HTML (comme sur ce wiki) et mettre une couleur de fond pour la balise <body>
-    * Améliorer la présentation du menu de la page d'accueil <ul><li>
-    * Améliorer la présentation des titres de page <h1>
-    * Faire gérer par la feuille de style l'image du pont <img class='grandeimg'>
-    * Rendre plus évidents les lieux et les catégories < class='xx'>
-Sur notre serveur web, nous allons copier le [[premier_site_en_html|premier site en HTML]] réalisé précédemment dans un dossier "sitecss", puis nous modifierons les fichiers.
-===== Modification des pages existantes =====
-Nous allons ajouter la balise permettant d'insérer la feuille de style dans l'entête de toutes les pages. La feuille de style sera "style1.css".
-==== Ajouter une feuille de style ====
-<code html>
-    <link rel='stylesheet' href='style1.css' type='text/css' />
-</code>
-===== Code de la feuille de style =====
-<code css style1.css>
-body {
-	margin-left: 150px;
-	margin-right: 150px;
-	background-color: silver;
-}
-ul {
-	margin-left: 100px;
-	background-color: green;
-}
-li {
-	font-size: 18px;
-	font-weight: bold;
-	color: yellow;
-	text-decoration: none;
-	padding-top: 5px;
-	padding-bottom: 5px;
-        border: 1px solid black;
-}
-h1 {
-	color: navy;
-	margin-top: 0px;
-}
-p.info {
-	text-align: justify;
-}
-img.grandeimg {
-	width: 400px;
-	float: left;
-	margin-right: 20px;
-}
-P.lieu p.categorie {
-	float: left;
-	padding-left: 100px;
-}</code>
-===== Améliorations ======
-Une nouvelle présentation peut être facilement créée dans une nouvelle feuille de style et rapidement remplacée sur quelques ou toutes les pages.
-Le site peut aussi s'adapter facilement aux tablettes et smartphone de plus faible largeur d'écran. Cela peut se faire de 2 façons :\\
-  * Mettre en place dans les fichiers **.html** une 2ème feuille de style pour écran étroit en plus de la feuille standard. (NON UTILISÉE ICI)
-<code html>
-  <!-- Choix de la feuille de style en fonction de la largeur d'écran -->
-  <link rel="stylesheet" href="style1.css" />
-  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />
-</code>
-  * Ajouter à fin de la feuille de style des nouvelles règles pour les écrans étroits (UTILISÉE ICI)
-<code css>
-/* Modification des règles pour les écrans étroits */
-@media screen and (max-width: 800px) {
-  body {
-     margin-left: 0px;
-     margin-right: 0px;
-  }
-  img {
-    width: 200px;
-  }
-  .info {
-    left: 300px;
-}
-</code>
-===== Inconvénients =====
-Il est toujours nécessaire de créer une nouvelle page complète par nouveau pont et de modifier le menu. Nous pouvons aussi améliorer après la [[création de la base de données]] pour notre [[premier site SQL]].

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Différences

Outils de la page