1、吉林工業(yè)職業(yè)技術(shù)學(xué)院（網(wǎng)頁(yè)制作與美工實(shí)訓(xùn)報(bào)告）（ 2010 2011學(xué)年第2學(xué)期 ）實(shí)訓(xùn)地點(diǎn)：數(shù)據(jù)庫(kù)應(yīng)用實(shí)訓(xùn)室 實(shí)訓(xùn)班級(jí)：軟件3101 指導(dǎo)教師：趙秀艷、李旭 學(xué)號(hào)姓名： 吉林工業(yè)職業(yè)技術(shù)學(xué)院2010年7月2日目 錄實(shí)習(xí)題目1實(shí)習(xí)地點(diǎn)1實(shí)習(xí)目的1實(shí)習(xí)要求1實(shí)習(xí)內(nèi)容2一、網(wǎng)站策劃2二、網(wǎng)站設(shè)計(jì)31網(wǎng)站首頁(yè)的設(shè)計(jì)與制作32網(wǎng)站基本建立43網(wǎng)站的設(shè)計(jì)74子界面的建立10實(shí)習(xí)心得16參考文獻(xiàn)18網(wǎng)頁(yè)制作與美工實(shí)訓(xùn)實(shí)習(xí)題目暢想個(gè)人網(wǎng)站實(shí)習(xí)地點(diǎn)數(shù)據(jù)庫(kù)應(yīng)用實(shí)訓(xùn)室實(shí)習(xí)目的（1）學(xué)習(xí)如何確定網(wǎng)頁(yè)的整體風(fēng)格、網(wǎng)頁(yè)彩色的搭配以及設(shè)計(jì)草圖。（2）能夠熟練的運(yùn)用Dreamweaver8這個(gè)可視化的網(wǎng)頁(yè)制作、網(wǎng)站開(kāi)發(fā)的強(qiáng)

2、大的軟件。（3）能夠通過(guò)使用表格，使用文本，使用模板、庫(kù)及框架，使用CSS樣式，使用行為和層，使用表單來(lái)制作網(wǎng)頁(yè)。（4）通過(guò)插入圖像、歌曲、視頻、Flash等增強(qiáng)網(wǎng)頁(yè)的效果。（5）熟練運(yùn)用Photoshop處理圖像，運(yùn)用網(wǎng)頁(yè)特效精靈添加網(wǎng)頁(yè)特效。（6）通過(guò)實(shí)訓(xùn)可以達(dá)到全面理解、運(yùn)用網(wǎng)頁(yè)制作的知識(shí)，并使之得以融會(huì)貫通，在掌握理論的基礎(chǔ)上加以實(shí)踐，進(jìn)一步提高、加強(qiáng)學(xué)生的綜合能力。實(shí)習(xí)要求通過(guò)本次實(shí)訓(xùn)，能夠綜合運(yùn)用所學(xué)的Dreamweaver知識(shí)設(shè)計(jì)各種網(wǎng)頁(yè)：1動(dòng)手制作網(wǎng)頁(yè)之前，必須認(rèn)真做好網(wǎng)站的需求分析，策劃好網(wǎng)站的主題，規(guī)劃好網(wǎng)站的風(fēng)格和結(jié)構(gòu)，創(chuàng)建完善的目錄結(jié)構(gòu)。2制作網(wǎng)頁(yè)前，收集好所需的文字資

3、料、圖像資料、Flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效。3所創(chuàng)建的網(wǎng)站至少包括10個(gè)頁(yè)面，分為三層，第一層為首頁(yè)，第二層至少為5個(gè)二級(jí)子頁(yè)，第三層至少為5個(gè)內(nèi)容頁(yè)。（1）首頁(yè)建議采用表格進(jìn)行布局，必須包含導(dǎo)航欄；（2）5個(gè)二級(jí)子頁(yè)分別為框架網(wǎng)頁(yè)、表單網(wǎng)頁(yè)、利用模板制作的網(wǎng)頁(yè)、利用布局表格制作的網(wǎng)頁(yè)；（3）5個(gè)內(nèi)容頁(yè)分別為層布局的網(wǎng)頁(yè)、應(yīng)用JavaScript制作特效的網(wǎng)頁(yè)、應(yīng)用行為制作特效的網(wǎng)頁(yè)。（4）各個(gè)頁(yè)面根據(jù)需要插入合適的圖像和Falsh動(dòng)畫(huà)，首頁(yè)要求插入背景音樂(lè)。（5）所有頁(yè)面要求內(nèi)容充實(shí)、布局合理、顏色搭配協(xié)調(diào)、美觀大方。（6）各個(gè)頁(yè)面之間導(dǎo)航清晰、鏈接準(zhǔn)確無(wú)誤。4網(wǎng)頁(yè)的版面尺寸應(yīng)用符合網(wǎng)頁(yè)設(shè)計(jì)的規(guī)

