Utilice Dreamweaver para editar rápidamente etiquetas de páginas web
Autor：Eve Cole
Fecha de actualización：2009-06-01 01:02:43
Me pregunto si tienes la costumbre de escribir código a mano. Por ejemplo: si desea insertar un fragmento de código CSS o un fragmento de código Javascript en una celda, ¿cómo puede hacerlo de forma rápida y cómoda?
Aunque Dreamweaver nos ha proporcionado la vista de código, todavía tenemos que buscarla manualmente y alternar entre ambas. Aunque también puede usar la vista de código y la vista de edición para coexistir, ocupará la mitad del espacio de la pantalla, lo que hará que el área de edición, que ya es pequeña, esté aún más concurrida. ¿Existe una mejor manera? La respuesta es sí.
Tomemos Dreamweaver 8 como ejemplo, asumiendo que el diseño del panel Dreamweaver de todos es el diseño predeterminado. Compruebe si hay una fila de etiquetas pequeñas encima del panel de propiedades. (Si no está utilizando MX, la etiqueta está en la barra de estado) Por ejemplo: si crea un nuevo documento HTML en blanco, la etiqueta pequeña de arriba debe ser <cuerpo>. Por favor mire la imagen a continuación:
El lugar marcado con un marco rojo en la imagen es nuestro protagonista de hoy. Primero echemos un vistazo a las "etiquetas de ajuste". Escriba algunas palabras en la página, selecciónelas, seleccione "Etiquetas de ajuste" en el menú contextual, ingrese "<strong>" (sin incluir las comillas) en el cuadro de diálogo emergente Etiquetas de ajuste y luego presione Entrar. ¿El texto seleccionado previamente se ha puesto en negrita? Vaya al código fuente y observe si el texto seleccionado está rodeado por etiquetas <strong>. Puede intentar agregar algunas otras etiquetas, como: <a>, <p>. También puede ingresar atributos directamente aquí. Por ejemplo: <p estilo="color:#CC0000">. Aquí hay sólo una explicación general. Si tiene alguna pregunta, consulte la ayuda de Dreamweaver.
Hablemos de cómo aplicar el selector de etiquetas.
Cuando movimos el cursor al texto en negrita hace un momento, encontraremos que hay un <strong> adicional después de <body>. Esto significa que hay una etiqueta <strong> fuera del texto donde se encuentra el cursor y una etiqueta <body> fuera de la etiqueta <strong>. A continuación, agreguemos otra tabla, muevamos el cursor a la tabla y veamos la estructura de las etiquetas. Creo que los amigos con algunos conocimientos básicos de HTML deberían poder entenderlo fácilmente.
Supongamos que ahora queremos insertar una tabla y usar CSS para mover la tabla hacia abajo 10 píxeles. Primero inserte una tabla y luego mueva el cursor dentro de la tabla. En este momento, deberías ver las palabras <body><table><tr><td> en el selector de etiquetas. Luego haga clic derecho en la etiqueta de la tabla y verá cuatro opciones. Elimine etiquetas, edite etiquetas, establezca clases y establezca ID.
Eliminar etiqueta: elimina la etiqueta. (Hay algunas etiquetas especiales que no se pueden eliminar. Por ejemplo: <table>, <tr>, <td>, <body>...)
Editar etiquetas: adjuntar atributos a etiquetas, modificar atributos, etc.
Establecer clase: adjunte una clase a esta etiqueta. (es decir, categorías de CSS)
Establecer ID: Adjunte una ID a esta etiqueta. (es decir, ID de CSS)
Aquí, elegimos editar la etiqueta y luego agregamos el atributo style="margin-top:10px" al final, que es la misma que la forma normal de escribir código fuente. Luego presione enter. La edición está completa. Si no puede ver el efecto en Dreamweaver, utilice el navegador para obtener una vista previa.
Hay otra forma que te puede gustar. Seleccione Ventana → Inspector de etiquetas Cuando seleccione una etiqueta, todos los atributos de la etiqueta actualmente seleccionada se mostrarán aquí. También puedes editar rápidamente aquí. Los atributos ingresados aquí no necesitan incluir comillas. Presione Entrar después de editarlos para confirmar.
Aquí sólo os contamos el método y esperamos que todos puedan beneficiarse de él.
