第一篇：最全最新的網(wǎng)頁制作課程設(shè)計(jì)論文

資料由呼和浩特房產(chǎn)網(wǎng)----筑巢網(wǎng)提供，更多資料請登錄 網(wǎng)頁制作課程設(shè)計(jì)論文

一．需求分析

在網(wǎng)絡(luò)營銷不斷發(fā)展的今天，網(wǎng)絡(luò)營銷有著很大的發(fā)展?jié)摿ΑＫ?，那到底什么行業(yè)才是如今賣的很火的行業(yè)呢？在這里推薦一下站長工具的百度指數(shù)作為調(diào)查數(shù)據(jù)用，今天就以暴利行業(yè)減肥站為載體，寫下這篇論文。顧名思義減肥站的消費(fèi)群眾當(dāng)然是針對那些想減肥的人了，當(dāng)然應(yīng)該是女性為主體哦，有些人對自己的身材要求較高，有沒有時間鍛煉，那怎么辦??？減肥藥成了最后救命稻草。正因?yàn)闇p肥藥有這么大的發(fā)展?jié)摿Γ晕覀兙陀斜匾獙λM(jìn)行研究，開發(fā)設(shè)計(jì)。現(xiàn)在需求分析完畢，那廢話少說直接進(jìn)入主題，網(wǎng)頁設(shè)

計(jì)。

二．網(wǎng)頁設(shè)計(jì)

減肥站網(wǎng)頁設(shè)計(jì)較為簡單，主要從以下幾方面設(shè)計(jì)：

導(dǎo)航欄：開設(shè)五個導(dǎo)航欄目分別為：產(chǎn)品特點(diǎn)，資質(zhì)證書，成功案例，用戶評價(jià)，售后服務(wù)。關(guān)于導(dǎo)航欄的具體功能下面會詳細(xì)介紹，這里就不細(xì)談了。

網(wǎng)頁內(nèi)容：主要以文字為主，圖片為輔，描述文字清晰有價(jià)值，圖片要盡量壓縮，不要影響網(wǎng)頁打開速度即可。網(wǎng)站采用的css+div的模式，減少flash的使用和js調(diào)用，整個頁面的風(fēng)格是簡潔明了，簡單易用，強(qiáng)調(diào)用戶體驗(yàn)，網(wǎng)頁設(shè)計(jì)美觀次之。

網(wǎng)頁鏈接：有首頁鏈接，相關(guān)產(chǎn)品鏈接以及網(wǎng)站內(nèi)頁的錨文本鏈接。

參考資料：

一、網(wǎng)頁設(shè)計(jì)的要素

在一個網(wǎng)站中，最重要的頁面當(dāng)屬主頁，所以在此以主頁為例，說明在網(wǎng)頁制作中版面設(shè)計(jì)的問題。從版面設(shè)計(jì)來講,一個有特色的主頁,必須包含有四個要素：文字，圖片，排列方式和主色調(diào)，這四者相輔相成，缺一不可。

1.圖片要素要設(shè)計(jì)出漂亮的主頁，首先要成為計(jì)算機(jī)圖形高手，僅這一點(diǎn)就可以讓初學(xué)者花上一年半載的時間。圖片的要求與頁面的內(nèi)容有關(guān)，一些較隨意的主頁像股票、醫(yī)藥站點(diǎn)等，來訪者并不在乎你能否做出精彩的圖片，有些時候他們反而覺得放置圖象后影響了訪問速度，他們關(guān)心的只是頁面內(nèi)容；相反像一些需要靠圖象來吸引訪客的主頁，如游戲介紹、影視介紹、風(fēng)光名勝等站點(diǎn)，圖象是一個極為重要的要素，在這里缺少了恰當(dāng)?shù)膱D象，整個頁面就會黯然失色、就是一個不完整的主頁。這需要去學(xué)習(xí)像photoshop這樣的圖形圖像處理軟件，還要有一定的美術(shù)基礎(chǔ)，如審美觀、創(chuàng)意技巧等。

2.排列方法要素主頁的第二個要素是排列方法，即網(wǎng)頁布局。網(wǎng)頁作為一種版面，既有文字，又有圖片；文字有大有小，還有標(biāo)題和正文之分；圖片頁有大小而且有橫豎之別。圖片和文字都需要同時展示給觀眾，不能簡單地將其羅列在一個頁面上，否則會搞得雜亂無章。關(guān)于具體的網(wǎng)頁布局，常見的有“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，關(guān)于它們，在網(wǎng)頁設(shè)計(jì)的相關(guān)書籍中或者在網(wǎng)絡(luò)上都可以看到詳細(xì)的敘述。比如如果內(nèi)容非常多，就要考慮用“國字型”或拐角型；而如果內(nèi)容不算太多而一些說明性的東西比較多，則可以考慮標(biāo)題正文型；而如果是一個企業(yè)網(wǎng)站想展示一下企業(yè)形象或個人主頁想展示個人風(fēng)采，封面性是首選；Flash型更靈活一些，好的Flash大大豐富了網(wǎng)頁，但是它不能表達(dá)過多的文字信息。還沒有提到的就是變化型了，只有不斷的變化才會提高，才會不斷豐富我們的網(wǎng)頁。

3.色彩要素色彩在網(wǎng)頁所占比重很大。有了合理清新的色調(diào)，會彌補(bǔ)主頁上的其它不足。頁面的色彩搭配是與網(wǎng)站的主題分不開的，一個網(wǎng)站必須有一種或兩種主題色。不至于讓瀏覽者迷失方向，也不至于單調(diào)乏味。一般來說，頁面的主體文字應(yīng)盡量使用黑色等較深的顏色，與背景對比明顯，按鈕、邊框等使用彩色。例如教育類網(wǎng)站使用藍(lán)色為主題色，再用紅色和黑色作為配色，就能表達(dá)出嚴(yán)肅、穩(wěn)重的效果。

