網(wǎng)頁分析報告-2

高校藝術網(wǎng)頁設計分析姓名班級學號：學院：國際教育學院

一、網(wǎng)站設計1.1、網(wǎng)站設計的意義網(wǎng)頁設計與制作綜合實訓是教學過程中重要的實踐性教學環(huán)節(jié)。它是根據(jù)專業(yè)教學計劃的要求，在教師指導下對學生進行的網(wǎng)頁制作專業(yè)技能的訓練，培養(yǎng)學生綜合運用理論知識分析和解決實際問題的能力，實現(xiàn)由理論知識向操作技能的轉化，是對理論與實踐教學效果的檢驗，也是對學生綜合分析能力與獨立工作能力的培養(yǎng)過程因此，加強實踐教學環(huán)節(jié)，搞好實訓教學，對實現(xiàn)本專業(yè)的培養(yǎng)目標，提高學生的綜合素有著重要的作用。、網(wǎng)站設計的目的1通過綜合實訓進一步鞏固，深化和加強學生的理論知識與專業(yè)技能（1）、進一步熟悉和掌握網(wǎng)站建設的基本流程和技術規(guī)范；（2）、鞏固運用Dreamweaver網(wǎng)頁制作軟件制作靜態(tài)網(wǎng)頁的知識；（3）、鞏固綜合運用Dreamweaver獨立設計一個內容完整、圖文并茂、技術運用得當?shù)木W(wǎng)站；（4）、具備獨立撰寫實訓報告的基本能力；（5）、在網(wǎng)頁設計的實踐中培養(yǎng)分析問題、解決問題的能力，培養(yǎng)創(chuàng)新能力和團隊意識；（6）、培養(yǎng)學生理論聯(lián)系實際的工作作風、嚴肅認真的科學態(tài)度以及獨立工作的能力，樹立自信心；（7）、為今后從事網(wǎng)站開發(fā)、維護和管理奠定基礎。、網(wǎng)站設計的任務1、站點規(guī)劃，搜集資料。確定網(wǎng)站主題內容，規(guī)劃站點結構，從網(wǎng)上搜索相關資料圖片、文字等）。2進行主頁設計。構思主頁布局，進行主頁標題圖片的設計（要求原創(chuàng)），進行主頁其余圖片的設計和頁面內容的錄入，最后進行主頁的整體優(yōu)化設計。3、動畫設計。主頁動畫設計和其余頁面動畫設計，充分運用所掌握技術，效果好。4、綜合優(yōu)化。鏈接正確、得當，動態(tài)效果好（時間軸動畫、行為、代碼的嵌入等）。5、網(wǎng)站測試并遞交。在瀏覽器中對完成的網(wǎng)站逐頁打開測試，包括鏈接正確與否，頁面打開時間，圖片和動畫是否丟失等。、網(wǎng)站設計的要求1、站點結構與命名（1）創(chuàng)建站點的名字統(tǒng)一使用學號后兩位+姓名的第一個字母。要將站點目錄明確分層，不能將內容都放在根目錄下；不要使用中文目錄；為每種類型文件都建立一個獨立的目錄。（例如images文件夾，可以再建子目錄，但必須盡量少，以便于管理。）如圖：（2）主頁上最少有5個指向其它頁面的電子鏈接（3）網(wǎng)頁數(shù)為10頁以上，每一個網(wǎng)頁的標題（title）必須包含本人的學號后兩位和姓名（4）網(wǎng)頁（任意一個頁面均可）中必須包含以下內容：使用flash動畫（可用已有的素材）鼠標經(jīng)過圖像下拉菜單或彈出菜單錨鏈接和圖片熱點鏈接使用CSS樣式二、網(wǎng)站主題本網(wǎng)站以個人現(xiàn)在的大概情況介紹為主題，闡述喜好，表現(xiàn)本人的性格特點。三、網(wǎng)站頁面鏈接總圖四、綜合知識的運用情況4.1、表格與層的使用（1）、表格的使用設計網(wǎng)頁時，插入表格的目的一般是為了能在網(wǎng)頁中控制文字、圖片在網(wǎng)頁中的位置。利用表格可以實現(xiàn)不同的布局模式，而且可以保證當瀏覽器改變頁面字體大小時保持頁面布局不變，這是很重要的，因為網(wǎng)頁設計者總是希望自己的作品能夠真實地展現(xiàn)在瀏覽者面前，而利用表格可以確保這種效果。（2）、層的使用在這次網(wǎng)頁設計過程中，使用了大量層，因為它靈活好用，可以隨便拖動，變大變小都很方便。圖層最大的特點是可以重疊，并且可以設置每個圖層是否可見，同時也能自定義各圖層之間的關系。4.2、運用Photoshop工具圖片的插入和設置背景圖像是兩個不同的概念，當然可以達到相同的效果，這是很基本的知識運用，也用了很多次，但是當圖像較小時在層中插入更方便些，因為作為背景時圖片會重復出現(xiàn)造成混亂的局面，但圖片過小時，用層將之拉寬大就會使圖片變模糊、嚴重變形，不但沒能美化頁面反而帶來了負面影響，此時最好借助Photoshop工具來編輯圖片。文本的插入在層內或框架內完成較好，但不能設置為藝術字體，因此需要運用Photoshop工具來輔助完成，其實很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)自己獨特的思想和設計畫面。4.3、CSS樣式在我們?yōu)g覽網(wǎng)頁時，經(jīng)常看到網(wǎng)頁的導航條是由文字制作的。這是因為文字與圖像相比，文字的下載速度更快一些。但加上連接的文字可能會改變它的顏色和樣式，和網(wǎng)頁整體不協(xié)調，所以這次網(wǎng)頁設計中利用了ＣＳＳ樣式來定義文字的統(tǒng)一樣式，并與網(wǎng)頁融為一體，讓網(wǎng)頁看以來更統(tǒng)一。4.4、熱點鏈接、錨點鏈接（1）、熱點鏈接在打開帶有圖片的網(wǎng)頁時，有時看到這樣的情況：當鼠標指向圖片的不同部位是，可以打開不同的超級鏈接，這種技術我們稱之為網(wǎng)頁圖片熱點鏈接。熱點鏈接經(jīng)常出現(xiàn)在一個網(wǎng)站的導航頁里，熱點鏈接不僅可以將整張圖片作為鏈接的連載體，還可以將圖片的某一部分設為鏈接，這要通過設置影像地圖來實現(xiàn)。熱點鏈接的原理就是利用HTML語言在圖片上定義形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域被稱做熱點。而在本次設計中，通過利用Dreamweaver中的熱區(qū)制作技術，實現(xiàn)創(chuàng)建熱點鏈接的效果。（2）、錨點鏈接在網(wǎng)頁（Untitled-6.html）我的作品中引用了錨點鏈接，創(chuàng)建命名錨點（間稱錨點）就是在文檔中位置標記，并給該位置設置一個名稱，以便引用。通過創(chuàng)建錨點，可以使鏈接指向當前文檔或者不同文檔中的指定位置。錨點常常被用來實現(xiàn)到特定的主題或者文檔頂部的跳轉鏈接，使訪問者能夠快速瀏覽到選定的位置，加快信息檢索速度。創(chuàng)建錨點鏈接，首先要設置一個命名錨點，然后建立到命名錨點的鏈接。4.5、鼠標經(jīng)過圖像鼠標經(jīng)過圖像是指當鼠標指針經(jīng)過一幅圖像時，圖像的顯示會變?yōu)榱硪环鶊D像。鼠標經(jīng)過圖像實際上是由兩幅圖像組成，初始圖像(頁面首次裝載時顯示的圖像)和替換圖像(當鼠標指針經(jīng)過時顯示的圖像)。用于鼠標經(jīng)過圖像的兩幅圖像大小必須相同。如果圖像的大小不同，Dreamweaver會自動調整第二幅圖像的大小，使之與第一幅圖像匹配。在這次設計的過程中也引用到了鼠標經(jīng)過圖像。4.6、彈出信息行為是Dreamweaver中最具特色的功能，它能夠讓大家不用編程就實現(xiàn)期望的動作行為。彈出行為是它的功能之一。彈出信息是網(wǎng)頁提示語，當打開本網(wǎng)站，彈出一個“歡迎來到我的個人網(wǎng)站?。?！”而提示框，會給人一種很親切的感覺。4.7、框架的使用在網(wǎng)頁設計中，框架可以將窗口分割成幾個不同的小窗口，各個窗口包含不同的網(wǎng)頁，并且在替換窗口中的網(wǎng)頁文件時不會影響到其他窗口中的網(wǎng)頁。框架最普通的用處就是將頁面劃分成為一個導航區(qū)和一個內容區(qū)?？蚣芗且粋€使用框架定義網(wǎng)頁的文件。框架集中保存了關于頁面中的框架尺寸、位置以及每個框架中作為內容載入的所有文件名得信息。用框架制成的網(wǎng)頁，如UntitledFrameset-9.html所示。4.8、文字移動效果在設計網(wǎng)頁中插入代碼<marquee

