Présentation de Dreamveawer SI28 Phan Van Jérôme Séance n°1
Le plan LE HTML: Définition; Structure. Dreamveawer: Présentation; Création d’un site; Présentation de certaines fonctionnalités : Affichage; Tableaux; Images; Cadres; Hyperliens.
LE HTML Définition: Html : HyperText Markup Language : langage de mise en forme de documents hypertextes Hypertexte : textes qui contiennent des références croisées Hypertexte : Mise en forme : propriétés de formatage du texte (titre, liste, gras, tableau…)
Lien utile: http//:perso.wanadoo.fr/fredmar/formweb/balisesHTML.html LE HTML Notion de balises: Le HTML se code à l’aide de balises, que se soit pour la mise en page ou bien pour le formatage de texte, chaque action possède sa propre balise. Quelques balises les plus courantes: <B>…</B> ou <STRONG>…</STRONG> Texte en gras <U>…</U> Texte souligné <BR>…</BR> A la ligne <CENTER>…</CENTER> Texte centré <UL><LI>…</UL> Liste à puces <OL><LO>….</OL> Liste numéroté … Lien utile: http//:perso.wanadoo.fr/fredmar/formweb/balisesHTML.html
LE HTML Structure: Le HTML n’est pas un langage propre à dreamveawer, c’est à dire que l’on peut également faire une page HTML à l’aide de n’importe quel logiciel de traitement de texte comme word ou bien le bloc note. Sa structure reste la même. <html> <head> <title> Initiation au HTML </title> </head> <body> Le contenu de votre page se mettra ici </body> </html>
Présentation de Dreamveawerr
Dreamveawer Groupe de panneaux Barre d’insertion Zone de travail Inspecteur de propriétés
Outils de formatage de texte Dreamveawer Outils de Mise en forme Outils de formatage de texte BARRE D’INSERTION Objets communs Insertion de tableaux Ancre nommée Image Liens de messagerie Calque hyperliens Tableau
INSPECTEUR DE PROPRIETE Dreamveawer INSPECTEUR DE PROPRIETE Outils de formatage de texte (gras, italique, centré, ….) Créer un lien
Dreamveawer Groupe de panneaux Gestion des styles et des comportements Bibliothèque de code Utilisation de données dynamiques Gestion des pages et des ressources du site (arborescence)
Pour créer un nouveau site : Dreamveawer –Création d’un site Pour créer un nouveau site : « site » « nouveau site »; Suivre les instruction de l’aide à la définition du site: Entrez le nom du site; Ne pas utiliser de technologie serveur; Modifier les copies locales et préciser le répertoire du site; Choisir le réseau local (indiquer à nouveau le répertoire du site); Ne pas activer l’archivage et l’extraction; Cliquez sur « terminer ». Votre site doit apparaître désormais dans l’arborescence du panneau de droite.
Dreamveawer – Choix de l’affichage Vous avez le chois entre trois modes d’affichage CODE : Vous créez votre site en langage HTML à l’aide des balises. CREATION : Bien plus graphique idéale pour débuter. CODE ET CREATION : Votre écran est coupé en deux, la partie supérieure est en code HTML et la partie inférieur donne un aperçue de se que vous créer.
Dreamveawer Objet : tableau Colonne n°1 Ligne n°1 Colonne n°2
Dreamveawer Objet : Image Passez en mode création, et insérez un calque afin de positionner votre image à l’endroit exact ou vous la désirez Le calque (« Insertion » « calque ») Vous pouvez déplacer l’image où bon vous semble. Pour insérez une image ctrl+alt.+I ou bien menu « insertion » « image »
Les aperçus se feront désormais a partir de la page frameset Dreamveawer Objet : Cadres ou frames Toujours en mode création, menu « insertion » puis « cadres ». Deux nouvelles pages apparaissent dans l’arborescence de votre site: « UntitledFrame » juste la page html de votre cadre; « UntitledFrameset »liens entre votre première page et le cadre. Les aperçus se feront désormais a partir de la page frameset
Dreamveawer Objet : hypertextes Pour insérer un lien hypertexte: « insertion », « hyperlien ». Texte avec le lien Adresse web ou bien adresse du fichier _blank affichage dans une nouvelle fenêtre. _self affichage dans la fenêtre en courante. _parent ou _top affichage par écrasement de toute la page