網(wǎng)頁(yè)布局(模塊六)課件

1、 模塊六 網(wǎng)頁(yè)布局 主講老師：*Dreamweaver CS3網(wǎng)頁(yè)制作任務(wù)實(shí)訓(xùn)教程學(xué)習(xí)目標(biāo)u掌握表格、布局表格和布局單元格的創(chuàng)建與編輯方法u掌握CSS、AP Div以及CSS+Div的使用與設(shè)置操作u熟悉并掌握框架集以及框架的創(chuàng)建和編輯操作u熟悉模板的創(chuàng)建、編輯以及更新等操作任務(wù)一 使用表格布局“產(chǎn)品展示”頁(yè)面u任務(wù)目標(biāo)在“product.html”網(wǎng)頁(yè)中利用表格、布局表格和布局單元格等工具制作出產(chǎn)品展示的頁(yè)面效果，完成后的最終效果如圖所示。制作的“產(chǎn)品展示”網(wǎng)頁(yè)效果任務(wù)一 使用表格布局“產(chǎn)品展示”頁(yè)面u操作思路（1）在提供的“product.html”網(wǎng)頁(yè)中繪制與設(shè)置布局表格和布局單元格。（

2、2）通過(guò)創(chuàng)建與編輯表格制作“產(chǎn)品分類”欄目。（3）通過(guò)創(chuàng)建、編輯與排序表格制作“熱門產(chǎn)品”欄目。（4）通過(guò)創(chuàng)建與編輯嵌套表格制作“產(chǎn)品展示”欄目。制作“產(chǎn)品展示”網(wǎng)頁(yè)的操作思路操作一 繪制布局表格和布局單元格（1）打開(kāi)光盤中提供的“product.html”網(wǎng)頁(yè)素材，單擊插入欄中的“布局”選項(xiàng)卡，如圖所示。（2）選擇【查看】【表格模式】【布局模式】菜單命令，或按“Alt+F6”鍵切換到布局視圖模式，如圖所示。 切換選項(xiàng)卡切換視圖模式操作一 繪制布局表格和布局單元格（3）此時(shí)“布局”選項(xiàng)卡中的“布局表格”按鈕 和“布局單元格”按鈕 將被激活，單擊“布局表格”按鈕 ，如圖所示。（4）將鼠標(biāo)指針移至

3、工作區(qū)，按住鼠標(biāo)左鍵不放并拖動(dòng)鼠標(biāo)繪制布局表格，如圖所示。 單擊按鈕繪制布局表格操作一 繪制布局表格和布局單元格（5）釋放鼠標(biāo)完成布局表格的繪制，如圖所示。（6）保持布局表格的選中狀態(tài)，在屬性檢查器中將其寬度和高度分別設(shè)置為“800”和“709”，如圖所示。 繪制的布局表格精確調(diào)整布局表格尺寸操作一 繪制布局表格和布局單元格（7）單擊“布局”選項(xiàng)卡中的“布局單元格”按鈕 ，如圖所示。（8）拖動(dòng)鼠標(biāo)繪制寬為“800”、高為“50”的布局單元格，如圖所示。 單擊按鈕繪制布局單元格操作一 繪制布局表格和布局單元格（9）釋放鼠標(biāo)完成布局單元格的繪制，如圖所示。（10）用相同方法在已繪制的布局單元格下方

4、再繪制一個(gè)寬為“800”、高為“30”的布局單元格，然后將鼠標(biāo)指針移至繪制的布局單元格邊框上，當(dāng)邊框變?yōu)榧t色時(shí)拖動(dòng)鼠標(biāo)調(diào)整單元格位置，如圖所示。 繪制的布局單元格移動(dòng)布局單元格位置操作一 繪制布局表格和布局單元格（11）繼續(xù)利用“布局單元格”按鈕 在布局表格中繪制其他布局單元格，并調(diào)整各單元格的大小，具體可參見(jiàn)光盤提供的效果文件“product.html”，然后單擊工作區(qū)上方的“退出”超級(jí)鏈接退出布局模式，如圖所示。繪制布局單元格操作一 繪制布局表格和布局單元格（12）將鼠標(biāo)指針移至表格邊框上，當(dāng)邊框顏色變?yōu)榧t色時(shí)單擊鼠標(biāo)選中整個(gè)表格，如圖所示。（13）在屬性檢查器中將對(duì)齊方式設(shè)置為“居中對(duì)齊

5、”，如圖所示。 選中表格 設(shè)置表格對(duì)齊方式操作一 繪制布局表格和布局單元格（14）在表格最上方的單元格中輸入“產(chǎn)品展示”文本，并在屬性檢查器中將文本格式設(shè)置為“字體-黑體、大小-30、加粗”，水平和垂直方向的對(duì)齊方式均為“居中對(duì)齊”，如圖所示。（15）在下一行單元格中輸入導(dǎo)航文本，并按照本書前面介紹的創(chuàng)建超級(jí)鏈接方法為各文本創(chuàng)建超級(jí)鏈接和電子郵件超級(jí)鏈接（具體的鏈接對(duì)象可參考效果文件），如圖所示。 輸入并設(shè)置標(biāo)題 輸入并鏈接導(dǎo)航文本操作一 繪制布局表格和布局單元格（16）在最后一行單元格中輸入版權(quán)信息，并將文本大小設(shè)置為“14”，水平和垂直方向的對(duì)齊方式為“居中對(duì)齊”，如圖所示。輸入并設(shè)置版權(quán)

