計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)

1、多媒體網(wǎng)站設(shè)計(jì)課程設(shè)計(jì)實(shí)驗(yàn)地點(diǎn)：多學(xué)科綜合實(shí)驗(yàn)樓專業(yè)班級(jí)：計(jì)科0802學(xué)號(hào)：2008001418學(xué)生姓名：栗喜明指導(dǎo)教師：李海芳2012年1月14日一、 網(wǎng)站規(guī)劃1.本課題的研究意義隨著網(wǎng)絡(luò)出版、發(fā)表和張貼文章等網(wǎng)絡(luò)活動(dòng)的急速增長，博客已經(jīng)成為了一個(gè)指稱這種網(wǎng)絡(luò)出版和發(fā)表文章的專有名詞。博客通常是由簡短且經(jīng)常更新的張貼構(gòu)成，這些張貼的文章都按照年份和日期排列。博客的內(nèi)容和目的有很大的不同，從對(duì)其他網(wǎng)站的超級(jí)鏈接和評(píng)論，到有關(guān)公司的新聞或構(gòu)想，或者是個(gè)人的日記、照片、詩歌、散文，甚至科幻小說的發(fā)表或張貼。許多博客是個(gè)人將自己的想法表達(dá)出來，或者是一群人根據(jù)某個(gè)特定主題或共同目標(biāo)進(jìn)行合作，每個(gè)人都

2、可以隨時(shí)把自己的思想火花和靈感更新到博客站點(diǎn)之上。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。根據(jù)個(gè)人喜好開發(fā)了博客網(wǎng)站。2該網(wǎng)站的主要設(shè)計(jì)要求：（1）該網(wǎng)站的主頁中包含文字、圖像、聲音、視頻和動(dòng)畫等多媒體元素，各元素排列、擺放整潔、有序。網(wǎng)站界面顏色搭配合理，給用戶友好感受。（2）在網(wǎng)站主頁中，各媒體元素根據(jù)需要會(huì)具有超級(jí)鏈接功能，可以是頁內(nèi)鏈接也可以是頁間鏈接。（3）該網(wǎng)站還會(huì)具有動(dòng)態(tài)交互能力，能夠和后臺(tái)數(shù)據(jù)庫動(dòng)態(tài)交互數(shù)據(jù)。（4）該網(wǎng)站會(huì)有用戶注冊(cè)和登錄，用戶可以進(jìn)行挑選物品，物品會(huì)有簡介、圖片、單價(jià)等信息。同

3、時(shí)用戶對(duì)選擇的物品可以查看購物車，可以修改。主頁的大致排版：二、 設(shè)計(jì)中用到的關(guān)鍵技術(shù)a) 系統(tǒng)開發(fā)環(huán)境i. 操作系統(tǒng)是windows xp1. 開發(fā)環(huán)境是JDK1.6+TOMCAT+ORACLE。2. 開發(fā)工具是ECLIPSE（MYECLIPSE）b) 采用Dreamweaver或Frontpage制作工具實(shí)現(xiàn)網(wǎng)站建設(shè)1. 本網(wǎng)站的開發(fā)主要依靠Dreamweaver進(jìn)行設(shè)計(jì)，添加子頁面等。c) 采用JSP技術(shù)實(shí)現(xiàn)和后臺(tái)數(shù)據(jù)庫交換數(shù)據(jù)三、 數(shù)據(jù)庫設(shè)計(jì) 數(shù)據(jù)模型由三個(gè)要素組成：數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)操作和數(shù)據(jù)完整性約束。1.數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)用于描述系統(tǒng)的靜態(tài)特性，是所研究的對(duì)象類型的集合。數(shù)據(jù)模型按其數(shù)

