《多媒體技術基礎》網(wǎng)絡開放課網(wǎng)站建設3

1、<p><b>　　河北農(nóng)業(yè)大學</b></p><p>　　本科畢業(yè)論文(設計)</p><p>　　題 目：《多媒體技術基礎》網(wǎng)絡開放課網(wǎng)站建設</p><p>　　學 院： 信息科學與技術學院 </p><p>　　專 業(yè) 班 級： 計專升本1202班

2、 </p><p>　　學 號： 2012232010130 </p><p>　　學 生 姓 名： 王麗娟 </p><p>　　指導教師姓名： 趙 洋 </p><p>　　指導教師職稱：

3、 副教授 </p><p>　　2014 年 6 月 1 日</p><p><b>　　摘要</b></p><p>　　在信息技術飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設計尤為重要。</p&g

4、t;<p>　　網(wǎng)頁設計作為用戶界面交互設計的延伸，是在新的媒體和新的技術支持下實現(xiàn)一個全新的設計創(chuàng)作領域。設計創(chuàng)作網(wǎng)頁應遵循其特有的特點和結構思路，具備實際可行性和外觀的時尚。</p><p>　　本論文講述了網(wǎng)站建設的一般步驟，并結合豐富的色彩應用與網(wǎng)頁設計理論，以《多媒體技術基礎》網(wǎng)絡開放課作為網(wǎng)站建設的主要內(nèi)容，介紹了網(wǎng)站的建設的流程、步驟、以及一些設計中的要素和技巧，例如框架、CSS樣式的

5、使用、javascript技術的應用等等。采用Dreamweaver、Photoshop、flash等作為主要制作工具。網(wǎng)站的內(nèi)容包括以下幾個主要組成部分：教學大綱、授課計劃、課程教案、電子課件、實驗指導、課程試卷等模塊。本文從該網(wǎng)站的最初采集到后期開發(fā)的整個過程加以整理、編輯成文，同時采用圖文并茂的形式，不僅增加了文章的可讀性，同時又可以較為直觀的把網(wǎng)站呈現(xiàn)在人們眼前。</p><p>　　關鍵字：網(wǎng)頁設計&#

6、160;  框架  CSS     網(wǎng)站建設  色彩</p><p><b>　　Abstract</b></p><p>　　With the rapid development of information technology today, the way peo

7、ple access to information is more from the internet.To attract the user is excellent visual effects, abundant information, use convenient Webpage, so Webpage design is particularly important.</p><p>　　Webpag

8、e design as an extension of interaction design of user interface, is the realization of a new design in the field of new media and new technologies.</p><p>　　Design Webpage should follow its unique character

9、istics and structure of thought, have the practical feasibility and the appearance of fashion.</p><p>　　This paper describes the general steps of website construction, combined with the application of color

10、design theory and Webpage rich,to "open class" network based multimedia technology as the main content of the website construction,</p><p>　　the website construction process, steps, and some design

11、 elements and skills, such as frame, CSS style, use JavaScript technology application.Using Dreamweaver, Photoshop, flash as the main tool.The content of the website includes mainly the following parts: the teaching outl

12、ine, teaching plan, teaching plan, electronic courseware, experimental guidance, curriculum test module.This article from the site of the original acquisition to the whole process of late development of tidying up, editi

13、ng w</p><p>　　Keywords：Webpage design  Layout css website construction Color</p><p><b>　　目錄</b></p><p><b>　　第一章 緒論1</b></p><p><b

14、>　　1.1 概要1</b></p><p>　　1.2網(wǎng)頁制作的重要性及現(xiàn)狀1</p><p>　　第二章 網(wǎng)頁需求分析1</p><p>　　2.1 可行性分析1</p><p>　　2.1.1網(wǎng)站主題的可行性1</p><p>　　2.1.2 網(wǎng)站頁面設計的可行性2</p&g

15、t;<p>　　2.2 網(wǎng)站需求分析2</p><p>　　2.2.1建站目的2</p><p>　　2.2.2技術需求2</p><p>　　第三章 網(wǎng)站建設的流程 2</p><p>　　第四章 網(wǎng)頁制作 3</p><p>　　4.1 制作步驟 3<

