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

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

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

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

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

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

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

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

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)簽 實(shí)現(xiàn)圖片滾動(dòng)的動(dòng)態(tài)效果，并設(shè)置相關(guān)鏈接，給靜態(tài)網(wǎng)頁增加動(dòng)態(tài)效果，使網(wǎng)頁內(nèi)容生動(dòng)。3、給框架集添加默認(rèn)連接圖片，設(shè)置表格的邊框，使得框架集呈現(xiàn)黑色顯示器屏幕效果。如圖所示：七、制作過程及要點(diǎn)（代碼）1、創(chuàng)建文件名為cntv的站點(diǎn)，新建網(wǎng)頁，利用css+div進(jìn)行布局，制作首頁，完成整體框架的設(shè)計(jì)首頁index，如圖所示：2、導(dǎo)航條的設(shè)計(jì)：利用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)行各個(gè)層內(nèi)容的填充，添加文字連接，實(shí)現(xiàn)連接，插入相關(guān)圖片和文字信息，以及flash動(dòng)畫，美化網(wǎng)站頁面。4、完成各個(gè)頻道頁面的布局設(shè)計(jì)，如經(jīng)濟(jì)臺(tái)：5、設(shè)計(jì)框架集，創(chuàng)建鏈接，實(shí)現(xiàn)視頻的播放功能，如圖所示框架集：將框架插入左邊的left層的的代碼如下： 滾動(dòng)字幕：本臺(tái)消息 6、將各網(wǎng)頁進(jìn)行鏈接，實(shí)現(xiàn)網(wǎng)站的鏈接功能八、參考資料網(wǎng)頁配色寶典華之鳳 中國電力出版社 2006年10月 網(wǎng)頁設(shè)計(jì)與制作 蔡伯峰 清華大學(xué)出版社 2010年5月adobe公司adobe flash cs4中文版經(jīng)典教程 人民郵電出版社網(wǎng)頁設(shè)計(jì)技術(shù)教材 童愛紅 清華大學(xué)出版社 2005年1月網(wǎng)頁設(shè)計(jì)與制作 唐有明 清華大學(xué)出版社 2010年4月網(wǎng)頁設(shè)計(jì)與制作 蔡伯峰 清華大學(xué)出版社 2010年5月網(wǎng)頁設(shè)計(jì)技術(shù) 顧曉燕 清華大學(xué)出版社 2009年12月九、設(shè)計(jì)總結(jié)經(jīng)過一周的時(shí)間，在同學(xué)和老師的幫助下，基本完成本次課程設(shè)計(jì)，基本完成了網(wǎng)絡(luò)電視臺(tái)網(wǎng)站的功能要求。這次網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)給我的最大的印象是：基本知識(shí)是一切的根本；架構(gòu)是重要的，想像的還要重要；實(shí)踐比一切空談和理論更能學(xué)到東西。從做這個(gè)網(wǎng)頁設(shè)計(jì)開始無論遇到什么困難，我都沒有一絲