目錄摘要 . ............................................................... 2第一章 前言 .....................

目錄

摘要 . ............................................................... 2

第一章 前言 ....................................................... 3

1．1網(wǎng)站的發(fā)展 . ................................................. 3

1．2設計概述 . ................................................... 4

1．3個人網(wǎng)站的需求 . ............................................. 4

1．4 使用軟件 ................................................... 4

1．5 軟件運行環(huán)境 ............................................... 5

第二章 網(wǎng)站的建設 ................................................. 6

2．1網(wǎng)站的基礎知識 . ............................................. 6

2.1.1 制作網(wǎng)頁的步驟 . ........................................ 6

2.1.2 網(wǎng)站建設流程 . .......................................... 7

2.1.3 網(wǎng)頁制作要素 . .......................................... 7

2．2 CSS樣式表 . ................................................. 9

2.2.1 創(chuàng)建CSS 樣式表 . ........................................ 9

2.2.2 CSS樣式表的分類 ...................................... 10

2．3 網(wǎng)站制作 .................................................. 11

2.3.1 網(wǎng)站步驟 . ............................................. 11

2.3.2 主頁的要求 . ........................................... 12

2.3.3 子頁的要求 . ........................................... 13

第三章 總結 ...................................................... 16

參考文獻 . .......................................................... 17

1

摘要

本論文將對個人網(wǎng)頁設計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設計與制作語言的基礎上，著重對中文版的Dream weaver MX 2004、Fireworks MX 2004、Flash MX 2004的新增功能、使用方法及操作技巧進行介紹。按照由淺入深，循序漸進的方式進行，從簡單的網(wǎng)頁設計制作開始，到網(wǎng)站建設中所需的網(wǎng)站建設與管理技術、圖像處理技術、動畫制作技術等都進行理論聯(lián)系實際的介紹。在網(wǎng)頁設計中包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁主題之后，首先要明確和熟悉設計的對象和構成的要素。網(wǎng)頁設計涉及的具體內容很多，可以概括為視聽元素和版式設計兩個方面。在制作網(wǎng)站方面將進行詳細的講解，對工具的使用，語言的組合，CSS 樣式表的使用進行全面的探討，并利用具體的實例進行驗證。本設計將以詳實的內容，清新的格調，繁簡適中的闡述，實用的操作方法和技巧，講解本人對個人網(wǎng)站設計的看法。

關鍵詞：網(wǎng)站建設 CSS 樣式表 流程 步驟

2

第一章 前言

1．1網(wǎng)站的發(fā)展

21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機的應用技能。掌握計算機是職業(yè)的需要，更是事業(yè)發(fā)展的需要。互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。網(wǎng)頁設計伴隨著網(wǎng)絡的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡的頻繁而變得非常的重要。網(wǎng)頁講究的是排版布局，其功能主要就是提供一種形式給每個上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。

網(wǎng)頁設計與制作是計算機能力的具體表現(xiàn)，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設計而言，網(wǎng)頁設計具有更多的新穎性，更多可以表現(xiàn)的手法。在目前國內對此領域研究甚少的情況下，將網(wǎng)頁藝術設計與其他藝術設計形式進行比較，嘗試從網(wǎng)頁藝術設計的內容、原則和特點等三個方面，對這個新的藝術設計領域進行初步的歸納總結和理論探討。認為網(wǎng)頁藝術設計是藝術與技術的高度統(tǒng)一，指出網(wǎng)頁藝術設計包含視聽元素與版式設計兩項內容；以主題鮮明、形式與內容相統(tǒng)一、強調整體為設計原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術與技術結合的緊密性等五個特點。

在明確了網(wǎng)頁藝術設計與網(wǎng)站主題的關系的基礎上，提出了“美”和“功都是為了更好地表達網(wǎng)站主題這一觀點。網(wǎng)頁藝術設計是伴隨著計算機互聯(lián)網(wǎng)絡的產(chǎn)生而形成的視聽設計新課題，是網(wǎng)頁設計者以所處時代所能獲取的技術和藝術經(jīng)驗為基礎，依照設計目的和要求自覺地對網(wǎng)頁的構成元素進行藝術規(guī)劃的創(chuàng)造 3

性思維活動，必然要成為設計藝術的重要組成部分，隨著網(wǎng)絡技術的發(fā)展而發(fā)展。表面上看，它不過是關于網(wǎng)頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統(tǒng)一。

1．2設計概述