6、信息操作二 制作“產(chǎn)品分類”欄目（1）將文本插入點(diǎn)定位到導(dǎo)航文本下方左側(cè)的單元格中，單擊“布局”選項(xiàng)卡中的“表格”按鈕 ，打開(kāi)“表格”對(duì)話框，設(shè)置行數(shù)為“12”、列數(shù)為“1”、表格寬度為“158”、并選擇“頁(yè)眉”欄中的“頂部”選項(xiàng)，然后單擊“確定”按鈕，如圖所示。（2）利用鍵盤上的方向鍵或單擊鼠標(biāo)控制文本插入點(diǎn)，在創(chuàng)建的表格中依次輸入如圖所示的文本。 創(chuàng)建表格輸入表格內(nèi)容操作二 制作“產(chǎn)品分類”欄目（3）在“辦公桌”文本左側(cè)按住鼠標(biāo)左鍵不放并向下拖動(dòng)鼠標(biāo)，選中鼠標(biāo)經(jīng)過(guò)的所有單元格，如圖所示。（4）利用屬性檢查器將所選單元格的文本大小設(shè)置為“14”，單元格高度設(shè)置為“20”，如圖所示。 選擇單元

7、格 設(shè)置單元格格式操作二 制作“產(chǎn)品分類”欄目（5）選擇“產(chǎn)品分類”文本，將其大小設(shè)置為“14”，并將單元格高度設(shè)置為“25”，如圖所示。（6）單擊所選表格上方的下拉按鈕，在彈出的菜單中選擇“選擇表格”命令，如圖所示。 設(shè)置單元格格式選擇表格操作二 制作“產(chǎn)品分類”欄目（7）在屬性檢查器的“邊框”文本框中輸入“1”，并將邊框顏色設(shè)置為“#0099FF”，如圖所示。設(shè)置表格邊框粗細(xì)和顏色操作三 制作“熱門產(chǎn)品”欄目（1）按照相同的方法在“產(chǎn)品分類”欄目下方的單元格中插入“14行2列”的表格，然后輸入具體的文本內(nèi)容，并調(diào)整文本大小和單元格高度，如圖所示。創(chuàng)建表格并輸入內(nèi)容操作三 制作“熱門產(chǎn)品”欄

8、目（2）將鼠標(biāo)指針移至表格邊框上，當(dāng)邊框顏色變?yōu)榧t色時(shí)單擊鼠標(biāo)選中整個(gè)表格，如圖所示。（3）利用屬性檢查器將表格邊框的粗細(xì)設(shè)置為“1”，顏色設(shè)置為“#0099FF”，如圖所示。 選擇表格設(shè)置表格邊框操作三 制作“熱門產(chǎn)品”欄目（4）選擇【命令】【排序表格】菜單命令，如圖所示。（5）打開(kāi)“排序表格”對(duì)話框，在“排序按”下拉列表框中選擇“列2”選項(xiàng)，在“順序”下拉列表框中選擇“按數(shù)字順序”選項(xiàng)，在右側(cè)的下拉列表框中選擇“降序”選項(xiàng)，然后單擊“確定”按鈕，如圖所示。 選擇命令設(shè)置排序方式操作三 制作“熱門產(chǎn)品”欄目（6）此時(shí)所選表格中的數(shù)據(jù)將按照設(shè)置進(jìn)行排序，如圖所示。表格排序的效果操作四 制作“產(chǎn)

9、品展示”欄目（1）按“Alt+F6”鍵重新進(jìn)入布局模式，單擊“布局表格”按鈕 ，在“產(chǎn)品分類”欄目右側(cè)的布局單元格中重新繪制相同大小的布局嵌套表格，如圖所示。（2）退出布局模式，在嵌套的布局表格中創(chuàng)建3行3列的表格，并通過(guò)拖動(dòng)表格下方和右側(cè)的控制點(diǎn)適當(dāng)調(diào)整表格大小，如圖所示。 繪制嵌套的布局表格創(chuàng)建并調(diào)整表格大小操作四 制作“產(chǎn)品展示”欄目（3）在新創(chuàng)建表格的第1個(gè)單元格中單擊鼠標(biāo)定位文本插入點(diǎn)，單擊“布局”選項(xiàng)卡中的“表格”按鈕 ，打開(kāi)“表格”對(duì)話框，設(shè)置行數(shù)為“2”、列數(shù)為“1”、表格寬度為“190”、并選擇“頁(yè)眉”欄中的“頂部”選項(xiàng)，然后單擊“確定”按鈕，如圖所示。（4）在所選單元格中插

10、入2行1列的嵌套表格，接著在嵌套表格的第1個(gè)單元格中插入光盤提供的“001.jpg”圖像，然后適當(dāng)調(diào)整圖像大小，如圖所示。 創(chuàng)建嵌套表格在嵌套表格的單元格中插入圖像操作四 制作“產(chǎn)品展示”欄目（5）確認(rèn)圖像大小后，拖動(dòng)父級(jí)單元格邊框重新調(diào)整嵌套表格所在的單元格大小，如圖所示。（6）在嵌套表格的第2個(gè)單元格中輸入產(chǎn)品名稱文本，并將其大小設(shè)置為“14”，如圖所示。 調(diào)整父級(jí)單元格大小輸入并設(shè)置文本操作四 制作“產(chǎn)品展示”欄目（7）按照相同方法在其他單元格中嵌套表格并插入或輸入相應(yīng)的圖像和文本，如圖所示。（8）保存制作的網(wǎng)頁(yè)后，按“F12”鍵預(yù)覽效果，如圖所示。 創(chuàng)建其他嵌套表格 預(yù)覽效果學(xué)習(xí)與探究