16、;/p><p>　　4.2 制作網(wǎng)頁的要素 4</p><p>　　4.2.1 網(wǎng)頁的整體布局設計  4</p><p>　　4.2.2網(wǎng)頁設計中色彩的運用  5</p><p>　　4.2.3網(wǎng)頁形式與內(nèi)容相統(tǒng)一 5</p><p>　　4.3 細節(jié)的把

17、握 5</p><p>　　4.3.1 顏色。 6</p><p>　　4.3.2線條的運用。 6</p><p>　　4.3.3圖標。 6</p><p>　　4.3.4文字。 6</p><p>　　4.4 常用工具介紹 6</

18、p><p>　　第五章 《多媒體技術基礎》網(wǎng)絡開放課網(wǎng)頁制作實例7</p><p>　　5.1 網(wǎng)站制作過程7</p><p>　　5.2 網(wǎng)頁層次結構7</p><p>　　5.3 網(wǎng)站頁面的相關展示及代碼8</p><p><b>　　結論16</b></p><p&

19、gt;<b>　　參考文獻17</b></p><p><b>　　致謝17</b></p><p><b>　　第一章 緒論</b></p><p><b>　　1.1 概要</b></p><p>　　隨著Internet的誕生和發(fā)展，許多人不再

20、僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設計而言，網(wǎng)頁設計具有更多的新穎性，更多可以表現(xiàn)的手法。結合本人的實習過程，現(xiàn)就網(wǎng)站建設與管理過程中，網(wǎng)頁設計與制作的具體經(jīng)歷，包括：網(wǎng)頁設計與制作過程中的網(wǎng)頁布局、色彩構置，框架結構等相關事項做以下論述。</p><p>　

21、　所謂網(wǎng)站(Website)，就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關的網(wǎng)路服務（網(wǎng)絡服務）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務。</p><p>　　1.2網(wǎng)頁制作的重要性及現(xiàn)狀</p

22、><p>　　如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的各個層面。網(wǎng)站內(nèi)容既豐富又全面，滿足了各種不同需求的瀏覽者，正當網(wǎng)絡作為第四媒體，逐漸走向成熟和完善的時候，網(wǎng)頁設計業(yè)也逐步脫離了傳統(tǒng)廣告設計的范疇，形成特殊而獨立的體系。同時這一現(xiàn)象也表明了，我們對網(wǎng)頁設計的視覺審美以及網(wǎng)站功能應用等多個方面的認知達到了新的高度。</p><p>　　網(wǎng)頁不光是把各種信息放上去，能看就行是遠遠不夠的。要考慮受眾如

23、何能更多的和更有效率的接收網(wǎng)頁上的信息，并且給他們留下良好的印象，促進網(wǎng)站的運營。這就要求綜合考慮，設計出美觀合理的頁面。</p><p>　　迄今為止，我國對網(wǎng)頁設計這一課題的系統(tǒng)研究還略顯薄弱，特別是在藝術設計領域對網(wǎng)頁設計的探討尤顯不足，至今未能提出系統(tǒng)的設計理論，與指導原則。對網(wǎng)頁設計進行系統(tǒng)性的研究，將視覺傳達設計的基本原則創(chuàng)造性的應用于網(wǎng)頁設計之中確實是當務之急，也是促進我國網(wǎng)絡業(yè)及網(wǎng)絡文化發(fā)展的重要

24、環(huán)節(jié)。</p><p>　　第二章 網(wǎng)頁需求分析</p><p><b>　　2.1 可行性分析</b></p><p>　　2.1.1網(wǎng)站主題的可行性</p><p>　　一般來說一個網(wǎng)站內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。本網(wǎng)站主要就是針對《多媒體技術基礎》課程的，包括教學大綱、授課計劃、課程教案

