Importation d'un Thème HTML
Tous ceux qui savent créer un site web en HTML seront capables de créer ou modifier un Thème pour Website Baker. Les étapes requises sont expliquées à partir d'un Thème 3-colonnes HTML/CSS traditionnel.
- Thème HTML de Maxdesign
- Structure HTML (index.html)
- Feuille de style externe (screen.css)
- Ressources web externes
Thème HTML de Maxdesign
Le Thème HTML est basé sur le tutoriel fourni par Maxdesign. Le Thème est composé d'une entête, 2 menus, une colonne contenu, une colonne "nouvelles" et un pied de page. Le fichier index.htmldefinit la structure du Thème et contient le texte et les liens de test. Le fichier screen.csscontient les styles utilisés par les balises HTML aussi bien que les alignements des éléments <div>. Les 2 fichiers sont des fichiers texte et peuvent être édités avec n'importe quel éditeur de texte tel que Notepad, nedit ou vi.
Le guide pas à pas ci-dessous montre la marche à suivre pour convertir une mise en page basée sur un CSS conventionnel 3 colonnes en un Thème Website Baker. Quelques connaissances de base en HTML et CSS sont requises. Si nécessaire consultez les nombreuses ressources disponibles sur la toile pour rafraichir vos connaissances en HTML et CSS.
Structure HTML
La structure du Thème 3 colonnes est contenue dans le fichier index.html et consiste en balises HTML, textes de test et quelques liens.
HTML MARKUP (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--
** BASIS LAYOUT FROM http://css.maxdesign.com.au/floatutorial
** TEMPLATE TUTORIAL (c) 2007 C. Sommer for http://websitebaker.org
-->
<title>3-col CSS Template based on a template provided by Maxdesign</title>
<!-- meta tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="short description of the pages content" />
<meta name="keywords" content="keywords for searche engines" />
<!-- link external stylesheet -->
<link rel="stylesheet" type="text/css" href="screen.css" />
</head>
<body>
<div id="container">
<!-- header -->
<div id="banner">
<h1>Website Title</h1>
</div>
<!-- top navigation (important links) -->
<div id="navigation1">
<ul>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- main navigation -->
<div id="navigation2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Section A</a></li>
<li><a href="#">Section B</a></li>
</ul>
</div>
<!-- column for news -->
<div id="news">
<h3>Latest news:</h3>
<p>Place holder for the latest news...</p>
</div>
<!-- column for main content -->
<div id="content">
<h2>Home</h2>
<p>Place holder for the main content...</p>
</div>
<!-- footer with copyright infos -->
<div id="footer">
<p>(c) 2007 C. Sommer, for the websitebaker.org help project</p>
</div>
</div>
</body>
</html>
L'affichage du fichier index.html sans les styles définis extérieurement dans screen.css ne semble pas très professionnel pour le moins. Tous les éléments contenus dans le fichier index.html file sont affichés selon la hiérarchie de haut en bas dans index.html. Le résultat est affiché ci-dessous.
Aspect du Thème sans la feuille de style externe screen.css
Feuille de style externe
L'image ci-dessus apparaît quand le fichier screen.css est manquant, ou si le visiteur a désactivé le CSS dans son navigateur. La mise en page et le positionnement des éléments figurant dans le fichier "index.html" sont définis par la feuille de style externe screen.css.
FEUILLE DE STYLE CSS EXTERNE (screen.css)
/**
* DESIGN AND LAYOUT TAKEN OVER FROM http://css.maxdesign.com.au/floatutorial
* THANKS FOR THAT GREAT TUTORIAL
* TEMPLATE TUTORIAL (c) 2007 by C. Sommer (doc) for http://websitebaker.org
*/
/* SET DEFAULT VALUES FOR ALL HTML ELEMENTS */
* {
margin: 0;
padding: 0;
}
/* LIGHTBLUE BACKGROUND COLOR */
html, body { background-color: #CDE; }
/****************************************************************
* FOLLOWING DIV TAGS DEFINE POSITION, SIZE AND LAYOUT
* BANNER, TOP AND MAIN MENUE, CONTENT, NEWS, FOOTER
****************************************************************/
#container {
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#banner {
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#navigation1 {
background-color: #000;
height: 20px;
padding: 5px 0.5em;
}
#navigation2 {
float: left;
width: 160px;
padding: 1em;
}
#news {
float: right;
width: 160px;
padding: 1em;
}
#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer {
clear: both;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
/**************************************************************************
* FOLLOWING CSS STYLES DEFINE LAYOUT OF THE TOP MENUE (DISCLAIMER, CONTACT)
* POSITION, NO LIST SYMBOLS, COLOR
***************************************************************************/
#navigation1 ul li {
display: block;
}
#navigation1 ul li a {
color: #adf;
float: right;
font-size: 85%;
font-weight: 700;
text-decoration: none;
padding: 0 1em;
}
#navigation1 ul li a.aktiv,#navigation1 ul li a:hover,
#navigation1 ul li a:active {
color: #fff;
padding: 0 1em;
}
/**************************************************************************
* FOLLOWING CSS STYLES DEFINE LAYOUT OF THE MAIN MENUE
* POSITION, NO LIST SYMBOLS, COLOR, PADDING
**************************************************************************/
#navigation2 p, #news p { margin: 0 0 1em 0; }
#navigation2 ul li {
display: block;
}
#navigation2 ul li a {
color: red;
text-decoration: none;
padding: 0 1em;
}
#navigation2 ul li a.active,#navigation2 ul li a:hover,
#navigation2 ul li a:active {
text-decoration: underline;
}
#content h2 { margin: 0 0 .5em 0; }
L'affichage du fichier index.html lié à la feuille de style externe screen.css produit la sortie montrée ci-dessous.
Aspect du Thème avec la feuille de style externe screen.css
Les styles contenus dans screen.css contrôlent l'apparence du fichier index.html. CSS peut être utilisé pour positionner les éléments div, le style du format des liens ... Comme ce tutoriel se concentre sur la création d'un site WB modèle, la mise en page est aussi simple que possible. Par la combination de CSS et d'images, on peut produire à peu près n'importe quelle charte graphique imaginable. Que pensez-vous de la charte graphique ci-dessous ?
Le Thème Andreas01 disponible dans la librairie des extensions
La mise en page ci-dessus est aussi basée sur l'utilisation de CSS. Le texte de test et les items de menu ont été remplacés par des balises Website Baker qui extraient le contenu de la base de donnée. Le chapître suivant montre comment tout cela foctionne. Le Thème ci-dessus peut être trouvé dans la librairie des extensions.
Ressources web externes
Le but de ce tutoriel n'est pas de fournir des informations à propos de CSS et HTML. Si vous voulez en savoir plus sur les CSS et HTML, explorez les ressources du web. Il existe de nombreux livres qui couvrent en détail les aspects mise en page des sites internet. Les liens suivants fournissent des ressources supplémentaire pour votre auto-apprentissage.
- Maxdesign -> http://css.maxdesign.com.au/
- A list apart -> http://www.alistapart.com/
- CSS Zengarden -> http://www.csszengarden.com/tr/deutsch/
- Bookmarks
Copyright (c) 2007 Website Baker Help team
Text and images of this page are licensed under a Creative Commons Attribution-NonCommercial-No Derivative 3.0
Licence. You are free to copy and distribute this work for
noncommercial purposes as long as no changes are applied and this
copyright notice and a backlink to http://help.websitebaker.org are provided.
