資源描述：
《dreamweaver cs 網(wǎng)頁(yè)制作案例教程電子教案第章制作包含ap div和超級(jí)鏈接的網(wǎng)頁(yè)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、第5章 制作包含APDIV和超級(jí)鏈接的網(wǎng)頁(yè)第5章 制作包含APDIV和超級(jí)鏈接的網(wǎng)頁(yè)一個(gè)網(wǎng)站由多個(gè)網(wǎng)頁(yè)組成，各個(gè)網(wǎng)頁(yè)之間可以通過(guò)超級(jí)鏈接相互聯(lián)系。APDIV可以看作是網(wǎng)頁(yè)中的一個(gè)容器，在其中可以插入多種頁(yè)面元素，例如文本、圖像、表格等?！窘虒W(xué)導(dǎo)航】教學(xué)目標(biāo)（1）熟練創(chuàng)建網(wǎng)頁(yè)的內(nèi)部鏈接和外部鏈接（2）熟練在圖像中設(shè)置熱點(diǎn)區(qū)域，并創(chuàng)建圖像熱點(diǎn)鏈接（3）熟練創(chuàng)建命名錨記和到該命名錨記的鏈接（4）熟練創(chuàng)建電子郵件鏈接（5）熟練更改鏈接顏色、設(shè)置鏈接的打開(kāi)方式、設(shè)置空鏈接（6）熟練測(cè)試鏈接的有效性（7）熟練插入或繪制APDiv，并合理地設(shè)置APDiv的屬性（8）能正確在APDiv中插入flas
2、h動(dòng)畫(huà)（9）能正確插入浮動(dòng)框架iframe，并設(shè)置其屬性（10）進(jìn)一步熟悉使用表格進(jìn)行網(wǎng)頁(yè)布局，靈活設(shè)置表格及單元格的屬性（11）掌握滾動(dòng)圖片的方法（12）理解絕對(duì)路徑和相對(duì)路徑，知道鏈接的類型本章重點(diǎn)（1）創(chuàng)建網(wǎng)頁(yè)的內(nèi)部鏈接和外部鏈接（2）在圖像中設(shè)置熱點(diǎn)區(qū)域，并創(chuàng)建圖像熱點(diǎn)鏈接（3）創(chuàng)建命名錨記和到該命名錨記的鏈接（3）插入或繪制APDiv，并在APDiv中插入flash動(dòng)畫(huà)本章難點(diǎn)（1）在圖像中設(shè)置熱點(diǎn)區(qū)域，并創(chuàng)建圖像熱點(diǎn)鏈接（2）插入或繪制APDiv，并在APDiv中插入flash動(dòng)畫(huà)（3）插入浮動(dòng)框架iframe，并設(shè)置其屬性教學(xué)方法任務(wù)驅(qū)動(dòng)法、分組討論法、四步訓(xùn)練法課時(shí)建
3、議6課時(shí)（含課堂同步訓(xùn)練）5.1 課前準(zhǔn)備5.1.1 新建一個(gè)站點(diǎn)（1）在本地硬盤(pán)創(chuàng)建文件夾（2）啟動(dòng)DreamweaverCS3119第5章 制作包含APDIV和超級(jí)鏈接的網(wǎng)頁(yè)（3）創(chuàng)建名稱為“公園游”的本地站點(diǎn)5.1.2 創(chuàng)建網(wǎng)頁(yè)文檔album0502.html（1）在文件夾“webpage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔，將其命名為“album0502.html”。（2）在“文檔”工具欄的“標(biāo)題”文本框直接輸入網(wǎng)頁(yè)標(biāo)題“天門山美景圖片”。（3）插入一個(gè)2行1列的表格1，該表格的屬性設(shè)置如圖5-1所示，表格的“寬”設(shè)置為“778像素”，“邊框”、“間距”和“填充”都設(shè)置為“0”，“對(duì)齊”方式
4、設(shè)置為“居中對(duì)齊”，“背景顏色”設(shè)置為“#f7f7f7”。（4）在表格1的第一行的單元格中輸入文字“天子山美景”，且設(shè)置文字大小為“18像素”，顏色設(shè)置為“#0000FF”。（5）在表格1的第二行的單元格中插入一個(gè)3行5列的嵌套表格2，該表格的屬性設(shè)置如圖5-2所示，表格的“邊框”設(shè)置為“1像素”，“間距”設(shè)置為“15像素”，“填充”設(shè)置為“10”，“對(duì)齊”方式設(shè)置為“居中對(duì)齊”，“背景顏色”設(shè)置為“#f7f7f7”。（6）表格2單元格的屬性設(shè)置表格2所有單元格的屬性設(shè)置如圖5-3所示，“水平”對(duì)齊方式設(shè)置為“居中對(duì)齊”，“垂直”對(duì)齊方式設(shè)置為“居中”，“寬”設(shè)置為“100像素”，“
5、高”設(shè)置為“100像素”，背景顏色設(shè)置為“#ffffff”，邊框顏色設(shè)置為“#999999”。（7）在表格2各個(gè)單元格中插入圖像將文件夾“task05-1webpageimage”中圖像文件“050201.jpg”～“050215.jpg”分別插入到表格2各個(gè)單元格中，且將各個(gè)圖像的“寬”設(shè)置為“100像素”，“高”設(shè)置為“80像素”，“邊框”設(shè)置為“0”。（8）保存網(wǎng)頁(yè)，預(yù)覽其效果保存網(wǎng)頁(yè)文檔album0502.html，按F12預(yù)覽該其效果，如圖5-4所示。5.1.3 創(chuàng)建網(wǎng)頁(yè)文檔jbx.html（1）在文件夾“webpage”中創(chuàng)建一個(gè)網(wǎng)頁(yè)文檔，將其命名為“jbx.html
6、”。（2）在“文檔”工具欄的“標(biāo)題”文本框直接輸入網(wǎng)頁(yè)標(biāo)題“天然氧吧金鞭溪”。（3）插入一個(gè)2行3列的表格1，該表格的屬性設(shè)置如圖5-5所示，表格的“寬”設(shè)置為“540像素”，“邊框”設(shè)置為“1像素”，“間距”和“填充”都設(shè)置為“0”，“對(duì)齊”方式設(shè)置為“居中對(duì)齊”。（4）將表格1第一行的“高”設(shè)置為“200像素”，將第一行的三個(gè)單元格合并為一個(gè)單元格，該單元格的水平對(duì)齊方式設(shè)置為“居中對(duì)齊”。（5）將表格1第二行的“高”設(shè)置為“30像素”，各個(gè)單元格的水平對(duì)齊方式設(shè)置為“居中對(duì)齊”，垂直對(duì)齊方式設(shè)置為“居中”，單元格的“寬”設(shè)置為“176像素”。（6）在表格1第一行的單元格中插入一
7、個(gè)1行2列的表格2，表格的“寬”設(shè)置為“495像素”，“邊框”、“間距”和“填充”都設(shè)置為“0”，“對(duì)齊”方式設(shè)置為“居中對(duì)齊”。（7）將表格2的行高設(shè)置為“190像素”，背景顏色設(shè)置為“#FF9900”，將表格2第一列的“寬”設(shè)置為“253像素”。將表格2第一列的單元格水平對(duì)齊方式設(shè)置為“居中對(duì)齊”，重直對(duì)齊方式設(shè)置為“居中”。表格2第二列單元格的屬性設(shè)置如圖5-6所示。119第5章 制作包含APDIV和超級(jí)鏈接的網(wǎng)頁(yè)（8）在表格2第一列的單元格插入文件
