dimanche 25 mai
INSERER UN ALBUM
Il faut l'adresse de l'image de présentation et le lien permettant d'accéder à l'album.
L'adresse de l'image :
Le plus prudent est de coller l'adresse obtenue dans le block note.
L'adresse de l'album (le lien)
Comme précédemment, on colle l'adresse dans le b.n.
On "rédige" ensuite la ligne de commande :
Attention ! chaque signe et intervalle a son importance !
Il n'y a plus qu'à copier cette ligne et à la coller dans la page du blog ou l'on veut l'album.
lundi 10 mars 9 h 45
- Lien
pour une page du blog
Le lien pour accéder à une page est :
http://mariebrouillard.canalblog.com/archives/catégorie/index.html
si la page a été postée dans la catégorie « divers »,
le lien est :
http://mariebrouillard.canalblog.com/archives/divers/index.html
Le titre de la page n’intervient pas.
Les
albums
CREATION
Cliquer sur CONTENU
Cliquer sur Albums photo
Cliquer sur Ajouter un nouvel
album
Donner un nom à l’album (obligatoire)
Sélectionner l’image que tu veux
pour la vignette de l’album (facultatif)
Description…. Facultatif
Cliquer sur Ajouter un nouvel
album
Suivre
les indications pour la suite.
AFFICHAGE
Il peut être automatique.
Dans ce cas, les vignettes albums
sont affichées les unes en dessous des autres
Soit sur la page d’accueil
Soit sur toutes les pages de
messages
On peut aussi les afficher album
par album comme on veut et où on veut.(comme sur mon blog de photos sur la page d'accueil)
Si tu choisis cette solution, je
ferai des copies d’écran, ce sera plus facile à expliquer.
3. LE BLOG
Présentation
TAILLE
Actuellemement ton blog est affiché
avec une largeur de 800px, (largeur par
défaut).
On peut modifier cette largeur.
La définition de l’écran la plus
utilisée est 1280x1024
Ta définition d’écran étant de 1024x768,
on peut afficher la blog avec une largeur de 1024 px.
COULEURS
Presque tout est possible dans ce
domaine.
On peut aussi mettre une image
comme fond…
AFFICHAGE
La page d’accueil est importante.
Celle que je t’ai proposée n’y
est guère (j’ai fait simple pour que tu vois le fonctionnement). Je pense qu’il
faudrait l’arranger…
Vois d’autres sites ou blogs si
tu n’as pas d’idée bien définie.
- ORGANISATION
Il faut penser que si une page contient
énormément de photos, elle sera plus longue à télécharger.
Donc, si tu penses avoir
plusieurs dizaines de photos dans une catégorie (les albums ne comptent pas),
il faudra envisager une nouvelle catégorie
Par exemple , pour passions :
passions1
passions2
…..
Il est important que tu
réfléchisses à cela car il est plus facile de créer que de modifier. On est
souvent obligé de tout reprendre quand on modifie et c’est un peu la galère.
lundi 3 mars21 h 30
Pour les photos, c'est tout bon ! Tu maîtrises !
Encore 1 ou 2 pages d'insertion et tu n'auras même plus besoin de réfléchir !
Tu peux améliorer en modifiant la hauteur des photos comme je t'explique plus bas (height="140") et enlever width (mais c'est du détail) !
La page de recette :
Voici ta page DIVERS en HTML
table width="800" border="0" id="table1"><tbody> ---> début de tableau
<tr> ----------->début de ligne
<td><p style="text-align: center;"></p> ----> début de colonne
</td> ----> fin de colonne
<td> ----> début de colonne
<p ><a tagert="_blank" target="blank" href="https://storage.canalblog.com/26/42/426723/22824140.jpg"><img height="150" (IMAGE) src="https://storage.canalblog.com/26/42/426723/22824140_p.jpg" alt="soupe_champenoise" /></a> </p>
<p>
</td> ----> fin de colonne
<td> ----> début de colonne
<p ><a target="_blank" href="https://storage.canalblog.com/13/74/426723/22825055.jpg"><img height="134" (IMAGE) src="https://storage.canalblog.com/13/74/426723/22825055_p.jpg" alt="oranges_aux_oignons" /></a></p>
</td> ----> fin de colonne
<p><strong><u>Petite recette rapide de la soupe champenoise :</u></strong></p>
<p>1 louche de cointreau </p>
<p></p>
<p>1 louche de pulco</p>
<p>1 louche de sucre de canne</p>
<p>réparer le mélange ci-dessus la veille et mettre au frigo</p>
<p>Le jour même, verser dans un saladier avec des glaçons et verser une bouteille de champagne</p>
<p>A boire avec modération </p>
<p></p>
<p><strong><u>Petite collation qui va très bien avec la soupe champenoise, les oranges aux oignons</u></strong></p>
<p><strong><u>SURPRENANT MAIS NOUS AVONS OSES ET C EST SUPER</u></strong></p>
<p>Emincez finement les oranges dans le sens de la hauteur. Epepinez et enlevez la partie blanche au cntre de chaque rondelle. Couchez les en lit sur un plat de service peu profond et couvrez les d'oignons hachés. Ensuite posez dessus des olives noires ou vertes, saupoudrez de poivre et de sel et arrosez d'huile d'olive. Servez très frais en apéritif.....sur des petites assiettes individuelles avec petites cuillères..... Bon apéritif</p>
<p></p>
</tr> ----------->fin de ligne
</tbody></table> --> fin de tableau
Combien ton tableau a-t-il de lignes ? Et combien de colonnes, donc de cases ?
Ton texte est-il dans une case ?
Tu vois où est l'erreur ?
Pas représentable mais en gros, on pourrait le représenter ainsi :
Je pense que tu dois pouvoir rectifier facilement....
lundi 3 mars18 h 30
Sélectionne les <> et supprime-les puis recentre tes images et ton texte.
Ce sera impeccable !
Lundi 3 mars 16 h
Je n'ai fait aucun lien donc cette page est invisible sur le blog.
Si tu veux mieux voir, fais un copier/coller dans ton traitement de texte.
Voyons un peu....
Pour accéder au langage HTML et inclure le tableau, clique sur <>
Voilà ta prose !
Au clavier, je tape sur la touche "Entrée" pour y voir plus clair :
Si j'encadre par <td> et </td> l'image est dans une case du tableau.
Voilà ce que ça donne au final :
<table border="0" width="800" id="table1">
<tr>
<td>
<p><a target="_blank" href="https://storage.canalblog.com/94/24/426723/22498636.jpg"><img width="97" height="150" border="0" src="https://storage.canalblog.com/94/24/426723/22498636_p.jpg" alt="Copie_de_mariepetite" /></a>
</td>
<td>
<a target="_blank" href="https://storage.canalblog.com/27/52/426723/22801531.jpg"><img width="113" height="150" border="0" src="https://storage.canalblog.com/27/52/426723/22801531_p.jpg" alt="IMGP0097" /></a>
</td>
<td>
<a target="_blank" href="https://storage.canalblog.com/56/99/426723/22802762.jpg"><img width="108" height="150" border="0" src="https://storage.canalblog.com/56/99/426723/22802762_p.jpg" alt="Copie_de_francoise" /></a>
</td>
</tr>
<tr>
<td>
<a target="_blank" href="https://storage.canalblog.com/51/59/426723/22802825.jpg"><img width="144" height="112" border="0" src="https://storage.canalblog.com/51/59/426723/22802825_p.jpg" alt="Copie_de_laurent" style="width: 144px; height: 112px;" /></a>
</td>
<td>
<a target="_blank" href="https://storage.canalblog.com/36/85/426723/22802922.jpg"><img width="103" height="150" border="0" src="https://storage.canalblog.com/36/85/426723/22802922_p.jpg" alt="papapetit" /></a>
</td>
<td>
href="https://storage.canalblog.com/40/74/426723/22802976.jpg"><img width="150" height="101" border="0" src="https://storage.canalblog.com/40/74/426723/22802976_p.jpg" alt="lucile" /></a>
</td>
</tr>
<tr>
<td>
<a href="https://storage.canalblog.com/72/62/426723/22805359.jpg" target="_blank"><img width="150" height="113" border="0" alt="IMGP0108" src="https://storage.canalblog.com/72/62/426723/22805359_p.jpg" /></a>
</td>
<td>
<a href="https://storage.canalblog.com/30/44/426723/22805403.jpg" target="_blank"><img width="113" height="150" border="0" alt="IMGP0104" src="https://storage.canalblog.com/30/44/426723/22805403_p.jpg" /></a>
</td>
<td>
<a href="https://storage.canalblog.com/52/82/426723/22805495.jpg" target="_blank"><img width="94" height="150" border="0" alt="peperepierrememeremarguerite" src="https://storage.canalblog.com/52/82/426723/22805495_p.jpg" /></a>
</td>
</tr>
<tr>
<td>
<a href="https://storage.canalblog.com/73/98/426723/22805653.jpg" target="_blank"><img width="137" height="150" border="0" alt="memereclemence" src="https://storage.canalblog.com/73/98/426723/22805653_p.jpg" /></a>
</td>
<td>
<a href="https://storage.canalblog.com/02/53/426723/22805687.jpg" target="_blank"><img width="120" height="150" border="0" alt="Photo_0012" src="https://storage.canalblog.com/02/53/426723/22805687_p.jpg" /></a>
</td>
<td>
<a href="https://storage.canalblog.com/99/42/426723/22805778.jpg" target="_blank"><img width="150" height="112" border="0" alt="Photo_109" src="https://storage.canalblog.com/99/42/426723/22805778_p.jpg" /></a>
</td>
</tr>
<td>
<a href="https://storage.canalblog.com/04/13/426723/22806261.jpg" target="_blank"><img width="150" height="113" border="0" alt="IMGP0112" src="https://storage.canalblog.com/04/13/426723/22806261_p.jpg" /></a>
</td
</tr>
</table>
Il me reste à écrire les commentaires. J'aurais pu le faire en refaisant le tableau mais il vaut mieux que tu vois comment on fait.
Nous en sommes donc là :
Nous allons centrer toutes les photos dans leur case.
Clique sur la photo pour la sélectionner puis sur l'icone de centrage.
Il nous reste à écrire dessous
Clique A COTE de la photo et appuie sur ENTREE
Le curseur apparaît sous la photo pour écrire...
TERMINE POUR LE RATTRAPAGE.
Et maintenant, que vas-tu faire ?
Insérer une image dans la dernière case de la ligne.
s
Tu cliques dans la case. Le curseur clignotant apparaît
Tu n'a plus qu'à insérer ton image selon la procédure habituelle.
Tu la centres
Tu cliques à côté + ENTREE
et tu écris ton commentaire.
Et après ?
Ou tu continues dans le même tableau ou tu en fais un nouveau.
SUITE DU TABLEAU
Tu cliques sur <> et tu vas en bas de page
LE TABLEAU SE TERMINE AINSI : (sauf la référence de la dernière photo....)
<td>
<a
href="https://storage.canalblog.com/04/13/426723/22806261.jpg"
target="_blank"><img width="150" height="113" border="0"
alt="IMGP0112"
src="https://storage.canalblog.com/04/13/426723/22806261_p.jpg"
/></a>
</td
</tr>
</table>
Tu rajoutes
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
ce qui te donne une ligne de 3 cases.
<td>
<a
href="https://storage.canalblog.com/04/13/426723/22806261.jpg"
target="_blank"><img width="150" height="113" border="0"
alt="IMGP0112"
src="https://storage.canalblog.com/04/13/426723/22806261_p.jpg"
/></a>
</td
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
Tu reclique sur <> et tu obtiens :
Pour insérer une photo, tu sélectionne a (blanc dans bleu) et tu demandes l'insertion d'image.
Elle viendra dans la case du a.
Centrage...
Clic +ENTREE
Commentaire
NON, c'est pas fini!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Tu cliques sur <> pour aller dans l'éditeur de HTML
A la fin du tableau tu retrouve le code de l'image, quelque chose dans ce goût là :
<a href="https://storage.canalblog.com/04/13/426723/22806261.jpg"
target="_blank"><img width="150" height="113" border="0"
alt="IMGP0112"
src="https://storage.canalblog.com/04/13/426723/22806261_p.jpg"
Tu effaces width="150" et tu modifies height="140"
Toutes les images auront une hauteur de 140 px donc tout sera parfaitement alignés.
TU RECLIQUES SUR <>
TU VÉRIFIES. SI TOUT EST CORRECT TU POSTES.
S'IL Y A UN PROBLEME QUE TU N'ARRIVES PAS A CORRIGER
SURTOUT
NE POSTE RIEN
ÉDITE UNE AUTRE PAGE PUIS RÉÉDITE TA PAGE A PROBLEME
NOUVEAU TABLEAU
Tu vas dans l'éditeur de HTML et tu écris le squelette du tableau ( ou tu fais un copier/coller des lignes suivantes ) après la dernière ligne de la page.
<table border="0" width="790" id="table1">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
Tu repasses en mode normal pour insérer tes photos.
******************************************************
J'espère que tu vas maintenant t'y retrouver.
Va doucement, pas à pas, et vérifie plutôt 2 fois qu'une quand tu écris dans l'éditeur. Un signe oublié... et c'est la panique.
Et si tu bloques, appelle le plombier !!!!
Au fait, si tu veux mettre des albums.... je pense que tu auras besoin d'aide !
Redis-moi aussi si tu veux modifier des trucs.
Dans quelque temps (pas tout en même temps !!) je te dirais comment on fait.