第四周網頁制作與網站設計教程淮安信息職業(yè)技術學院計算機科學與工程系網頁制作與網站設計課程組制

第四周網頁制作與網站設計教程淮安信息職業(yè)技術學院計算機科學與1第八章網站建設實例英語素材庫備課輔助系統(tǒng)主頁建設實例

——網頁制作與網站設計課程講義第八章網站建設實例2第八章網站建設實例本章要點

網頁效果圖的制作流程教育類網站的開發(fā)思路Photoshop中路徑的使用方法Photoshop中層的樣式的使用方法效果圖切片的技巧網頁導出后的后期修飾第八章網站建設實例本章要點網頁效果圖的制作流程3英語素材庫備課輔助系統(tǒng)---項目背景第八章網站建設實例《現代遠程高等教育資源庫》項目是國家教育部新世紀網絡課程建設工程的一個主題項目，該項目的英語教學素材庫子模塊于2002年3月立項，目前已完成。在現有的素材庫的基礎上，開發(fā)適合教師電子備課的支撐平臺，成為了進一步的重點開發(fā)目標。本系統(tǒng)是基于現有英語素材庫的網上電子備課平臺的一個界面。英語素材庫備課輔助系統(tǒng)---項目背景第八章網站建設實例《現代4英語素材庫備課輔助系統(tǒng)---網站設計草圖

第八章網站建設實例背景圖片系統(tǒng)名稱子模塊子模塊子模塊子模塊子模塊子模塊英語素材庫備課輔助系統(tǒng)---網站設計草圖第八章網站建設實例系5英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例過程演示

1.打開Photoshop軟件，新建文件命名為“英語素材庫備課輔助平臺”，大小為：770像素*430像素，同時打開素材文件夾中的“樓.jpg”，將該圖片拖到當前的圖中去并且放到適當的位置，如圖英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實6英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例2.用鋼筆工具沿著樓體的走勢繪制弧形路徑，如圖所示。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實7英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例3.新建圖層“弧形”，選取前景色為與樓體類似的藍色，回到路徑面板中點擊【描邊】按鈕，即可得到一條清晰而平滑的曲線，如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實8英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例4.雙擊“弧線”圖層，給弧線增加投影效果，最終效果如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實9英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例5.打開素材文件夾中的“1.jpg”到“6.jpg”，將這些圖片拖到當前的圖中去并且放到適當的位置，如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實10英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例6.將以上六個小圖鏈接起來后，合并這些圖層，再給該層增加陰影效果，如圖所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實11英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例7.用文字工具添加“英語素材庫輔助備課平臺”文字，顏色設置為：F6530B，字體大小為24像素，效果如圖所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實12英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例8.用文字工具添加“E-Prepare”文字，顏色設置為：F6530B，字體大小為60像素，點擊編輯菜單后選擇“自由變換”工具將“E-Prepare”調整，效果如圖8-8所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實13英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例9.將“E-Prepare”文字復制一層，底層顏色設置為：897DA3，再通過向下和向右箭頭分別移動2像素，給上層文字增加圖層樣式，“斜面與浮雕”與“漸變與疊加效果”（選擇由藍色到白色的過渡）的樣式設置如圖，效果如右圖。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實14英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例9.用文字供給增加“圖像資源”，字號12pixel，顏色為白色，設置外發(fā)光效果，同理“音頻資源”、“視頻資源”、“文字資源”、“查找資源”、“幫助信息”，效果可以直接復制，或直接將特效拖放到新的圖層上就可以了，效果如圖。

10.通過抓屏法到其他網頁中抓取一個含有“按鈕”和“文本框”的圖片，然后再添加“用戶名”和“密碼”字樣，本例的效果圖到此就制作完成了。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實15英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

1.打開ImageReadyCS軟件，打開”英語素材庫備課輔助平臺.psd”圖片，復制“圖像資源”層，設置外發(fā)光漸變?yōu)镕0880A過渡向透明，設置結束后隱藏該層，用切刀對該圖片進行切割，如圖。演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例16英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

