Labs - Structure de la partie Contenu Accueil du DizPerso

 

 

ACCUEIL <<< DizPerso Labs <<<


La page d'accueil est unique et très spécifique, l'espace HTML est seulement la partie "Contenu", dans laquelle vous insérez vos textes, images, divers objets acceptés par le composeur et surtout les champsdynamiques, les 5 derniers articles, le top articles, etc...
Je vous propose donc de créer en HTML une DIV, ID "contenu_accueil"  et une règle nommée "#contenu_accueil"en CSS pour gérer le style.

Dans votre gestion --> VOTRE BLOG --> Page d'accueil... en-dessous du composeur, cliquez sur "Mode source HTML",puis cochez la case pour passer en mode HTML. Ensuite copiez le code ci-dessous et collez le dans le composeur.
Maintenant vous pouvez décocher la case pour revenir en mode texte.

<div id="contenu_accueil">

Espace pour composer votre page...

</div>

Dans le composeur s'affiche uniquement les quelques mots "Espace pour composer votre page...". Ce texteprovisoire permet de repérer où vous devez insérer votre texte ou image.


Espace pour composer votre page...

La structure HTML de la partie "Contenu" de la page d'accueil.

<div id="contenu">
    <div id="contenu_accueil">
    </div>
</div>

 

Dans votre feuille de style, la règle #contenu gère toute cette page comme les pages articles.L'ID "contenu_accueil" permet de pouvoir aménager un style particulier pour la page d'accueil, qui seragéré par la création d'une règle CSS nommée #contenu_accueil.

La réalisation de la page actuelle, présentation d'une page d'accueil avec un cadre, uniquement  paramétré en CSS.C'est le code ci-desssous qui est utilisé, tout d'abord quelques modifications de la règle #contenu, enparticulier, un fond image (texture) et la bordure. Puis la règle #contenu_accueil avec un fond image (texture)et également des bordures, l'astuce pour réaliser le cadre, consiste à placer le bloc "contenu_accueil" au centrede la partie "Contenu", en mettant des marges extérieures(margin). Le fond de la partie "Contenu" sera recouvertpar le fond du bloc "contenu_accueil", c'est donc le fond du contenu qui représentera le cadre et en utilisantles divers styles de bordure en CSS(outset, inset, groove, etc...) ainsi que la largeur, l'aspect sera différent.
Voir plus bas des exemples d'encadrements pour bien vous faire comprendre le système.

 

 

Code CSS spécifique à cette page.

 

<style type="text/css">
#contenu
{
background : #;
background-image : url(//diztest.blog4ever.com/blog/url_artimage-205392-2394229-2914.html);
background-repeat : repeat;
text-align : left;
border:3px inset #C9C9C9;
}

#contenu_accueil
{
background:#;
background-image : url(//diztest.blog4ever.com/blog/url_artimage-205392-2394077-1514.html);
background-repeat : repeat;
margin-top : 20px;
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
color:#663300;
border:3px inset #C9C9C9;
}

</style>

 

Ce code CSS est à mettre en début de votre page d'accueil en mode HTML, avant la DIV id contenu_accueilet après un paragraphe vide, en code HTML <p>&nbsp;</p>

 

 

Totalité du code à insérer au debut de page en mode HTML.

<p>&nbsp;</p><style type="text/css">
#contenu
{
background : #;
background-image : url(//diztest.blog4ever.com/blog/url_artimage-205392-2394229-2914.html);
background-repeat : repeat;
text-align : left;
border:3px inset #C9C9C9;
}

#contenu_accueil
{
background:#;
background-image : url(//diztest.blog4ever.com/blog/url_artimage-205392-2394077-1514.html);
background-repeat : repeat;
margin-top : 20px;
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
color:#663300;
border:3px inset #C9C9C9;
}

</style>

<div id="contenu_accueil">

Espace pour composer votre page...

</div>

 

 

Quelques exemples d'encadrements.

 

Vous pouvez les utiliser sur votre page d'accueil mais également dans vos articles. Par contre si vous gardezles mêmes images, hébergez les dans votre boîte à images, je ne garantis pas la durée de mes adresses.



<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394080-3832.html) repeat; margin:20px; border:3px ridge #FFCC00;">

<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:10px; padding:5px; border:3px ridge #FFCC00;">

ICI le texte ou l'image à encadrer

</div></div>

 


<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394079-3205.html) repeat; width:500px; margin:20px auto; border:3px groove #FFCC00;">

<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:20px; padding:5px; border:3px groove #FFCC00; font-family: arial;">

ICI le texte ou l'image à encadrer

</div></div>

 


<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394073-3422.html) repeat; margin:20px; border:3px outset #FFCC00;">

<div style="background:url(//diztest.blog4ever.com/blog/url_artimage-205392-2394226-4835.html) repeat; margin:40px; padding:5px; border:3px inset #FFCC00;">

ICI le texte ou l'image à encadrer

</div></div>

 

Sur cette page d'accueil, vous avez la possibilité d'afficher du contenu dynamique :
- les 5 derniers articles
- le top articles
- etc...

Là également il y a des possibilités de gérer ces listes, à voir dans l'article sur le "Contenu dynamique" lien.

 

 




20/12/2009
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso