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

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