Squelette aapiq

Architecture des pages pour le projet AAPIQ.

Cette page a été vue 884 fois. Date de mise à jour : 27/02/2014 16:20:16.

Pages sur une colonne


<!DOCTYPE html>
<html lang="fr" >
<head>
	<meta charset="utf-8" />
	<meta name="robots" content="noindex, nofollow" />
	<link rel="icon" href="favicon.ico">
	<title>Projet site web AAPIQ</title>
	<link rel="stylesheet" type="text/css" media="all" href="aapiq1.css" />
</head>
<body>

<div id="entete">
	<table>
		<tr>
			<!--  a  -->
			<td style="width:958px;background:#ccc;"><a href="#" title="Page d'accueil"><img src="clear.gif" height="158" width="958" alt="home" title="Page d'accueil" /></a></td>
		</tr>
	</table>
	<div class="navigation">
		<ul><li><a href="#"><span>Accueil</span></a></li><li class="parent"><a class="parent" href="#"><span>Activités</span></a><ul><li><a href="#"><span>A A P I Q</span></a></li></ul></li>
		</ul>
	</div>
	<div class="breadcrumb">
		<span><strong>Vous êtes ici  : </strong></span><ul><li><a href="#" title="Accueil">Accueil</a></li><li> » </li><li><a href="#" title="Apparence">Apparence</a></li><li> » </li><li> Squelette aapiq </li></ul>
	</div>
</div>

<div id="corps_de_page">
	<div id="container_une_colonne">
		<div class="imprimer_la_page">
			
		</div>
		<div class="contenu">
			<h1>Titre de la page</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		</div>
	</div>
</div>

<div id="pieds_de_page">
	<table>
		<tr>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
		</tr>
	</table>
</div>

</body>
</html>

Pages sur 2 colonnes


<!DOCTYPE html>
<html lang="fr" >
<head>
	<meta charset="utf-8" />
	<meta name="robots" content="noindex, nofollow" />
	<link rel="icon" href="favicon.ico">
	<title>Projet site web AAPIQ</title>
	<link rel="stylesheet" type="text/css" media="all" href="aapiq1.css" />
	<link rel="stylesheet" type="text/css" media="all" href="aapiq2.css" />
</head>
<body>

<div id="entete">
	<table>
		<tr>
			<!--  a  -->
			<td style="width:958px;background:#ccc;"><a href="#" title="Page d'accueil"><img src="clear.gif" height="158" width="958" alt="home" title="Page d'accueil" /></a></td>
		</tr>
	</table>
	<div class="navigation">
		<ul><li><a href="#"><span>Accueil</span></a></li><li class="parent"><a class="parent" href="#"><span>Activités</span></a><ul><li><a href="#"><span>A A P I Q</span></a></li></ul></li>
		<li class="menuactive menuparent parent"><a class="menuactive menuparent parent" href="#"><span>Formations</span></a><ul><li><a href="#"><span>Français</span></a></li><li><a href="#"><span>Mathématiques</span></a></li><li class="menuactive"><a class="menuactive" href="#"><span>Informatique</span></a></li></ul></li>
		</ul>
	</div>
	<div class="breadcrumb">
		<span><strong>Vous êtes ici  : </strong></span><ul><li><a href="#" title="Accueil">Accueil</a></li><li> » </li><li><a href="#" title="Apparence">Apparence</a></li><li> » </li><li> Squelette aapiq </li></ul>
	</div>
</div>

<div id="corps_de_page">
	<div id="colonne_de_gauche" class="core-float-left">
		<h2>Actualités</h2>
		<hr />
		<div class="sbar-main">
			<div id="news">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
			</div>
		</div>
	</div>
	<div id="contenu_a_droite">
		<div class="imprimer_la_page">
			
		</div>
		<h1>Titre de la page</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	</div>
</div>

<div id="pieds_de_page">
	<table>
		<tr>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
			<td style="width:240px"><img src="clear.gif" height="1" width="240" alt="space" /></td>
		</tr>
	</table>
</div>

</body>
</html>

Feuilles de style associées