2.當選中切片4（圖像資源）時，打開“Web內容”面板，在該切片上點擊右鍵，選擇“增加滾動狀態(tài)”選項（如左圖），之后會發(fā)現在該面板下多了一個新的狀態(tài)，“over”狀態(tài)，此時進入“圖層面板”，隱藏藍色的“圖像資源”層，顯示橙色的“圖像資源”層，最終的效果如右圖演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例17英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

3.采用同樣的方式，將其他的幾個切片（音頻資源、視頻資源、文字資源、圖像資源、查找資源、幫助信息）都做成類似的效果。4.執(zhí)行“文件”→“將優(yōu)化結果存儲為”命令，對效果圖進行輸出保存，命名為“index.html”，導出完成后即可使用瀏覽器預覽效果。

演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例18英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站建設實例演示1.用DreamWeaver打開上圖后，插入表格為2行1列，寬度為100%，高度為100%，第1行高度為92%，水平對齊方式為：水平對齊，垂直對齊方式為：中間對齊，第2行高為8%，將輸出的網頁表格選中剪切后，粘貼到第1行中，預覽效果如圖所示。

英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站19英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站建設實例2.在第2行中輸入“Copyright@2004-2007HCIT版權所有:淮安信息職業(yè)技術學院”，字號為2像素。3.選中“index20.gif”(用戶名，密碼所在的圖片)，觀察大小寬308像素，高32像素，將其刪除，同時設置背景圖片為“index20.gif”，然后再次插入一個1行5列的表格，大小為寬308像素，高32像素。4.調整適當的大小，在第1列中輸入“用戶名”，第三列中輸入“密碼”，再往第2列、第4列中分別插入一個文本框，在最后一列中插入一個按鈕。最終的預覽效果如圖所示。英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站20英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站建設實例英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站21第八章網站建設實例本章小節(jié)網頁效果圖的制作流程教育類網站的開發(fā)思路Photoshop中路徑的使用方法Photoshop中層的樣式的使用方法效果圖切片的技巧網頁導出后的后期修飾習題1.在Internet上搜索與本系統(tǒng)類似的系統(tǒng)。2.課余時間搜集教學輔助系統(tǒng)。第八章網站建設實例本章小節(jié)網頁效果圖的制作流程習題1.在In22謝謝大家！第八章網站建設實例謝謝大家！第八章網站建設實例23第四周網頁制作與網站設計教程淮安信息職業(yè)技術學院計算機科學與工程系網頁制作與網站設計課程組制

第四周網頁制作與網站設計教程淮安信息職業(yè)技術學院計算機科學與24第八章網站建設實例英語素材庫備課輔助系統(tǒng)主頁建設實例

——網頁制作與網站設計課程講義第八章網站建設實例25第八章網站建設實例本章要點

網頁效果圖的制作流程教育類網站的開發(fā)思路Photoshop中路徑的使用方法Photoshop中層的樣式的使用方法效果圖切片的技巧網頁導出后的后期修飾第八章網站建設實例本章要點網頁效果圖的制作流程26英語素材庫備課輔助系統(tǒng)---項目背景第八章網站建設實例《現代遠程高等教育資源庫》項目是國家教育部新世紀網絡課程建設工程的一個主題項目，該項目的英語教學素材庫子模塊于2002年3月立項，目前已完成。在現有的素材庫的基礎上，開發(fā)適合教師電子備課的支撐平臺，成為了進一步的重點開發(fā)目標。本系統(tǒng)是基于現有英語素材庫的網上電子備課平臺的一個界面。英語素材庫備課輔助系統(tǒng)---項目背景第八章網站建設實例《現代27英語素材庫備課輔助系統(tǒng)---網站設計草圖

