DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.

Présentation au sujet: "DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek."— Transcription de la présentation:

1 DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek

2  Introduction au HTML  Présentation du Dreamweaver  Création d’un site local  Formatage du texte  Les liens  Insertion des images  Les tableaux  Les cadres

3 Introduction au HTML SI28

4 Qu’est ce que le HTML ? HTML : HyperText Markup Language : Langage permettant de mettre en forme des informations sur Internet. Langage de programmation utilisé pour créer des documents hypertextes composé de textes avec des balises. HyperText : Se dit d’un document qui comporte des liens hypertextes, ( mécanisme de renvois permettant de passer directement d'une partie d'un document à une autre, ou d'un document à d'autres documents). Introduction au HTML

5 Principales balises à retenir ,…, Formatage du texte  Sauter une ligne  … Pour un nouveau paragraphe  Lien hypertexte  Insertion d’image  espace vide  Tableau avec 2 lignes, dont la première contient un seul colonne et la deuxième contient 2 colonnes.

6 Exemple de page HTML SI28 Présentation du DreamWeaver Séance 1 03/10/2006 La navigation La navigation dans un site Web Formes, structures et outils de navigation Synopsis Exposé : Dreamweaver 1

7 Site de l'UV : SI28 (suite)

8  Dreamweaver est un éditeur HTML. Il permet de construire un site Internet facilement car l’utilisateur peut travailler graphiquement plutôt qu’avec du code informatique.  Ce logiciel renferme aussi un grand nombre d’outils, chargés d’aider l’utilisateur à créer ses applications Web. DreamWeaver, c’est quoi ?

9 Espace de Travail Propriétés Objets communs Panneaux rétractables Définition de l’espace de travail

10 Panneau « Objets communs » Hyperlien lien de messagerie ancre nommée Tableau Insérer la balise Div Images MédiasDate Inclusion côté serveur Commentaire Modèles Sélecteur de balise Définition de l’espace de travail

11 L’inspecteur de « propriétés » appliquer un format changement de police couleur de la police alignement du texte créer un lien indentation de texte Définition de l’espace de travail

12 Si le site n’est pas crée correctement, Dreamweaver crée par défauts des liens absolus et non relatifs Etape très importante car si mal effectuée, lors du dépôts du site sur le FTP aucun lien ne fonctionnera Création d’un nouveau site

13 Dans la barre des menus allez sur : Site  Nouveau site La boite de dialogue « définition du site » s’ouvre. Sélectionner l’onglet « Avancé » Création d’un nouveau site

14 Dans le champs « nom du site » saisissez le nom de votre site Web Sélectionnez le « dossier racine local », et créez un dossier sur votre poste de travail. Celui-ci contiendra tous les fichiers de votre futur site Web (pages Html, images,…) Création d’un nouveau site

15 Vous pouvez désormais visualiser dans la fenêtre fichier votre site « Mon Premier Site » ainsi que son arborescence Création d’un nouveau site

16 3 modes d’affichage : - « Code » : voir le code HTML uniquement - « Fractionner » : affichage simultané du code et de la page - « Création » : voir la page HTML Modes d’affichage

17 Formatage de texte Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans tout éditeur de texte.

18 Formatage de texte Mise en forme du texte : 3 choix possibles  Menu texte  Panneau de propriété  Clique droit sur le texte sélectionné

19 Menu texte

20 Panneau de propriété

21 Différents types de liens : lien absolus, externe au site (ex : http://wwwcyg.utc.fr/si28/ ) lien internes au site (ex : accueil.html) lien vers une même partie du document, effectués à partir de signets lien de messagerie Lien hypertexte Lien de messagerie Ancre nommée Liens

22 Adresse web ou bien adresse du fichier Texte avec le lien Fenêtre où sera affichée la page du lien : _blank  affichage dans une nouvelle fenêtre. _self  affichage dans la fenêtre courante. _parent ou _top  affichage par écrasement de toute la page Lien hypertexte  « insersion »  « hyperlien » Liens

23 Créer une Ancre Nommée  « insertion », « ancre nommée » Créer un lien vers une ancre nommée  sélectionner le texte ou l’image  dans la zone « Lien » de l'inspecteur Propriétés, tapez le signe dièse (#) et le nom de l'ancre Liens

24 Pour modifier un calque (position, dimensions…), cliquez sur un bord d’un calque.Des petites poignées apparaissent. Pour modifier la position, cliquez sur un bord de la cellule et faites glisser Pour pouvoir manipuler aisément un image sous Dreamweaver, il faut l’insérer au préalable dans un calque Insertion d’images

25 Carte-image : image ayant été divisée en régions, ou « zones réactives ». Lorsque vous cliquez sur une zone réactive, une action est exécutée, telle que l'ouverture d'un nouveau fichier. Sélectionnez l'image  Dans l'inspecteur Propriétés « Nom de la carte »  Sélectionnez l'outil Cercle ou Polygone et amener le pointeur sur l'image pour créer une zone réactive.  Complétez l'inspecteur Propriétés de la zone réactive Insertion d’images

26 Image survolée : image qui, lorsqu'elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.  composée d’une image principale et d’une image secondaire Pour créer une image survolée  «Insérer», «Commun», «Image survolée»  complétez les options de la boîte de dialogue.  « Aperçu dans le navigateur ou F12 » Insertion d’images

27 Les tableaux Deux mode de création Mode Standard Mode de mise en forme

28 Les tableaux Mode Standard

29 Les tableaux

30 Mode Mise en forme Les tableaux

31 Les cadres Permettent de faire apparaître plusieurs zones indépendantes appelées qui correspondent à autant de fichiers html distincts. Créer des cadres pour un document web consiste à définir une structure, un fichier qui définit l'organisation des cadres au sein du document. C'est le jeu de cadres ou cadre parent. Par ailleurs, chaque cadre du jeu de cadre (= cadre enfant) contient un document html. On peut choisir parmi plusieurs jeux de cadres prédéfinis, qu'il est possible de modifier ensuite.

32 Les cadres

33 TopFrame LeftFrame MainFrame

34 Les cadres

35 La position des cadres

36 Les cadres Liens et insertion d’images

37 Les cadres Bordure