Exercice 1 ..... Voir le résultat de l'ensemble graphique ***

Le mode création..pour visualiser l'apparence de l'interface.
le mode code...pour vérifier le code du CSS de la page.

BASE ...apprendre les éléments des menus

EN MODE CRÉATION ......
--- Explication et présentation de votre espace de travail. ---

1. En mode création: menu insertion - commun

...

Nous utiliserons: insérer une image et un tableau.



2. En mode création: menu mise en forme - standard... Une autre manière d'insérer un tableau

....

..dessiner un calque... Un calque est un espace dessiné sur notre interface pour placer du texte ou des images.

3. EN BAS DE VOTRE SURFACE DE TRAVAIL: au dessus de propriété, clic sur table pour accéder aux détails du contenu de votre tableau.

.. .

4. à droite de votre surface de travail , vous avez les règles CSS qui définissent l'apparence de votre interface.

.......faire un clic sur + et une fenêtre s'ouvre. Définir le css de vos pages ( couleurs...texte.. ect)



......une fenetre s'ouvre... en 1. au menu déroulant choisir body voir 2.

......ici vous changer la couleur du texte..du BG....( pour voir: cliquez sur les différentss .éléments des .catégories) image ci-bas.

6. BODY..inscrire vos préférences le type ( écriture) puis un clic sur arrière- plan pour choisir la couleur du BG.

....... finalement appliquer le style css.


EN MODE CODE.....



1. Lorsque vous ouvrez un nouveau document; enregistrez-le sous le nom de index.html

2. vous aurez ceci:
...<title>base 1</title>
............ici entre la rècle CSS c'est à dire entre les balises <head> et </head>
...</head>
...<body>ici sera placé le contenu
...</body>
...</html>

3. Vous devez regardez souvent le mode code et le mode création afin de comprendre ce que vous réalisez. ( surtout lorsque vous ajoutez du contenu)

4. Maintenant nous allons faire l'exercice pour appliquer ces premieres connaissances.






exercice 1 : créer un dossier dans le quel vous placerez vos fichiers

1. Fichier/ nouveau...clic sur créer. pour valider.

2. Enregistrer sous : index.html
.... Faire CTRL+s= pour enregistrer votre document puis F12 pour le visionner. Vous voyez une page blanche.
3. Donner un titre ..voir image mode création ( mon titre est: dreamweaver - base1)
4. Donnez une couleur au background et au texte. Nouvelle règle CSS Le petit + ( voir no 4)
5. CTRL+s et F12 pour enregistrer et regarder ( le doc est bleu)
6. En mode code......copier/ coler ceci:

* {scrollbar-base-color:#C7E3EF;
}
div {
position: relative;
}
....CTRL+s et F12 pour enregistrer et regarder votre interface.

7. En mode création: insérer un tableau OK pour valider.

8. Clic sur table au dessus de propriété ( voir no 3 de mode création)
...

9. CTRL+s et F12 pour enregistrer et regarder votre travail.

10. Placez 10 dans l'espac. de cellule au lieu de 0 ( voir la différence en enregistrant et regarder.)
11. En mode création: Placez votre curseur dans la cellule 1 ...écrire votre titre
12. Surligner le titre comme ceci:.

13. Dans la propriété...Format ..menu déroulant:
.....Choisir : En-tête 4. Automatiquement votre texte change de grandeur.

14. Dans votre PSP créer une image de la grandeur 760 par 250 environ et placez-la dans votre dossier.
..... ( l'image doit entrer dans la cellule 2 de votre tableau)
15. En mode création: placez votre curseur dans la cellule 2 ...insérer l'image. ( voir no 1 menu insertion)
16. En mode création: placez votre curseur dans la cellule 3 et écrire votre texte
17. En mode création: placez votre curseur dans la cellule 3 et signer votre document. ( voir le résultate)
18. Enregistrer votre interface...

19. suite dans l' exercice de base2.



Créations © psp imagine 2008 - Copyright - Tous droits réservés