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

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

document.mytest.submit()4.2 窗體中的基本元素

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

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

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

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

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

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

blur()：將當前焦點移到后臺。select()：加亮文字。主要事件：

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

第四章

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

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

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

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

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

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

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

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

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

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

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

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

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

onclick當單擊button按鈕時，產生該事件。例 ：

第四章 11........4.3窗體對象實例

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

test8_1.htm 調用動態按鈕文檔

第二篇：網頁設計與應用畢業論文

目 錄

第一章 前言??????????????????????????????2 1.1 課題來源 ???????????????????????????? 2 1.2 網站開發項目需求分析??????????????????????? 2 1.3 軟件??????????????????????????????? 3 1.4 軟件運行環境第二章 網站制作????????????????????3 第二章網絡制作????????????????????????????3 2.1做網頁的步驟 ??????????????????????????? 3 2.2 做網頁的要素????????????????????????????4 2.2.1網頁的整體布局設計????????????????????????4 2.2.2 網頁設計中色彩的運用???????????????????????4 2.2.3 網頁形式與內容相統一 ?????????????????????? 4 2.3 系統各模塊功能實現?????????????????????????4 2.3.1 系統登錄模塊 ??????????????????????????4 2.3.2 車輛展示模塊 ?????????????????????????? 5 2.3.3 賬號管理模塊???????????????????????????5 第三章 網站的設計??????????????????????????? 5 3.1 主頁的要求?????????????????????????????5 3.2 子頁的要求?????????????????????????????5 3.3 網頁設計技巧????????????????????????????5 3.3.1 框架的使用????????????????????????????5 3.3.2 CSS 樣式的使用??????????????????????????6 第四章 網站的應用??????????????????????????? 6 4.1 網頁分為靜態網頁和動態網頁?????????????????????6 4.2 我的認識??????????????????????????????6 結束語 ???????????????????????????????? 7 參考文獻????????????????????????????????7

—1—

網頁設計與應用

摘 要 ：汽車網站是一個結合了汽車銷售等多功能瀏覽的汽車網站，我所使用的軟件是

Macromedia 公 司 推 出 的 一 款 用 于 網 頁 設 計 的 軟 件 — —

dreamweaver8。在網頁的制作與鏈接中，我學到了很多，然后補充一些比較熱門的技巧。網站具有快捷。無距離更新的特性，同時提供進入日常業務處理平臺的“入口”，具有較強的實用價值。這樣的網站被廣大消費者普遍使用，隨著現在網絡的普及和高效性的不斷提高，它的展示作用和實用性已經使它的應用地位越來越高，越來越廣泛。本文對網站設計作了介紹，進行了需求分析、模塊劃分、框架和 CSS 的介紹。由于制作經驗不足，作品和論文中存在問題之處，請老師指導完善。

關鍵詞： 超鏈接，外觀，性能，框架，CSS 目 錄

第一章 前言 1、1 課題來源

隨著二十一世紀新興科技的飛速發展，如今的電子信息產業正在經受著一個巨大的挑戰，同時也面臨著一個重大的機遇。就目前的科技發展水平而言，電子信息產業的發展已經不能夠滿足社會化大生產的要求，因此，各個國家集中人力、財力加大對信息技術產業的投入，以適應目前需要。可喜的是在這幾十年的發展中我們有了互聯網。互聯網加大了我們了解世界的眼界，縮緊了人與人之間的距離，這就更容易的使我們走上信息化的道路。以往，人們出行都以自行車居多，后來公交事業發展壯大，人們便乘坐公交汽車，現如今，隨著人們生活水平的提高，越來越多的家庭已經擁有或者想擁有自己的私家車。正是因為人們的這些需求，越來越多的汽車網站出現在網絡上，使人們可以隨時了解自己想知道的汽車方面的新聞，真正的做到足不出戶，便知天下事。把汽車銷售與網絡連接起來，是今后汽車銷售發展的必然方向之一。

1．2 網站開發項目需求分析