25、、電子課件、實驗指導、課程試卷六個模塊，內(nèi)容清晰，有條理。并沒有保羅萬象，這往往會失去網(wǎng)站的特色，也會帶來高強度的勞動，給網(wǎng)站的及時更新帶來困難。</p><p>　　2.1.2 網(wǎng)站頁面設計的可行性</p><p>　　由于越來越多的人開始建立自己網(wǎng)站，網(wǎng)站除了具有傳播信息的功能，還往往代表個人形象。雖然HTML語言提供了對常用windows標準控件的支持，但是由于Windows標準控件

26、的性狀和顏色十分單一，網(wǎng)頁的視覺效果可能會很差。</p><p>　　因此，本網(wǎng)站并沒有單純的采用HTML來制作網(wǎng)頁，而是采用div+css的方式來創(chuàng)建表格布局，并且在其中加入JavaScript等動態(tài)效果，使頁面看起來更有動感。</p><p>　　2.2 網(wǎng)站需求分析</p><p><b>　　2.2.1建站目的</b></p>

27、;<p>　　Internet是目前世界上最大的計算機互聯(lián)網(wǎng)絡，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡連接成了一個整體。作為Internet上一種先進的，易于被人們接受的信息檢索手段，Word Wide Web（建成www）發(fā)展十分迅速，成為目前世界上最大的信息資源寶庫。</p><p>　　通過建立一個課程共享網(wǎng)站，可以迅速融入到互聯(lián)網(wǎng)中，和世界各地連成一個整體。擁有了這種傳播媒介，人們就可以輕松在

28、網(wǎng)上找到多媒體課程的相關資料。</p><p><b>　　2.2.2技術需求</b></p><p>　　網(wǎng)頁的版面設計需要Dreamweaver來實現(xiàn)。需要精通Html、Div+CSS等網(wǎng)絡編程語言。</p><p>　　網(wǎng)站LOGO，需要用PS來設計。需要有一定的審美能力、設計能力，使網(wǎng)站的主題突出鮮明。</p><p

29、>　　動態(tài)頁面設計需要有JavaScript等技術。</p><p>　　發(fā)布站點需要對互聯(lián)網(wǎng)技術有一定的了解，并熟悉發(fā)布流程。</p><p>　　第三章 網(wǎng)站建設的流程 </p><p><b>　　定義合適的域名。</b></p><p>　　由域名構成的網(wǎng)址會像商標一樣，有助于將來塑造網(wǎng)上的形象

30、。域名除了要符合公司的性質以及信息內(nèi)容的特征外，還要具有簡潔、易記、具有沖擊力的特點。 </p><p><b>　　租用虛擬服務器。</b></p><p>　　有了域名后，就需要一個空間存放網(wǎng)站，這個空間就是Internet上的服務器。一般虛擬主機提供商都能向用戶提供大容量、高速度的服務器，用戶可根據(jù)網(wǎng)站的內(nèi)容設置及其發(fā)展前景來選擇。 <

31、/p><p><b>　　設計網(wǎng)頁。</b></p><p>　　網(wǎng)頁的設計制作可以自己完成，也可以通過虛擬主機提供商或專業(yè)的網(wǎng)頁設計制作商來完成。設計網(wǎng)頁前要收集所有需要放在網(wǎng)站上的文本資料、圖片等，并盡量用文字詳細說明制作的框架結構，將收集的材料提供給網(wǎng)頁設計者。 </p><p><b>　　ICP備案。</b>

32、;</p><p>　　網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活動，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被查處以后關停。ICP備案可以自主通過官方備案網(wǎng)站 http://www.miibeian.gov.cn 在線備案或者通過當?shù)仉娦挪块T兩種方式來進行備案。</p><p>　　第四章 網(wǎng)頁制作 </p><

33、p><b>　　4.1 制作步驟 </b></p><p>　　1. 確定網(wǎng)站主題 ：網(wǎng)站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。 </p><p>　　2. 搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然

34、后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。 </p><p>　　3. 規(guī)劃網(wǎng)站 ：一個網(wǎng)站設計得成功與否，很大程度上決定于設計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結構、欄目的設置、網(wǎng)站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有

