Travailler avec des fragments de code
Employer les fragments de code peut être un vrai gain de temps. Les fragments de code sont représente une parcelle de code qui peut être réutilisable à volonté dans tous les sites que vous créez avec Dreamweaver. Vous pouvez insérer des fragments de code existants fournis directement dans Dreamweaver ou vous pouvez en créer facilement selon vos besoins. Les fragments de code peuvent être programmés en HTML, en Javascript, en CFML, en asp, en JSP, etc.
Créez un nouveau document :
1 Créez un nouveau document Fichier > Nouveau > HTML
2 Enregistrez ce document, Fichier > Enregistrer sous > frag_code (par exemple)
Insérer des fragments de code
Une multitude de fragments de code sont disponibles dans Dreamweaver. Pour ouvrir le panneau des Fragments de code, Fenêtre > Fragments de code.
Nous allons insérer un fragment de code de navigation, un fragment de code de contenu et un fragment de code de pied de page :
1 Choisissez l’endroit où vous voulez insérez un menu de navigation
2 Dans le panneau Fragments de code, cliquez sur [+] Navigation > Tabulation, une liste de fragments de code se déroule. Double-cliquez sur « Onglets élémentaires ».
Dans votre document, un menu apparaît
3 Enregistrez votre document Fichier > Enregistrer
Ajouter un fragment de code de contenu
1 Maintenant, nous allons insérer du contenu à notre document. Pour cela, cliquez en dessous du menu de navigation créé précédemment.
2 Dans le panneau Fragments de code, cliquez sur [+] Table des matières, une liste de fragments de code se déroule. Choisissez « bordure d’un pixel > Texte B ».
Un tableau apparaît avec un contenu fictif.
3 Enregistrez votre document Fichier > Enregistrer
Insérer un fragment de code de pied de page
1 Pour finir, nous allons insérer un pied de page à notre document. Pour cela, cliquez en dessous du tableau de contenu créé précédemment.
2 Dans le panneau Fragments de code, cliquez sur [+] Pieds de page, une liste de fragments de code se déroule. Double-cliquez sur « Elémentaire : texte concis ».
Un tableau apparaît avec un contenu fictif.
Modifier les fragments de code de notre document
1 Ouvrez l’inspecteur de propriété (fenêtre > propriétés), s’il n’est pas déjà ouvert.
2 Nous allons modifier la couleur de fond de la cellule "Lorem" du menu de navigation. Pour cela, cliquez dans cette cellule.
3 Dans le champ ar-pl de l’inspecteur de propriété, une couleur (#999999) est définie par défaut. En cliquant sur le petit carré, choisissez une couleur via la palette proposée (#0099FF par exemple).
4 Maintenant, nous allons modifier la couleur de fond de la cellule "Ipsum" du menu de navigation. Pour cela, cliquez dans cette cellule.
5 Dans le champ ar-pl de l’inspecteur de propriété, cliquez sur le petit carré et choisissez une couleur via la palette proposée (##00CCFF par exemple).
6 Répétez l’opération pour les cellules « Dolar » et « Amit » avec les couleurs de votre choix.
Modifiez également le tableau « Fragments de code de contenu » avec les couleurs de votre choix. Une couleur de fond de tableau est définie par défaut. Pour la changer, cliquez sur le sélecteur de tag <table> comme sur l’image ci-dessous :
Ensuite, cliquez sur le petit carré et choisissez une couleur via la palette proposée.
7 Effectuez les modifications nécessaires selon vos besoins et votre créativité.
8 Enregistrez votre document Fichier > Enregistrer
9 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera…).
Enregistrez un code en tant que Fragment de code
Nous allons sauvegarder le fragment de code de navigation que nous avons modifié de façon à pouvoir le réutiliser ultérieurement.
1 Cliquez sur une bordure du tableau avec le bouton droit de la souris et sélectionnez « Créer un fragment de code ».
2 Une boîte de dialogue apparaît.
3 Entrez un nom et une description pour ce nouveau fragment de code.
4 Dans « type de fragment de code », sélectionnez l’option « Insérer le bloc » et « type d’aperçu », sélectionnez l’option « Code ».
5 Cliquez sur OK. Le nouveau fragment de code apparaît dans le panneau « Fragments de code ».
6 Dans ce panneau, vous pouvez organiser les fragments de code en créant de nouveaux dossiers et en glissant les fichiers dedans.
NOTE : Vous pouvez aussi créer des fragments de code en cliquant avec le bouton droit de la souris dans votre document HTML (sans sélectionner de tableau ou autre élément). Sélectionnez « Créer un fragment de code ». Libre à vous de choisir les options selon vos besoins.
