Cómo crear una página web con Dreamweaver
Aquí Xixi le ofrece un tutorial sobre cómo crear páginas web con Dreamweaver, al que pueden consultar los principiantes de DW.
Primero, defina el sitio
1. Cree una carpeta en cualquier directorio raíz (aquí asumimos que es la unidad E), como MyWeb.
* * *Nota: Todos los archivos utilizados en el sitio web deben tener nombres en inglés.
2. Abra Dreamweaver y seleccione "Sitio-Nuevo sitio" para abrir el cuadro de diálogo. Ingrese el nombre del sitio web (chino) en Nombre del sitio web y seleccione la carpeta que acaba de crear (E:web) en la carpeta raíz local. Entonces confírmalo.
* * *Nota: Si abre Dreamweaver nuevamente, encontrará automáticamente el sitio web que acaba de configurar. Si hay varios sitios, puede seleccionarlos en el menú "Sitios - Abrir sitio".
En segundo lugar, 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, la opción predeterminada. El nombre del archivo es sin título.htm. Htm significa que el archivo de la página web es un archivo HTML estático. Renombrado index.htm.
* * *El nombre en la página de inicio 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 la barra 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 del sitio, el color de fondo o la imagen de fondo, el color de los hipervínculos (generalmente el color predeterminado) y mantener todo lo demás en el color 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 y luego centre el texto, luego use algunos retornos de carro delante del texto para centrar el texto en la página.
4. Si desea seleccionar una fuente, seleccione el último elemento en Fuente: Editar lista de fuentes. Luego seleccione No. en el cuadro de diálogo, luego seleccione la fuente que debe agregarse a la lista de fuentes en la columna "Fuentes disponibles" y haga clic en el botón en el medio para agregarla.
* * *Los caracteres chinos Arial son los caracteres más utilizados en las páginas web. No agregue fuentes especiales a la lista porque no serán visibles en las computadoras de otras personas sin las fuentes especiales. Si necesita usarlo, debe hacer una imagen antes de usarlo.
* * *La forma de escribir espacios en una página web es establecer el método de entrada en ancho completo.
* * *El método para ajustar líneas en una página web es: shift Enter. Simplemente presione Enter para cambiar la sección.
En tercer lugar, 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 que aparezca la carpeta A. Se crea para colocar imágenes, a las que se les puede cambiar el nombre de tu o pic o imágenes.
2. Utilice el menú Ventana/Objeto para abrir el panel Objeto, haga clic en Insertar imagen y seleccione la imagen para insertar en el cuadro de diálogo. Si aparece un cuadro de diálogo: "¿Quieres copiar este archivo a la carpeta raíz?", debes seleccionar "Sí" y guardarlo en la carpeta que acabas 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 en proporción a su ancho y alto.
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í. "Alternativa" es la descripción de la imagen, que es el texto que se muestra en la imagen cuando se apunta con el mouse; "Borde" es el ancho del borde de la imagen y "Alineación" es la alineación.
Cuarto, agregue un hipervínculo
1. Agregue un enlace al texto.
Por ejemplo, ingrese "Mis artículos" en la página, luego selecciónela, abra el panel Propiedades y seleccione la página a la que desea vincular en el cuadro Enlace. En el último "objetivo", generalmente usamos self, es decir, abrir una nueva ventana para reemplazar la ventana existente o seleccionar en blanco para abrir una nueva ventana;
2. Añade un enlace a la imagen
Al igual que con el enlace de texto anterior, inserta una imagen y selecciónala en el cuadro de enlace del 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 y el cursor cambiará a una cruz y se dibujará un punto de acceso rectangular azul en la imagen. En este momento, puede configurar la dirección del enlace del punto de acceso en el panel de propiedades y el mouse la mostrará. Del mismo modo, al configurar puntos de acceso con círculos, puede establecer enlaces adicionales a sus imágenes.
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 "Enlace". caja. 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. Luego, cuando el navegador haga clic en este enlace, implementará la función de descarga de archivos o reproducción en línea.
Uso de la forma verbal (abreviatura de verbo)
1. Haga clic en "Insertar/Formulario" para abrir el panel del formulario para la configuración. Número de filas, columnas, ancho, bordes, etc. , "relleno de celda" es la distancia entre el interior de la celda y el contenido; "espaciado de celda" es la distancia entre celdas, 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 y el panel de propiedades que ve ahora es el panel de propiedades de esa 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. Principios para crear tablas de líneas finas:
1. Seleccione toda la tabla y establezca su fondo en negro (Esto). el color es el color de las líneas 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ú. En otras palabras, puedes elegir algunos estilos de tabla preestablecidos.
Divisor de píxeles Trinity
1. Inserte una tabla con 1 fila y 1 columna, con un ancho de 200 píxeles y un margen de borde de 0.
2. Seleccione la tabla, establezca la altura de la tabla en 1 píxel y establezca el color de fondo (es decir, el color de línea deseado).
3. Cambie a la ventana de código y diseño, código
7.
La parte superior de la página web (normalmente incluye iconos, anuncios y menús de navegación)
1. Crea una tabla con 1 fila y 2 columnas, con un ancho de 760 píxeles y un borde y margen de 0.
2. Seleccione la tabla, establezca el modo de 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, establezca su disposición vertical en alineación superior y luego inserte la imagen. Generalmente, aquí se inserta el logo del sitio web.
4. Coloque el cursor en la celda de la derecha, establezca su ancho en 500, alinéelo horizontalmente en el centro, alinéelo verticalmente en el centro y luego inserte una imagen, generalmente un anuncio de una página web. , es decir, una pancarta.
5. Coloque el cursor después de la tabla que acaba de completar e inserte /table para crear una tabla de 1 fila y 1 columna con un ancho de 760 píxeles y un borde y margen de 0.
6. Seleccione la tabla recién creada, establezca el modo de disposición en centro y el color de fondo en #005173.
7. Inserte varias imágenes en la tabla como menús de la barra de navegación.
La parte central de la 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 /. tabla para crear una tabla de 1 fila y 3 columnas con un ancho de 760 píxeles y un borde y margen de 0. Y configure el Modo de organización en Alineación central y el Color de fondo en #FFFFFFF.
2. Coloque el cursor en la celda de la izquierda, establezca su ancho en 18, alinéelo horizontalmente en el centro, alinéelo verticalmente hacia arriba y luego inserte la imagen y la barra de navegación.
3. Después de colocar el cursor en 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 y establezca su altura en 20 y el color de fondo en #FFFFFF. Insertar/Imagen, inserta un punto antes del texto de navegación. También necesitamos configurar las otras 11 celdas para 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 verticalmente con la parte superior, luego inserte /image e inserte la barra de navegación.
6. Después de colocar el cursor sobre la imagen, inserte/tabla, y luego 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 y seleccione las cuatro 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 al centro, verticalmente hacia la parte superior, inserte /image e inserte la barra de navegación. .
9. Después de colocar el cursor sobre la imagen, inserte/tabla, y luego inserte una tabla con 7 filas y 1 columna y un ancho de 90. Establezca el espaciado en 1 y el color de fondo en #CCCCCC.
10. Mantenga presionada la tecla Ctrl, haga clic en las celdas 1, 3, 5 y 7 de la tabla que acaba de insertar y luego establezca su altura en 55 y el color de fondo en #FFFFFF.
11. Seleccione la segunda, cuarta y sexta celda, 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.
Parte inferior de la página web (generalmente incluye información de derechos de autor y otro contenido relacionado)
1 Después de colocar el cursor en la tabla principal, inserte /table para crear 2 filas y 2. columnas, 760 píxeles Una tabla ancha, sin borde y margen cero.
2. Seleccione la tabla, establezca el modo de 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, establezca la disposición horizontal en el valor predeterminado, establezca la disposición vertical en la línea base y establezca el color de fondo en #. FFFFFF, luego ingrese la información de derechos de autor y el color del contenido es arbitrario.
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 después y establezca su tamaño y color en 1 y #FFFFFF. .
5. Insertar/objeto de formulario/campo de texto. Inserte campos de texto de cualquier ancho.
6. Insertar/imagen, insertar la imagen de GO.
7. Establecer propiedades de la página. Haga clic en el menú "Modificar/Propiedades de página", ingrese un título en la columna "Título", seleccione una imagen de fondo y establezca el borde superior en 0.
* * *Consolidar páginas web enteras en tablas separadas también puede acelerar el tiempo que tarda el navegador en leer la página. ; debido a que el navegador solo muestra el contenido después de leer la tabla completa, es mejor no enmarcarlo dentro de la tabla completa.
8. Utilice tablas 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 interno cambiará al estado de vista de diseño (el valor predeterminado es la vista estándar). 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, dibuja una tabla grande en la parte superior, media e inferior de la página.
4. Haga clic nuevamente en el botón "Dibujar celdas de diseño" y luego dibuje las celdas de diseño en la tabla de diseño ya dibujada.
5. Regrese a la vista estándar, inserte una pequeña tabla anidada en la tabla dividida y refine la página para completar el diseño de toda la página.
* * * *Tenga cuidado de colocar toda la página en una tabla de diseño grande, porque dicha página web será muy lenta para navegar. Debe dividir varias tablas de diseño según el diseño y el contenido de la página y luego insertar celdas de diseño en ellas respectivamente.
9. Uso de capas
1. Haga clic en Insertar/Capa. También puede hacer clic en el icono y arrastrar el mouse para crear capas.
3. Seleccione la capa creada y visualice el panel de propiedades. Utilice los valores predeterminados para Número de capa y Etiqueta. La programación requiere un "número de capa", que generalmente no 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 números mayores superpuestos a 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 es mayor que el tamaño de la capa, mostrar (aún mostrar la parte sobrante), ocultar (ocultar la parte sobrante), desplazar (mostrar el desplazamiento). barra sin importar si se excede o no) y Automático (muestra barras de desplazamiento solo cuando se excede).
6. Haga clic en el menú Ventana/Otros/Capa para abrir la ventana de gestión de capas. 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 vaya a Modificar/Alinear y use las opciones aquí.
8. Capas anidadas. (1) Primero, inserte una capa en el documento. ⑵ Coloque el cursor en la capa y continúe insertando una capa para obtener capas anidadas. (3) 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.