第八章網站建設實例背景圖片系統(tǒng)名稱子模塊子模塊子模塊子模塊子模塊子模塊英語素材庫備課輔助系統(tǒng)---網站設計草圖第八章網站建設實例系28英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例過程演示

1.打開Photoshop軟件，新建文件命名為“英語素材庫備課輔助平臺”，大小為：770像素*430像素，同時打開素材文件夾中的“樓.jpg”，將該圖片拖到當前的圖中去并且放到適當的位置，如圖英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實29英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例2.用鋼筆工具沿著樓體的走勢繪制弧形路徑，如圖所示。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實30英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例3.新建圖層“弧形”，選取前景色為與樓體類似的藍色，回到路徑面板中點擊【描邊】按鈕，即可得到一條清晰而平滑的曲線，如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實31英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例4.雙擊“弧線”圖層，給弧線增加投影效果，最終效果如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實32英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例5.打開素材文件夾中的“1.jpg”到“6.jpg”，將這些圖片拖到當前的圖中去并且放到適當的位置，如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實33英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例6.將以上六個小圖鏈接起來后，合并這些圖層，再給該層增加陰影效果，如圖所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實34英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例7.用文字工具添加“英語素材庫輔助備課平臺”文字，顏色設置為：F6530B，字體大小為24像素，效果如圖所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實35英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例8.用文字工具添加“E-Prepare”文字，顏色設置為：F6530B，字體大小為60像素，點擊編輯菜單后選擇“自由變換”工具將“E-Prepare”調整，效果如圖8-8所示。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實36英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例9.將“E-Prepare”文字復制一層，底層顏色設置為：897DA3，再通過向下和向右箭頭分別移動2像素，給上層文字增加圖層樣式，“斜面與浮雕”與“漸變與疊加效果”（選擇由藍色到白色的過渡）的樣式設置如圖，效果如右圖。

英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實37英語素材庫備課輔助系統(tǒng)---效果圖制作過程

第八章網站建設實例9.用文字供給增加“圖像資源”，字號12pixel，顏色為白色，設置外發(fā)光效果，同理“音頻資源”、“視頻資源”、“文字資源”、“查找資源”、“幫助信息”，效果可以直接復制，或直接將特效拖放到新的圖層上就可以了，效果如圖。

10.通過抓屏法到其他網頁中抓取一個含有“按鈕”和“文本框”的圖片，然后再添加“用戶名”和“密碼”字樣，本例的效果圖到此就制作完成了。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網站建設實38英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

1.打開ImageReadyCS軟件，打開”英語素材庫備課輔助平臺.psd”圖片，復制“圖像資源”層，設置外發(fā)光漸變?yōu)镕0880A過渡向透明，設置結束后隱藏該層，用切刀對該圖片進行切割，如圖。演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例39英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

2.當選中切片4（圖像資源）時，打開“Web內容”面板，在該切片上點擊右鍵，選擇“增加滾動狀態(tài)”選項（如左圖），之后會發(fā)現在該面板下多了一個新的狀態(tài)，“over”狀態(tài)，此時進入“圖層面板”，隱藏藍色的“圖像資源”層，顯示橙色的“圖像資源”層，最終的效果如右圖演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例40英語素材庫備課輔助系統(tǒng)---主頁的輸出

第八章網站建設實例

3.采用同樣的方式，將其他的幾個切片（音頻資源、視頻資源、文字資源、圖像資源、查找資源、幫助信息）都做成類似的效果。4.執(zhí)行“文件”→“將優(yōu)化結果存儲為”命令，對效果圖進行輸出保存，命名為“index.html”，導出完成后即可使用瀏覽器預覽效果。

演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網站建設實例41英語素材庫備課輔助系統(tǒng)---后期處理與網頁編輯第八章網站建設實例演示1.用DreamWeaver打開上圖后，插入表格為2行1列，寬度為100%，高度為100%，第1行高度為92%，水平對齊方式為：水平對齊，垂直對齊方式