10 consejos y trucos útiles de Dreamweaver para principiantes

Un usuario de Dreamweaver definitivamente considerará qué potencia es. Repleto de toneladas de características, opciones y uno de los más importantes de IDE (Entorno de Desarrollo Integrado) más conocido en el mercado actual. Puede que no cumpla con los criterios exigidos por algunos desarrolladores; sin embargo, Dreamweaver proporciona innegablemente un rango decente de herramientas de desarrollo, colaboración y codificación. Estas opciones y herramientas están ocultas bajo capas de menús lamentables menos intuitivos, por lo que ofrecemos tutoriales en la publicación de hoy..

Le mostraremos algunas de las funciones más poderosas de Dreamweaver para ayudarlo a acceder a ellas rápidamente, junto con muchos otros trucos útiles que le permitirán mejorar el tiempo de desarrollo y mejorar significativamente la calidad de su código. Lista completa despues del salto.

1. Vista dinámica con “Vista en vivo”

Ya sabemos que DW ofrece una vista estática de nuestros archivos abiertos, pero ¿qué pasa con "vistas dinámicas" de una aplicación como WordPress?

Primero, necesitamos contar DW qué ajustes utilizar para presentar nuestro"vistas dinámicas" correctamente. Para ello, seleccione Configuración de solicitud HTTP desde el Ver> Opciones de visualización en vivo menú, luego ingrese el OBTENER o ENVIAR Los parámetros que necesitas para ver tu aplicación correctamente..

Entonces cambiando a Vista en vivo en DW, sustituye a la antigua Vista de diseño panel con una representación de WebKit en vivo y con un píxel perfecto de su página; con Javascript en vivo, manipulaciones de DOM, consultas de base de datos, código del lado del servidor y CSS renderizado, en lugar de los íconos de marcador de posición que se ven en Vista de diseño.

2. "Code Navigator" es Firebug de DW

Dando un paso más, se trata de la Navegador de código y cuando en el Vista en vivo ventana, ALT-clic (Comando-Opción-clic para Mac) en cualquier lugar de la ventana, presenta instantáneamente el código que representa ese elemento. Similar a lo que podrías ver actualmente en Firefox / Firebug.

3. Congelación de JavaScript

Debido a la naturaleza dinámica de Ajax, muchas veces necesitamos interactuar con una página donde ciertos elementos no están renderizados o no están disponibles en la primera carga de la página. Estos son elementos que se inyectan en la página algún tiempo después de cargar la página. Aquí hay un ejemplo:

Es posible que desee cambiar el estilo de una información sobre herramientas que se implementa completamente en JavaScript. Antes de hoy, tendría que buscar metódicamente su camino a través de sus scripts para encontrar lo que se estaba creando y dónde.

En su lugar, intente esto:

Render tu página en Vista en vivo, luego pulsa F6 para congelar JavaScript en cualquier momento, lo que le permite dirigir y analizar el código relacionado con cualquier elemento dinámico en la página.

4. El siguiente mejor amigo de Live View: "Live Code"

Cuando usas Vista en vivo, también puedes encender Código vivo. Código vivo actualizará su código mientras se desplaza, hace clic e interactúa con elementos y elementos en el Ventana de visualización en vivo!

5. Finalización automática de JavaScript

Dreamweaver viene con un código HTML y CSS completo y inteligente., pero ¿qué pasa con Javascripts? Si codifica jQuery o Prototype en Dreamweaver, entonces debería saber que hay extensiones de API que permiten completar el código Javascript. Reduce la escritura necesaria y puede ser bastante útil para los codificadores rápidos..

Haga clic aquí para leer más, o descargar:

• Extensión jQuery API para Dreamweaver
• Extensión API de prototipo para Dreamweaver

6. Embellecer los códigos sobre la marcha

