Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
On va découvrir la magie de ....
2
Préambule : Définition du HTML
HTML = HyperText Markup Language = langage de mise en forme de documents hypertextes Hypertexte : textes qui contiennent des références croisées Mise en forme : propriétés de formatage du texte (titre, liste, gras, tableau…) Langage structuré à l’aide de balises
3
Lien entre document et fichier HTM
Un document, c’est : Un fichier .htm, c’est : <HTML> <HEAD> <TITLE>Ma 1ère page Web</TITLE> </HEAD> <BODY> ~~~~~~~~~~ (contenu du document) </BODY> </HTML> Une en-tête TITRE Un corps CONTENU Quelques balises courantes : <H1> à <H6> Titres par importance décroissante, <BR> Sauter une ligne, <P> Pour un nouveau paragraphe, <B> Pour mettre en gras, <UL>+<LI> Liste….
4
Construire un site web local Conclusion
Programme à suivre: Présentation L ’espace de travail Construire un site web local Conclusion
5
Présentation de Dreamweaver MX
Dreamweaver MX est un éditeur HTML destiné à la création de sites web professionnels et au développement de puissantes applications dynamiques pour Internet Dreamweaver MX facilite la mise en œuvre et fournit les outils appropriés pour élargir votre expérience dans le domaine de la conception web.
6
L’espace de travail L'espace de travail
7
Espace réservé pour l’image
Panneau OBJETS Commun Ancre nommée Image survolée Barre horizontale Données tabulées Hyperlien HTML fireworks Sélecteur de balise Calque Image Espace réservé pour l’image Date Lien de messagerie Commentaire Insérer un tableau HTML fireworks Barre de navigation
8
L’inspecteur de propriétés
alignement du texte passage en mode CSS couleur de la police appliquer un format Indentation du texte créer un lien Dimensions d’une cellule Mise en forme d’un texte Liens … Ce panneau permet de modifier les propriétés des objets insérés
9
Panneaux à droite Inspecteur de balises
bibliothèques de code Gestion des styles et des comportements utilisation de données dynamiques gestion des pages gestion des ressources du site
10
Création d'un nouveau site
Dans la barre des menus, aller sur Site Nouveau site ……
11
Suivez les instructions, ou passez en mode Avancé
12
Le mode Avancé
13
Suivre les instructions
On va choisir les options suivantes: Entrez le nom de votre site (ex: Mon website) Ne pas utiliser de technologie serveur Modifier les copies locales… et indiquer le répertoire du site Pour l’instant, nous travaillerons sur un serveur local, donc donnez encore une fois le répertoire de votre site Ne pas activer l’archivage et l’extraction Et enfin « terminer ».
14
Afficher Pour que l’affichage soit facile à voir, on peut choisir Création Le nom et l’adresse de notre website Les modes d’affichage: Code: voir seulement la code HTML Création: voir seulement l’espace de notre website Code et création: voir les deux Pour afficher les autres outils (règles, grilles …) vous pouvez choisir dans ce menu
15
Nous travaillons sur ce mode
Maintenant (et aussi par défaut), nous travaillons sur le mode standard Ici, c’est le mode Mise en forme Nous travaillons sur ce mode Attention
16
Nous allons créer un siteweb d’un étudiant de L’UTC
Insertion des textes Dans l’espace de travail, vous pouvez insérer des textes comme dans logiciel de Microsoft Word Exemple : Nous allons créer un siteweb d’un étudiant de L’UTC
17
Pour visualiser les pages avec un navigateur, sans quitter DW
Tapez F12 Ou : Fichier > Aperçu dans le navigateur Tapez ici votre texte Pour changer la taille, les couleurs …., utiliser ces outils
18
Insérer une image Comme dans Microsoft Word, vous pouvez insérer une image directement: Menu Insertion Image (ou Ctrl+Alt+I)
19
Mais vous allez avoir une problème car il est difficile de déplacer l’image
Solution: Avant d’insérer une image dans l’espace de travail, il faut dessiner un calque Dans le panneau Objets, cliquez sur l’icône Dessiner un calque Puis cliquez et faîtes glisser le curseur sur la zone de travail
20
Modification d’un calque
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 modifier les dimensions, servez-vous des poignées ou utilisez le Panneau Propriétés.
21
Insérer une image Cliquez à l’intérieur du calque précédemment créé puis cliquez sur le bouton Image dans le panneau Objets Ou :
22
Image survolée Une petite animation possible est de faire apparaître une image lorsqu’on survole une autre image Cliquer sur Insérer une image survolée dans le panneau Objets Choisissez l’image originale qui apparaîtra lorsque le site sera chargé Choisissez l’image survolée qui apparaîtra lorsque la première image sera survolée Tapez F12 et voyez le résultat !
23
Le mode Mise en forme C’est ici, le mode de mise en forme Le mode de mise en forme est le mode qui permet de structurer et d’agencer le plus facilement les éléments sur la page
24
Insertion d’une cellule de mise en forme
Quelque soit l’objet à insérer sur le site, il sera toujours incorporé à l’intérieur d’une cellule de mise forme Dans le panneau Objets, cliquez sur l’icône Dessiner la cellule de mise en forme Puis cliquez et faîtes glissez le curseur sur la zone de travail
25
Modification d’une cellule
Pour modifier une cellule (position, dimensions…), cliquez sur un bord d’une cellule. Des petites poignées apparaissent. Pour modifier la position, cliquez sur un bord de la cellule et faites glisser. Pour modifier les dimensions, servez-vous des poignées ou utilisez le Panneau Propriété.
26
Insérer un texte et des images
Pour insérer un texte: Insérez d’abord une cellule de mise en forme. Vous n’avez ensuite qu’à taper le texte dans la cellule Pour insérer des images : La méthode c’est la même pour insérer dans un calque Pour modifier un texte, utilisez le panneau Propriétés
27
Fond de la page Il y a deux façons pour modifier le fond d’une page: La barre des menus Modifier Propriété de la page cliquez sur le bouton droite de souris Propriétés de la page ou
28
Fond de la page (suite) Choisir une image pour le fond
Si vous n’aimez pas une image, vous pouvez choisir une couleur pour le fond
29
Création de liens Exemple:
Créer un lien vers le web de l’UTC quand on clique sur le mot UTC D’abord, tapez « UTC » . Ensuite, 2 possibilités : Soit appuyer le bouton à droite de souris Créer le lien Soit aller sur la barre des menus et choisir Modifier Créer le lien
30
Après vous allez donner l’adresse de lien dans la partie URL
Dans notre cas, nous allons choisir URL : Pour changer le lien, procéder de la même façon que Créer un lien mais choisir Modifier le lien. Pour effacer le lien, choisissez Supprimez un lien
31
Sélectionnez Voir mes photos et choisissez le ficher photos.html
Si vous voulez créer un lien vers un autre fichier dans votre website, vous pouvez choisir directement ce ficher dans la partie Créer un lien Exemple: Sélectionnez Voir mes photos et choisissez le ficher photos.html (bien entendu il y a déjà un fichier photos.html) Voilà ! C’est parti
32
Création d’un lien de messagerie
Sélectionnez le texte sur lequel vous voulez créer un lien Egalement 2 possibilités : Soit cliquer sur le bouton Soit aller sur la barre des menus Insertion Lien de messagerie
33
Lien vers l’UTC Lien vers photo.html Lien de messagerie
34
Les tableaux Se placer sur l’onglet Tableau Cliquer sur le bouton
35
Insérer un tableau Espacement entre le contenu et les bords de la cellule Cellules collées (0) ou séparées Epaisseur du cadre (0 pour invisible) Occupation de la page
36
Propriétés du tableau Mêmes options qu’à l’insertion
Couleurs des traits Efface les marges définies explicitement (le tableau se cadre sur le contenu des cellules)
37
Propriétés des cellules
Définir le une cellule comme intitulé de ligne ou de colonne Alignement du texte dans la cellule
38
Les tableaux : exemples simples
39
Les cadres (Frames) Principe : diviser une page Web en plusieurs parties Utilité : affichage permanent d’un logo, d’une barre de navigation… Différents formats sont proposés (mais tout reste envisageable : il suffit de taper le code HTML correspondant !)
40
3 zones, 4 pages 2 Logo/En-tête 3 1
Fenêtre principale (où vont s’afficher toutes les pages) Navigation 4 Définition du jeu de cadres
41
Définition des pages 1) Définition d’une page « En-tête »
2) Définition d’une page «Navigation» 3) Définition d’une page principale 4) Enregistrement du jeu de cadres
42
Résultat….
43
Conclusion Notions abordées : A venir… HTML bloc-notes
création du site sous dreamweaver formatage du texte insertion d’images insertion et gestion des tableaux gestion des cadres (frames) A venir… les calques les comportements les formulaires les feuilles de style les modèles mise en ligne du site
Présentations similaires
