第三篇：網(wǎng)頁設計與制作-論文（本站推薦）

第一章

緒論

摘 要

本論文將對個人網(wǎng)頁設計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設計與制作語言的基礎上，著重使用JavaScript作為工具語言進行網(wǎng)頁設計與制作的實際操作，分別對基于對象的JavaScript語言、內部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進行詳細描述，并利用具體的實例進行驗證。

本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設計的相關知識。第二章：網(wǎng)頁設計語言概述，本章主要介紹網(wǎng)頁設計的語言——HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定基礎。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內部對象屬性、方法的使用。第四章：內部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內部對象系統(tǒng)，可實現(xiàn)與HTML文檔進行交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。

關鍵詞： 網(wǎng)頁制作；網(wǎng)頁設計；HTML；ASP

第一章

緒論

第一章 緒論

隨著21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機的應用技能。掌握計算機是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設計與制作是計算機能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設計的相關知識。

1.1 網(wǎng)頁設計概述

網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務)的一種方式,是企業(yè)開展電子商務的基礎設施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。

1.2 網(wǎng)頁設計的要素

網(wǎng)頁設計的兩大要素是：整體風格和色彩搭配。

一、確定網(wǎng)站的整體風格

在這里，我提供給大家一些參考經(jīng)驗：

1．將你的標志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標準色彩。

3．總結一句能反映貴站精髓的宣傳標語！

4．相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標題字的陰影效果的設置應該是完全一致的！

二、網(wǎng)頁色彩的搭配

1．用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。

2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。

3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

1.3 大作業(yè)目的和意義

本大作業(yè)主要是對網(wǎng)頁設計與制作的語言基礎上進行探討，主要內容如下：通過已經(jīng)做好的網(wǎng)頁，分析html網(wǎng)頁設計技術、XML技術、Java Applet技術和Javascript技術在網(wǎng)頁設計中的應用。

第一章

緒論

1.4 要分析的網(wǎng)頁

第一章

緒論

第一章

緒論

第二章

HTML網(wǎng)頁設計技術的應用

第二章 HTML網(wǎng)頁設計技術的應用

2.1 HTML語言介紹

HTML（HyperText Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網(wǎng)絡上應用最為廣泛的語言，也是構成網(wǎng)頁文檔的主要語言。

HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

2.1.1 HTML語言的特點

HTML文檔制作不是很復雜，且功能強大，支持不同數(shù)據(jù)格式的文件鑲入，這也是WWW盛行的原因之一，HTML語言的特點如下：

1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。

2、可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴展帶來保證。

3、平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。

2.1.2 HTML語言的編輯軟件

HTML的本質是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：

1、基本編輯軟件，使用WINDOWS自帶的記事本或寫字版都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣瀏覽器就可以解釋執(zhí)行了。

2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時間內做出Homepage，且可以學習HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。

3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。

2.1.4 html語言在網(wǎng)頁設計中的應用

第二章

HTML網(wǎng)頁設計技術的應用

2.2.3JavaScript技術在網(wǎng)頁設計中應用

一、JavaScript概述

JavaScript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應用程序等。它是通過嵌入或調入在標準的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個基本特點：

1、是一種腳本編寫語言

JavaScript是一種腳本語言，它采用小程序段的方式實現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個易的開發(fā)過程。

它的基本結構形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運行過程中被逐行地解釋。它與HTML標識結合在一起，從而方便用戶的使用操作。

2、基于對象的語言。

JavaScript是一種基于對象的語言，同時以可以看作一種面向對象的。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。

3、簡單性

JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計, 從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。

4、安全性

JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務器上，不允許對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

5、動態(tài)性的

JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應，無須經(jīng)過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁(Home Page)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發(fā)生后，可能會引起相應的事件響應。

6、跨平臺性

JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實現(xiàn)了“編寫一次,走遍天下”的夢想。

實際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個字處理軟件及一瀏覽器，無須WEB服務器通道，通過自己的電腦即可完成所有的事情。

總之，JavaScript 是一種新的描述語言，它可以被箝入到 HTML 的文件之中。JavaScript語言可以做到回應使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應用程式所處理。

第二章

HTML網(wǎng)頁設計技術的應用

第五章

色彩在網(wǎng)頁中的應用

第五章 色彩在網(wǎng)頁中的應用

5.1色彩在網(wǎng)頁中的應用

色彩是藝術表現(xiàn)的要素之一。在網(wǎng)頁設計中，我們的設計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。

先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內。背景和前文的對比盡量要大以便突出主要文字內容。