11、利用表格布局時(shí)常常用到的操作方法:選擇行：將鼠標(biāo)指針移至表格中目標(biāo)行的行首，當(dāng)其變?yōu)?形狀時(shí)，單擊鼠標(biāo)可選擇該行。選擇列：將鼠標(biāo)指針移至表格中目標(biāo)列的頂部，當(dāng)其變?yōu)?形狀時(shí)，單擊鼠標(biāo)可選擇該列。插入行或列：在需要插入行或列的單元格中定位文本插入點(diǎn)，選擇【修改】【表格】菜單命令，在彈出的子菜單中選擇相應(yīng)的命令即可實(shí)現(xiàn)插入行或列的操作。另外，按“Ctrl+M”鍵可插入行；按“Ctrl+Shift+A”鍵可插入列。刪除行或列：選擇需要?jiǎng)h除的行或列，直接按“Delete”鍵。另外，按“Ctrl+Shift+M”鍵可刪除行，按“Ctrl+Shift+-”鍵可刪除列。合并單元格：選擇需合并的單元格后，選擇

12、【修改】【表格】【合并單元格】菜單命令。另外也可通過(guò)按“Ctrl+Alt+M”鍵快速合并單元格。拆分單元格：選擇需拆分的單元格后，選擇【修改】【表格】【拆分單元格】菜單命令。另外也可通過(guò)按“Ctrl+Alt+S”鍵快速合并單元格。任務(wù)二任務(wù)二 用用CSS+Div布局布局“鮮花之旅鮮花之旅”網(wǎng)頁(yè)網(wǎng)頁(yè)u任務(wù)目標(biāo)在“index.html”網(wǎng)頁(yè)中利用AP Div、CSS以及CSS+Div等網(wǎng)頁(yè)布局工具制作如圖所示的“鮮花之旅”網(wǎng)頁(yè)?！磅r花之旅”網(wǎng)頁(yè)的最終效任務(wù)二任務(wù)二 用用CSS+Div布局布局“鮮花之旅鮮花之旅”網(wǎng)頁(yè)網(wǎng)頁(yè)u操作思路（1）在提供的“index.html”網(wǎng)頁(yè)中繪制多個(gè)AP Div進(jìn)行網(wǎng)

13、頁(yè)布局，并適當(dāng)調(diào)整AP Div的大小與位置。（2）創(chuàng)建CSS外部樣式表并設(shè)置樣式表中的各種樣式屬性。（3）創(chuàng)建CSS+Div標(biāo)簽并設(shè)置樣式，然后通過(guò)對(duì)已有的CSS+Div標(biāo)簽進(jìn)行復(fù)制和修改等操作制作其他CSS+Div標(biāo)簽。制作“鮮花之旅”網(wǎng)頁(yè)的操作思路操作一操作一 利用利用AP Div布局網(wǎng)頁(yè)布局網(wǎng)頁(yè)（1）打開(kāi)光盤提供的“index.html”網(wǎng)頁(yè)素材，在插入欄的“布局”選項(xiàng)卡中單擊“AP Div”按鈕 ，如圖所示。（2）拖動(dòng)鼠標(biāo)繪制適當(dāng)大小的AP Div標(biāo)簽，如圖所示。 單擊按鈕繪制AP Div標(biāo)簽操作一操作一 利用利用AP Div布局網(wǎng)頁(yè)布局網(wǎng)頁(yè)（3）將鼠標(biāo)指針移至AP Div邊框上，單擊

14、鼠標(biāo)選擇該對(duì)象，如圖所示。（4）在屬性檢查器中將所選對(duì)象的寬度設(shè)置為“600px”，高度設(shè)置為“160px”，如圖所示。 選擇對(duì)象精確調(diào)整對(duì)象大小操作一操作一 利用利用AP Div布局網(wǎng)頁(yè)布局網(wǎng)頁(yè)（5）用相同方法再繪制1個(gè)寬度為“600px”，高度為“85px”的AP Div標(biāo)簽，并放置在前面繪制的AP Div下方，如圖所示。（6）接著再繪制3個(gè)寬度為“160px”，高度為“70px”的AP Div標(biāo)簽，并按如圖所示的位置排列。 繪制AP Div標(biāo)簽繪制AP Div標(biāo)簽操作一操作一 利用利用AP Div布局網(wǎng)頁(yè)布局網(wǎng)頁(yè)（7）在最上面的AP Div標(biāo)簽中單擊鼠標(biāo)定位文本插入點(diǎn)，單擊插入欄的“常用

15、”選項(xiàng)卡中的“圖像”按鈕，如圖所示。（8）打開(kāi)“選擇圖像源文件”對(duì)話框，在其中選擇光盤提供的“pic”圖像文件，單擊“確定”按鈕，如圖所示。 定位插入點(diǎn)選擇圖像操作一操作一 利用利用AP Div布局網(wǎng)頁(yè)布局網(wǎng)頁(yè)（9）在打開(kāi)的對(duì)話框中直接單擊“確定”按鈕，如圖所示。（10）此時(shí)將在文本插入點(diǎn)所在的AP Div標(biāo)簽中插入所選圖像文件，如圖所示。 設(shè)置圖像輔助信息插入的圖像操作二 創(chuàng)建CSS樣式表（1）將文本插入點(diǎn)定位到第2個(gè)AP Div標(biāo)簽中，然后在其中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【CSS樣式】【新建】菜單命令，如圖所示。（2）打開(kāi)“新建CSS規(guī)則”對(duì)話框，在“選擇器類型”欄中選中“高級(jí)”

