How to improve the speed of page display in Dreamweaver

One of the most common ways to arrange the layout of a Web page is to define the structure of the page with an HTML table. For example, suppose a Web page consists of a top navigation bar and two columns (columns) below it-the column on the left is a navigation bar, and the right column is the area where the content is actually placed. For such a page, we can use a two-line, two-column large table layout: In the first row, merge two columns and then place the top navigation table; In the second row, the left column has a table showing the navigation buttons, and the right column displays the actual contents of the page in a table. This form of nested table layout can be a very good effect.

To create such a page, we can use the following HTML code:

< TABLE border= "0" >

< TR >

< TD colspan= "2" ><!--the contents of the top navigation bar--></td >

</tr >

< TR >

< TD align= "left" valign= "top" ><!--the contents of the left-hand navigation bar--></td >

< TD align= "left" valign= "top" ><!--page Content area--></td >

</tr >

</table >

If the browser finds a table tag in the page, it does not display the table until the corresponding closing tag </table > is received. Therefore, if the entire page is placed in a large table, the entire page will not be displayed until the browser downloads the </table > tag of the large table. When a page with a lot of content is displayed (for example, search results or a product catalog on an E-commerce site), the delay display of the table results in a pause in the entire page display.

To avoid this, we should divide the page into smaller and separate table regions. In this way, the HTML code for each table is downloaded and the browser can immediately display it. For the viewer, the page will gradually show up in part and part of the screen. And more importantly, the page will begin to display more quickly on the screen than before waiting for the entire page to be downloaded.

For the example shown earlier, instead of using a single large table for the page layout, we use three separate tables: the first table displays the navigation bar at the top of the page so that it has enough width to display the page content and gives its < TABLE ></table > tag pair completely; Arrange the second table in the lower-left position of the first table to align the table to the left, and the last table to the right of the second table to place the page content. Since each part is now a separate table, the browser will display it as soon as it downloads any part of the code. As a result, the navigation bar at the top and left of the page will show up faster than the rest of the page. This avoids allowing the viewer to wait for a long time in front of a blank page, but gives him the impression that the page has already been downloaded and the entire page will immediately appear on the screen.

The modified layout code looks like this:

< TABLE border= "0" width= "100%" >

< TR >

< TD align= "CENTER" valign= "top" ><!--content of navigation bar-></td >

</tr >

</table >

< TABLE border= "0" align= "left" >

< TR >

< TD align= "left" valign= "top" ><!--the contents of the left-hand navigation bar--></td >

</tr >

</table >

< TABLE border= "0" >

< TR >

< TD align= "left" valign= "top" ><!--page Content area--></td >

</tr >

</table >

Just as closing the table tag as early as possible allows the browser to quickly display the data in the table, there are two other tags that can also increase the display speed in this way, which is the < OPTION > tag used to make the list box and the < LI for making unordered lists. > tags.

ASP programmers often want to access the database to get the data and then construct the list box with < OPTION > tag. Simply changing the code close < OPTION > tag allows the browser to display the page faster.

For example, the following code was originally used:

Do as Not objrs.eof

Stroptionlist = stroptionlist & "< OPTION value=" "& objRS (" ID ") & _

"" ">" & objRS ("ProductName")

Objrs.movenext

Loop

Response.Write "< SELECT size=" "1" ">" & stroptionlist & "</select >"

Now you just need to change one line of code:

Do as Not objrs.eof

Stroptionlist = stroptionlist & "< OPTION value=" "& objRS (" ID ") & _

"" ">" & objRS ("ProductName") & "</option >"

Objrs.movenext

Loop

Response.Write "< SELECT size=" "1" ">" & stroptionlist & ""

If you used the following code:

< UL >

< LI > Apple

< LI > Oranges

< LI > Banana

</ul >

So now instead:

< UL >

< LI > Apple </li >

< LI > Orange </li >

< LI > Banana </li >

</ul >

After these changes, the browser will display the page faster.