網頁設計與應用網頁設計與應用專業：計算機網絡技術班級：2015學號：20150321031姓名：蔡依婷指導教師：楊艷慈邯鄲職業技術學院2017年11月21日網頁設計與應用全文共20頁，當前為第1頁。網頁設計與應用全文共20頁，當前為第1頁。網頁設計與應用摘要本論文將對個人網頁設計與制作的方法、工具等展開研究和探討。在介紹網頁設計與制作語言的基礎上，著重使用JavaScript作為工具語言進行網頁設計與制作的實際操作，分別對基于對象的JavaScript語言、內部對象系統的使用及WEB頁面信息交互——窗口和框架進行詳細描述，并利用具體的實例進行驗證。本論文主要章節如下，第一章：緒論，本章主要介紹網頁設計的相關知識。第二章：網頁設計語言概述，本章主要介紹網頁設計的語言——HTML，以及用于編輯HTML語言的軟件，為后續工作奠定基礎。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內部對象屬性、方法的使用。第四章：內部對象系統的使用，本章主要介紹使用瀏覽器的內部對象系統，可實現與HTML文檔進行交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實現網頁的動態交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。關鍵詞：網頁制作；網頁設計；HT網頁設計與應用全文共20頁，當前為第2頁。ML；ASP網頁設計與應用全文共20頁，當前為第2頁。PAGE2目錄196961.1網頁設計概述 4284991.2網頁設計的要素 4147291.3大作業目的和意義 41398第二章HTML網頁設計技術的應用 597122.1HTML語言介紹 5276372.1.1HTML語言的特點 5181752.1.2HTML語言的編輯軟件 51092第三章色彩在網頁中的應用 682513.1色彩在網頁中的應用 6215533.2主頁色彩的處理 6223203.3常用的配色方案 63652第四章WEB頁面信息的交互——窗體與框架 748014.1窗體基礎知識 726354.1.1窗體對象 7199994.1.2窗體對象的方法 858874.2窗體中的基本元素 810814.3窗體對象實例 1056764.4框架 12327384.5框架的訪問 1378744.6本章小結 1615880第五章結論 1731925致謝 1831398參考文獻 19網頁設計與應用全文共20頁，當前為第3頁。網頁設計與應用全文共20頁，當前為第3頁。第一章緒論隨著21世紀的到來，人們更深切地感受到計算機在生活和工作中的作用越來越重要，越來越來的職業需要具有計算機的應用技能。掌握計算機是職業的需要，更是事業發展的需要。網頁設計與制作是計算機能力的具體表現，本章主要介紹網頁設計的相關知識。1.1網頁設計概述網站是企業向用戶和網民提供信息(包括產品和服務)的一種方式,是企業開展電子商務的基礎設施和信息平臺，離開網站（或者只是利用第三方網站）去談電子商務是不可能的。企業的網址被稱為“網絡商標”，也是企業無形資產的組成部分，而網站是INTERNET上宣傳和反映企業形象和文化的重要窗口。1.2網頁設計的要素網頁設計的兩大要素是：整體風格和色彩搭配。一、確定網站的整體風格在這里，我提供給大家一些參考經驗：1．將你的標志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標準色彩。3．總結一句能反映貴站精髓的宣傳標語！4．相同類型的圖像采用相同效果，比如說標題字都采用陰影效果，那么在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！二、網頁色彩的搭配1．用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。1.3大作業目的和意義網頁設計與應用全文共20頁，當前為第4頁。本大作業主要是對網頁設計與制作的語言基礎上進行探討，主要內容如下：通過已經做好的網頁，分析html網頁設計技術、XML技術、JavaApplet技術和Javascript技術在網頁設計中的應用。網頁設計與應用全文共20頁，當前為第4頁。網頁設計與應用全文共20頁，當前為第5頁。網頁設計與應用全文共20頁，當前為第5頁。PAGE2第二章HTML網頁設計技術的應用2.1HTML語言介紹HTML（HyperTextMark-upLanguage）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。2.1.1HTML語言的特點HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入，這也是WWW盛行的原因之一，HTML語言的特點如下：1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。2、可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。3、平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。2.1.2HTML語言的編輯軟件HTML的本質是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：1、基本編輯軟件，使用WINDOWS自帶的記事本或寫字版都可以編寫，當然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴展名，這樣瀏覽器就可以解釋執行了。2、半所見即所得軟件，這種軟件能大大提高開發效率，它可以使你在很短的時間內做出Homepage，且可以學習HTML，這種類型的軟件主要有HOTDOG，還有國產的軟件網頁作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。網頁設計與應用全文共20頁，當前為第6頁。網頁設計與應用全文共20頁，當前為第6頁。第三章色彩在網頁中的應用3.1色彩在網頁中的應用色彩是藝術表現的要素之一。在網頁設計中，我們的設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。根據色彩對人們心理的影響，合理地加以運用。先選定一種色彩，然后調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。在網頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內。背景和前文的對比盡量要大以便突出主要文字內容。3.2主頁色彩的處理色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，達到事半功倍的效果。色彩總的應用原則應該是“總體協調，局部對比”，也就是：主頁的整體色彩效果應該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據主頁內容的需要，分別采用不同的主色調。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業的標志色，例如：軍警的橄欖綠，醫療衛生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進、退的效果等。另外，色彩還有民族性，各個民族由于環境、文化、傳統等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術內涵，從而提升主頁的文化品位。3.3常用的配色方案1.暖色調。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用，可使主頁呈現溫馨、和煦、熱情的氛圍。2.冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用，可使主頁呈現寧靜、清涼、高雅的氛圍。網頁設計與應用全文共20頁，當前為第7頁。3.對比色調。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍等。這種色彩的搭配，可以產生強烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。網頁設計與應用全文共20頁，當前為第7頁。最后，還要考慮主頁底色（背景色）的深、淺，這里借用攝影中的一個術語，就是“高調”和“低調”。底色淺的稱為高調；底色深的稱為低調。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內容（文字或圖片）。這種深淺的變化在色彩學中稱為“明度變化”。當然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強，同樣也會使讀者的眼睛受不了。第四章WEB頁面信息的交互——窗體與框架要實現網頁的動態交互，必須掌握有關窗體對象（Form）和框架對象（Frames）更為復雜的知識。4.1窗體基礎知識窗體對象可以使設計人員能用窗體中不同的元素與客戶機用戶相交互，而用不著在之前首先進行數據輸入，就可以實現動態改變Web文檔的行為。4.1.1窗體對象窗體（Form）：它構成了Web頁面的基本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數組來實現不同窗體的訪問。<formName=Form1><INPUTtype=text...><Inputtype=text...><Inpupbyne=text...></form><formName=Form2><INPUTtype=text...><Inputtype=text...></form>在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關的HTML代碼：<FormName="表的名稱"Target="指定信息的提交窗口"action="接收窗體程序對應的URL"網頁設計與應用全文共20頁，當前為第8頁。Method=信息數據傳送方式(get/post)網頁設計與應用全文共20頁，當前為第8頁。enctype="窗體編碼方式"[onsubmit="JavaScript代碼"]></Form>4.1.2窗體對象的方法窗體對象的方法只有一個--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元素值改變時，產生該文件。例：<Formname="test"><inputtype="text"name="test"value="thisisajavascript"></form>...<scriptlanguage="Javascirpt">document.mytest.value="thatisaJavascript";document.mytest.select();document.mytest.blur();網頁設計與應用全文共20頁，當前為第9頁。</script>網頁設計與應用全文共20頁，當前為第9頁。（2）textarea多行多列輸入元素功能：實施對Textarea中的元素進行控制。基本屬性name：設定提交信息時的信息名稱，對應HTML文檔Textarea的Name。Value：用以設定出現在窗口中對應HTML文檔中Value的信息。Defaultvalue：元素的默認值。方法：blur()：將輸入焦點失去select()：將文字加亮后事件：onBlur:當失去輸入焦點后產生該事件onFocus:當輸入獲得焦點后，產生該文件Onchange:當文字值改變時，產生該事件Onselect:當文字加亮后，產生該文件（3）Select選擇元素功能：實施對滾動選擇元素的控制。屬性：name:設定提交信息時的信息名稱，對應文檔select中的name。Length:對應文檔select中的lengthoptions:組成多個選項的數組selectIndex;該下標指明一個選項select在中每一選項都含有以下屬性：Text:選項對應的文字selected:指明當前選項是否被選中Index:指明當前選項的位置defaultselected:默認選項事件：OnBlur：當select選項失去焦點時，產生該文件。onFocas:當select獲得焦點時，產生該文件。Onchange:選項狀態改變后，產生該事件。（4）Button按鈕功能：實施對Button按鈕的控制。屬性：Name:設定提交信息時的信息名稱，對應文檔中button的Name。Value:用以設定出現在窗口中對應HTML文檔中Value的信息。方法：click()該方法類似于一個按下的按鈕。事件：onclick當單擊button按鈕時，產生該事件。例：<Formname="test"><inputtype="button"name="testcall"onclick=tmyest()>網頁設計與應用全文共20頁，當前為第10頁。</form>網頁設計與應用全文共20頁，當前為第10頁。...<scriptlanguage="javascirpt">document.elements[0].value="mytest";//通過元素訪問或document.testcallvalue="mytest";//通過名字訪問</script>4.3窗體對象實例下面我們演示通過點擊一個按鈕（red）來改變窗口顏色，點擊“調用動態按鈕文檔”調用一個動態按鈕文檔。test8_1.htm<html><head><ScriptLanguage="JavaScript">//原來的顏色document.bgColor="blue";document.vlinkColor="white";document.linkColor="yellow";document.alinkcolor="red";//動態改變顏色functionchangecolor(){document.bgColor="red";document.vlinkColor="blue";document.linkColor="green";document.alinkcolor="blue";}</script></HEAD><bodybgColor="White"><Ahref="test8_2.htm">調用動態按鈕文檔</a><form><Inputtype="button"Value="red"onClick="changecolor()"></form></BODY></HTML>網頁設計與應用全文共20頁，當前為第11頁。輸出結果見圖4-1所示。網頁設計與應用全文共20頁，當前為第11頁。圖4-1調用動態按鈕圖動態按鈕程序。test8_2.htm<HTML><HEAD></HEAD><palign="center"></p><divalign="center"><center><tableborder="0"cellspacing="0"cellpadding="0"><tr><tdwidth="100%"><formname="form2"onSubmit="null"><p><inputtype="submit"name="banner"VALUE="Submit"onClick="alert('Youhavetoputan\'action=[url]\'ontheformtag!!')"><br><scriptlanguage="JavaScript">varid,pause=0,position=0;functionbanner(){//variablesdeclaration vari,k,msg="這里輸入你要的內容";//increasemsgk=(30/msg.length)+1;for(i=0;i<=k;i++)msg+=""+msg;//showittothewindowdocument.form2.banner.value=msg.substring(position,position-30);//setnewpositionif(position++==msg.length)position=0;//repeatatenteredspeedid=setTimeout("banner()",60);}網頁設計與應用全文共20頁，當前為第12頁。//end-->網頁設計與應用全文共20頁，當前為第12頁。banner();</script></p></form></td></tr></table></center></div><p></p><BODY><Ahref="test8_1.htm">返回</a></BODY></HTML>圖4-2動態按鈕網頁圖本講介紹了使用JavaScript腳本實現Web頁面信息交互的方法。其中主要介紹了窗體中的基本元素的主要功能和使用。4.4框架框架Frames最主要功用是"分割"視窗，使每個"小視窗"能顯示不同的HTML文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設您開了兩個frames，第一個frame可顯示書的目錄，第二個frame則顯示章節的具體內容。網頁設計與應用全文共20頁，當前為第13頁。框架可以將屏幕分割成不同的區域，每個區域有自己的URL，通過Frames[]數組對象來實現不同框架的訪問。實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。利用框架的例子具體說明，見圖5-3所示。網頁設計與應用全文共20頁，當前為第13頁。圖4-3框架對象<HTML><HEAD></HEAD><FramesetRows="20%,80%"><framesrc="test9_1.html"><FramesetCols="50%,50%"><framesrc="test9_2.html"><framesrc="test9_3.html"></Frameset></Frameset></HTML>以上HTML標識將屏幕分成三個框架。先將窗口分成以二行為單位的窗口，之后再按分成二個窗口。并在相應的框架中放入自己的HTML文檔。通過[Framset]告訴瀏覽器您要設置幾個框架；rows這項參數告訴瀏覽器您想將視窗分割成幾列；而cols這項參數是告訴瀏覽器您想將視窗分割成幾行。可以用很多組的<frameset...>tags將視窗分割得更復雜。可以給每個frame一個“名字”(name)。frame的名字在JavaScript語法中的地位非常重要。可以用<src>告訴瀏覽器要載入的HTML文件。4.5框架的訪問網頁設計與應用全文共20頁，當前為第14頁。在前面我們介紹過使用document.forms[]實現單一窗體中不同元素的訪問。而要實現框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個數組，他在父框架集中為每一個子框架設有一項。通過下標實現不同框架的訪問：網頁設計與應用全文共20頁，當前為第14頁。parent.frames[Index1].docuement.forms[index2]通過parent.frames.length確定窗口中窗體的數目。除了使用數組下標來訪問窗體外還可以使用框架名和窗體名來實現各元素的訪問：parent.framesName.decument.formNames.elementName.(m/p)通過一個具體的實例，來說明利用JavaScript腳本在WEB中實現更為復雜的信息交互。該例子是在一個多窗口中實現窗體信息的動態交互，在程序中首先在瀏覽器窗口中制作三個用于窗體交互的窗口，每個窗體窗口實現不同信息的動態交互。tset9.html為主調用文檔它首先將窗口劃分為具有二行的窗體，爾后再將第二行的窗體劃分為具有二列的窗體；test9-1.html為顯示標題文檔；test9_2.html為第二框架文檔其中需要注意的是：通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”；test7_3.html為第三框架文檔。主調文檔主要作用是將窗口劃分為具有二行的窗體,爾后再將第二行的窗體劃分為具有二列的窗體。Test9.htm<HTML><HEAD></HEAD><FramesetRows="10%,90%"> <framesrc="test9_1.htm"><FramesetCols="40%,60%"> <framesrc="test9_2.htm"> <framesrc="test9_3.htm"></Frameset></Frameset></HTML>第一個框架主要作用是顯示標題文檔。Test9_1.htm<HTML><HEAD></HEAD><H2>使用框架實現WEB交互</H2></HTML>第二個框架主要作用是實現交互。可以通過JavaScript腳本將所示的“云南省”和“四川省”分別改為“昆明市”和“成都市”。Test9_2.htm<HTML>網頁設計與應用全文共20頁，當前為第15頁。<HEAD>網頁設計與應用全文共20頁，當前為第15頁。</HEAD><Body><Formname="test9_1">請選擇城市：<BR><Selectname="select1"Multiple><Option>山西省<Option>四川省<Option>貴州省<Option>山東省<Option>江蘇省<Option>浙江省<Option>安徽省<Option>河南省</select><BR><HR><InputType="Submit"name=""value="提交"><InputType="reset"name=""value="復位"></Form><pre><scriptlanguage="JavaScript">document.test9_1.elements[0].options[0].text="太原市";document.test9_1.elements[0].options[1].text="成都市";</script></pre></Body></HTML>第三個框架：主要作用是實現交互。Test9_3.htm<HTML><HEAD></HEAD><Body><Formname="test9_2">請輸入用戶名：<InputType="text"name="text1"Value=""Size=20><BR><HR>請選擇:<InputType="Checkbox"name="checkbox1"Value="qb">全部信息<BR><InputType="Checkbox"name="checkbox2"Value="bf">部分信息<BR><InputType="Checkbox"name="checkbox3"Value="sy">所有城市<br><HR><InputType="Submit"name=""value="提交">網頁設計與應用全文共20頁，當前為第16頁。<InputType="reset"name=""value="復位">網頁設計與應用全文共20頁，當前為第16頁。<BR></Form><scriptlanguage="JavaScript">document.test9_2.elements[0].value="勞動和社會保障";document.test9_2.elements[1].checked=true;document.test9_2.elements[2].ch