二、網(wǎng)頁設(shè)計(jì)技巧

一張完美的主頁設(shè)計(jì)需要積累豐富的知識以及掌握大量的技巧。在這里筆者從框架和CSS樣式的運(yùn)用兩方面來介紹網(wǎng)頁設(shè)計(jì)的技巧。

1.框架的使用FRAME（框架）是Web上經(jīng)常會看到的頁面結(jié)構(gòu)?？蚣艿淖畛Ｒ娪猛揪褪菍?dǎo)航。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框架。使用框架具有以下優(yōu)點(diǎn)：訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形；每個框架都具有自己的滾動條(如果內(nèi)容太大，在窗口中顯示不下)，因此訪問者可以獨(dú)立滾動這些框架。例如，當(dāng)框架中的內(nèi)容頁面較長時，如果導(dǎo)航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動回頂部來使用導(dǎo)航條。使用框架具有以下缺點(diǎn)：可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊；對導(dǎo)航進(jìn)行測試可能很耗時間。許多專業(yè) Web 設(shè)計(jì)人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框架。在大多數(shù)情況下，這種反感是因?yàn)橛龅搅四切┦褂每蚣苄Ч患鸦虿槐匾厥褂每蚣艿恼军c(diǎn)(例如，每當(dāng)訪問者單擊導(dǎo)航按鈕時就重新加載導(dǎo)航框架內(nèi)容的框架集)。如果框架使用得法(例如，在允許其他框架的內(nèi)容發(fā)生更改的同時，使一個框架中的導(dǎo)航控件保持靜態(tài))，則這些框架對于某些站點(diǎn)可能非常有用。

2.CSS樣式的使用CSS(層疊樣式表)是一種制作網(wǎng)頁的新技術(shù),它的全稱是級聯(lián)樣式表,即Cascading StyleSheets的縮寫，又稱之為風(fēng)格樣式表單。CSS是在網(wǎng)頁制作過程中普遍用到的技術(shù)。采用了CSS技術(shù)控制的網(wǎng)頁，設(shè)計(jì)者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實(shí)現(xiàn)更加精確地控制。

三、網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)談

一般的來說，絕大多數(shù)普通受眾圖形，插件，applets和其它有關(guān)的高級Web瀏覽器特性。對我們來說，頁面的實(shí)用可能比漂亮更重要，對于用戶來說，沒有什么比頁面能夠快速下載更重要了，簡而言之，精簡你的站點(diǎn)，這是一條最佳的捷徑。另外還要注意，不要依賴圖形。就站點(diǎn)設(shè)計(jì)而言，的確能夠通過成功的圖形設(shè)計(jì)招徠或者丟失訪問者。并非所有的訪問者可以完全看到圖片，某些人為了加快存取網(wǎng)絡(luò)的速度已經(jīng)關(guān)閉了瀏覽器端的圖形。簡而言之，圖形并不能正確的在客戶端加載。然而，圖形經(jīng)常被用來作為導(dǎo)航按鈕。第三要注意，僅僅在需要的時候使用幀(FRAME)。使用幀可以把一個瀏覽器分成幾個不同的窗口，對于站點(diǎn)的結(jié)構(gòu)的把握是一個不錯的方法。但是，你還是必須知道，還是有人在使用不支持幀的瀏覽器。在你開始打算設(shè)計(jì)一個幀的時候，你該仔細(xì)的考慮考慮你是否的確真的需要。經(jīng)常，你這樣的需求可以通過表格來組織站點(diǎn)的結(jié)構(gòu)。網(wǎng)頁設(shè)計(jì)涉及到對多種軟件、多種知識的學(xué)習(xí)和應(yīng)用，以及個人的審美觀等等。所以要想制作出漂亮的網(wǎng)頁，需要一個逐步學(xué)習(xí)和經(jīng)驗(yàn)積累的過程。網(wǎng)頁設(shè)計(jì)還有更多的技巧，有待于我們?nèi)ネ诰蚝脱芯俊?/p>

三．功能介紹

這里著重介紹減肥站的功能，減肥站是以盈利為目的，所以并不要求網(wǎng)頁要都漂亮，多復(fù)雜。比如flash等就沒有必要用了，只要頁面簡潔明了，可靠，用戶體驗(yàn)度高就行了，要能促使客戶下單，這里就要用到網(wǎng)頁設(shè)計(jì)以美觀原則了，只有美麗大方的網(wǎng)頁才更有吸引力和號召力，提高網(wǎng)站的轉(zhuǎn)化率。

具體的導(dǎo)航欄功能介紹：

1.產(chǎn)品特點(diǎn)：向消費(fèi)者提供他們想要的信息，提高網(wǎng)站的黏貼度和轉(zhuǎn)化率，好的描述信息也是可以提高轉(zhuǎn)化率的。

2.資質(zhì)證書，成功案例，用戶評價(jià)：資質(zhì)證書用來增強(qiáng)網(wǎng)站的權(quán)威性的，增

強(qiáng)網(wǎng)站減肥藥的可信度，增加消費(fèi)者對網(wǎng)站的信任度；成功案例用事實(shí)說話更有說服力，當(dāng)然不要太夸張了，那會引起消費(fèi)者的猜疑；用戶評價(jià)增強(qiáng)用戶和網(wǎng)站的交流互動，也是給消費(fèi)者重要的參考信息?？偠灾褪且崾鞠M(fèi)者，在本站買減肥藥可以放心，效果明顯，快點(diǎn)下單吧。

3.售后服務(wù)：客戶有求必應(yīng)，在力所能及的情況下，最大化滿足客戶需求，注意培養(yǎng)培養(yǎng)回頭客的重要性。

四．心得體會

