網(wǎng)頁設(shè)計實訓報告1

　　前言

　　Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver、FLASH以及在DREAMWEAVER之后推出的針DREAMWEAVER對專業(yè)網(wǎng)頁圖像設(shè)計的FIREWORKS，三者被MACROMEDIA公司稱為DREAMTEAM(夢之隊)，足見市場的反響和MACROMEDIA公司對它們的自信。說到DREAMWEAVER我們應(yīng)該了解一下網(wǎng)頁編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)(Internet)的家喻戶曉，HTML技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁編輯器，從網(wǎng)頁編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁編輯器和非所見即所得網(wǎng)頁編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網(wǎng)頁編輯器的優(yōu)點就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁編輯器進行網(wǎng)頁制作和在WORD中進行文本編輯不會感到有什么區(qū)別，但它同時也存在著致命的弱點�，F(xiàn)如今，數(shù)以萬計的網(wǎng)站以網(wǎng)頁的方式提供了豐富、精彩的信息。在人類社會進入信息時代的時候，在網(wǎng)絡(luò)成為通信的主要手段的時候，在計算機網(wǎng)絡(luò)普及的今天，網(wǎng)頁也在它自己的崗位上做出了突出的貢獻。網(wǎng)頁是我們在網(wǎng)絡(luò)上的“代言人”。

　　1．對靜態(tài)網(wǎng)頁設(shè)計的認識

　　1.1網(wǎng)頁設(shè)計介紹

　　從文件的角度來說，一個網(wǎng)頁就是一個HTML文件。當瀏覽者輸入一個網(wǎng)址或單擊某個鏈接后，在瀏覽器中顯示出來的就是一個網(wǎng)頁。一般網(wǎng)頁上都會有文本、圖片等信息，而復雜一些的網(wǎng)頁上還會有聲音、視頻、動畫等多媒體內(nèi)容，為網(wǎng)頁增添了豐富的色彩和動感。靜態(tài)網(wǎng)頁是指網(wǎng)頁文件中沒有程序，只有HTML代碼，一般以.html或.htm為后綴名的網(wǎng)頁，靜態(tài)網(wǎng)站內(nèi)容不會在制作完成后發(fā)生變化，任何人訪問都顯示一樣的內(nèi)容。網(wǎng)站是一系列邏輯上可以視為一個整體的網(wǎng)頁集合，是許多相關(guān)網(wǎng)頁有機結(jié)合而組成的一個信息服務(wù)中心。對于小型網(wǎng)站，是指帶有一定主題的多個網(wǎng)頁集合；對于大型網(wǎng)站還包含數(shù)據(jù)庫和服務(wù)器端應(yīng)用程序等如新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。在構(gòu)成網(wǎng)站的眾多網(wǎng)頁中，有一個頁面比較特殊，稱為首頁，即網(wǎng)站的第一個頁面。動態(tài)網(wǎng)頁是指網(wǎng)頁文件不僅具有HTML標記，而且還含有程序代碼，并使用數(shù)據(jù)庫連接。動態(tài)網(wǎng)頁能根據(jù)不同的時間，不同的來訪者顯示不同的內(nèi)容，動態(tài)網(wǎng)站更新方便，一般在后臺直接更新。

　　1.2網(wǎng)頁設(shè)計及網(wǎng)頁布局技術(shù)

　　網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素。一個網(wǎng)頁是否精彩與網(wǎng)頁布局有著重要關(guān)系。常見的網(wǎng)頁布局類型有“國”字型、“匡”字型、“三”字型、“川”字型等。其他類型的有：標題文本型，封面型，F(xiàn)lash型，框架型�？梢杂帽砀竦男问街v一個頁面分成幾個單元格，通過單元格的合并拆分，對網(wǎng)頁進行布局，單元格就相當于是一塊紙，在紙上寫的東西單元格里都可以容得下。通過設(shè)置單元格的長寬對頁面進行布局。框架對網(wǎng)頁進行布局有很多優(yōu)點網(wǎng)頁結(jié)構(gòu)清晰，易于維護和更新。方便用戶瀏覽網(wǎng)頁，采用滾動條，可節(jié)省頁面空間，使網(wǎng)頁風格保持統(tǒng)一；CSS作為網(wǎng)頁設(shè)計中的一種重要技術(shù)，具有以下優(yōu)點：，表現(xiàn)和內(nèi)容相分離，提高頁面瀏覽速度，易于維護和修改，應(yīng)用apdiv創(chuàng)建網(wǎng)頁，網(wǎng)頁清晰，易于分塊。應(yīng)用表單創(chuàng)建網(wǎng)頁，應(yīng)用行為創(chuàng)建網(wǎng)頁。

