《多媒體技術(shù)基礎(chǔ)》網(wǎng)絡(luò)開放課網(wǎng)站建設(shè)

1、<p>　　河北農(nóng)業(yè)大學(xué)現(xiàn)代科技學(xué)院</p><p>　　本科畢業(yè)論文(設(shè)計(jì))</p><p>　　題 目：《多媒體技術(shù)基礎(chǔ)》網(wǎng)絡(luò)開放課網(wǎng)站建設(shè)</p><p>　　學(xué) 部： 工程技術(shù) </p><p>　　專業(yè)班級： 計(jì)算機(jī)科學(xué)與技術(shù)0901 </p><p>　　學(xué)

2、 號： 2010614530109 </p><p>　　學(xué)生姓名： 王煦 </p><p>　　指導(dǎo)教師姓名： 趙洋 </p><p>　　指導(dǎo)教師職稱： 副教授 </p><p>　　二O一四 年 六 月 日</p>

3、<p><b>　　摘要</b></p><p>　　在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計(jì)尤為重要。</p><p>　　網(wǎng)頁設(shè)計(jì)作為用戶界面交互設(shè)計(jì)的延伸，是在新的媒體和新的技術(shù)支持下實(shí)現(xiàn)一個(gè)全新的設(shè)計(jì)創(chuàng)作領(lǐng)域。設(shè)計(jì)創(chuàng)作網(wǎng)頁應(yīng)遵循其特有的特點(diǎn)和結(jié)構(gòu)思

4、路，具備實(shí)際可行性和外觀的時(shí)尚。</p><p>　　本論文講述了網(wǎng)站建設(shè)的一般步驟，并結(jié)合豐富的色彩應(yīng)用與網(wǎng)頁設(shè)計(jì)理論，以《多媒體技術(shù)基礎(chǔ)》網(wǎng)絡(luò)開放課作為網(wǎng)站建設(shè)的主要內(nèi)容，介紹了網(wǎng)站的建設(shè)的流程、步驟、以及一些設(shè)計(jì)中的要素和技巧，例如框架、CSS樣式的使用、javascript技術(shù)的應(yīng)用等等。采用Dreamweaver、Photoshop、flash等作為主要制作工具。網(wǎng)站的內(nèi)容包括以下幾個(gè)主要組成部分：教學(xué)

5、大綱、授課計(jì)劃、課程教案、電子課件、實(shí)驗(yàn)指導(dǎo)、課程試卷等模塊。本文從該網(wǎng)站的最初采集到后期開發(fā)的整個(gè)過程加以整理、編輯成文，同時(shí)采用圖文并茂的形式，不僅增加了文章的可讀性，同時(shí)又可以較為直觀的把網(wǎng)站呈現(xiàn)在人們眼前。</p><p>　　關(guān)鍵字：網(wǎng)頁設(shè)計(jì)   框架  CSS     網(wǎng)站建設(shè)  色彩<

6、/p><p><b>　　Abstract</b></p><p>　　With the rapid development of information technology today, the way people access to information is more from the internet.To attract the user is excel

7、lent visual effects, abundant information, use convenient Webpage, so Webpage design is particularly important.</p><p>　　Webpage design as an extension of interaction design of user interface, is the realiza

8、tion of a new design in the field of new media and new technologies.</p><p>　　Design Webpage should follow its unique characteristics and structure of thought, have the practical feasibility and the appearan

9、ce of fashion.</p><p>　　This paper describes the general steps of website construction, combined with the application of color design theory and Webpage rich,to "open class" network based multimedi

10、a technology as the main content of the website construction,</p><p>　　the website construction process, steps, and some design elements and skills, such as frame, CSS style, use JavaScript technology applic

11、ation.Using Dreamweaver, Photoshop, flash as the main tool.The content of the website includes mainly the following parts: the teaching outline, teaching plan, teaching plan, electronic courseware, experimental guidance,

12、 curriculum test module.This article from the site of the original acquisition to the whole process of late development of tidying up, editing w</p><p>　　Keywords：Webpage design  Layout css website c

13、onstruction Color</p><p><b>　　目錄</b></p><p><b>　　第一章 緒論1</b></p><p><b>　　1.1 概要1</b></p><p>　　1.2網(wǎng)頁制作的重要性及現(xiàn)狀1</p><p

14、>　　第二章 網(wǎng)頁需求分析1</p><p>　　2.1 可行性分析1</p><p>　　2.1.1網(wǎng)站主題的可行性1</p><p>　　2.1.2 網(wǎng)站頁面設(shè)計(jì)的可行性2</p><p>　　2.2 網(wǎng)站需求分析2</p><p>　　2.2.1建站目的2</p><p&g

