任務(wù)教學(xué)成果申報(bào)網(wǎng)站的后期編輯

任務(wù)教學(xué)成果申報(bào)網(wǎng)站的后期編輯第一頁(yè)，共三十六頁(yè)，編輯于2023年，星期六1.任務(wù)解析與項(xiàng)目目標(biāo)

2.核心技能與概念3.任務(wù)計(jì)劃與決策4.任務(wù)實(shí)施——效果圖的制作5.項(xiàng)目檢查與評(píng)估6.項(xiàng)目開發(fā)策略與技巧任務(wù)3：教學(xué)成果申報(bào)網(wǎng)站的后期編輯網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)教程情境1：教學(xué)成果申報(bào)網(wǎng)網(wǎng)站建設(shè)第二頁(yè)，共三十六頁(yè)，編輯于2023年，星期六1任務(wù)解析與項(xiàng)目目標(biāo)

利用Dreamweaver軟件來(lái)完成對(duì)效果圖導(dǎo)出網(wǎng)頁(yè)的編輯，并利用Dreamweaver制作其他相關(guān)網(wǎng)頁(yè)，最終豐富網(wǎng)頁(yè)內(nèi)容，進(jìn)行鏈接測(cè)試。

第三頁(yè)，共三十六頁(yè)，編輯于2023年，星期六網(wǎng)頁(yè)編輯基礎(chǔ)知識(shí)

2.核心技能與概念靜態(tài)網(wǎng)頁(yè):是純粹HTML格式的網(wǎng)頁(yè)l

靜態(tài)網(wǎng)頁(yè)上的頁(yè)面不能互動(dòng)交流，只供客戶端瀏覽，不能即時(shí)更改文字及圖片資料。不能實(shí)現(xiàn)客戶端和服務(wù)器端的直接信息交流。l

靜態(tài)網(wǎng)頁(yè)上的內(nèi)容維護(hù)人員必須手動(dòng)修改。l

開發(fā)靜態(tài)網(wǎng)站的費(fèi)用極低，但如果每月或每周修改網(wǎng)站的話，維護(hù)成本會(huì)變高。

第四頁(yè)，共三十六頁(yè)，編輯于2023年，星期六網(wǎng)頁(yè)編輯基礎(chǔ)知識(shí)

2.核心技能與概念動(dòng)態(tài)網(wǎng)頁(yè):采用動(dòng)態(tài)技術(shù)生成的網(wǎng)頁(yè)

“交互性”，即網(wǎng)頁(yè)會(huì)根據(jù)網(wǎng)頁(yè)用戶的要求和選擇而動(dòng)態(tài)改變和響應(yīng)。

“自動(dòng)更新”，即無(wú)須手動(dòng)地更新HTML文檔，便會(huì)自動(dòng)生成新的頁(yè)面，可以大大節(jié)省維護(hù)工作量。

“因時(shí)因人而變”，即當(dāng)不同的時(shí)間、不同的任務(wù)訪問同一網(wǎng)址時(shí)會(huì)產(chǎn)生不同的效果。

使用動(dòng)態(tài)頁(yè)面，一般后臺(tái)會(huì)鏈接數(shù)據(jù)庫(kù)，每當(dāng)數(shù)據(jù)庫(kù)或其他數(shù)據(jù)源數(shù)據(jù)發(fā)生變化時(shí)，網(wǎng)站內(nèi)容就會(huì)發(fā)生相應(yīng)的變化。第五頁(yè)，共三十六頁(yè)，編輯于2023年，星期六網(wǎng)頁(yè)編輯基礎(chǔ)知識(shí)

2.核心技能與概念本地站點(diǎn)本地站點(diǎn)是指存儲(chǔ)Web文件和文檔的文件夾。定義站點(diǎn)就是在

Dreamweaver中設(shè)計(jì)網(wǎng)站的第一部，此時(shí)設(shè)計(jì)人員將指定根文件夾的位置。本地站點(diǎn)包含網(wǎng)站的文件，這些文件存儲(chǔ)在本地磁盤上。每當(dāng)需要更新網(wǎng)站的文件時(shí)，就可以編輯本地站點(diǎn)中的相應(yīng)頁(yè)面，然后上傳到遠(yuǎn)程服務(wù)器上進(jìn)行更新。必須為每個(gè)網(wǎng)站都定義一個(gè)本地站點(diǎn)。第六頁(yè)，共三十六頁(yè)，編輯于2023年，星期六網(wǎng)頁(yè)編輯基礎(chǔ)知識(shí)