　　1.3靜態(tài)網(wǎng)頁設(shè)計的技術(shù)要點

　　用框架對網(wǎng)頁進行布局時有很多缺點：網(wǎng)頁內(nèi)容無法被大多數(shù)搜索引擎搜索到，不被低版本瀏覽器支持，樣式陳舊，無法滿足個性化設(shè)置，難以實現(xiàn)不同框架中各元素的精確對齊。在網(wǎng)頁設(shè)計過程中使用CSS樣式表，主要有以下兩種方式，內(nèi)部CSS樣式表，外部CSS樣式表，應(yīng)用庫創(chuàng)建網(wǎng)頁時：對于站點訪問者和開發(fā)人員而言，使用交互式網(wǎng)頁www.具有更多用途，使訪問者可以快速方便地在一個內(nèi)容豐富的網(wǎng)站上查找信息，后臺管理者可以收集、保存和分析站點訪問者提供的數(shù)據(jù)，，后臺管理者可以對內(nèi)容不斷變化的網(wǎng)站進行更新。靜態(tài)網(wǎng)頁每個網(wǎng)頁都有一個固定的URL，且網(wǎng)頁URL以.htm、.html、.shtml等常見形式為后綴，而不含有“?”;網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁是實實在在保存在服務(wù)器上的文件，每個網(wǎng)頁都是一個獨立的文件;靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定，因此容易被搜索引擎檢索;靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護方面工作量較大，因此當網(wǎng)站信息量很大時完全依靠靜態(tài)網(wǎng)頁制作方式比較困難;靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。

網(wǎng)頁設(shè)計實訓報告2

　　靜態(tài)網(wǎng)頁設(shè)計專業(yè)實訓總結(jié)報告提要：

　　網(wǎng)頁設(shè)計實訓就快結(jié)束了，在這短短的兩周里，我學會了很多新的知識，更掌握了新的技能，讓我覺得受益匪淺。在實訓時，有空閑就會想到學校里青蔥歲月，簡單流暢，無憂無慮。

　　插入apdiv標簽，插入圖片，創(chuàng)建超鏈接，設(shè)置段落

　　2.1.3作品展示

　　圖一：中秋送祝福

　　2.2項目2

　　2.2.1項目介紹

　　有鐵血戰(zhàn)鷹的的圖片素材及相關(guān)資料，對鐵血戰(zhàn)鷹進行描述，創(chuàng)建“鐵血戰(zhàn)鷹網(wǎng)頁”

　　2.2.2關(guān)鍵技術(shù)

　　應(yīng)用表格布局，插入橫線對網(wǎng)頁進行美化

　　2.2.3作品展示

　　圖二：鐵血戰(zhàn)鷹

　　2.3項目3

　　2.3.1項目介紹

　　現(xiàn)有自然寫真的圖片，要求自然寫真的圖片在鼠標經(jīng)過時換成別的圖片，點下導航欄的標題時轉(zhuǎn)向別的網(wǎng)頁，制作靜態(tài)網(wǎng)頁，網(wǎng)頁名稱為自然寫真。

　　2.3.2關(guān)鍵技術(shù)應(yīng)用

　　練習頭標題的應(yīng)用，超鏈接的創(chuàng)建，flash的插入，導航欄的創(chuàng)建。

　　2.3.3作品展示

　　圖三：自然寫真

　　3．實訓過程總結(jié)

　　3.1實訓收獲

　　這個階段的實訓我們主要是練習網(wǎng)頁制作及網(wǎng)站發(fā)布的各種知識。近些年隨著計算機的廣泛應(yīng)用，Internet已經(jīng)成為人們獲得信息不可或缺的媒介，特別是Internet的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。無論是最新的新聞信息、新產(chǎn)品的出臺、新游戲的發(fā)布、最新的動態(tài)，包括等候就業(yè)人才的個人簡歷，我們都是可以通過網(wǎng)絡(luò)來獲得。但是什么為這提供平臺的呢。我們又是通過什么來獲取這些信息的呢―網(wǎng)頁。由于人們使用網(wǎng)絡(luò)的頻繁，網(wǎng)頁作為上網(wǎng)的主要依托就變得非常的重要。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。網(wǎng)頁設(shè)計直接面對的是大量的用戶，隨時都會反饋回來對網(wǎng)頁的批評建議等，可以根據(jù)實際情況進行修改，這樣做可以使使用者用起來更加的方便。