15、t;　　2.2.2技術(shù)需求2</p><p>　　第三章 網(wǎng)站建設(shè)的流程 2</p><p>　　第四章 網(wǎng)頁制作 3</p><p>　　4.1 制作步驟 3</p><p>　　4.2 制作網(wǎng)頁的要素 4</p><p>　　4.2.1 網(wǎng)頁的整體布局設(shè)計(jì)

16、60; 4</p><p>　　4.2.2網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用  5</p><p>　　4.2.3網(wǎng)頁形式與內(nèi)容相統(tǒng)一 5</p><p>　　4.3 細(xì)節(jié)的把握 5</p><p>　　4.3.1 顏色。 6</p><p>　　4.3

17、.2線條的運(yùn)用。 6</p><p>　　4.3.3圖標(biāo)。 6</p><p>　　4.3.4文字。 6</p><p>　　4.4 常用工具介紹 6</p><p>　　第五章 《多媒體技術(shù)基礎(chǔ)》網(wǎng)絡(luò)開放課網(wǎng)頁制作實(shí)例7</p><p>　　5.1 網(wǎng)站制作過程7&

18、lt;/p><p>　　5.2 網(wǎng)頁層次結(jié)構(gòu)7</p><p>　　5.3 網(wǎng)站頁面的相關(guān)展示及代碼8</p><p><b>　　結(jié)論16</b></p><p><b>　　參考文獻(xiàn)17</b></p><p><b>　　致謝17</b>&l

19、t;/p><p><b>　　第一章 緒論</b></p><p><b>　　1.1 概要</b></p><p>　　隨著Internet的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個(gè)家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實(shí)力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一

20、個(gè)重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設(shè)計(jì)而言，網(wǎng)頁設(shè)計(jì)具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實(shí)習(xí)過程，現(xiàn)就網(wǎng)站建設(shè)與管理過程中，網(wǎng)頁設(shè)計(jì)與制作的具體經(jīng)歷，包括：網(wǎng)頁設(shè)計(jì)與制作過程中的網(wǎng)頁布局、色彩構(gòu)置，框架結(jié)構(gòu)等相關(guān)事項(xiàng)做以下論述。</p><p>　　所謂網(wǎng)站(Website)，就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工

21、具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關(guān)的網(wǎng)路服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務(wù)。</p><p>　　1.2網(wǎng)頁制作的重要性及現(xiàn)狀</p><p>　　如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的各個(gè)層面。網(wǎng)站內(nèi)容既豐富又全面，滿足了各種不同需求的瀏覽者，正當(dāng)網(wǎng)絡(luò)作為第四媒體，逐漸走向成熟

22、和完善的時(shí)候，網(wǎng)頁設(shè)計(jì)業(yè)也逐步脫離了傳統(tǒng)廣告設(shè)計(jì)的范疇，形成特殊而獨(dú)立的體系。同時(shí)這一現(xiàn)象也表明了，我們對網(wǎng)頁設(shè)計(jì)的視覺審美以及網(wǎng)站功能應(yīng)用等多個(gè)方面的認(rèn)知達(dá)到了新的高度。</p><p>　　網(wǎng)頁不光是把各種信息放上去，能看就行是遠(yuǎn)遠(yuǎn)不夠的。要考慮受眾如何能更多的和更有效率的接收網(wǎng)頁上的信息，并且給他們留下良好的印象，促進(jìn)網(wǎng)站的運(yùn)營。這就要求綜合考慮，設(shè)計(jì)出美觀合理的頁面。</p><p&g

23、t;　　迄今為止，我國對網(wǎng)頁設(shè)計(jì)這一課題的系統(tǒng)研究還略顯薄弱，特別是在藝術(shù)設(shè)計(jì)領(lǐng)域?qū)W(wǎng)頁設(shè)計(jì)的探討尤顯不足，至今未能提出系統(tǒng)的設(shè)計(jì)理論，與指導(dǎo)原則。對網(wǎng)頁設(shè)計(jì)進(jìn)行系統(tǒng)性的研究，將視覺傳達(dá)設(shè)計(jì)的基本原則創(chuàng)造性的應(yīng)用于網(wǎng)頁設(shè)計(jì)之中確實(shí)是當(dāng)務(wù)之急，也是促進(jìn)我國網(wǎng)絡(luò)業(yè)及網(wǎng)絡(luò)文化發(fā)展的重要環(huán)節(jié)。</p><p>　　第二章 網(wǎng)頁需求分析</p><p><b>　　2.1 可行性分析&l

