CSS - Html - Outil cadre

 Cadre PUB 
 Cadre PUB 

Utilisation d'un fichier extérieur représentant un cadre contenant un texte publicitaire, en exemple pour ceux qui n'osent pas modifier le fichier CSS ou qui utilisent DIZ Perso étant donné que l'on ne peut pas lui ajouté de règle.
Voir comment l'on peut mettre une règle de style en direct dans une balise HTML



Aide d'utilisation du fichier "Cadre PUB"


le 27 juin 2008

Je viens de faire une modification sur le fichier "Cadre PUB", j'ai ajouté un paragraphe vide au début et à la fin du cadre, pour facilité la saisie dans le composeur.


Premièrement téléchargement du fichier

Télécharger le fichier "Cadre PUB", un fichier .html que j'ai archiver sur le serveur, cliquez sur le lien suivant Cadre PUB et sauvegardez le sur votre disque dur, nous allons l'utiliser, en insérant son contenu dans un article.
Nota : je vous conseille de le renommer "cadrepub.html", Blog4ever baptise les fichiers avec des chiffres, facile pour votre ordi mais pas mémorisable pour nous les humains.



Utilisation du fichier téléchargé

- Ouvrez le fichier "cadrepub.html" dans votre navigateur

Mettre le curseur dans le cadre, au milieu du texte, faire un clic droit >>> sélectionner tout ... ctrl+c >>> pour copier dans le presse papier.

Allez dans votre espace de gestion Blog4ever pour créer un article dans le composer en mode texte.


Nommez le nouvel article, sélectionnez éventuellement une catégorie, cliquez au début de la fenêtre du composeur pour positionner le curseur, clic droit >>>coller ou ctrl+v.

    Une fois le cadre collé dans le composer :
  1. Sélectionnez mon texte publicitaire pour rédiger par dessus votre article
  2. Vous collez si vous le souhaitez d'autres cadres, en mettant 1 ou 2 espaces entre eux, en pressant la touche [Entree]
  3. Validez votre article et visionnez le résultat.

Ci-dessous le résultat de cette procédure que vous devez obtenir.


 

Ce texte pour garnir le cadre servant d'exemple...
Extrait de mon interview ...
- Peux-tu nous présenter ton blog ?
Comme son nom l'indique un peu de tout mais avec un thème général sur l'informatique :
HTML, CSS, Astuces, Cuisine, Jeux, Humour, Photos... donc un bricabrac, un fourtout, un pêle-mêle... une foire à la trouvailles !!!

Les modifications du CSS, du HTML, seront expliquées et le code source libre gratuitement...

 

Des logiciels utiles, des tutoriels sur le HTML et le CSS peuvent vous aider à personnaliser votre blog ou créer un site web.


Inscrivez-vous au forum ou au TCHAT
Toutes les questions sont admises pour vous aider en informatique ou autre.
Cliquez sur le lien suivant:

 



Pour exemple j'ai collé ci-dessous un deuxième cadre et modifier son contenu.

Je sélectionne le texte puis je saisi le contenu de l'article qui viendra recouvrir ma pub. Le nouveau texte est totalement paramétré par le style incorporé dans la balise du cadre, il est donc possible de créer plusieurs modèles ce qui facilitera votre travail et aidera beaucoup ceux qui ne maîtrisent pas l'informatique.




Pour ceux qui maîtrisent le langage HTML, en ouvrant le composeur en mode HTML, pourront modifier le style que j'ai mis dans la balise <DIV> et ainsi faire des variantes. Si vous êtes sous Diz Perso, la propriété MAX-WIDTH: 520px; pourra être mise en plus grande largeur, selon la taille de votre "contenu". Pour ceux en modèle graphique, en principe selon la taille de votre "rubriques",si cet espace est plus petit pas de problème le cadre se logera avec une marge MARGIN: auto;.

Voilà le code du style inséré dans la balise :

<DIV style="POSITION: relative; MAX-WIDTH: 520px; BORDER: 4px inset #FF9900; PADDING: 5px; BACKGROUND: #FFFFCC; MARGIN: auto; FONT-FAMILY: Trebuchet MS,Arial; FONT-SIZE: 12pt; COLOR: #000066; TEXT-ALIGN: left;">




Ce système ouvre de nombreuses possibilités de création d'outils pour nous aider à construire nos articles. Pourquoi pas avoir une série de fichiers prêts à l'emploi... je pense que si vos com's sont favorables, cet article aura une suite importante.

Voilà un beau projet d'avenir, donc à bientôt...






14/04/2008
7 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 132 autres membres