在學(xué)習(xí)網(wǎng)頁制作課程的期間里，我學(xué)會怎樣去制作一個漂亮動人的網(wǎng)頁，從整體布局，到局部的各個細(xì)小的細(xì)節(jié)，每一個細(xì)小知識的掌握都是我進(jìn)步見證，雖然，在學(xué)習(xí)的過程遇到很多的困難，但是在老師的幫助下，最終還是一步一步的解決了一些問題，在這過程，也明白了一個道理，遇到不懂的問題一定要不斷去研究探討，這樣你就可以在原來的基礎(chǔ)上在往前前進(jìn)一大步，這樣，我相信在不久之

后，你就可以變成專業(yè)的美工網(wǎng)頁設(shè)計(jì)者了，以上就是本人在學(xué)習(xí)網(wǎng)頁制作課程的一些心得體會，有時間大家可以一起交流哦。

第二篇：《網(wǎng)頁制作課程設(shè)計(jì)》任務(wù)書

《網(wǎng)頁制作課程設(shè)計(jì)》任務(wù)書

一、課程設(shè)計(jì)的目的及功能定位：

1.鞏固遠(yuǎn)程站點(diǎn)管理的知識和技能； 2.鞏固本地站點(diǎn)管理的知識和技能； 3.鞏固網(wǎng)頁頁面設(shè)計(jì)的知識和技能； 4.鞏固網(wǎng)頁制作的知識和技能；

5.培養(yǎng)以上知識和技能的綜合應(yīng)用能力；

二、課程設(shè)計(jì)總體要求： 1.自己負(fù)責(zé)作品的保存；

2.課程設(shè)計(jì)可以獨(dú)立完成，也可以合作（不多余3人）； 3.申請免費(fèi)域名、免費(fèi)主頁空間，并發(fā)布站點(diǎn)；

4.站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾、大小合適；不要使用媒體（視頻文件）； 5.站點(diǎn)至少要有三層結(jié)構(gòu)，頁面數(shù)不得少于5頁；其中一頁必須是留言板； 6.自選主題，主題內(nèi)容要合法、健康、實(shí)用； 7.網(wǎng)頁要有落款、版權(quán)說明；

8.分析面向的潛在訪客群體的需求特點(diǎn)，選擇內(nèi)容和版式； 9.網(wǎng)站主題突出、內(nèi)容豐富；

10.網(wǎng)站風(fēng)格統(tǒng)一，設(shè)計(jì)適合于主題的LOGO；

11.各頁面設(shè)計(jì)合理、美觀，有創(chuàng)意，適用于各種顯示器的分辨率和顏色； 12.各個頁面之間的鏈接要合理有效； 13.代碼結(jié)構(gòu)清晰，無垃圾代碼

三、課程設(shè)計(jì)進(jìn)程表： 1.設(shè)計(jì)方案：

(1)潛在訪客群體的需求特點(diǎn)：版式和內(nèi)容的需求；(2)站點(diǎn)目錄結(jié)構(gòu)圖：

(3)色彩方案：主色調(diào)、次色調(diào)；

(4)布局方案：導(dǎo)航和其他網(wǎng)頁內(nèi)容的位置；

(5)平面設(shè)計(jì)圖：使用photoshop繪制網(wǎng)頁平面設(shè)計(jì)圖； 2.制作網(wǎng)頁：(1)切割圖片；(2)制作動畫；(3)錄入文字；(4)制作網(wǎng)頁；

3.在課程設(shè)計(jì)的最后一次課上提交課程設(shè)計(jì)報(bào)告和作品。

四、站點(diǎn)結(jié)構(gòu)圖：

五、課程設(shè)計(jì)評分細(xì)則：

項(xiàng)目 指標(biāo) 分?jǐn)?shù) 3 2 2 2 3 3 2 遠(yuǎn)程站點(diǎn) 有效的主頁空間，并上傳站點(diǎn) 5 分 有效的域名

主頁文件名正確

本地 主頁保存位置正確

站點(diǎn) 站點(diǎn)資源組織（目錄結(jié)構(gòu)）合理 42 分 站點(diǎn)中無多余文件和文件夾

站點(diǎn)中平均網(wǎng)頁大小小于 400K 站點(diǎn)至少有三層

頁面數(shù) 5 — 8 頁（2*5+1*3）

各頁之間跳轉(zhuǎn)方便，各子頁均可返回到主頁 沒有無效鏈接

文字內(nèi)容使用 CSS 樣式表文件控制 合理使用 JavaScript 腳本或行為 合理使用 Js 文件，并含有適當(dāng)?shù)淖⑨?各網(wǎng)頁內(nèi)容合法、健康、實(shí)用

內(nèi)容

網(wǎng)站主題突出、內(nèi)容豐富 分

各網(wǎng)頁主次分明，文章流暢，內(nèi)容正確

網(wǎng)站風(fēng)格統(tǒng)一 LOGO 設(shè)計(jì)新穎、美觀 網(wǎng)頁布局設(shè)計(jì)合理、清晰

網(wǎng)頁 色彩搭配合理平面

動靜搭配合理

設(shè)計(jì) 分 圖像、動畫設(shè)計(jì)美觀、大方、專業(yè)、有創(chuàng)意

導(dǎo)航設(shè)計(jì)實(shí)用美觀 文字清晰、規(guī)范

適用于各種顯示器分辨率和顏色 瀏覽速度正常

技術(shù) 圖片和動畫能夠正常顯示 12 分 代碼結(jié)構(gòu)清晰，無垃圾代碼

表單使用合理，提交后打開瀏覽留言頁； 考勤（缺勤 2 課時以上不予以評分）

其它 按時提交設(shè)計(jì)方案報(bào)告（課設(shè)進(jìn)行第二天前必須提交，否10 分 則不予以評分）

按時提交課程設(shè)計(jì)報(bào)告（提交報(bào)告后評分）