16、單選項(xiàng)。在“定義在”欄中選中“（新建樣式表文件）”單選項(xiàng)，單擊“確定”按鈕，如圖所示。 新建CSS樣式 設(shè)置定義方式操作二 創(chuàng)建CSS樣式表（3）打開(kāi)“保存樣式表文件為”對(duì)話框，在其中設(shè)置新建的CSS樣式表文件的保存路徑和名稱，完成后單擊“保存”按鈕，如圖所示。保存CSS樣式表文件操作二 創(chuàng)建CSS樣式表（4）打開(kāi)定義CSS規(guī)則的對(duì)話框，在左側(cè)的“分類”列表框中選擇“類型”選項(xiàng)，在右側(cè)設(shè)置字體為“方正卡通簡(jiǎn)體”、大小為“24像素”、粗細(xì)為“粗體”、顏色為“#FFFFFF”，如圖所示。（5）在“分類”列表框中選擇“區(qū)塊”選項(xiàng)，在右側(cè)設(shè)置文字縮進(jìn)為“50像素”，如圖所示。 設(shè)置CSS類型設(shè)置CSS

17、區(qū)塊操作二 創(chuàng)建CSS樣式表（6）在“分類”列表框中選擇“方框”選項(xiàng)，在右側(cè)設(shè)置所有填充為“10像素”，單擊“確定”按鈕，如圖所示。（7）此時(shí)在第2個(gè)AP Div標(biāo)簽中輸入文本后，文本將自動(dòng)應(yīng)用新建的CSS中定義的各種樣式，如圖所示。輸入完成后選擇文本“開(kāi)始鮮花之旅”。 設(shè)置CSS方框輸入并選擇文本操作二 創(chuàng)建CSS樣式表（8）在屬性檢查器的“鏈接”文本框中輸入“#”，為所選文本創(chuàng)建空鏈接，如圖所示。創(chuàng)建空鏈接操作二 創(chuàng)建CSS樣式表（9）按“Ctrl+J”鍵打開(kāi)“頁(yè)面屬性”對(duì)話框，選擇“分類”列表框中的“鏈接”選項(xiàng)，在右側(cè)設(shè)置鏈接顏色為“#996699”，單擊“確定”按鈕，如圖所示。（10）

18、此時(shí)創(chuàng)建的文本超級(jí)鏈接格式將發(fā)生相應(yīng)變化，如圖所示。 設(shè)置鏈接顏色應(yīng)用設(shè)置操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（1）將文本插入點(diǎn)定位在第3行左側(cè)的AP Div標(biāo)簽中，單擊插入欄的“布局”選項(xiàng)卡中的“Div”按鈕 ，如圖所示。（2）打開(kāi)“插入Div標(biāo)簽”對(duì)話框，在“ID”下拉列表框中輸入“l(fā)eft”，單擊“新建CSS樣式”按鈕，如圖所示。 單擊按鈕設(shè)置Div標(biāo)簽名稱操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（3）打開(kāi)“新建CSS規(guī)則”對(duì)話框，在“定義在”欄中選中“僅對(duì)該文檔”單選項(xiàng)，單擊“確定”按鈕，如圖所示。設(shè)置定義規(guī)則操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（4）在打開(kāi)對(duì)話框的

19、左側(cè)的“分類”列表框中選擇“類型”選項(xiàng)，在右側(cè)設(shè)置字體為“方正卡通簡(jiǎn)體”、大小為“45像素”、粗細(xì)為“特粗”、顏色為“#FFCC00”，如圖所示。（5）在“分類”列表框中選擇“區(qū)塊”選項(xiàng)，在右側(cè)設(shè)置字母間距為“5像素”，垂直對(duì)齊方式為“中線對(duì)齊”，文本對(duì)齊方式為“居中”，如圖所示。 設(shè)置CSS類型 設(shè)置CSS區(qū)塊操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（6）在“分類”列表框中選擇“邊框”選項(xiàng)，在右側(cè)設(shè)置所有樣式為“槽狀”，所有顏色為“#FFCC00”，單擊“確定”按鈕，如圖所示。（7）返回“插入Div標(biāo)簽”對(duì)話框，單擊“確定”按鈕，如圖所示。 設(shè)置CSS邊框 確認(rèn)插入操作三操作三 創(chuàng)建創(chuàng)建

20、CSS+Div標(biāo)簽標(biāo)簽（8）此時(shí)文本插入點(diǎn)所在的AP Div中將出現(xiàn)如圖所示的帶有設(shè)置格式的文本。插入的Div標(biāo)簽操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（9）輸入文本“鮮花”，完成第1個(gè)CSS+Div標(biāo)簽的創(chuàng)建和設(shè)置，如圖所示。（10）將文本插入點(diǎn)定位到第3行中間的AP Div標(biāo)簽中，在Dreamweaver窗口右側(cè)的“CSS樣式”面板中找到“#left”選項(xiàng)（若沒(méi)有則按“Shift+F11”鍵打開(kāi)），在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“復(fù)制”命令，如圖所示。 插入的CSS+Div標(biāo)簽復(fù)制CSS+Div標(biāo)簽操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（11）打開(kāi)“復(fù)制CSS規(guī)則”

21、對(duì)話框，在“選擇器”下拉列表框中將名稱更改為“#mid”，單擊“確定”按鈕，如圖所示。（12）在“CSS樣式”面板中找到復(fù)制的“#mid”選項(xiàng)，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯”命令，如圖所示。 修改CSS選擇器名稱編輯CSS規(guī)則操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（13）打開(kāi)定義CSS規(guī)則的對(duì)話框，在左側(cè)的“分類”列表框中選擇“類型”選項(xiàng)，在右側(cè)將顏色修改為“#0066CC”，如圖所示。修改文本顏色規(guī)則操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（14）在“分類”列表框中選擇“邊框”選項(xiàng)，在右側(cè)將所有顏色修改為“#0066CC”，單擊“確定”按鈕，如圖所示。（15）將