一個網站項目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實際需求或者是出于公司自身發展的需要，其中客戶的實際需求也就是說這種交易性質的需求占了絕大部分。面對對網站開發擁有不同知識層面的客戶，項目的負責人對用戶需求的理解程度，在很大程度上決定了此類網站開發項目的成敗。因此如何更好地的了解、分析、明確用戶需求，并且能夠準確、清晰以文檔的形式表達給參與項目開發的每個成員，保證開發過程按照滿足用戶需求為目的正確項目開發方向進行，是每個網站開發項目管理者需要面對的問題。據專家預計，2009 年我國汽車需求量將超過 850 萬輛。所以，做好汽車 —2—

網站就是為了使廣大的消費者提供及時和有效的信息，為其選擇適合自己的產品提供良好的參考。

1．3 使用軟件

dreamwraver 軟 件 由 美 國 著 名 的 網 站 應 用 開 發 工 具 生 產 廠 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市場以來，已經發展得相當成熟⑴。關于dreamwraver 的技術介紹的相關書籍與網絡信息相當豐富。通過大學中軟件開發環境課程的學習，對 dreamwraver 有了比較深刻的認識，并比較輕松的掌握了dreamwraver 的操作。因此，軟件技術可以完成任務的要求。

1．4 軟件運行環境

Dreamweaver 是一款簡體中文軟件，可以在 Win2003/WinXP 中安全運行⑵

第二章 網站制作

2．1 制做網頁的步驟

在做網頁之前，我確定了做網頁的五個步驟。

一、確定網站主題 ：網站主題就是要建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。

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

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

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

五、制作網頁 ：材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜來進行制作。所謂先大后小，就是說在制作網頁時，先把大的結構設計好，然后再逐步完善小的結構設計。所謂先簡單后復雜，就是先設計出簡單的內容，然后再設計復雜的內容，以便出

①知新文化.HTML 完全手冊與速查辭典[M].北京：科學出版社，第49頁，2007.② 楊選輝，網頁設計與制作教程[M].北京：清華大學出版社，第321頁，2009.—3—

現問題時好修改。在制作網頁時要多靈活運用模板，這樣可以大大提高制作效率。此外，整體設計完成后我們還要將網頁上傳測試，使其和其他版本瀏覽器能夠兼容，再者對網站推廣宣傳，及時的維護更新。

2.2 制作網頁的要素

2.2.1 網頁的整體布局設計

網頁設計作為一種視覺語言，要講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，應充分加以利用和借鑒。⑴版式設計通過文字圖形的空間組合，表達出和諧與美。一個優秀的網頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系。尤其是我們在利用網頁效果體現在線營銷的意圖時，更要注意為了達到最佳的視覺表現效果，而講究整體布局的合理性，比如一家生產型的企業，它所提供產品的名稱、類別、型號、價格、功能介紹應怎樣編排才能使瀏覽者有一個流暢的視覺體驗，從而方便他對產品的了解，促成最后的購買。

2.2.2 網頁設計中色彩的運用

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

2.2.3 網頁形式與內容相統一

要將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。⑷運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。如對稱原則在

①王誠君，劉振華，郭竑暉，《高中山.Dreamweaver 8 網頁設計應用教程[M]》.北京：清華大學出版社，第332頁，2007.②李光明，曹蕾，余輝.《中文Dreamweaver 8 網頁設計與實訓教程[M]》.北京：冶金工業出版社，第13頁，2006.③周德華，許銘霖.《新編網頁設計教程[M]》.北京：冶金工業出版社，第159頁，2006.—4—

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

2．3 系統各模塊功能實現

2.3.1 系統登錄模塊

1、該功能模塊可以記錄客戶的郵箱地址，交易時還可以向客戶發送交易信息，到帳確認等等。

2、登陸后系統會調出客戶的記錄，按照交易量的不同客戶享受的折扣也不同，系統主界面

2.3.2 車輛展示模塊⑴

1、該功能模塊主要實現對車輛的展示。

2、該功能模塊圖片、文字介紹，360 度 flash 對各種車輛的展示。

2.3.3 賬號管理模塊⑵

1、掛失業務在正常工作中肯定會遇到掛失的業務，確定掛失后，數據庫會將該賬號掛起，等待客戶做進一步操作。

2、凍結業務，客戶對賬號有凍結的權利，在客戶沒有輸入解凍密碼之前，任何人都無法動用帳上的資金。

3、流水查詢客戶可以查詢曾經交易過的記錄。

4、客戶可以自行對其賬號密碼進行修改，網站管理人員也可以添加或刪除賬號。