24、t;/b></p><p>　　2.1.1網(wǎng)站主題的可行性</p><p>　　一般來說一個(gè)網(wǎng)站內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。本網(wǎng)站主要就是針對《多媒體技術(shù)基礎(chǔ)》課程的，包括教學(xué)大綱、授課計(jì)劃、課程教案、電子課件、實(shí)驗(yàn)指導(dǎo)、課程試卷六個(gè)模塊，內(nèi)容清晰，有條理。并沒有保羅萬象，這往往會失去網(wǎng)站的特色，也會帶來高強(qiáng)度的勞動，給網(wǎng)站的及時(shí)更新帶來困難。</p&

25、gt;<p>　　2.1.2 網(wǎng)站頁面設(shè)計(jì)的可行性</p><p>　　由于越來越多的人開始建立自己網(wǎng)站，網(wǎng)站除了具有傳播信息的功能，還往往代表個(gè)人形象。雖然HTML語言提供了對常用windows標(biāo)準(zhǔn)控件的支持，但是由于Windows標(biāo)準(zhǔn)控件的性狀和顏色十分單一，網(wǎng)頁的視覺效果可能會很差。</p><p>　　因此，本網(wǎng)站并沒有單純的采用HTML來制作網(wǎng)頁，而是采用div+c

26、ss的方式來創(chuàng)建表格布局，并且在其中加入JavaScript等動態(tài)效果，使頁面看起來更有動感。</p><p>　　2.2 網(wǎng)站需求分析</p><p><b>　　2.2.1建站目的</b></p><p>　　Internet是目前世界上最大的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，它遍布全球，將世界各地各種規(guī)模的網(wǎng)絡(luò)連接成了一個(gè)整體。作為Internet上一種先

27、進(jìn)的，易于被人們接受的信息檢索手段，Word Wide Web（建成www）發(fā)展十分迅速，成為目前世界上最大的信息資源寶庫。</p><p>　　通過建立一個(gè)課程共享網(wǎng)站，可以迅速融入到互聯(lián)網(wǎng)中，和世界各地連成一個(gè)整體。擁有了這種傳播媒介，人們就可以輕松在網(wǎng)上找到多媒體課程的相關(guān)資料。</p><p><b>　　2.2.2技術(shù)需求</b></p>&l

28、t;p>　　網(wǎng)頁的版面設(shè)計(jì)需要Dreamweaver來實(shí)現(xiàn)。需要精通Html、Div+CSS等網(wǎng)絡(luò)編程語言。</p><p>　　網(wǎng)站LOGO，需要用PS來設(shè)計(jì)。需要有一定的審美能力、設(shè)計(jì)能力，使網(wǎng)站的主題突出鮮明。</p><p>　　動態(tài)頁面設(shè)計(jì)需要有JavaScript等技術(shù)。</p><p>　　發(fā)布站點(diǎn)需要對互聯(lián)網(wǎng)技術(shù)有一定的了解，并熟悉發(fā)布流程。&

29、lt;/p><p>　　第三章 網(wǎng)站建設(shè)的流程 </p><p><b>　　定義合適的域名。</b></p><p>　　由域名構(gòu)成的網(wǎng)址會像商標(biāo)一樣，有助于將來塑造網(wǎng)上的形象。域名除了要符合公司的性質(zhì)以及信息內(nèi)容的特征外，還要具有簡潔、易記、具有沖擊力的特點(diǎn)。 </p><p><b>　

30、　租用虛擬服務(wù)器。</b></p><p>　　有了域名后，就需要一個(gè)空間存放網(wǎng)站，這個(gè)空間就是Internet上的服務(wù)器。一般虛擬主機(jī)提供商都能向用戶提供大容量、高速度的服務(wù)器，用戶可根據(jù)網(wǎng)站的內(nèi)容設(shè)置及其發(fā)展前景來選擇。 </p><p><b>　　設(shè)計(jì)網(wǎng)頁。</b></p><p>　　網(wǎng)頁的設(shè)計(jì)制作可以自己完成，

31、也可以通過虛擬主機(jī)提供商或?qū)I(yè)的網(wǎng)頁設(shè)計(jì)制作商來完成。設(shè)計(jì)網(wǎng)頁前要收集所有需要放在網(wǎng)站上的文本資料、圖片等，并盡量用文字詳細(xì)說明制作的框架結(jié)構(gòu)，將收集的材料提供給網(wǎng)頁設(shè)計(jì)者。 </p><p><b>　　ICP備案。</b></p><p>　　網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活動，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被