22、文本插入點(diǎn)定位在AP Div標(biāo)簽中，單擊“布局”選項(xiàng)卡中的“Div”按鈕 ，打開(kāi)“插入Div標(biāo)簽”對(duì)話框，在“ID”下拉列表框中選擇“mid”選項(xiàng)，單擊“確定”按鈕，如圖所示。 修改邊框顏色規(guī)則選擇CSS樣式操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（16）此時(shí)在文本插入點(diǎn)所在的AP Div標(biāo)簽中將出現(xiàn)如圖所示的文本。（17）直接輸入“花籃”，完成第2個(gè)CSS+Div標(biāo)簽的創(chuàng)建，如圖所示。 創(chuàng)建的CSS+Div標(biāo)簽輸入文本操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（18）將文本插入點(diǎn)定位到第3行右側(cè)的AP Div標(biāo)簽中，在“CSS樣式”面板的“#mid”選項(xiàng)上單擊鼠標(biāo)右鍵，在彈出的快捷菜單

23、中選擇“復(fù)制”命令，如圖所示。復(fù)制CSS樣式操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（19）打開(kāi)“復(fù)制CSS規(guī)則”對(duì)話框，在“選擇器”下拉列表框中將名稱更改為“#right”，單擊“確定”按鈕，如圖所示。（20）在“CSS樣式”面板中的“#right”選項(xiàng)上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯”命令，如圖所示。 修改CSS選擇器名稱編輯CSS規(guī)則操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（21）在打開(kāi)的對(duì)話框的在左側(cè)的“分類”列表框中選擇“類型”選項(xiàng)，在右側(cè)將顏色修改為“#009900”，如圖所示。（22）在“分類”列表框中選擇“邊框”選項(xiàng)，在右側(cè)將所有顏色修改為“#009900”

24、，單擊“確定”按鈕，如圖所示。 修改文本顏色規(guī)則 修改邊框顏色規(guī)則操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（23）將文本插入點(diǎn)定位在AP Div標(biāo)簽中，單擊“布局”選項(xiàng)卡中的“Div”按鈕 ，打開(kāi)“插入Div標(biāo)簽”對(duì)話框，在“ID”下拉列表框中選擇“right”選項(xiàng)，單擊“確定”按鈕，如圖所示。選擇CSS樣式操作三操作三 創(chuàng)建創(chuàng)建CSS+Div標(biāo)簽標(biāo)簽（24）在文本插入點(diǎn)所在的AP Div標(biāo)簽中直接輸入“綠植”，完成第3個(gè)CSS+Div標(biāo)簽的創(chuàng)建，如圖所示。（25）保存創(chuàng)建的網(wǎng)頁(yè)，按“F12”鍵即可預(yù)覽效果。預(yù)覽效果任務(wù)三任務(wù)三 用框架布局用框架布局“電影之家電影之家”網(wǎng)頁(yè)網(wǎng)頁(yè)u任務(wù)目標(biāo)為

25、新建的網(wǎng)頁(yè)創(chuàng)建框架集，并對(duì)框架集和框架網(wǎng)頁(yè)等進(jìn)行各種設(shè)置，制作如圖所示的“電影之家”網(wǎng)頁(yè)?！半娪爸摇本W(wǎng)頁(yè)的最終效果任務(wù)三任務(wù)三 用框架布局用框架布局“電影之家電影之家”網(wǎng)頁(yè)網(wǎng)頁(yè)u操作思路（1）新建框架集網(wǎng)頁(yè)并保存。（2）利用“框架”面板選擇各框架網(wǎng)頁(yè)并添加相應(yīng)的內(nèi)容。（3）添加框架，并利用浮動(dòng)框架制作外部鏈接。制作“電影之家”網(wǎng)頁(yè)的操作思路操作一 創(chuàng)建并保存框架集（1）啟動(dòng)Dreamweaver CS3，選擇【文件】【新建】菜單命令，打開(kāi)“新建文檔”對(duì)話框，選擇左側(cè)列表框中的“示例中的頁(yè)”選項(xiàng)，在“示例文件夾”列表框中選擇“框架集”選項(xiàng)，在右側(cè)的“示例頁(yè)”列表框中選擇“上方固定，左側(cè)嵌套”選

26、項(xiàng)，單擊“創(chuàng)建”按鈕，如圖所示。創(chuàng)建框架集操作一 創(chuàng)建并保存框架集（2）此時(shí)將在Dreamweaver中創(chuàng)建選擇的框架集，并打開(kāi)“框架標(biāo)簽輔助功能屬性”對(duì)話框，在其中可定義框架網(wǎng)頁(yè)的名稱，這里直接單擊“確定”按鈕，如圖所示。命名框架網(wǎng)頁(yè)操作一 創(chuàng)建并保存框架集（3）將鼠標(biāo)指針移至創(chuàng)建的框架集的某個(gè)框架邊框上，當(dāng)其變?yōu)殡p向箭頭時(shí)單擊鼠標(biāo)，如圖所示。（4）此時(shí)將選擇整個(gè)框架集，并在屬性檢查器中對(duì)其邊框粗細(xì)、顏色和寬度等屬性進(jìn)行設(shè)置，如圖所示。 單擊鼠標(biāo) 設(shè)置框架集操作一 創(chuàng)建并保存框架集（5）按住“Alt”鍵不放的同時(shí)單擊某個(gè)框架網(wǎng)頁(yè)內(nèi)部可選擇該框架，并在屬性檢查器中對(duì)該框架網(wǎng)頁(yè)的源文件、滾動(dòng)方式

