1、多媒體技術及應用 - 課程設計報告多媒體技術及應用課程設計報告課程名稱 多媒體技術及應用 設計題目 網頁設計與制作 專業(yè)班級學生姓名 學號指導教師起止日期 2019 年 9 月 2 日至 9 月 5 日數(shù)理與信息工程學院目錄摘要 ,1 關鍵字 ,1I円 門門門，門，門門門門門門門，*丿J J ，門門門門門門門，門門門門，*一、概述 ,21.1課題的意義和解決的問題 , ,2，門，門門J1.2系統(tǒng)實現(xiàn)的具體功能 ,31.3系統(tǒng)的特點與創(chuàng)新點 ,31.4軟件與硬件的運行環(huán)境 ,4二、功能需求分析 ,42.1課題的社會和技術背景 ,411 11 1*2.2客戶與功能的需求分析 ,52.3系統(tǒng)運行軟件

2、和硬件環(huán)境的分析及確定 ,62.4系統(tǒng)的具體功能要求 ,6三、系統(tǒng)設計 ,63.1軟件與開發(fā)平臺 ,63.2框架與模板間的聯(lián)系 ,73.3 項目的詳細設計 ,7四、技術實現(xiàn) ,84.1主要功能模板的實現(xiàn) ,84.2主要技術問題的解決方法 ,104.3亮點和創(chuàng)新點的實現(xiàn) ,11五、總結 ,12參考文獻 ,13附錄,14I 17 ，多媒體技術及應用設計者：莫仁宗 學號： 11600122摘 要 多媒體技術及應用是計算機科學與技術專業(yè)的一門專業(yè)選修課。課程綜合 講述了多媒體計算機的基本原理、關鍵技術及其開發(fā)和應用。在信息技術飛速發(fā)展的今天， 人們獲取信息的方式更多是來源于互聯(lián)網。而吸引瀏覽用戶的則是

3、視覺效果出色、信息量 豐富、使用起來便捷的網頁，所以網頁設計尤為重要。本文從網頁設計的角度出發(fā)，介紹 一些設計中要素和技巧，最為基本的框架和運用PS處理圖片，DW的使用，以及用 Adobepremiere 對一些視屏的剪輯等等。關鍵字：多媒體 網頁設計 框架 PS DW premiere一、 概述1.1課題的意義和解決的問題自己動手實踐制作 html網頁，初步了解 Dreamweaver軟件的功能布局和一些基本操 作；掌握對網頁內容排版的操作，做到網頁內容將來在瀏覽器中顯示效果美觀；初步了解 并可以使用腳本語言對網頁內容的控制，了解其基本語法結構；將自己做好的網頁放在上 面，以實現(xiàn)他人通過網絡

4、訪問到此網頁。調整好網頁布局，使其各表格應盡可能對齊，整 體界面簡潔、美觀。網頁應實現(xiàn)對輸入內容的糾錯檢驗，實現(xiàn)上傳照片的功能。要用Tomcat架構服務器，使做好的 html 網頁可以在其他電腦上通過地址訪問得到。1.2系統(tǒng)實現(xiàn)的具體功能制作一個網頁，使第三方可通過網絡訪問的我們的網頁。我會對想相關照片和視屏進 行處理，以便我的隊友可以快速的在網頁上添加照片與視屏。1.3系統(tǒng)的特點與創(chuàng)新點我們小組的作品首頁特點是整體框架干凈，唯美，有層次感。色調給人一種視覺美， 使第三方不會有視覺疲勞。而且，我們大膽的創(chuàng)新了欄目的信息多樣化。而，我對素材的 處理則十分的帶美感。1.4軟件與硬件的運行環(huán)境由于我

5、們小組的分工明確，對于后臺我不是十分了解。我們一般在XP的電腦系統(tǒng)中運行軟件，而我對照片和視頻的處理都是用PS CS5和premiere完成的。二、 功能需求分析2.1課題的社會和技術背景當今社會發(fā)展的速度非常快， 21 世紀電腦的飛速發(fā)展互聯(lián)網已成為人們快速獲取、發(fā) 布和傳遞信息的重要渠道，正以一種前所未有的沖擊力影響著人類的活動。雖然這個時代 準備過去，但下個時代大部分人都認為是移動信息時代。而，網頁的卻還要不停的發(fā)展， 所以網頁時代還有很長的路要走。今天的網頁技術已近是非常有火候的了，基本的問題都 是可以解決的。2.2客戶與功能的需求分析在 Internet 飛速發(fā)展的今天，互聯(lián)網已成為

