Cómo utilizar el código fuente del sitio web de la aplicación Dreamweaver para crear páginas web
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 este sitio web deben utilizar 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 y seleccione la carpeta que acaba de crear (E: web) en la carpeta raíz local. Entonces confírmalo.
Nota: Cuando abra Dreamweaver nuevamente, el sitio que acaba de configurar se encontrará automáticamente. Si hay varios sitios, puede seleccionarlos en el menú "Sitios - Abrir sitio".
En segundo lugar, cree una página
1. Haga clic derecho en el espacio en blanco debajo de la carpeta local E:\MyWeb y seleccione "Nuevo archivo" para crear una página. El nombre 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 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 el área del título, haga clic derecho y seleccione Propiedades de la página para abrir la ventana Propiedades de la página. Aquí puede establecer el título del sitio web, el color de fondo o la imagen de fondo, el color del hipervínculo (generalmente el predeterminado) 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, abra el panel de propiedades con el menú "Ventana/Propiedades", seleccione el tamaño del texto como 6, luego centre el texto, luego use algunos retornos de carro delante del texto para centrarlo 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.
La fuente Song es la más utilizada 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, haga una foto antes de usarlo.
La forma de escribir espacios en una página web es establecer el método de entrada en ancho completo.
La forma de 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 crear una carpeta. El lugar donde se colocan las imágenes se puede cambiar a 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 "Restablecer 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 en la imagen cuando el mouse apunta hacia ella; "Borde" es el ancho del borde de la imagen y "Alineación" es el método de 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 un espacio en blanco para abrir una nueva ventana.
2. Agregue un enlace a la imagen
Igual que el enlace al texto anterior, inserte una imagen y luego selecciónela 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, si hace clic en el cuadrado, 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 de este 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, realizará 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 ( 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ú. Es decir, puedes elegir algunos estilos de tabla preestablecidos.
Trinity Pixel Divider
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 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, establezca su disposición vertical en alineación superior y luego inserte la imagen. La mayoría de los logotipos de sitios web se insertan aquí.
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 con 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 la disposición en centrada 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 una imagen y una barra de navegación.
3. Coloque el cursor en la imagen que acaba de insertar, inserte /table 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 establezca 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 en el centro, alinéelo verticalmente hacia arriba, luego inserte /image e inserte la barra de navegación.
6. Después de colocar el cursor sobre la imagen, inserte /table 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 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, alinee horizontalmente con el centro, alinee verticalmente hacia arriba, inserte /image, inserte la barra de navegación.
9. Después de colocar el cursor sobre la imagen, inserte /table e 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 de ancho, Tabla con 0 bordes y 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, 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 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 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.
Poner toda la página web en diferentes tablas también puede acelerar el tiempo de lectura del navegador. ; debido a que el navegador solo muestra el contenido después de leer la tabla completa, es mejor no encuadrarlo en toda la tabla.
Octavo, 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 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 similar a un dibujo en la página.
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 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 una pequeña tabla anidada en la tabla dividida, refine la página y complete el diseño de toda la página.
* * * *Tenga cuidado de colocar la página completa en una tabla de diseño grande, porque la navegación por una página web de este tipo será muy lenta. 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.
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, arrastre la capa como desee y también podrá ajustar el tamaño.
5. En la columna "Desbordamiento", cuando el texto es más grande que el tamaño de la capa, puede ser visible (la parte sobrante aún se muestra), oculta (la parte sobrante está oculta), desplazándose ( la barra de desplazamiento se muestra independientemente de si se excede o no) y automática (las barras de desplazamiento solo se muestran cuando se excede).
6. Haga clic en el menú Ventana/Otros/Capa para abrir la ventana de administració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 use Modificar/Alinear y use las opciones aquí.
8. Capas anidadas. (1) Primero, inserte una capa en el documento. ⑵ Coloque el cursor en esta capa y luego continúe insertando una capa para obtener una capa anidada. (3) El interior se llama subcapa y el exterior se llama 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.
10. Entender la línea de tiempo.
1. Haga clic en "Insertar/Capa" en el menú para insertar una capa.
2. Inserte imágenes en la capa, como imágenes de aviones. (Las imágenes aquí también pueden ser pequeñas animaciones. Imágenes GIF).
3. Haga clic en Ventana/Otros/Línea de tiempo en el menú para abrir la ventana de la línea de tiempo.
4. Seleccione la capa creada en la página, presione y mantenga presionado el pequeño ícono cuadrado en la esquina superior izquierda de la capa con el mouse y arrastre la capa al fotograma 1 de la línea de tiempo. En este momento, se crea automáticamente una línea de tiempo con una longitud de 15 fotogramas.
5. Seleccione 1 fotograma en la línea de tiempo y arrastre la capa de la página hasta la esquina superior izquierda de la página, que es donde comienza la animación.
6. Seleccione el fotograma 15 en la línea de tiempo y arrastre el fotograma a cualquier longitud, como 30 fotogramas.
7. Selecciona el fotograma 30 y arrastra la capa a la esquina inferior derecha de la página. En este momento, la trayectoria de movimiento de la capa desde el cuadro 1 al cuadro 30 se mostrará en la ventana. (En este momento, el movimiento es una línea recta)
8. Puede hacer clic en el cuadro 15, hacer clic con el botón derecho en "Agregar fotograma clave", seleccionar el cuadro 15 y arrastrar la capa a la parte inferior. la página.
9. Selecciona el elemento "Reproducción automática".
Resumen: Dreamweaver es un software muy potente con muchas funciones que debes resumir y explorar tú mismo. Será fácil una vez que te familiarices con él.