　　Dreamweaver工具為我們實現(xiàn)這些提供了便利，下面我將網(wǎng)頁制作和網(wǎng)站發(fā)布的知識總結(jié)如下：

　�。�1）網(wǎng)頁制作的前期工作是搜集大量的素材，我們的網(wǎng)頁只有是實用的才會是大眾喜歡的，搜集素材以充實我們的網(wǎng)頁。當然我們也應(yīng)該在此時定下網(wǎng)站的方向是什么，剩下的就是靠Dreamweaver進行編輯；

　�。�2）網(wǎng)頁的版式設(shè)計，版式設(shè)計時我們應(yīng)該有重點，把重要的內(nèi)容新聞放在醒目的位置上。規(guī)劃各元素在網(wǎng)頁中的位置關(guān)系和表現(xiàn)方法，合理安排圖像、文本等元素，使網(wǎng)頁布局合理、美觀大方；

　�。�3）文本編寫，我們的網(wǎng)頁中需要大量的文字材料，這就要在網(wǎng)頁編輯器中用HTML語言中的標簽編寫。也可以利用網(wǎng)頁編輯工具的“所見即所得”功能，直接寫入文字。在瀏覽器中運行時出現(xiàn)冗余代碼時返回代碼頁面重新進行查看修改；

　�。�4）處理網(wǎng)頁之間的關(guān)聯(lián)，這主要是建立合理、高效的網(wǎng)頁導航系統(tǒng)；

　�。�5）網(wǎng)頁發(fā)布過程，主要是將建設(shè)好的網(wǎng)頁上傳到服務(wù)器中供用戶瀏覽。

　　3.2存在的問題及解決思路

　�。�1）在Dreamweaver基礎(chǔ)方面：制作網(wǎng)頁時如何實現(xiàn)網(wǎng)頁不跳轉(zhuǎn)就可以出現(xiàn)新的內(nèi)容，實現(xiàn)頁面內(nèi)的鏈接；用代碼編寫網(wǎng)頁上的按鈕，實現(xiàn)按鈕的各種功能，如刷新，重置，確定操作。Css樣式表的概念模糊。

　　（2）網(wǎng)站風格方面：一個網(wǎng)站的各個頁面之間風格應(yīng)該是統(tǒng)一的，只有圍繞一個風格才會成功。

　�。�3）網(wǎng)站的內(nèi)容方面：在制作網(wǎng)站時內(nèi)容之間應(yīng)該是相關(guān)的，在制作時我們不能追求面面俱到，只能做到精益求精。雜亂無章的網(wǎng)站是不會有大的發(fā)展的。

　　4．結(jié)束語

　　網(wǎng)頁設(shè)計實訓就快結(jié)束了，在這短短的兩周里，我學會了很多新的知識，更掌握了新的技能，讓我覺得受益匪淺。在實訓時，有空閑就會想到學校里青蔥歲月，簡單流暢，無憂無慮，回想各位老師的授課，孜孜不倦，學校的生活固然是快樂，www.但是學校的實訓課程真的很重要，因為它能讓我們這些在校學生接觸到社會的發(fā)展，讓我們有時間崗位環(huán)境，順利得從單純的校園生活感到復雜社會生活的不同。在這一周的時間里，我一心只做網(wǎng)頁，做自己喜歡的風格的網(wǎng)頁。經(jīng)歷了一次充實而有愉快的實訓，我學會了制作框架、使用錨點、給網(wǎng)頁網(wǎng)頁插入背景音樂、表格、視頻、flash、導航條等更深層次的掌握了它們的用法，現(xiàn)在我心目中的網(wǎng)頁也已經(jīng)大體竣工，我感到很開心，經(jīng)過這兩的不斷探索，我喜歡上了這門課程，感覺很有意思�；蛟S實訓的結(jié)束代表一段新生活的開始，但是我認為它不但是一門課，需要我們?nèi)フ莆�，同時還可以鍛煉我們的邏輯思維能力和思維的嚴密性，還有就是在制作網(wǎng)頁的過程中，更需要有不錯的藝術(shù)審美觀，這樣，你做出的網(wǎng)頁才會賞心悅目，讓人眼前一亮，也就是從此刻起，我決心好好鉆研這門課，力求這方面的技能達到頂級。雖然網(wǎng)頁已經(jīng)完成，可這并不是一件輕而易舉的事情，在此過程中遇到了許多以前不曾遇到的問題，多的情況都是自己解決，萬不得已之際，我會主動問老師和同學，直到弄懂為止！讓我更加清楚地明白老師平日里的良苦用心，也更加清楚地明白了自己以后應(yīng)該怎樣去做事。