¿Su página de códigos se ve como líneas de código desorganizadas y desorganizadas? Utilizar el Aplicar formato de fuente Preséntelo y reformatéelo exactamente según sus preferencias. Para limpiarlos rápidamente, haga clic en Formato del código fuente icono en la parte inferior de la Barra de herramientas de codificación (Editar> Barras de herramientas> Codificación) y seleccione Configuraciones de formato de código para configurar su formato preferido.

También puede acceder a la opción de formato desde Comandos> Aplicar formato de origen o solo aplíquelo a un bloque de código seleccionado seleccionando el Aplicar formato de origen a la selección opción.

7. Obtener widgety

Solo haga clic en el Extender el icono de Dreamweaver (parece un engranaje) en la barra de aplicaciones y seleccione Buscar widgets web. Esto lo llevará al Adobe Exchange, donde puede encontrar widgets adicionales de proveedores como Yahoo !, JQuery y muchos otros..

8. Subversion y Dreamweaver

Y sí, Dreamweaver admite Subversion (SVN). Para los desarrolladores que usan SVN para mantener el control de revisión de su proyecto, esta podría ser una buena noticia. El desarrollador de Dreamweaver Andrew Voltmer discute Cómo puedes usar Subversions con Dreamweaver.

9. No más estilos redundantes

Muchas personas usan Dreamweaver como una forma de actualizar el contenido visualmente, como un procesador de textos. Antes de Dreamweaver CS4, esto podría resultar en reglas de CSS redundantes como .clase 1, .clase 2, y así. En Dreamweaver CS4, simplemente cambie su Inspector de propiedades a HTML Modo (haga clic en el icono HTML a la izquierda del Inspector) y le dirá adiós a todo ese CSS redundante, insertando solo el marcado HTML apropiado.

10. La validación de formularios es fácil

¿Quiere validar sus campos de formulario, pero le preocupa que tenga que reconstruir desde cero? Sin preocupaciones. Simplemente seleccione un elemento de formulario existente, como un campo de texto, y aplique un Widget de validación de Spry desde el Insertar> Menú Spry. A continuación, controle los requisitos de validación, como caracteres mínimos o máximos, directamente desde el Inspector de propiedades.

Bono: 3 más

11. Acceda fácilmente a archivos relacionados

Cuando abre un archivo HTML o PHP, ahora verá una fila de nombres de archivos dependientes, como CSS, Javascript e incluso los archivos incluidos para PHP, en la parte superior de la ventana del documento. Puede cambiar fácilmente a estos archivos, hacer cambios y guardarlos, todo sin siquiera abrirlos. Cuando haga clic en cualquier archivo en la barra Archivos relacionados, verá su origen en la vista Código y la página principal en la vista Diseño. O use Code Navigator para acceder rápidamente al código fuente CSS que afecta su selección actual.

12. Comprobar la compatibilidad de los navegadores.

Abra el documento que desea verificar para la compatibilidad; desde la misma barra de menú donde se accede a las vistas Código / División / Diseño, busque en el extremo derecho para 'Página de verificación'botón.

Al hacer clic en él se expandirá un menú desplegable, seleccione 'Compruebe la compatibilidad del navegador'. los Ventana de resultados de compatibilidad del navegador se mostrará en la parte inferior de la ventana con cualquier problema que deba abordar.

Nota: ¡Esto NO comprobará las nuevas versiones de IE en Mac! Para seleccionar qué navegadores usar para las pruebas, seleccione Página de verificación > Ajustes del menu.

13. Vista previa de páginas PHP

Dreamweaver le permite ejecutar y obtener una vista previa de los códigos PHP dentro del software. Así es como se configura.

Empezando

