任務教學成果申報網(wǎng)站的后期編輯

任務教學成果申報網(wǎng)站的后期編輯第一頁，共三十六頁，編輯于2023年，星期六1.任務解析與項目目標

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

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

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

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

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

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

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

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

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

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

“自動更新”，即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節(jié)省維護工作量。

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

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

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

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

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

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

l

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

策略4：視頻的插入技巧

視頻的插入同樣也可以通過編輯代碼的形式來實