網(wǎng)頁設(shè)計實驗報告w.doc

中南民族大學(xué) 管理學(xué)院 學(xué)生實驗報告中南民族大學(xué)管理學(xué)院學(xué)生實驗報告課程名稱：網(wǎng)頁設(shè)計與制作姓 名：星存田學(xué) 號：10058048年 級：2010級專 業(yè)：電子商務(wù)指導(dǎo)教師：羅惠平實驗地點：管理學(xué)院綜合實驗室2011至2012學(xué)年度第2學(xué)期2目 錄實驗一HTML網(wǎng)頁制作實驗二FrontPage 2003 網(wǎng)頁制作實驗三Dreamweaver 8 網(wǎng)頁制作實驗四Photoshop CS2網(wǎng)頁制作實驗五Fireworks 8 網(wǎng)頁制作實驗六Flash網(wǎng)頁制作實驗一 HTML網(wǎng)頁制作實驗屬性驗證型實驗時間2012-3-29實驗?zāi)康膶W(xué)習(xí)如何編寫HTML文檔，并學(xué)會HTML的一些基本標(biāo)記，如標(biāo)題、背景圖片、圖像。水平線、文字編輯、段落、超鏈接、文本堆砌的使用方法。學(xué)習(xí)HTML表單標(biāo)記的應(yīng)用、框架標(biāo)記，書簽鏈接標(biāo)記等等。實驗內(nèi)容1. 鳥語花香網(wǎng)頁2. 課表制作3. 表單的制作4. 框架的應(yīng)用5. 書簽的應(yīng)用6. 網(wǎng)頁定時跳轉(zhuǎn)7. 下載提示，彈出窗口實驗步驟實驗結(jié)果分析 這次的網(wǎng)頁制作使我學(xué)會了很多，有關(guān)怎么收集資料，怎樣用最快的方法收集資料，怎樣收集有效的資料，怎樣整理資料，怎樣使自己的下載的資料便于查找，也學(xué)會了網(wǎng)頁的制作，學(xué)會了寫HTML文檔，并學(xué)會HTML的一些基本標(biāo)記，如標(biāo)題、背景圖片、圖像。水平線、文字編輯、段落、超鏈接、文本堆砌的使用方法。學(xué)習(xí)HTML表單標(biāo)記的應(yīng)用、框架標(biāo)記，書簽鏈接標(biāo)記指導(dǎo)教師批閱（1）實驗態(tài)度：不認(rèn)真（），較認(rèn)真（），認(rèn)真（）（2）實驗?zāi)康模翰幻鞔_（），較明確（），明確（）（3）實驗內(nèi)容：不完整（），較完整（），完整（）（4）實驗步驟：混亂（），較清晰（），清晰（）（5）實驗結(jié)果：錯誤（），基本正確（），正確（）（6）實驗結(jié)果分析：無（），不充分（），較充分（），充分（）（7）其它補充：總評成績：評閱教師（簽字）：實驗二FrontPage 2003 網(wǎng)頁制作實驗屬性驗證型實驗時間2012-4-12實驗?zāi)康恼莆說rontpage 2003新增加的網(wǎng)頁布局的功能，了解frontpage 2003中的表單元素的應(yīng)用了解利用框架設(shè)計網(wǎng)頁的基本操作，學(xué)習(xí)層在frontpage 2003的應(yīng)用，制作網(wǎng)頁動態(tài)效果，動畫效果制作等等。實驗內(nèi)容1. 表格布局頁面2. 建立表單3. 利用框架設(shè)計網(wǎng)頁4. 層與行為的綜合應(yīng)用5. 制作文字的動態(tài)效果6. 制作網(wǎng)頁動畫7. 制作網(wǎng)頁過渡效果實驗步驟實驗結(jié)果分析 在設(shè)計框架時經(jīng)常需要調(diào)整某一行或列的屬性，這時可以通過表格中列寬和行高的標(biāo)簽來完成。在操作窗口中單擊布局表格需要調(diào)整的邊框，每一側(cè)都會出現(xiàn)顯示列寬和行高的標(biāo)簽。每個標(biāo)簽都包括一個下拉箭頭，如更改行高度時，單擊此下拉箭頭彈出一個下拉菜單，選擇“更改行高”命令，在彈出的“行屬性”對話框中重新輸入該行高度值即可。FrontPage2003還提供了一個表格自動功能，它可以按照比例自動伸縮，調(diào)整表格的寬度和高度，使用時在邊距標(biāo)簽下拉菜單中選擇“自動伸縮”命令即可快速地對表格的尺寸進行調(diào)整，非常方便。指導(dǎo)教師批閱（1）實驗態(tài)度：不認(rèn)真（），較認(rèn)真（），認(rèn)真（）（2）實驗?zāi)康模翰幻鞔_（），較明確（），明確（）（3）實驗內(nèi)容：不完整（），較完整（），完整（）（4）實驗步驟：混亂（），較清晰（），清晰（）（5）實驗結(jié)果：錯誤（），基本正確（），正確（）（6）實驗結(jié)果分析：無（），不充分（），較充分（），充分（）（7）其它補充：總評成績：評閱教師（簽字）：實驗三Dreamweaver 8 網(wǎng)頁制作實驗屬性驗證型實驗時間2012-4-26實驗?zāi)康牧私獠⒄莆誅reamweaver 8的個個功能，比如表單，框架結(jié)構(gòu)，時間軸在網(wǎng)頁制作室的應(yīng)用，層在網(wǎng)頁圖片上的應(yīng)用，彈出式菜單在網(wǎng)頁中的應(yīng)用功能，用圖片查看器制作簡單的flash相冊，用表格布局頁面，最后建立一個簡單的網(wǎng)站。實驗內(nèi)容1 表單的制作2 制作框架頁面3 時間軸的應(yīng)用4 層的應(yīng)用5 制作彈出式菜單6 制作Flash相冊7 用表格布局頁面8 制作個人網(wǎng)站實驗步驟實驗結(jié)果分析 跟學(xué)習(xí)別的東西一樣，學(xué)習(xí)網(wǎng)頁設(shè)計也需要興趣，所謂的興趣也不是三分鐘熱度，是一種執(zhí)著。學(xué)習(xí)網(wǎng)頁設(shè)計需要耐心，如果你沒有耐心，你學(xué)不好網(wǎng)頁設(shè)計，應(yīng)為當(dāng)你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了半個月時間才解決。學(xué)習(xí)網(wǎng)頁設(shè)計需要堅持，堅持不斷的學(xué)習(xí)，因為設(shè)計網(wǎng)頁的軟件在不斷的更新，你不斷的學(xué)習(xí)不要掉入技術(shù)的陷阱，你的網(wǎng)頁設(shè)計技術(shù)一流，你對軟件的掌握程度已經(jīng)達到一定水平，但是你設(shè)計的網(wǎng)頁確不堪目睹，這是因為網(wǎng)頁設(shè)計是是介于平面設(shè)計和編程技術(shù)兩者之間的邊緣科學(xué).不僅涉及到美學(xué),心理學(xué),平面構(gòu)成,色彩搭配等平面設(shè)計的方面的知識,還涉及到html,javascript,css,asp,php等編程語言技術(shù)方面的知識.只有綜合運用多種知識,才能設(shè)計出視聽特效,動感十足,富于個性的web頁面,才能全面展現(xiàn)互聯(lián)網(wǎng)這一新型媒體的獨特魅力和多維空間的超強功能.注重實用，個人認(rèn)為網(wǎng)頁設(shè)計應(yīng)該注重實用性，因為它是讓人瀏覽的，是用戶可以撫摸，可以評論，可以交互的。我提倡簡單的美。指導(dǎo)教師批閱（1）實驗態(tài)度：不認(rèn)真（），較認(rèn)真（），認(rèn)真（）（2）實驗?zāi)康模翰幻鞔_（），較明確（），明確（）（3）實驗內(nèi)容：不完整（），較完整（），完整（）（4）實驗步驟：混亂（），較清晰（），清晰（）（5）實驗結(jié)果：錯誤（），基本正確（），正確（）（6）實驗結(jié)果分析：無（），不充分（），較充分（），充分（）（7）其它補充：總評成績：評閱教師（簽字）：實驗四Photoshop CS2網(wǎng)頁制作實驗屬性驗證型實驗時間2012-5-10實驗?zāi)康恼莆誔hotoshop CS2的文字的處理的基本功能，利用Photoshop CS2制作具體的金屬效果，倒影的效果，利用Photoshop CS2快速蒙版功能制作一個藝術(shù)邊框，用Photoshop CS2對圖片進行摳圖操作等等。實驗內(nèi)容1 制作光暈空心字效果實驗步驟2 制作金屬效果按鈕3 制作風(fēng)景倒影效果4 制作一個圖片藝術(shù)邊框5 利用濾鏡抽出功能摳圖 6 利用通道進行摳圖7 制作一個精美的吊牌8 制一長結(jié)婚請柬實驗步驟實驗結(jié)果分析通過這次網(wǎng)頁設(shè)計與制作綜合型實驗后，使得我不僅對dreamweaver8的網(wǎng)站頁面布局工具層、框架、標(biāo)簽、表格、css樣式表、表單、flash元素、等站點建設(shè)的整個流程有了更完善的了解與認(rèn)識，并且能夠熟練掌握應(yīng)運，且在html編寫、javascript腳本改寫以及素材搜集等方面有了深刻認(rèn)識和更高層次的掌握。熟悉了設(shè)置css樣式、運用行為、時間軸來美化網(wǎng)頁，并運用更多的軟件如flash、photoshop軟件與dreamweaver共同來完善網(wǎng)站。明確了網(wǎng)站的制作流程：首先要構(gòu)思出一個清晰的思路，要注意顏色的搭配，不能色彩太顯眼，讓人感覺到視覺疲勞，注意整個網(wǎng)頁的布局，以及給人一種舒服的視覺感受。此外，還對dreamver軟件中各個菜單及相關(guān)屬性設(shè)置及具體應(yīng)用更加熟悉。最主要的是對網(wǎng)站建設(shè)流程有了整體的概念和清晰的認(rèn)識。真正讓我體會到了dreamweaver強大的設(shè)計和管理功能。從中我體會出網(wǎng)站的設(shè)計制作不僅要求我們對所學(xué)的專業(yè)知識有個較全面的了解，而且要全面地學(xué)習(xí)網(wǎng)站設(shè)計制作所需要的軟件（比如“網(wǎng)頁三劍客”）知識。在剛開始的時候覺得無從下手，心里有點茫然，只有抓緊時間緊跟老師學(xué)習(xí)dreamweaver軟件知識。后來才發(fā)現(xiàn)在一段時間內(nèi)想把這方面的知識學(xué)得很精，并不是一件很容易的事情。通過老師的耐心教授以及視頻教程和同學(xué)間的幫助，我克服了諸多困難，學(xué)到許多網(wǎng)頁設(shè)計制作知識。為以后的學(xué)習(xí)打下深深地基礎(chǔ)。同時我也得出了一點道理：一、無論做什么事情都要有一種執(zhí)著的精神。否則就會半途而廢； 二、做什么事情也不能急于求成，否則則欲速則不達！三、在做一件事情以前必須有詳實可行的計劃，否則就會出現(xiàn)不知做什么的現(xiàn)象和后來的手忙腳亂的現(xiàn)象。指導(dǎo)教師批閱（1）實驗態(tài)度：不認(rèn)真（），較認(rèn)真（），認(rèn)真（）（2）實驗?zāi)康模翰幻鞔_（），較明確（），明確（）（3）實驗內(nèi)容：不完整（），較完整（），完整（）（4）實驗步驟：混亂（），較清晰（），清晰（）（5）實驗結(jié)果：錯誤（），基本正確（），正確（）（6）實驗結(jié)果分析：無（），不充分（），較充分（），充分（）（7）其它補充：總評成績：評閱教師（簽字）：實驗五Fireworks 8 網(wǎng)頁制作實驗屬性驗證型實驗時間2012-5-24實驗?zāi)康恼莆誇ireworks 8圖像和網(wǎng)頁制作的功能，簡單的logo和按鈕的制作，彈出菜單的制作，通過馬賽克文字效果掌握一些圖像處理的技巧，掌握一般替代動畫的制作方法和淡入淡出的動畫的制作方法，最后掌握幀在動畫中的應(yīng)用。實驗內(nèi)容1. 簡單LOGO制作方法一2. 制作按鈕3. 制作彈出菜單4. 制作馬賽克文字效果5. 制作替換動畫6. 制作淡入淡出動畫7. 制作多幀動畫實驗步驟實驗結(jié)果分析 應(yīng)從使用者的視覺感觀、操作效果、思維過程等方面尋找答案,比如用紅色作為企業(yè)級應(yīng)用的主體色,就要很慎重了,因為紅色是代表著激情、熱烈與企業(yè)級應(yīng)用的要求差距較大,這樣就影響視覺效果;比如需要進行層次較多的選擇時,以前會先用一個列表選擇進去,再選擇其相應(yīng)的子選項進行查詢、添加等操作,這樣操作效果就很差很羅嗦,對于這樣情況采用旁邊放顆樹進行選擇,不失為一個好的表現(xiàn)形式;比如要實現(xiàn)一些審核性、流程性、過程性的業(yè)務(wù),可以考慮采用流程圖的形式,這樣非常直觀明了而且易操作;比如要常實現(xiàn)的添加、刪除、修改、查詢等操作時,如何在頁面上組織它們才能使用戶使用方便,這時就要考慮用戶通常的思維過程是如何的,據(jù)此實現(xiàn),用戶使用起來就會方便舒心. 指導(dǎo)教師批閱（1）實驗態(tài)度：不認(rèn)真（），較認(rèn)真（），認(rèn)真（）（2）實驗?zāi)康模翰幻鞔_（），較明確（），明確（）（3）實驗內(nèi)容：不完整（），較完整（），完整（）（4）實驗步驟：混亂（），較清晰（），清晰（）（5）實驗結(jié)果：錯誤（），基本正確（），正確（）（6）實驗結(jié)果分析：無（），不充分（），較充分（），充分（）（7）其它補充：總評成績：評閱教師（簽字）：實驗六Flash 8網(wǎng)頁制作實驗屬性驗證型 實驗時間2012-6-7實驗?zāi)康恼莆誇lash層的應(yīng)用，動畫中使用按鈕，菜單和窗口等控件。用Flash 8制作閃爍的文字效果，應(yīng)用Flash制作簡單的廣告，應(yīng)用Flash制作下雨的效果，制作電子日歷的效果.實驗內(nèi)容1 圖層的妙用2 制作按鈕3 制作菜單4 制作文字閃爍效果5 制作簡單賀卡6 制作簡單廣告7 ActionScript動畫8 制作電子日歷效果實驗步驟實驗結(jié)果分析Flash 8功能小到用戶不會察覺其中豐富的變化，甚至可能有人認(rèn)為筆者用上千字來闡述拖放是小題大做。但設(shè)計師卻不能看不到這個小功能背后隱藏著用戶長久的使用習(xí)慣和需求。作為設(shè)計師而言，我們可能需要思考：如何提煉用戶的需求和使