Il paie pour essayer quelques-uns des dispositions de CSS3 pour voir ce que vous voulez faire avec eux avant de commencer à créer un projet de production. Copiez le code source de l'exemple sur le site Dynamic Drive et le placer dans des fichiers que vous vous attendez à utiliser.

Pour les fins de cet exemple, vous créez un fichier HTML5 avec le contenu suivant obtenu à partir du code HTML montré avec l'exemple. (Vous pouvez trouver le code complet pour cet exemple dans le dossier Chapitre 07 de la Code téléchargeable comme TwoColumnLayout.HTML).

CSS mise en page fixe # 2.1- (fixe-fixe)
840px
Colonne Contenu:640px
Colonne de gauche: 200px
Footer

L'exemple ajoute un espace blanc pour le code fourni sur le site Dynamic Drive aux fins de le rendre plus facile à lire et aussi pour montrer comment la structure est créée en utilisant l'

L'exemple supprime les scripts Dynamic Drive parce que vous ne pas besoin d'eux pour remplir les sections avec un contenu aléatoire. Toutefois, il ne ajouter des notes montrant le nombre de pixels utilisés par défaut pour chacune des sections (l'exemple Dynamic Drive note que la taille de la colonne de gauche fixe).

Si vous modifiez le CSS pour ce site, vous devez également modifier les notes que vous créez sur les tailles de colonnes fixes.

L'exemple utilise également un fichier CSS externe. Remarquez l'ajout d'un tag dans le . Le CSS pour le fichier externe est inchangé par rapport au

body {margin: 0-padding: 0-line-height: 1.5em-} b {font-size: 110% -} em {color: red -} # maincontainer {width: 840px; / * Largeur du principal conteneur * / margin: 0 auto / * récipient Center sur la page * /} # topsection {background: # EAEAEA-height: 90px; / * Hauteur de la section Haut * /} h1 {# topsection margin: 0-padding-top: 15px;} # contentwrapper {float: left; largeur: 100% -} {# contentcolumn margin-left: 200px; / * Définir la marge gauche à LeftColumnWidth * /} # leftcolumn {float: left; largeur: 200px; / * Largeur de la colonne de gauche * / margin-left: -840px; / * Set marge gauche à - (MainContainerWidth) * / background: # C8FC98 -} {# footer clear: left; largeur: 100% -background: noir-color: # FFF-text-align: center-padding: 4px 0- .} #footer a {color: # FFFF80 -} {margin innertube: 10px; / * Marges pour DIV intérieure à l'intérieur de chaque colonne (pour fournir un rembourrage) * / margin-top: 0-}

À ce stade, vous pouvez charger la page pour commencer à penser à ce que vous souhaitez modifier. Voici la page telle qu'elle apparaît sans modification après l'avoir copié sur le site et en séparant le code HTML de la CSS.

La première option vous aurez envie de changer est les couleurs utilisées pour les différents objets. Bien sûr, les couleurs doivent correspondre à la palette de couleurs pour votre site. Les modèles utilisent des représentations de couleur hexadécimaux. Vous devez les modifier pour correspondre à ceux utilisés par d'autres modèles sur votre site (si nécessaire).

Modèles qui reposent sur des largeurs de colonnes fixes peuvent nécessiter peaufiner à travailler avec le reste de votre site. Pour changer la largeur totale de la page, vous modifiez la propriété largeur du style #maincontainer. La largeur de volet de gauche est contrôlé par la propriété largeur du style #leftcolumn.

La taille contenu du volet est la différence entre la largeur de style #maincontainer et la largeur de style #leftcolumn. Dynamic Drive tend à utiliser le nommage cohérente, donc une mise en page qui utilise la colonne de droite pour les liens aurait un style #rightcolumn que vous modifiez pour modifier la largeur de la colonne.

Si vous modifiez la taille des styles de #leftcolumn ou #rightcolumn, alors vous devez également modifier la propriété margin-left du style de #contentcolumn à égaler.

La hauteur de la partie supérieure est seulement 90px. Cela pourrait causer un problème lorsque l'on travaille avec une tête plus large. Modifiez la propriété de la hauteur du style de #topsection pour le rendre compatible avec d'autres en-têtes sur votre site.

De même, le pied de page manque une hauteur réelle, de sorte que vous devrez peut-être modifier en ajoutant une propriété de la hauteur du style de #footer pour assurer chaque page de votre site a la même apparence.

Ces modèles reposent également sur les deux (en gras) et (souligné par nous). balises Bien que les deux balises sont toujours pris en charge par HTML5, il ya un avertissement fort avec le tag à l'utiliser seulement comme un dernier recours.

Si vous prévoyez une utilisation à long terme de ces modèles, ce serait une bonne idée de remplacer le entrées de tag avec le ou tags, ou mieux encore, d'éviter tout simplement en utilisant la et balises complètement en faveur de la mise en forme CSS.

Ces tags sont les restes de jours avant CSS a permis d'ajouter différentes formes de l'accent et la mise en gras en utilisant les propriétés font-style et font-weight. L'exemple montre les balises intact, mais la recommandation est de les supprimer et utiliser d'autres types de formatage à la place.