Chapitre 4 Implémentation de la page d'accueil du BLOG de Doking
Maintenant que tout est prêt, nous devrions commencer par la conception de la page du BLOG de Doking et l'implémentation du front-end de la base de données.
Ici, nous n'allons pas parler des connaissances en création artistique Web, mais expliquer les idées et les méthodes de construction de pages internes du site Web dans Dreamweaver MX2004.
4.1.1 Idées de conception de sites Web
Avant de démarrer chaque page Web, la conception de base de la page doit généralement être conçue dans Firworks ou dans un logiciel de conception d'images tel que Photoshop. La figure 4-1-1 est la conception de base de la page conçue dans Photoshop.
Figure 4-1-1 La conception de base des pages du BLOG de Doking est
numérotée dans la figure 4-1-1. ①La partie marquée d'un cercle carré rouge est la colonne de gauche de la page Web. Elle est actuellement vide. un par un dans les chapitres suivants. Ce qui est ajouté, et la partie marquée d'un cercle carré rouge au numéro de série ② est la barre de navigation du site Web, qui est générée dynamiquement à partir de la table LM dans la base de données dkblog.mdb établie au chapitre. 3. Une fois les idées de base claires, commencez à créer le modèle du site Web.
4.1.2 Idées de conception pour créer des modèles de sites Web
: Créez des modèles de sites Web et unifiez la conception Web des sites Web. Le contenu du menu des colonnes du site Web est généré par LM dynamique du tableau de données, ce qui facilite également la modification du contenu du menu des colonnes du site Web.
(1) Ouvrez [Fichier] → [Nouveau], ouvrez la boîte de dialogue de [Nouveau document], sélectionnez « Catégorie : » comme « Page modèle », sélectionnez « Page modèle : » comme « Modèle ASP.NET VB », le résultat est comme indiqué sur la figure Comme indiqué en 4-1-2.
Figure 4-1-2 Boîte de dialogue Nouveau modèle
(2) Cliquez sur le bouton "Créer", insérez le calque, dans sa fenêtre de propriétés, définissez l'ID sur "principal", modifiez "Gauche (L)" et "Haut (T) )" sur 0px, définissez la "Largeur (W)" sur 100 % et définissez l'alignement sur centré. Il s'agit de centrer la page Web.
(3) Insérez un tableau, définissez l'ID sur "bodyT", définissez la largeur sur 780 pixels (cela est conçu en fonction de la largeur de la conception de votre page de base), définissez les marges et l'espacement de la cellule unitaire sur 0 et définissez l'épaisseur de la bordure est définie sur 0.
(4) Définissez l'alignement vertical de la deuxième ligne du tableau "bodyT" vers le haut, puis divisez-la en 2 colonnes. Définissez la largeur de la première colonne sur 220 px et la largeur de la première colonne sur 560 px (la largeur). des colonnes allouées est également basé sur (attribué par la conception de votre page de base), définissez la couleur d'arrière-plan de la colonne 1 sur RVB (236, 236, 236).
(5) Insérez les images d'arrière-plan correspondantes dans les première et troisième lignes du tableau "bodyT", définissez l'alignement vertical de la première ligne vers le bas et l'alignement horizontal vers la droite.
(6) Vous pouvez également concevoir le titre, la taille de la police, la couleur de la police de connexion ou la palette de couleurs selon vos besoins.
(7) Établir la barre de navigation du site Web.
① Démarrez Access2003, ouvrez la base de données dkblog.mdb et saisissez quatre enregistrements dans l'ordre, dont la conception graphique, la conception 3D, la conception Web et la programmation réseau, dans le champ LM de la table LM, comme indiqué dans la figure 4-1-3. .
Figure 4-1-3 Saisie des données du tableau LM
② Revenez à Dreamweaver, passez au panneau [Comportement du serveur], cliquez sur le bouton « + » et sélectionnez « Ensemble de données » dans le menu déroulant, comme illustré dans la Figure 4- 1-4.
Figure 4-1-4 Ajout d'un ensemble de données
③ Dans la boîte de dialogue contextuelle [Ensemble de données], entrez le nom de l'ensemble de données sous la forme "menuda", sélectionnez "dkconn" dans le menu déroulant de connexion, sélectionnez la table LM dans dans le menu déroulant du tableau, sélectionnez Colonne et l'option "Tous", sélectionnez le champ "LMID" dans le menu déroulant de tri et définissez le tri par ordre croissant. Le résultat est présenté dans la figure 4-1-5. :
Figure 4-1-5 Boîte de dialogue Ensemble de données
④ Cliquez sur le bouton « Test » et la boîte de dialogue illustrée dans la figure 4-1-6 apparaîtra, indiquant que l'ensemble de données a été créé avec succès. Cliquez sur le bouton « OK » pour terminer. .
Figure 4-1-6 Boîte de dialogue Test de l'ensemble de données
⑤ Basculez vers l'onglet [Liaison] et développez les champs de l'ensemble de données (menu), comme indiqué dans la Figure 4-1-7 :
Figure 4-1-7 Onglet Liaison
⑥ Faites glisser le champ LM vers la première ligne du corps du tableau T, comme illustré dans la figure 4-1-8 :
Figure 4-1-8 Faites glisser le champ LM
⑦ Relâchez la souris et un caractère ombré sera ajouté à la première ligne : {menuda.LM}, saisissez "Page d'accueil | " devant, puis saisissez le symbole " | Contactez-nous », le résultat est présenté dans la figure 4-1-9 :
Figure 4-1-9 Lier les données à la table bodyT
⑧ Sélectionnez le caractère ombré {menuda.LM} et le caractère suivant "|", sélectionnez le menu [Insérer] → [Objet d'application] → [Zone de répétition], dans la fenêtre contextuelle. up Dans la boîte de dialogue [Zone de répétition], sélectionnez l'ensemble de données comme « menu » et sélectionnez les enregistrements affichés comme « Tous les enregistrements », comme illustré dans la figure 4-1-10. Cliquez sur le bouton « OK » pour terminer la navigation sur le site Web. menu.
Figure 4-1-10 Boîte de dialogue Zone répétitive
(7) Déplacez la souris vers la deuxième ligne et la deuxième colonne du corps du tableau, sélectionnez le menu [Insérer] → [Objet modèle] → [Zone modifiable], puis cliquez sur [Nouvelle zone modifiable] Dans la boîte de dialogue, entrez le nom « mainbody » et appuyez sur la touche « OK », comme illustré dans la figure 4-1-11 :
Figure 4-1-11 Créez une nouvelle zone modifiable
Ceci termine le travail initial du modèle de site Web. Enregistrez le modèle sous bkblog.dwt.aspx.
4.1.3 Idées de conception pour la conception de la page d'accueil
: Après avoir terminé le travail de construction du modèle de site Web, utilisez-le pour créer et mettre à jour le site Web.
(1) Créez une nouvelle page dynamique "ASP.NET VB", ouvrez le menu [Modifier] → [Modèle] → [Appliquer le modèle à la page], dans la boîte de dialogue contextuelle [Sélectionner un modèle], sélectionnez le modèle "dkblog ", puis cliquez sur le bouton " Sélectionner", comme illustré dans la figure 4-1-12 :
Figure 4-1-12 Sélectionnez un modèle
(2) Déplacez la souris dans la zone modifiable "mainbody", insérez un tableau et définissez son ID sur "ztre". En fait, il est conçu comme indiqué dans la figure 4-1-13. C'est ce que montrera chaque note d'étude.
Figure 4-1-13 Le contenu qui sera affiché dans chaque note d'étude
L'insertion de l'ensemble de données expliquée dans cette section n'est pas aussi simple que celle expliquée dans la section précédente. Tout d'abord, regardez la figure 4-1-13. Chaque note d'étude affichera le sujet, l'heure de publication, la catégorie de note (c'est-à-dire la sous-colonne à laquelle elle appartient), l'auteur (nom) et les réponses (numéro). regardez le schéma de conception de la table ZT (Figure 3-2-2 dans la section 3.2), il n'y a que LMID (l'ID de la colonne de classification) et aucun nom de colonne, qui peut être obtenu en se connectant à la table LM ; n'est que YHID (l'identifiant de l'éditeur), mais pas de nom d'auteur, qui doit être connecté. Il ne peut être obtenu qu'à partir de la table YH, d'autres données peuvent être obtenues à partir de la table ZT. "C'est tellement compliqué !" En fait, ne vous inquiétez pas, toutes les difficultés peuvent être résolues dans Access.
4.2.1 Établir une requête de connexion à la table de données
(1) Démarrez Access2003, sélectionnez [Requête] → double-cliquez sur [Créer une requête en mode Conception] et la fenêtre [Afficher la table] apparaîtra, comme indiqué dans la figure 4-2-1. :
Figure 4-2-1 Ajouter une table de connexion de requête
(2) Ajoutez la table LM, la table ZT et la table YH dans l'ordre. Les résultats sont présentés dans la figure 4-2-2 :
Figure 4-2-2 Vue de connexion à la table de données
(3) Concevez le champ de requête comme indiqué dans la figure 4-2-3 :
Figure 4-2-3 Diagramme de conception du champ de requête
(4) Enregistrez cette requête sous ZTRE et complétez la requête de connexion à la table de données dans Access.
4.2.2 Insérer un ensemble de données
(1) Revenez à Dreamweaver, passez au panneau [Comportement du serveur], cliquez sur le bouton "+", ajoutez l'ensemble de données Ztre, sélectionnez la table comme requête ZTRE qui vient d'être créée dans Access et d'autres éléments pertinents. paramètres, comme le montre la figure 4-2-4 :
Figure 4-2-4 Paramètres de l'ensemble de données Ztre
(2) Basculez vers l'onglet [Binding], développez l'ensemble de données (Ztre), faites glisser le champ ZTNAME pour remplacer le "Study Note Topic" dans le tableau ztre, et faites glisser le champ ZTTIME pour remplacer "Publish" Time", faites glisser le champ LM pour remplacer "Category", faites glisser le champ ZYTEXT vers l'espace vide de la deuxième ligne du tableau ztre, d'autres designs sont présentés dans la Figure 4-2-5 :
Figure 4-2-5 Lier les données à la table ztre
(3) Basculez vers le panneau [Comportement du serveur] Vous pouvez voir qu'un grand nombre de texte dynamique a été ajouté Double-cliquez sur le texte dynamique (Ztre.ZYTEXT) et sélectionnez. le format comme "Format Encodage—Encodage HTML", comme illustré dans la Figure 4-2-6 :
Figure 4-2-6 Configurer le format de texte dynamique
(4) Sélectionnez les première, deuxième et troisième lignes du tableau ztre et définissez-les comme zones répétitives. Les paramètres sont tels qu'indiqués dans la figure 4-2-7.
Figure 4-2-7 Définir la zone répétitive
Ceci termine le travail d'insertion de l'ensemble de données et de liaison de données sur la page d'accueil.
(1) Sélectionnez « Accueil », dans le panneau [Comportement du serveur], cliquez sur le bouton « + », sélectionnez [Dataset Paging] → [Déplacer vers la première page], comme indiqué dans la figure 4-3-1 :
Figure 4-3-1 Menu de pagination du jeu de données
(2) Dans la boîte de dialogue contextuelle, sélectionnez le jeu de données comme Ztre et appuyez sur la touche « OK », comme indiqué dans la figure 4-3-2 :
Figure 4-3-2 Boîte de dialogue Passer à la première page
(3) Sélectionnez « Page précédente » et définissez-la comme « Déplacer vers la page précédente » de la pagination de l'ensemble de données ; sélectionnez « Page suivante » et définissez-la comme un ensemble de données « ; Passer à la page suivante" pour la pagination ; Sélectionnez "Dernier" pour définir "Déplacer vers la dernière page" pour la pagination de l'ensemble de données.
(4) Remplacez « Numéro de page » par « Numéro de page actuel : » Dans le panneau [Comportement du serveur], cliquez sur le bouton « + » et sélectionnez [Afficher le nombre d'enregistrements] → [Afficher le numéro de page actuel].
(5) Enregistrez index.aspx, complétant ainsi la conception de la page d'accueil. Entrez quelques enregistrements dans la table ZT et la table YH correspondantes dans Access, et parcourez-les dans le navigateur IE (s'il n'y a pas d'instructions spéciales dans les chapitres suivants, Les notes appartiennent toutes à la colonne "Programmation Réseau"), comme le montre la Figure 4-3-3 :
Figure 4-3-3 Image de navigation sur la page d'accueil