32、查處以后關(guān)停。ICP備案可以自主通過官方備案網(wǎng)站 http://www.miibeian.gov.cn 在線備案或者通過當(dāng)?shù)仉娦挪块T兩種方式來進(jìn)行備案。</p><p>　　第四章 網(wǎng)頁制作 </p><p><b>　　4.1 制作步驟 </b></p><p>　　1. 確定網(wǎng)站主題 ：網(wǎng)

33、站主題就是要建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。 </p><p>　　2. 搜集材料 ：明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。 </p><p>　　3. 規(guī)劃網(wǎng)站 ：一個(gè)網(wǎng)站設(shè)計(jì)得成

34、功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個(gè)性、有特色，具有吸引力。 </p><p>　　4. 選擇合適的制作工具 ：盡

35、管選擇什么樣的工具并不會影響你設(shè)計(jì)網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。 </p><p>　　5. 制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個(gè)復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡單后復(fù)雜，就是

36、先設(shè)計(jì)出簡單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。在制作網(wǎng)頁時(shí)要多靈活運(yùn)用模板，這樣可以大大提高制作效率。</p><p>　　4.2 制作網(wǎng)頁的要素 </p><p>　　4.2.1 網(wǎng)頁的整體布局設(shè)計(jì)  </p><p>　　網(wǎng)頁設(shè)計(jì)作為一種視覺語言，要講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之

37、處，應(yīng)充分加以利用和借鑒。版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)者也應(yīng)該知道哪一段文字圖形該落于何處，才能使整個(gè)網(wǎng)頁生輝。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。</p><p>　　常見網(wǎng)頁版式布局結(jié)構(gòu)有以下幾種： </p><p>　　兩欄式結(jié)構(gòu)，即頁面頂部為網(wǎng)站標(biāo)志或廣告條，下面分

38、為左右兩欄，一般左欄式導(dǎo)航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。</p><p>　　三欄式結(jié)構(gòu)是一些大型網(wǎng)站常用的布局結(jié)構(gòu)，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實(shí)的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式。</p><p>　　“三”型結(jié)

39、構(gòu)，這種結(jié)構(gòu)多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點(diǎn)是分類清晰，展示方便。</p><p>　　左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導(dǎo)航部分，右邊是與導(dǎo)航相對應(yīng)的內(nèi)容。左右框架型的結(jié)果非常清晰，內(nèi)容一目了然，便于信息的查詢。</p><p>　　上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整體為橫向分布，上面為導(dǎo)航，中間的大展式窗口很突出，整個(gè)網(wǎng)站顯得

40、簡潔明亮，這種結(jié)構(gòu)適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。</p><p>　　Flash型主要采用現(xiàn)在流行的Flash技術(shù)，頁面表達(dá)的內(nèi)容較為豐富，給人視覺和聽覺上很大的沖擊，處理得當(dāng)會達(dá)到Web頁面難以達(dá)到的效果。</p><p>　　網(wǎng)站是網(wǎng)頁的集合，一個(gè)站點(diǎn)用的所有網(wǎng)頁構(gòu)成一個(gè)網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設(shè)計(jì)是指對網(wǎng)站整體頁面的設(shè)計(jì)，包括頁面風(fēng)格、配色、布局、內(nèi)容等。網(wǎng)頁設(shè)

41、計(jì)包含的內(nèi)容非常多，大體分為兩個(gè)方面：一方面是純網(wǎng)站本身的設(shè)計(jì)，如文字、排版、圖片制作、平面設(shè)計(jì)、靜態(tài)圖文和動態(tài)聲音、影像等；另一方面是網(wǎng)站的延伸設(shè)計(jì)，包括網(wǎng)站主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。 </p><p>　　設(shè)計(jì)頁面的第一步就是設(shè)計(jì)片面布局，就像報(bào)刊雜志版面設(shè)計(jì)一樣，我們可以看作一張報(bào)約或者一份雜志來進(jìn)行排版布局。</p><p>　　（1）

42、 草稿  新頁面就像一張白紙，沒有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力、創(chuàng)造力，將想象的布局到上面去。這是原創(chuàng)階段，你不必講究細(xì)膩工整，你也可在草稿本上先畫出整個(gè)布局框架，把多個(gè)版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住PHOTOSHOP或其他工具軟件來完成。 </p><p>　?。?）粗略布局  在草稿的基礎(chǔ)上，將需要的

