1. Análisis de antecedentes
Para los productores de páginas web profesionales que desean crear páginas web complejas en un entorno visual, Dreamweaver ha surgido gradualmente como una herramienta de edición de páginas web y se ha convertido en la mejor opción para que los profesionales escriban páginas web. Según una encuesta de Macromedia, Dreamweaver cuenta actualmente con más de 700.000 usuarios, lo que la sitúa en primer lugar entre las herramientas de edición web en términos de cuota, dejando muy atrás a competidores como "Adobe GoLive" y "NetObjects Fusion". Por lo tanto, en general se espera que el número de usuarios de Dreamweaver siga aumentando.
Con esta abrumadora tasa de popularidad, es concebible que las funciones integradas de Dreamweaver sean cada vez más abundantes, ricas y completas. En nuestra introducción esta vez, hay algunas características nuevas que brindan a los creadores de páginas web un diseño más rápido, codificación más sencilla y funciones más integradas. Sin más preámbulos, aquí presentamos cómo hacer un buen uso de algunas funciones en Dreamweaver. A continuación se presentan doce técnicas secretas, que se pueden dividir en cuatro temas. Ellos son: diseñar páginas web (Dreamweaver tiene funciones de diseño de páginas flexibles), usar Dreamweaver con otros productos Macromedia (crear animaciones e imágenes sin pedir ayuda), personalizar la interfaz de usuario (disfrutar de una experiencia de usuario personalizada) y finalmente unirse a Dreamweaver Extensions ( cargar funciones avanzadas extendidas en páginas web).
2. Consejos para diseñar páginas web
Ya sea que desee utilizar la sintaxis HTML original para escribir páginas web palabra por palabra o utilizar ventanas estandarizadas para el diseño visual de páginas web, los siguientes consejos pueden resultar útiles.
Consejo 1: haga que el tamaño de la página web sea más flexible.
Algunos desarrolladores web llaman "líquida" a la técnica que se presenta a continuación, pero aquí la llaman "técnica de extensión elástica". Esta es una técnica que ajusta el tamaño de la página web cuando cambia el tamaño de la ventana del navegador del visitante. Por lo tanto, si la ventana es demasiado grande, no habrá espacios en blanco; si la ventana es demasiado pequeña, se moverá hacia arriba y hacia abajo; Las barras no aparecerán en los bordes. De hecho, la mayoría de las páginas web simples ajustarán automáticamente el tamaño de la página de acuerdo con el tamaño de la ventana del navegador. Sin embargo, si se utilizan muchos marcos y tablas diferentes en la página web, será difícil que el tamaño de la página web sea automático. ajustado de forma flexible. Por lo general, los diseñadores web utilizan una combinación de marcos de ancho fijo e imágenes GIF como intervalos para diseñar páginas web. De esta manera, ya sea que utilicen Internet Explorer o Netscape Navigator, el tamaño de la página será fijo y no se escapará. Con Dreamweaver 4.0, puede diseñar fácilmente páginas web que se ajustarán automáticamente de forma flexible. ¿Cómo hacerlo?
★Método específico: use el botón en la paleta de herramientas (paleta de objetos) para abrir la página web y cambiar a "Vista de diseño". En este momento, puede ver el ancho de la columna del cuadro de texto. Hay una pequeña flecha desplegable en el medio del cuadro encima de cada columna. Haga clic en la flecha pequeña encima de la columna en la que desea configurar la visualización flexible. seleccione "Establecer columna como Crear columna autoestirada". (Establezca el ancho de la columna de ajuste automático para que se limite a una columna). En este momento, aparecerá una línea ondulada encima del cuadro de la columna en lugar del número original que indica el ancho de la columna. Dreamweaver creará automáticamente una imagen en blanco de diseño fijo. Esta imagen en blanco está representada por dos largas tablas en blanco encima de la columna. De esta manera, el diseño se completará automáticamente y se completará la configuración del diseño flexible. (Cuando agregue una imagen en blanco por primera vez, aparecerá un cuadro de diálogo que le preguntará si desea utilizar una imagen incorporada. Para obtener el mejor efecto, le recomendamos que deje que Dreamweaver genere una automáticamente; de lo contrario, no podrá hacerlo. (Necesita usar una imagen en blanco para completar el diseño).
Consejo 2: Cree una paleta personal
El nuevo "panel de activos" (panel de control de propiedades) de Dreamweaver es una nueva herramienta que puede administrar archivos según formatos de archivo, como imágenes, estilos, etc. , al editar un sitio web.
★Método específico: cuando define un nuevo sitio (haga clic en Sitio Nuevo sitio), todos los tipos de objetos se agregarán automáticamente a los cuadros de tabla correspondientes en el "Panel de activos". Este panel de control de propiedades "Panel de activos" recientemente agregado también tiene un cuadro de color, que almacena todos los colores utilizados en su sitio web, incluido el color del texto, el color de fondo y el color del hipervínculo. Esta es una paleta de colores de navegación de sitios web diseñada para los usuarios. Simplemente inicie el "Panel de Activos" (seleccione primero "Ventana" y luego haga clic en "Activos"), luego haga clic en el pequeño desplazamiento de color a la izquierda y verá una variedad de opciones de color para su sitio web. Por supuesto, puedes aplicar estos colores a cierto texto seleccionado. Incluso cuando seleccione un color determinado, el valor hexadecimal de la densidad del color y los tres códigos de contraste de colores primarios (RGB) aparecerán en la pantalla. Si desea reducir el tamaño de la barra de herramientas de la paleta, puede incluso agregar solo ciertos colores a los "favoritos" de la paleta. Simplemente resalte el color seleccionado y haga clic en el botón "Agregar a favoritos" en la ventana (el botón inferior derecho) y listo.
Consejo 3: crear un sistema de navegación de menú emergente
Originalmente, crear un sistema de navegación de menú emergente requería mucha sintaxis y técnicas de JavaScript, pero si tiene Dreamweaver y Fireworks Studio, puede hacerlo fácil y rápidamente.
★ Método específico: primero comience en "Fuegos artificiales", seleccione una imagen y luego haga clic en "Insertar menú emergente" en el cuadro de diálogo "Establecer menú emergente". Puede ingresar el nombre de los elementos (elementos) y hacer clic. el botón "Más" para agregar el artículo. Puede continuar realizando configuraciones detalladas en el cuadro de información que aparece, como configurar el texto y los hipervínculos que se usarán para el proyecto. Por supuesto, también puede agregar submenús y reorganizar las configuraciones para el siguiente nivel. Cuando termine, haga clic en "Siguiente" para continuar configurando varios valores de parámetros, como color, fuente, etc. Una vez completado el menú, puede obtener una vista previa de la sintaxis HTML y de las imágenes. Haga clic en "Finalizar" nuevamente. En este momento, cuando el mouse se mueva a la imagen original, aparecerá una lista del contenido del sistema de menú. Luego, cuando exporte el archivo creado, "Fireworks" producirá automáticamente todos los archivos HTML, javascript y de imagen que Dreamweaver necesita usar.
Consejo 4: Haz que las imágenes se muevan
Si tienes Dreamweaver y Fireworks Studio instalados al mismo tiempo, te sorprenderá la combinación perfecta de estos dos softwares. Incluso si no es un diseñador de imágenes profesional, es posible que desee modificar algunas imágenes GIF para hacerlas más vívidas al diseñar páginas web. Dreamweaver te permite crear animaciones sin pedir ayuda.
★Método específico: seleccione la imagen que desea modificar en la ventana estándar y luego haga clic en "Editar" en el "Inspector de propiedades". Si instaló Dreamweaver con "Fireworks" incluido, "Fireworks" es el editor de imágenes predeterminado de Dreamweaver y las imágenes se cargarán automáticamente en "Fireworks". (Si observa detenidamente, encontrará texto y gráficos como "Edición desde Dreamweaver" que aparecerán en la pantalla de Fireworks, lo que indica que puede editar imágenes en Dreamweaver). Bien, ahora haga clic en la imagen que desea editar en " Fuegos artificiales", seleccione "Modificar Animar Animar selección". A continuación, complete la configuración en el "cuadro de diálogo Animar", seleccione el número de fotogramas de la animación, la dirección del movimiento de la animación, la transparencia y otras configuraciones. También puede hacer clic en la herramienta "Marcos" para establecer la velocidad de movimiento y seleccionar el panel "Objeto" para cambiar la configuración. Cuando desee exportar un archivo, simplemente haga clic en la barra de herramientas "Optimizar" y seleccione "GIF animado" en el tipo de archivo. Una vez completado, "Fireworks" exportará automáticamente la imagen con la configuración optimizada, actualizará automáticamente la imagen GIF y mostrará la imagen actualizada en Dreamweaver. Haga clic en "Vista previa de archivo en el navegador" para poder obtener una vista previa de la hermosa imagen que acaba de crear en el navegador.
Consejo 5: Haga que el botón tenga un efecto de parpadeo.
En Dreamweaver, puede crear un objeto de botón Flash con un efecto de parpadeo sin tener Flashes. Dreamweaver tiene varios objetos de botón Flash integrados, que pueden crear varias formas diferentes de botones.
★Método específico: haga clic en "Insertar botón Flash de imágenes interactivas" para ver los botones integrados. Incluso puede usar el mouse para señalar el formulario de botón que desea usar en el cuadro de diálogo y luego ver cómo funciona en el navegador. Utilice el puntero del mouse para seleccionar el formato del botón que se utilizará y luego ingrese los parámetros en secuencia, como el texto, la fuente, el color, el hipervínculo, etc. en el botón o un nombre de archivo personalizado. Presione Aceptar. A continuación, se generará un archivo en formato "SWF" y el archivo se importará automáticamente a su página web. Haga clic en el archivo completado y verá las propiedades del archivo mostradas en el "Inspector de propiedades". Al mostrar los atributos del archivo, si expande la lista de atributos del archivo, aparecerá "Reproducir". Después de hacer clic, podrá obtener una vista previa del efecto intermitente del botón sin abrir el navegador.
Consejo 6: Cree texto fluido
Agregar texto fluido a una página web es tan fácil como agregar el botón Flash que acabamos de presentar. Del mismo modo, sin instalar Flash, puedes hacerlo fácilmente con las nuevas funciones proporcionadas por Dreamweaver. Los creadores de páginas web que suelen utilizar la sintaxis HTML para escribir páginas web y no tienen experiencia en medios interactivos pueden crear fácilmente texto fluido compacto en forma de Flash. Esta nueva característica puede agregar algo de interactividad de navegación a las páginas web sin agregar problemas de compatibilidad. ★Método específico: haga clic en "Insertar texto Flash de imágenes interactivas" y luego complete la configuración de los parámetros uno por uno (como el texto, estilo de fuente, color de fuente y tamaño de fuente cuyo efecto desea cambiar, etc.).
Consejo 7: cambie los atajos de teclado
Dreamweaver permite a los usuarios personalizar la interfaz y este diseño es muy flexible. Por ejemplo, los usuarios pueden cambiar el menú escribiendo programas o agregando objetos ellos mismos. No es necesario ser un experto para cambiar los atajos de teclado porque Dreamweaver tiene una interfaz gráfica llamada "Editor de atajos de teclado".
★Método específico: simplemente haga clic en "Editar métodos abreviados de teclado" y el cuadro de diálogo se cargará y enumerará las teclas de método abreviado que se pueden cambiar, lo que le permitirá cambiar las teclas de método abreviado a la configuración a la que está acostumbrado. Para cambiar una tecla de método abreviado, simplemente use el menú desplegable de la barra de comandos y conjunto actual, busque el comando que desea cambiar entre los comandos existentes y luego seleccione la tecla de método abreviado actual; aparecerá en la lista de teclas de método abreviado. en la lista. Además, si desea agregar configuraciones de teclas de método abreviado, puede hacer clic en "Más", escribir la nueva tecla representativa de método abreviado que desea usar en el teclado y hacer clic en "Cambiar". Al mismo tiempo, también puede seleccionar una tecla de acceso directo y hacer clic en "Menos" para eliminar una tecla de acceso directo.
Consejo 8: Restablezca la columna de la ventana del sitio
★ Método específico: simplemente haga clic en "Ver archivos Ver columnas" en la "ventana del sitio" para ver el tamaño y la apariencia de la columna de la vista del sitio. Seleccione un nombre de campo y use las flechas hacia arriba y hacia abajo para cambiar su tamaño, o desmarque Mostrar campo para ocultar el campo. Además, también puede agregar columnas y crear sus propios nombres de columnas haciendo clic en el botón "Más". Alternativamente, puede asociar una columna con una "Nota de diseño" seleccionando una "nota" existente en el menú desplegable.
Consejo 9: vea el código original de la página web
★ Método específico: cuando abre "Referencia de código Reilly" (Referencia de ventana) para verificar las propiedades o la compatibilidad del navegador, la ventana predeterminada mostrará "Configuración de referencia" en valores de fuentes pequeñas". Pero si presiona el botón derecho en la esquina superior derecha de la ventana (justo debajo del botón de cerrar), aparecerá una fila de menús desplegables donde podrá seleccionar el tamaño de fuente del código original (pequeño a mediano y grande). Elegir fuentes grandes es menos "abusivo" a la vista porque no es necesario sostener una lupa para mirar la pantalla cuando se lee el código HTML original.
Consejo 10: agregue un botón Flash
En el consejo 5, presentamos cómo utilizar 20 tipos de botones preestablecidos para crear botones Flash en Dreamweaver. Este es un método que no requiere la instalación de ningún archivo o programa adicional. Hay otro método a continuación, que consiste en instalar "Botones de Fireworks". Esta extensión tiene el mismo efecto que el Consejo 5.
★Método específico: Vaya a "Exchange for Dreamweaver" (centro de intercambio de extensiones de Dreamweaver), ingrese la palabra clave de búsqueda "Extensiones InstaGraphics para Dreamweaver" y luego descargue este archivo de aproximadamente 577 KB. Cambie a Dreamweaver, seleccione "Comandos Administrar extensiones" y luego seleccione "Extensión de instalación de archivos" para iniciar la instalación. Una vez que reinicie "Dreamweaver", habrá seis formatos de botones nuevos e interesantes, incluidos "Surfboard" y "Bulletbar". En este momento, simplemente use el comando "Insertar imágenes interactivas del botón Fireworks" para crear un botón interesante. También puede utilizar "comandos Convertir viñetas en imágenes" y "Comandos convertir texto en imágenes". Ambos métodos anteriores pueden ejecutar "Fireworks" automáticamente.
Consejo 11: Agregue la función "Establecer como favoritos" a la página web ★ Método específico: busque en "Exchange" y podrá encontrar la función extendida "Agregar a favoritos". Este pequeño archivo solo ocupa 3K y el tiempo de descarga no tomará mucho tiempo. Luego siga los mismos pasos para cargarlo desde el "Administrador de extensiones" (Comandos Administrar extensiones, Instalar extensión de archivos). Luego reinicie Dreamweaver. Este archivo de expansión recién cargado agregará una nueva función a Dreamweaver. Si agrega esta función "Agregar a mi colección" a su página web, cuando el usuario vea su sitio web, podrá agregar fácilmente su sitio web a "Mi colección" de su navegador con solo un clic (o marcadores personales). Además, lo mejor es que también puedes personalizar el nombre de "Mis favoritos" y el pequeño icono que aparecerá delante del nombre de "Mis favoritos" (normalmente el icono pequeño delante de "Mis favoritos" en IE es el valor predeterminado de IE, si tiene un ícono pequeño diseñado por usted mismo, será más deslumbrante). Tenga en cuenta que esta función solo es compatible con navegadores que utilicen IE 4.0 y superiores. Simplemente seleccione el panel "Comportamiento" en el menú "Windows", luego vaya al menú desplegable de funciones de IE y haga clic en esta función para activar fácilmente esta característica interesante.
Consejo 12: Gráficos geniales
si quieres crear un formulario, ¿todavía tienes que dedicar tiempo a escribir el código original de la página web palabra por palabra? No es necesario, ya existe uno ya preparado.
★ ¡Vaya a
!Intercambie y descargue la "extensión Form Builder". Hay tablas listas para usar que le permiten copiar instantáneamente tablas que incluyen: país, sexo, estado civil, grupo de edad y otras categorías. Vaya a Exchange para descargar este archivo pequeño (solo 11K) y luego instálelo a través del "Administrador de extensiones" (Comandos Administrar extensiones, Extensión de instalación de archivos). Luego simplemente reinicie Dreamweaver, haga clic en "Insertar FormBuilder" y encontrará la función extendida en (Insertar FormBuilder). Después de hacer clic, aparecerá un cuadro de diálogo que mostrará todos los menús de formato aplicables, lo cual es realmente conveniente.