2.核心技能與概念遠(yuǎn)程站點(diǎn)遠(yuǎn)程站點(diǎn)也就是網(wǎng)站服務(wù)器。在建立遠(yuǎn)程站點(diǎn)之前，必須先創(chuàng)建一個(gè)本地站點(diǎn)（本地站點(diǎn)將與遠(yuǎn)程站點(diǎn)關(guān)聯(lián)）

。建立遠(yuǎn)程站點(diǎn)之后，即可根據(jù)需要上傳文件和將文件下載到本地站點(diǎn)中。根文件夾

l

存儲(chǔ)所有網(wǎng)站文件的本地文件夾。l

站點(diǎn)的本地根文件夾應(yīng)該是專門為該站點(diǎn)創(chuàng)建的。

第七頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

菜單插入欄文檔工具欄屬性檢查器文檔窗口面板組第八頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

Dreamweaver的界面-插入欄Dreamweaver的界面-屬性檢查器第九頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

Dreamweaver的界面-面板組a）“文件”面板b）“資源”面板第十頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

“頁(yè)面屬性”對(duì)話框包括頁(yè)面的顏色、頁(yè)面標(biāo)題和背景圖像等的設(shè)置選項(xiàng)，點(diǎn)擊如圖“分類欄”中的各個(gè)選項(xiàng)，可作如下設(shè)置（以外觀分類為例）。圖中設(shè)置了文字大小為12pixels，文本的顏色為白色（#ffffff），背景顏色為深褐色（#6d4418），網(wǎng)頁(yè)的上邊距、下邊距、左邊距、右邊距都設(shè)置為0pixels。

第十一頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

圖中設(shè)置了文字大小為12pixels，超級(jí)鏈接的鏈接文本顏色與已經(jīng)訪問的文本顏色為白色，變換圖像鏈接時(shí)的顏色為淺黃色（#FFCC00），下劃線樣式設(shè)置為：僅在變換圖像時(shí)顯示下劃線。

第十二頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

編碼為簡(jiǎn)體中文GB2312第十三頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念編輯文本是最基本的網(wǎng)頁(yè)制作技能，文字是人類文明的結(jié)晶，是網(wǎng)頁(yè)傳遞信息的最基本的方式。編輯和設(shè)置內(nèi)容豐富、格式美觀的文本，既可以傳達(dá)網(wǎng)站大量的信息，又可以激發(fā)瀏覽者的閱讀興趣。在Dreamweaver中可以輸入普通文字，也可以輸入特殊字符，設(shè)置字體大小，改變文本顏色等。

1）文本的輸入2）復(fù)制和粘貼文本3）從Word文檔中導(dǎo)入HTML，粘貼到所需位置即可比較<Enter>與<shift>+<Enter>鍵的區(qū)別核心技能一：認(rèn)識(shí)DreamweaverCS3的工作界面

第十四頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能三：Dreamweaver插入網(wǎng)頁(yè)圖像

執(zhí)行“插入”→“圖像”命令，完成插入圖像。第十五頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能三：Dreamweaver插入網(wǎng)頁(yè)圖像

執(zhí)行“插入”→“圖像”命令，完成插入圖像。第十六頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能四：Dreamweaver插入超級(jí)鏈接

超級(jí)鏈接目標(biāo)的四種屬性_blank：在新的瀏覽器窗口中打開鏈接的文檔，同時(shí)保持當(dāng)前窗口不變。_parent：在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時(shí)替換整個(gè)框架集。_self：在當(dāng)前窗口中打開鏈接，同時(shí)替換該框架中的內(nèi)容。_top：在當(dāng)前瀏覽器窗口中打開鏈接的文檔，同時(shí)替換所有框架。第十七頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能四：Dreamweaver插入超級(jí)鏈接

a）網(wǎng)頁(yè)圖像設(shè)置超級(jí)鏈接b）在文本屬性欄設(shè)置超級(jí)鏈接c）tjc.doc文件第十八頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能五：Dreamweaver插入表格

第十九頁(yè)，共三十六頁(yè)，編輯于2023年，星期六2.核心技能與概念核心技能五：Dreamweaver插入表格

“表格”的屬性表格單元格的屬性第二十頁(yè)，共三十六頁(yè)，編輯于2023年，星期六

