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 :
- Sélectionnez mon texte publicitaire pour rédiger par dessus votre article
- Vous collez si vous le souhaitez d'autres cadres, en mettant 1 ou 2 espaces entre eux, en pressant la touche [Entree]
- 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 :
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...
Commentaires
Chrisithaque le 20/06/2008 à 14:06:14Ops ! Nouveau look, profil automatique....! Du changement dans ce blog ! J'aime mille fois mieux ce relookage, il est plus lisible plus épuré plus simple à parcourir pour le novice qui arrive en faux-semblant de bloggeur ! Voilà ! J'ai utilisé le cadre pour voir..formidable...L'avantage c'est que je dois pouvoir le relooker différemment selon la catégorie de mes articles... Mais le souci c'est comment je fais ? Je vais dans chaque balise du texte ? Car la balise DIV style (globale), je ne la vois pas.Merci de m'éclairer ! Encore CHAPEAU BAS pour ton travail d'ingénieur, de coach, de designer et tutti quanti !!!
Chrisithaque le 27/06/2008 à 13:42:03
Concernant le problème évoqué sur Blog4ever par rapport à ce fameux cadre, j'ai parachevé mon petit souci, si tu veux aller vérifier, il y a du nouveau sur mes observations... J'ai trouvé la solution, merci encore pour ce cadre qui, bien mis au point, va certainement révolutionner le Design du blog, encore merci !
hardware site : hardware.blog4ever.com | le 07/09/2008 à 21:56:24
Je ne savait pas où mettre mon commentaire, alors je le met la :)
Je trouve que le nouveau style de ton menu gauche et des menus <H2></H2>, <H3></H3> ... est magnifique !!! Cela donne un autre style à ton blog, ça adouçi les formes avec les arrondis, c'est vraiment super !
Bon @+ et à bientôt !
hardware site : hardware.blog4ever.com | le 14/09/2008 à 02:25:32
Pas mal du tout le menu du haut, c'est une bonne idée mais j'avais une petite préférence pour l'ancien menu ^^
@+
hardware site : hardware.blog4ever.com | le 14/09/2008 à 02:29:00
Wow ! l'interface de ton blog change automatiquement ? a chaque actualisation de la page ? Tu as fait ça en CSS ?