資源描述：
《網(wǎng)頁制作與網(wǎng)站設(shè)計教程》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、第四周網(wǎng)頁制作與網(wǎng)站設(shè)計教程淮安信息職業(yè)技術(shù)學(xué)院計算機科學(xué)與工程系網(wǎng)頁制作與網(wǎng)站設(shè)計課程組制第八章網(wǎng)站建設(shè)實例英語素材庫備課輔助系統(tǒng)主頁建設(shè)實例——網(wǎng)頁制作與網(wǎng)站設(shè)計課程講義第八章網(wǎng)站建設(shè)實例本章要點網(wǎng)頁效果圖的制作流程教育類網(wǎng)站的開發(fā)思路Photoshop中路徑的使用方法Photoshop中層的樣式的使用方法效果圖切片的技巧網(wǎng)頁導(dǎo)出后的后期修飾英語素材庫備課輔助系統(tǒng)---項目背景第八章網(wǎng)站建設(shè)實例《現(xiàn)代遠程高等教育資源庫》項目是國家教育部新世紀網(wǎng)絡(luò)課程建設(shè)工程的一個主題項目，該項目的英語教學(xué)素材庫子模塊于2002年3月立項，目前已完成。在現(xiàn)有
2、的素材庫的基礎(chǔ)上，開發(fā)適合教師電子備課的支撐平臺，成為了進一步的重點開發(fā)目標。本系統(tǒng)是基于現(xiàn)有英語素材庫的網(wǎng)上電子備課平臺的一個界面。英語素材庫備課輔助系統(tǒng)---網(wǎng)站設(shè)計草圖第八章網(wǎng)站建設(shè)實例背景圖片系統(tǒng)名稱子模塊子模塊子模塊子模塊子模塊子模塊英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例過程演示1.打開Photoshop軟件，新建文件命名為“英語素材庫備課輔助平臺”，大小為：770像素*430像素，同時打開素材文件夾中的“樓.jpg”，將該圖片拖到當(dāng)前的圖中去并且放到適當(dāng)?shù)奈恢茫鐖D英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八
3、章網(wǎng)站建設(shè)實例2.用鋼筆工具沿著樓體的走勢繪制弧形路徑，如圖所示。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例3.新建圖層“弧形”，選取前景色為與樓體類似的藍色，回到路徑面板中點擊【描邊】按鈕，即可得到一條清晰而平滑的曲線，如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例4.雙擊“弧線”圖層，給弧線增加投影效果，最終效果如圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例5.打開素材文件夾中的“1.jpg”到“6.jpg”，將這些圖片拖到當(dāng)前的圖中去并且放到適當(dāng)?shù)奈恢茫鐖D。英語素材庫備課輔助系統(tǒng)
4、---效果圖制作過程第八章網(wǎng)站建設(shè)實例6.將以上六個小圖鏈接起來后，合并這些圖層，再給該層增加陰影效果，如圖所示。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例7.用文字工具添加“英語素材庫輔助備課平臺”文字，顏色設(shè)置為：F6530B，字體大小為24像素，效果如圖所示。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例8.用文字工具添加“E-Prepare”文字，顏色設(shè)置為：F6530B，字體大小為60像素，點擊編輯菜單后選擇“自由變換”工具將“E-Prepare”調(diào)整，效果如圖8-8所示。英語素材庫備課輔助系統(tǒng)---效
5、果圖制作過程第八章網(wǎng)站建設(shè)實例9.將“E-Prepare”文字復(fù)制一層，底層顏色設(shè)置為：897DA3，再通過向下和向右箭頭分別移動2像素，給上層文字增加圖層樣式，“斜面與浮雕”與“漸變與疊加效果”（選擇由藍色到白色的過渡）的樣式設(shè)置如圖，效果如右圖。英語素材庫備課輔助系統(tǒng)---效果圖制作過程第八章網(wǎng)站建設(shè)實例9.用文字供給增加“圖像資源”，字號12pixel，顏色為白色，設(shè)置外發(fā)光效果，同理“音頻資源”、“視頻資源”、“文字資源”、“查找資源”、“幫助信息”，效果可以直接復(fù)制，或直接將特效拖放到新的圖層上就可以了，效果如圖。10.通過抓屏法到其
6、他網(wǎng)頁中抓取一個含有“按鈕”和“文本框”的圖片，然后再添加“用戶名”和“密碼”字樣，本例的效果圖到此就制作完成了。英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網(wǎng)站建設(shè)實例1.打開ImageReadyCS軟件，打開”英語素材庫備課輔助平臺.psd”圖片，復(fù)制“圖像資源”層，設(shè)置外發(fā)光漸變?yōu)镕0880A過渡向透明，設(shè)置結(jié)束后隱藏該層，用切刀對該圖片進行切割，如圖。演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網(wǎng)站建設(shè)實例2.當(dāng)選中切片4（圖像資源）時，打開“Web內(nèi)容”面板，在該切片上點擊右鍵，選擇“增加滾動狀態(tài)”選項（如左圖），之后會發(fā)現(xiàn)在該面
7、板下多了一個新的狀態(tài)，“over”狀態(tài)，此時進入“圖層面板”，隱藏藍色的“圖像資源”層，顯示橙色的“圖像資源”層，最終的效果如右圖演示英語素材庫備課輔助系統(tǒng)---主頁的輸出第八章網(wǎng)站建設(shè)實例3.采用同樣的方式，將其他的幾個切片（音頻資源、視頻資源、文字資源、圖像資源、查找資源、幫助信息）都做成類似的效果。4.執(zhí)行“文件”→“將優(yōu)化結(jié)果存儲為”命令，對效果圖進行輸出保存，命名為“index.html”，導(dǎo)出完成后即可使用瀏覽器預(yù)覽效果。演示英語素材庫備課輔助系統(tǒng)---后期處理與網(wǎng)頁編輯第八章網(wǎng)站建設(shè)實例演示1.用DreamWeaver打開上圖后，
8、插入表格為2行1列，寬度為100%，高度為100%，第1行高度為92%，水平對齊方式為：水平對齊，垂直對齊方式為：中間對齊，第2行高為8%，將輸出的網(wǎng)