合計(jì) 13 2 3 4 2 3 4 2 2 2 5 2 3 3 5 3 2 3 2 3 3 4 4 3 3 105

六、推薦的主題：

1.肇慶學(xué)院計(jì)算機(jī)學(xué)院學(xué)生成績查詢系統(tǒng) 2.花卉市場 3.理發(fā)店 4.洗衣店

5.肇慶學(xué)院計(jì)算機(jī)科學(xué)學(xué)院學(xué)生會 6.肇慶學(xué)院飲食服務(wù)公司 7.肇慶學(xué)院后勤服務(wù)中心 8.肇慶學(xué)院求職網(wǎng) 9.個人網(wǎng)站

八、參考網(wǎng)站：

1.內(nèi)蒙古師范大學(xué)首頁http://www.004km.cn 4.中華手套網(wǎng)http://www.004km.cn

第三篇：網(wǎng)頁制作課程設(shè)計(jì)要求

《網(wǎng)頁設(shè)計(jì)與制作》課程設(shè)計(jì)

課程設(shè)計(jì)是課程教學(xué)中的一項(xiàng)重要內(nèi)容，是完成專業(yè)教學(xué)計(jì)劃，達(dá)到教學(xué)目標(biāo)的重要環(huán)節(jié)，課程設(shè)計(jì)是通過真實(shí)工作任務(wù)或產(chǎn)品設(shè)計(jì)等綜合性較強(qiáng)的實(shí)例而進(jìn)行的實(shí)踐環(huán)節(jié)，它對幫助學(xué)生全面掌握課堂教學(xué)內(nèi)容，培養(yǎng)學(xué)生實(shí)踐和實(shí)際動手能力，培養(yǎng)團(tuán)隊(duì)協(xié)作，人際交往等素質(zhì)的提高具有很重要的意義，《網(wǎng)頁設(shè)計(jì)與制作》是一門實(shí)用性和實(shí)踐性都很強(qiáng)的課程，課程設(shè)計(jì)應(yīng)占有更重要的地位。

一、課程設(shè)計(jì)任務(wù)

培養(yǎng)學(xué)生計(jì)算機(jī)操作的能力和用計(jì)算機(jī)設(shè)計(jì)網(wǎng)頁的基本技能，使學(xué)生具備分析問題、用編程思維解決問題的能力，達(dá)到計(jì)算機(jī)初級網(wǎng)頁設(shè)計(jì)員的水平，使學(xué)生養(yǎng)成既善于獨(dú)立思考，又樂于與人溝通、具備團(tuán)隊(duì)合作意識的職業(yè)素質(zhì)。

二、課程設(shè)計(jì)目的課程設(shè)計(jì)總的目的在于加深對網(wǎng)頁設(shè)計(jì)與制作的基本知識的理解，網(wǎng)頁設(shè)計(jì)與制作技能綜合運(yùn)用和提高，通過真實(shí)工作任務(wù)，使學(xué)生能設(shè)計(jì)出有一定水平的網(wǎng)頁并解決培養(yǎng)解決實(shí)際問題的能力，掌握實(shí)際網(wǎng)頁設(shè)計(jì)與制作開發(fā)流程和開發(fā)方法。

具體的課程設(shè)計(jì)應(yīng)達(dá)到以下目的：

1．提高學(xué)生在實(shí)際操作中收集信息，對信息進(jìn)行價(jià)值判斷，進(jìn)行信息整理、加工的能力。

2．在實(shí)際的項(xiàng)目任務(wù)中培養(yǎng)網(wǎng)頁設(shè)計(jì)方面的素養(yǎng)。

3．在實(shí)際的項(xiàng)目任務(wù)中使學(xué)生網(wǎng)頁編程和制作的能力得到提高。

4．培養(yǎng)學(xué)生團(tuán)隊(duì)協(xié)作和人際交往方面的能力。

5.培養(yǎng)相關(guān)知識和技能的綜合應(yīng)用能力。

三、課程設(shè)計(jì)的要求

《網(wǎng)頁設(shè)計(jì)與制作》的課程設(shè)計(jì)課題選擇應(yīng)從實(shí)際出發(fā)。具體要求如下：

1.網(wǎng)頁的選題可以是個人網(wǎng)站、班級網(wǎng)站，也可以自選主題。

2.站點(diǎn)設(shè)計(jì)合理、管理有序、無多余文件和文件夾、大小合適。首頁命名要規(guī)范，存放位置要正確，主頁文件名應(yīng)該使用index或default等。其他文件或文件名命名也要規(guī)范，不使用漢字或帶有空格的名稱。最好是符合各種系統(tǒng)命名規(guī)則。

3.要使用到本書所介紹的各種技術(shù)及網(wǎng)頁元素。

4.自選主題，主題內(nèi)容要合法、健康、實(shí)用。

5.網(wǎng)站主題突出、內(nèi)容豐富；

6.網(wǎng)站與網(wǎng)頁風(fēng)格應(yīng)該協(xié)調(diào)一致，網(wǎng)站結(jié)構(gòu)應(yīng)層次分明，內(nèi)容重點(diǎn)突出，頁面設(shè)計(jì)要符合追求色彩的搭配、布局和合理性，以及要有一定的創(chuàng)意。

四、課程設(shè)計(jì)報(bào)告要求

1.要有封面（格式無特殊要求，注明專業(yè)、年級、班級、姓名、學(xué)號等信息）

2.分章節(jié)解釋并指出本人所做的網(wǎng)頁包括哪幾部分，每部分用到什么元素及技術(shù)。

五、源碼及報(bào)告提交

1.將源碼打包，打包文件名為：專業(yè)+年級+班級+姓名+學(xué)號。并發(fā)送到：cbfcourse@126.com

例：包裝工程09（1）王小二3109009999.rar

2.課程設(shè)計(jì)報(bào)告需交打印版，于第八周三（4月20日）晚上交到教3-303。2

