網(wǎng)頁設(shè)計與應(yīng)用

1、-作者xxxx-日期xxxx網(wǎng)頁設(shè)計與應(yīng)用【精品文檔】網(wǎng)頁設(shè)計與應(yīng)用專 業(yè)：計算機網(wǎng)絡(luò)技術(shù)班 級：2015學(xué) 號：20150321031姓 名：蔡依婷指導(dǎo)教師：楊艷慈邯鄲職業(yè)技術(shù)學(xué)院2017年11月21日【精品文檔】網(wǎng)頁設(shè)計與應(yīng)用摘 要本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的基礎(chǔ)上，著重使用JavaScript作為工具語言進行網(wǎng)頁設(shè)計與制作的實際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互窗口和框架進行詳細描述，并利用具體的實例進行驗證。本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。第二章

2、：網(wǎng)頁設(shè)計語言概述，本章主要介紹網(wǎng)頁設(shè)計的語言HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定基礎(chǔ)。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實現(xiàn)與HTML文檔進行交互。第五章：WEB頁面信息的交互窗體與框架，本章主要介紹實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。關(guān)鍵詞： 網(wǎng)頁制作；網(wǎng)頁設(shè)計；HTML；ASP目 錄1.1 網(wǎng)頁設(shè)計概述41.2 網(wǎng)頁設(shè)計的要素41.3 大作業(yè)目的和意義4第二章 H

3、TML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用5 HTML語言介紹52.1.1 HTML語言的特點52.1.2 HTML語言的編輯軟件5第三章 色彩在網(wǎng)頁中的應(yīng)用6色彩在網(wǎng)頁中的應(yīng)用6主頁色彩的處理6常用的配色方案6第四章 WEB頁面信息的交互窗體與框架7774.1.2 窗體對象的方法84.2 窗體中的基本元素8104.4 框架124.5 框架的訪問134.6本章小結(jié)16第五章 結(jié) 論17致 謝18參考文獻19第一章 緒論隨著21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機的應(yīng)用技能。掌握計算機是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計與制作是計算機能力的具體表現(xiàn)

4、，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。1.1 網(wǎng)頁設(shè)計概述網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。1.2 網(wǎng)頁設(shè)計的要素網(wǎng)頁設(shè)計的兩大要素是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格在這里，我提供給大家一些參考經(jīng)驗：1將你的標志logo，盡可能的放在每個頁面上最突出的位置。2突出你的標準色彩。3總結(jié)一句能反映貴站精髓的宣傳標語！4相同類型的圖像采用相同效果，比如

5、說標題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁色彩的搭配1用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。2用兩種色彩。先選定一種色彩，然后選擇它的對比色。3用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。1.3 大作業(yè)目的和意義 本大作業(yè)主要是對網(wǎng)頁設(shè)計與制作的語言基礎(chǔ)上進行探討，主要內(nèi)容如下：通過已經(jīng)做好的網(wǎng)頁，分析html網(wǎng)頁設(shè)計技術(shù)、XML技術(shù)、Java Applet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用。 第二章 HTML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用

6、 HTML語言介紹HTML（HyperText Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。2.1.1 HTML語言的特點HTML文檔制作不是很復(fù)雜，且功能強大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是WWW盛行的原因之一，HTML語言的特點如下：1、簡易性，HTML版本升級采用超集方式，

7、從而更加靈活方便。2、可擴展性，HTML語言的廣泛應(yīng)用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴展帶來保證。3、平臺無關(guān)性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。2.1.2 HTML語言的編輯軟件HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：1、基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀斎?，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣瀏覽器就可以解釋執(zhí)行了。2、半所見即所得軟件，這種軟件能大大提高開發(fā)

8、效率，它可以使你在很短的時間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。第三章 色彩在網(wǎng)頁中的應(yīng)用色彩在網(wǎng)頁中的應(yīng)用色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合搭配來構(gòu)成美麗的頁面。 根據(jù)色彩對人們心理的影響，合理地加以運用。先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩

9、統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。背景和前文的對比盡量要大以便突出主要文字內(nèi)容。主頁色彩的處理色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標志色

10、，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主頁的文化品位。常用的配色方案1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、和煦、熱情的氛圍。 2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氛圍。 3.對比色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色彩的搭配

11、，可以產(chǎn)生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。 最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術(shù)語，就是“高調(diào)”和“低調(diào)”。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。這種深淺的變化在色彩學(xué)中稱為“明度變化”。當然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強，同樣也會使讀者的眼睛受不了。第四章 WEB頁面信息的交互窗體與框架要實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。窗體對象

12、可以使設(shè)計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數(shù)據(jù)輸入，就可以實現(xiàn)動態(tài)改變Web文檔的行為。窗體（Form）：它構(gòu)成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms數(shù)組來實現(xiàn)不同窗體的訪問。<form Name=Form1><INPUT type=text.><Input type=text.><Inpup byne=text.></form><form Name=Form2><INPUT type=text.><Input type=text.

