Resumen del diseño del curso de producción de páginas web
1. Propósito del diseño
Explicar la intención del diseño y la creatividad del sitio web, y Presentar brevemente el sitio web.
2. Ideas de diseño
Describe las ideas generales de diseño del sitio web, incluyendo:
2.1 Ideas generales de planificación de la estructura del sitio web
Requerido para elaborar el sitio web. Selección de la estructura general, ideas de diseño y dibujo de bocetos de la estructura del sitio web.
2.2 Ideas de diseño de la página de inicio
Se requiere elaborar y analizar las ideas de diseño de la página de inicio.
2.3 Ideas de diseño de subpáginas
Se requiere elaborar y analizar el diseño de subpáginas y la selección de objetos de la página web.
3 Análisis detallado del diseño de la página web
Se requiere seleccionar una página web, describir y analizar el proceso de diseño e implementación de la página web, y explicar en detalle los pasos para crear la página web. los objetos de la página web utilizados y el método de funcionamiento de este objeto web.
4 Conclusión
Haga un resumen inductivo de todo el informe de diseño, analice las dificultades en el proceso de diseño y cómo resolverlas, y finalmente plantee perspectivas.
1. Propósito del diseño
El propósito de diseño de este curso es permitir a los estudiantes experimentar todo el proceso de desarrollo de Dreamweaver 8 y recibir una capacitación integral a través de la práctica, para que puedan comprender y dominarlo de manera más integral y aplicar de manera integral los conocimientos aprendidos. Combinado con casos de desarrollo específicos, comprender y dominar inicialmente el método de uso de las herramientas de desarrollo visual Dreamweaver 8 para el desarrollo web; comprender el proceso de diseño y producción web; Dominar las habilidades de diseño y producción web a través del diseño. Comprender y familiarizarse con los conocimientos básicos y técnicas de implementación del diseño web. De acuerdo con los requisitos del tema, se proporciona un plan de diseño web y se pueden utilizar materiales gráficos y de texto adecuados para diseñar y producir trabajos de diseño web que cumplan con los requisitos. Competente en el funcionamiento y aplicación de Photoshop 8, Dreamweaver 8 y otro software. Mejorar las habilidades prácticas y mejorar aún más la calidad general. Esta vez diseñé principalmente una página web con el tema "Viaje a Singapur", que presentaba los hermosos paisajes de Singapur.
2. Ideas de diseño
Utilice Dreamweaver8.0 para crear un sitio web sobre el "Viaje a Singapur" y utilice tecnologías de diseño web como tablas, comportamientos, capas y enlaces para diseñar el página.
Este sitio web utiliza el turismo de Singapur como material y explica principalmente contenido relacionado con las atracciones de Singapur. La página de inicio tiene dos columnas: introducción del paisaje y apreciación del paisaje. Hay 7 columnas para la introducción de las atracciones y solo una página para apreciar el paisaje.
3. Análisis detallado del diseño de la página web
(1) Establecimiento del diseño
En este diseño web se utiliza una gran cantidad de diseños, entonces, ¿cómo establecer el el diseño es la clave. Dreamweaver 8 es un arma útil para que la mayoría de las personas diseñen páginas web y también es un atajo para muchos principiantes. Especialmente su excelente desempeño en diseño lo hace más popular. Como todos sabemos, es difícil organizar una página bien coordinada sin la ayuda de tablas.
1. Haga clic en la tecla ?ALT+F6? para ingresar al modo de diseño e insertar la tabla de diseño. Crea un diseño aproximado.
2. Usar imagen de fondo: seleccione este elemento y haga clic en Examinar para insertar una imagen preparada como fondo de la tabla. Debido a que la imagen se utiliza en forma de mosaico como fondo de la tabla, el tamaño de. la tabla y el tamaño de la imagen. Todo debe ser controlado.
(2) Imágenes en páginas web
La transmisión de imágenes es el verdadero encanto de WWW. En comparación con el texto, tiene importantes ventajas: primero, es intuitivo y el ojo humano lo acepta. cuando se ven imágenes, la velocidad de la información es mucho más rápida que la velocidad de recepción de información cuando se lee un texto; en segundo lugar, puede expresar los detalles con mayor claridad; Es por estas ventajas que las imágenes son populares al hacer diseño web.
Si la página web está diseñada como una pintura de paisaje, los espectadores definitivamente se quedarán en ella (si la imagen es grande, el efecto será contraproducente). Hay docenas de formatos de archivos de imagen, como GIF, JPEG, BMP, EPS, PCX, PNG, FAS, TGA, TIFF, WMF, etc. Los formatos de imagen más utilizados y compatibles con Internet Explorer y Netscape son GIF, JPEG y BMP. .
(1) Insertar imágenes en páginas web
Con Dreamweaver 8, puede insertar imágenes fácilmente en páginas web. También puede configurar el borde, el tamaño y la posición de la imagen. Puede editar directamente la imagen. La operación de añadir imágenes a una página web es muy sencilla:
1. Cree una nueva página web en blanco y coloque el cursor al principio de la página web.
2. Abra el menú "Herramientas", seleccione el elemento del menú "Imágenes", seleccione el elemento del menú "Desde archivo" en el submenú o haga clic en el icono de la herramienta Imagen en la barra de herramientas para que aparezca un " Cuadro de diálogo "Imágenes".
3. Haga clic en el botón "Examinar" en este cuadro de diálogo y aparecerá un cuadro de diálogo "Seleccionar archivo".
4. Seleccione un archivo de imagen en la lista de archivos en el cuadro de diálogo Seleccionar archivo y luego haga clic en el botón Aceptar, o haga doble clic en el archivo de imagen directamente y la imagen se agregará a la página web. . Después de insertar la imagen en la página web, podemos configurar varias propiedades de la imagen.
(2) Varias configuraciones de atributos para imágenes
1. Seleccione la imagen insertada, haga clic con el botón derecho del mouse, aparecerá un menú contextual y seleccione el menú "Propiedades de imagen" en En el elemento del menú, aparece un cuadro de diálogo "Propiedades de imagen".
2. Abra la pestaña "Apariencia".
(1) Establezca el grosor del borde de la imagen: en la columna "Diseño" de la pestaña "Apariencia", puede definir el borde de la imagen según sea necesario, o puede definir el valor del borde como "0 ", es decir, sin fronteras.
(2) Establecer el método de ajuste de la imagen: Generalmente, una imagen solo puede estar a la misma altura que una línea de texto, pero a veces es necesario separar la imagen y el texto sin afectarse entre sí. Por ejemplo, si inserta una imagen en el lado izquierdo de la página web y requiere que el texto del lado derecho se pueda ingresar en varias líneas como si no hubiera imagen, esto se puede lograr configurando el método de ajuste de la imagen. . Hay dos formas de ajustar imágenes en páginas web:
① Ajuste a la izquierda: la imagen está a la izquierda y el texto se ajusta a la derecha de la imagen.
②Ajuste a la derecha: la imagen está a la derecha y el texto se ajusta al lado izquierdo de la imagen.
Abra el cuadro de lista desplegable "Alineación" en la columna "Diseño" de la pestaña "Apariencia", seleccione la opción "Izquierda" y haga clic en el botón "Aceptar", la imagen quedará configurada. al método de ajuste a la izquierda, de manera similar, si selecciona "Derecha", la imagen se configurará en el modo envolvente derecho.
(3) Editar el tamaño de la imagen: en Dreamweaver 8, cuando se agrega una imagen a una página web, el tamaño de la imagen se establece en su tamaño original de forma predeterminada si la imagen agregada es demasiado grande o demasiado pequeña. , o Si hay otras necesidades especiales, deberá cambiar el tamaño de la imagen. Ajustar el tamaño de la imagen es muy simple y flexible. Siempre que seleccione la imagen agregada y arrastre el borde de la imagen con el botón izquierdo del mouse, puede ajustar el ancho y el alto de la imagen arbitrariamente hasta que alcance el tamaño con el que esté satisfecho.
(4) Establecer la escala de la imagen: un principio importante del diseño web es la compatibilidad de las páginas web para diferentes navegadores o diferentes resoluciones, ¿ya sea una ventana de 800 o 768? La página web debe mostrarse normalmente. Configurar la escala de la imagen es configurar la imagen de modo que el tamaño se pueda cambiar en proporción al tamaño del navegador, de modo que la imagen pueda mostrarse normalmente en ventanas del navegador de diferentes tamaños.
Los pasos para configurar la relación de escala de la imagen son los siguientes:
1. Seleccione la imagen en la página web, haga clic con el botón derecho del mouse y, en el menú contextual emergente, seleccione "Propiedades de la imagen". elemento del menú y aparecerá un cuadro de diálogo "Propiedades de imagen".
2. Seleccione la casilla de verificación "Especificar tamaño" en la columna "Tamaño" y seleccione el botón de opción "Porcentaje". Ancho" y "Alto", y luego seleccione "Ancho" y "Alto". Ingrese la relación de visualización deseada en la columna Alto y haga clic en Aceptar para completar la configuración. Además, también puede configurarlo en las columnas "Espaciado horizontal" y "Espaciado vertical" de la pestaña "Apariencia". El espaciado horizontal se refiere al espaciado horizontal entre la imagen y los elementos circundantes, en píxeles se refiere al espaciado vertical. al espacio entre la imagen y los elementos circundantes. El espacio vertical de los elementos.
(3) Cómo editar imágenes en páginas web
En Dreamweaver 8, puede utilizar varias herramientas en la barra de herramientas "Imágenes" para editar imágenes en páginas web Funciones de edición que incluyen principalmente. : rotación y volteo de imágenes, recorte, desvanecimiento de imágenes, efecto de relieve, etc.
Además, para que las imágenes se ajusten mejor a los requisitos, también procesamos las imágenes utilizadas por el escuadrón de Photoshop8 para que se vean más refinadas y hermosas y cumplan con nuestros requisitos temáticos.
(4) Usar imagen de fondo
Usar una imagen de fondo es diferente de usar el color de fondo. Usar el color de fondo solo rellena el fondo de la página web con un color determinado, mientras que se usa la imagen de fondo. llenará el fondo de la página web con un color determinado. El fondo de la página web está mosaico de imágenes. Hacer esto puede hacer que la página web que cree sea más hermosa y hermosa. Los pasos específicos para usar imágenes de fondo en páginas web son los siguientes:
1. Cree una nueva página web en blanco.
2. Haga clic con el botón derecho del mouse, seleccione "Propiedades de la página web" en el menú emergente de acceso directo y aparecerá el cuadro de diálogo "Propiedades de la página web".
3. Abra la pestaña "Fondo".
4. Seleccione la casilla de verificación "Imagen de fondo" en la columna "Formato" de la pestaña "Fondo" y luego haga clic en el botón "Examinar" a continuación y aparecerá el cuadro de diálogo "Seleccionar imagen de fondo". aparecer.
5. Haga clic en el botón "Examinar archivo" en el cuadro de diálogo "Seleccionar imagen de fondo" y aparecerá un cuadro de diálogo "Seleccionar archivo".
6. Seleccione el archivo de imagen en la lista de archivos del cuadro de diálogo Seleccionar archivo y haga clic en el botón Aceptar.
De esta manera, la imagen seleccionada se utilizará como fondo de toda la página web. Si también se selecciona la casilla "Marca de agua" en el paso 4, la imagen de fondo se mostrará como un efecto de marca de agua especial. Cuando se desplaza la página web, el fondo no se mueve, solo se desplaza el contenido de la página web, produciendo un efecto de capa transparente, que es muy atractivo.
(5) Insertar animación flash
Acerca del video Flash Usando el comando "Insertar video Flash" en Dreamweaver, puede insertar contenido de video Flash en una página web sin usar herramientas de creación Flash. Este comando inserta un componente Flash; cuando lo ve en un navegador, muestra el contenido de video Flash seleccionado junto con un conjunto de controles de reproducción.
(6) Configure el mouse para pasar sobre la imagen para la interacción con la imagen.
Luego hay un elemento en el menú desplegable para insertar la imagen: "Clic del mouse". Este elemento y aparecerá un cuadro de diálogo. En el cuadro de diálogo, puede configurar la imagen antes de que pase el mouse y la imagen cuando pase el mouse, seleccione "Aceptar".
(7) Establecer enlace
Seleccione la imagen o el texto, ingrese la dirección a la que conectarse en el atributo de enlace a continuación. Al mismo tiempo, se activa el atributo de destino a continuación. ingrese en blanco y configúrelo en Abrir página web en una ventana nueva. Hemos habilitado una página web que enlaza con este sitio, y también se conecta a la red externa, para que cuando visites la página puedas consultar información más detallada y facilitar las consultas de los usuarios. ;