Utilisez Dreamweaver pour modifier rapidement les balises de pages Web
Auteur：Eve Cole
Date de mise à jour：2009-06-01 01:02:43
Je me demande si vous avez l'habitude d'écrire du code à la main. Par exemple : si vous souhaitez insérer un morceau de code CSS ou un morceau de code Javascript dans une cellule, comment pouvez-vous le faire rapidement et facilement ?
Bien que Dreamweaver nous ait fourni la vue code, nous devons toujours la trouver manuellement et basculer entre les deux. Bien que vous puissiez également utiliser la vue code et la vue édition pour coexister, cela occupera la moitié de l'espace de l'écran, rendant la zone d'édition déjà petite encore plus encombrée. Existe-t-il une meilleure façon ? La réponse est oui.
Prenons Dreamweaver 8 comme exemple, en supposant que la disposition des panneaux Dreamweaver de chacun est la disposition par défaut. Vérifiez s'il y a une rangée de petites étiquettes au-dessus du panneau des propriétés. (Si vous n'utilisez pas MX, la balise est dans la barre d'état) Par exemple : si vous créez un nouveau document HTML vierge, la petite balise ci-dessus doit être <body>. Veuillez regarder l'image ci-dessous :
Le lieu marqué d'un cadre rouge sur la photo est notre protagoniste aujourd'hui. Jetons d'abord un coup d'œil aux "balises wrap". Tapez quelques mots sur la page, sélectionnez-les, sélectionnez « Wrap Tags » dans le menu contextuel, entrez « <strong> » (à l'exclusion des guillemets) dans la boîte de dialogue contextuelle Wrap Tags, puis appuyez sur Entrée. Le texte précédemment sélectionné a-t-il été mis en gras ? Accédez au code source et jetez un œil. Le texte sélectionné est-il entouré de balises <strong> ? Vous pouvez essayer d'ajouter d'autres balises, telles que : <a>, <p>. Vous pouvez également saisir des attributs directement ici. Par exemple : <p style="color:#CC0000">. Voici uniquement une explication générale. Si vous avez des questions, veuillez consulter l'aide de Dreamweaver.
Parlons de la façon d'appliquer le sélecteur de balises.
Lorsque nous déplaçons le curseur sur le texte en gras tout à l'heure, nous constaterons qu'il y a un <strong> supplémentaire après <body>. Cela signifie qu'il y a une balise <strong> en dehors du texte où se trouve le curseur, et une balise <body> en dehors de la balise <strong>. Ensuite, ajoutons un autre tableau, déplaçons le curseur dans le tableau et voyons la structure des balises. Je pense que les amis ayant des connaissances de base en HTML devraient être capables de le comprendre facilement.
Supposons que nous souhaitions maintenant insérer un tableau et utiliser CSS pour déplacer le tableau vers le bas de 10 pixels. Insérez d’abord un tableau, puis déplacez le curseur dans le tableau. À ce stade, vous devriez voir les mots <body><table><tr><td> sur le sélecteur de balises. Cliquez ensuite avec le bouton droit sur l’étiquette du tableau et vous verrez quatre options. Supprimez les balises, modifiez les balises, définissez les classes et définissez les identifiants.
Supprimer la balise : supprimez la balise. (Certaines balises spéciales ne peuvent pas être supprimées. Par exemple : <table>, <tr>, <td>, <body>...)
Modifier les balises : attacher des attributs aux balises, modifier les attributs, etc.
Définir la classe : attachez une classe à cette balise. (c'est-à-dire les catégories de CSS)
Définir l'ID : attachez un identifiant à cette balise. (c'est-à-dire l'ID CSS)
Ici, nous choisissons de modifier la balise, puis d'ajouter l'attribut style="margin-top:10px" à la fin, ce qui est la même que la manière normale d'écrire du code source. Appuyez ensuite sur Entrée. Le montage est terminé. Si vous ne voyez pas l'effet dans Dreamweaver, veuillez utiliser le navigateur pour en afficher un aperçu.
Il existe une autre façon qui pourrait vous plaire. Sélectionnez Fenêtre → Inspecteur de balises Lorsque vous sélectionnez une balise, tous les attributs de la balise actuellement sélectionnée seront affichés ici. Vous pouvez également modifier rapidement ici. Les attributs saisis ici n'ont pas besoin d'inclure des guillemets. Appuyez sur Entrée après la modification pour confirmer.
Ici, nous vous expliquons seulement la méthode et espérons que tout le monde pourra en bénéficier.
