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

高校藝術(shù)網(wǎng)頁設(shè)計(jì)分析姓名班級(jí)學(xué)號(hào)：學(xué)院：國(guó)際教育學(xué)院

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

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

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

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