第三章 網站的設計

3.1 主頁的要求

對于銷售業務系統要求運行的工作環境穩定，易于操作，界面美觀大方，對 于前臺展示界面要求系統便于維護，安全可靠，對于廣大客戶所要執行的操作 簡單易懂，遠程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠程 操作數據庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏 覽者所想要了解的東西。

3.2 子頁的要求

后面的工作就是子頁的選擇與鏈接，子頁應該豐富多彩，內容充實，瀏覽 性強，比如說，想要銷售一輛汽車，應該有它的全部資料，包括外觀、內飾、性能指標、出產地、價

① 趙銘建，趙慧，喬孟麗，康梅娟.《網頁設計與制作[M].》東營：中國石油大學出版社，第66頁，2007.②趙祖蔭，王云翔，胡耀芳.《網頁設計與制作教程[M]》.北京：清華大學出版社，第187頁，2008.—5—

格等諸多方面，鑒于以上方面，我開始了子頁的選擇 與鏈接。3.3 網頁設計技巧

一張完美的主頁設計需要積累豐富的知識以及掌握大量的技巧。在這里從框架 和 CSS 樣式的運用兩方面來介紹網頁設計的技巧。⑴

3.3.1 框架的使用

FRAME（框架）是 Web 上經常會看到的頁面結構。框架的最常見用途就是導航⑵。一組框架通常包括一個含有導航條的框架和另一個要顯示主要內容頁面的框 架。使用框架具有以下優點：訪問者的瀏覽器不需要為每個頁面重新加載與導航相 關的圖形；每個框架都具有自己的滾動條如果內容太大，在窗口中顯示不下，因此訪問者可以獨立滾動這些框架。例如，當框架中的內容頁面較長時，如果 導航條位于不同的框架中，那么向下滾動到頁面底部的訪問者就不需要再滾動 回頂部來使用導航條。使用框架具有以下缺點：可能難以實現不同框架中各元素的精確圖形對齊；對 導航進行測試可能很耗時間。許多專業 Web 設計人員不喜歡使用框架，并且許多瀏覽 Web 的人也不喜歡框 架。在大多數情況下，這種反感是因為遇到了那些使用框架效果不佳或不必要 地使用框架的站點例如，每當訪問者單擊導航按鈕時就重新加載導航框架內 容的框架集。如果框架使用得法例如，在允許其他框架的內容發生更改的同 時，使一個框架中的導航控件保持靜態，則這些框架對于某些站點可能非常 有用。

3.3.2 CSS 樣式的使用

CSS 層疊 樣 式 表 是 一 種 制 作 網 頁 的 新 技 術 它 的 全 稱 是 級 聯 樣 式 表 即Cascading StyleSheets 的縮寫，又稱之為風格樣式表單。⑶CSS 是在網頁制作過程中普遍用到的技術。采用了 CSS 技術控制的網頁，設計者會更輕松、有效地對頁面的整體布局、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同頁面的外觀和格式等效果實現更加精確地控制。

第四章 網頁的應用

4.1 網頁分為靜態網頁和動態網頁。

4.1.1 優點：

靜態網頁：1.靜態網頁的內容相對穩定，因此容易被搜索引擎檢索； 動態網頁：

1.動態網頁以數據庫技術為基礎，可以大大減少降低網站維護的工作量；

2.采用動態網頁技術的網站可以實現更多的功能，如用戶注冊、用戶登錄、在線調查、用戶管理、頂訂單管理等等

①]陳季.《 Flash 基礎與實例教程[M]》.北京：北京希望電子出版社，第88頁，2005.②丁海祥.《計算機平面設計實訓[M].》 北京：高等教育出版社，第54頁，2005.③曹雁青，楊聰.《 Photoshop 經典作品賞析[M].》北京：北京海洋智慧圖書有限公司，第35頁，2002.—6—

4.1.2 缺點： 靜態網頁：

1.靜態網頁沒有數據庫的支持，在網站能制作和維護方面工作量較大，因此 當網站信息量很大時完全依靠靜態網頁制作方式比較困難； 2.靜態網頁的交互性交叉，在功能方面有較大的限制。動態網頁：1.動態網頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可 能從一個網站的數據庫中訪問全部網頁，或者處于技術方面的考慮，搜索 蜘蛛不去抓取網址中“？”后面的內容，因此采用動態網頁的網站在進行 搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求。