35、成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。 </p><p>　　4. 選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。 </p><p>　　5. 制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復雜而

36、細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內(nèi)容，然后再設計復雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。</p><p>　　4.2 制作網(wǎng)頁的要素 </p><p>　　4.2.1 網(wǎng)頁的整體布局設計&#

37、160; </p><p>　　網(wǎng)頁設計作為一種視覺語言，要講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，應充分加以利用和借鑒。版式設計通過文字圖形的空間組合，表達出和諧與美。一個優(yōu)秀的網(wǎng)頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關系。</p>

38、<p>　　常見網(wǎng)頁版式布局結構有以下幾種： </p><p>　　兩欄式結構，即頁面頂部為網(wǎng)站標志或廣告條，下面分為左右兩欄，一般左欄式導航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。</p><p>　　三欄式結構是一些大型網(wǎng)站常用的布局結構，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信

39、息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式。</p><p>　　“三”型結構，這種結構多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點是分類清晰，展示方便。</p><p>　　左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導航部分，右邊是與導航相對應的內(nèi)容。左右框架型的結果非常清晰，內(nèi)容一目了然，便于信息的查詢。&

40、lt;/p><p>　　上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整體為橫向分布，上面為導航，中間的大展式窗口很突出，整個網(wǎng)站顯得簡潔明亮，這種結構適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。</p><p>　　Flash型主要采用現(xiàn)在流行的Flash技術，頁面表達的內(nèi)容較為豐富，給人視覺和聽覺上很大的沖擊，處理得當會達到Web頁面難以達到的效果。</p><p

41、>　　網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構成一個網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設計是指對網(wǎng)站整體頁面的設計，包括頁面風格、配色、布局、內(nèi)容等。網(wǎng)頁設計包含的內(nèi)容非常多，大體分為兩個方面：一方面是純網(wǎng)站本身的設計，如文字、排版、圖片制作、平面設計、靜態(tài)圖文和動態(tài)聲音、影像等；另一方面是網(wǎng)站的延伸設計，包括網(wǎng)站主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。 </p><p>　　

42、設計頁面的第一步就是設計片面布局，就像報刊雜志版面設計一樣，我們可以看作一張報約或者一份雜志來進行排版布局。</p><p>　?。?） 草稿  新頁面就像一張白紙，沒有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力、創(chuàng)造力，將想象的布局到上面去。這是原創(chuàng)階段，你不必講究細膩工整，你也可在草稿本上先畫出整個布局框架，把多個版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住

43、PHOTOSHOP或其他工具軟件來完成。 </p><p>　?。?）粗略布局  在草稿的基礎上，將需要的功能模塊放到頁面上去，這時要遵循突出重點、整體協(xié)調(diào)的原則，首先將網(wǎng)站標志、導航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。 </p><p>　?。?） 定稿  定稿即將粗略布局精細化、具體化，完

44、成整個頁面的設計。</p><p>　　頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進程，交給程序員添加程序。</p><p>　　4.2.2網(wǎng)頁設計中色彩的運用  </p><p>　　色彩是藝術表現(xiàn)的要素之一，在網(wǎng)

45、頁設計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，一般暖色較冷色的記憶性更強一些。色彩還具有聯(lián)想與象征的特質，如紅色象征血、太陽；藍色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進行虛擬店面的頁面設計時，應使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強人們的購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色

46、應用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進行網(wǎng)頁設計時，更應該按照其中的VI進行色彩運用。在色彩的運用過程中，還應注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡

47、雅的顏色；生活在“沙漠”中的人喜歡綠色。在設計中要考慮眾多因素。</p><p>　　4.2.3網(wǎng)頁形式與內(nèi)容相統(tǒng)一 </p><p>　　要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結構，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設計中

48、，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素，要使用點、線、面的互相穿插、互相襯托、互相補充構成最佳的頁面效果。網(wǎng)頁設計中點、線、面的運用并不是孤立的，很多時候都需要將它們結合起來，表達完美的設計意境。</p><p>　　4.3 細節(jié)的把握 </p><p>　　網(wǎng)站的品