13、></form>在Forms0中共有三個基本元素，而Forms1中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：<FormName ="表的名稱"Target ="指定信息的提交窗口"action ="接收窗體程序?qū)?yīng)的URL"Method =信息數(shù)據(jù)傳送方式(get/post)enctype ="窗體編碼方式"onsubmit ="JavaScript代碼"></Form>4.1.2 窗體對象的方法

14、窗體對象的方法只有一個-submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用下列格式：document.mytest.submit()4.2 窗體中的基本元素窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下：formName.elements.methadName (窗體名.元素名或數(shù)組.方法)formNpertyName(窗體名.

15、元素名或數(shù)組.屬性)下面分別介紹：（1）Text單行單列輸入元素功能：對Text標識中的元素實施有效的控制?；緦傩裕篘ame：設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue：包括Text元素的默認值基本方法：blur()：將當前焦點移到后臺。select()：加亮文字。主要事件：onFocus：當Text獲得焦點時，產(chǎn)生該事件。OnBlur：從元素失去焦點時，產(chǎn)生該事件。Onselect：當文字被加亮顯示后，產(chǎn)生該文件。onchange：當Text元素值改變時，產(chǎn)生該文件。例：<Fo

16、rm name="test"><input type="text" name="test" value="this is a javascript" ></form>.<script language ="Javascirpt">document.mytest.value="that is a Javascript"document.mytest.select();document.mytest.blur();</script&

17、gt;（2）textarea多行多列輸入元素功能：實施對Textarea中的元素進行控制。基本屬性name：設(shè)定提交信息時的信息名稱，對應(yīng)HTML文檔Textarea的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Default value：元素的默認值。方法：blur()：將輸入焦點失去select()：將文字加亮后事件：onBlur:當失去輸入焦點后產(chǎn)生該事件onFocus:當輸入獲得焦點后，產(chǎn)生該文件Onchange:當文字值改變時，產(chǎn)生該事件Onselect:當文字加亮后，產(chǎn)生該文件（3）Select選擇元素功能：實施對滾動選擇元素的控制。屬性：name

18、:設(shè)定提交信息時的信息名稱，對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的lengthoptions:組成多個選項的數(shù)組selectIndex;該下標指明一個選項select在中每一選項都含有以下屬性：Text:選項對應(yīng)的文字selected:指明當前選項是否被選中Index:指明當前選項的位置defaultselected:默認選項事件：OnBlur：當select選項失去焦點時，產(chǎn)生該文件。onFocas:當select獲得焦點時，產(chǎn)生該文件。Onchange:選項狀態(tài)改變后，產(chǎn)生該事件。（4）Button按鈕功能：實施對Button按鈕的控制。屬性：Name:設(shè)

19、定提交信息時的信息名稱，對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法：click()該方法類似于一個按下的按鈕。事件：onclick當單擊button按鈕時，產(chǎn)生該事件。例 ：<Form name="test"><input type="button" name="testcall" onclick=tmyest()></form>.<script language="javascirpt">documen

20、t.elements0.value="mytest" /通過元素訪問或document.testcallvalue="mytest" / 通過名字訪問</script>.下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調(diào)用動態(tài)按鈕文檔”調(diào)用一個動態(tài)按鈕文檔。<html><head><Script Language="JavaScript">/原來的顏色document.bgColor="blue"document.vlinkColor="whit

21、e"document.linkColor="yellow"document.alinkcolor="red"/動態(tài)改變顏色function changecolor() document.bgColor="red" document.vlinkColor="blue" document.linkColor="green" document.alinkcolor="blue"</script></HEAD><body bgColor=&qu

22、ot;White" ><A href="test8_2.htm"> 調(diào)用動態(tài)按鈕文檔</a><form > <Input type="button" Value="red" onClick="changecolor()"></form></BODY></HTML>輸出結(jié)果見圖4-1所示。 圖4-1 調(diào)用動態(tài)按鈕圖動態(tài)按鈕程序。 <HTML><HEAD></HEAD><p al

23、ign="center"></p><div align="center"><center><table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="form2" onSubmit="null"> <p><input ty

24、pe="submit" name="banner" VALUE="Submit" onClick="alert('You have to put an 'action=url' on the form tag!')"> <br><script language="JavaScript">var id,pause=0,position=0;function banner() / variables declaration var i,k

