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 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: Si abre 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 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 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 elegir una fuente, seleccione el último elemento en Fuente: Editar lista de fuentes. Luego seleccione el signo + 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.
* * *Arial es la fuente 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: Mayús+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 que desea 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 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. 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, el navegador hace clic en este enlace y se 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 de 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 la celda. También puede 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. 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 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 del 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 del 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 del 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 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.
* * *Combinar toda la página web en diferentes tablas 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 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 toda la página en una tabla de diseño grande, porque la navegación en 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 puedes 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.