27、、邊框粗細(xì)、顏色、邊界寬度和高度等屬性進(jìn)行設(shè)置，如圖所示。（6）選擇整個(gè)框架集，然后選擇【文件】【框架集另存為】菜單命令，如圖所示。 選擇某個(gè)框架網(wǎng)頁(yè) 保存框架集操作一 創(chuàng)建并保存框架集（7）打開(kāi)“另存為”對(duì)話框，在其中設(shè)置框架集的保存位置和名稱后，單擊“保存”按鈕即可保存框架集，如圖所示。設(shè)置框架集保存位置和名稱操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（1）選擇【窗口】【框架】菜單命令，如圖所示。（2）此時(shí)將在Dreamweaver窗口右側(cè)打開(kāi)“框架”面板，其中將顯示創(chuàng)建的框架集結(jié)構(gòu)，如圖所示。單擊該面板中的某個(gè)框架網(wǎng)頁(yè)即可在工作區(qū)中選擇對(duì)應(yīng)的框架，單擊面板中框架集的邊框即可選擇整個(gè)框架集。

28、選擇命令打開(kāi)“框架”面板操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（3）在“框架”面板中單擊上方的框架網(wǎng)頁(yè)將其選擇，然后在屬性檢查器中單擊“源文件”文本框右側(cè)的“瀏覽文件”按鈕 ，如圖所示。（4）打開(kāi)“選擇HTML文件”對(duì)話框，在其中選擇提供的“top”網(wǎng)頁(yè)文件，單擊“確定”按鈕，如圖所示。 選擇框架網(wǎng)頁(yè) 選擇網(wǎng)頁(yè)文件操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（5）此時(shí)所選的網(wǎng)頁(yè)內(nèi)容將出現(xiàn)在頂部的框架中，如圖所示。顯示的框架網(wǎng)頁(yè)內(nèi)容操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（6）選擇網(wǎng)頁(yè)中的文本“電影之家”，如圖所示。（7）將其文本顏色設(shè)置為“#003399”，如圖所示。按“Ctrl+S”鍵保存設(shè)置，此時(shí)

29、引用的源網(wǎng)頁(yè)文件內(nèi)容也將同時(shí)修改。 選擇文本設(shè)置框架網(wǎng)頁(yè)內(nèi)容操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（8）在“框架”面板中選擇左側(cè)的框架網(wǎng)頁(yè)，單擊屬性檢查器中的“源文件”文本框右側(cè)的“瀏覽文件”按鈕 ，如圖所示。（9）打開(kāi)“選擇HTML文件”對(duì)話框，在其中選擇提供的“l(fā)eft”網(wǎng)頁(yè)文件，單擊“確定”按鈕，如圖所示。 選擇框架選擇網(wǎng)頁(yè)文件操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（10）此時(shí)左側(cè)的框架中將顯示引用的網(wǎng)頁(yè)內(nèi)容，但由于框架寬度不夠的原因，并沒(méi)有將內(nèi)容完全顯示，如圖所示。（11）將鼠標(biāo)指針移至左側(cè)框架邊框上，當(dāng)其變?yōu)殡p向箭頭時(shí)按住鼠標(biāo)左鍵不放向右拖動(dòng)，如圖所示。 顯示的網(wǎng)頁(yè)內(nèi)容調(diào)整框架寬度操

30、作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（12）釋放鼠標(biāo)增大框架寬度，此時(shí)其中的網(wǎng)頁(yè)內(nèi)容將完全顯示出來(lái)，如圖所示。（13）選擇右側(cè)的框架，用相同方法為其引用提供的“main”網(wǎng)頁(yè)文件，如圖所示。 調(diào)整后的網(wǎng)頁(yè)內(nèi)容 引用的網(wǎng)頁(yè)文件操作二操作二 制作框架網(wǎng)頁(yè)制作框架網(wǎng)頁(yè)（14）選擇右側(cè)的框架，在屬性檢查器中將“滾動(dòng)”下拉列表框中的選項(xiàng)設(shè)置為“自動(dòng)”，并選中“不能調(diào)整大小”復(fù)選框，如圖所示。設(shè)置框架網(wǎng)頁(yè)的滾動(dòng)方式并禁止調(diào)整大小操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（1）選擇右側(cè)的框架，然后單擊插入欄的“布局”選項(xiàng)卡中的“框架”按鈕 右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“頂部框架”選項(xiàng)，如圖所示。（2）

31、打開(kāi)“新建標(biāo)簽輔助功能屬性”對(duì)話框，默認(rèn)其中的設(shè)置，直接單擊“確定”按鈕，如圖所示。 添加框架設(shè)置框架名稱操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（3）將文本插入點(diǎn)定位在添加的框架中，單擊插入欄的“布局”選項(xiàng)卡中的“IFRAME”按鈕（浮動(dòng)框架） ，此時(shí)Dreamweaver將變?yōu)椴鸱诛@示模式，如圖所示。（4）選擇【窗口】【標(biāo)簽檢查器】菜單命令，如圖所示。 拆分顯示模式選擇命令操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（5）此時(shí)將打開(kāi)“標(biāo)簽”面板，在其中的“屬性”選項(xiàng)卡中單擊“刷新”按鈕，如圖所示。刷新屬性操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（6）此時(shí)添加的框架中將出現(xiàn)創(chuàng)建的浮動(dòng)框架對(duì)象，如圖所示

