表格和框架的使用和網(wǎng)站布局

1、實驗二 表格和框架的使用和網(wǎng)站布局一、實驗目的    掌握使用DreamweaverCS3進行表格和框架的設計。掌握網(wǎng)頁布局的方法。 二、實驗要求    學生通過實驗掌握網(wǎng)頁元素（文字、圖像等）在網(wǎng)頁中的布局，要求學生掌握使用表格、布局表格及框架對網(wǎng)頁元素進行布局和安排，以合理、美觀的方式設計網(wǎng)頁。 三、實驗內(nèi)容1創(chuàng)建表格2使用布局表格設計網(wǎng)頁3框架的使用 四、實驗步驟1創(chuàng)建表格（1）用Dreamweaver CS3打開實驗素材BG文件夾中kcbhtm網(wǎng)頁文件。（2）在文檔菜單中選擇“插入”-“表格”命令，在“插入

2、表格”對話框中，設置插入一個8行7列的表格。（3）單擊“確定”按鈕，便可在文檔窗口中插入一個8行7列的表格。（4）選中表格(單擊表格邊框，可選中表格)，選擇文檔窗口中的“窗口”-“屬性”命令打開“屬性”面板。在“屬性”面板中將該表格的高設置為284像素；對齊方式設置為居中對齊。（5）設置單元格背景顏色。選中第l行單元格(按下左鍵，在第1行單元格上拖動鼠標)，打開“屬性”面板，在“背景顏色”中輸入“#999999”顏色值。（6）按照相同的方法將第1列單元格背景顏色設置為“#99CCFF”；其余單元格背景顏色設置為“#FFFFCC”。（7）合并單元格。按下Ctrl鍵，單擊第1行的第1列和第2列單元

3、格選中單元格。在文檔窗口的菜單中選擇“修改”-“表格”-“合并單元格”命令，將該單元格進行合并。（8）重復前面的操作。將第1列單元格的2、3、4、5行單元格，第1列的6、7行單元格，第8行單元格的2、3、4、5、6、7列單元格進行合并。（9）參照以下的實樣圖，在對應的單元格內(nèi)輸入文本，保存文檔。檢查結果是否與FINAL文件夾中的kcb.htm相同。2使用布局表格設計網(wǎng)頁（1）打開實驗素材BJ文件夾中的07.htm網(wǎng)頁文件。（2）選中在布局表格中所繪制的布局單元格，在“屬性”面板中將該布局單元格的寬度也設置為775像素，高度為68像素，如下圖所示。（3）將光標停留在布局單元格內(nèi)，選擇文檔窗口菜單

4、欄中的“插入”-“圖像菜單”命令，在打開的“選擇圖像源”對話框中，選擇存放在BJimges文件夾下的banerjpg圖像。（4）選擇圖像文件后，單擊“確認”按鈕，便可在布局單元格內(nèi)插入該圖像文件。（5）單擊“布局單元格”按鈕，在已經(jīng)插入圖像的布局表格下面繪制3個布局單元格，如下圖所示。（6）分別選中所繪制的布局單元格，并打開“屬性”面板，將布局單元格的寬度和高度分別設置為：(152、40)、(334、40)、(135、40)。（7）在所繪制布局單元格1和2內(nèi)分別輸入文本“生活空間”和“音樂天地”，并在布局單元格3內(nèi)插入存放在BJimages文件夾下的01gif圖像，如下圖所示。（8）在其下繪制

5、2個布局單元格，分別選中并同時打開“屬性”面板，將單元格的寬度和高度分別設置為： (148、326)、 (516、326)，如下圖所示。（9）在上圖所示布局單元格(1)中繪制4個寬度為136像素，高度為34像素的單元格(切換到標準視圖用插入表格進行操作），并在其單元格內(nèi)分別輸入文本，如下圖7-18所示。（10）參照下圖，填充布局單元格內(nèi)容。完成所對應的布局單元格文本的輸入。（11）最后將“布局視圖”轉化為“標準視圖”。在“標準視圖”中根據(jù)自己的審美觀進行調整，可為布局單元格的邊框進行修飾，完成了該頁面的制作，通過瀏覽器預覽，并與FINAL文件夾中的07.htm網(wǎng)頁文件進行對比。3框架的使用（1

6、）打開或新建一個空白的文檔，在該文檔中創(chuàng)建一個 框架頁。（2）命名框架。將左列框架命名為index框架、右列上部框架命名為top框架、右列下部框架命名為main框架。（3）保存框架。將框架頁保存為06A.htm文檔，index框架保存為06B.htm文檔,top框架保存為06Chtm文檔，main框架保存為06D.htm，文檔均保存在KJ文件夾下。（4）設置框架的行或列。將index框架的列設置為150像素，top框架的行高設置為90像素。（5）設置頁面的配色方案。在index框架的06B.htm文檔中運用背景為#FFCC99、文本和鏈接為“#669966，#009900”的配色方案。（6）填

7、充頁面。在index框架06B.htm文檔中輸入如下圖所示的文本并插入一個9行l(wèi)列的表格。其中“休閑娛樂”文本為隸書5號字體，顏色為#66CC00；表格邊框的顏色為#009900；單元格的背景顏色為#CCFFFF，單元格的高度為30像素，單元格的對齊方式為水平居中、垂直中間（7）將top框架的標題設置為“標題欄”，在“屬性”面板中將所有邊界設置為O。（8）將光標停留在top框架中，輸入文本并插入images文件夾下的圖像，其中文本字體大小為7，顏色為#66CC00，如下圖所示。（9）完成index和top框架的填充和設置后的結果如下圖所示。（10）設置鏈接。選中左邊框架(index)中目錄下的“考試作弊”文本，在“屬性”面板中的“鏈接”框中設置與之對應的笑話內(nèi)容(WJwj6-1.htm)的鏈接。這時“目標”框變?yōu)榧せ顮顟B(tài)，從“目標”下拉列表框中選擇鏈接的目標為main。用戶如果在瀏覽器中瀏覽這個頁面的時候，單擊“考試作弊”文本，則被鏈接的文件將在main框架中打開。（11）使用相同的方法設置其他“笑話”目錄所鏈接的內(nèi)容和鏈接目標，其他的鏈接目標均為mian框架。笑話目錄各項和WJ文件夾中wj6-1.htmwj6-8.htm是一一對應的關系。（12）指定框架源文件。選中main框架，在“屬性”面板中的“源文件”文本框中設置框架的源文件。單擊旁邊的文件夾，選擇WJ文件夾中