第四篇：網(wǎng)頁制作論文

網(wǎng)頁制作論文

簡介

網(wǎng)頁制作是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計(jì)師等崗位，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計(jì)技術(shù)，為企事業(yè)單位、公司或個人在全球互聯(lián)網(wǎng)上建設(shè)站點(diǎn)，并包含域名注冊和主機(jī)托管等服務(wù)的總稱。其作用為展現(xiàn)公司形象，加強(qiáng)客戶服務(wù)，完善網(wǎng)絡(luò)業(yè)務(wù)。網(wǎng)頁制作是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。新競爭力也認(rèn)為注重網(wǎng)站的網(wǎng)絡(luò)營銷價(jià)值而不是外在表現(xiàn)。網(wǎng)頁制作是指使用標(biāo)識語言，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，瀏覽。

網(wǎng)頁制作要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計(jì)與網(wǎng)頁設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計(jì)是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來。

目錄

1.網(wǎng)頁制作的兩種設(shè)計(jì)模式 2.網(wǎng)頁制作常用工具 3.flash 3.1flash簡介 3.2flash動畫的特點(diǎn) 3.3flash動畫的前景 3.4flash在網(wǎng)頁中的應(yīng)用 3.5flash制作流程 4.fireworks

4.1fireworks簡介

4.2fireworks在網(wǎng)頁中的應(yīng)用

4.3fireworks的重要性

4.4fireworks制作流程 5.參考文獻(xiàn)

正文

1.網(wǎng)頁制作的兩種設(shè)計(jì)模式

從前一般網(wǎng)頁都使用表格進(jìn)行排版設(shè)計(jì)，這樣作的優(yōu)點(diǎn)在于設(shè)計(jì)制作速度快，尤其在可視化網(wǎng)頁編輯器，如Microsoft FrontPage中，這樣設(shè)計(jì)顯得直觀而方便，然而這讓越來越復(fù)雜的版面需要許多不斷嵌套的表格設(shè)計(jì)，致使網(wǎng)頁代碼變得冗長復(fù)雜，使文件體積增大，且不容易被搜索引擎查找。同時，這樣做也不利于大型網(wǎng)站的改版工作。

于是隨著主流網(wǎng)頁瀏覽器對CSS的支援度提高，近年來興起了一種新的網(wǎng)頁設(shè)計(jì)模式。被業(yè)界稱為“網(wǎng)頁重構(gòu)”的革命，其核心在于分隔網(wǎng)頁的風(fēng)格和內(nèi)容，指標(biāo)記語言(如HTML,XML)負(fù)責(zé)定義頁面的內(nèi)容，但不可以定義任何涉及網(wǎng)站外觀(風(fēng)格)的東西。而網(wǎng)站風(fēng)格就由另外的CSS檔案負(fù)責(zé)。在排版方面，新的模式提倡使用由CSS定義的DIV進(jìn)行頁面排版，而將表格還原為排列數(shù)據(jù)的最初功能。這種模式有很多好處，例如可以協(xié)助搜尋引擎查找網(wǎng)頁的情況，減小文件提及提高瀏覽速度，且由于一個CSS檔案可以控制多個頁面，這也給改版帶來了很大方便。

由于W3C是該模式極力的倡導(dǎo)者，于是業(yè)界鑒定網(wǎng)頁是否符合W3C標(biāo)準(zhǔn)，就可以在W3C網(wǎng)站自動檢測該網(wǎng)站的情況。

這種模式也有缺點(diǎn)，其中一個弱點(diǎn)就是，在不同瀏覽器出來的效果會有分別，但這種情況主要是由于微軟的Internet Explorer對CSS文檔的支持有眾多缺陷造成的。另一方面，開始設(shè)計(jì)CSS時，并不能清楚看到目標(biāo)，因此顯得不直觀。

網(wǎng)頁實(shí)際是一個文件，他存放在世界某個角落的的某一臺計(jì)算機(jī)中，而這臺計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取，當(dāng)我們在瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，網(wǎng)頁文件會被傳送到你的計(jì)算機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。

2.網(wǎng)頁制作常用工具

1、dreamweaver,用與編輯HTML、ASP、JSP、PHP時的輔助工具。Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。

2、Frontpage 跟dreamweaver一樣，不過還是dreamweaver好。

3、FLASH 網(wǎng)頁需要畫面流動時的首選擇

4、PS圖象處理軟件，一般網(wǎng)頁都需要有圖片相搭配，PS是款很強(qiáng)大的工具。

5、FW跟PS一樣都是圖象處理軟件，但FW偏向與對網(wǎng)頁的處理。

6、Adobe公司推出的cs3系列，軟件之間兼容性較好?？梢杂么讼盗袑W(wǎng)站的美工特效進(jìn)行進(jìn)一步的修飾美化和優(yōu)化。

3.flash 3.1flash簡介

Flash最早出現(xiàn)并興起于網(wǎng)絡(luò)，是網(wǎng)絡(luò)多媒體動畫的重要制作形式，它是macromedia公司推出的交互式矢量圖和 Web 動畫的標(biāo)準(zhǔn)。網(wǎng)頁設(shè)計(jì)者使用 Flash 創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。其運(yùn)用范圍覆蓋諸多領(lǐng)域如電視廣告、網(wǎng)絡(luò)廣告、游戲、演示動畫、課件、網(wǎng)頁、手機(jī)動畫等新興媒體?，F(xiàn)在由于網(wǎng)絡(luò)帶寬的不斷提高，F(xiàn)lash動態(tài)網(wǎng)頁以其具備的聲音、動態(tài)圖像等多媒體優(yōu)勢，相信在不遠(yuǎn)的將來能夠完全替代靜態(tài)（HTML）網(wǎng)頁。

3.2flash動畫的特點(diǎn)