32、。（7）選擇浮動(dòng)框架，在“標(biāo)簽”面板的“屬性”選項(xiàng)卡中單擊“align”選項(xiàng)右側(cè)的空白文本框，并單擊出現(xiàn)的下拉按鈕，在彈出的下拉列表中選擇“l(fā)eft”選項(xiàng)，設(shè)置其對(duì)齊方式為“左對(duì)齊”，如圖所示。 插入的浮動(dòng)框架設(shè)置對(duì)齊方式操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（8）在“標(biāo)簽”面板的“屬性”選項(xiàng)卡中單擊“scrolling”選項(xiàng)右側(cè)的空白文本框，并單擊出現(xiàn)的下拉按鈕，在彈出的下拉列表中選擇“auto”選項(xiàng)，設(shè)置其滾動(dòng)方式為“自動(dòng)”，如圖所示。（9）用相同方法在“標(biāo)簽”面板的“屬性”選項(xiàng)卡中將“width”（寬度）設(shè)置為“700”，如圖所示。 設(shè)置滾動(dòng)方式設(shè)置浮動(dòng)框架寬度操作三操作三 使用浮動(dòng)框架

33、使用浮動(dòng)框架（10）在“標(biāo)簽”面板的“屬性”選項(xiàng)卡的“scr”選項(xiàng)右側(cè)的文本框中輸入“http:/”，設(shè)置其鏈接對(duì)象地址，如圖所示。設(shè)置鏈接地址操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（11）將文本插入點(diǎn)定位在浮動(dòng)框架所在的框架網(wǎng)頁(yè)中，將其頁(yè)面背景顏色設(shè)置為“#000000”，如圖所示。（12）按“Ctrl+S”鍵，打開(kāi)“另存為”對(duì)話框，將該框架網(wǎng)頁(yè)以“elinks”為名進(jìn)行保存，如圖所示。 設(shè)置背景顏色保存框架網(wǎng)頁(yè)操作三操作三 使用浮動(dòng)框架使用浮動(dòng)框架（13）將鼠標(biāo)指針移至框架集邊框上，單擊鼠標(biāo)選擇整個(gè)框架集，按“Ctrl+S”鍵保存，如圖所示。最后按“F12”鍵預(yù)覽設(shè)置效果即可。保存框架集任

34、務(wù)四任務(wù)四 用模板布局用模板布局“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)u任務(wù)目標(biāo)創(chuàng)建網(wǎng)頁(yè)模板，并進(jìn)行設(shè)置和保存，然后新建網(wǎng)頁(yè)文件，并利用保存的網(wǎng)頁(yè)模板快速制作網(wǎng)頁(yè)內(nèi)容，最后對(duì)網(wǎng)頁(yè)模板和網(wǎng)頁(yè)文件進(jìn)行更新操作。通過(guò)網(wǎng)頁(yè)模板制作的網(wǎng)頁(yè)文件最終效果如圖所示?！靶@新聞”網(wǎng)頁(yè)的最終效果任務(wù)四任務(wù)四 用模板布局用模板布局“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)u操作思路（1）創(chuàng)建、編輯并保存網(wǎng)頁(yè)模板。（2）新建網(wǎng)頁(yè)文件，套用保存的網(wǎng)頁(yè)模板并進(jìn)行編輯。（3）更新網(wǎng)頁(yè)模板和網(wǎng)頁(yè)文件。制作“校園新聞”網(wǎng)頁(yè)的操作思路操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（1）啟動(dòng)Dreamweaver CS3，選擇【文件】【新建】菜單命令

35、，打開(kāi)“新建文檔”對(duì)話框，在左側(cè)的列表框中選擇“空白頁(yè)”選項(xiàng)，在“頁(yè)面類型”列表框中選擇“HTML模板”選項(xiàng)，在右側(cè)的“布局”列表框中選擇“”選項(xiàng)，單擊“創(chuàng)建”按鈕，如圖所示。新建模板文檔操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（2）單擊插入欄的“常用”選項(xiàng)卡（或“布局”選項(xiàng)卡）中的“表格”按鈕 ，打開(kāi)“表格”對(duì)話框，設(shè)置行數(shù)為“5”，列數(shù)為“1”，表格寬度為“800像素”，其余參數(shù)保持默認(rèn)，單擊“確定”按鈕，如圖所示。（3）單擊插入的表格下方的下拉按鈕，在彈出的下拉菜單中選擇“選擇表格”命令，如圖所示。 創(chuàng)建表格選擇命令操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（4）在屬性

36、檢查器中將對(duì)齊方式設(shè)置為“居中對(duì)齊”，邊框粗細(xì)設(shè)置為“1”，邊框顏色設(shè)置為“#666666”，如圖所示。（5）在第1行單元格中輸入“校園新聞”，并在每個(gè)文本左側(cè)插入1個(gè)不換行空格，然后將文本格式設(shè)置為“字體-方正琥珀簡(jiǎn)體、大小-36、顏色-#CC6600”，并將單元格高度設(shè)置為“60”，效果如圖所示。 設(shè)置表格屬性設(shè)置文本和單元格格式操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（6）將文本插入點(diǎn)定位到第2行單元格中，單擊插入欄的“常用”選項(xiàng)卡中的“圖像”按鈕，在打開(kāi)的對(duì)話框中選擇提供的“banner”圖像文件，單擊“確定”按鈕，并在打開(kāi)的提示對(duì)話框中單擊“確定”按鈕，效果如圖所示。選擇圖

