Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
SI28 Dreamweaver- Séance 1
Dermu Alex Dupré Marc Antoine 1
2
Dreamweaver : séance 1 Qu’est-ce qu’une page web?
Création d'un site dans Dreamweaver: -jeu de cadres -formatage du texte, liens internes et externes -insertion d'images -insertion d’un son -tableaux Page 2
3
Qu’est-ce qu’une page web?
Une page web est un fichier .html Ce fichier possède et référence un contenu La structure de la page est écrite en langage HTML Code source Page 3
4
Qu’est-ce qu’une page web?
Le HTML Ce langage est manipulable dans un éditeur de texte basique. La visualisation du résultat nécessite un navigateur Web (Internet Explorer, Mozilla Firefox, …). Le contenu de la page est structuré avec des balises HTML : <mabalise>…contenu… </mabalise> Page 4
5
Html : exemple « siteHTML.txt »
<head> <title> Dreamweaver séance 1 </title> </head> <body> <h1> <center> Mon premier site </center> </h1> <p> Bienvenue sur mon premier site. Celui-ci se fait dans le cadre de l'uv SI28 enseigné à l'UTC. </p> Pour plus d'infos : <ul> <li>Accueil du <a href=" SI28</a> en accès externe. </li> <li>Dreamweaver, <a href=" site officiel</a> </li> </ul> <p> <center> <img src="ddream.jpg"> </center> </p> </body> </html> Page 5
6
Dreamweaver DREAMWEAVER Page 6
7
Dreamweaver : présentation
Interface entre le créateur du site et les technologies web ( HTML, … ) Avantages de Dreamweaver : - l’utilisateur n’a pas à connaître la technique pour créer un site - le fonctionnement est plus intuitif que la manipulation de code brut - « wysiwyg » : What You See Is What You Get 2 modes d’utilisation : « Creation » ou « Code » Page 7
8
Dreamweaver : interface
Page 8
9
Site internet Dreamweaver permet de créer/gérer des sites :
Site local : les fichiers sont sur votre ordinateur Site en ligne : les fichiers sont sur un serveur ( UTC ou autres ) Attention : Il faut toujours passer par Dreamweaver pour gérer ses fichiers Page 9
10
Site internet chemin absolu : pour créer un lien vers un fichier situé en dehors du site courant. Exemples : chemin relatif : pour les liens locaux, offre une plus grande souplesse si vous devez déplacer des fichiers au sein de votre site. Exemples : ../image/ddream.jpg accueil.html Cependant, lorsque vous créez un lien local (entre deux documents du même site), vous n'avez en général pas besoin de spécifier l'URL complète du document vers lequel vous créez le lien ; il est préférable d'indiquer un chemin relatif, à partir du document actif ou de la racine du site. Page 10
11
Téléchargement Télécharger le fichier .zip à l’adresse :
Décompresser sur votre espace Z:\ Le résultat attendu se trouve à l’adresse : Page 11
12
Création d’un site local
Barre des menus > Site > Nouveau site… Onglet Avancé : donner un nom de site « Site1 » + definir le dossier local Page 12
13
Jeux de cadres Permet d’afficher des pages différentes dans des cadres
14
Jeux de cadres Afficher les bordures des cadres en mode Création
Affichage > Assistances visuelles > Bordures de cadre Créer un jeu de cadres : Barre d’insertion Mise en forme Cadres Page 14
15
Formatage du contenu textuel
Trois façons de formater son texte : - Menu>Texte - Sélection du texte + clic droit - Panneau propriétés Page 15
16
Liens Il existe 3 types de liens : Barre d’insertion « Commun »
Hyperlien Ancre nommée Lien de messagerie Page 16
17
Liens Sélectionnez le texte ou l'image que vous souhaitez convertir en lien URL. Utilisez l'inspecteur Propriétés et l'icône Pointer vers un fichier pour créer des liens Page 17
18
Insérer une image Barre d’insertion : Commun
Choisissez une image qui se placera au niveau de votre curseur Les zones réactives : Sélectionnez l’image Dans le menu du bas choisissez une forme et dessinez la sur l’image Nommez la zone réactive et inscrire le lien correspondant Page 18
19
Image survolée Image survolée : l’image change lorsqu’on passe le curseur dessus Barre d’insertion Commun Images Image survolée On sélectionne deux images et un lien Page 19
20
Son et video Procédure identique pour les films et sons
Dans la catégorie Commun de la Barre Insertion : Médias Plug-in. Page 20
21
Tableau : mode standard
Dans la catégorie Commun de la Barre Insertion Définir le nombre de colonnes,de lignes, la largeur de bordure, l’entête etc. Page 21
22
Tableau : mode mise en forme
Les tableaux peuvent être utilisés pour faire de la mise en page Barre d’insertion : catégorie Mise en forme mode Mise en forme Insérer un tableau Dessiner une cellule Page 22
23
Merci de votre attention
Fin de la présentation Merci de votre attention Page 23
Présentations similaires