（一）Flash動畫受網(wǎng)絡(luò)資源的制約一般比較短小，利用Flash制作的動畫是矢量的，無論把它放大多少倍都不會失真。

（二）Flash動畫具有交互性優(yōu)勢，可以更好地滿足所有用戶的需要。它可以讓欣賞者的動作成為動畫的一部分。用戶可以通過點(diǎn)擊、選擇等動作，決定動畫的運(yùn)行過程和結(jié)果，這一點(diǎn)是傳統(tǒng)動畫所無法比擬的。

（三）Flash動畫可以放在網(wǎng)上供人欣賞和下載，由于使用的是矢量圖技術(shù)，具有檔小、傳輸速度快、播放采用流式技術(shù)的特點(diǎn)，因此動畫是邊下載邊播放，如果速度控制得好，則根本感覺不到檔的下載過程。所以Flash動畫在網(wǎng)上被廣泛傳播。

（四）Flash動畫有嶄新的視覺效果，比傳統(tǒng)的動畫更加輕易與靈巧，更加“酷”。不可否認(rèn)，它已經(jīng)成為一種新時代的藝術(shù)表現(xiàn)形式。

（五）Flash動畫制作的成本非常低，使用Flash制作的動畫能夠大大地減少人力、物力資源的消耗。同時，在制作時間上也會大大減少。

（六）Flash動畫在制作完成后，可以把生成的檔設(shè)置成帶保護(hù)的格式，這樣維護(hù)了設(shè)計(jì)者的版權(quán)利益。

3.3flash動畫的前景

現(xiàn)在的Flash平臺包括:Flash Studio

8、Flash Player

8、Flash in Mobile flex 1.5、以及應(yīng)用于通信行業(yè)的Breeze 5等；未來即將推出的產(chǎn)品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客戶端工具，以及Flex等企業(yè)端工具等。這些工具將滿足設(shè)計(jì)和開發(fā)人員跨越各種開放的和專有的平臺，包括從桌面到移動設(shè)備，提供更豐富的網(wǎng)絡(luò)內(nèi)容和互聯(lián)網(wǎng)應(yīng)用，企業(yè)也能夠通過Flash應(yīng)用獲得更大的受益。

（一）網(wǎng)絡(luò)視頻鐘情Flash 面對全球超過100萬的Flash開發(fā)者的期望，Macromedia也不斷開發(fā)新的領(lǐng)域。而用戶對視頻應(yīng)用的垂青，刺激著Macromedia推出新的工具。在上千開發(fā)者的注目下，Macromedia推出了Flash Media Server 2，以鞏固其Flash Platform作為網(wǎng)絡(luò)視頻最佳選擇的地位

（二）Flex 2產(chǎn)品線和Flash Player 8.5出手不凡

Macromedia Flex 2產(chǎn)品線和Macromedia Flash Player 8.5是本次發(fā)布會的重頭戲。新產(chǎn)品涵蓋RIA的全部應(yīng)用場景，從電子商務(wù)產(chǎn)品配置，到需要與實(shí)時數(shù)據(jù)集成的可視交易應(yīng)用。

Flash Player目前在全球6億多個桌面和移動設(shè)備上安裝,估計(jì)新版本在12個月內(nèi)將被80%的聯(lián)網(wǎng)計(jì)算機(jī)下載。Flash Player 8.5在Flash Player 8的基礎(chǔ)上增加了適合行業(yè)使用的編程功能，并構(gòu)建了先進(jìn)的跨平臺運(yùn)行時環(huán)境。它備有一個新的虛擬機(jī)，可以提供更高的運(yùn)行性能、全面的運(yùn)行錯誤報(bào)告、增強(qiáng)型調(diào)試功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script規(guī)范，能夠更易于查找及解決問題，從而提高開發(fā)人員的工作效率。

3.4flash在網(wǎng)頁中的應(yīng)用

在網(wǎng)絡(luò)高速發(fā)展的今天,越來越多的人們已經(jīng)不再滿意圖文并茂的靜態(tài)網(wǎng)頁格式,動態(tài)網(wǎng)頁應(yīng)運(yùn)而生,但是一般的動態(tài)圖片和網(wǎng)站的背景音樂應(yīng)用并不合拍.什么時候可以把多媒體應(yīng)用在網(wǎng)站上呢 Flash正是在這一網(wǎng)絡(luò)發(fā)展的大背景下應(yīng)運(yùn)而生的,前身是Future Splash.Flash1.0版本誕生于1996年,由于當(dāng)時的網(wǎng)絡(luò)大背景,Flash在出道之時并沒有得到計(jì)算機(jī)行業(yè)應(yīng)有的重視,Flash真正的火爆是從Flash3.0版本開始的,到了1999年6月發(fā)布的Flash4.0版本,其制作的動畫開始大量的在網(wǎng)上傳播,已經(jīng)逐漸成為了網(wǎng)頁交互多媒體動畫設(shè)計(jì)軟件的標(biāo)準(zhǔn).現(xiàn)在,Flash5.0以其特有的ActionScript腳本編程,正在以極快的速度追趕HTML網(wǎng)頁標(biāo)準(zhǔn).它改變了以往靜態(tài)的,枯燥的,網(wǎng)頁形式,利用它短小精悍的文件體積和插件,利用它簡單易學(xué)的操作方式,利用它的“流”式播放形式豐富我們的網(wǎng)絡(luò)生活.試想,如果它真的超過HTML成為未來的網(wǎng)頁設(shè)計(jì)軟件的主流,那也將是網(wǎng)絡(luò)的一場革命,也是網(wǎng)絡(luò)生活的福音.3.5flash制作流程

（1）建立一個新的場景

依次選擇“文件”、“新建”、“Flash文檔”命令，建立空白文檔，大小為550*400像素，背景為白色。

（1）

（2）重新命名場景和涂層名稱