37、像操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（7）在打開(kāi)的“圖像標(biāo)簽輔助功能屬性”對(duì)話框中單擊“確定”按鈕后即可插入選擇的圖像，如圖所示。插入圖像操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（8）在第3行單元格中輸入導(dǎo)航文本（各詞語(yǔ)之間插入若干不換行空格），并設(shè)置文本格式為“大小-14、加粗、顏色-#E5800A、居中對(duì)齊”，單元格高度設(shè)置為“25”，效果如圖所示。輸入并設(shè)置導(dǎo)航文本操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（9）在最后一行輸入版權(quán)文本，并按導(dǎo)航文本的格式進(jìn)行相同設(shè)置，效果如圖所示。輸入并設(shè)置版權(quán)文本操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（10

38、）在第4行單元格中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【表格】【拆分單元格】菜單命令，如圖所示。（11）打開(kāi)“拆分單元格”對(duì)話框，選中“列”單選項(xiàng)，將“列數(shù)”數(shù)值框中的數(shù)字設(shè)置為“2”，單擊“確定”按鈕，如圖所示。 選擇命令拆分單元格操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（12）將拆分出的單元格邊框適當(dāng)向左拖動(dòng)，調(diào)整兩個(gè)單元格的寬度，如圖所示。（13）將文本插入點(diǎn)定位到第4行左側(cè)的單元格中，選擇【插入記錄】【模板對(duì)象】【可編輯區(qū)域】菜單命令，如圖所示。 調(diào)整單元格寬度選擇命令操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（14）打開(kāi)“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸

39、入“navigation”，單擊“確定”按鈕，如圖所示。命名可編輯區(qū)域操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（15）此時(shí)將在文本插入點(diǎn)所在的單元格中插入可編輯區(qū)域的標(biāo)識(shí)，如圖所示。（16）在右側(cè)的單元格中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【模板】【新建可編輯區(qū)域】菜單命令，如圖所示。 創(chuàng)建的可編輯區(qū)域選擇命令操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（17）打開(kāi)“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入“main”，單擊“確定”按鈕，如圖所示。（18）此時(shí)將在單元格中插入可編輯區(qū)域的標(biāo)識(shí)，如圖所示。 命名可編輯區(qū)域 插入可編輯區(qū)域操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建

40、并編輯網(wǎng)頁(yè)模板（19）選擇【文件】【另存為模板】菜單命令，如圖所示。選擇命令操作一操作一 創(chuàng)建并編輯網(wǎng)頁(yè)模板創(chuàng)建并編輯網(wǎng)頁(yè)模板（20）打開(kāi)“另存模板”對(duì)話框，在“站點(diǎn)”下拉列表框中選擇此模板存放的站點(diǎn)，在“另存為”文本框中輸入模板名稱，完成后單擊“保存”按鈕，如圖所示。保存模板操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（1）選擇【文件】【新建】菜單命令，在打開(kāi)的對(duì)話框中選擇空白的網(wǎng)頁(yè)文件，單擊“創(chuàng)建”按鈕，如圖所示。（2）選擇【修改】【模板】【應(yīng)用模板到頁(yè)】菜單命令，如圖所示。 新建空白網(wǎng)頁(yè) 應(yīng)用模板操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新

41、聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（3）打開(kāi)“選擇模板”對(duì)話框，在“站點(diǎn)”下拉列表框中選擇模板所在的站點(diǎn)，在“模板”列表框中選擇需應(yīng)用的模板選項(xiàng)，單擊“選定”按鈕，如圖所示。選擇模板操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（4）此時(shí)空白網(wǎng)頁(yè)將應(yīng)用所選的網(wǎng)頁(yè)模板內(nèi)容，且將鼠標(biāo)指針移至非可編輯區(qū)域上時(shí)，鼠標(biāo)指針將變?yōu)榻脿顟B(tài)，如圖所示。（5）將“navigation”可編輯區(qū)域中的“navigation”文本刪除，如圖所示。 應(yīng)用模板 刪除文本操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（6）單擊插入欄的“常用”選項(xiàng)卡中的“表格”按鈕 ，打開(kāi)“表格”對(duì)話框

42、，設(shè)置行數(shù)為“5”，列數(shù)為“1”，表格寬度為“220像素”，其余參數(shù)保持默認(rèn)，單擊“確定”按鈕，如圖所示。（7）選擇插入的表格，將其對(duì)齊方式設(shè)置為“居中對(duì)齊”，邊框粗細(xì)設(shè)置為“1”，邊框顏色設(shè)置為“#CCCCCC”，效果如圖所示。 創(chuàng)建表格 設(shè)置表格邊框操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（8）在第1行單元格中輸入“新聞速遞”，并將文本格式設(shè)置為“字體-方正藝黑簡(jiǎn)體、大小-18”，并將單元格高度設(shè)置為“30”，效果如圖所示。輸入并設(shè)置文本操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（9）在其余單元格中輸入如圖所示的文本，并設(shè)置大小為“14”，然后將單元格高度設(shè)置為“30”。（10）用相同方法在“main”可編輯區(qū)域插入表格，然后輸入并設(shè)置相應(yīng)的內(nèi)容，如圖所示。 輸入表格內(nèi)容創(chuàng)建并設(shè)置表格操作二操作二 通過(guò)網(wǎng)頁(yè)模板制作通過(guò)網(wǎng)頁(yè)模板制作“校園新聞校園新聞”網(wǎng)頁(yè)網(wǎng)頁(yè)（11）保存設(shè)置并預(yù)覽效果，如圖所示。預(yù)覽網(wǎng)頁(yè)效果操作三 更新“校園新聞”網(wǎng)頁(yè)（1）切換到網(wǎng)頁(yè)模板中，修改版權(quán)文本，如圖所示。修改模板中的版權(quán)文本操作三 更新“校園新聞”網(wǎng)頁(yè)（2）切換到網(wǎng)頁(yè)文