/*
FEUILLE de STYLE valable pour TOUTES les pages (1 ou 2 colonnes)
*/
html {
	font-size: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
	font-size: .8em;
	line-height: 1.25;
	color: #000000;
	background: #ffffff;
	background-image:url(filigrane2-20pct.fw.png);
}

h1, h2, h3, h4, h5, h6 {
	font-family:Arial,Helvetica,Sans-serif;
	color:#666666;
	margin: 0 0 .25em 0;
}

h1 { font-size:2em; }
h2 { font-size:1.8em; }
h3 { font-size:1.6em; }
h4 { font-size:1.4em; }
h5 { font-size:1.2em; }
h6 { font-size:1em; }

/* Paragraphes */
p {
	font-size: 1em;
	margin: .75em 0;
	text-align: justify;
	line-height: 19px;
}
/* style des liens */
a {
	color: #663300;
	text-decoration: none;
}
a:hover, a:focus {
	color: #000000;
	text-decoration: underline;
}
/* images */
a img {
	border: none;
}

#entete, #colonne_de_gauche, #contenu_a_droite, #pieds_de_page  {
	padding:1px 0;
}
/* ##################################################################
----------                     BLOC ENTETE                 ----------
################################################################## */
#entete {
	background-image:url(entete.png);
	background-repeat:repeat-x;
	height: 240px;
	text-align:center;
	color: #aaaa00;
}
#entete a {
	color: #cccc00;
	text-decoration: none;
}
#entete a:hover, #entete a:focus {
	color: #ffff00;
	text-decoration: underline;
}
#entete table {
	margin: 0 auto;
	border: none;
	border-spacing: 0;
}
/* ##################################################################
----------              BLOC ENTETE > NAVIGATION           ----------
################################################################## */
/* Website Template by freewebsitetemplates.com
http://localhost/Templates/carrepairshop/services.html
*/
#entete .navigation {
	width: 960px;
	margin:auto;
}
#entete .navigation > ul:before, #entete .navigation > ul:after {
	content: "";
	display: table;
}
#entete .navigation > ul:after {
	clear: both;
}
#entete .navigation > ul {
	background: url(navigation.png) repeat-x bottom left;
	margin: 0;
	padding: 0;
}
#entete .navigation > ul > li {
	display: block;
	float: left;
	list-style: none;
	margin: 0 27px;
	position: relative;
	padding: 0;
}
#entete .navigation > ul > li > a {
	color: #ccc;
	display: block;
	font-family: Georgia, "DejaVu Serif", Norasi, serif;
	font-size: 14px;
	font-weight: normal;
	height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0;  /* 0 15px */
	text-align: center;
	text-decoration: none;
}
#entete .navigation > ul > li.selected > a {
	font-family: Georgia, "DejaVu Serif", Norasi, serif;
	font-weight: bold;
	color: #f80;
}
#entete .navigation > ul > li > a:hover {
	color: #fff;
}
#entete .navigation ul ul {
	left: -99999px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 38px;
	z-index: 5;
}
#entete .navigation > ul > li:hover ul {
	left: 0;
}
#entete .navigation ul ul li {
	border-top: 1px solid #fff;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 180px;
}
#entete .navigation ul ul li:first-child {
	border: 0;
}
#entete .navigation ul ul li a {
	background: #2a9a86;
	color: #ffc528;
	display: block;
	height: 23px;
	font-family: Arial,Helvetica,Sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 23px;
	margin: 0;
/*	padding: 0 23px;	*/
	text-decoration: none;