4、據(jù)結(jié)構(gòu)分為層次模型、網(wǎng)狀模型和關(guān)系模型。2.數(shù)據(jù)操作數(shù)據(jù)操作用于描述系統(tǒng)的動(dòng)態(tài)特性，是指對(duì)數(shù)據(jù)庫中各種對(duì)象的實(shí)例允許執(zhí)行的操作的集合，包括操作及有關(guān)的操作集合。3.數(shù)據(jù)的約束條件數(shù)據(jù)的約束條件是一組完整性規(guī)則的集合。完整性規(guī)則是給定的數(shù)據(jù)及其聯(lián)系所具有的制約和存儲(chǔ)規(guī)則，用以限定符合數(shù)據(jù)庫狀態(tài)以及狀態(tài)的變化，以保證數(shù)據(jù)的正確、有效和相容。首先打開SQL Server本地客戶端的查詢分析器，如下圖所示，選擇或指定要連接的服務(wù)名稱，輸入帳戶和密碼。創(chuàng)建數(shù)據(jù)庫：在數(shù)據(jù)庫中的結(jié)構(gòu)如下圖：表：zilong此表為用戶管理表表結(jié)構(gòu)如圖：創(chuàng)建代碼如下：USE flexGO/* 對(duì)象: Table dbo.xim

5、ing 腳本日期: 01/12/2012 10:07:18 */SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE dbo.ximing(bh int IDENTITY(1,1) NOT NULL,userid nvarchar(50) NULL,password nvarchar(50) NULL,CONSTRAINT PK_zilong PRIMARY KEY CLUSTERED (bh ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KE

6、Y = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON PRIMARY) ON PRIMARY各字段說明：Bh編號(hào)，此字段為標(biāo)識(shí)字段，在進(jìn)行數(shù)據(jù)庫插入的時(shí)候自動(dòng)進(jìn)行增加，所以在insert語句中不需要表示。Userid用戶IDPassword用戶密碼創(chuàng)建數(shù)據(jù)庫sql語句 建表后，批量插入登錄名和密碼的數(shù)據(jù)本網(wǎng)站的登錄是利用JSP技術(shù)，與后臺(tái)數(shù)據(jù)庫連接，驗(yàn)證后才能進(jìn)行正確的進(jìn)入index.html四、 多媒體元素采集與制作圖片文件中的素材：Music和video文件中的素材圖片中的素材剪切利用了photoshop技術(shù)，如網(wǎng)站主頁的頁眉圖片

7、，文字的加入，圖片的渲染等等。五、 網(wǎng)頁設(shè)計(jì)步驟1. 網(wǎng)站的組織與策劃 （1） 定位網(wǎng)站的主題和名稱登陸頁面1. 主題要小而精定位要小，內(nèi)容要精。與個(gè)人息息相關(guān)的信息娓娓道來，讓人通過網(wǎng)頁來認(rèn)識(shí)自己。2. 如果題材已經(jīng)確定以后，圍繞題材給網(wǎng)站起一個(gè)名字突出個(gè)人的性格特點(diǎn)，本次的名稱為樂GUAN。（2） 定位網(wǎng)站的CI形象1. 設(shè)計(jì)網(wǎng)站的標(biāo)志(logo)顯示出來登陸者的盡可能多的信息。2.3. 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩以藍(lán)色為基礎(chǔ)，少量的其他顏色作為輔襯。4. 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體5. 設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語（3） 確定網(wǎng)站的欄目欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。一

8、般的網(wǎng)站欄目安排要注意以下幾方面：1. 要緊扣主題2. 設(shè)立最近更新或網(wǎng)站指南欄目1. 設(shè)立可以雙向交流的欄目留言本，可以讓瀏覽者留下他們的信息。（4） 確定網(wǎng)站的目錄結(jié)構(gòu)網(wǎng)站的目錄是指你建立網(wǎng)站時(shí)創(chuàng)建的目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的上傳維護(hù)，內(nèi)容未來的擴(kuò)充和移植有著重要的影響。1. 不要將所有文件都存放在根目錄下，會(huì)造成文件管理混亂2. 按欄目內(nèi)容建立子目錄3. 在每個(gè)主欄目目錄下都建立獨(dú)立的images目錄4. 目錄的層次不要太深5. 不要使用中文目錄6. 不要使用過長的目錄（5） 確定網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。

9、它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。本網(wǎng)站采用了星狀鏈接結(jié)構(gòu)，各欄目之間可以相互訪問。（6） 設(shè)計(jì)網(wǎng)站的整體風(fēng)格風(fēng)格(style)是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)"整體形象"包括站點(diǎn)的CI（標(biāo)志，色彩，字體，標(biāo)語），版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。風(fēng)格是獨(dú)特的，是站點(diǎn)不同與其他網(wǎng)站的地方?；蛘呱?，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨(dú)有的。風(fēng)格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個(gè)站點(diǎn)的個(gè)性，情緒。本網(wǎng)站采用了亮色系為主的色調(diào)，給人一種明快簡潔的訪問感覺，

10、同時(shí)通過文字與畫面以及視頻和歌曲，來表達(dá)自己樂觀向上的人生態(tài)度。2. 主頁設(shè)計(jì)在這里我們應(yīng)該遵循突出重點(diǎn)、平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼的位置 ，然后在考慮交要模塊的排放。我們可以根據(jù)平面設(shè)計(jì)和網(wǎng)頁制作的技巧，對(duì)整個(gè)布局進(jìn)行精雕細(xì)琢，以期達(dá)到更好的效果。其它頁面的設(shè)計(jì)應(yīng)該根據(jù)首頁的設(shè)計(jì)風(fēng)格進(jìn)行設(shè)計(jì)。效果圖已在上面展示。3媒體素材采集制作應(yīng)用所學(xué)到的多媒體技術(shù)，自己收集、整理、制作相關(guān)素材，要求利用多媒體信息編碼技術(shù)，壓縮信息量大的素材，以加快網(wǎng)頁的瀏覽速度。（1） 素材類型：文本、聲音、圖像、動(dòng)畫、視頻等。（2） 多媒體素材收集的依據(jù)與原則（3） 制作多媒體素材的常

