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

 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

Introduction au HTML SI28

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

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.

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

Site de l'UV : SI28 (suite)

 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 ?

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

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

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

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

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

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

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

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

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

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

Menu texte

Panneau de propriété

Différents types de liens : lien absolus, externe au site (ex : ) 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

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

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

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

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

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

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

Les tableaux Mode Standard

Les tableaux

Mode Mise en forme Les tableaux

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.

Les cadres

TopFrame LeftFrame MainFrame

Les cadres

La position des cadres

Les cadres Liens et insertion d’images

Les cadres Bordure