49、位，除了頁面本身整體的視覺效果外，往往更突出在一些細節(jié)上，只有把握住細節(jié)，才能更好地提高瀏覽者的使用友好度，給瀏覽者留下深刻的印象。 </p><p>　　4.3.1 顏色。 </p><p>　　在初學網(wǎng)頁設計的時候，在用色方面要非常注意，如果對網(wǎng)頁用色沒有太大的把握，那么就先選擇好網(wǎng)頁的基本色調(diào)，然后針對這一種顏色去進行變化，如需加其他顏色，可以試著加些灰

50、色，因為灰色是中色調(diào)，不會對頁面顏色造成太大的沖突。這樣做出的網(wǎng)頁整體顏色會非常協(xié)調(diào)統(tǒng)一。</p><p>　　4.3.2線條的運用。 </p><p>　　很多朋友在制作網(wǎng)頁的時候，在兩塊過渡的地方，如banner和導航條之間會用一條細線區(qū)分開，此時往往會畫上一條直直的線，這樣給人感覺會很突兀</p><p><b>　　4.3.3圖標。

51、60;</b></p><p>　　網(wǎng)站中在各個標題的前面適當?shù)募有﹫D標點綴網(wǎng)頁，可以使網(wǎng)頁效果更加出彩，但是切忌網(wǎng)頁圖標使用過多，圖標的色調(diào)也要一致，避免雜亂。</p><p><b>　　4.3.4文字。 </b></p><p>　　網(wǎng)站中文字的運用，用戶在瀏覽網(wǎng)頁時，主要是要看網(wǎng)頁當中的文字內(nèi)容，所以要特別注意文字

52、的處理。一是文字的顏色不要和背景顏色相近，這樣用戶在瀏覽文字信息時會非常的吃力；二是不要亂用字體，你使用的字體在本機上可以顯示，但是到了別人的電腦上就不一定能顯示出來了；三是注意文字之間的行距，通常我們不對文字進行行距的設置時，文字間的行距會非常??；影響頁面的美觀度，注意文字間的行距，使其不會顯得特別擠，做到寬松有序。</p><p>　　4.4 常用工具介紹 </p><p>

53、　　Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。</p><p>　　FlashPaper 是Macromedia推出的一款電子文檔類工具，通過使用本程序，你可以將需要的文檔通過簡單的設置轉換為SWF格式的Flash文件，

54、原文檔的排版樣式和字體顯示不會受到影響，這樣做的好處是不論對方的平臺和語言版本是什么，都可以自由的觀看你所制作的電子文檔動畫，并可以進行自由的放大，縮小和打印，翻頁等操作，對文檔的傳播非常有好處，而且由于Flash文件的在各大瀏覽器中的普及性和強大的可調(diào)節(jié)性。 </p><p>　　Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出

55、于一體的圖形圖像處理軟件，深受廣大平面設計人員和電腦美術愛好者的喜愛。</p><p>　　Flash是美國Macromedia公司所設計的一種二維矢量動畫軟件（現(xiàn)Adobe公司產(chǎn)品），用于設計和編輯Flash文檔，最新版本為：Adobe Flash CS5。Flash通常也指Macromedia Flash Player（現(xiàn)Adobe Flash Pl

56、ayer），用于播放Flash文檔</p><p>　　Fireworks是網(wǎng)頁開發(fā)圖形處理工具，可以做出矢量的圖形，主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實用，而且學起來也比Photoshop易上手，是一個入門級的網(wǎng)頁設計軟件。</p><p>　　《多媒體技術基礎》網(wǎng)絡開放課網(wǎng)頁制作實例</p><p>　　5.1 網(wǎng)站制作過程<

57、;/p><p>　　分析網(wǎng)站建設的類型，并參考相關類型的網(wǎng)站，結合自己的實際經(jīng)驗畫出大概的框架圖，并標明其用途和要實現(xiàn)的功能。本網(wǎng)站為左右型，左邊為導航欄，右側為主要內(nèi)容。 </p><p>　　2．利用PS來進行具體的設計，利用輔助線畫出框架圖，不同模塊之間要畫兩條輔助線，并留一定的距離，便于對網(wǎng)頁的控制，接下來便可以制作網(wǎng)站的logo、廣告條、導航條等主要內(nèi)容，然后依次完成其他模

