10 sencillos pero útiles consejos y trucos de Dreamweaver para principiantes

Adobe Dreamweaver es una poderosa herramienta para diseñadores web. Dreamweaver proporciona una superficie de diseño visual y un editor de código para desarrollar sitios web. Si bien tiene ventajas y desventajas, su amplia gama de características le permite crear sitios web de manera efectiva.

Aquí hay 10 consejos y trucos de Dreamweaver simples pero útiles para principiantes.

1. Eliminar los saltos de línea:

Al copiar texto de un documento, correo electrónico o archivo de Word a Dreamweaver, termina con saltos de línea al final de los párrafos o líneas. El carácter de ruptura de enlace <br> señala el final de las líneas, por lo que cualquier texto posterior se mostrará en la línea debajo de él. Estos caracteres son invisibles y, por lo tanto, es difícil eliminarlos. Aunque Dreamweaver no suele resaltar estos caracteres, puede cambiar la configuración en el menú de preferencias para que el programa muestre un pequeño icono amarillo que indica saltos de línea. Una vez que los saltos de línea estén visibles, puede eliminarlos fácilmente.

2. Recuerde definir un sitio:

La gente a menudo confunde trabajar en Dreamweaver con trabajar con un documento de Word. Sin embargo, diseñar un sitio no se trata de crear un archivo, se trata de crear un sitio con una colección de archivos interrelacionados, como imágenes, archivos JavaScript, páginas web y archivos CSS. Los usuarios que no entienden esto a menudo olvidan la importancia de configurar un sitio. Dreamweaver proporciona un proceso de sitio fácil de configurar. Proporciona información sobre la ubicación de los archivos de su sitio y le permite seleccionar una de las muchas herramientas de administración de Dreamweaver. Estas herramientas transfieren su archivo a su servidor web, verifican enlaces rotos y crean un sitio con plantillas.

3. Aumente el tamaño de fuente de su código:

Con la función de Dreamweaver para ajustar el tamaño de la fuente, puede aumentar el tamaño del código en unos sencillos pasos. Para aumentar el tamaño de las fuentes, primero seleccione Dreamweaver > Preferencias, luego haga clic en la categoría Fuentes, luego seleccione el nuevo tamaño y haga clic en Aceptar. Esto te ayudará a que el código sea fácilmente legible y puedas trabajar en el desarrollo de tu sitio web durante un largo período de tiempo sin forzar la vista.

4. Apague la taquigrafía de fondo CSS:

Una de las características de CSS es la propiedad de fondo. Esta característica le permite agregar color o imágenes a su fondo. La propiedad abreviada de fondo de Dreamweaver reduce el código de 3 líneas a una sola línea que define una propiedad de imagen, color y repetición. Sin duda, esto puede facilitar la definición de propiedades de fondo, pero si deja una propiedad en la versión abreviada, el navegador web la tratará como "ninguna". Por ejemplo, al cambiar los fondos si especifica solo la propiedad de la imagen, el navegador web eliminará el color existente del fondo anterior. Por lo tanto, es mejor desactivar la taquigrafía de fondo CSS para evitar este problema.

5. Copie estilos con CSS Designer:

Con CSS Designer puedes mejorar visualmente los estilos de tu página web. Si desea usar más funciones del diseñador CSS, haga clic con el botón derecho en cualquier selector para usar las operaciones de copia o duplicado. Estas opciones le permiten copiar estilos de un selector a otro. Estos estilos incluyen fondo, texto, animación o borde. Si desea copiar un selector completo, use el comando de consulta estándar duplicado o duplicado en medios para un enfoque específico. Estos atajos le ahorrarán mucho tiempo y también mantendrán un estilo consistente.

6. Elimina la barra de navegación:

Adobe Dreamweaver CS5 viene con una barra de herramientas de navegación del navegador. Esta barra de herramientas se creó para usarse con la opción de vista en vivo de Dreamweaver. Puede encontrar ambas opciones en la ventana del documento. La vista en vivo se usa para ver una vista previa de su página web. Con una vista en vivo, puede hacer clic en el enlace y pasar a una página en particular. La barra de herramientas de navegación muestra la ubicación de la nueva página y le permite navegar entre páginas fácilmente. Puede ocultar esta barra de herramientas cuando no esté en uso desmarcando la opción de navegación del navegador en la sección Ver > Barras de herramientas.

7. Administre sus archivos:

Todos los archivos están presentes en el panel Archivos cuando configura un sitio con Dreamweaver. Puede usar este panel de archivos para muchas funciones, como cambiar el nombre, mover y resaltar el nombre del archivo. Esto es probablemente común y es posible que sepa todo esto, pero las páginas web son diferentes de los archivos normales. Las páginas web tienen imágenes, enlaces a otras páginas web y estilos CSS de un archivo de hoja de estilo externo. Cambiar el nombre de una imagen, página web o archivo CSS normalmente a través del explorador de Windows puede provocar enlaces rotos. Mientras que Dreamweaver le permite actualizar los enlaces automáticamente si mueve o cambia el nombre de un archivo usando el panel de archivos. De esta manera no hay enlaces rotos.

8. Optar por el selector de etiquetas:

Al aplicar el estilo de clase CSS, agregar o eliminar la etiqueta con precisión puede ser difícil. Para seleccionar líneas precisas, el selector de etiquetas de Dreamweaver es el mejor. El selector de etiquetas se coloca en la parte inferior izquierda de la ventana del documento. Este selector muestra todo el HTML y otras etiquetas presentes alrededor del texto. Puede seleccionar etiquetas específicas haciendo clic en una etiqueta disponible en la barra de selección de etiquetas. La etiqueta resaltada representa que la etiqueta está seleccionada.

9. Usa fragmentos:

Dreamweaver proporciona fragmentos que son bits básicos de código que pueden ahorrar mucho tiempo. Los fragmentos se sincronizan a través de Creative Cloud, lo que garantiza que estén disponibles en todos los sistemas. Puedes asignar los más usados ​​como atajo de teclado. Si desea editar atajos, abra el diseño de atajos de teclado y duplique el conjunto estándar. Luego, seleccione la categoría de fragmentos debajo de la sección de comandos para seleccionar sus favoritos. A continuación, encontrará una lista de todos los fragmentos disponibles, incluidos los que cree. La parte más difícil es averiguar qué combinaciones de teclado no se utilizan. Pero esto se puede resolver usando un modificador.

10. Conecta WordPress y Dreamweaver:

Dreamweaver y WordPress forman un gran equipo. Puede diseñar y modificar páginas de WordPress con el conjunto de herramientas de archivos dinámicos de Dreamweaver. Este conjunto de herramientas incluye filtros personalizados, archivos relacionados dinámicamente y sugerencias de código específicas del sitio. La parte difícil es averiguar cómo trabajar con otras páginas del sitio con Dreamweaver. Primero debe comenzar con el archivo index.php presente en la raíz del sitio de WordPress y navegar desde allí. Puede agregar una ruta directamente a la dirección web o usar la función Dreamweaver para hacer clic en un enlace. Una vez que se muestra la página, el CSS y otras herramientas de Dreamweaver están bajo su control.

Adobe Dreamweaver es excelente para crear un sitio web. Junto con funciones básicas como finalización de código, colapso de código y resaltado de sintaxis, viene con algunas funciones avanzadas como introspecciones de código y verificación de sintaxis en tiempo real. Estos consejos mencionados lo ayudarán a construir su sitio web de manera más eficiente. Si está buscando herramientas para crear un sitio web sin mucha codificación, consulte estas herramientas de creación de sitios web.