《商務(wù)網(wǎng)站設(shè)計與制作》課件-4.2 使用表格布局配置網(wǎng)頁

第四章靜態(tài)頁面制作學(xué)習目標

熟悉Dreamweaver站點的設(shè)置方法掌握Dreamweaver的使用掌握使用表格工具布局網(wǎng)頁的方法掌握常見網(wǎng)頁元素中基本樣式的設(shè)定掌握子頁面鏈接的創(chuàng)建掌握常見的HTML標記語言的使用項目概述

小張所在的網(wǎng)絡(luò)公司承接長沙市碧雅園花卉苗木基地網(wǎng)站建設(shè)項目后，通過前期需求分析，網(wǎng)頁美工小王已經(jīng)繪制出網(wǎng)站首頁效果圖。經(jīng)理要求網(wǎng)頁設(shè)計師小張依據(jù)效果圖，為該苗木基地制作網(wǎng)站靜態(tài)首頁，以便于網(wǎng)站代碼編寫人員編寫腳本代碼，從而制作出一個完整的動態(tài)網(wǎng)站。最終網(wǎng)站首頁效果圖將本項目的實施分解為以下幾個子任務(wù)：任務(wù)1：本地站點配置任務(wù)2：使用表格布局制作網(wǎng)頁任務(wù)2：使用表格布局配置網(wǎng)頁

1、網(wǎng)頁表格的規(guī)劃通過分析，網(wǎng)頁可以分成幾個大的區(qū)域，如下圖所示：整個網(wǎng)頁分成五個大表格

任務(wù)2：使用表格布局配置網(wǎng)頁

絕大部分標記都有開始標記和結(jié)束標記；左、右尖括號為標記之間的分界符；屬性值放置在始標記中，如<標記名屬性=“屬性值”>，結(jié)束標記為“</標記名>”，有些結(jié)束標記可以省略。標記不區(qū)分大小寫。html標記具有以下特點：任務(wù)2：使用表格布局配置網(wǎng)頁

有些網(wǎng)頁設(shè)計人員習慣將整個頁面作為一個大表格，這種做法將影響網(wǎng)頁的瀏覽速度。當瀏覽器發(fā)現(xiàn)頁面中有一個TABLE標記，在接收到對應(yīng)的結(jié)束標記</TABLE>之前，它不會顯示這個表格。因此，如果整個頁面都放入到一個大表格中，在瀏覽器下載這個大表格的</TABLE>標記之前，整個頁面都不會顯示。當顯示內(nèi)容龐大的頁面時（例如，搜索結(jié)果或者電子商務(wù)網(wǎng)站上的產(chǎn)品目錄），表格的延遲顯示，會導(dǎo)致整個頁面顯示的停頓。為了避免出現(xiàn)這種情況，應(yīng)該把頁面劃分成多個較小且獨立的表格區(qū)域。這樣，每個表格的HTML代碼下載之后瀏覽器就可以立即顯示它。對于瀏覽者來說，頁面在屏幕上一部分、一部分地逐漸顯示出來。更為重要的是，這種頁面在屏幕上開始顯示的速度，要比之前等待整個頁面下載完才顯示的方式要快得多。任務(wù)2：使用表格布局配置網(wǎng)頁

2、網(wǎng)頁元素的填充任務(wù)2：使用表格布局配置網(wǎng)頁

何為CSS（CascadingStyleSheet）？

CSS中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許將樣