la dernière fois, on a apprit ensemble comment ouvrir sa page dans dreamweaver, formater le texte, mettre de la couleur en arrière plan.

Aujourd'hui, on va ensemble voir comment ajouter des cadres.

Les cadres sont nécéssaires lorsque l'on veut disposer plusieurs rubriques sur notre pages et les séparer.

Ils servent aussi à la pmise en page.On peut ainsi faire ce qu'on appelle des 3 fonds.

Ces cadres peuvent également être visible ou pas à nos visiteurs.Tout est question de disposition.

 

Avant tout, ouvrir votre dreamweaver.Choisir la rubrique ouvrir et allez chercher votre index.

Vous verrez que pour certains, la page s'ouvre sur une page de code:

Rien de méchant, rassurrez vous.Remarquer en haut de ce code que vosu avez 3 onglets : CODE/FRACTIONNER/CREATION.

Le mode CODE:

C'est la que nous ferons du changement quand on en aura (ajouter du script, modifer la source de notre page, etc..)

Le mode FRACTIONNER

Cela permet d'avoir une partie haute pour le code, et la partie bassse notre page.Ainsi on peut ajouter du code, script, et voir les changements directements.

Le mode CREATION

C'est la ou se trouve notre page avec la mise en pge justement.

 

Maintenant passons a nos cadres.

Vous avez en haut de votre dream, la barre des outils comme ceci:

Encadrer de rouge, c'est cette outil dont nous allons nous servir, il se nomme tableau.

Cliquez dessus:

Il suffit simplement d elire pour comprendre ce tableau, reste a savoir ce que l'on décide de faire.

Personnelment je travaille toujours en pixels.

A vous de faire des essais pour voir ce que cela donne concernant le nombre de lignes et colones.

Pour cette leçon , je vous demanderais à titre d'exemple de suivre les même données que moi, vosu changerait le tout une fosi le système comprit.Donc ici  3 lignes, 3 colonnes.

Ensuite pour savoir si votre colonne va a gauche, en haut ,les deux, la aussi amusez vous a voir ce que cela donne, mais la aussi pour l'exercice on en restera à aucun.

 

La largeur du tableau

Le premier exemple est un tableau avec une largeur de 100 pixels.Le second 200 pixels.Ces deux mesurent son très bien quand on sait que si l'on veut ajouter du texte ou des images, le tableau s'agrandit de lui même selon ce qu'on y ajoute.

Cliquez ok pour valider votre cadre.

 

Nous allons maintenant apprendre a modifier ce cadre.Pourquoi ne pas l'assortir au reste de notre page ?

Pour cela, mettez vous sur la dernière bordure tout a gauche de ce tableau.Cliquez dessus pour la sélectionner, vous devriez avoir votre tableau de sélectionner comme ceci:

 

C'est la que notre barre d'outil du bas va nous servir de nouveau, car en effet, elle se modifie d'elle même pour suivre ce que l'on va faire.On obtiens donc à ce stade, une barre d'outil exprès pour notre cadre comme ceci:

Et oui, vous retrouvez vos lignes et colones.Si jamais on fait une erreur, pas la peine de le supprimer ce tableau, il suffira de changer les chiffres ici.

 

Ce qui nous intéresse maintenant c'est la partie de droite.La aussi, nous n'ajouterons pas d'image d'arrière plan, car tant que la page sera pas en ligne on ne saura la voir.

Notre tableau étant toujours sélectionner:

 

LE REMPLISSAGE

Comme son nom l'indique il set a remplir le cadre.Plus on mettra un chiffre élevé, plus le cadre sera gros.Faîtes le teste avec le chiffre 10 pour voir, puis remettez le à 0.Pour appliquer le chiffre , il suffit de l'acrire dans la case et de cliquer sur sa page.

 

L'ESPACEMENT DE CELLULE

La aussi comme son nom l'indique il permet de mettre un espace entre les cellule.Un minimum de 3 c'est très bien, faîtes des tests pour voir.

 

ALIGNER

L'allignement sert à placer son cadre ) droite, à gauche ou centre.Je travail toujours centrer, avous de voir ce qu'il vous plaît le mieux:

 

BORDURE

Comme pour psp, c'est la taille de la bordure.Personnellement je mets souvent un minimum de 3 quand je veux qu'on la voit et 0 quand je souhaite qu'elle reste invisible pour mes visiteurs:

 

BORDURE DE 3:

BORDURE DE 0:

 

Passons aux couleurs.

Votre tableau toujours sélectionner vous avez ceci dans la barre d'outil du bas:

Comme on la vue dans la leçon 2, il suffit de cliquer sur le petit cadre gris pour prendre une couleur au choix la ou l'on veut.

L'arrière plan c'est le fond du tableau, on peut bien sûre le laisser comme c'est ou en choisir une, chez moi ce sera noir.

Le contour ce sera la couleur de la bordure, pour moi ce sera blanc.Voici ce que cela donne jusqu'à présent:

 

On a fait un tableau c'est bien, on a mis de la couleur, jusque la c'est bien aussi.Et si on lui ajouter du texte à ce tableau ?

 

Il y a pa splus simple, c'est comme faire du psp.Il suffit de placer la souris dans le cadre voulut et de commencer à taper son texte.DEs que l'on pose la souris dans un carré, ça clignote.

Bien sure vosu avez apris a changer la couleur de votre police, la taille etc.Regarder votre barre d'outil du bas pour ne pas écrire noir sur noir lol!!

Exemple:

Mon cadre est sur fond noir je vais écrire en blanc ce qui me donnera :

 

RESULTAT

Remarquer que dans la colonne de droite, le texte se met à la ligne.Si je n'ai pas envie que ce soit le cas, je devrais jouer avec le taux de remplissage de mon tableau.Plus je mettrais gros plus mon texte sera sur une seule ligne.

 

Si vous avez tout suivit jusqu'ici pas a pas, il ne vous sera pas difficile de faire les changements nécéssaires à voter tableau.

 

Je ne vous demande pas de captures d'écran sauf si vous bloquez quelque part, cela m'aidera à mieux vous aider.

 

J'attends de vous un tableau colorer, avec du texte les filles.

 

Aussi, je vais dans la semaine, vous mettre en chargement un logiciel pour transférer vos pages.Pour celles qui ont déja leur site, mais qui veulement quand même en créer un nouveau pour les exercices et par la suite le modifier pour donner vie à ce site , c'est le moment de s'y préparer.

Pour les autres, je ne sais pas si vous avez une préférence, je vous recommande quand même celui que j'utilise : Lycos, c'est gratuit.

Si vous avez meilleur proposition, j'attend vos requêtes.Sinon dans la semaine on ira toutes s'inscrire en même temps pour pouvoir lancer déja sa page index en tant qu'exercice et non de page définitive.Cela nous permettra de travailler avec des images, des fonds etc en ligne.