How to design the home page in Dreamweaver

First, the website design idea

Before each page starts, generally must in Firworks or in Photoshop and so on image design software Design good basic page design, the figure 4-1-1 is the basic page design diagram which the Photoshop design is good.

Figure 4-1-1 doking ' s blog Basic Page design chart

In Figure 4-1-1 ordinal ① The Red Square part of the page is the left column, at present, it is blank, its columns will be added in the later chapters, serial number ② painted Red Square part of the site is the navigation bar, it is established by the third chapter of the Dkblog.mdb database in the LM table dynamic generated. After the basic idea is clear, begin to construct the template of the website.

Second, the construction site template

Design idea: Build website template, unify website homepage design. The content of the website's column menu is also convenient to modify the content of the site's menu because of the dynamic LM generation of the data table.

(1) Open "file" → "new", open the "New Document" dialog box, select "Category:" for "Template page", select "Template page:" For "asp.net VB template", the result is shown in Figure 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", set "left (L)" and "Top (T)" to 0px, set "width (W)" to 100%, and align the alignment to the center. This is to center the page.

(3) Insert a table, set the ID to "Bodyt", set to 780 pixels (this is based on the width of your basic page design), the margin and spacing of the unit is set to 0, the border thickness is set to 0.

(4) The vertical alignment of the second row of the "Bodyt" table is set to the top, split into 2 columns, the width of the 1th column is set to 220px, the 1th column is set to 560px (the width of the assigned column is also assigned according to your basic page design), and the background color of column 1th is set to RGB ( 236,236,236).

(5) to the "Bodyt" table on line first to third insert the corresponding background map, the first row of the vertical alignment to the bottom, horizontal alignment to the right.

(6) can also be designed according to the needs of the title, font size, connection font color or color scheme.

(7) Establish the navigation bar of the website.

① starts Access2003, opens the Dkblog.mdb database, and sequentially enters 4 records in the LM field of the LM table, such as graphic design, 3D design, web design, network programming, and so on, as shown in Figure 4-1-3.

Figure 4-1-3 LM table data entry

② returns Dreamweaver, switches to the server behaviors panel, clicks the + button, and selects DataSet in the Drop-down menu, as shown in Figure 4-1-4.

Figure 4-1-4 Adding data sets

③ in the Data Set dialog box that pops up, enter the dataset name "Menuda", select "Dkconn" in the Connection Drop-down menu, select the LM table in the Drop-down menu of the table, select the column "All" option, select the field "Lmid" in the Sort Drop-down menu, and set the order to ascending. The result is as shown in Figure 4-1-5:

Figure 4-1-5 DataSet dialog box

④ Click the Test button and the dialog shown in Figure 4-1-6 shows that the dataset was created successfully and click OK to complete it.

Figure 4-1-6 DataSet Test dialog box

⑤ switch to the Bindings tab, expand the fields of the dataset (Menuda), as shown in Figure 4-1-7:

Figure 4-1-7 Binding tab

⑥ Drag the LM field to the first row of the table Bodyt, as shown in Figure 4-1-8:

Figure 4-1-8 Drag lm field

⑦ release the mouse, when the first line adds a shaded character: {Menuda. LM}, enter before it "home | ", then enter the symbol" | Contact Us ", the results are as shown in Figure 4-1-9:

Figure 4-1-9 Binding data to Bodyt table

⑧ Select with shadowed characters {Menuda. LM} and the following characters "| , select Insert menu → Application object → repeat region, select the dataset as "Menuda" in the dialog box that pops up "repeat region", and the display record as "all Records", as shown in Figure 4-1-10, and click OK to complete the site navigation menu.

Figure 4-1-10 Repeat Region dialog box

(7) Move the mouse to the second row of table Bodyt, select Insert menu → template object → editable region, in the New Editable Region dialog box, enter the name "Mainbody" and press the "OK" key, as shown in Figure 4-1-11:

Figure 4-1-11 New Editable region

This completes the initial work of the site template and saves the template as bkblog.dwt.aspx.

Third, page design of the homepage

Design idea: After completing the website template construction work, can it to build the website and the renewal website.

(1) 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", click the "Select" button, as shown in Figure 4-1-12:

Figure 4-1-12 Select template

(2) Move the mouse to the "mainbody" editable region, insert the table, set its ID as "ztre", in fact it is designed as shown in Figure 4-1-13, which is what each learning Note will display.

Figure 4-1-13 What each learning Note will show

Iv. inserting datasets

The insert dataset that is explained in this section is not as simple as the previous section explains. First look at Figure 4-1-13, each study note will display the theme, publication time, note classification (that is, the column), the author (name), reply (number), and then look at the ZT table its design (3.2 section of the figure 3-2-2), only LMID (category column ID), no column name, This is to be connected to the LM table, only Yhid (the publisher's ID), without the author's name, is connected to the YH table to obtain, and others can get the data from the ZT table. "So complicated!" Don't worry, you can solve all the difficulties in access.

V. Establish a data table connection query

(1) Start Access2003, select "Query" → double click "Create Query in Design view", in the pop-up "Show table" window, as shown in Figure 4-2-1:

Figure 4-2-1 Add query join table

(2) In order Add LM table, ZT table, YH table, the results are as 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, complete the data table connection query in Access.

Vi. inserting datasets

(1) Go back to Dreamweaver, switch to the Server Behaviors Panel, click the + button, add the DataSet Ztre, select the table for the query you just created in Access Ztre, and other settings, as shown in Figure 4-2-4:

Figure 4-2-4 Setting of Ztre DataSet

(2) switch to the Bindings tab, expand the DataSet (Ztre), drag the field Ztname replace the "learn notes theme" in table Ztre, drag the field Zttime replace "Publish Time", drag the field LM to replace the "category", Drag the field Zytext to the second line in the table Ztre, and other designs are shown in Figure 4-2-5:

Figure 4-2-5 Binding data to Ztre table

(3) switch to the server behavior panel to see that you have added a lot of dynamic text, double-click Dynamic text (Ztre.zytext), and choose the format "encoded-html encoded format", as shown in Figure 4-2-6:

Figure 4-2-6 Set Dynamic text format

(4) Select the Tertiary rows of the table Ztre, and define the repeating region as shown in Figure 4-2-7.

Figure 4-2-7 defines a repeating region

This completes the home page insert dataset and data binding work.

Seven, pagination display

(1) Select "Home", in the server Behavior panel, click the + button, select "Data set paging" → "Move to 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 DataSet as Ztre, press "OK" key, as shown in Figure 4-3-2:

Figure 4-3-2 Move to the first Page dialog box

(3) Select "Previous Page", define "move to previous" for dataset paging; Select Next, defined as "move to Next page" for dataset paging, and select "Last", defined as "move to last Page" for dataset pagination.

(4) Change "page number" to "current page number:" In the server Behaviors panel, click the + button, select "Show Record Count" → "Show Current page number".

(5) Preservation of the index.aspx, this completes the homepage design work, in Access to the corresponding ZT table, YH table casually input a few records, in IE browser browsing (in the following sections, if no special instructions, notes are all "network Programming" column), probably as shown in Figure 4-3-3:

Figure 4-3-3 first page browse map