依次選擇“窗口”、“設(shè)計(jì)面板”、“場景”命令，在彈出的場景面板中雙擊默認(rèn)場景名稱，改為“跳動的小球”。然后重新命名涂層名稱，雙擊默認(rèn)涂層名稱，改為“地面”。然后用水平線表示地面，選擇筆觸顏色為黑色，單擊“線條工具”按鈕，在第一幀的舞臺下方，拖動鼠標(biāo)畫一條直線表示地面。

（2）

（3）插入水平線結(jié)束幀

單擊水平線涂層第35幀的小方框，選中該幀；依次選擇“插入”、“時間軸”、“關(guān)鍵幀”命令，在地面層的1到35幀之間插入了相同的水平線。

（3）（4）插入跳動的小球涂層，畫小球的初始狀態(tài)

雙擊默認(rèn)的涂層名，改為跳動的小球涂層，此圖層處于激活狀態(tài)。設(shè)置填充色為黑色，在第一幀的舞臺上方，畫一個小球，刪除輪廓線。

（4）

（5）插入下一幀

單擊跳動的小球?qū)拥诙男》娇?，選中該幀；依次選擇“插入”、“時間軸”、“關(guān)鍵幀”命令，在第二幀中復(fù)制第一幀的圖形；拖動小球向下移動一個距離，表示球在下落。

（5）

（6）制作下落動作的變化

重復(fù)上一步驟。

（6）

（7）小球變形

在下一幀的位置插入關(guān)鍵幀，利用任意變性工具把小球縱向壓縮。單擊“任意變形”按鈕,指針根據(jù)可實(shí)現(xiàn)的變形方式箭頭右下方的小圖形會有所變化；單擊小球，小球周圍出現(xiàn)8個黑色句柄框；把鼠標(biāo)指針移動到4個中間句柄處，拖動鼠標(biāo)，把圓球編程橢球形。

（7）

（8）多次重復(fù)上面步驟，在不同的幀中，制作小球被壓扁后又彈起的畫面。參照第9步，制作小球被壓扁后又彈起的畫面。重復(fù)上述步驟，直到小球靜止。4.fireworks 4.1fireworks簡介

Fireworks是Macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，它大大簡化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，無論是專業(yè)設(shè)計(jì)家還是業(yè)余愛好者，使用Fireworks都不僅可以輕松地制作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態(tài)按鈕、動態(tài)翻轉(zhuǎn)圖等，因此，對于輔助網(wǎng)頁編輯來說，F(xiàn)ireworks將是最大的功臣。借助于 Macromedia Fireworks 8，您可以在直觀、可定制的環(huán)境中創(chuàng)建和優(yōu)化用于網(wǎng)頁的圖像并進(jìn)行精確控制。Fireworks 業(yè)界領(lǐng)先的優(yōu)化工具可幫助您在最佳圖像品質(zhì)和最小壓縮大小之間達(dá)到平衡。它與 Macromedia Dreamweaver? 和 Macromedia Flash? 共同構(gòu)成的集成工作流程可以讓您創(chuàng)建并優(yōu)化圖像，同時又能避免由于進(jìn)行 Roundtrip 編輯而丟失信息或浪費(fèi)時間。利用可視化工具，無需學(xué)習(xí)代碼即可創(chuàng)建具有專業(yè)品質(zhì)的網(wǎng)頁圖形和動畫，如變換圖像和彈出菜單等。

4.2fireworks在網(wǎng)頁中的應(yīng)用

眾所周知，在網(wǎng)頁上的jpg圖片如果過大，會嚴(yán)重影響頁面的打開速度，F(xiàn)ireworks提供優(yōu)化圖片的功能，即縮小圖片的KB，而且不影響畫面的質(zhì)量（除非放大了與原圖對比）。由于很多人喜歡用photoshop制作jpg圖片，所以它的容量會很大（因?yàn)樗沁m合處理印刷品，要求比較清晰），最終還是要用Fireworks來處理一下。

在優(yōu)化面板里有“導(dǎo)出jpg較高品質(zhì)”，導(dǎo)出默認(rèn)的80品質(zhì)（可以用“2幅”畫面對比之前之后的大小）。

4.3fireworks的重要性

為Macromedia家族的一員，三劍客之一的fireworks，她的主要任務(wù)和特色就是制作矢量圖為網(wǎng)頁服務(wù),FW也是Flash的最佳伴侶,在三劍客的MX系列中,FW和Flash的聯(lián)系更為緊密,所以無論是網(wǎng)頁制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的應(yīng)用實(shí)踐過程中,我無時無刻不在感受她的卓越和便利。的確,網(wǎng)頁制作看重的是效果和速度,并不是你用的軟件專業(yè)與否,你用了多少個軟件作出的網(wǎng)頁,設(shè)計(jì)師作出的網(wǎng)頁是為了讓大家接受而不是顯示自己的本領(lǐng),在這樣的前提下,Fw的確是最好的選擇,最好的矢量圖效果,最快的速度。

4.4fireworks制作流程

1.準(zhǔn)備素材 如圖

2、因?yàn)檫@幅圖片是位圖，我們可以用魔術(shù)棒將電視機(jī)中間的畫面選取成選區(qū)

2.選擇菜單——將選取框轉(zhuǎn)換為路徑，得到電視畫面的輪廓路徑。當(dāng)然，也可以用鋼筆工具勾勒

出

電

視

畫

面的路

徑

4.將選中區(qū)域填充成折疊漸變

顏色可以自己選擇：

5.用選取工具拖動漸變方向手柄，接近垂直或接近水平方向：

6.將調(diào)整手柄以初選中區(qū)域 并在幀屬性，選取重制幀命令：選擇三幀 或在多些

7.依次選擇其他幀，拖動漸變調(diào)整手柄將其改變位置：柄以初選中區(qū)域 并在幀屬性幀命令：

