網(wǎng)頁設(shè)計課程設(shè)計報告

1、湖 南 工 學(xué) 院網(wǎng)頁設(shè)計課程設(shè)計報告專 業(yè)：電子商務(wù) 題 目：網(wǎng)絡(luò)電視臺主題網(wǎng)站班 級：電商0901姓 名：張哲學(xué) 號：09500930149指 導(dǎo) 教 師：曹毅完 成 時 間： 2010年12月23日 目錄一、設(shè)計目的2二、設(shè)計題目2三、設(shè)計要求2四、需求分析3五、技術(shù)分析4六、創(chuàng)意分析5七、制作過程及要點7八、參考資料10九、 設(shè)計總結(jié)11一、設(shè)計目的 網(wǎng)頁的設(shè)計區(qū)別于實體化的一些東西，其多為多媒體的存在，意味著它可以容納更多的信息以及更多的展示形式，網(wǎng)頁設(shè)計則要求設(shè)計者具備一些特殊技能以營造特定瀏覽情景。網(wǎng)頁設(shè)計可以在短時間內(nèi)增強我們的洞察力以更好察覺使用者的興趣點，只有這樣才能滿足他

2、們的需要。二、設(shè)計的題目中國網(wǎng)絡(luò)電視臺三、設(shè)計要求1. 課程設(shè)計要求一組一題，每題之間不得有雷同現(xiàn)象。2. 每個題目至少要有15個不同頁面（不能利用模板生成），總頁面不少于30個。作品中必須有index.htm為索引頁，作品中需包含flash動畫、超鏈接、圖片、聲音等多媒體元素。3. 課程設(shè)計過程中，首先要進(jìn)行項目調(diào)研分析、技術(shù)設(shè)計分析及頁面布局。4. 設(shè)計結(jié)束時，每人須按題目分析設(shè)計的要求，上交所有的html文檔和素材，將所有文件只作為壓縮包，文件名按“學(xué)號+姓名+項目名稱”來命名。5. 作品內(nèi)容必須要和課程設(shè)計報告中的項目內(nèi)容要一致，設(shè)計報告要求在15000字左右，報告內(nèi)容應(yīng)有課程設(shè)計題目

3、、需求分析、設(shè)計制作方案及關(guān)鍵制作技術(shù)等內(nèi)容，必要處需要將效果圖抓屏后進(jìn)行插圖。課程設(shè)計報告要求用a4紙打印后與作品一同上交，無設(shè)計報告者不予評定成績。6. 操作系統(tǒng)采用windows xp，安裝photoshop cs3和dreamw cs3軟件，要求網(wǎng)絡(luò)連通能登陸互聯(lián)網(wǎng)查找下載素材文件，最后一個邏輯分區(qū)硬盤不能保護(hù)。四、需求分析 網(wǎng)頁設(shè)計是將技術(shù)性與藝術(shù)性融為一體的創(chuàng)造性活動。網(wǎng)頁設(shè)計是以功能行為第一指導(dǎo)原則，以技術(shù)因素為主要考慮對象，以完成或?qū)崿F(xiàn)必要的功能為目標(biāo)。近幾年隨著網(wǎng)絡(luò)的發(fā)展而逐漸受到人們的重視，它本身已網(wǎng)絡(luò)為載體，把各種信息以快捷、方便的方式傳達(dá)給受眾，在這種標(biāo)準(zhǔn)的要求下，逐步

