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

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

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

4、據結構分為層次模型、網狀模型和關系模型。2.數據操作數據操作用于描述系統的動態特性，是指對數據庫中各種對象的實例允許執行的操作的集合，包括操作及有關的操作集合。3.數據的約束條件數據的約束條件是一組完整性規則的集合。完整性規則是給定的數據及其聯系所具有的制約和存儲規則，用以限定符合數據庫狀態以及狀態的變化，以保證數據的正確、有效和相容。首先打開SQL Server本地客戶端的查詢分析器，如下圖所示，選擇或指定要連接的服務名稱，輸入帳戶和密碼。創建數據庫：在數據庫中的結構如下圖：表：zilong此表為用戶管理表表結構如圖：創建代碼如下：USE flexGO/* 對象: 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編號，此字段為標識字段，在進行數據庫插入的時候自動進行增加，所以在insert語句中不需要表示。Userid用戶IDPassword用戶密碼創建數據庫sql語句 建表后，批量插入登錄名和密碼的數據本網站的登錄是利用JSP技術，與后臺數據庫連接，驗證后才能進行正確的進入index.html四、 多媒體元素采集與制作圖片文件中的素材：Music和video文件中的素材圖片中的素材剪切利用了photoshop技術，如網站主頁的頁眉圖片

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

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

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

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

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

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

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

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