Chapter 4 Implementation of Doking's BLOG homepage
Now that everything is ready, we should start with the page design of Doking's BLOG and the implementation of the database front-end.
Here, we are not going to talk about the knowledge of web art creation, but to explain the ideas and methods of building internal pages of the website in Dreamweaver MX2004.
4.1.1 Website design ideas
Before starting each web page, the basic page design should generally be designed in Firworks or image design software such as Photoshop. Figure 4-1-1 is the basic page design designed in Photoshop.
Figure 4-1-1 The basic page design of Doking's BLOG is
numbered in Figure 4-1-1. ①The part marked with a red square circle is the left column of the web page. It is currently blank. Its columns will be discussed one by one in the following chapters. What is added, and the part marked with a red square circle at serial number ② is the navigation bar of the website, which is dynamically generated from the LM table in the dkblog.mdb database established in Chapter 3. After the basic ideas are clear, start building the template for the website.
4.1.2 Design ideas for building website templates
: Build website templates and unify website web design. The content of the website's column menu is generated by dynamic LM of the data table, which also facilitates the modification of the website's column menu content.
(1) Open [File] → [New], open the dialog box of [New Document], select "Category:" as "Template Page", select "Template Page:" as "ASP.NET VB Template", the result is as shown in the figure As shown in 4-1-2.
Figure 4-1-2 New template dialog box
(2) Click the "Create" button, insert the layer, in its properties window, set the ID to "main", change "Left (L)" and "Top (T) )" to 0px, set the "Width (W)" to 100%, and set the alignment to centered. This is to center the web page.
(3) Insert a table, set the ID to "bodyT", set the width to 780 pixels (this is designed based on the width of your basic page design), set the margins and spacing of the unit cell to 0, and set the border thickness Set to 0.
(4) Set the vertical alignment of the second row of the "bodyT" table to the top, and then split it into 2 columns. Set the width of the first column to 220px and the width of the first column to 560px (the width of the allocated columns is also based on (assigned by your basic page design), set the background color of column 1 to RGB (236, 236, 236).
(5) Insert corresponding background images into the first and third rows of the "bodyT" table, set the vertical alignment of the first row to the bottom and the horizontal alignment to the right.
(6) You can also design the title, font size, connection font color or color scheme as needed.
(7) Establish the navigation bar of the website.
① Start Access2003, open the dkblog.mdb database, and enter four records in order, including graphic design, 3D design, web design, and network programming, in the LM field of the LM table, as shown in Figure 4-1-3.
Figure 4-1-3 LM table data entry
② Return to Dreamweaver, switch to the [Server Behavior] panel, click the "+" button, and select "Data Set" in the drop-down menu, as shown in Figure 4-1-4.
Figure 4-1-4 Adding a data set
③ In the pop-up [Data Set] dialog box, enter the data set name as "menuda", select "dkconn" in the connection drop-down menu, select the LM table in the table drop-down menu, and select Column is the "All" option, select the field "LMID" in the sort drop-down menu, and set the sorting to ascending order. The result is shown in Figure 4-1-5:
Figure 4-1-5 Data set dialog box
④ Click the "Test" button, and the dialog box shown in Figure 4-1-6 will appear, indicating that the data set is created successfully. Click the "OK" button to complete.
Figure 4-1-6 Data set test dialog box
⑤ Switch to the [Binding] tab and expand the fields of the data set (menuda), as shown in Figure 4-1-7:
Figure 4-1-7 Binding tab
⑥ Drag the LM field to the first row of table bodyT, as shown in Figure 4-1-8:
Figure 4-1-8 Drag the LM field
⑦ Release the mouse, and a shaded character will be added to the first line: {menuda.LM}, enter "Home Page | " in front of it, and then enter the symbol " | Contact Us ”, the result is shown in Figure 4-1-9:
Figure 4-1-9 Bind data to the bodyT table
⑧ Select the shaded character {menuda.LM} and the following character "|", select [Insert] menu → [Application Object] → [Repeat Area], in the pop-up In the [Repeat Area] dialog box, select the data set as "menuda" and select the displayed records as "All Records", as shown in Figure 4-1-10. Click the "OK" button to complete the website navigation menu.
Figure 4-1-10 Repeating area dialog box
(7) Move the mouse to the second row and second column of table bodyT, select [Insert] menu → [Template Object] → [Editable Area], and click [New Editable Area] In the dialog box, enter the name "mainbody" and press the "OK" key, as shown in Figure 4-1-11:
Figure 4-1-11 Create a new editable area.
This completes the initial work of the website template. Save the template as bkblog.dwt.aspx.
4.1.3 Design ideas for homepage page design
: After completing the website template construction work, use it to build and update the website.
(1) Create a new "ASP.NET VB" dynamic page, open the [Modify] menu → [Template] → [Apply template to page], in the pop-up [Select Template] dialog box, select the template "dkblog", and click " Select" button, as shown in Figure 4-1-12:
Figure 4-1-12 Select template
(2) Move the mouse into the "mainbody" editable area, insert a table, and set its ID to "ztre". In fact, it is designed as shown in Figure 4-1-13. This is What each study note will show.
Figure 4-1-13 The content that will be displayed in each study note
The inserting the data set explained in this section is not as simple as explained in the previous section. First, look at Figure 4-1-13. Each study note will display the topic, publication time, note category (i.e., the sub-column it belongs to), author (name), and replies (number). Next, let’s look at the design diagram of the ZT table ( Figure 3-2-2 in Section 3.2), there is only LMID (the ID of the classification column) and no column name, which can be obtained by connecting to the LM table; there is only YHID (the publisher's ID), but no author's name, which needs to be connected It can only be obtained from the YH table; other data can be obtained from the ZT table. "It's so complicated!" Actually, don't worry, all difficulties can be solved in Access.
4.2.1 Establish data table connection query
(1) Start Access2003, select [Query] → double-click [Create Query in Design View], and the [Show Table] window will pop up, as shown in Figure 4-2-1:
Figure 4-2-1 Add query connection table
(2) Add the LM table, ZT table, and YH table in order. The results are shown in Figure 4-2-2:
Figure 4-2-2 Data table connection view
(3) Design the query field as shown in Figure 4-2-3:
Figure 4-2-3 Query field design diagram
(4) Save this query as ZTRE and complete the data table connection query in Access.
4.2.2 Insert data set
(1) Return to Dreamweaver, switch to the [Server Behavior] panel, click the "+" button, add the data set Ztre, select the table as the query ZTRE just created in Access, and other relevant settings, As shown in Figure 4-2-4:
Figure 4-2-4 Settings of the Ztre data set
(2) Switch to the [Binding] tab, expand the data set (Ztre), drag the field ZTNAME to replace the "Study Note Topic" in the table ztre, and drag the field ZTTIME to replace "Publish" Time", drag the field LM to replace "Category", drag the field ZYTEXT to the blank space of the second row of the table ztre, other designs are shown in Figure 4-2-5:
Figure 4-2-5 Bind data to the ztre table
(3) Switch to the [Server Behavior] panel. You can see that a lot of dynamic text has been added. Double-click the dynamic text (Ztre.ZYTEXT) and select the format as "Encoding—HTML Encoding" Format", as shown in Figure 4-2-6:
Figure 4-2-6 Set up dynamic text format
(4) Select the first, second, and third rows of table ztre, and define them as repeating areas. The settings are as shown in Figure 4-2-7.
Figure 4-2-7 Define the repeating area.
This completes the work of inserting the data set and data binding on the home page.
(1) Select "Home", in the [Server Behavior] panel, click the "+" button, select [Dataset Paging] → [Move to the first page], as shown in Figure 4-3-1:
Figure 4-3-1 Data set paging menu
(2) In the pop-up dialog box, select the data set as Ztre and press the "OK" key, as shown in Figure 4-3-2:
Figure 4-3-2 Move to the first page dialog box
(3) Select "Previous Page" and define it as the "Move to Previous Page" of data set paging; select "Next Page" and define it as a data set "Move to next page" for pagination; Select "Last" to define "Move to last page" for data set pagination.
(4) Change "Page Number" to "Current Page Number:" In the [Server Behavior] panel, click the "+" button and select [Show Record Count] → [Show Current Page Number].
(5) Save index.aspx, thus completing the design of the homepage. Enter a few records into the corresponding ZT table and YH table in Access, and browse them in the IE browser (if there are no special instructions in the following chapters, The notes all belong to the "Network Programming" column), as shown in Figure 4-3-3:
Figure 4-3-3 Home page browsing image