Bonjour à tous,
Mon problème ne se situe pas vraiment au niveau du code mais plutôt sur la compréhension de l'intégration de ma maquette.
En effet j'ai fait une maquette sous photoshop (je serai capable de la coder en HTML5/CSS3 ce n'est pas un soucis) cependant j'ai du mal à différencier layout et pages.
Je crois avoir compris que le layout serait le thème donc ma maquette mais à quoi correspondrait pages ?
En gros comment puis je intégrer ma maquette ?
Si je dois coder le design en HTML5/CSS3 sous le layout (default.php) que dois je faire avec les pages ?
J'ai regardé aussi la partie 3 juste pour voir s'il y avait la réponse à cela mais ça m'a un peu embrouillé.
Merci d'avance.
Edit: Je crois avoir compris mais je suis pas sûr donc confirmez si j'ai bon ou sinon reprenez moi, mais le layout serait juste le fond (la maquette sans texte) donc je code la maquette en HTML5/CSS3 et les pages ça serait tout ce qui sera le contenu et les textes des boutons etc... ?
Par exemple dans page j'ai index.php et dedans j'aurai ma barre de navigation avec Accueil/Machin/Machin/Machin alors que dans le default.php présent dans layout j'aurai ma barre de navigation avec juste le css ou l'image qui la compose c'est ça ?
3 réponses
Tu doit faire ton design dans le layout car il va être la base de chaque page du site, les pages vont simplement remplir le layout de contenue au chargement.
Ok merci c'est donc bien ce que j'avais compris, sinon pour aller aussi vite que Grafikart lorsqu'il tape du code php , c'est juste l'habitude ou il a des raccourcis comme les snippets pour aller plus vite ?
Aidez-moi je ne comprends vraiment pas comment le design est géré, j'ai fait un fichier default.html ainsi que le style.css juste pour le layout puis j'ai mis le html en php et j'ai continué le tutoriel mais je dois avoir un problème...
Parce que quand je tape Mon_site/pages/ j'ai tout mon contenu de la page index mais le thème ne s'applique pas et quand je vais sur pages/view j'ai bien le "Le controller pages n'a pas de méthode view" mais là tout mon design est présent...
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title></title>
<link href="../../webroot/css/style.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="../../webroot/css/IE7.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
<![endif]--></head>
<body>
<!--Barre login-->
<div id="login"></div>
<!--Conteneur du site-->
<div id="container">
<?php echo $content_for_layout;?>
<!--Haut du site-->
<header>
<div id="logo">
<a href="#">
<img src="../../webroot/img/logo.png" alt="Vite!!! Trouvez votre style chez Kinapa."/>
</a>
<h2 id="slogan"> <img src="../../webroot/img/h2_logo.png" alt="Spécialiste de le mode grande taille"/> </h2>
<div class="shop"><span>Voir mon <img src="../../webroot/img/panier.png" alt="Par ici les bonnes affaires"/></span><span class="total">(109.90€)</span>
<p id="user">Ondongo Eudes</p></div>
</div>
</header>
<!-- Barre de navigation-->
<nav>
<ul id="main">
<li><a id="deb"></a></li>
<li><a id="home" href="#"><img src="../../webroot/img/home.png" alt="Accueil"/></a></li>
<li>
<a id="shoes" href="#">Chaussures</a>
<!--Sous-menu-->
<ul>
<li><a href="#">Ballerines</a></li>
<li><a href="#">Escarpins</a></li>
<li><a href="#">Mules</a></li>
<li><a href="#">Bottes</a></li>
</ul>
</li>
<li>
<a id="wear" href="#">Vêtements</a>
<!--Sous-menu-->
<ul>
<li><a href="#">Robes</a></li>
<li><a href="#">Pantalons</a></li>
<li><a href="#">Chemisiers</a></li>
</ul>
</li>
<li>
<a id="acc" href="#">Accesoires</a>
<!--Sous-menu-->
<ul>
<li><a href="#">Ceintures</a></li>
<li><a href="#">Foulards</a></li>
<li><a href="#">Semelles</a></li>
<li><a href="#">Formes</a></li>
</ul>
</li>
<li><a id="adv" href="#">Conseils</a></li>
<li><a id="end" href="#"></a></li>
</ul>
</nav>
<!-- Contenu-->
<section id="content">
<!-- Article de bienvenue-->
<article>
<h2>Bienvenue</h2>
<p>Bienvenue sur votre boutique en ligne dédiée aux grandes. Nos pointures vont du 41 à 45 pour les chaussures et nos tailles s’élargissent du XL (42) au XXL(50) pour les vêtements.
Notre ambition est de vous offrir des articles de qualités, tendances et chics et tout cela <b class="atout">à des prix attractifs.</b></p>
</article>
<!--Catégories-->
<div class="min_cat">
<h2>Catégories</h2>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
<a href="#"><img src="../../webroot/img/test 2.png" alt="."></a>
</div>
<!--Nouveautés-->
<div class="min_new">
<h2>Dernières nouveautés</h2>
<ul id="gallery">
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
<li>
<a href="#">
<p><img src="../../webroot/img/test.png" alt="."/></p>
<p class="description">Bottines femmes... <span class="taille"> Taille 41/45 </span> <span class="prix">30€</span></p>
</a>
</li>
</ul>
</div>
</section>
<!--Footer-->
<footer>
<p id="copyright"></p>
</footer>
</div>
</body>
</html>J'ai mis tout ça dans mon default.php présent dans layout puis dans index.php présent dans le dossier view j'ai mis juste <div id="login"></div> etc... comme procéde grafikart.
Mais je ne comprends pas pourquoi mon design entier apparait lors des pages d'erreurs alors que sur le fichier 404 j'ai mis <div class="error"></div>
Même en regardant plusieurs fois la fin du tutoriel je ne comprends pas pourquoi j'ai ce soucis...
Et voici ce que j'ai dans index.php:
<div id="login"></div>
<div id="container">
<header>
<div class="shop"></div>
</div>
</header>
<!-- Barre de navigation-->
<nav>
</nav>
<!-- Contenu-->
<section id="content">
<!-- Article de bienvenue-->
<article>
<h2></h2>
</article>
<!--Catégories-->
<div class="min_cat">
</div>
<!--Nouveautés-->
<div class="min_new">
</div>
</section>
<!--Footer-->
<footer>
</footer>
</div>Merci d'avance pour votre aide.