43、功能模塊放到頁面上去，這時(shí)要遵循突出重點(diǎn)、整體協(xié)調(diào)的原則，首先將網(wǎng)站標(biāo)志、導(dǎo)航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。 </p><p>　　（3） 定稿  定稿即將粗略布局精細(xì)化、具體化，完成整個(gè)頁面的設(shè)計(jì)。</p><p>　　頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后

44、，交給客戶驗(yàn)收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進(jìn)程，交給程序員添加程序。</p><p>　　4.2.2網(wǎng)頁設(shè)計(jì)中色彩的運(yùn)用  </p><p>　　色彩是藝術(shù)表現(xiàn)的要素之一，在網(wǎng)頁設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運(yùn)用，按照色彩的記憶性原則，一般暖色較

45、冷色的記憶性更強(qiáng)一些。色彩還具有聯(lián)想與象征的特質(zhì)，如紅色象征血、太陽；藍(lán)色象征大海、天空和水面等。所以如果我們在對一家出售冷食的商店進(jìn)行虛擬店面的頁面設(shè)計(jì)時(shí)，應(yīng)使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強(qiáng)人們的購買心理，使得在線營銷得到很好的實(shí)踐效果。另要注意的是網(wǎng)頁的顏色應(yīng)用雖沒有限制，但不能毫無節(jié)制地運(yùn)用多種顏色，一般情況下，先根據(jù)總體風(fēng)格的要求定出一至二種主色調(diào)，在已經(jīng)有了完備的CIS（企業(yè)形象識別系統(tǒng)）的企業(yè)進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)

46、，更應(yīng)該按照其中的VI進(jìn)行色彩運(yùn)用。在色彩的運(yùn)用過程中，還應(yīng)注意的一個(gè)問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強(qiáng)烈、個(gè)性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設(shè)計(jì)中要考慮眾多因素。</p><p>　　4.2.3網(wǎng)頁形式與內(nèi)容相統(tǒng)一 <

47、/p><p>　　要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。運(yùn)用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計(jì)中，它的均衡有時(shí)會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果。點(diǎn)、線、面作為視覺語言中的基本元素，要使用

48、點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時(shí)候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計(jì)意境。</p><p>　　4.3 細(xì)節(jié)的把握 </p><p>　　網(wǎng)站的品位，除了頁面本身整體的視覺效果外，往往更突出在一些細(xì)節(jié)上，只有把握住細(xì)節(jié)，才能更好地提高瀏覽者的使用友好度，給瀏覽者留下深刻的印象。 </p&g