4.2 我的認識

網頁應用很廣泛，當我們打開 IE 瀏覽器的時候，出現在屏幕上的就是一個網頁，隨著社會的進步，生活節奏地加快，各行各業都開始使用互聯網來宣傳自己的產品，或者進行其他的活動。網站設計離不開網頁，網頁像書中的章頁，由這些頁面構成了整個網站。不管是大企業還是小公司，都有自己的網站，當然網站是離不開網頁的。網頁中的信息可以給我們帶來很多幫助，可以用來學習或者做一些活動的參考。通過對這門課程的學習會收獲很多。

結束語

在系統的需求分析過程中，由于不熟悉，產生了很大的困難，通過與指導老師的探討與溝通，我漸漸地對系統有了一個大體的認識。雖然說在系統需求分析過程中花費了很多時間，但是我認為這是必要的也是必須的。這次畢業設計中我了解到了很多的知識，這對我今后的學習和生活都將會有很大的幫助。我明白了對于一個完整性的軟件設計流程的主要性，在整個網站設計過程中前期需求分析，可行性分析是非常重要的環節，可以說是軟件設計的核心，在過去我一直認為詳細設計編碼才是最重要的，因為再好的需求，編碼不成功，軟件就無法正常運行。鍛煉了自己發現問題，解決問題的能力。開發過程中遇到一些需求的變化，通過修改設計思路，避免在后期產生更大的錯誤。再詳細設計的每一步都有可能出錯，所以會進行非常多的調試工作，只要發現問題就調試解決，這樣不僅增強了信心，也很好的鍛煉了自己遇到問題不急不躁，耐心解決的能力。

參 考 文 獻

〈1〉《信息技術》江蘇科學技術出版社.〈2〉《網頁制作》人民郵電出版社.〈3〉 《dreamweaver8 參考手冊》2008 年版.，〈4〉柯林森、劉志忠，CSS 基礎教程，人民郵電出版社，2007.9.〈5〉蘇昱，樣式表中文手冊，幫助文檔。〈6〉韓國鋒、ASP 柯華坤，網站開發典型模塊與實例精講，電子工業出版社，2006.8.—7—

第三篇：網頁設計與制作的應用論文

項目驅動教學法是以項目為主線，將學生的學習活動與實際的項目相結合，師生共同研究并實施一個具體的項目而進行的教學活動，是鼓勵學生積極參與、協作、創新的一種教學模式。在《網頁設計與制作》課程教學過程中引入具體的項目，以項目帶動課程各知識點的學習，采用循序漸進、由淺入深的方式開展課堂教學，不僅能夠調動學生學習的積極性，產生學習的興趣，還能培養他們的實踐動手能力、協同工作能力和創新能力。、現狀分析

《網頁設計與制作》是計算機應用技術專業的必修課，同時也是核心課，作為《Asp.net程序設計》的前導課程，需要學生熟練掌握網站前臺界面設計，為將來開發動態網站打下良好的基礎。然而，傳統教學存在問題如下：

1.1 教學方法難以吸引學生興趣

傳統方式由教師在多媒體教室講解，學生上機完成實驗實例，雖然也能學到制作網頁的一些知識，但是很難激發學生學習的興趣。幾次上機后，部分同學就產生惰性情緒，布置的案例完成得越來越少，久而久之，甚至有少數學生放棄該課程學習。

1.2 教學缺乏整體性

逐章節展開的教學，盡管也涵蓋了網頁設計相關內容，但是上機實驗時只是完成案例中某部分相關知識點的實踐，學生還是不會制作一個完整的網站，缺乏對網站制作流程的系統性認識。

1.3 缺乏創新意識

以教師為主體的教學最大弊病在于學生缺乏主動意識，他們更多的是模仿教師給的案例或者互聯網上發布的網站，幾乎沒有創新。被動的學習使得學生產生只要把老師布置的任務做完就萬事大吉的心理，根本不會想到去主動思考與創新。

1.4 考核方式單一

對于這類實踐性強的課程，以往的試卷考試難以對學生的動手能力進行評價，因此發掘新的考核方式，打破傳統思維著重考核學生的創新思維能力和動手實踐能力就尤為必要了。、教學內容選取

