Capítulo 4 Implementación de la página de inicio del BLOG de Doking
Ahora que todo está listo, debemos comenzar con el diseño de la página del BLOG de Doking y la implementación del front-end de la base de datos.
Aquí no vamos a hablar sobre el conocimiento de la creación de arte web, sino a explicar las ideas y métodos para construir páginas internas del sitio web en Dreamweaver MX2004.
4.1.1 Ideas de diseño de sitios web
Antes de comenzar cada página web, el diseño básico de la página generalmente debe diseñarse en Firworks o en un software de diseño de imágenes como Photoshop. La Figura 4-1-1 es el diseño básico de la página diseñado en Photoshop.
Figura 4-1-1 El diseño de página básico del BLOG de Doking está
numerado en la Figura 4-1-1. La parte marcada con un círculo cuadrado rojo es la columna izquierda de la página web. Actualmente está en blanco. Lo que se agrega uno por uno en los siguientes capítulos, y la parte marcada con un círculo cuadrado rojo en el número de serie ② es la barra de navegación del sitio web, que se genera dinámicamente a partir de la tabla LM en la base de datos dkblog.mdb establecida en el Capítulo. 3. Una vez que las ideas básicas estén claras, comience a crear la plantilla para el sitio web.
4.1.2 Ideas de diseño para crear plantillas de sitios web
: cree plantillas de sitios web y unifique el diseño web de sitios web. El contenido del menú de columnas del sitio web se genera mediante LM dinámico de la tabla de datos, lo que también facilita la modificación del contenido del menú de columnas del sitio web.
(1) Abra [Archivo] → [Nuevo], abra el cuadro de diálogo de [Nuevo documento], seleccione "Categoría:" como "Página de plantilla", seleccione "Página de plantilla:" como "Plantilla ASP.NET VB", el resultado es como se muestra en la figura Como se muestra en 4-1-2.
Figura 4-1-2 Cuadro de diálogo Nueva plantilla
(2) Haga clic en el botón "Crear", inserte la capa, en su ventana de propiedades, establezca el ID en "principal", cambie "Izquierda (L)" y "Superior (T)" )" a 0px, establezca el "Ancho (W)" al 100% y establezca la alineación en centrada. Esto es para centrar la página web.
(3) Inserte una tabla, establezca el ID en "bodyT", establezca el ancho en 780 píxeles (esto está diseñado en función del ancho de su diseño de página básico), establezca los márgenes y el espaciado de la celda unitaria en 0 y establezca el grosor del borde se establece en 0.
(4) Establezca la alineación vertical de la segunda fila de la tabla "bodyT" en la parte superior y luego divídala en 2 columnas. Establezca el ancho de la primera columna en 220 px y el ancho de la primera columna en 560 px (el ancho. El número de columnas asignadas también se basa en (asignado por el diseño de página básico), establezca el color de fondo de la columna 1 en RGB (236, 236, 236).
(5) Inserte las imágenes de fondo correspondientes en la primera y tercera filas de la tabla "bodyT", establezca la alineación vertical de la primera fila hacia la parte inferior y la alineación horizontal hacia la derecha.
(6) También puede diseñar el título, el tamaño de fuente, el color de fuente de conexión o la combinación de colores según sea necesario.
(7) Establecer la barra de navegación del sitio web.
① Inicie Access2003, abra la base de datos dkblog.mdb e ingrese cuatro registros en orden, incluido diseño gráfico, diseño 3D, diseño web y programación de red, en el campo LM de la tabla LM, como se muestra en la Figura 4-1-3. .
Figura 4-1-3 Entrada de datos de la tabla LM
② Regrese a Dreamweaver, cambie al panel [Comportamiento del servidor], haga clic en el botón "+" y seleccione "Conjunto de datos" en el menú desplegable, como se muestra en la Figura 4- 1-4.
Figura 4-1-4 Agregar un conjunto de datos
③ En el cuadro de diálogo emergente [Conjunto de datos], ingrese el nombre del conjunto de datos como "menuda", seleccione "dkconn" en el menú desplegable de conexión, seleccione la tabla LM en en el menú desplegable de la tabla y seleccione Columna como opción "Todos", seleccione el campo "LMID" en el menú desplegable de clasificación y establezca la clasificación en orden ascendente. El resultado se muestra en la Figura 4-1-5. :
Figura 4-1-5 Cuadro de diálogo del conjunto de datos
④ Haga clic en el botón "Prueba" y aparecerá el cuadro de diálogo que se muestra en la Figura 4-1-6, indicando que el conjunto de datos se creó correctamente. Haga clic en el botón "Aceptar" para completar. .
Figura 4-1-6 Cuadro de diálogo de prueba del conjunto de datos
⑤ Cambie a la pestaña [Enlace] y expanda los campos del conjunto de datos (menuda), como se muestra en la Figura 4-1-7:
Figura 4-1-7 Pestaña Enlace
⑥ Arrastre el campo LM a la primera fila del cuerpo de la tabla T, como se muestra en la Figura 4-1-8:
Figura 4-1-8 Arrastre el campo LM
⑦ Suelte el mouse y se agregará un carácter sombreado a la primera línea: {menuda.LM}, ingrese "Página de inicio | " delante de él y luego ingrese el símbolo " | Contáctenos”, el resultado se muestra en la Figura 4-1-9:
Figura 4-1-9 Vincular datos a la tabla bodyT
⑧ Seleccione el carácter sombreado {menuda.LM} y el siguiente carácter "|", seleccione el menú [Insertar] → [Objeto de aplicación] → [Área de repetición], en el menú emergente arriba En el cuadro de diálogo [Repetir área], seleccione el conjunto de datos como "menuda" y seleccione los registros mostrados como "Todos los registros", como se muestra en la Figura 4-1-10. Haga clic en el botón "Aceptar" para completar la navegación del sitio web. menú.
Figura 4-1-10 Cuadro de diálogo Área repetida
(7) Mueva el mouse a la segunda fila y segunda columna del cuerpo de la tabla, seleccione el menú [Insertar] → [Objeto de plantilla] → [Área editable] y haga clic en [Nueva área editable] En el cuadro de diálogo, ingrese el nombre "mainbody" y presione la tecla "OK", como se muestra en la Figura 4-1-11:
Figura 4-1-11 Cree una nueva área editable.
Esto completa el trabajo inicial de la plantilla del sitio web. Guarde la plantilla como bkblog.dwt.aspx.
4.1.3 Ideas de diseño para el diseño de la página de inicio
: después de completar el trabajo de construcción de la plantilla del sitio web, utilícela para crear y actualizar el sitio web.
(1) Cree una nueva página dinámica "ASP.NET VB", abra el menú [Modificar] → [Plantilla] → [Aplicar plantilla a la página], en el cuadro de diálogo emergente [Seleccionar plantilla], seleccione la plantilla "dkblog ", y haga clic en el botón "Seleccionar", como se muestra en la Figura 4-1-12:
Figura 4-1-12 Seleccionar plantilla
(2) Mueva el mouse al área editable del "cuerpo principal", inserte una tabla y establezca su ID en "ztre". De hecho, está diseñado como se muestra en la Figura 4-1-13. Esto es lo que mostrará cada nota de estudio.
Figura 4-1-13 El contenido que se mostrará en cada nota de estudio
La inserción del conjunto de datos explicado en esta sección no es tan simple como se explica en la sección anterior. Primero, mire la Figura 4-1-13. Cada nota de estudio mostrará el tema, la hora de publicación, la categoría de la nota (es decir, la subcolumna a la que pertenece), el autor (nombre) y las respuestas (número). mire el diagrama de diseño de la tabla ZT (Figura 3-2-2 en la Sección 3.2), solo hay LMID (el ID de la columna de clasificación) y ningún nombre de columna, que se puede obtener conectándose a la tabla LM allí; es solo YHID (ID del editor), pero no el nombre del autor, que debe conectarse. Solo se puede obtener de la tabla YH; otros datos se pueden obtener de la tabla ZT; "¡Es tan complicado!" En realidad, no te preocupes, todas las dificultades se pueden resolver en Access.
4.2.1 Establecer consulta de conexión a la tabla de datos
(1) Inicie Access2003, seleccione [Consulta] → haga doble clic en [Crear consulta en la vista Diseño] y aparecerá la ventana [Mostrar tabla], como se muestra en la Figura 4-2-1 :
Figura 4-2-1 Agregar tabla de conexión de consulta
(2) Agregue la tabla LM, la tabla ZT y la tabla YH en orden. Los resultados se muestran en la Figura 4-2-2:
Figura 4-2-2 Vista de conexión de la tabla de datos
(3) Diseñe el campo de consulta como se muestra en la Figura 4-2-3:
Figura 4-2-3 Diagrama de diseño del campo de consulta
(4) Guarde esta consulta como ZTRE y complete la consulta de conexión de la tabla de datos en Access.
4.2.2 Insertar conjunto de datos
(1) Regrese a Dreamweaver, cambie al panel [Comportamiento del servidor], haga clic en el botón "+", agregue el conjunto de datos Ztre, seleccione la tabla como la consulta que ZTRE acaba de crear en Access y otros elementos relevantes. configuraciones, como se muestra en la Figura 4-2-4:
Figura 4-2-4 Configuración del conjunto de datos de Ztre
(2) Cambie a la pestaña [Enlace], expanda el conjunto de datos (Ztre), arrastre el campo ZTNAME para reemplazar el "Tema de nota de estudio" en la tabla ztre y arrastre el campo ZTTIME para reemplazar "Publicar" Hora", arrastre el campo LM para reemplazar "Categoría", arrastre el campo ZYTEXT al espacio en blanco de la segunda fila de la tabla ztre, otros diseños se muestran en la Figura 4-2-5:
Figura 4-2-5 Vincular datos a la tabla ztre
(3) Cambie al panel [Comportamiento del servidor] Puede ver que se ha agregado una gran cantidad de texto dinámico. Haga doble clic en el texto dinámico (Ztre.ZYTEXT) y seleccione. el formato como "Codificación—Codificación HTML" Formato", como se muestra en la Figura 4-2-6:
Figura 4-2-6 Configurar el formato de texto dinámico
(4) Seleccione la primera, segunda y tercera filas de la tabla ztre y defínalas como áreas repetidas. Las configuraciones se muestran en la Figura 4-2-7.
Figura 4-2-7 Defina el área de repetición.
Esto completa el trabajo de insertar el conjunto de datos y el enlace de datos en la página de inicio.
(1) Seleccione "Inicio", en el panel [Comportamiento del servidor], haga clic en el botón "+", seleccione [Paginación del conjunto de datos] → [Mover a la primera página], como se muestra en la Figura 4-3-1:
Figura 4-3-1 Menú de paginación del conjunto de datos
(2) En el cuadro de diálogo emergente, seleccione el conjunto de datos como Ztre y presione la tecla "OK", como se muestra en la Figura 4-3-2:
Figura 4-3-2 Ir al cuadro de diálogo de la primera página
(3) Seleccione "Página anterior" y defínala como "Mover a la página anterior" de la paginación del conjunto de datos, seleccione "Página siguiente" y defínala como un conjunto de datos "; Mover a la página siguiente" para la paginación; Seleccione "Último" para definir "Mover a la última página" para la paginación del conjunto de datos.
(4) Cambie "Número de página" a "Número de página actual:" En el panel [Comportamiento del servidor], haga clic en el botón "+" y seleccione [Mostrar recuento de registros] → [Mostrar número de página actual].
(5) Guarde index.aspx, completando así el diseño de la página de inicio. Ingrese algunos registros en la tabla ZT y la tabla YH correspondientes en Access, y navegue por ellos en el navegador IE (si no hay instrucciones especiales en los siguientes capítulos, Todas las notas pertenecen a la columna "Programación de red"), como se muestra en la Figura 4-3-3:
Figura 4-3-3 Imagen de navegación de la página de inicio