58、塊的制作。 </p><p>　　3．對色彩、文字的排版、導航條、底部內(nèi)容進行細化，使網(wǎng)站達到一定的品質感，完成首頁的全部制作。 </p><p>　　4.首頁確定以后，便開始內(nèi)頁的制作，內(nèi)頁的制作相對簡單，保持首頁的整體風格不變，對相應的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個即可，內(nèi)頁制作完成后，完成整個網(wǎng)頁的設計。</p><p>　

59、　5.2 網(wǎng)頁層次結構</p><p>　　5.3 網(wǎng)站頁面的相關展示及代碼</p><p>　　（1）主頁部分：本網(wǎng)頁主要由HTML靜態(tài)頁面組成，由div標簽布局的方式</p><p><b>　　代碼：</b></p><p><b>　　#body {</b></p><p

60、>　　position: relative;</p><p>　　width: 980px;</p><p>　　margin: 0 auto;</p><p>　　text-align: left;</p><p>　　clear: both;</p><p><b>　　}</b><

61、;/p><p>　　.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</p><p>　　/*__________________________________________________________________________</p><p

62、><b>　　*/</b></p><p>　　.entry { position: relative;}</p><p>　　.align_center img, .entry_image img, .grid .entry_content p,</p><p>　　.more_news .image img, .style_box .

63、box_header,</p><p>　　.caption img, .comments img, .tabNavigation { margin: 0 !important;}</p><p>　　.grid ul { list-style: none; padding: 0 !important; margin: 0 !important;}</p><p>

64、　　.socials {</p><p>　　width: 35px;</p><p>　　position: absolute;</p><p>　　right: -44px;</p><p><b>　　top: 8px;</b></p><p>　　padding-bottom: 10px;

65、}</p><p>　　.socials a { display: inline-block;}</p><p>　　.b_circle {</p><p>　　width: 35px;</p><p>　　height: 35px;</p><p>　　border-radius: 50% 50% 50% 50%;&

66、lt;/p><p>　　-moz-border-radius: 50% 50% 50% 50%;</p><p>　　-webkit-border-radius: 50% 50% 50% 50%;</p><p>　　background-color: #7f7b79;</p><p><b>　　}</b></p&g

67、t;<p>　　.b_circle:hover { background-color: #413f3d;}</p><p>　　#top_link {</p><p>　　text-indent: -9999px;</p><p>　　cursor: pointer;</p><p>　　display: none;</p

68、><p>　　position: fixed;</p><p>　　z-index: 99;</p><p>　　left: 50%;</p><p><b>　　top: 90%;</b></p><p>　　margin-left: 500px;</p><p>　　bac

69、kground-image: url('../images/i_arrow_top.png');</p><p>　　background-repeat: no-repeat;</p><p>　　background-position: 50% 45%;</p><p><b>　　}</b></p><p

70、>　　.b_twitter {</p><p>　　background-image: url('../images/i_facebook.png');</p><p>　　background-repeat: no-repeat;</p><p>　　background-position: 49% 48%;</p><p

71、><b>　　}</b></p><p>　　.b_facebook {</p><p>　　background-image: url('../images/i_twitter.png');</p><p>　　background-repeat: no-repeat;</p><p>　　bac

72、kground-position: 50% 50%;</p><p><b>　　}</b></p><p><b>　　.b_rss {</b></p><p>　　background-image: url('../images/i_rss.png');</p><p>　　ba

73、ckground-repeat: no-repeat;</p><p>　　background-position: 50% 47%;</p><p><b>　　}</b></p><p>　　/*_________________________________________________________________________

74、_ # BODY - #leftside</p><p><b>　　*/</b></p><p>　　#left_side {</p><p>　　position: relative;</p><p>　　float: left;</p><p>　　padding: 3px 3px 5px;

75、</p><p>　　border: 1px solid #ebe9dd;</p><p>　　background-color: #e2e0d4;</p><p><b>　　}</b></p><p>　　.left_side {</p><p>　　position: relative;&l

76、t;/p><p>　　z-index: 3;</p><p>　　border: 1px solid #d8d4c8;</p><p>　　border-bottom: none;</p><p>　　background: #f3f2ee url('../images/left_bg_r.gif') repeat-y cente

77、r top;</p><p><b>　　}</b></p><p>　　.left_content {</p><p>　　width: 300px;</p><p>　　padding: 0 0 20px;</p><p>　　border-top: 1px solid #fff;</p

78、><p>　　border-bottom: 1px solid #fff;</p><p><b>　　}</b></p><p>　　.left_content > p { padding: 20px 20px 0; font-size: 11px; color: #a8a8a8; background: url('../image

79、s/h_line.gif') repeat-x center top;}</p><p>　　.logo { margin: 40px 75px; display: block;}</p><p><b>　　.dots {</b></p><p>　　display: block;</p><p>　　marg

80、in: 0 20px 40px;</p><p>　　height: 5px;</p><p>　　background: url('../images/dots.png') no-repeat center top;</p><p><b>　　}</b></p><p>　　（2）教學大綱模塊：<