5.2主頁色彩的處理

色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應用原則應該是“總體協(xié)調，局部對比”，也就是：主頁的整體色彩效果應該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據(jù)主頁內容的需要，分別采用不同的主色調。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術內涵，從而提升主頁的文化品位。

5.3常用的配色方案

1.暖色調。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。

2.冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。

3.對比色調。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色彩的搭配，可以產(chǎn)生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。

第五章

色彩在網(wǎng)頁中的應用

最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術語，就是“高調”和“低調”。底色淺的稱為高調；底色深的稱為低調。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內容（文字或圖片）。這種深淺的變化在色彩學中稱為“明度變化”。當然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強，同樣也會使讀者的眼睛受不了。

5.4合理搭配網(wǎng)頁色彩

網(wǎng)頁的色彩是樹立網(wǎng)站形象的關鍵之一，網(wǎng)頁的背景、文字、圖標、邊框、超鏈接等都要用到色彩。不同的色彩會使瀏覽者有不同的心理感受。合理的搭配色彩，會更好的表現(xiàn)主題，吸引用戶的注意力。網(wǎng)頁色彩涉及到藝術知識，讓美術教師參加網(wǎng)頁色彩設計，可能會出現(xiàn)比較理想的效果。在色彩搭配上要注意色彩的鮮明性、獨特性、合適性、聯(lián)想性。背景色和前景色對比要大，以突出主要內容

網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現(xiàn)網(wǎng)站形象和延伸內涵的色彩，要用于網(wǎng)站的標志，標題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其它色彩也可以使用，但應當只是作為點綴和襯托，絕不能喧賓奪主。一般來說，一個網(wǎng)站的標準色彩不超過3種，太多則讓人眼花繚亂。適合于網(wǎng)頁標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。

第五章

色彩在網(wǎng)頁中的應用

第六章 WEB頁面信息的交互——窗體與框架

要實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。

6.1窗體基礎知識

窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數(shù)據(jù)輸入，就可以實現(xiàn)動態(tài)改變Web文檔的行為。

6.1.1窗體對象

窗體（Form）：它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。

在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。

窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：

6.1.2 窗體對象的方法

窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用下列格式：

document.mytest.submit()

第五章

色彩在網(wǎng)頁中的應用

6.1.3 窗體對象的屬性

窗體對象中的屬性主要包括以下：elements name action target encoding method。除Elements外，其它幾個均反映了窗體中標識中相應屬性的狀態(tài)，這通常是單個窗體標識；而elements常常是多個窗體元素值的數(shù)組，例：

elements[0].Mytable.elements[1] 6.1.4 訪問窗體對象

在JavaScript中訪問窗體對象可由兩種方法實現(xiàn)：（1）通過訪問窗體

在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標識訪問窗體如：document.Mytable()。

（2）通過數(shù)組來訪問窗體

除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標是由0到n。所以可通過下列格式實現(xiàn)窗體對象的訪問：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗體的先決條件

在JavaScript中要對窗體引用的條件是：必須先在頁面中用標識創(chuàng)建窗體，并將定義窗體部分放在引用之前。

6.2 窗體中的基本元素

窗體中的基本元素由按鈕、單選按鈕、復選按鈕、提交按鈕、重置按鈕、文本框等組成。

在JavaScript中要訪問這些基本元素，必須通過對應特定的窗體元素的數(shù)組下標或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：

formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：

（1）Text單行單列輸入元素

功能：對Text標識中的元素實施有效的控制。基本屬性：

Name：設定提交信息時的信息名稱。對應于HTML文檔中的Name。Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。defaultvalue：包括Text元素的默認值 基本方法：

blur()：將當前焦點移到后臺。

第五章

色彩在網(wǎng)頁中的應用

select()：加亮文字。主要事件：

onFocus：當Text獲得焦點時，產(chǎn)生該事件。OnBlur：從元素失去焦點時，產(chǎn)生該事件。Onselect：當文字被加亮顯示后，產(chǎn)生該文件。onchange：當Text元素值改變時，產(chǎn)生該文件。例：

...（2）textarea多行多列輸入元素

功能：實施對Textarea中的元素進行控制。基本屬性

name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。Default value：元素的默認值。方法：

blur()：將輸入焦點失去 select()：將文字加亮后 事件：

onBlur:當失去輸入焦點后產(chǎn)生該事件 onFocus:當輸入獲得焦點后，產(chǎn)生該文件 Onchange:當文字值改變時，產(chǎn)生該事件 Onselect:當文字加亮后，產(chǎn)生該文件（3）Select選擇元素