“插入”→“HTML”→“特殊字符”→“其他字符”命令核心技能六：Dreamweaver插入特殊字符

2.核心技能與概念第二十一頁(yè)，共三十六頁(yè)，編輯于2023年，星期六3.項(xiàng)目計(jì)劃與決策首先對(duì)網(wǎng)頁(yè)的效果如圖進(jìn)行分析，將網(wǎng)頁(yè)內(nèi)容設(shè)置居中，同時(shí)將設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性，最后制作網(wǎng)頁(yè)的超鏈接和視頻欣賞頁(yè)面。院標(biāo)（寬高）圖片成果推薦書成果總結(jié)成果視頻介紹成果展示名錄電子信息工程實(shí)訓(xùn)基地版權(quán)信息第二十二頁(yè)，共三十六頁(yè)，編輯于2023年，星期六4.任務(wù)實(shí)施——簡(jiǎn)單編輯網(wǎng)頁(yè)

1）在根文件夾中創(chuàng)建相應(yīng)的素材文件夾，然后將項(xiàng)目所需的文件及視頻復(fù)制到不同的文件夾中。2）首先設(shè)置頁(yè)面屬性，設(shè)置文字大小為12pixels，文本的顏色為白色（#ffffff），背景顏色為深藍(lán)色（#003366），網(wǎng)頁(yè)的上邊距、下邊距、左邊距、右邊距都設(shè)置為0pixels，如圖1-75所示，設(shè)置鏈接屬性為：文字大小為12pixels，超級(jí)鏈接的鏈接文本顏色與已經(jīng)訪問的文本顏色為黑色，變換圖像鏈接時(shí)的顏色為淺黃色（#FFCC00），下劃線樣式設(shè)置為：僅在變換圖像時(shí)顯示下劃線，活動(dòng)鏈接為紅色（#FFC000），如圖1-75所示，設(shè)置網(wǎng)頁(yè)的標(biāo)題為：教學(xué)成果申報(bào)網(wǎng)效果圖，編碼為簡(jiǎn)體中文GB2312。第二十三頁(yè)，共三十六頁(yè)，編輯于2023年，星期六4.任務(wù)實(shí)施——簡(jiǎn)單編輯網(wǎng)頁(yè)

3）選擇網(wǎng)頁(yè)主體內(nèi)容將其剪切，然后在網(wǎng)頁(yè)中插入表格，具體參數(shù)為1行1列，寬為100%，高為100%，填充、間距、邊框都為0像素，設(shè)置水平的對(duì)其方式為“居中對(duì)齊”，垂直的對(duì)齊方式為“居中對(duì)齊”。4）再次將網(wǎng)頁(yè)主體內(nèi)容粘貼到網(wǎng)頁(yè)的單元格中，執(zhí)行“文件”→“在瀏覽器中預(yù)覽”→“iexplore”命令（快捷鍵<F12>）預(yù)覽網(wǎng)頁(yè)，效果如圖1-85所示。第二十四頁(yè)，共三十六頁(yè)，編輯于2023年，星期六4.任務(wù)實(shí)施——簡(jiǎn)單編輯網(wǎng)頁(yè)

圖1-85調(diào)整后的網(wǎng)頁(yè)界面第二十五頁(yè)，共三十六頁(yè)，編輯于2023年，星期六4.任務(wù)實(shí)施——簡(jiǎn)單編輯網(wǎng)頁(yè)

4）選擇“成果推薦書”所在的圖片default_05.gif，會(huì)發(fā)現(xiàn)該圖片已經(jīng)設(shè)置了超級(jí)鏈接（在Photoshop中切片屬性設(shè)置時(shí)設(shè)置的），依次設(shè)置“成果總結(jié)”所在的圖片default_06.gif鏈接“cgzj.doc”文件，設(shè)置“成果視頻介紹”所在的圖片default_07.gif鏈接“video.html”，設(shè)置“成果展示”所在的圖片default_08.gif鏈接“cgzs.doc”文件，設(shè)置“電子信息工程實(shí)訓(xùn)基地”所在的圖片鏈接網(wǎng)址“44:8086”。以上所有超級(jí)鏈接的目標(biāo)都設(shè)置為“_blank”。第二十六頁(yè)，共三十六頁(yè)，編輯于2023年，星期六4.任務(wù)實(shí)施——制作視頻展示網(wǎng)頁(yè)