49、t;<p>　　4.3.1 顏色。 </p><p>　　在初學(xué)網(wǎng)頁設(shè)計(jì)的時(shí)候，在用色方面要非常注意，如果對網(wǎng)頁用色沒有太大的把握，那么就先選擇好網(wǎng)頁的基本色調(diào)，然后針對這一種顏色去進(jìn)行變化，如需加其他顏色，可以試著加些灰色，因?yàn)榛疑侵猩{(diào)，不會對頁面顏色造成太大的沖突。這樣做出的網(wǎng)頁整體顏色會非常協(xié)調(diào)統(tǒng)一。</p><p>　　4.3.2線條的運(yùn)用。&

50、#160;</p><p>　　很多朋友在制作網(wǎng)頁的時(shí)候，在兩塊過渡的地方，如banner和導(dǎo)航條之間會用一條細(xì)線區(qū)分開，此時(shí)往往會畫上一條直直的線，這樣給人感覺會很突兀</p><p><b>　　4.3.3圖標(biāo)。 </b></p><p>　　網(wǎng)站中在各個(gè)標(biāo)題的前面適當(dāng)?shù)募有﹫D標(biāo)點(diǎn)綴網(wǎng)頁，可以使網(wǎng)頁效果更加出彩，但是切忌網(wǎng)頁圖標(biāo)使

51、用過多，圖標(biāo)的色調(diào)也要一致，避免雜亂。</p><p><b>　　4.3.4文字。 </b></p><p>　　網(wǎng)站中文字的運(yùn)用，用戶在瀏覽網(wǎng)頁時(shí)，主要是要看網(wǎng)頁當(dāng)中的文字內(nèi)容，所以要特別注意文字的處理。一是文字的顏色不要和背景顏色相近，這樣用戶在瀏覽文字信息時(shí)會非常的吃力；二是不要亂用字體，你使用的字體在本機(jī)上可以顯示，但是到了別人的電腦上就不一定能顯

52、示出來了；三是注意文字之間的行距，通常我們不對文字進(jìn)行行距的設(shè)置時(shí)，文字間的行距會非常??；影響頁面的美觀度，注意文字間的行距，使其不會顯得特別擠，做到寬松有序。</p><p>　　4.4 常用工具介紹 </p><p>　　Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁

53、開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。</p><p>　　FlashPaper 是Macromedia推出的一款電子文檔類工具，通過使用本程序，你可以將需要的文檔通過簡單的設(shè)置轉(zhuǎn)換為SWF格式的Flash文件，原文檔的排版樣式和字體顯示不會受到影響，這樣做的好處是不論對方的平臺和語言版本是什么，都可以自由的觀看你所制作的電子文檔動畫，并可以進(jìn)行自由的放大，縮小和打印，

54、翻頁等操作，對文檔的傳播非常有好處，而且由于Flash文件的在各大瀏覽器中的普及性和強(qiáng)大的可調(diào)節(jié)性。 </p><p>　　Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件，深受廣大平面設(shè)計(jì)人員和電腦美術(shù)愛好者的喜愛。</p><p>　　Flash是美國Macromedia公司所設(shè)

55、計(jì)的一種二維矢量動畫軟件（現(xiàn)Adobe公司產(chǎn)品），用于設(shè)計(jì)和編輯Flash文檔，最新版本為：Adobe Flash CS5。Flash通常也指Macromedia Flash Player（現(xiàn)Adobe Flash Player），用于播放Flash文檔</p><p>　　Fireworks是網(wǎng)頁開發(fā)圖形處理工具，可以做出矢量的圖形，主要是和Dream

56、weaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實(shí)用，而且學(xué)起來也比Photoshop易上手，是一個(gè)入門級的網(wǎng)頁設(shè)計(jì)軟件。</p><p>　　《多媒體技術(shù)基礎(chǔ)》網(wǎng)絡(luò)開放課網(wǎng)頁制作實(shí)例</p><p>　　5.1 網(wǎng)站制作過程</p><p>　　分析網(wǎng)站建設(shè)的類型，并參考相關(guān)類型的網(wǎng)站，結(jié)合自己的實(shí)際經(jīng)驗(yàn)畫出大概的框架圖，并標(biāo)明其用途和要實(shí)現(xiàn)的功能。本網(wǎng)站為左右型

57、，左邊為導(dǎo)航欄，右側(cè)為主要內(nèi)容。 </p><p>　　2．利用PS來進(jìn)行具體的設(shè)計(jì)，利用輔助線畫出框架圖，不同模塊之間要畫兩條輔助線，并留一定的距離，便于對網(wǎng)頁的控制，接下來便可以制作網(wǎng)站的logo、廣告條、導(dǎo)航條等主要內(nèi)容，然后依次完成其他模塊的制作。 </p><p>　　3．對色彩、文字的排版、導(dǎo)航條、底部內(nèi)容進(jìn)行細(xì)化，使網(wǎng)站達(dá)到一定的品質(zhì)感，完成首頁的全部制作

58、。 </p><p>　　4.首頁確定以后，便開始內(nèi)頁的制作，內(nèi)頁的制作相對簡單，保持首頁的整體風(fēng)格不變，對相應(yīng)的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個(gè)即可，內(nèi)頁制作完成后，完成整個(gè)網(wǎng)頁的設(shè)計(jì)。</p><p>　　5.2 網(wǎng)頁層次結(jié)構(gòu)</p><p>　　5.3 網(wǎng)站頁面的相關(guān)展示及代碼</p><p>　?。?）主頁部分

59、：本網(wǎng)頁主要由HTML靜態(tài)頁面組成，由div標(biāo)簽布局的方式</p><p><b>　　代碼：</b></p><p><b>　　#body {</b></p><p>　　position: relative;</p><p>　　width: 980px;</p><p&g

60、t;　　margin: 0 auto;</p><p>　　text-align: left;</p><p>　　clear: both;</p><p><b>　　}</b></p><p>　　.copyrights{text-indent:-9999px;height:0;line-height:0;font-

61、size:0;overflow:hidden;}</p><p>　　/*__________________________________________________________________________</p><p><b>　　*/</b></p><p>　　.entry { position: relative;}&

62、lt;/p><p>　　.align_center img, .entry_image img, .grid .entry_content p,</p><p>　　.more_news .image img, .style_box .box_header,</p><p>　　.caption img, .comments img, .tabNavigation {

63、margin: 0 !important;}</p><p>　　.grid ul { list-style: none; padding: 0 !important; margin: 0 !important;}</p><p>　　.socials {</p><p>　　width: 35px;</p><p>　　position:

64、absolute;</p><p>　　right: -44px;</p><p><b>　　top: 8px;</b></p><p>　　padding-bottom: 10px;}</p><p>　　.socials a { display: inline-block;}</p><p>