隨著Internet 的迅猛發(fā)展，HTML 被廣泛應用，上網(wǎng)的人們當然希望網(wǎng)頁做得漂亮些，因此HTML 排版和界面效果的局限性日益暴露出來。為了解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML 增加很多的屬性結果將代碼變得很臃腫，將文本變成圖片，過多利用Table 來排版，用空白的圖片表示白色的空間等，直到CSS 出現(xiàn)。CSS 可算是網(wǎng)頁設計的一個突破，它解決了網(wǎng)頁界面排版的難題。

1．3個人網(wǎng)站的需求

一個完整的網(wǎng)頁是建立在各種各樣的需求上面的，這種需求往往來自于個人的實際需求或者是出于自身發(fā)展的需要，其中個人的實際需求也就是說這種發(fā)展性質的需求占了絕大部分。面對網(wǎng)頁設計擁有不同知識層面的客戶，設計的個人對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)頁規(guī)劃的成敗。因此如何更好地的了解、分析、明確個人的需求，并且能夠準確、清晰以文檔的形式表達給需要的人，保證以需求為目的個人方向進行，是每個網(wǎng)頁規(guī)劃和網(wǎng)頁制作管理者需要面對的問題。

1．4 使用軟件

Dream weaver MX 2004軟件由美國著名的網(wǎng)站應用開發(fā)工具生產(chǎn)廠商Adobe Macromedia 于最新推出并正式投入市場以來，已經(jīng)發(fā)展得相當成熟。關于Dream weaver MX 2004的技術介紹的相關書籍與網(wǎng)絡信息相當豐富。通過大學中軟件開發(fā)環(huán)境課程的學習，對Dream weaver MX 2004有了比較深刻的認識，并比較 4

輕松的掌握了Dream weaver MX 2004的操作。因此，軟件技術可以完成個人的要求。

1．5 軟件運行環(huán)境

Dream weaver MX 2004是一款簡體中文軟件，可以在Win2003/WinXP/Win2000/Win9X中安全運行，換句話說，它可以在任何家用微機中運行。

5

第二章 網(wǎng)站的建設

2．1網(wǎng)站的基礎知識

2.1.1 制作網(wǎng)頁的步驟

再做網(wǎng)頁之前，我上網(wǎng)瀏覽了做網(wǎng)頁的五個步驟。

一、確定網(wǎng)頁主題 ：網(wǎng)頁主題就是你創(chuàng)建網(wǎng)頁所要包含的主要內容，一個網(wǎng)頁必須要有一個明確的主題。

二、搜集材料 ：明確了網(wǎng)頁的主題以后，你就要圍繞主題開始搜集材料了。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。

三、規(guī)劃網(wǎng)頁 ：一個網(wǎng)頁設計得成功與否，很大程度上決定于設計者的規(guī)劃水平，規(guī)劃網(wǎng)頁就像設計師設計一樣，圖紙設計好了，才能建成一座漂亮的樓房。網(wǎng)頁規(guī)劃包含的內容很多，如網(wǎng)頁的結構、欄目的設置、網(wǎng)頁的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。

四、選擇合適的制作工具 ：盡管選擇什么樣的工具并不會影響你設計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。

五、制作網(wǎng)頁 ：材料有了，工具也選好了，下面就需要按照規(guī)劃一步一步地把自己的想法變成現(xiàn)實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單再復雜來進行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。

6

2.1.2 網(wǎng)站建設流程

1．定義合適的域名。由域名構成的網(wǎng)址會像商標一樣，有助于將來塑造網(wǎng)上的形象。域名除了要符合個人的性質以及信息內容的特征外，還要具有簡潔、易記、具有沖擊力的特點。

2．租用虛擬服務器。有了域名后，就需要一個空間存放網(wǎng)站，這個空間就是Internet 上的服務器。一般虛擬主機提供商都能向用戶提供大容量、高速度的服務器，用戶可根據(jù)網(wǎng)站的內容設置及其發(fā)展前景來選擇。

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

4．ICP 備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活動，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被查處以后關停。ICP 備案可以自主通過官方備案網(wǎng)站在線備案或者通過當?shù)仉娦挪块T兩種方式來進行備案。

2.1.3 網(wǎng)頁制作要素

1、網(wǎng)頁的整體布局設計

網(wǎng)頁設計作為一種視覺語言，要講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，應充分加以利用和借鑒。版式設計通過文字圖形的空間組合，表達出和諧與美。一個優(yōu)秀的網(wǎng)頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網(wǎng)頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。尤其是我們在利用網(wǎng)頁效果體現(xiàn)在線營銷的意圖時，更要注意為了達到最佳 7

的視覺表現(xiàn)效果，而講究整體布局的合理性，比如一家生產(chǎn)型的企業(yè)，它所提供產(chǎn)品的名稱、類別、型號、價格、功能介紹應怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產(chǎn)品的了解，促成最后的購買。