11、用軟件：文字軟件（Windows記事本、Word、WPS、Excel、COOL 3D等）；圖像軟件（Windows畫圖、Photoshop、Fireworks等）；聲音軟件（Windows錄音機(jī)、CoolEdit、Winamp、豪杰超級(jí)解霸等）；動(dòng)畫軟件（Gif Animator、Flash、Director、3D MAX等）；視頻軟件（Windows Media Player、超級(jí)解霸、Premiere、會(huì)聲會(huì)影等）。（4） 素材格式：實(shí)踐中常會(huì)出現(xiàn)由于圖片、音頻、動(dòng)畫和視頻的存儲(chǔ)格式選擇不當(dāng)，造成多媒體課件占用空間大、品質(zhì)低的問題，因此平衡文件大小與質(zhì)量之間的關(guān)系是制作課件首要考慮的事情。

12、圖片素材：一般使用JPG格式，大小控制在100200KB之間；如果涉及圖形，一般使用GIF格式，大小控制在100K內(nèi)。音頻素材：一般使用WMA或者M(jìn)P3格式的音頻文件，流量控制在16128Kb/s之間。 動(dòng)畫素材：一般使用GIF和SWF格式的動(dòng)畫文件，前者適用小卡通動(dòng)畫，大小控制在100K內(nèi)，后者適用于各種類型的動(dòng)畫，交互性很強(qiáng)，播放暢快，大小一般控制在10M內(nèi)。 視頻素材：常使用WMV格式的視頻文件，流量控制在250KB/S左右。4. 數(shù)據(jù)庫設(shè)計(jì)是指根據(jù)需求，在某一具體的數(shù)據(jù)庫管理系統(tǒng)上，設(shè)計(jì)數(shù)據(jù)庫的結(jié)構(gòu)和建立數(shù)據(jù)庫的過程。步驟: 需求分析、概念設(shè)計(jì)、邏輯設(shè)計(jì)、物理設(shè)計(jì)、驗(yàn)證設(shè)計(jì)、運(yùn)行與維護(hù)

13、設(shè)計(jì)。需求分析階段 (設(shè)計(jì)數(shù)據(jù)庫之前) （1） 了解網(wǎng)站業(yè)務(wù)，理解需求 （2） 重視輸入輸出在定義數(shù)據(jù)庫表和字段需求（輸入）時(shí)，首先應(yīng)檢查現(xiàn)有的或者已經(jīng)設(shè)計(jì)出的報(bào)表、查詢和視圖（輸出）以決定為了支持這些輸出哪些是必要的表和字段。 （3） 創(chuàng)建數(shù)據(jù)字典和ER圖表ER 圖表和數(shù)據(jù)字典可以讓任何了解數(shù)據(jù)庫的人都明確如何從數(shù)據(jù)庫中獲得數(shù)據(jù)。ER圖對(duì)表明表之間關(guān)系很有用，而數(shù)據(jù)字典則說明了每個(gè)字段的用途以及任何可能存在的別名。對(duì)SQL 表達(dá)式的文檔化來說這是完全必要的。 （4） 定義標(biāo)準(zhǔn)的對(duì)象命名規(guī)范數(shù)據(jù)庫邏輯設(shè)計(jì):（1） 表和字段的設(shè)計(jì)（2） 選擇鍵和索引（3） 數(shù)據(jù)庫完整性設(shè)計(jì)數(shù)據(jù)庫測試:建立或者修

14、訂數(shù)據(jù)庫之后，必須用新輸入的數(shù)據(jù)測試數(shù)據(jù)字段。最重要的是，讓用戶進(jìn)行測試并且同用戶一道保證選擇的數(shù)據(jù)類型滿足網(wǎng)站要求。測試需要在把新數(shù)據(jù)庫投入實(shí)際服務(wù)之前完成。5.測試網(wǎng)頁的測試包括兼容性測試，即指在不同公司的瀏覽器，不同版本的瀏覽器中運(yùn)行的兼容性；鏈接測試，檢查是否有孤立的鏈接；實(shí)地測試，把網(wǎng)頁上傳到Internet服務(wù)器上，測試鏈接、下載速度等問題。經(jīng)過在本地電腦上測試，瀏覽速度還是可以的，由于實(shí)驗(yàn)條件有限，上傳到網(wǎng)上進(jìn)行實(shí)際測試沒能實(shí)現(xiàn)，對(duì)比本地的瀏覽速度，如果再簡略一下圖片的大小和適當(dāng)剪切音頻和視頻或者改變編碼，一定能達(dá)到真正下載的速度。六設(shè)計(jì)環(huán)境硬件環(huán)境：高檔次多媒體計(jì)算機(jī)軟件環(huán)境：1. 操作系統(tǒng)：Windows7/2000/XP/NT（裝有PWS或IIS服務(wù)器）2. 制作工具：Dreamweaver4.0或以上版本3. 瀏 覽 器：Inter