功能：實施對滾動選擇元素的控制。屬性：

name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的length options:組成多個選項的數(shù)組 selectIndex;該下標指明一個選項

select在中每一選項都含有以下屬性： Text:選項對應的文字

selected:指明當前選項是否被選中 Index:指明當前選項的位置 defaultselected:默認選項 事件：

第五章

色彩在網(wǎng)頁中的應用

OnBlur：當select選項失去焦點時，產(chǎn)生該文件。onFocas:當select獲得焦點時，產(chǎn)生該文件。Onchange:選項狀態(tài)改變后，產(chǎn)生該事件。（4）Button按鈕

功能：實施對Button按鈕的控制。屬性：

Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。方法：

click()該方法類似于一個按下的按鈕。事件：

onclick當單擊button按鈕時，產(chǎn)生該事件。例 ：

........（5）checkbox檢查框

功能：實施對一個具有復選框中元素的控制。屬性：

name:設定提交信息時的信息名稱。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息。Checked:該屬性指明框的狀態(tài)true/false.defauitchecked:默認狀態(tài) 方法：

click()該方法使得框的某一個項被選中。事件：

Onclick：當框的選被選中時，產(chǎn)生該事件。（6）radio無線按鈕

功能：實施對一個具單選功能的無線按鈕控制。屬性：

Name：設定提交信息時的信息名稱，對應HTML文檔中的radio的name相同 Value：用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中的radio的name。

length：單選按鈕中的按鈕數(shù)目。defalechecked:默認按鈕。

checked:指明選中還是沒有選中。

第五章

色彩在網(wǎng)頁中的應用

index:選中的按鈕的位置。方法：

chick():選定一個按鈕。事件：

onclick:單擊按鈕時，產(chǎn)生該事件。（7）hidden:隱藏

功能：實施對一個具有不顯示文字并能輸入字符的區(qū)域元素的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔的hidden中的Name。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔hidden中的value。

defaleitvalue:默認值（8）Password口令

功能：實施對具有口令輸入的元素的控制。屬性：

Name:設定提交信息時的信息名稱，對應HTML文檔中password中的name。Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中password中的Value。

defaultvalu:默認值 方法：

select():加亮輸入口令域。

blur():使這丟失passward輸入焦點。focus():獲得password輸入焦點。（9）submit提交元素

功能：實施對一個具有提交功能按鈕的控制。屬性：

name:設定提交信息時的信息名稱，對應HTML文檔中submit。

Value:用以設定出現(xiàn)在窗口中對應HTML文檔中Value的信息，對應HTML文檔中value。

方法

click()相當于按下submit按鈕。事件：

onclick()當按下該按鈕時，產(chǎn)生該事件。

6.3窗體對象實例

下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態(tài)按鈕文檔”調用一個動態(tài)按鈕文檔。

test8_1.htm 調用動態(tài)按鈕文檔

第四篇：網(wǎng)頁設計與制作報告書

電子商務2班201341440213孫巖

網(wǎng)頁設計與制作報告書

課程名稱:網(wǎng)頁設計與制作

專業(yè)班級：電子商務2班

學 號:201341440213 姓 名：孫巖

指導教師：王康哲

電子商務2班201341440213孫巖

目錄

一．概要……………………………………………………………

二．網(wǎng)站開發(fā)……………………………………………………

三．應用工具方案……………………………………………

四．欄目劃分……………………………………………………

五．代碼表……………………………………………………….六．截圖……………………………………………………………

七．結論…………………………………………………………… 2 6 7 13 14

電子商務2班201341440213孫巖

摘要：

在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟、生活等各個方面發(fā)揮著重要的作用。因此網(wǎng)站建設在Internet應用上的地位顯而易見，它已成為政府、企事業(yè)單位信息化建設中的重要組成部分，從而倍受人們的重視。

一、網(wǎng)頁制作開發(fā)背景

Dreamweaver以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網(wǎng)頁，利用它可以輕松的組織、編輯網(wǎng)頁并將其發(fā)布到指定的站點上，而且在發(fā)布之后還能對更新情況進行監(jiān)控以更新站點的內容。現(xiàn)在流行的網(wǎng)頁制作軟件有很多，如Macromedia公司的Dreamweaver、微軟公司的Dreamweaver、還有Adobe Pagemill 3.0--制作多框架，表單和Image map 圖像的網(wǎng)頁工具、Netscape等等。其中Dreamweaver更以其功能強大、容易上手、界面親切而著稱。它采用所見即所得的方式編輯網(wǎng)頁，利用它可以輕松的組織、編輯網(wǎng)頁并將其發(fā)布到指定的站點上，而且在發(fā)布之后還能對更新情況進行監(jiān)控以更新站點的內容。工具準備好了，可根據(jù)你的個人喜好來選擇一些素材，如圖片、喜歡的文章等。