6、人們快速獲取、發(fā)布和傳遞信息的重要 渠道，正以一種前所未有的沖擊力影響著人類的活動。它在人們政治、經濟、生活等各個方面發(fā)揮著重要的作用。因此網站建設在 Internet 應用上 的地位顯的格外重要，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分。現(xiàn)今的社會，人們已經離不開了網絡，網絡已經成為人與人之間交流的一種形式，它 能夠把事情的復雜化轉為簡單化，擺脫了時間和空間的限制。網站為很多人提供了一個網 絡生活空間，通過其網頁展示了企業(yè)介紹、城市文化、校園文化介紹、招商信息、加盟程 序、留言等一系列內容的介紹。為了更好的宣傳和服務于經濟發(fā)展，我通過制作一個網站 來介紹宣傳一下我的家鄉(xiāng)。本文比較系

7、統(tǒng)的闡述了有關網站建設方面的相關理論知識及該 網站開發(fā)設計，充分體現(xiàn)了計算機技術服務于經濟建設的重要思想。2.3系統(tǒng)運行軟件和硬件環(huán)境的分析及確定硬件：操作系統(tǒng)： Microsoft Windows XP Professional軟件： Macromedia Dreamweaver 8DreamweaverDreamweaver 是在網頁設計與制作領域中用戶最多、應用最廣、功能最強大的軟件，隨著Dreamweaver 8的發(fā)布，更堅定 Dreamweaver在該領域的地位。它集網頁設計、網站 開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網站設 計、開發(fā)、制作的首選工

8、具。 Adobe Photoshop CS5Adobe Photoshop 是公認的最好的通用平面美術設計軟件。由 Adobe 公司開發(fā)設計。 其用戶界面易懂，功能完善，性能穩(wěn)定，所以，在幾乎所有的廣告、出版、軟件公司， Photoshop 都是首選的平面工具。 Adobe premierePremiere 是視頻編輯愛好者和專業(yè)人士準備的必不可少的編輯工具。它可以提升您的 創(chuàng)作能力和創(chuàng)作自由度，它是易學、高效、精確的視頻剪輯軟件。 Premiere 提供了采集、 剪輯、調色、美化音頻、字幕添加、輸出、DVD刻錄的一整套流程，并和其他Adobe軟件高效集成，使您足以完成在編輯、制作、工作流上遇

9、到的所有挑戰(zhàn)，滿足您創(chuàng)建高質量作 品的要求2.4系統(tǒng)的具體功能要求 掌握對網頁內容排版的操作，做到網頁內容將來在瀏覽器中顯示效果美觀；初步了解 并可以使用腳本語言對網頁內容的控制，了解其基本語法結構；將自己做好的網頁放在上 面，以實現(xiàn)他人通過網絡訪問到此網頁。調整好網頁布局，使其各表格應盡可能對齊，整 體界面簡潔、美觀。網頁應實現(xiàn)對輸入內容的糾錯檢驗，實現(xiàn)上傳照片的功能。要用 Tomcat 架構服務器，使做好的 html 網頁可以在其他電腦上通過地址訪問得到。三、 系統(tǒng)設計3.1軟件與開發(fā)平臺Macromedia Dreamweaver 8, Adobe Photoshop CS5, Adob

10、e premiere3.2框架與模板間的聯(lián)系最開始網頁呈現(xiàn)在你面前的時侯，它就好像一張白紙，它需要任意揮灑設計才思。雖 然我們能控制一切你所能控制的東西，在開始的時候，但最好明白網頁布局的基本概念。網頁主要是做一個表格樣式，相對簡單。在做時，一開始可以多生成幾行幾列，方便 后面對單元格進行合并操作，最終調成自己需要的24 （行）X 6 （列）樣式。添加文本輸入框后，主要就是調整網頁布局。開始可以直接拖動來調整，但這往往會 牽一發(fā)而動全身，后面的調整動作很可能會把前面調好的部分再次破壞，所以應十分注意。 可以在大體調的差不多后，在左側點擊拆分，然后直接在文本框的代碼中調整數(shù)據(jù)大小， 來實現(xiàn)對文本

11、框長度的調整。我們的目的是使文本輸入框正好填充整個單元格，并且確保文本框左側的文字不會因 為太長兒發(fā)生折行現(xiàn)象，為照片上傳預留空間，調整好整個頁面的文字格式和大小以及各 邊框的顏色，最終目的是保證整個頁面整齊、簡潔、美觀3.3項目的詳細設計靜態(tài)頁面是網頁的代碼都在頁面中，不需要執(zhí)行 asp,php,jsp,.net 等程序生成客戶 端網頁代碼的網頁。靜態(tài)頁面不能自主管理發(fā)布更新的頁面 ,如果想更新網頁內容 , 要通過 FTP軟件把文件DOW下來用網頁制作軟件修改。但是靜態(tài)頁面最大的好處是下載速度快， 因為不需要程序運算和數(shù)據(jù)庫連接。常見的靜態(tài)頁面以.html 、.htm 為擴展名的。并非網站上

