Kapitel 4 Implementierung der BLOG-Homepage von Doking
Nachdem nun alles fertig ist, sollten wir mit der Seitengestaltung von Dokings BLOG und der Implementierung des Datenbank-Frontends beginnen.
Hier werden wir nicht über die Kenntnisse der Web-Art-Erstellung sprechen, sondern die Ideen und Methoden zum Erstellen interner Seiten der Website in Dreamweaver MX2004 erläutern.
4.1.1 Ideen für das Website-Design
Bevor Sie mit jeder Webseite beginnen, sollte das grundlegende Seitendesign im Allgemeinen in Firworks oder einer Bilddesign-Software wie Photoshop entworfen werden. Abbildung 4-1-1 zeigt das grundlegende Seitendesign, das in Photoshop entworfen wurde.
Abbildung 4-1-1 Das grundlegende Seitendesign von Dokings BLOG ist
in Abbildung 4-1-1 nummeriert. ①Der mit einem roten quadratischen Kreis markierte Teil ist die linke Spalte der Webseite. Ihre Spalten werden derzeit besprochen In den folgenden Kapiteln wird nacheinander hinzugefügt und der mit einem roten quadratischen Kreis markierte Teil bei der Seriennummer ② ist die Navigationsleiste der Website, die dynamisch aus der LM-Tabelle in der im Kapitel eingerichteten Datenbank dkblog.mdb generiert wird 3. Nachdem die Grundideen klar sind, beginnen Sie mit der Erstellung der Vorlage für die Website.
4.1.2 Designideen zum Erstellen von Website-Vorlagen
: Erstellen Sie Website-Vorlagen und vereinheitlichen Sie das Website-Webdesign. Der Inhalt des Spaltenmenüs der Website wird durch dynamisches LM der Datentabelle generiert, was auch die Änderung des Spaltenmenüinhalts der Website erleichtert.
(1) Öffnen Sie [Datei] → [Neu], öffnen Sie das Dialogfeld [Neues Dokument], wählen Sie „Kategorie:“ als „Vorlagenseite“, wählen Sie „Vorlagenseite:“ als „ASP.NET VB-Vorlage“, das Ergebnis ist wie in der Abbildung gezeigt. Wie in 4-1-2 gezeigt.
Abbildung 4-1-2 Dialogfeld „Neue Vorlage
“ (2) Klicken Sie auf die Schaltfläche „Erstellen“, fügen Sie die Ebene ein, legen Sie in ihrem Eigenschaftenfenster die ID auf „Haupt“ fest und ändern Sie „Links (L)“ und „Oben (T)“. )“ auf 0px, setzen Sie die „Breite (W)“ auf 100 % und stellen Sie die Ausrichtung auf zentriert ein. Dies dient dazu, die Webseite zu zentrieren.
(3) Fügen Sie eine Tabelle ein, setzen Sie die ID auf „bodyT“, legen Sie die Breite auf 780 Pixel fest (dies basiert auf der Breite Ihres grundlegenden Seitendesigns), legen Sie die Ränder und den Abstand der Einheitszelle auf 0 fest und legen Sie fest Die Randstärke wird auf 0 gesetzt.
(4) Stellen Sie die vertikale Ausrichtung der zweiten Zeile der Tabelle „bodyT“ nach oben ein und teilen Sie sie dann in zwei Spalten auf. Stellen Sie die Breite der ersten Spalte auf 220 Pixel und die Breite der ersten Spalte auf 560 Pixel ein Da die Anzahl der zugewiesenen Spalten ebenfalls darauf basiert (durch Ihr grundlegendes Seitendesign zugewiesen), legen Sie die Hintergrundfarbe von Spalte 1 auf RGB (236, 236, 236) fest.
(5) Fügen Sie entsprechende Hintergrundbilder in die erste und dritte Zeile der Tabelle „bodyT“ ein, legen Sie die vertikale Ausrichtung der ersten Zeile nach unten und die horizontale Ausrichtung nach rechts fest.
(6) Sie können auch den Titel, die Schriftgröße, die Verbindungsschriftfarbe oder das Farbschema nach Bedarf gestalten.
(7) Richten Sie die Navigationsleiste der Website ein.
① Starten Sie Access2003, öffnen Sie die Datenbank dkblog.mdb und geben Sie der Reihe nach vier Datensätze ein, darunter Grafikdesign, 3D-Design, Webdesign und Netzwerkprogrammierung, in das LM-Feld der LM-Tabelle, wie in Abbildung 4-1-3 dargestellt .
Abbildung 4-1-3 LM-Tabellendateneingabe
② Kehren Sie zu Dreamweaver zurück, wechseln Sie zum Bereich [Serververhalten], klicken Sie auf die Schaltfläche „+“ und wählen Sie „Datensatz“ im Dropdown-Menü aus, wie in Abbildung 4 dargestellt. 1-4.
Abbildung 4-1-4 Hinzufügen eines Datensatzes
③ Geben Sie im Popup-Dialogfeld [Datensatz] den Namen des Datensatzes als „menuda“ ein, wählen Sie „dkconn“ im Verbindungs-Dropdown-Menü und wählen Sie die LM-Tabelle aus Wählen Sie im Dropdown-Menü „Tabelle“ die Option „Spalte“ aus, wählen Sie im Dropdown-Menü „Sortieren“ das Feld „LMID“ aus und stellen Sie die Sortierung auf „aufsteigend“ ein. Das Ergebnis ist in Abbildung 4-1-5 dargestellt :
Abbildung 4-1-5 Dialogfeld „Datensatz
“ ④ Klicken Sie auf die Schaltfläche „Test“. Das in Abbildung 4-1-6 gezeigte Dialogfeld wird angezeigt und zeigt an, dass der Datensatz erfolgreich erstellt wurde. Klicken Sie zum Abschluss auf die Schaltfläche „OK“. .
Abbildung 4-1-6 Dialogfeld „Datensatztest“
⑤ Wechseln Sie zur Registerkarte [Bindung] und erweitern Sie die Felder des Datensatzes (Menuda), wie in Abbildung 4-1-7 dargestellt:
Abbildung 4-1-7 Registerkarte „Bindung“
⑥ Ziehen Sie das LM-Feld in die erste Zeile des Tabellenkörpers T, wie in Abbildung 4-1-8 dargestellt:
Abbildung 4-1-8 Ziehen Sie das LM-Feld
⑦ Lassen Sie die Maustaste los und ein schattiertes Zeichen wird zur ersten Zeile hinzugefügt: {menuda.LM}, geben Sie davor „Home Page |“ ein und geben Sie dann das Symbol „ ein. |. Kontaktieren Sie uns“, das Ergebnis ist in Abbildung 4-1-9 dargestellt:
Abbildung 4-1-9 Binden von Daten an die bodyT-Tabelle
⑧ Wählen Sie das schattierte Zeichen {menuda.LM} und das folgende Zeichen „|“ aus, wählen Sie im Popup-Menü das Menü „Einfügen“ → „Anwendungsobjekt“ → „Bereich wiederholen“. nach oben Wählen Sie im Dialogfeld [Wiederholungsbereich] den Datensatz als „menuda“ und die angezeigten Datensätze als „Alle Datensätze“ aus, wie in Abbildung 4-1-10 gezeigt. Klicken Sie auf die Schaltfläche „OK“, um die Website-Navigation abzuschließen Speisekarte.
Abbildung 4-1-10 Dialogfeld „Wiederholungsbereich“
(7) Bewegen Sie die Maus in die zweite Zeile und zweite Spalte des Tabellenkörpers, wählen Sie im Menü „Einfügen“ → „Vorlagenobjekt“ → „Bearbeitbarer Bereich“ und klicken Sie auf „Neuer bearbeitbarer Bereich“. Geben Sie im Dialogfeld den Namen „mainbody“ ein und drücken Sie die Taste „OK“, wie in Abbildung 4-1-11 dargestellt:
Abbildung 4-1-11 Erstellen Sie einen neuen bearbeitbaren Bereich.
Damit ist die erste Arbeit der Website-Vorlage abgeschlossen. Speichern Sie die Vorlage als bkblog.dwt.aspx.
4.1.3 Designideen für das Homepage-Design
: Nachdem Sie die Erstellung der Website-Vorlage abgeschlossen haben, verwenden Sie diese zum Erstellen und Aktualisieren der Website.
(1) Erstellen Sie eine neue dynamische Seite „ASP.NET VB“, öffnen Sie das Menü [Ändern] → [Vorlage] → [Vorlage auf Seite anwenden] und wählen Sie im Popup-Dialogfeld [Vorlage auswählen] die Vorlage „dkblog“ aus „, und klicken Sie auf die Schaltfläche „Auswählen“, wie in Abbildung 4-1-12 dargestellt:
Abbildung 4-1-12 Vorlage auswählen
(2) Bewegen Sie die Maus in den bearbeitbaren Bereich „Hauptteil“, fügen Sie eine Tabelle ein und stellen Sie deren ID auf „ztre“ ein. Tatsächlich ist sie wie in Abbildung 4-1-13 dargestellt gestaltet . Das wird jede Studiennotiz zeigen.
Abbildung 4-1-13 Der Inhalt, der in jeder Studiennotiz angezeigt wird.
Das in diesem Abschnitt erläuterte Einfügen des Datensatzes ist nicht so einfach wie im vorherigen Abschnitt erläutert. Schauen Sie sich zunächst Abbildung 4-1-13 an. In jeder Studiennotiz werden das Thema, die Veröffentlichungszeit, die Notizkategorie (d. h. die Unterspalte, zu der sie gehört), der Autor (Name) und die Antworten (Nummer) angezeigt Schauen Sie sich das Designdiagramm der ZT-Tabelle an (Abbildung 3-2-2 in Abschnitt 3.2). Dort gibt es nur LMID (die ID der Klassifizierungsspalte) und keinen Spaltennamen, der durch Herstellen einer Verbindung zur LM-Tabelle dort erhalten werden kann ist nur YHID (die ID des Herausgebers), aber kein Name des Autors, der verbunden werden muss. Sie können nur aus der YH-Tabelle abgerufen werden, andere Daten können aus der ZT-Tabelle abgerufen werden. „Es ist so kompliziert!“ Eigentlich keine Sorge, alle Schwierigkeiten können in Access gelöst werden.
4.2.1 Datentabellen-Verbindungsabfrage einrichten
(1) Starten Sie Access2003, wählen Sie [Abfrage] → doppelklicken Sie auf [Abfrage in Entwurfsansicht erstellen] und das Fenster [Tabelle anzeigen] wird angezeigt, wie in Abbildung 4-2-1 dargestellt :
Abbildung 4-2-1 Abfrageverbindungstabelle hinzufügen
(2) Fügen Sie die LM-Tabelle, die ZT-Tabelle und die YH-Tabelle der Reihe nach hinzu. Die Ergebnisse sind in Abbildung 4-2-2 dargestellt:
Abbildung 4-2-2 Datentabellen-Verbindungsansicht
(3) Gestalten Sie das Abfragefeld wie in Abbildung 4-2-3 dargestellt:
Abbildung 4-2-3 Diagramm des Abfragefeldentwurfs
(4) Speichern Sie diese Abfrage als ZTRE und schließen Sie die Datentabellenverbindungsabfrage in Access ab.
4.2.2 Datensatz einfügen
(1) Kehren Sie zu Dreamweaver zurück, wechseln Sie zum Bereich [Serververhalten], klicken Sie auf die Schaltfläche „+“, fügen Sie den Datensatz Ztre hinzu, wählen Sie die Tabelle als Abfrage ZTRE aus, die gerade in Access erstellt wurde, und andere relevante Elemente Einstellungen, wie in Abbildung 4-2-4 dargestellt:
Abbildung 4-2-4 Einstellungen des Ztre-Datensatzes
(2) Wechseln Sie zur Registerkarte [Binding], erweitern Sie den Datensatz (Ztre), ziehen Sie das Feld ZTNAME, um das „Study Note Topic“ in der Tabelle ztre zu ersetzen, und ziehen Sie Ziehen Sie das Feld ZTTIME, um „Publish Time“ zu ersetzen, und ziehen Sie das Feld LM, um „Category“ zu ersetzen. Ziehen Sie das Feld ZYTEXT in den leeren Bereich der zweiten Zeile der Tabelle ztre. Weitere Designs sind in Abbildung 4-2-5 dargestellt:
Abbildung 4-2-5 Daten an die ztre-Tabelle binden
(3) Wechseln Sie zum Bereich „Serververhalten“. Sie können sehen, dass viel dynamischer Text hinzugefügt wurde. Doppelklicken Sie auf den dynamischen Text (Ztre.ZYTEXT). das Format als „Encoding – HTML Encoding“ Format“, wie in Abbildung 4-2-6 dargestellt:
Abbildung 4-2-6 Dynamisches Textformat einrichten
(4) Wählen Sie die erste, zweite und dritte Zeile der Tabelle ztre aus und definieren Sie sie als Wiederholungsbereiche. Die Einstellungen sind in Abbildung 4-2-7 dargestellt.
Abbildung 4-2-7 Definieren Sie den Wiederholungsbereich.
Damit ist die Arbeit zum Einfügen des Datensatzes und der Datenbindung auf der Startseite abgeschlossen.
(1) Wählen Sie „Home“, klicken Sie im Bereich „Serververhalten“ auf die Schaltfläche „+“ und wählen Sie [Datensatz-Paging] → [Zur ersten Seite verschieben], wie in Abbildung 4-3-1 dargestellt:
Abbildung 4-3-1 Paging-Menü für Datensätze
(2) Wählen Sie im Popup-Dialogfeld den Datensatz als Ztre aus und drücken Sie die Taste „OK“, wie in Abbildung 4-3-2 dargestellt:
Abbildung 4-3-2 Dialogfeld „Zur ersten Seite wechseln
“ (3) Wählen Sie „Vorherige Seite“ und definieren Sie sie als „Zur vorherigen Seite verschieben“ der Datensatz-Page. Wählen Sie „Nächste Seite“ und definieren Sie sie als Datensatz. „Zur nächsten Seite wechseln“ für die Paginierung; Wählen Sie „Letzte“, um „Zur letzten Seite wechseln“ für die Paginierung des Datensatzes zu definieren.
(4) Ändern Sie „Seitenzahl“ in „Aktuelle Seitenzahl:“ Klicken Sie im Bereich „Serververhalten“ auf die Schaltfläche „+“ und wählen Sie [Anzahl der Datensätze anzeigen] → [Aktuelle Seitenzahl anzeigen].
(5) Speichern Sie index.aspx und vervollständigen Sie so das Design der Homepage. Geben Sie einige Datensätze in die entsprechende ZT-Tabelle und YH-Tabelle in Access ein und durchsuchen Sie sie im IE-Browser (sofern in den folgenden Kapiteln keine speziellen Anweisungen vorhanden sind). Die Notizen gehören alle zur Spalte „Netzwerkprogrammierung“, wie in Abbildung 4-3-3 dargestellt:
Abbildung 4-3-3 Bild zum Durchsuchen der Startseite