4、產(chǎn)生了審美需求和功能需求等。人們對美的追求是不斷深入的，網(wǎng)頁設(shè)計同樣如此。如何使受眾能更好的和有效率地接受網(wǎng)頁上的信息，這就需要從審美方面入手。網(wǎng)頁設(shè)計的審美需求是對視覺設(shè)計美學(xué)的一種繼承和延伸，兩者的表現(xiàn)形式和目的都有一定的相似性。網(wǎng)頁設(shè)計的主題為網(wǎng)絡(luò)電視臺，它是一種網(wǎng)絡(luò)視頻公共平臺，是以視聽互動為核心、融網(wǎng)絡(luò)特色與電視特色于一體的全球化、多語種、多渠道、多終端的立體化傳播平臺，是開放的網(wǎng)民互動交流平臺。網(wǎng)絡(luò)電視臺對國內(nèi)國際重大政治、經(jīng)濟、社會、文化、體育等活動和事件以網(wǎng)絡(luò)視聽形式進(jìn)行快速、真實報道或轉(zhuǎn)播，向全球網(wǎng)民全面、及時地傳播中國主流價值觀，傳播中國歷史與文明，分享中國發(fā)展與進(jìn)步成果的

5、責(zé)任和使命。通過網(wǎng)絡(luò)電視臺，廣大網(wǎng)民不僅可以看電視，還可以在線制作和發(fā)布視頻并與好友分享，可以參與評論、發(fā)表意見、表達(dá)觀點，具有傳民情、聚民意、匯民智的功能?，F(xiàn)必要的功能為目標(biāo)。五、技術(shù)分析1、利用 div+css進(jìn)行布局，基本思想為：div+css的基本過程是先布局，對網(wǎng)頁進(jìn)行總體設(shè)計，再設(shè)計內(nèi)容，對布局的每一部分進(jìn)行設(shè)計。div+css對內(nèi)容的設(shè)計也體現(xiàn)內(nèi)容和表現(xiàn)相分離的思想。對內(nèi)容的表現(xiàn)的描述都在css中，內(nèi)容可以應(yīng)用css樣式，不需要額外的html標(biāo)簽進(jìn)行內(nèi)容的修飾。css網(wǎng)頁布局的原理，就是按照html代碼中對象聲明的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技

6、術(shù)。（所謂流布局意思是從左到右對該容器里面的控件進(jìn)行布局，當(dāng)一行不能容納時候自動換行）。css的float屬性，作用就是改變塊元素對象的默認(rèn)顯示方式。block對象設(shè)置了float屬性之后，可以在保持block對象特性的基礎(chǔ)上，使多個block對象在同一行中顯示。使用浮動的時候可以配合使用層的嵌套達(dá)到更好的布局效果。 2、用定義嵌入式框架，實現(xiàn)視頻的播放 標(biāo)記能幫助設(shè)計者在瀏覽器頁面上打開一個“小窗口”，嵌入一張來源于其他位置的網(wǎng)頁，而且這個內(nèi)嵌框架可以同時設(shè)置寬度和高度，可以放在頁面的任何位置，和標(biāo)記建立的框架相比，擁有更多的靈活性，也簡單很多。3、滾動字幕標(biāo)記 標(biāo)簽的使用利用簡單的java