25、,msg=" 這里輸入你要的內(nèi)容"/ increase msg k=(30/msg.length)+1; for(i=0;i<=k;i+) msg+=" "+msg; / show it to the window document.form2.banner.value=msg.substring(position,position-30); / set new position if(position+=msg.length) position=0; / repeat at entered speed id=setTimeout("ba

26、nner()",60); / end ->banner();</script></p> </form> </td> </tr></table></center></div><p></p><BODY><A href="test8_1.htm"> 返回</a></BODY></HTML>圖4-2 動態(tài)按鈕網(wǎng)頁圖本講介紹了使用JavaScript腳本實現(xiàn)Web頁面信息交互的方法。其中主要

27、介紹了窗體中的基本元素的主要功能和使用。4.4 框架框架Frames最主要功用是"分割"視窗，使每個"小視窗"能顯示不同的HTM L文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設(shè)您開了兩個frames，第一個frame可顯示書的目錄，第二個frame則顯示章節(jié)的具體內(nèi)容?？蚣芸梢詫⑵聊环指畛刹煌膮^(qū)域，每個區(qū)域有自己的URL，通過Frames數(shù)組對象來實現(xiàn)不同框架的訪問。實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。利用框架的例子具體說明，見圖5-3所示。圖4-3 框

28、架對象<HTML><HEAD></HEAD><Frameset Rows="20%,80%"><frame src="test9_1.html"> <Frameset Cols="50%,50%"><frame src="test9_2.html"> <frame src="test9_3.html"></Frameset></Frameset></HTML>以上H

29、TML標識將屏幕分成三個框架。先將窗口分成以二行為單位的窗口，之后再按分成二個窗口。并在相應(yīng)的框架中放入自己的HTML文檔。通過Framset告訴瀏覽器您要設(shè)置幾個框架；rows這項參數(shù)告訴瀏覽器您想將視窗分割成幾列；而cols這項參數(shù)是告訴瀏覽器您想將視窗分割成幾行?？梢杂煤芏嘟M的 <frameset.> tags 將視窗分割得更復(fù)雜?？梢越o每個frame一個“名字”(name)。frame的名字在JavaScript語法中的地位非常重要?？梢杂?<src> 告訴瀏覽器要載入的HTML文件。4.5 框架的訪問在前面我們介紹過使用document.forms實現(xiàn)單一窗體

30、中不同元素的訪問。而要實現(xiàn)框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個數(shù)組，他在父框架集中為每一個子框架設(shè)有一項。通過下標實現(xiàn)不同框架的訪問：parent.framesIndex1.docuement.formsindex2通過parent.frames.length確定窗口中窗體的數(shù)目。除了使用數(shù)組下標來訪問窗體外還可以使用框架名和窗體名來實現(xiàn)各元素的訪問：parent.framesName.decument.formNames.elementName.(m/p)通過一個具體的實例，來說明利用JavaScript腳本在WEB中實現(xiàn)

31、更為復(fù)雜的信息交互。該例子是在一個多窗口中實現(xiàn)窗體信息的動態(tài)交互，在程序中首先在瀏覽器窗口中制作三個用于窗體交互的窗口，每個窗體窗口實現(xiàn)不同信息的動態(tài)交互。tset9.html為主調(diào)用文檔它首先將窗口劃分為具有二行的窗體，爾后再將第二行的窗體劃分為具有二列的窗體；test9-1.html為顯示標題文檔；test9_2.html為第二框架文檔其中需要注意的是：通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；test7_3.html為第三框架文檔。主調(diào)文檔 主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。<HTML&g

32、t;<HEAD></HEAD><Frameset Rows="10%,90%"> <frame src="test9_1.htm"> <Frameset Cols="40%,60%"> <frame src="test9_2.htm"> <frame src="test9_3.htm"> </Frameset> </Frameset></HTML>第一個框架 主要作用是顯示標題

33、文檔。<HTML><HEAD></HEAD><H2>使用框架實現(xiàn)WEB交互</H2></HTML>第二個框架 主要作用是實現(xiàn)交互?？梢酝ㄟ^JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。<HTML><HEAD></HEAD><Body><Form name="test9_1">請選擇城市：<BR><Select name="select1" Multiple>&l

34、t;Option>山西省<Option>四川省<Option>貴州省 <Option>山東省<Option>江蘇省<Option>浙江省<Option>安徽省<Option>河南省</select><BR><HR><Input Type="Submit" name="" value="提交"><Input Type="reset" name="" val

35、ue="復(fù)位"></Form><pre><script language="JavaScript"> document.test9_1.elements0.options0.text="太原市" document.test9_1.elements0.options1.text="成都市" </script></pre></Body></HTML>第三個框架：主要作用是實現(xiàn)交互。<HTML><HEAD>&

36、lt;/HEAD><Body><Form name="test9_2">請輸入用戶名：<Input Type="text" name="text1" Value="" Size=20><BR><HR>請選擇:<Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR><Input Type="C

37、heckbox" name="checkbox2" Value="bf">部分信息<BR><Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br><HR><Input Type="Submit" name="" value="提交"><Input Type="reset" name="" value="復(fù)位"><BR></Form><script language="JavaScript&qu