81、;/p><p><b>　　代碼：</b></p><p>　　<div align="center" ></p><p>　　<embed src="../jiaoxuedagang/多媒體技術教學大綱.swf" width="600"

82、 height="650" align="middle"></embed></p><p><b>　　</div></b></p><p>　?。?）電子課件模塊：</p><p><b>　　代碼：</b></p>&

83、lt;p>　　<table width="200" border="0"></p><p><b>　　<tr></b></p><p>　　<td><a href="kejian01.html">第1章緒論與基礎知識</a></td&g

84、t;</p><p>　　<td><a href="kejian02.html">第2章數(shù)字音頻處理技術</a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p&g

85、t;<p>　　<td><a href="kejian03.html">第3章數(shù)字圖像技術</a></td></p><p>　　<td><a href="kejian04.html">第4章數(shù)據(jù)壓縮技術</a></td></p><p>&

86、lt;b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td><a href="kejian05.html">第5章動畫技術</a></td></p><p>　　<td><

87、;a href="kejian06.html">第6章多媒體的存儲</a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td><a href=&quo

88、t;kejian07.html">第7章網(wǎng)絡環(huán)境下的多媒體</a></td></p><p>　　<td><a href="kejian08.html">第8章多媒體設備簡介</a></td></p><p><b>　　</tr></b></

89、p><p><b>　　</table></b></p><p><b>　　代碼：</b></p><p><b>　　<div ></b></p><p>　　<font size="+2">&nbsp;&

90、nbsp;下載：<a href="../多媒體技術基礎/第1章緒論與基礎知識.ppt">第一章</a></font></p><p><b>　　</div></b></p><p>　　<div align="center" ></p><p>

91、;　　<embed src="../kejian/kejian01.swf" width="600" height="650"></embed></p><p><b>　　</div></b></p><p>　?。?）課程試卷模塊：</p><p&g

92、t;<b>　　（5）視頻教程：</b></p><p>　?。?）給頁面更換皮膚：</p><p><b>　　結論</b></p><p>　　網(wǎng)頁制作主要是利用圖形制作軟件和處理軟件進行網(wǎng)頁效果圖的制作。我們需要了解一個完整網(wǎng)站的制作過程，并知道網(wǎng)頁制作在網(wǎng)站制作中的作用。一方面結合具體的實例，多加練習，培養(yǎng)對于技術

93、的敏感和快速適應性，注意到技術變化帶來的各種新的可能性，消除技術所形成的障礙；另一方面要多方面、多角度地感受與掌握電腦設計的時尚語言，擴展對傳統(tǒng)設覺設計范疇的認識。</p><p>　　在搜集資料的過程中，我破天荒的去到學校圖書館搜集資料，還在網(wǎng)上查找各類相關資料，將這些寶貴的資料全部記在U盤上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫。然后我將收集到的資料仔細整理分類，及時拿給老師與同學進行溝通。&