4、范，網(wǎng)站中所有文件、文件夾的命名應(yīng)規(guī)范，盡量做到字母數(shù)量少，見(jiàn)名知意、容易理解。5在設(shè)計(jì)過(guò)程中，要嚴(yán)格要求自己，樹(shù)立嚴(yán)密、嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，必須按時(shí)、保質(zhì)、保量完成實(shí)訓(xùn)任務(wù)。要求獨(dú)立完成規(guī)定的實(shí)訓(xùn)內(nèi)容，不得弄虛作假，不準(zhǔn)抄襲或拷貝他人的網(wǎng)頁(yè)或其他內(nèi)容。6小組成員之間，既要分工明確，又要密切合作，培養(yǎng)良好的互助、協(xié)作精神。7實(shí)訓(xùn)環(huán)境為Windows XP或2000及以上版本的操作系統(tǒng)，網(wǎng)頁(yè)制作軟件為Dreamweaver8根據(jù)需要可以運(yùn)用Photoshop8處理圖像，運(yùn)用Swishmax8制作動(dòng)畫(huà)。實(shí)習(xí)內(nèi)容一、網(wǎng)站策劃（1）功能簡(jiǎn)介1. 我組網(wǎng)站建設(shè)以個(gè)人為主，主要介紹關(guān)于個(gè)人簡(jiǎn)歷，與簡(jiǎn)單的個(gè)人作

5、品收藏等，通過(guò)本網(wǎng)站的建設(shè)，讓同學(xué)更進(jìn)一步的了解有關(guān)做網(wǎng)頁(yè)的一些方面的知識(shí)，我們小組是以三人為單位的，分工明確，每個(gè)人都安排了任務(wù)并且我們小組分頭收集了背景音樂(lè)、圖片、文章等所需的網(wǎng)頁(yè)元素資料。2. 首頁(yè)主要利用一些圖片、Flash、音樂(lè)等介紹我們個(gè)人等導(dǎo)航內(nèi)容。并且每個(gè)導(dǎo)航內(nèi)容也鏈接著多個(gè)具體的網(wǎng)頁(yè)內(nèi)容。3.我們的網(wǎng)站內(nèi)容詳細(xì)、形式新穎、希望光臨本網(wǎng)站的人都能有所收獲。4.我們小組的網(wǎng)站建設(shè)，主要運(yùn)用了表格的應(yīng)用、超連接的應(yīng)用、CSS樣式、等知識(shí)。（2）網(wǎng)站結(jié)構(gòu)圖如圖1所示：網(wǎng)站首頁(yè)首頁(yè)個(gè)人首頁(yè)我的作品給我寫(xiě)信張明星首頁(yè)高陽(yáng)首頁(yè)郝婷婷首頁(yè)Flash1 Flash2我的收藏圖1 網(wǎng)站結(jié)構(gòu)圖二、

6、網(wǎng)站設(shè)計(jì)我們小組三個(gè)人，我主要負(fù)責(zé)的是網(wǎng)站首頁(yè)、個(gè)人首頁(yè)三個(gè)子頁(yè)面、我的作品中兩個(gè)子界面這三個(gè)網(wǎng)頁(yè)模塊的制作與設(shè)計(jì)。1網(wǎng)站首頁(yè)的設(shè)計(jì)與制作（1）表格布局我在做主頁(yè)時(shí)主要有到的是表格布局，總體框架結(jié)構(gòu)插入了一個(gè)7行3列的表格。（2）插入滾動(dòng)字幕主要利用一些代碼使?jié)L動(dòng)字幕運(yùn)行。（3）按鈕的制作 主要做了首頁(yè)按鈕、個(gè)人首頁(yè)按鈕、我的作品按鈕、給我寫(xiě)信按鈕這四個(gè)按鈕。（4）閃爍字的制作主要用Flash插入新元件、關(guān)鍵幀等知識(shí)制作的“相信我們是最棒的”閃爍字。（5）插入音頻主要通過(guò)插件插入音頻，我插入的是“Nobody”音頻，體現(xiàn)出我們小組個(gè)人的愛(ài)好與性格。2網(wǎng)站基本建立（1）首先打開(kāi)Dreamweav