2、網(wǎng)頁設計中色彩的運用

色彩是藝術表現(xiàn)的要素之一，在網(wǎng)頁設計中，根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用，按照色彩的記憶性原則，因為我們這里做的是食品中特產(chǎn)的專賣網(wǎng)，為了體現(xiàn)環(huán)保的原則，所以我們采用綠色為主調。色彩還具有聯(lián)想與象征的特質，如紅色象征血、太陽；藍色象征大海、天空和水面等，綠色象征健康、環(huán)保這類。所以如果我們在對一家出售食品的商店進行虛擬店面的頁面設計時，應使用淡雅而沉靜的顏色，使人心理上感覺涼爽一些，增強人們的購買心理，使得在線營銷得到很好的實踐效果。另要注意的是網(wǎng)頁的顏色應用雖沒有限制，但不能毫無節(jié)制地運用多種顏色，一般情況下，先根據(jù)總體風格的要求定出一至二種主色調，在已經(jīng)有了完備的網(wǎng)站進行網(wǎng)頁設計時，更應該按照其中的顏色進行色彩運用。在色彩的運用過程中，還應注意的一個問題是：由于國家和種族、宗教和信仰的不同，以及生活的地理位置、文化修養(yǎng)的差異等，不同的人群對色彩的喜惡程度有著很大的差異。如：兒童喜歡對比強烈、個性鮮明的純顏色；生活在草原上的人喜歡紅色；生活在鬧市中的人喜歡淡雅的顏色；生活在“沙漠”中的人喜歡綠色。在設計中要考慮眾多因素。

3、網(wǎng)頁形式與內容相統(tǒng)一

要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結構，形式語言必須符合頁面的內容，體現(xiàn)內容的豐富含義。運用對比與調和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設計中，它的均衡有時會使頁面顯得呆板， 8

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

圖2-1-1 愛書網(wǎng)的子頁，自然

2．2 CSS樣式表

2.2.1 創(chuàng)建CSS 樣式表

CSS 是CascadingStyleSheets （層疊樣式表）的縮寫。它的作用是定義網(wǎng)頁的外觀，用到網(wǎng)頁中相應的元素上，能夠有效的提高用戶設計網(wǎng)頁和開發(fā)站點的效率。創(chuàng)建CSS 樣式表步驟如下：

步驟1 創(chuàng)建一個新的HTML 頁面，將其命名為“網(wǎng)站分布1”保存。在頁面中輸入待排版的文本，排版前的效果。

步驟2 為標題創(chuàng)建相應的CSS 樣式表。選擇［文本］菜單欄的［CSS 樣式表］中的［新建］命令，彈出［新建CSS 規(guī)則］對話框。

步驟3 彈出［.book 的CSS 規(guī)則定義］對話框，在［類型］選項中設定相 9

關的文字屬性。

步驟4 在［分類］選項組中選擇［區(qū)塊］，［文本對齊］屬性設置為“居中”，單擊［確定］按鈕，完成了用于標題的.book CSS類的創(chuàng)建。

步驟5 為分類網(wǎng)頁名稱創(chuàng)建相應的CSS 樣式表。選擇［文本］菜單欄的［CSS 樣式表］中的［新建］命令，彈出［新建CSS 規(guī)則］對話框。

步驟6 彈出［.web 的CSS 規(guī)則定義］對話框，在［類型］選項中設定相關的文字屬性。

步驟7 選中標題“網(wǎng)站分布”，在該文字［屬性］面板中選定［樣式］為 “book”，則定義的.book 的CSS 規(guī)則就被用于該標題。

步驟8 選中網(wǎng)站分布名稱，在該文字［屬性］面板中選定［樣式］為 “web”，則定義的.web 的CSS 規(guī)則就被用于該段文字。

步驟9 單擊F12，在瀏覽器中預覽效果。

2.2.2 CSS樣式表的分類

CSS 按其位置可以分成三種：內嵌樣式(Inline Style)；內部樣式表(Internal Style Sheet)；外部樣式表(External Style Sheet)三種。

①內嵌樣式(Inline Style)：Inline Style是寫在Tag 里面的。內嵌樣式只對所在的Tag 有效; 例如：

這個Style 定義

②內部樣式表(Internal Style Sheet) ：內部樣式表是寫在HTML 的里面的。內部樣式表只對所在的網(wǎng)頁有效。例如：H1.mylayout{border-width:1;border:solid;text-align:center;color:red} 這個標題使用了Style 。

這個標題沒有使用Style 。

10