7、script語句控制文字的運動狀態(tài):onmouseover表示鼠標(biāo)經(jīng)過滾動字幕時； stop()意為停止?jié)L動。onmouseout表示鼠標(biāo)離開滾動字幕時；start()意為開始滾動。實現(xiàn)文字圖片的動態(tài)效果，給靜態(tài)網(wǎng)頁增加動態(tài)效果，使網(wǎng)頁內(nèi)容生動。4、錨點標(biāo)記的使用 實現(xiàn)網(wǎng)頁迅速返回指定位置，為網(wǎng)頁閱讀提供方便，減少讀者頻繁的翻動鼠標(biāo)。5、文件的鏈接的使用以及flash、背景音樂等多媒體的嵌入技術(shù)。6、photoshop及flash等多媒體輔助軟件，實現(xiàn)頁面的美觀效果。六、創(chuàng)意分析1、利用javascript實現(xiàn)圖片交替顯示的動態(tài)網(wǎng)頁效果，代碼如下：var curindex=0;/時間間隔(單位

8、毫秒)，每秒鐘顯示一張，數(shù)組共有5張圖片放在photos文件夾下。var timeinterval=1500;var arr=new array();arr0=image/1.jpg;arr1=image/2.jpg;arr2=image/3.jpg;arr3=image/4.jpg;arr4=image/5.jpg;arr5=image/6.jpg;arr6=image/7.jpg;arr7=image/8.jpg;setinterval(changeimg,timeinterval);function changeimg() var obj=document.getelementbyid(

9、obj); if (curindex=arr.length-1) curindex=0; else curindex+=1; obj.src=arrcurindex;2、marquee的應(yīng)用將圖片并排插入，利用標(biāo)簽 實現(xiàn)圖片滾動的動態(tài)效果，并設(shè)置相關(guān)鏈接，給靜態(tài)網(wǎng)頁增加動態(tài)效果，使網(wǎng)頁內(nèi)容生動。3、給框架集添加默認(rèn)連接圖片，設(shè)置表格的邊框，使得框架集呈現(xiàn)黑色顯示器屏幕效果。如圖所示：七、制作過程及要點（代碼）1、創(chuàng)建文件名為cntv的站點，新建網(wǎng)頁，利用css+div進(jìn)行布局，制作首頁，完成整體框架的設(shè)計首頁index，如圖所示：2、導(dǎo)航條的設(shè)計：利用css制作，如圖代碼如下：#menu #m

10、enu tr list-style-type: none; text-align: center; #menu td float: left; #menu td a display: block;padding:2px 3px 2px 3px;font-weight: bold;width:100px;color: #444;text-decoration: none;background-color: transparent;line-height: 100%; #menu td a:hover color: #fff; background-color:#ff0000 .style1 fo

11、nt-size: large;font-weight: bold;.style2 font-size: small.style3 color: #000033;font-weight: bold;font-family: 楷體;font-size: x-large;.style5 font-weight: bold.style6 font-family: 華文楷體;font-weight: bold;font-size: 18px;.style7 font-family: 華文楷體;font-weight: bold;font-size: large;color: #993366;-3、利用表

12、格進(jìn)行各個層內(nèi)容的填充，添加文字連接，實現(xiàn)連接，插入相關(guān)圖片和文字信息，以及flash動畫，美化網(wǎng)站頁面。4、完成各個頻道頁面的布局設(shè)計，如經(jīng)濟臺：5、設(shè)計框架集，創(chuàng)建鏈接，實現(xiàn)視頻的播放功能，如圖所示框架集：將框架插入左邊的left層的的代碼如下： 滾動字幕：本臺消息 6、將各網(wǎng)頁進(jìn)行鏈接，實現(xiàn)網(wǎng)站的鏈接功能八、參考資料網(wǎng)頁配色寶典華之鳳 中國電力出版社 2006年10月 網(wǎng)頁設(shè)計與制作 蔡伯峰 清華大學(xué)出版社 2010年5月adobe公司adobe flash cs4中文版經(jīng)典教程 人民郵電出版社網(wǎng)頁設(shè)計技術(shù)教材 童愛紅 清華大學(xué)出版社 2005年1月網(wǎng)頁設(shè)計與制作 唐有明 清華大學(xué)出版社 2010年4月網(wǎng)頁設(shè)計與制作 蔡伯峰 清華大學(xué)出版社 2010年5月網(wǎng)頁設(shè)計技術(shù) 顧曉燕 清華大學(xué)出版社 2009年12月九、設(shè)計總結(jié)經(jīng)過一周的時間，在同學(xué)和老師的幫助下，基本完成本次課程設(shè)計，基本完成了網(wǎng)絡(luò)電視臺網(wǎng)站的功能要求。這次網(wǎng)頁設(shè)計課程設(shè)計給我的最大的印象是：基本知識是一切的根本；架構(gòu)是重要的，想像的還要重要；實踐比一切空談和理論更能學(xué)到東西。從做這個網(wǎng)頁設(shè)計開始無論遇到什么困難，我都沒有一絲