12、沒有動畫的就是靜態(tài)頁面。動態(tài)頁面是通過執(zhí)行asp 、 php、 jsp 、.net 等程序生成客戶端網頁代碼的網頁。動態(tài)頁面通常可以通過網站后臺管理系統(tǒng)對網站的內容進行更新管 理。發(fā)布新聞，發(fā)布公司產品，交流互動，博客，網上調查等，這都是動態(tài)網站的一些功 能，也是我們常見的。動態(tài)網頁是需要語言環(huán)境支持的，動態(tài)頁面常見的擴展名 有： .asp 、 .php 、 .jsp 、.cgi 等。動態(tài)頁面的“動態(tài)”是網站與客戶端用戶互動的意 思，而非網頁上有動畫的就是動態(tài)頁面 4 。動態(tài)網頁是最常用的網站建設的一種表達形式，其優(yōu)點在于可以根據(jù)先前所制定好的 程序界面，根據(jù)用戶的不同請求返回相應的數(shù)據(jù)。可以

13、說是一對多的關系。從而達到資源 的最大利用和節(jié)省服務器上的物理資源。如果今后需要改變站點風格，只需要重新制作前 臺所訪問的數(shù)據(jù)即可。只要數(shù)據(jù)庫結構不變，可以很快的進行改版的。四、 技術實現(xiàn)4.1 主要功能模板的實現(xiàn)網頁設計是一個互動的過程，不僅是設計師構思設計就可以完成的。從客戶提出需求 到最終發(fā)布，期間需要客戶與設計人員共同參與協(xié)商才可以，具體流程如下：首先，獲取客戶需求和資料。在設計網站頁面之前，設計師需要知道客戶的需求，從 而確定客戶建立網站的目的。客戶提出網站需求是非常重要的一個環(huán)節(jié)。沒有詳細的需求， 設計人員無法憑空進行設計制作。在這個步驟中，雙方的溝通與交流是非常重要的。其次，確定

14、網站內容。設計人員選擇適合自己的圖像編輯軟件、動畫制作軟件和網頁 制作軟件進行網頁的初步設計，這中間可能還需要和客戶進行多次溝通才能達到客戶滿意 的效果。在具體設計時，設計人員應該為網站定位一個主題，從而保證所有網頁都圍繞這 個主題進行設計制作，保證風格的和諧統(tǒng)一。然后，申請域名和空間。使用該方法能夠有效同步管理文件。還可以通過FTP軟件連接到服務器空間上，然后上傳文件。最后，后期維護。一般靜態(tài)網站上傳后，如果客戶方沒有專業(yè)人員維護，這樣就需要 設計人員從客戶方獲取新資料進行定期或不定期的更新。如果是動態(tài)網站，設計人員需要 負責培訓客戶方如何使用后臺管理，這樣客戶就可以自己通過后臺管理添加信息

15、，設計人 員只要及時更正動態(tài)網站的錯誤即可。網站實際上是由很多網頁組成的，那么網頁之間是如何聯(lián)系的呢？這就是本章要講的內容 網頁的“鏈接”。“鏈接”，又稱“超鏈接 ( Hyperlink ), 它作為網頁的橋梁。網頁中的很多對象都可以加入“鏈接”屬性。在Dreamweaver 8 中，如果以“鏈接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“E -mail鏈接”、“命名錨記鏈接”、“文件下載鏈接”和 “跳轉菜單”，共 8 種。4.2主要技術問題的解決方法由于小組的的分工，我會對一些圖片進行處理，有時會遇到點問題。比如，將一張婚紗照

16、的人物換到有浙師大的背景后，透明婚紗的部分不怎么好，后來 我將透明婚紗的部分復制一層，添加黑色蒙版，進行曲線調色，并調節(jié)這一圖層的透明體， 這樣透明婚紗就處理的差不多了，再用高斯模糊處理下，照片的效果就比較好了。還有對 一些網上照片素材的修復，有些照片的噪點比較多，我用PS CS5處理后效果也不怎么好，我就下載了一個濾鏡：Neatimage,對其進行了降噪處理這樣圖片的效果就挺好了。記得 有一張人物照，其眼睛部分不怎么突出，我就對其眼圈用橢圓工具建立選區(qū)，經過曲線， 涂抹處理。而,人物的雙眼皮非常不明顯,我就用鋼筆畫出其雙眼皮,填色,涂抹做出雙 眼皮。最后還對其頭發(fā)做了點高光部分處理。4.3亮