/*	text-transform: capitalize;	*/
}
#entete .navigation ul ul li a:hover {
	background: #da2033;
	color: #ffffff;
}
/* pour empecher l'affichage de menu de 3ieme niveau (qui s'affiche en breadcrumb) */
#entete .navigation ul ul ul li {
	display: none;
}
/* ##################################################################
----------             BLOC ENTETE > BREADCRUMB            ----------
################################################################## */
#entete .breadcrumb {
	width: 940px;
	height: 25px;
	margin:auto;
	background-color:#ddffdd;
	border-bottom: 1px #bbbbbb solid;
	overflow: hidden;
	padding: 10px 0 0 20px;
}
#entete .breadcrumb span {
	color: #888888;
	display: block;
	float: left;
	font-size: 12px;
	margin: 0;
	padding: 0;
}
#entete .breadcrumb ul {
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#entete .breadcrumb ul li {
	color: #666666;
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#entete .breadcrumb ul li:first-child {
	background: none;
}
#entete .breadcrumb ul li a {
	color: #888844;
	display: block;
	font-size: 12px;
	margin: 0;
	padding: 0 5px 10px 8px;
	text-decoration: none;
	text-transform: capitalize;
}
#entete .breadcrumb ul li a:hover {
	color: #ff0000;
}
/* ##################################################################
----------                BLOC CORPS_DE_PAGE               ----------
################################################################## */
#corps_de_page {
	width:960px;
	margin:auto;
}
/* ##################################################################
----------             BLOC CONTAINER_UNE_COLONNE          ----------
################################################################## */
#container_une_colonne {
	padding: 0 10px;
}
#container_une_colonne > :first-child {
	margin-top: 10px;
}
#container_une_colonne > :last-child {
	margin-bottom: 10px;
}
#container_une_colonne .contenu {
	width: 906px;
	padding: 10px 16px;
	background-color: #eeeeff;
	border:1px solid #bbbbcc;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
/* ##################################################################
----------               BLOC PIEDS_DE_PAGE                ----------
################################################################## */
#pieds_de_page {
	background-image:url(pieds_de_page.png);
	background-repeat:repeat-x;
	height: 200px;
	margin-top: 14px;
	text-align:center;
	color: #aaaa00;
	clear:both;
}
#pieds_de_page p {
	font-size: 0.5em;
}
#pieds_de_page a {
	color: #cccc00;
	text-decoration: none;
}
#pieds_de_page a:hover, #pieds_de_page a:focus {
	color: #ffff00;
	text-decoration: underline;
}
#pieds_de_page table {
	margin: 0 auto;
	border: none;
	border-spacing: 0;
}
#pieds_de_page table td {
	margin: 0;
	padding: 0;
}
/* ##################################################################
---------                   BLOCS DIVERS                   ----------
################################################################## */
.GoogleAdsense {
	margin: 5px auto 10px auto;
	height: 90px;
	width: 730px;
	display: block;
}
.imprimer_la_page img {
	float: right;
	margin: 10px 20px 0 0;
}

/* ----------------------------------------------------------------*/
/* ----------------------------------------------------------------*/
/* ----------------------------------------------------------------*/

/*
FEUILLE de STYLE complementaire pour les pages sur 2 colonnes
*/

/* ##################################################################
----------                BLOC CORPS_DE_PAGE               ----------
################################################################## */
#corps_de_page {
	margin-top:10px;
}

/* ##################################################################
----------              BLOC COLONNE_DE_GAUCHE             ----------
################################################################## */
#colonne_de_gauche  {
	float: left;
	width: 313px;
	margin-bottom: 10px;
	background-color:#ffeeee;
	border:1px solid #ccbbbb;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
#colonne_de_gauche > :first-child {
	margin-top: 10px;
}
#colonne_de_gauche > :last-child {
	margin-bottom: 10px;
}
#colonne_de_gauche h2 {
	text-align: center;
}
#colonne_de_gauche hr {
	height: 1px;
	margin: -0.5em 0;
	padding: 0;
	color: #ccbbbb;
	background-color: #ccbbbb;
	border: 0;
}
/* ##################################################################
----------              BLOC CONTENU_A_DROITE              ----------
################################################################## */
#contenu_a_droite {
	margin-left: 327px;
	background-color: #eeeeff;
	padding: 5px 10px;
	border:1px solid #bbbbcc;
	border-radius:10px 10px 10px 10px;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:10px 10px 10px 10px;
}
#contenu_a_droite > :first-child {
	margin-top: 10px;
}
#contenu_a_droite > :last-child {
	margin-bottom: 10px;
}
/* ##################################################################
---------                    BLOCS DIVERS                  ----------
################################################################## */
.imprimer_la_page img {
	float: right;
	margin: 0;
}