二、網(wǎng)頁制作設計技巧

首先，我們來看一下創(chuàng)建一個只包含一個網(wǎng)頁的站點。選擇“文件”菜單的“新建”選項，單擊“站點”命令，這時新建站點對話框就彈出來了，在“指定新站點位置”文本框中輸入新站點的位置，單擊“只有一個網(wǎng)頁的站點” 圖標，單擊“確定”按鈕。這就建立好站點了，我們現(xiàn)在來看一下新的站點里有什么，單擊“視圖”工具條的“文件夾”按鈕。在文件夾列表里有一個網(wǎng)頁文件，名字叫做“index.htm”。我們知道，每一個站點都要有一個主頁，這個主頁也是一個網(wǎng)頁文件。瀏覽者訪問站點時首先進入的就是站點的主頁。主頁的名字在一般情況下就叫做“index.htm”。就是說我們新建只包含一個網(wǎng)頁的站點時，DREAMWEAVER就自動為我們創(chuàng)建了站點的主頁了。這個新建的站點主頁時空的，我們可以向里面添加內容。

在文件列表里除了主頁之外，還有文件夾。新建站點時，DREAMWEAVER都會在站點所在位置下新建兩個文件夾，一個是“images”另一個是“_private”。我們在編輯站點時可以在“image”文件夾里放置站點用到的圖片。“private”

電子商務2班201341440213孫巖

文件夾比較特殊，其中的文件對瀏覽者來說是隱含的，我們可以把一些不想讓瀏覽者看到的網(wǎng)頁文件放在這個文件夾里，比如：我們可以在這個文件夾里存放注冊用戶的個人信息。

盡管每一個站點都要有一個主頁，不過創(chuàng)建站點時我們仍然可以從一個空站點開始：選擇“文件”菜單的“新建”命令，單擊“站點”選項，在“新建站點”對話框里，我們可以選擇“空站點”圖標來創(chuàng)建一個空站點。“新建站點”對話框中還有許多其他圖標，這是DREAMWEAVER提供的用來創(chuàng)建站點模板或向導。我們創(chuàng)建只有一個網(wǎng)頁的站點或者創(chuàng)建空站點，都是從頭開始來創(chuàng)建一個站點，這就好像蓋房子一樣，首先畫圖紙。然而，有許多的房子都具有相似的結構和用途，所以我們可以用一張圖紙蓋很多相似的房子，這樣就節(jié)省了許多工作。

基于表格的設計：表格布局使網(wǎng)頁設計師制作網(wǎng)站時有了更多選擇。在 HTML 中表格標簽的本意是為了顯示表格化的數(shù)據(jù)，但是設計師很快意識到可以利用表格來構造他們設計的網(wǎng)頁，這樣就可以制作較以往作品更加復雜的，多欄目的網(wǎng)頁。表格布局就這樣流行了起來，融合了背景圖片切片技術，常給人以看起來較實際布局簡潔得多的結構。

結構設計：這個時期的網(wǎng)頁設計還不太關注語義化和可用性方面的問題，主要還在追求良好的結構美學。同一時期也是大量應用 GIF 占位圖片控制留白的時期。一些主流的公司甚至訓練設計師如何使用 GIF 占位;如微軟的“關于 HTML 表格中的 GIF 占位”。第一批主要應用表格布局的“所見即所得”網(wǎng)頁設計軟件的發(fā)展助長了表格的應用。另外，某些軟件自動生成的表格如此復雜以至于許多設計師不可能從頭手寫代碼(例如每行只有 1px 高卻包含了幾百列的表格)。即使是稍微復雜一點兒的網(wǎng)頁(比如多欄目頁面)，設計師們都要依賴于表格來創(chuàng)建。

三、網(wǎng)站結構

網(wǎng)站結構是指網(wǎng)站中頁面間的層次關系;按性質可分為邏輯結構及物理結構。網(wǎng)站結構對網(wǎng)站的搜索引擎友好性及用戶體驗有著非常重要的影響。

（一）網(wǎng)站結構整體先用DIV和CSS來進行構造，對整個網(wǎng)站進行布局，(二)網(wǎng)站結構是衡量網(wǎng)站用戶體驗好壞的重要指標之一。清晰的網(wǎng)站結

