Your Name Your Title Your Organization (Line #1) Your Organization (Line #2) DREAMWEAVER CS4 Jean-baptiste MIAZGA Jean-baptiste BAUDIER Fabien DELAHAYE.

Présentation au sujet: "Your Name Your Title Your Organization (Line #1) Your Organization (Line #2) DREAMWEAVER CS4 Jean-baptiste MIAZGA Jean-baptiste BAUDIER Fabien DELAHAYE."— Transcription de la présentation:

1 Your Name Your Title Your Organization (Line #1) Your Organization (Line #2) DREAMWEAVER CS4 Jean-baptiste MIAZGA Jean-baptiste BAUDIER Fabien DELAHAYE

2 Le HTML Le html ou hypertext markup language est un format de données. C'est un language de balisage (classe de language specialisé dans l'enrichissement d'information textuelle). Il permet la structuration et la mise en forme du contenu des pages, l'inclusion de multimedias, de formulaires de saisie, etc... Les balises indiquent la façon dont le document sera au final présenté.

3 Html : exemple « siteHTML.txt » Initiation au HTML Bienvenue sur ma première page web cliquez ici pour accéder au site de SI28 Et cliquez sur l'image pour accéder directement au site de l'UTC!

4 Utilisation du HTML dans un bloc note Le langage HTML peut être utilisé sans logiciel, dans un bloc-notes classique Le résultat pourra être visualisé dans le navigateur de votre choix (Internet Explorer, Firefox, Chrome, etc.)

5 Etapes de création: Téléchargez le dossier de fichiers sur FileX Créez un dossier “bloc note” dans votre espace de travail Z Insérez dans ce dossier l'image “UTC” correspondant au logo de l'UTC Ouvrez le fichier “code bloc note” et copiez son contenu dans le bloc note Enregistrez le fichier, 2 fois: Une fois au format.txt (par défaut) Une fois au format.html Dans le dossier “bloc note” cliquez sur l'icone correspondant! N'hésitez pas à tester les liens!

6 Qu'est ce qu'un site WEB Definition : C'est un ensemble de fichiers (pages HTML, images, son, vidéo, animations flash, etc...) et de dossiers, formant l'arborescence du site, placés dans le même espace du disque dur d'un poste de travail (phase d'élaboration) ou d'un serveur (phase de publication) et liés entre eux par des liens hypertextes.

7 DREAMWEAVER CS4 Fait partie de la suite Adobe Est paru en septembre 2008 Editeur de HTML «what you see is what you get» Propose deux modes d’édition: Mode création: mise en page directe Mode d’édition du code HTML Pas de compétence particulière nécessaire Très intuitif Mais payant

8 DREAMWEAVER

9 ESPACE DE TRAVAIL DREAMWEAVER CS4 Au démarrage de Dreamweaver CS4, un écran d’accueil s’affiche, composé de trois menus regroupant différents liens 1. Le premier menu permet d’accéder rapidement aux derniers documents utilisés 2. Le deuxième menu vous invite à créer une nouvelle page vierge en sélectionnant son type 3. Le troisième menu permet d’accéder à de nombreuses démonstrations vidéos

10 ESPACE DE TRAVAIL DREAMWEAVER CS4 Creation d'une page vierge HTML Fenêtre Document Barres d’outils et boutons de sélection du mode d’affichage (Code, Fractionner et Création). Barre de menus Panneau Insertion dans lequel il est possible de sélectionner plusieurs catégories à l’aide d’une liste déroulante Panneau Propriétés Page active ; si elle possede un asterisque, elle est modifiée et pas enregistrée

11 CREATION D'UN NOUVEAU SITE Pour crée un nouveau site, sélectionnez le menu Site>Nouveau site ou Site>Gérer les sites et cliquez sur le bouton Nouveau site pour définir un site.

12 DEFINIR UN NOUVEAU SITE EN MODE AVANCE Depuis la fenêtre de définition de site, cliquez sur l’onglet Avancé. Nous accédons alors à une fenêtre présentant simultanément toutes les options. Il est imperatif de nommer la 1ere page index.html car le navigateur cherchera cette page lors de la publication du site.

13 CREE UN NOUVEAU DOCUMENT Pour créer un nouveau document, allez dans le menu Fichier>Nouveau. Dans la fenêtre d’invite, choisissez Page vierge, puis HTML comme type de page et pour la mise en forme. Les options d'un nouveau document

14 LIQUIDE OU ELASTIQUE ? Lorsque l’on souhaite utiliser l’un des modèles de pages proposés par Dreamweaver, quatre dénominations permettent d’identifier le comportement des gabarits : - Fixe - Liquide - Elastique - Hybride. Les pages fixes ont des structures déterminées en pixels. Leurs tailles sont donc fixes. Les blocs des pages liquides sont exprimés en pourcentage. Ces pages ont des tailles modifiables. Les pages élastiques s’agrandissent ou se réduisent par une combinaison de touches du clavier. Les pages hybrides sont à la fois liquides et élastiques.

15 CREATION DE JEUX DE CADRES Les jeux de cadres permettent de diviser la fenêtre du navigateur en plusieurs cadres ayant chacun un fonctionnement indépendant. Chaque cadre peut afficher une page différente possédant sa propre URL. L’une de ces pages peut être, par exemple, un menu dans lequel nous aurions intégré des liens vers des pages de contenu qui s’afficheraient dans le second cadre suivant les parametres definis dans le panneau propriété.

16 CREATION DE JEUX DE CADRES

17

18 Il faudra ensuite remplir les noms des différents cadres avant de valider.

19 FORMATAGE DU TEXTE 3 façons de formater son texte : Format > texte Clic droit sur le texte sélectionné Le panneau propriétés

20 LES HYPERLIENS Les pages d’un site Web sont reliées par des hyperliens placés sur des textes ou des images. Les hyperliens constituent la base de toute interactivité. Créer un lien relatif sur un texte ou une image Deux methodes principales, par saisies ou par pointage (conseillé) : 1. Sélectionnez un ou plusieurs mots ou cliquez sur une image pour la sélectionner. Tout ce qui est sélectionné deviendra actif 2. Dans le champ Lien du panneau Propriétés (fenetre>propriétés), indiquez le chemin entre le document actuel et le document à charger, si page WEB, ne pas oublier “http://”. 1. Sur le document de travail, sélectionnez un ou plusieurs mots ou encore une image. 2. Cliquez sur l’icône Pointer vers un fichier, située à droite du champ Lien dans le panneau Propriétés puis déplacez le curseur sur le fichier à lier dans le panneau Fichiers.

21 LES HYPERLIENS Liens par saisie : lien par pointage :

22 INSERER DES IMAGES 1. Cliquez sur l’icône Images de la catégorie Commun du panneau Insertion. La fenêtre s’ouvre pour vous permettre de choisir l’image. 2. Cochez l’option Système de fichiers (proposée par défaut). 3. Naviguez à l’intérieur de l’arborescence de votre site et sélectionner une image. Attention, celles-ci doivent impérativement être placées dans votre site afin que Dreamweaver puisse créer correctement le chemin liant votre page à votre image. Dans le cas contraire, lorsque vous validerez, un message d’alerte vous demandera de copier l’image dans votre site ; accepter.

23 INSERER DES IMAGES 4. La boîte de dialogue Attributs d’accessibilité des balises d’image s’ouvre alors. Renseignez le champ nommé Texte secondaire car c’est lui qui fournira une description de l’image dans les navigateurs ne les affichant pas.

24 INSERER DES IMAGES SURVOLEES Pour ajouter une image survolée cad une image qui changera lors du passage de la sourie dessus ou qui ouvrira un lien, allez dans le menu insertion > objets images > image survolée

25 INSERER DES IMAGES SURVOLEES Cette fenêtre d'insertion apparaît alors, remplissez et cliquez sur OK.

26 INSERER UN SON Dans le menu insertion commun, cliquez sur la petite flèche de media puis plug-in

27 INSERER UN TABLEAU 1. Cliquez sur l’icône Tableau de la catégorie Mise en forme du panneau Insertion. La boîte de dialogue de création de tableau s’ouvre :

28 INSERER UN TABLEAU 3. Renseignez les différents champs, puis validez. 4. Le tableau s’affiche dans la page selon les caractéristiques choisies. Son titre apparaît et ses cellules sont vides. Le panneau propriété permet de modifier l'aspect du tableau, la couleur d'arriere plan, etc...

29 A vous de jouer maintenant! Merci de votre attention.