Cómo utilizar Dreamweaver para crear páginas web
Dreamweaver es un software de producción de páginas web profesional con el que creo que todos los profesionales relevantes estarán familiarizados. Se puede decir que es el primer conjunto de herramientas de desarrollo web visual especialmente desarrollado para diseñadores web profesionales. Se puede utilizar para crear fácilmente páginas web dinámicas que trascienden las limitaciones de la plataforma y del navegador.
Aquí Xixi le trae un tutorial sobre cómo crear páginas web con Dreamweaver. Los amigos que son nuevos en DW pueden consultarlo.
1. Defina el sitio
1. Cree una carpeta en cualquier directorio raíz (asumimos que aquí es la unidad E), por ejemplo, asígnele el nombre MyWeb.
***Nota: Todos los archivos utilizados en el sitio web deben tener nombres en inglés.
2. Abra Dreamweaver, seleccione "Sitio - Nuevo sitio" para abrir el cuadro de diálogo. Ingrese el nombre del sitio web en Nombre del sitio (el chino está disponible) y seleccione la carpeta que acaba de crear en la carpeta raíz local (E: web). Luego confirma.
***Nota: Abra Dreamweaver nuevamente y automáticamente encontrará el sitio que acaba de crear. Si hay varios sitios, puede seleccionarlos en el menú "Sitio - Abrir sitio".
2. Cree una página
1. En el espacio en blanco debajo de la carpeta local E:\MyWeb, haga clic derecho y seleccione "Nuevo archivo" para crear una página. El nombre del archivo es sin título.htm. htm significa que este archivo de página web es un archivo HTML estático. Cambie el nombre a index.htm.
***El nombre de la primera página del sitio web suele ser index.htm o index.html. Puedes elegir los nombres de otras páginas tú mismo.
2. Haga doble clic en index.htm para ingresar al estado de edición de la página. Ingrese el nombre de la página web en el cuadro de título, haga clic derecho y seleccione Propiedades de la página para abrir la ventana "Propiedades de la página". Aquí puede configurar el título, el color de fondo o la imagen posterior del sitio web y el color del hipervínculo (normalmente el predeterminado es suficiente) y mantener todo lo demás como predeterminado.
3． En este momento, el cursor está en la esquina superior izquierda y puede ingresar una oración, como "Bienvenido a mi página de inicio". Seleccione el texto, use el menú "Ventana/Propiedades" para abrir el panel de propiedades, seleccione el tamaño del texto como 6, luego centre el texto y luego use algunos retornos de carro delante del texto para colocarlo en el medio del página.
4． Para seleccionar una fuente, seleccione el último elemento en Fuentes: Editar lista de fuentes. Luego seleccione una fuente en el cuadro de diálogo, luego seleccione una fuente que deba agregarse a la lista de fuentes en la columna "Fuentes disponibles" y haga clic en el botón central para agregarla.
*** La fuente de la canción se utiliza con mayor frecuencia en las páginas web. No agregue fuentes especiales a la lista para usar, porque otros no podrán verlas si no están instaladas en sus computadoras. Si necesita usarlo, conviértalo en una imagen antes de usarlo.
***La forma de ingresar espacios en una página web es ajustar el método de entrada al ancho completo.
***La forma de ajustar líneas en una página web es: shift Enter. Simplemente presione Enter para cambiar los párrafos.
3. Agregue imágenes a la página
1. En el espacio en blanco debajo de la carpeta local E:\MyWeb, haga clic derecho y seleccione "Nueva carpeta" para crear una carpeta. Úselo para poner imágenes, puede cambiarle el nombre a tu o pic o imágenes.
2. Utilice el menú "Ventana/Objeto" para abrir el panel de objetos, haga clic en "Insertar imagen" y seleccione la imagen que desea insertar en el cuadro de diálogo. Si aparece un cuadro de diálogo: "¿Le gustaría copiar este archivo a la carpeta raíz?", debe seleccionar "Sí" y luego guardarlo en la carpeta que acaba de crear.
3. Seleccione la imagen y abra el panel de propiedades, donde puede nombrar la imagen, restablecer la altura y el ancho de la imagen y arrastrar los puntos en las esquinas de la imagen para cambiar el tamaño. Mantenga presionada la tecla Mayús y arrastre los puntos de las esquinas para estirar la imagen manteniendo la relación de aspecto. Para restaurar el tamaño original, haga clic en el botón "Cambiar tamaño" en la esquina inferior derecha.
4. "Enlace" puede ingresar directamente la dirección aquí. "Reemplazo" es la descripción de la imagen, es decir, el texto que se muestra cuando el mouse apunta a la imagen; "Borde" es el ancho del borde de la imagen y "Alineación" es el método de alineación.
4. Agregar hipervínculos
1. Agregar enlaces al texto.
Por ejemplo, ingrese "Mi artículo" en la página, luego selecciónela, abra el panel de propiedades y en el cuadro "Enlace", seleccione la página a la que desea vincular. En el siguiente cuadro de "destino", generalmente usamos self para abrir una nueva ventana en lugar de la ventana abierta actualmente o seleccionamos en blanco para abrir una nueva ventana;
2. Agregue un enlace a la imagen
Igual que el enlace al texto anterior, inserte la imagen y luego selecciónela en el cuadro de enlace en el panel de propiedades.
****Las imágenes pueden crear múltiples enlaces diferentes. El método es el siguiente:
Hay algunos gráficos debajo del elemento "Mapa" en el panel de propiedades. Por ejemplo, haga clic en el cuadrado, el cursor cambia a una cruz y dibuja una zona activa rectangular azul. en la imagen En este momento, en las propiedades La dirección del enlace se puede configurar para este punto de acceso en el panel y se mostrará cuando el mouse apunte hacia él. De manera similar, al configurar un punto activo usando un círculo, puede configurar otros enlaces para la imagen.
3. Agregue un enlace de correo electrónico
Seleccione el texto o la imagen al que desea agregar un enlace de correo electrónico, abra el panel de propiedades e ingrese la dirección de correo electrónico en el cuadro "Enlace". El formato es el siguiente: mailto: dirección de correo electrónico. Tenga en cuenta que no hay espacios intermedios.
4. Si el enlace es a un archivo que el navegador no puede abrir, como exe, Zip, etc., cuando el espectador haga clic en el enlace, se activará la función de descarga del archivo o reproducción en línea. ser realizado.
5. Uso de tablas
1. Haga clic en Insertar/Tabla para abrir el panel de tablas para la configuración. El número de filas, columnas, ancho, bordes, etc., "relleno de celda" es la distancia entre el interior de la celda y el contenido; "espacio entre celdas" es la distancia entre celdas y la unidad es píxeles.
2. Después de insertar la tabla, haga clic en el borde de la tabla para seleccionar la tabla completa. Luego puede realizar varias configuraciones en el panel de propiedades a continuación.
3. Mueva el cursor a una de las celdas. El panel de propiedades que ve ahora es el panel de propiedades de la celda. También puedes realizar varias operaciones en las celdas. Como color de fondo, imagen de fondo, borde, fusión, división, etc.
6. Otras operaciones en tablas
1. Principio para crear tablas de líneas finas:
1. Seleccione toda la tabla y establezca su fondo en negro ( este color es el color de la línea de la tabla).
2. Selecciona todas las celdas y establece su fondo en blanco.
2 Formatear tablas automáticamente
1. Primero crea una tabla y luego selecciónala.
2. Seleccione Comando/Formato de tabla en el menú. Es decir, puedes elegir algunos estilos de tabla preestablecidos.
Sanyi Pixel Divider
1. Inserte una tabla con 1 fila y 1 columna, un ancho de 200 píxeles y un borde y margen de 0.
2. Seleccione la tabla, establezca la altura de la tabla en 1 píxel y establezca un color de fondo (es decir, el color de línea deseado).
3. Cambie a la ventana de código y diseño y elimine el código lt;tdgt;.
7. Utilice tablas para crear una página completa
La parte superior de una página web (generalmente incluye iconos, anuncios, menús de navegación)
1. fila y 2 columnas, una tabla con un ancho de 760 píxeles y un borde y margen de 0.
2. Seleccione la tabla, establezca la disposición en alineación central y el color de fondo en #3366CC.
3. Coloque el cursor en la celda izquierda, establezca su disposición horizontal en alineación izquierda y su disposición vertical en alineación superior, y luego inserte una imagen. Generalmente, el icono del sitio web se inserta aquí. es decir, el logotipo.
4. Coloque el cursor en la celda de la derecha, establezca su ancho en 500, alinéelo horizontalmente con el centro y colóquelo verticalmente en el medio, y luego inserte una imagen, generalmente una página web. anuncio, es decir, un banner.
5. Coloque el cursor después de la tabla que acaba de completar, inserte /table y cree una tabla con 1 fila y 1 columna, un ancho de 760 píxeles y un borde y margen de 0.
6. Seleccione la tabla que acaba de crear, establezca la disposición en alineación central y el color de fondo en #005173.
7. Insertar varias imágenes en la tabla como menús de la barra de navegación.
La parte central de la segunda página web (lista de columnas a la izquierda, noticias del sitio web en el medio, lista de columnas a la derecha)
1. Después de la tabla de la barra de navegación, inserte. /table y crea un ancho de 1 fila y 3 columnas. Es una tabla de 760 píxeles con 0 bordes y 0 márgenes. Y configure el modo de disposición en alineación central y el color de fondo en #FFFFFFFF.
2. Coloque el cursor en la celda de la izquierda, establezca su ancho en 18, alinéelo horizontalmente con el centro y alinéelo verticalmente con la parte superior. Luego inserte una imagen y una barra de navegación.
3. Coloque el cursor después de la imagen que acaba de insertar, haga clic en Insertar/Tabla e inserte una tabla con 12 filas y 1 columna y un ancho de 90. Establezca el espacio entre celdas en 1 y el color de fondo en #CCCCCC.
4. Coloque el cursor en la primera celda de la tabla, establezca su altura en 20 y su color de fondo en #FFFFFF. Insertar/Imagen, inserta un pequeño punto delante del texto de navegación. Configure las otras 11 celdas de manera similar, de modo que se complete la lista de clasificación de columnas de la izquierda.
5. Coloque el cursor en la celda central de la tabla principal, establezca su ancho en 66, alinéelo horizontalmente con el centro y alinéelo verticalmente con la parte superior, luego inserte /image e inserte una navegación. bar.
6. Coloque el cursor después de la imagen, haga clic en Insertar/Tabla e inserte una tabla con 4 filas y 1 columna y un ancho de 95. Establezca el espacio entre celdas en 1 y el color de fondo en #CCCCCC.
7. Coloque el cursor en la primera celda de la tabla, arrastre el mouse para seleccionar las 4 celdas, establezca la altura en 60 y el color de fondo en #FFFFFF.
8. Coloque el cursor en la celda en el lado derecho de la tabla principal, establezca su ancho en 16, alinéelo horizontalmente con el centro, alinéelo verticalmente con la parte superior, inserte /image e inserte. una barra de navegación.
9. Coloque el cursor después de la imagen, haga clic en Insertar/Tabla e inserte una tabla con 7 filas y 1 columna y un ancho de 90. Establezca su espaciado en 1 y su color de fondo en #CCCCCC.
10. Mantenga presionada la tecla Ctrl, use el mouse para hacer clic en las celdas 1, 3, 5 y 7 de la tabla que acaba de insertar y luego establezca su altura en 55 y su color de fondo en #. FFFFFF.
11. Seleccione las celdas 2, 4 y 6, establezca su altura en 6 y su color de fondo en #FFFFFF.
12. Cambie a la ventana del código fuente y elimine los símbolos de espacio " " en las celdas 2, 4 y 6.
La parte inferior de las tres páginas web (generalmente incluye información de derechos de autor y otro contenido relacionado)
1. Coloque el cursor después de la tabla principal, inserte /table y cree 2 filas. y 2 columnas con un ancho de Una tabla de 760 píxeles con 0 bordes y 0 márgenes.
2. Seleccione la tabla, establezca la disposición en alineación central y el color de fondo en #3366CC.
3. Coloque el cursor en la celda izquierda de la fila 1 de la tabla, establezca su ancho en 50, la disposición horizontal en la predeterminada, la disposición vertical en la línea base, el color de fondo en #FFFFFF y luego ingrese la información de derechos de autor. El contenido puede ser de cualquier color.
4. Coloque el cursor en la celda derecha de la fila 1 de la tabla, inserte /image, inserte una imagen redondeada, ingrese la palabra Correo electrónico detrás de ella y establezca su tamaño y color en 1 y #FFFFFF. .
5. Insertar/Objeto de formulario/Campo de texto, inserte un campo de texto, el ancho puede ser arbitrario.
6. Insertar/Imagen, insertar una imagen GO.
7. Establecer propiedades de la página. Haga clic en el menú Editar/Propiedades de página, ingrese un título en la columna Título, seleccione la imagen de fondo y establezca el borde superior en 0.
*** Poner toda la página web en diferentes partes y combinarlas en diferentes tablas también puede acelerar el tiempo que tarda el navegador en leer la página.
; debido a que el navegador muestra el contenido después de leer la tabla completa, es mejor no encuadrar toda la tabla.
8. Utilice la tabla de diseño para crear una página completa
1. Haga clic en Insertar/Diseño y el botón de vista de diseño que se encuentra dentro cambiará al estado de vista de diseño (el valor predeterminado es estándar). vista). También puede usar Ver/Vista de tabla/Vista de diseño en el menú para ingresar.
2. Primero haga clic en el botón Dibujar tabla de diseño y luego cree una tabla de diseño en la página como si fuera un dibujo.
3. Al igual que en el ejemplo anterior, primero dibuje la tabla grande en la parte superior, luego en el medio y luego en la parte inferior de la página web.
4. Haga clic en el botón Dibujar celda de diseño nuevamente y luego dibuje la celda de diseño en la tabla de diseño ya dibujada.
5. Regrese a la vista estándar, inserte pequeñas tablas anidadas en las tablas divididas, refine la página y complete el diseño de toda la página.
****Tenga cuidado de colocar toda la página en una tabla de diseño grande, porque la velocidad de navegación de dicha página web será muy lenta. Se deben dividir varias tablas de diseño según el diseño y el contenido de la página, y luego se deben insertar celdas de diseño en ellas.
9. Uso de capas
1. Haga clic en Insertar/Capa. También puede hacer clic en el icono y arrastrar el mouse para crear una capa.
3. Selecciona la capa creada y mira el panel de propiedades. Simplemente use el "Número de capa" y la "Etiqueta" predeterminados. El "número de capa" es necesario para la programación, pero generalmente no lo usamos ahora. "Superior" es la distancia desde el borde superior de la página; "Izquierda" es la distancia desde el borde izquierdo. El "eje z" es el orden de las capas, con los números más grandes apilados encima de los números más pequeños.
****Si no se establece ningún color, la capa es transparente.
4. Haga clic en el pequeño cuadro en la esquina superior izquierda de la capa intermedia para arrastrar la capa a voluntad, y el tamaño también se puede ajustar.
5. En la columna "desbordamiento", cuando el texto excede el tamaño de la capa, visible (la parte sobrante aún se muestra), oculta (la parte sobrante está oculta), desplazamiento (independientemente de si se excede, se muestra) barra de desplazamiento), auto (la barra de desplazamiento aparece solo cuando se excede).
6. Haga clic en el menú Ventana/Otros/Capa y aparecerá la ventana de administración de capas. Allí puede modificar el nombre de la capa y el valor del eje Z, o hacer clic en el icono del ojo para hacer la capa visible o invisible. También existe una opción para evitar la superposición.
7. Alineación de capas. Mantenga presionada la tecla Mayús y seleccione varias capas al mismo tiempo. Luego use Modificar/Alinear, usando las opciones aquí.
8. Capa de anidamiento. ⑴Primero inserte una capa en el documento. ⑵ Coloque el cursor dentro de la capa y luego continúe insertando una capa para obtener una capa anidada. ⑶El interior se llama capa secundaria y el exterior es la capa principal. Su orden en el eje Z es el mismo. Cuando arrastra la capa principal, las capas secundarias también se moverán entre sí. Cuando mueves una capa secundaria, la capa principal no se mueve con ella.