7、er運(yùn)行界面如圖2所示：圖2 運(yùn)行界面（2）其次建立站點(diǎn)，運(yùn)行界面如圖3所示：圖3 站點(diǎn)運(yùn)行界面（3）建立站點(diǎn)操作界面如圖4所示： 圖4 正在建立站點(diǎn)的操作界面（4）建立站點(diǎn)的操作界面如圖5所示：圖5 建立站點(diǎn)的操作界面（5）建立站點(diǎn)的操作界面如圖6所示：圖6 建立站點(diǎn)的操作界面（6）完成建立站點(diǎn)的界面如圖7所示：圖7 完成建立站點(diǎn)的操作界面3網(wǎng)站的設(shè)計(jì)（1）插入表格如圖8所示：圖8 建立表格界面（2）首頁(yè)具體頁(yè)面設(shè)計(jì)，單擊右側(cè)“滾動(dòng)字幕”中的任意一個(gè)或單擊導(dǎo)航欄中的“按鈕”就可以進(jìn)入到相應(yīng)的界面如圖9所示：圖9 首頁(yè)界面（3）按鈕的制作圖如圖10所示：圖10 按鈕界面（4）插入滾動(dòng)字幕如圖1

8、1所示：圖11 滾動(dòng)字幕程序（5）插入水平線如圖12所示：圖12 插入水平線（6）插入背景音樂(lè)如圖13所示：圖13 背景音樂(lè)的代碼（7）單擊“給我寫(xiě)信”按鈕會(huì)彈出一個(gè)Internet連接向?qū)鐖D14所示：圖14 Internet連接向?qū)Ы缑妫?）單擊“給我寫(xiě)信”按鈕會(huì)彈出一個(gè)Internet連接向?qū)Ы又鴷?huì)彈出連接郵箱的新郵件界面如圖15所示：圖15 新郵件界面4子界面的建立（1）制作個(gè)人首頁(yè)運(yùn)行界面（單擊左上角“返回主頁(yè)”按鈕會(huì)直接彈出首頁(yè)界面）如圖16所示：圖16 個(gè)人首頁(yè)運(yùn)行界面（2）單擊右下角“繼續(xù)”按鈕會(huì)直接彈出下一個(gè)個(gè)人首頁(yè)界面如圖17所示：圖17 個(gè)人首頁(yè)運(yùn)行界面（3）我的個(gè)人簡(jiǎn)介

9、界面如圖18所示：圖18 個(gè)人簡(jiǎn)介界面（4）制作個(gè)人首頁(yè)運(yùn)行界面（單擊左上角“返回主頁(yè)”按鈕會(huì)直接彈出首頁(yè)界面）如圖19所示：圖19 個(gè)人首頁(yè)運(yùn)行界面（5）制作個(gè)人首頁(yè)運(yùn)行界面（單擊左上角“返回主頁(yè)”按鈕會(huì)直接彈出首頁(yè)界面）如圖20所示：圖20 個(gè)人首頁(yè)運(yùn)行界面（6）運(yùn)用CSS樣式運(yùn)行界面如圖21所示：圖21 添加外部CSS樣式表界面（7） 單擊首頁(yè)導(dǎo)航欄“我的作品”按鈕或滾動(dòng)字幕中“我的作品”會(huì)彈出我的作品運(yùn)行界面如圖22所示：圖22 我的作品運(yùn)行界面（8）單擊首頁(yè)導(dǎo)航欄“我的作品”按鈕或滾動(dòng)字幕中“我的作品”會(huì)彈出我的作品運(yùn)行界面，然后單擊“Flash一”按鈕，即彈出我的作品中Flash一運(yùn)行界面如圖23所示：圖23 Flash一界面（9）單擊首頁(yè)導(dǎo)航欄“我的作品”按鈕或滾動(dòng)字幕中“我的作品”會(huì)彈出我的作品運(yùn)行界面，然后單擊“Flash二”按鈕，即彈出我的作品中Flash二運(yùn)行界面如圖24所示：圖24 Flash二界面（10）單擊首頁(yè)滾動(dòng)字幕中“我的收藏”會(huì)彈出我的收藏運(yùn)行界面如圖25所示：圖25 我的收藏界面（11）單擊首頁(yè)滾動(dòng)字幕中“我的收藏”會(huì)彈出我的收藏，單擊相應(yīng)的按鈕會(huì)彈出相應(yīng)的界面，如：?jiǎn)螕簟疤?yáng)鏡”按鈕會(huì)彈出太陽(yáng)鏡運(yùn)行界面（單擊右上角的滾動(dòng)圖片會(huì)彈出下一個(gè)界面）如圖26所示：圖26 太陽(yáng)鏡界面實(shí)習(xí)心得省略參考文獻(xiàn)1) 舒震庚. 網(wǎng)頁(yè)設(shè)計(jì)精粹150例. 冶