5）將網(wǎng)頁(yè)default.html另存為video.html，然后Gif動(dòng)畫default_04.gif（寬430px，高253px）刪除，并設(shè)置動(dòng)畫所在的單元格寬設(shè)置為430px，高253px（防止網(wǎng)頁(yè)斷層），最后執(zhí)行“插入”→“媒體”→“插件”，在“插件”對(duì)話框中選擇“move”文件夾中的“sp.wmv”，最后設(shè)置插件的寬為430像素，高為253像素。執(zhí)行“文件”→“在瀏覽器中預(yù)覽”→“iexplore”命令（快捷鍵<F12>）預(yù)覽網(wǎng)頁(yè)，效果如圖所示。第二十七頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

策略1：網(wǎng)頁(yè)切片的技巧針對(duì)本例在任務(wù)2中的切片是存在問題的，中間導(dǎo)航部分的圖片“成果展示”所在的圖片寬度為227像素，同列的其他圖片寬為228像素。這樣產(chǎn)生了一個(gè)寬為1像素的小圖片，在網(wǎng)頁(yè)中盡量避免這種問題的發(fā)生，網(wǎng)頁(yè)效果圖在切片時(shí)可以借用輔助線進(jìn)行切片，同時(shí)在進(jìn)行小的切片時(shí)，可以使用<Ctrl++>放大圖像來(lái)切片。策略2：網(wǎng)頁(yè)的布局技巧

在常規(guī)網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)效果圖的切片與網(wǎng)頁(yè)導(dǎo)出對(duì)網(wǎng)站只是一個(gè)參考，是網(wǎng)頁(yè)宏觀的把握，通常網(wǎng)頁(yè)在編輯后期編輯時(shí)都會(huì)參照效果圖與切片重新編輯。針對(duì)本項(xiàng)目，在default.html的基礎(chǔ)上重新布局的具體步驟如下。第二十八頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

1）將default.html另存為index.html，然后刪除中間的網(wǎng)頁(yè)內(nèi)容，插入1個(gè)表格（3行3列），寬為782像素，高為434像素，填充和邊框?yàn)?像素，間距為1像素，參數(shù)設(shè)置如圖1-87所示。圖1-87表格的參數(shù)設(shè)置第二十九頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

2）將第1、3行的3個(gè)單元格合并，所有單元格背景色設(shè)置為藍(lán)色（##0757ac），并設(shè)置第1行行高96像素，第2行行高位253像素，第3行行高為81像素，設(shè)置第2行中的3個(gè)單元格的寬分別為120像素、227像素、430像素，修改第2行第2列的背景色為淺灰色（#dbdbdb），效果如圖1-88所示。圖1-88表格布局的初步效果第三十頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

3）將圖片default_01.gif插入第1行單元格，將圖片default_02.gif插入第2行第1列的單元格，將gif動(dòng)畫圖片default_05.gif插入第2行第3列的單元格，在第3行中插入“版權(quán)所有：淮安高校聯(lián)合體”和“地址：江蘇省淮安市高教園區(qū)枚乘東路3號(hào)郵編：223003”兩行文本，并在文字前方插入空格字符（使用全角插入），效果如圖1-89所示。圖1-89表格中插入部分元素后的效果第三十一頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

4）將素材文件夾中的“圖標(biāo)”系列圖片復(fù)制到images文件夾中并重命名，設(shè)置第2行的第2列單元格為水平居中，并在其中插入1個(gè)5行2列的表格，寬為220像素，設(shè)置表格的行高為40像素，左列寬為45像素，右列175像素，最后依次插入在第1列中插入圖片，在第2列中插入文本，并對(duì)文本設(shè)置超級(jí)鏈接，效果如圖1-90所示。圖1-90表格布局修飾后的效果第三十二頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

策略3：動(dòng)畫區(qū)域的使用技巧在網(wǎng)頁(yè)中經(jīng)常會(huì)有用到幻燈片的效果，實(shí)現(xiàn)幻燈效果一般采用javascript腳本實(shí)現(xiàn)。圖1-91動(dòng)畫轉(zhuǎn)換為幻燈后的效果第三十三頁(yè)，共三十六頁(yè)，編輯于2023年，星期六5.項(xiàng)目開發(fā)策略與技巧

策略4：視頻的插入技巧

視頻的插入同樣也可以通過編輯代碼的形式來(lái)實(shí)