經過市場調研，《網頁設計與制作》課程相關職業崗位主要是“網頁界面設計”和“網站管理與維護”，根據這兩個職業崗位能力要求，選取合適的教學內容。

3、項目式教學設計

教學過程中，圍繞著“欣賞網站”、“設計網站”和“維護網站”展開，通過欣賞往屆優秀學生作品以及國內外不同網站風格，引起學生學習的興趣。一個完整的項目網站由若干個分頁面構成，因此各分頁面設計是教學的重點，也是難點。網站設計好后，需要定期對網站進行維護，包括檢查和修復超級鏈接、內容更新、網站推廣等等。分頁面設計分為初級階段和高級階段，初級階段以基于表格布局的頁面設計為主，高級階段以基于Web標準的頁面設計為依據，具體教學設計情境如表2所示。選取合適的項目實例是項目教學法能否成功實施的關鍵。項目的選取可依據職業崗位能力對應的教學內容，既要涵蓋該課程的基本知識點，又要考慮學生的實際基礎，難易得當。在分析項目、討論、實施項目的過程中，學生即可在輕松、融洽的氛圍中掌握網頁制作的技巧。

4、考核方式改革

根據學院要求，傳統課程一般按照期末卷面考試成績占60%，平時成績占40%計算出總評成績。顯然，這種分配制度已不適合新方法下的教學。因此，依據實際教學情況重新分配了成績比例，期末作品占50%，展示講解作品占20%，出勤平時表現占30%。學生以分組或獨立的方式完成一個完整的網站作品，教師給出網站設計基本要求，期末采用集中講解、點評的方式，由每位學生在多媒體教室面對全班同學介紹網站的內容、制作技巧、特色之處等，教師和學生進行點評，肯定其優點，同時對不足之處提出改進思路。學生對此方式表現出強烈的熱情，遇到網頁中的與眾不同處會提出各種問題，有時候甚至刨根問底具體制作步驟。、結語

實踐證明，在《網頁設計與制作》課程教學中采用項目驅動教學法取得了良好的效果，學生從零起點到熟練掌握網頁設計技巧，變化突飛猛進。幾乎所有的同學都能夠獨自搜集素材開發一個小型的網站，并且在展示成果的過程中相互學習，取長補短。項目驅動教學法改革了計算機類課程教學模式、教學方法，更新了教學理念、教學內容，完善了課程評價體系，使學生具備網站規劃，網頁制作、腳本代碼編寫等綜合技能。如何在計算機類專業課程中廣泛實施項目教學法，需要我們進一步研究和實踐。

第四篇：網頁設計與制作-論文（本站推薦）

第一章

緒論

摘 要

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

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

關鍵詞： 網頁制作；網頁設計；HTML；ASP

第一章

緒論

第一章 緒論

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

1.1 網頁設計概述

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

1.2 網頁設計的要素

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

一、確定網站的整體風格

在這里，我提供給大家一些參考經驗：

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

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

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

二、網頁色彩的搭配

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

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

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

1.3 大作業目的和意義

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

第一章

緒論

1.4 要分析的網頁

第一章

緒論

第一章

緒論

第二章

HTML網頁設計技術的應用

第二章 HTML網頁設計技術的應用

2.1 HTML語言介紹

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

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

2.1.1 HTML語言的特點

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

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

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

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

2.1.2 HTML語言的編輯軟件

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

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

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

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

2.1.4 html語言在網頁設計中的應用

第二章

HTML網頁設計技術的應用

2.2.3JavaScript技術在網頁設計中應用

一、JavaScript概述

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

1、是一種腳本編寫語言

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

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

2、基于對象的語言。

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

3、簡單性

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

4、安全性

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

5、動態性的

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

6、跨平臺性

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

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

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

第二章

HTML網頁設計技術的應用

第五章

色彩在網頁中的應用

第五章 色彩在網頁中的應用

5.1色彩在網頁中的應用

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

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

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

5.2主頁色彩的處理

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

5.3常用的配色方案

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

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

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

第五章

色彩在網頁中的應用

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

5.4合理搭配網頁色彩

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

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

第五章

色彩在網頁中的應用

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

要實現網頁的動態交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。

6.1窗體基礎知識

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

6.1.1窗體對象

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