電子商務2班201341440213孫巖

構可以幫助用戶快速獲取所需信息;相反，如果一個網(wǎng)站的結構極其糟糕的話，用戶在訪問時就猶如走進了一座迷宮，最后只會選擇放棄瀏覽。

（三）網(wǎng)站結構還直接影響搜索引擎對頁面的收錄，一個合理的網(wǎng)站結構可以引導搜索引擎從中抓取更多有價值的頁面。

網(wǎng)站結構對網(wǎng)站及網(wǎng)站中頁面的影響。搜索引擎對重要頁面的抓取

由于互聯(lián)網(wǎng)中信息量極其龐大，為了向用戶展示更多有價值的信息，搜索引擎會優(yōu)先抓取每個網(wǎng)站中相對重要的頁面(即權重較高的頁面),然而，搜索引擎是怎樣發(fā)現(xiàn)這些重要頁面的呢?根據(jù)重要頁面的鏈接指向的頁面可能是重要頁面的思路;搜索引擎首先會從權重相對較高的頁面(即源頁面)出發(fā)跟蹤其中的鏈接，從而抓取其他相對重要的頁面(即目標頁面)。

網(wǎng)頁設計的要素

四、應用工具方案

DreamWeaver自制動態(tài)HTML動畫的網(wǎng)頁。

DreamWeaver是一個很酷的網(wǎng)頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML(Dynamic HTML)的設計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業(yè)設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

版面布局：在你開始設計之前，你必須仔細地為站點挑選色彩組合。千萬不要出現(xiàn)紫色的背景加上黑藍色的文字的組合。要使整個站點保持同一種色彩組合，因為不同顏色組合的背景或字體可能會是非常令人討厭的。你也可以選用一個背

電子商務2班201341440213孫巖

景圖，而不是僅用一種顏色。背景圖案可以自己繪制，也可以從因特網(wǎng)上下載。通過模糊背景圖案，就可以使文字更容易被閱讀。要記住的是，圖片不會被瀏覽器重畫的，而背景色彩則是要被重新畫的，因此，在上傳你的圖片之前，必須檢查不同的瀏覽器是如何顯示這些網(wǎng)頁的。當增加文字時，盡量設置容易被閱讀的字體和大小。如果你使用背景圖片，那么，當網(wǎng)頁被瀏覽時，背景色和字體將會先于背景圖片被下載，因此，如果背景色和文本的顏色沒有鮮明的對照的話，那么瀏覽者會有幾秒鐘的時間看到一個充滿了不可閱讀的文本的網(wǎng)頁。解決這個問題的簡單的方法就是，使背景色與背景圖的顏色相類似。

瀏覽導航：站點的瀏覽導航必須被設計成非常容易。如果需要，把站點分割為幾個部分。最容易的方法，就是在整個網(wǎng)站的所有的網(wǎng)頁的左邊放置一個菜單條。當然，除此以外，還有許多可選的方法。對于具有大量信息的站點，使用一個可擴展的菜單條會是一個不錯的選擇。無論你使用何種導航模式，在每一頁都放置一個主頁鏈接，那會是一種不錯的設計思想；瀏覽者必須知道，無論何時，當他們迷失在你的站點瀏覽中時，都可以通過簡單的一次點擊就能準確地知道目前所處的位置。

Frame(幀,框架)的問題：Frame—— 你也許會喜歡它，也許不喜歡。如果你在你的網(wǎng)站上使用幀，你很可能使一個幀用于導航目的，另一個幀用于放置內容。你可以看見在同一頁上有兩個被分割的瀏覽窗口，你點擊左邊的幀，只會改變右邊的內容。用幀來組織網(wǎng)站的內容，顯然是非常容易的。

檢驗你的HTML代碼 ：不要在你的網(wǎng)站上放置瀏覽計數(shù)器。計數(shù)器會讓你的網(wǎng)站看起來不夠專業(yè)化，如果瀏覽量不夠的話，還會起到相反的宣傳作用。最后，內容是金，如果能給的瀏覽者一些有價值的東西，如，信息，建議，或軟件，那么就能吸引瀏覽者經(jīng)常光顧你的網(wǎng)站。為你的站點增加消息板和聊天室，從而提高網(wǎng)站的交互性，使你和你的訪問者交流，讓訪問者彼此交流。

五、頻道欄目劃分

圖1

電子商務2班201341440213孫巖

六、代碼段

content=“text/html;charset=gb2312” />