網(wǎng)頁(yè)設(shè)計(jì)公選課心得感悟.doc

網(wǎng)頁(yè)設(shè)計(jì)與制作心得感想經(jīng)過(guò)十二周的網(wǎng)頁(yè)制作公選課，我們?cè)诰W(wǎng)頁(yè)世界里結(jié)束了一段美妙的旅程。代碼是它的語(yǔ)言，我們對(duì)待網(wǎng)頁(yè)這個(gè)網(wǎng)絡(luò)生活中司空見(jiàn)慣的事物有了新的見(jiàn)解。原來(lái)，我們上網(wǎng)頁(yè)沖浪的時(shí)候，只知道打開(kāi)瀏覽器，享受豐富多彩的網(wǎng)絡(luò)社交活動(dòng)和欣賞精美的網(wǎng)頁(yè)，然而卻始終不知道它背后的秘密；然而現(xiàn)在，我們打開(kāi)網(wǎng)頁(yè)卻知道它是一串一串代碼神奇的組合，它們經(jīng)過(guò)糅合加工，最終向我們展示出一個(gè)絢爛的虛擬世界。正如古話說(shuō)：知其然，知其所以然。在以后，我們對(duì)于網(wǎng)絡(luò)生活有了一種新的界定。網(wǎng)頁(yè)不再是一幅幅精美的圖畫(huà)或是相片，而是庖丁解牛般的了解它的構(gòu)造，知道編程人員背后付出的努力。在享受網(wǎng)絡(luò)生活的同時(shí)，感謝那些網(wǎng)頁(yè)制作者們的付出汗水。鄧小平曾經(jīng)提筆寫道實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。只有通過(guò)實(shí)踐，才能證明我們自己已經(jīng)掌握到的和了解我們自身的局限性以及不足的地方，這樣我們才能及時(shí)發(fā)現(xiàn)錯(cuò)誤，糾正錯(cuò)誤，才能在下一次的實(shí)踐中警醒自己不再犯一樣的錯(cuò)誤。在上完了十一周的理論課之后，老師給我們布置了一項(xiàng)對(duì)于我們網(wǎng)頁(yè)編輯初學(xué)者來(lái)說(shuō)非?！捌D巨”的任務(wù)就是利用我們?cè)谑恢艿恼n堂教學(xué)中所掌握到的知識(shí)來(lái)親自制作一個(gè)網(wǎng)站。特別是對(duì)于網(wǎng)頁(yè)設(shè)計(jì)與制作這門課來(lái)說(shuō)，它的特殊性在于它注重于實(shí)踐操作，理論知識(shí)一種輔導(dǎo)措施，只有親自實(shí)踐操作，在不同的瀏覽器中進(jìn)行檢測(cè)，才能發(fā)現(xiàn)問(wèn)題，改善自己制作網(wǎng)頁(yè)的技巧和能力，才能進(jìn)一步的鞏固所學(xué)到的知識(shí)。所以，在上完理論課，聽(tīng)完老師講授的制作網(wǎng)頁(yè)應(yīng)注意的要點(diǎn)，自己動(dòng)手親自做一個(gè)屬于自己的網(wǎng)站就是十分必要了。它可以檢驗(yàn)自己動(dòng)手操作能力，鞏固理論，是理論與實(shí)踐相結(jié)合。真正掌握學(xué)習(xí)制作網(wǎng)頁(yè)，而不只限于書(shū)本。首先在構(gòu)思網(wǎng)頁(yè)的整體構(gòu)造上，我參考我自己喜歡的作家韓寒的個(gè)人微博主頁(yè)（一個(gè)韓寒）。在界面風(fēng)格上，主要采取了它主要用的兩種鮮明顏色藍(lán)色和黃色的搭配。而且參照韓寒的個(gè)人主頁(yè)，”一個(gè)“的簡(jiǎn)潔元素理念。我將自己的網(wǎng)頁(yè)也設(shè)計(jì)的十分簡(jiǎn)潔明快，使人一目了然。整個(gè)網(wǎng)站一共分為十張網(wǎng)頁(yè)，其中一張是主頁(yè)，其余的九張都可以通過(guò)右側(cè)設(shè)計(jì)的導(dǎo)航欄回到主頁(yè)面。在站點(diǎn)文件夾，按照老師要求的規(guī)則命名為“學(xué)號(hào)+myweb”，主頁(yè)命名為“index.html”，其余的九張分別命名為“page+頁(yè)數(shù)”。站點(diǎn)文件夾中還包含其他兩個(gè)文件夾，一個(gè)是“images”文件夾，其中主要存放網(wǎng)頁(yè)中所用到的圖片資源，且圖片都經(jīng)過(guò)處理，大小合適，命名有規(guī)則。還有另外一個(gè)文件夾是“media”文件夾，其中主要存放網(wǎng)頁(yè)中所用到的媒體資源，包括mp3格式的音頻文件和swf格式的多媒體文件。在制作網(wǎng)頁(yè)的過(guò)程中，第一步就是規(guī)劃網(wǎng)頁(yè)的布局。根據(jù)上課所學(xué)到的知識(shí)以及課下自己查閱相關(guān)網(wǎng)頁(yè)制作的書(shū)籍，對(duì)網(wǎng)頁(yè)布局有了一個(gè)大致的了解。我采用的是div+css的技術(shù)來(lái)實(shí)現(xiàn)頁(yè)面布局和頁(yè)面效果。CSS用于控制網(wǎng)頁(yè)元素的外觀，其主要作用于分離頁(yè)面的樣式和結(jié)構(gòu)。CSS提供了豐富的樣式表現(xiàn)功能，如字體、段落、顏色、背景、布局等。使用DIV+CSS的布局方式改變了傳統(tǒng)html+table的布局方式。我在網(wǎng)頁(yè)中大部分采用的就是DIV和CSS來(lái)構(gòu)建網(wǎng)頁(yè)的布局。第二步就是收集素材，在確定我的網(wǎng)頁(yè)分為兩個(gè)部分之后，其中一個(gè)部分是介紹自己的高中，另外一個(gè)部分是介紹自己的主頁(yè)。所以我分兩個(gè)步驟來(lái)收集資料，其中在介紹自己的高中的部分頁(yè)面上，我主要搜集的是高中學(xué)校的照片和相關(guān)文字介紹。在介紹自己的界面上，我主要分為音樂(lè)、視頻、文字、照片來(lái)全方位的展示。因?yàn)樯婕暗膬?nèi)容比較多，所以搜集的資料相對(duì)而言也比較多。第三步就是處理收集到的素材內(nèi)容。首先將照片、文字、音頻分門別類的處理，存儲(chǔ)在不同的文件夾中。對(duì)照片的處理，我們首先用到的就是Photoshop和Fireworks，可以調(diào)整圖片的大小以及背景顏色等等；對(duì)于flash文件的處理我們則用到了adobe flash進(jìn)行相關(guān)的處理制作，并對(duì)制作完成的.fla文件生成swf的動(dòng)畫(huà)存儲(chǔ)在站點(diǎn)文件夾之中。并對(duì)相關(guān)的素材進(jìn)行合理的命名，以待使用。第四步就是在構(gòu)建的網(wǎng)頁(yè)輪廓中添加文本、圖片以及相關(guān)的媒體資源。確定他們?cè)谡军c(diǎn)文件夾之中，以防止自己在別的機(jī)器上不能正確瀏覽自己制作出來(lái)的網(wǎng)頁(yè)。在這一步驟之中，相對(duì)較難的是導(dǎo)航的制作。因?yàn)槲也捎玫氖莡l、tl標(biāo)簽制作導(dǎo)航，所以在布局上要更加的謹(jǐn)慎小心。以防止界面溢出，所以要更加的小心，并在不同瀏覽器上進(jìn)行檢驗(yàn)，以防出錯(cuò)。第五步就是制作完成整個(gè)網(wǎng)頁(yè)之后，進(jìn)行適當(dāng)?shù)木?jiǎn)壓縮。把不要的圖片、音樂(lè)和視頻資源移出站點(diǎn)文件夾，使站點(diǎn)文件夾里面沒(méi)有不用的素材來(lái)減少站點(diǎn)所占用的空間大小。并且在制作完成整個(gè)網(wǎng)站之后，我們還要測(cè)試網(wǎng)頁(yè)里的鏈接是否出錯(cuò)。我采取的是比較繁瑣的辦法，就是在網(wǎng)頁(yè)中一個(gè)一個(gè)的試驗(yàn)鏈接是否為死鏈。假如碰到死鏈，就繼續(xù)在Dreamweaver中修改。然后再進(jìn)行測(cè)試，直到網(wǎng)頁(yè)中不出現(xiàn)明顯的死鏈錯(cuò)誤。這個(gè)時(shí)候，一個(gè)相關(guān)的網(wǎng)頁(yè)就制作完成了?？偨Y(jié)一下我的整個(gè)網(wǎng)頁(yè)的制作過(guò)程，其中最麻煩的就是遇到無(wú)法解決的問(wèn)題，這個(gè)時(shí)候，只有主動(dòng)上網(wǎng)求救，或者到專業(yè)的論壇