17、點和創(chuàng)新點的實現(xiàn)網站充斥著枯燥的設計,這樣一種標準化的界面可以使瀏覽更方便,但同時帶給用戶 一種很世俗的體驗,并不能與訪客產生一種積極的聯(lián)系。面對這種單調的設計,有一種解決方法,就是使用顏色。可能沒有其他設計元素能像 顏色一樣能影響人們對世界感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感 覺到舒適、敬畏,或者激動。在界面設計中,顏色組合對設計非常有用。可以區(qū)分設計讓 用戶更加難忘、引導用戶使用戶專注于交互、吸引用戶使頁面布局更舒適,更有魅力。我將網站的色調做的很醒目,尤其是一些照片比較讓人感覺深刻。五、 總結本設計根據(jù)課程論文要求細則的要求制作,功能基本實現(xiàn)。網頁對填寫的內容有一定 的

18、糾錯檢驗機制，大量尋找素材，上傳照片并做適當?shù)募舨茫陀肞S對一些特殊照片進行處理,以及運用 premiere 對一些視屏的剪輯。這是我首次運用 Dreamweaver、 java 語言進行網頁的制作,一切都是從零開始學習, 所以制作的時候難免會過于簡單,考慮的也不是很周全。在設計過程中不可避免地遇到了 各種各樣的問題，由于整個設計是我們小組三人一起完成的，而我的主要分工是用PS對框架的簡單處理，尋找合適的素材，對一些照片用PS進行美化或其他處理，以及對相關視屏用 premiere 剪輯。在制作的過程中碰到過一些比較棘手的問題都一一解決了，讓我們小組在解決問題方 面的能力得到了提高。當然，最終

19、的做品還是有一些不完善的地方，我們也不是非常滿意。雖然存在各種各 樣的問題，但是，這次動手實踐經歷的意義也是顯而易見的。整個開發(fā)的過程對我來說是 一次將理論應用于實踐的過程，是將以前所學知識充分利用的過程，是一次真正的實踐過 程。另外，親自動手也讓自己看到了自身能力的不足，看到了理想與現(xiàn)實之間的差距，這 一切都需要今后進一步加強學習理論知識與真正動手做一些課題來彌補。網頁設計與制作畢業(yè)設計是在指導教師的悉心指導下獨立完成的。雖然內容還有很多不足，但是我的確能夠感到在我制作過程中技能的提高。在今后的學習生活 中，我將不斷提高自己網頁設計與制作的能力和水平，從而彌補本次設計中的不足。雖然我在小組的

20、分工讓我沒有太深的對代碼進行處理，但是我也對代碼的編寫有了更 深的理解與掌握。對于網頁的排版的倒是深有體會，由于我不停的對網頁的排版進行更改， 所以對于排版我相信我以后會更加的掌握。還有以前我沒有接觸過Dreamweaver,經過這次的網頁制作我對Dreamweaver有了新的體會，我覺得以后再做網頁設計時可以靈活的運 用Dreamweaver。記得剛開的時候我找來的素材都是直接給隊友的，經過小組的協(xié)商后， 我會把所有的素材都經過 PS CS5處理后再給隊友，這樣減輕了隊友的壓力，還不知不覺 中提高了我對 PS的運用。最后有一段視頻的剪輯，雖然要給隊友的剪輯視頻不怎么搞笑， 但我后來經常的對許

21、多視頻進行剪輯，有時候不知不覺的沉浸在自己的搞笑氣氛中，當然， 最好的還是讓我體會到了視頻剪輯的快樂。記得以前我很少參加小組的共同活動，而這次我們三人一起完成了這個課題。有時候， 發(fā)現(xiàn)當自己和隊友在奮斗的時，自己會偷看一下隊友，發(fā)現(xiàn)隊友的激情與奮斗在激勵著我， 野激勵著我們這個團隊，還有奮斗時的隊友還挺可愛的。也不知道在我偷看隊友一眼的時 候，隊友是否也曾這樣悄悄的看過我，我想，應該是有的，這會讓我油然而生一種開心的 感覺。時間總是在悄悄的流逝，我相信我的隊友也會想我一樣，當回憶起那一起奮斗的日 子，我們的臉上會有一種笑容。我也堅信這種團隊精神會陪伴著我，讓我在往后的日子依 舊充滿對生活的向往與激情。當然，也許我們的導師對我沒有什么印象，但當老師指點我的那一剎那，老師偉大的 奉獻就已經深深的印在我的腦海。千年前的古人的那句：一日為師，終身為師。對于21世紀今天的我們此刻的心情依舊管用。我也曾想過假如我們老師不戴眼鏡會不會更加的有 男人味，我覺得不管帶不帶眼鏡，李老師依舊是那么的男人。在以后的學習與生活中，我 希望自己不會讓老師對我有所失望，因為我們是祖國的新動脈。這次的網頁設計與制作課題，讓我學到的不止是學習上的問題，更多的是為人處世總 體說來，在這次網頁設計中，學到了很多在課堂內所學不到的知識真正拓展了自己的能力， 是一次難得的歷練經歷收獲很大。參考文獻唐永明.