網(wǎng)頁設(shè)計實訓報告3

　　本學期的網(wǎng)業(yè)設(shè)計課程，開展了動態(tài)思維訓練教學活動，對于我們學生來說，可以激發(fā)學習興趣，調(diào)動學習的自覺性，自己動腦、動手，動口，運用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導，通過自身的實踐，創(chuàng)作出積聚個人風格、個性的個人網(wǎng)頁�？傮w來說，整個學期的學習過程，我學會了很多知識，雖然過程比較艱辛，但在INTENET領(lǐng)域中，有了一個展示自我的空間，我覺得很開心、很有成就感。

　　一.充分發(fā)揮動手能力

　　作為網(wǎng)頁設(shè)計的初學者，我對網(wǎng)頁設(shè)計非常感興趣，一心想設(shè)計出一個美觀、實用、內(nèi)容豐富的個人網(wǎng)頁。本學期的教改方案由以前學生單純接受知識變?yōu)橹鲃訁⑴c教學活動。在這樣的壓力和動力下，通過自己動手、動腦，通過網(wǎng)絡(luò)資源，老師的指導，在不斷發(fā)現(xiàn)問題和解決問題的過程中學到了很多知識，也增強了我的創(chuàng)作能力和動手能力，在網(wǎng)頁設(shè)計過程中，從構(gòu)思到設(shè)計、完善、維護，整個過程我都全身心投入，使我真正學到了網(wǎng)頁設(shè)計的知識。

　　二.在設(shè)計過程中不斷提高網(wǎng)頁設(shè)計水平

　　在本次網(wǎng)頁設(shè)計中，我不僅學到了很多關(guān)于網(wǎng)頁設(shè)計方面的知識，也從中學會了關(guān)于網(wǎng)絡(luò)、編程等方面的知識。我從最初開始運用FrontPage設(shè)計網(wǎng)頁，到后來運用Dreamweaver、Flash、Fireworks等網(wǎng)軟件設(shè)計網(wǎng)頁，完善網(wǎng)頁。在這個過程中，我通過自學教材、上網(wǎng)查詢，學習了Dreamweaver、Flash、Fireworks等網(wǎng)頁軟件的應(yīng)用，學會了管理、維護自己的站點，以及一些簡單動畫、控件的制作等等。在設(shè)計過程中也出現(xiàn)了很多的問題，但通過看書，上網(wǎng)查詢，請教老師等方式，不斷的學習、解決、提高，設(shè)計出的網(wǎng)頁不論是外觀還是內(nèi)容，都在不斷的進步、改善�？梢哉f在自己動手，不斷實踐的過程中，網(wǎng)頁設(shè)計水平得到了很大的提高。

　　三.不足之處

　　由于平時工作比較繁忙，學習時間比較少，對于網(wǎng)頁設(shè)計軟件的強大功能運用得還不夠。在網(wǎng)頁設(shè)計過程中，由于沒有網(wǎng)頁制作代碼的知識，所以在設(shè)計時也遇到了很多麻煩，有時插入一個特效腳本也是很麻煩。在網(wǎng)頁制作過程中，想提高設(shè)計水平，想有個理想的網(wǎng)頁，必須學會代碼的運用，我將在以后的學習過程中不斷加強這方面的學習，希望老師能簡單介紹一下代碼，讓我也對它有個初步的認識，以后再加強學習也才會有所提高。

　　總體來說，通過今次的對網(wǎng)頁設(shè)計的學習，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁設(shè)計的大門，只要我再認真努力的去學習，去提高，憑借我對網(wǎng)頁設(shè)計的熱情和執(zhí)著，我將來設(shè)計出的網(wǎng)頁會更加專業(yè)，更完善。也希望老師在今后的日子里多指導。