最后保存 導(dǎo)出gif圖片 即可完成。

1.在Fireworks中打開一個新的畫布，調(diào)整畫布大小，選擇工具欄中的文本工具，輸入第一個數(shù)字，并設(shè)置好文字的字體、像素大小等樣式

2.輸入文本 1 然后再打開幀屬性 選擇重置幀 9 因?yàn)閿?shù)字0-9 一共是十個

3.然后選擇每一幀，并修改畫布中的相應(yīng)數(shù)字。

4.幀面板中右手邊顯示的是默認(rèn)的幀延時值7毫秒，即7/100秒的速度。如果速度過快 可以修改值 選擇頂部幀，按住Shift鍵，點(diǎn)擊底部的最后一幀，全選這些幀，在幀延時值處雙擊，在顯示的對話框中設(shè)置一個更高的值。更高值將減慢動畫的播放速度。5.最后一步，打開優(yōu)化面板，設(shè)置導(dǎo)出文件格式為“Gif動畫”，如圖：

6.也可以在幀面板的底部設(shè)置Gif動畫循環(huán)，默認(rèn)為“永久”選項(xiàng)

7.畫布顏色可以隨意更改 再按f12 預(yù)覽就可以了，最后導(dǎo)出文件

5.參考文獻(xiàn)

[1]劉宇.Flash短片輕松學(xué)中國大陸.電子工業(yè)出版社，2009-01.[2]章精設(shè)，胡登濤.Flash Action Script 3.0從入門到精通.清華大學(xué)出版設(shè)，2008-10.[3]陳冰.Flash第1步:ActionScript編程篇(珍藏版).清華大學(xué)出版社，2006-03

第五篇：網(wǎng)頁制作課程設(shè)計(jì)報(bào)告

網(wǎng)頁制作課程設(shè)計(jì)報(bào)告

一.緒論

1.課程設(shè)計(jì)的目的、意義

本課程的設(shè)計(jì)目的是通過實(shí)踐使同學(xué)們經(jīng)歷Dreamweaver cs5開發(fā)的全過程和受到一次綜合訓(xùn)練，以便能較全面地理解、掌握和綜合運(yùn)用所學(xué)的知識。結(jié)合具體的開發(fā)案例，理解并初步掌握運(yùn)用Dreamweaver cs5可視化開發(fā)工具進(jìn)行網(wǎng)頁開發(fā)的方法；了解網(wǎng)頁設(shè)計(jì)制作過程。通過設(shè)計(jì)達(dá)到掌握網(wǎng)頁設(shè)計(jì)、制作的技巧。了解和熟悉網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識和實(shí)現(xiàn)技巧。根據(jù)題目的要求，給出網(wǎng)頁設(shè)計(jì)方案，可以按要求，利用合適圖文素材設(shè)計(jì)制作符合要求的網(wǎng)頁設(shè)計(jì)作品。熟練掌握Dreamweaver cs5的的操作和應(yīng)用。增強(qiáng)動手實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。2.設(shè)計(jì)情況的簡介

我做的網(wǎng)站是以動漫世界為主題，內(nèi)含各種風(fēng)格和類型的動漫。網(wǎng)站中插入了大量的圖片和鏈接，界面簡單明了。網(wǎng)頁常規(guī)技術(shù).素材處理.網(wǎng)頁創(chuàng)意.實(shí)用性和推廣性等方面均有所涉及和注意.3.設(shè)計(jì)原理與規(guī)模介紹

主要運(yùn)用一些基本的網(wǎng)頁制作技術(shù),分三大板塊分級進(jìn)行闡述主題。規(guī)模上，屬于小型和個人興趣類型的網(wǎng)站。二.網(wǎng)站需求分析

本網(wǎng)站符合大眾喜愛動漫的心理。動漫愛好者對于動漫的要求首先要是好看的動漫，其次便是種類多樣的動漫。網(wǎng)站首頁需要做到簡潔明了，針對性強(qiáng)，因?yàn)檫@樣才可以留住顧客以及開發(fā)潛在顧客。

三.網(wǎng)站概要設(shè)計(jì)

網(wǎng)站主頁分為三級頁面。第一級為主頁面，內(nèi)含網(wǎng)站的各種信息。第二級頁面分大類解釋網(wǎng)站動漫種類信息，第三級頁面就是對于每一部動漫的詳細(xì)解釋。另外就是站主介紹，這是網(wǎng)站中雖不重要卻不可缺少的部分。

四.網(wǎng)站詳細(xì)設(shè)計(jì)

網(wǎng)站分國產(chǎn)動漫，最新動漫，經(jīng)典動漫三個部分。每一部分都有更細(xì)的下一級頁面對其進(jìn)行詳細(xì)描述。站中插入大量圖片，在每一部動漫介紹時均有圖片介紹以及鏈接。網(wǎng)站中需要運(yùn)用的一些常規(guī)技術(shù)蘊(yùn)含其中得以體現(xiàn)，比如在頁面中，插入文字、圖片、超級鏈接等技術(shù)。另外還需要對文字圖片進(jìn)行進(jìn)一步修改，比如字體顏色圖片大小以及背景顏色等等。

五.網(wǎng)站實(shí)現(xiàn)與調(diào)試

在網(wǎng)站做好之后，我對網(wǎng)站進(jìn)行整體調(diào)試，確保每一級鏈接沒有發(fā)生錯誤。不過，卻發(fā)現(xiàn)另一個問題，鏈接雖然沒有問題，可是在插入的圖片上添加鏈接時卻把圖片給裂開了。于是只好把超級鏈接改為熱點(diǎn)鏈接。

六.收獲與體會

通過這次網(wǎng)站的制作，我更加熟悉dw的各項(xiàng)功能和操作。對于建站的流程有了了解。對于動漫方面的知識也有所了解。