65、;　　.b_circle {</p><p>　　width: 35px;</p><p>　　height: 35px;</p><p>　　border-radius: 50% 50% 50% 50%;</p><p>　　-moz-border-radius: 50% 50% 50% 50%;</p><p>　

66、　-webkit-border-radius: 50% 50% 50% 50%;</p><p>　　background-color: #7f7b79;</p><p><b>　　}</b></p><p>　　.b_circle:hover { background-color: #413f3d;}</p><p>

67、;　　#top_link {</p><p>　　text-indent: -9999px;</p><p>　　cursor: pointer;</p><p>　　display: none;</p><p>　　position: fixed;</p><p>　　z-index: 99;</p>

68、<p>　　left: 50%;</p><p><b>　　top: 90%;</b></p><p>　　margin-left: 500px;</p><p>　　background-image: url('../images/i_arrow_top.png');</p><p>　　b

69、ackground-repeat: no-repeat;</p><p>　　background-position: 50% 45%;</p><p><b>　　}</b></p><p>　　.b_twitter {</p><p>　　background-image: url('../images/i_

70、facebook.png');</p><p>　　background-repeat: no-repeat;</p><p>　　background-position: 49% 48%;</p><p><b>　　}</b></p><p>　　.b_facebook {</p><p&

71、gt;　　background-image: url('../images/i_twitter.png');</p><p>　　background-repeat: no-repeat;</p><p>　　background-position: 50% 50%;</p><p><b>　　}</b></p>

72、<p><b>　　.b_rss {</b></p><p>　　background-image: url('../images/i_rss.png');</p><p>　　background-repeat: no-repeat;</p><p>　　background-position: 50% 47%;&

73、lt;/p><p><b>　　}</b></p><p>　　/*__________________________________________________________________________ # BODY - #leftside</p><p><b>　　*/</b></p><

74、p>　　#left_side {</p><p>　　position: relative;</p><p>　　float: left;</p><p>　　padding: 3px 3px 5px;</p><p>　　border: 1px solid #ebe9dd;</p><p>　　backgrou

75、nd-color: #e2e0d4;</p><p><b>　　}</b></p><p>　　.left_side {</p><p>　　position: relative;</p><p>　　z-index: 3;</p><p>　　border: 1px solid #d8d4c8

76、;</p><p>　　border-bottom: none;</p><p>　　background: #f3f2ee url('../images/left_bg_r.gif') repeat-y center top;</p><p><b>　　}</b></p><p>　　.left_co

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

78、</b></p><p>　　.left_content > p { padding: 20px 20px 0; font-size: 11px; color: #a8a8a8; background: url('../images/h_line.gif') repeat-x center top;}</p><p>　　.logo { margin: 4

79、0px 75px; display: block;}</p><p><b>　　.dots {</b></p><p>　　display: block;</p><p>　　margin: 0 20px 40px;</p><p>　　height: 5px;</p><p>　　backgr

80、ound: url('../images/dots.png') no-repeat center top;</p><p><b>　　}</b></p><p>　?。?）教學(xué)大綱模塊：</p><p><b>　　代碼：</b></p><p>　　<div align=&

81、quot;center" ></p><p>　　<embed src="../jiaoxuedagang/多媒體技術(shù)教學(xué)大綱.swf" width="600" height="650" align="middle"></embed></

82、p><p><b>　　</div></b></p><p>　　（3）電子課件模塊：</p><p><b>　　代碼：</b></p><p>　　<table width="200" border="0"></p>&l

83、t;p><b>　　<tr></b></p><p>　　<td><a href="kejian01.html">第1章緒論與基礎(chǔ)知識</a></td></p><p>　　<td><a href="kejian02.html">第2章數(shù)字

84、音頻處理技術(shù)</a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td><a href="kejian03.html">第3章數(shù)字圖像技術(shù)</a

85、></td></p><p>　　<td><a href="kejian04.html">第4章數(shù)據(jù)壓縮技術(shù)</a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b&

86、gt;</p><p>　　<td><a href="kejian05.html">第5章動畫技術(shù)</a></td></p><p>　　<td><a href="kejian06.html">第6章多媒體的存儲</a></td></p>&

87、lt;p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td><a href="kejian07.html">第7章網(wǎng)絡(luò)環(huán)境下的多媒體</a></td></p><p>　

88、　<td><a href="kejian08.html">第8章多媒體設(shè)備簡介</a></td></p><p><b>　　</tr></b></p><p><b>　　</table></b></p><p><b>

89、;　　代碼：</b></p><p><b>　　<div ></b></p><p>　　<font size="+2">&nbsp;&nbsp;下載：<a href="../多媒體技術(shù)基礎(chǔ)/第1章緒論與基礎(chǔ)知識.ppt">第一章</a></fo

90、nt></p><p><b>　　</div></b></p><p>　　<div align="center" ></p><p>　　<embed src="../kejian/kejian01.swf" width="600" height

91、="650"></embed></p><p><b>　　</div></b></p><p>　　（4）課程試卷模塊：</p><p><b>　?。?）視頻教程：</b></p><p>　?。?）給頁面更換皮膚：</p><

92、;p><b>　　結(jié)論</b></p><p>　　網(wǎng)頁制作主要是利用圖形制作軟件和處理軟件進(jìn)行網(wǎng)頁效果圖的制作。我們需要了解一個(gè)完整網(wǎng)站的制作過程，并知道網(wǎng)頁制作在網(wǎng)站制作中的作用。一方面結(jié)合具體的實(shí)例，多加練習(xí)，培養(yǎng)對于技術(shù)的敏感和快速適應(yīng)性，注意到技術(shù)變化帶來的各種新的可能性，消除技術(shù)所形成的障礙；另一方面要多方面、多角度地感受與掌握電腦設(shè)計(jì)的時(shí)尚語言，擴(kuò)展對傳統(tǒng)設(shè)覺設(shè)計(jì)范疇的認(rèn)

93、識。</p><p>　　在搜集資料的過程中，我破天荒的去到學(xué)校圖書館搜集資料，還在網(wǎng)上查找各類相關(guān)資料，將這些寶貴的資料全部記在U盤上，盡量使我的資料完整、精確、數(shù)量多，這有利于論文的撰寫。然后我將收集到的資料仔細(xì)整理分類，及時(shí)拿給老師與同學(xué)進(jìn)行溝通。 </p><p>　　5月初，資料已經(jīng)查找完畢了，我開始著手論文的寫作。在寫作過程中遇到困難我就及時(shí)上網(wǎng)找資料或者去吳老師處找

94、一些比較好的范文來參考，并和同學(xué)互相交流。在大家的幫助下，困難一個(gè)一個(gè)解決掉，論文也慢慢成型。  </p><p>　　5月中旬，論文的大致思路已經(jīng)完成。在設(shè)計(jì)初期，由于沒有設(shè)計(jì)經(jīng)驗(yàn)，覺得無從下手，空有很多設(shè)計(jì)思想，卻不知道應(yīng)該如何寫，經(jīng)過老師的指導(dǎo)，同學(xué)的幫忙。我的設(shè)計(jì)終于完成了 </p><p>　　下旬，當(dāng)我終于完成了所有打字、繪圖、排版、校對的任務(wù)后整

95、個(gè)人都很累，但同時(shí)看著電腦熒屏上的畢業(yè)設(shè)計(jì)稿件我的心里是甜的，我覺得這一切都值了。這次畢業(yè)論文的制作過程是我的一次再學(xué)習(xí)，再提高的過程。</p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1]鄧文淵.網(wǎng)頁制作高手[M].北京：人民郵電大學(xué)出版，2007</p><p>　　[2]李憲廣.網(wǎng)頁制作邊學(xué)邊用[M].北京：清華大學(xué)出

