Para los creadores de páginas web profesionales que desean crear páginas web complejas en un entorno visual, Dreamweaver ha ido emergiendo gradualmente en el mercado de herramientas de edición de páginas web y se ha convertido en la mejor opción para que los profesionales escriban páginas web. A juzgar por la situación actual, se puede decir que las funciones integradas de Dreamweaver son cada vez más abundantes, ricas y completas. Aquí me gustaría presentarles algunos consejos de aplicación en la versión 4.0.
1. Haga que las páginas web sean más flexibles. Algunos desarrolladores web llaman líquida a la técnica que se presenta a continuación, pero aquí la llamo elástica (técnica de extensión flexible). Esta es una técnica que puede ajustar 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, y si la ventana es demasiado pequeña, la ventana arriba y. La barra que se mueve hacia abajo no aparecerá en el borde. 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 de columna fijo e imágenes GIF como intervalos para diseñar páginas web. De esta manera, ya sea que utilicen Internet Explorer o Mac, 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 ajusten automáticamente de forma flexible. ¿Cómo hacerlo?
Abra la página web usando los botones de la paleta Objeto y cambie a la vista 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. Seleccione la flecha pequeña encima de la columna en la que desea configurar la visualización flexible. luego seleccione "Hacer que la columna sea flexible" (Hacer que la columna se estire automáticamente). (Establezca el ajuste automático del ancho de la columna 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 un archivo de imagen en blanco con diseño fijo. Este archivo de imagen en blanco está representado por dos largas tablas en blanco encima de las columnas. De esta manera, el diseño se completará automáticamente y se completará la configuración del diseño flexible. (Cuando agregue un archivo de imagen en blanco por primera vez, aparecerá un cuadro de diálogo que le preguntará si desea utilizar el archivo de imagen incorporado. Para obtener el mejor efecto, le recomiendo que deje que Dreamweaver genere uno automáticamente; de lo contrario, no es necesario utilizar un archivo de imagen en blanco para completar el diseño).
2. Cree una paleta de colores personalizada. El nuevo panel Activos de Dreamweaver 4.0 es una nueva herramienta que puede administrar archivos según tipos de archivos, como imágenes, plantillas, etc. ., al editar un sitio web Cuando define un nuevo sitio web (Seleccionar sitio · Nuevo sitio), todos los tipos de componentes se agregarán automáticamente a los cuadros correspondientes en el panel Activos. Este nuevo panel de Activos también tiene un cuadro de color en el panel de control de propiedades, que almacena todos los colores utilizados en su sitio web, incluidos los colores del texto, los colores de fondo y los colores de los enlaces. Esta es una paleta de colores orientada a sitios web y adaptada a los usuarios. Simplemente active el panel Activos (seleccione primero Ventana, luego Activos), luego seleccione la pequeña barra de 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, el valor hexadecimal del color y el código correspondiente de tres colores (RGB) aparecerán en la pantalla. Si desea reducir el tamaño de la barra de herramientas de su paleta, puede incluso agregar solo ciertos colores a los Favoritos de su paleta. Simplemente resalte el color seleccionado, seleccione un botón llamado "Agregar a Mis favoritos" en la ventana (el botón inferior derecho) y listo.
3. Crear un sistema de navegación de menú emergente Originalmente, crear un sistema de navegación de menú emergente requería algunas habilidades de sintaxis de JavaScript, pero si tiene Dreamweaver/Fireworks Studio instalado, es fácil de hacer. Primero comience en Fireworks, seleccione una imagen y luego seleccione Insertar·Menú emergente en el cuadro de diálogo Establecer menú emergente. Puede ingresar el nombre de los elementos y seleccionar el botón Más para agregar el proyecto. Puede continuar realizando configuraciones detalladas en el cuadro de mensaje emergente, como configurar el texto y los enlaces que se usarán para el elemento. Por supuesto, también puede agregar submenús y reorganizar la configuración para el siguiente nivel. Cuando termine, seleccione Siguiente para continuar configurando preferencias como colores, fuentes y más. Una vez completado el menú, puede obtener una vista previa de la sintaxis HTML y de la imagen. Luego seleccione Finalizar. En este momento, cuando el mouse se mueva al patrón original, aparecerá una lista del contenido del sistema de menú. Luego, cuando exporte el archivo creado, Fireworks generará automáticamente todos los archivos HTML, JavaScript y de imagen que Dreamweaver necesita.
4. ¡Haz que el archivo de imagen se mueva!
Si tienes instalado Dreamweaver/Fireworks Studio al mismo tiempo, te sorprenderá la combinación perfecta de estos dos productos. Incluso si no es un diseñador gráfico profesional, aún desea modificar algunos archivos de imágenes GIF para hacerlos más vívidos al diseñar páginas web. ¡Dreamweaver te permite crear animaciones sin preguntarle a nadie! Seleccione la imagen que desea modificar en la ventana estándar y luego seleccione el botón Editar en el Inspector de propiedades. Si Fireworks se incluye con su instalación de Dreamweaver, 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á que texto y gráficos como Editar desde Dreamweaver aparecerán en la pantalla de Fireworks, lo que indica que puede editar imágenes desde Dreamweaver). Bien, ahora seleccione la imagen que desea editar en Fireworks y 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 para la animación, la dirección del movimiento de la animación, la transparencia, etc. También puede seleccionar la barra de herramientas Marcos para establecer la velocidad de movimiento y seleccionar el panel Objeto para cambiar la configuración. Para exportar el archivo, simplemente seleccione la barra de herramientas Optimizar y seleccione GIF animado como tipo de archivo. Una vez completado, Fireworks exportará automáticamente la imagen con la configuración optimizada, actualizará automáticamente el archivo de imagen GIF y mostrará el archivo de imagen actualizado en Dreamweaver. Seleccione Archivo · Vista previa en el navegador, para que pueda obtener una vista previa de la hermosa imagen que acaba de crear en el navegador.
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 un programa Flash. La versión 4.0 tiene varios objetos de botón Flash integrados, que pueden crear varias formas diferentes de botones. Seleccione Insertar·Imágenes interactivas·Botón Flash para ver qué botones integrados están disponibles. 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 cursor del mouse para seleccionar el formato del botón que desea usar y luego ingrese los parámetros en secuencia, como el texto, la fuente, el color, el enlace, etc. en el botón o un nombre de archivo personalizado. Presione Aceptar. A continuación, se generará un archivo SWF y se colocará automáticamente en 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á un botón Reproducir. Después de seleccionarlo, podrá obtener una vista previa del efecto parpadeante del botón sin abrir el navegador.
6. Cree texto fluido. Agregar texto fluido a una página web es tan fácil como agregar el botón Flash que acabo de presentar. Del mismo modo, no necesita instalar Flash, puede hacerlo fácilmente con las nuevas funciones proporcionadas por Dreamweaver 4.0. 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 y compacto en forma de Flash. Según Macromedia, el 97% de los usuarios de Internet pueden ver páginas web con efectos Flash, por lo que esta nueva característica puede agregar algo de interactividad a la navegación y lectura de páginas web sin agregar problemas de compatibilidad. Seleccione Insertar · Imágenes interactivas · Texto Flash y luego complete la configuración de preferencias una por una (como el texto, estilo de fuente, color de fuente, tamaño de fuente, etc. cuyo efecto desea cambiar).
7. Cambiar los atajos de teclado Dreamweaver permite a los usuarios personalizar la interfaz. Este diseño es muy flexible. Por ejemplo, los usuarios pueden cambiar el menú escribiendo programas o agregando objetos. No es necesario ser un experto para cambiar los métodos abreviados de teclado, porque Dreamweaver tiene una interfaz gráfica llamada Editor de métodos abreviados de teclado. Simplemente seleccione Editar · Métodos abreviados de teclado y el cuadro de diálogo se cargará y mostrará una lista de teclas de método abreviado que se pueden cambiar. permitiéndole cambiar rápidamente la clave al valor de configuración al que está acostumbrado. Para cambiar una tecla de acceso directo, simplemente use los menús desplegables de la lista Conjunto actual y Comando, busque el comando que desea cambiar entre los comandos existentes y luego seleccione la tecla de acceso directo actual. Aparecerá en la lista de teclas rápidas. en la lista de claves. Además, si desea agregar una configuración de tecla rápida, puede seleccionar el botón Más, escribir la nueva tecla representativa rápida que desea usar en el teclado y seleccionar Cambiar. Al mismo tiempo, también puede seleccionar una tecla de acceso directo y seleccionar la tecla de eliminación (Menos) para eliminar una tecla de acceso directo.
8. Restablezca el ancho de la columna de la ventana del sitio. Simplemente seleccione Ver·Archivo Ver columnas en la ventana del sitio para personalizar el tamaño y la presentación del ancho de la columna al visualizar la vista del sitio. Seleccione una columna de nombres y use las flechas hacia arriba y hacia abajo para cambiar el tamaño, o desmarque Mostrar campo para ocultar la columna. Además, también puede agregar columnas seleccionando el botón Más y crear sus propios nombres de columnas. Además, puede asociar una columna con una nota de diseño seleccionando una nota existente en el menú desplegable.
9. Lea el archivo de la página web original. Cuando abra Referencia del código O'Reilly (Ventana · Referencia) para verificar las propiedades o la compatibilidad del navegador, la ventana predeterminada mostrará la configuración de referencia en 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 puede seleccionar el tamaño de fuente del documento original (pequeño, mediano y grande). . Elegir fuentes grandes es menos duro para la vista porque no es necesario sostener una lupa para mirar la pantalla cuando se visualiza el archivo HTML original.
10. Agregue un nuevo botón Flash. Arriba, le enseñé cómo usar 20 tipos de botones preestablecidos para crear botones Flash en Dreamweaver. Este método 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 función extendida tiene el mismo efecto que el Consejo 5. 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 577K. Cambie a Dreamweaver, seleccione Comandos·Administrar extensiones y luego seleccione Archivo·Instalar extensión para iniciar la instalación. Una vez que se reactiva Dreamweaver, hay seis tipos de botones novedosos e interesantes, incluidos Surfboard y Bulletbar. En este momento, simplemente use el comando Insertar · Imágenes interactivas · Botón Fireworks para crear un botón interesante. También puede utilizar los comandos ·Convertir viñetas en imágenes y los comandos ·Convertir texto en imágenes. Ambos métodos anteriores pueden ejecutar Fireworks automáticamente.
11. Agregue la función "Establecer como favoritos" a la página web y busque en Exchange, puede encontrar la función de extensión Agregar a favoritos. Este pequeño archivo solo ocupa 3K y el tiempo de descarga no tomará demasiado. Luego siga los mismos pasos para cargarlo desde el Administrador de extensiones (Comandos · Administrar extensiones, Archivo · Instalar extensión). Luego reactive Dreamweaver. Este archivo de extensión recién cargado agregará una nueva función a Dreamweaver. Si agrega esta función "agregar a favoritos" a su página web, cuando un usuario de Internet visite su sitio web, podrá agregar fácilmente su sitio web a los favoritos de su navegador con solo un clic (o marcadores personales). Además, también puede personalizar el nombre del acceso directo favorito y el pequeño ícono que aparecerá frente al nombre del acceso directo favorito (generalmente, el ícono pequeño frente al acceso directo favorito en IE es el valor predeterminado de IE. Si tenga el suyo El pequeño ícono diseñado es mucho más genial. Tenga en cuenta que esta función solo es compatible con navegadores con IE 4.0 y superior. Simplemente seleccione el panel Comportamiento en el menú de Windows y seleccione esta opción en el menú desplegable de funciones de IE.
Si quieres crear un gráficointeresante
, ¿todavía tienes que dedicar tiempo a escribir el código fuente de la página web? ¡Ya existe uno listo para descargar desde Exchange! La extensión Form Builder tiene un formulario listo para usar que te permite hacerlo. para copiar instantáneamente un formulario que contenga campos como país, sexo, estado civil, grupo de edad y otras categorías. Descargue este pequeño archivo (solo 11K) de Exchange y luego use el Administrador de extensiones Instálelo (Comandos·Administrar extensiones, Archivo. ·Instalar extensión). Luego simplemente reactive Dreamweaver y seleccione Insertar·FormBuilder, y encontrará el archivo de extensión en (Insertar·FormBuilder). Después de seleccionar, aparecerá un cuadro de diálogo y se mostrarán todos los menús de formato aplicables.