On va découvrir la magie de ....
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
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….
Construire un site web local Conclusion Programme à suivre: Présentation L ’espace de travail Construire un site web local Conclusion
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.
L’espace de travail L'espace de travail
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
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
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
Création d'un nouveau site Dans la barre des menus, aller sur Site Nouveau site ……
Suivez les instructions, ou passez en mode Avancé
Le mode Avancé
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 ».
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
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
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
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
Insérer une image Comme dans Microsoft Word, vous pouvez insérer une image directement: Menu Insertion Image (ou Ctrl+Alt+I)
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
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.
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 :
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 !
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
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
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é.
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
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
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
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
Après vous allez donner l’adresse de lien dans la partie URL Dans notre cas, nous allons choisir URL : http://www.utc.fr 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
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
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
Lien vers l’UTC Lien vers photo.html Lien de messagerie
Les tableaux Se placer sur l’onglet Tableau Cliquer sur le bouton
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
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)
Propriétés des cellules Définir le une cellule comme intitulé de ligne ou de colonne Alignement du texte dans la cellule
Les tableaux : exemples simples
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 !)
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
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
Résultat….
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