96、版社， 2009</p><p>　　[3]網(wǎng)頁設(shè)計(jì)入門[EB/OL].http://www.xue8.com/sale/view.asp?Article ID=288 </p><p>　　[4]許凌云，柳勇良.網(wǎng)頁設(shè)計(jì)全方位學(xué)習(xí)[M].北京：清華大學(xué)出版社，2008</p><p>　　[5]陳琳.photoshop cs

97、3 入門實(shí)戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008</p><p>　　[6]焦慧.網(wǎng)頁制作基礎(chǔ)與典型范例[M].北京：電子工業(yè)出版社，2008</p><p>　　[7]戎馬工作室.Dreamweaver 8網(wǎng)站開發(fā)[M].北京：機(jī)械工業(yè)出版社，2006 </p><p>　　[8]戴一波.Dreamweaver CS

98、3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社</p><p>　　[9]何秀芳.網(wǎng)頁制作與網(wǎng)站建設(shè)課堂實(shí)錄[M].北京：人民郵電出版社. 2009</p><p>　　[10]孫連三.新編網(wǎng)頁制作與網(wǎng)站建設(shè)入門與提高[M].北京：人民郵電出版社. 2008</p><p>　　[11]鄧文淵.網(wǎng)頁制作高手FLASH 8[M].北京：人