94、#160;</p><p>　　5月初，資料已經(jīng)查找完畢了，我開始著手論文的寫作。在寫作過程中遇到困難我就及時上網(wǎng)找資料或者去吳老師處找一些比較好的范文來參考，并和同學互相交流。在大家的幫助下，困難一個一個解決掉，論文也慢慢成型。  </p><p>　　5月中旬，論文的大致思路已經(jīng)完成。在設計初期，由于沒有設計經(jīng)驗，覺得無從下手，空有很多設計思想，卻不知道應該如何寫，

95、經(jīng)過老師的指導，同學的幫忙。我的設計終于完成了 </p><p>　　下旬，當我終于完成了所有打字、繪圖、排版、校對的任務后整個人都很累，但同時看著電腦熒屏上的畢業(yè)設計稿件我的心里是甜的，我覺得這一切都值了。這次畢業(yè)論文的制作過程是我的一次再學習，再提高的過程。</p><p><b>　　參考文獻</b></p><p>　　[1]

96、鄧文淵.網(wǎng)頁制作高手[M].北京：人民郵電大學出版，2007</p><p>　　[2]李憲廣.網(wǎng)頁制作邊學邊用[M].北京：清華大學出版社， 2009</p><p>　　[3]網(wǎng)頁設計入門[EB/OL].http://www.xue8.com/sale/view.asp?Article ID=288 </p><p>　　[4]許凌

97、云，柳勇良.網(wǎng)頁設計全方位學習[M].北京：清華大學出版社，2008</p><p>　　[5]陳琳.photoshop cs3 入門實戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008</p><p>　　[6]焦慧.網(wǎng)頁制作基礎與典型范例[M].北京：電子工業(yè)出版社，2008</p><p>　　[7]戎馬工作室.Dreamweaver 

98、;8網(wǎng)站開發(fā)[M].北京：機械工業(yè)出版社，2006 </p><p>　　[8]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社</p><p>　　[9]何秀芳.網(wǎng)頁制作與網(wǎng)站建設課堂實錄[M].北京：人民郵電出版社. 2009</p><p>　　[10]孫連三.新編網(wǎng)頁制作與網(wǎng)站建設入門與提高[M

99、].北京：人民郵電出版社. 2008</p><p>　　[11]鄧文淵.網(wǎng)頁制作高手FLASH 8[M].北京：人民郵電出版社， 2007</p><p>　　[12]胡崧.超夢幻勁爆網(wǎng)頁[M].中國青年出版社.2008</p><p><b>　　致謝</b></p><p>　　值此論

100、文提交之際，我首先要向我的導師趙洋老師表示衷心的感謝。我的課題是在趙老師的悉心指導下完成的。在本次畢業(yè)設計的每一個地方都凝聚著趙老師的心血，沒有趙老師的悉心指導，就沒有本論文的順序完成。</p><p>　　趙洋老師以其嚴謹求實的治學態(tài)度、高度的敬業(yè)精神、兢兢業(yè)業(yè)的工作作風和大膽創(chuàng)新的進取精神對我產(chǎn)生重要影響，他淵博的知識、開闊的視野和敏銳的思維給了我深深的啟迪，并激勵我在今后的工作、學習和生活中，時刻保持勤奮刻

101、苦的工作態(tài)度和求實創(chuàng)新的敬業(yè)精神。同時，在此次畢業(yè)設計過程中我也學到了許多網(wǎng)站制作、photoshop、flash、多媒體技術等方面的知識，豐富了我的視野，使我的技能有了很大的提高。</p><p>　　本論文的順利完成，也離不開同學們和朋友們的關心和幫助。在論文設計的過程中，特別感謝我們宿舍成員給予的鼓勵和幫助，并且給我提出了許多寶貴意見，為我撰寫論文創(chuàng)造了一個良好的環(huán)境。從她們身上學到了一種勤勤懇懇、不急不躁