direction=left>從右向左移</marquee>，從而就可以實現(xiàn)文字從右向左移動的效果了。五、課程設計心得與體會這次網(wǎng)頁設計實戰(zhàn)篇——個人網(wǎng)站設計完成后，我收獲了很多，感觸也很深。

我最大的感受就是理論不用于實踐終究是理論，說得難聽點那根本就是紙上談兵，止于理論的學習，將來是沒多少成績的，有前途發(fā)展的話也必將是少了更為之錦上添花的一筆。

當然也深刻認識了一點，那就是我們所學的知識雖說是很基礎很根本，但沒有根基怎么能建好別墅呢?所以說基礎知識是很重要的，我們在學習過程中不能小看而去忽略它，它是一筆財富，能引導我們看得更遠飛得高。通過這次設計，我發(fā)現(xiàn)一個很普遍的問題：我們往往是眼高手低，學習這些知識時覺得它就是小菜一樁，但現(xiàn)在真的驗證了“看花容易繡花這句話，當我們著手實踐時就不像我們想象中的那么簡單了，每一個細節(jié)都需要注意，稍有不慎頁面就在預覽中變了樣，因此更需要我們細心和耐心地去完成，也就兩個字概括——認真，只有認真對待才會從骨子里學到東西，才學到心里去了。我覺得這次確實是很有意義的一次檢測，本來自我感覺良好的，結果實戰(zhàn)時還是存在很題的，平時學起來覺得很輕松就以為掌握了所學知識，但現(xiàn)在都忘記很多細節(jié)是怎么樣的了，因此開始著手時有些障礙，心把以前的實驗內容都溫習一遍，遇到不懂的就及時查資料，比如翻閱資料書，百度，也可以請教同學，一起討論，相互學習，于是最后也如魚得水，水到渠成，因此得到一個非常重要的結論——只要自己想學只要自己有那份執(zhí)著與毅力，虛心的請教，勤于查閱相關資料就一定會有收獲的，真的當今沒有什么知識是用不著的，在哪，哪里都是知識，只要自己持有高度的學習熱忱。當然，我們在學習過程中一定要及時鞏固、練習，掌握了也不一定熟悉，熟能生巧??！我們應該吸取這個教訓，否則即使我們最終達到了目的，但我們走了很多彎路，而不是事半功倍的結果了。不過最終，經(jīng)過長久的堅持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠是真理。完成自己的作品后我也觀賞了其他同學的作品，對比起來，各有千秋，當然能從其中發(fā)現(xiàn)很多值得我去學習的地方，比如說有的頁面布局很好，有的頁面內容很充實，看起來很有感覺，也可以稱之為網(wǎng)站了，而我的有些頁面看上去，可能使別人不會產(chǎn)生網(wǎng)站這一個概念，反而會覺得像是PPT演示文稿，這也反映了我的一個問題：心中還沒很清楚領悟建立網(wǎng)站的基本要點，還應該加強這方面的知識儲備。另外我也發(fā)現(xiàn)有的同學的頁面設計插入了太多圖片或者太多浮動的東西，弄得網(wǎng)頁太雜，沒有一定的風格，更談不上凸顯主題了······從對比中，我學到了很多，能讓我揚長避短，吸取他人之精華，去除他人之糟粕。這次作業(yè)對于我來說不是一項任務而是一種享受，因為我發(fā)現(xiàn)我越來越喜歡它，不