1. Primero, seleccione Sitio -> Nuevo sitio desde la navegación superior.
2. Verás tanto el BASIC y Definición avanzada del sitio pestañas opcionales. Vamos a proceder seleccionando la Pestaña Definición de sitio avanzada.
3. Ingrese un nombre de carpeta para el sitio en el cuadro apropiado (para este ejemplo usaremos "myphp" como nombre de carpeta).
4. Cree otra carpeta llamada "imágenes" ingresando su nombre en el campo 'Carpeta predeterminada de imágenes'.
5. Bajo la Información local, Ingrese los siguientes valores en los campos:
   • Nombre del sitio: el nombre del sitio. Para ser utilizado en Dreamweaver solamente
   • Carpeta raíz local: Este es el nombre del sitio en el que trabajará. Asegúrese de asignar un nombre a los sitios para minimizar los conflictos o los nombres confusos..
   • Carpeta predeterminada de imágenes: Esto es opcional, pero se recomienda crearlo ahora, ya que la mayoría de los sitios usarán imágenes en cierta medida. Aquí es donde DW "buscará" para insertar imágenes en sus documentos durante la fase de codificación.
   • Enlaces relativos a: Esto define cómo se manejará el enlace de documentos en Dreamweaver. Puede seleccionar Documento o Raíz. Las diferencias entre los dos son:
     • Documento relativo: insertará una ruta relativa al archivo en el que está trabajando y al elemento que se está vinculando..
     • Relativo a la raíz: utiliza / que hace que el documento / archivo se vincule en relación con la carpeta ROOT.
     • Otra alternativa es agregar alguna configuración a los archivos de configuración del servidor. Al ser una tarea más avanzada, nos limitaremos a utilizar Document-relative por ahora.
   • Dirección HTTP: ingrese a la carpeta raíz del sitio para su proyecto
   • Enlaces sensibles a las mayúsculas y minúsculas: Dreamweaver verificará si algún archivo en el proyecto puede tener problemas que distingan entre mayúsculas y minúsculas al cargar en el servidor. Las notificaciones se mostrarán cuando use: Sitio -> Comprobar enlaces en todo el sitio. Puedes dejarlo marcado si quieres. Personalmente, no lo dejo marcado ya que siempre nombro archivos en minúsculas. No se recomienda la letra mayúscula.
   • Cache: Marque Habilitar caché.
6. En el Información remota página, configure su FTP u otro acceso a un servidor remoto o deje el Acceso a Ninguno.
7. En el Servidor de pruebas página seleccione la opción que se relaciona con el tipo de archivo / sistema que probará.
8. Control de versiones no se utilizará para este ejemplo, por lo que puede dejarlo en blanco a menos que esté familiarizado con él.
9. Encubierto le permite colocar archivos .psd, .fla y otros archivos de origen dentro de la carpeta de su sitio y DW los ignorará al cargar / actualizar su sitio.
10. Notas de Diseño son ideales para un equipo de diseño web, ya que mantiene una nota sobre los cambios realizados en los archivos. Está marcado de forma predeterminada y está bien para que lo usemos de esta manera.
11. Salir Columna de vista de archivo, Contribuir, y Plantillas por defecto.
12. los Ágil La página simplemente apunta a la carpeta de activos de Spry que se incluye automáticamente con Dreamweaver. No hay necesidad de cambiar esto. Una vez finalizada cada configuración, haga clic en DE ACUERDO.

Vista previa de PHP en Dreamweaver

Ahora abra un archivo PHP y haga los cambios necesarios. Para ver este archivo en Dreamweaver simplemente presiona F12 y los resultados se mostrarán en su navegador predeterminado. Puede cambiar el navegador que se utiliza en Editar -> Preferencias -> Vista previa en el navegador. Esto permite un tiempo de edición de vista previa más rápido, elimina la necesidad de escribir URL largas en la barra de su navegador o usar otro software de servidor para renderizar los archivos PHP, todo lo cual ahorra tiempo!

Eso es todo. Feliz Dreamweaver'ing :-)

Nota del editor: Esta publicación está escrita por Jesse Matlock para Hongkiat.com. Durante los últimos 6 años, Jesse se ha sumergido en el diseño de interfaces de usuario, el desarrollo de aplicaciones y las tendencias web. Es el fundador y líder de diseño de un pequeño, aunque muy talentoso equipo de desarrollo que se centra en el desarrollo de aplicaciones a medida..