-.z.網(wǎng)頁設(shè)計與應(yīng)用專業(yè)：計算機(jī)網(wǎng)絡(luò)技術(shù)班級：2015學(xué)號：姓名：蔡依婷指導(dǎo)教師：楊艷慈邯鄲職業(yè)技術(shù)學(xué)院2017年11月21日-.z.網(wǎng)頁設(shè)計與應(yīng)用摘要本論文將對個人網(wǎng)頁設(shè)計與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計與制作語言的根底上，著重使用JavaScript作為工具語言進(jìn)展網(wǎng)頁設(shè)計與制作的實際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)展詳細(xì)描述，并利用具體的實例進(jìn)展驗證。本論文主要章節(jié)如下，第一章：緒論，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。第二章：網(wǎng)頁設(shè)計語言概述，本章主要介紹網(wǎng)頁設(shè)計的語言——HTML，以及用于編輯HTML語言的軟件，為后續(xù)工作奠定根底。第三章：基于對象的JavaScript語言，本章介紹了基于對象的JavaScript中常用內(nèi)部對象屬性、方法的使用。第四章：內(nèi)部對象系統(tǒng)的使用，本章主要介紹使用瀏覽器的內(nèi)部對象系統(tǒng)，可實現(xiàn)與HTML文檔進(jìn)展交互。第五章：WEB頁面信息的交互——窗體與框架，本章主要介紹實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象〔Form〕和框架對象〔Frames〕更為復(fù)雜的知識。關(guān)鍵詞：網(wǎng)頁制作；網(wǎng)頁設(shè)計；HT-.z.ML；ASP-.z.目錄196961.1網(wǎng)頁設(shè)計概述4284991.2網(wǎng)頁設(shè)計的要素4147291.3大作業(yè)目的和意義41398第二章HTML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用59712HTML語言介紹5276372.1.1HTML語言的特點5181752.1.2HTML語言的編輯軟件51092第三章色彩在網(wǎng)頁中的應(yīng)用68251色彩在網(wǎng)頁中的應(yīng)用621553主頁色彩的處理622320常用的配色方案63652第四章WEB頁面信息的交互——窗體與框架74801726357199994.1.2窗體對象的方法858874.2窗體中的根本元素810811056764.4框架12327384.5框架的訪問1378741615880第五章結(jié)論1731925致1831398參考文獻(xiàn)19-.z.第一章緒論隨著21世紀(jì)的到來，人們更深切地感受到計算機(jī)在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計算機(jī)的應(yīng)用技能。掌握計算機(jī)是職業(yè)的需要，更是事業(yè)開展的需要。網(wǎng)頁設(shè)計與制作是計算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計的相關(guān)知識。1.1網(wǎng)頁設(shè)計概述網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和效勞)的一種方式,是企業(yè)開展電子商務(wù)的根底設(shè)施和信息平臺，離開網(wǎng)站〔或者只是利用第三方網(wǎng)站〕去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為"網(wǎng)絡(luò)商標(biāo)〞，也是企業(yè)無形資產(chǎn)的組成局部，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。1.2網(wǎng)頁設(shè)計的要素網(wǎng)頁設(shè)計的兩大要素是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格在這里，我提供應(yīng)大家一些參考經(jīng)歷：1．將你的標(biāo)志logo，盡可能的放在每個頁面上最突出的位置。2．突出你的標(biāo)準(zhǔn)色彩。3．總結(jié)一句能反映貴站精華的宣傳標(biāo)語！4．一樣類型的圖像采用一樣效果，比方說標(biāo)題字都采用陰影效果，則在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！二、網(wǎng)頁色彩的搭配1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。2．用兩種色彩。先選定一種色彩，然后選擇它的比照色。3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。1.3大作業(yè)目的和意義本大作業(yè)主要是對網(wǎng)頁設(shè)計與制作的語言根底上進(jìn)展探討，主要內(nèi)容如下：通過已經(jīng)做好的網(wǎng)頁，分析html網(wǎng)頁設(shè)計技術(shù)、*ML技術(shù)、JavaApplet技術(shù)和Javascript技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用。-.z.第二章HTML網(wǎng)頁設(shè)計技術(shù)的應(yīng)用HTML語言介紹HTML〔HyperTe*tMark-upLanguage〕即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的構(gòu)造包括頭部〔Head〕、主體〔Body〕兩大局部，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。2.1.1HTML語言的特點HTML文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是WWW盛行的原因之一，HTML語言的特點如下：1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。3、平臺無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個原因。2.1.2HTML語言的編輯軟件HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：1、根本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉?，?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點不懂HTML的知識就可以做出網(wǎng)頁，這類軟件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。-.z.第三章色彩在網(wǎng)頁中的應(yīng)用色彩在網(wǎng)頁中的應(yīng)用色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進(jìn)展組合．搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁配色中不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。背景和前文的比照盡量要大以便突出主要文字內(nèi)容。主頁色彩的處理色彩是人的視覺最敏感的東西。主頁的色彩處理得好，可以錦上添花，到達(dá)事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是"總體協(xié)調(diào)，局部比照〞，也就是：主頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的比照。在色彩的運用上，可以根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。因為色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次還有職業(yè)的標(biāo)志色，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對于色彩的喜好也存在著較大的差異。充分運用色彩的這些特性，可以使我們的主頁具有深刻的藝術(shù)內(nèi)涵，從而提升主頁的文化品位。常用的配色方案1.暖色調(diào)。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)溫馨、溫暖、熱情的氣氛。2.冷色調(diào)。即青色、綠色、紫色等色彩的搭配。這種色調(diào)的運用，可使主頁呈現(xiàn)寧靜、清涼、高雅的氣氛。3.比照色調(diào)。即把色性完全相反的色彩搭配在同一個空間里。例如：紅與綠、黃與紫、橙與藍(lán)等。這種色彩的搭配，可以產(chǎn)生強(qiáng)烈的視覺效果，給人亮麗、鮮艷、喜慶的感覺。-.z.最后，還要考慮主頁底色〔背風(fēng)光〕的深、淺，這里借用攝影中的一個術(shù)語，就是"高調(diào)〞和"低調(diào)〞。底色淺的稱為高調(diào)；底色深的稱為低調(diào)。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容〔文字或圖片〕；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容〔文字或圖片〕。這種深淺的變化在色彩學(xué)中稱為"明度變化〞。當(dāng)然，色彩的明度也不能變化太大，否則屏幕上的亮度反差太強(qiáng)，同樣也會使讀者的眼睛受不了。第四章WEB頁面信息的交互——窗體與框架要實現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象〔Form〕和框架對象〔Frames〕更為復(fù)雜的知識。窗體對象可以使設(shè)計人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)展數(shù)據(jù)輸入，就可以實現(xiàn)動態(tài)改變Web文檔的行為。窗體〔Form〕：它構(gòu)成了Web頁面的根本元素。通常一個Web頁面有一個窗體或幾個窗體，使用Forms[]數(shù)組來實現(xiàn)不同窗體的訪問。<formName=Form1><INPUTtype=te*t...><Inputtype=te*t...><Inpupbyne=te*t...></form><formName=Form2><INPUTtype=te*t...><Inputtype=te*t...></form>在Forms[0]中共有三個根本元素，而Forms[1]中只有兩個元素。窗體對象最主要的功能就是能夠直接訪問HTML文檔中的窗體，它封裝了相關(guān)的HTML代碼：<FormName="表的名稱"Target="指定信息的提交窗口"action="接收窗體程序?qū)?yīng)的URL"Method=信息數(shù)據(jù)傳送方式(get/post)enctype="窗體編碼方式"[onsubmit="JavaScript代碼"]></Form>4.1.2窗體對象的方法窗體對象的方法只有一個--submit()方法，該方法主要功用就是實現(xiàn)窗體信息的提交。如提交Mytest窗體，則使用以下格式：document.mytest.submit()4.2窗體中的根本元素窗體中的根本元素由按鈕、單項選擇按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在JavaScript中要訪問這些根本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實現(xiàn)。每一個元素主要是通過該元素的屬性或方法來引用。其引用的根本格式見下：formName.elements[].methadName(窗體名.元素名或數(shù)組.方法)formName.elemaent[].propertyName(窗體名.元素名或數(shù)組.屬性)下面分別介紹：〔1〕Te*t單行單列輸入元素功能：對Te*t標(biāo)識中的元素實施有效的控制。根本屬性：Name：設(shè)定提交信息時的信息名稱。對應(yīng)于HTML文檔中的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。defaultvalue：包括Te*t元素的默認(rèn)值根本方法：blur()：將當(dāng)前焦點移到后臺。select()：加亮文字。主要事件：onFocus：當(dāng)Te*t獲得焦點時，產(chǎn)生該事件。OnBlur：從元素失去焦點時，產(chǎn)生該事件。Onselect：當(dāng)文字被加亮顯示后，產(chǎn)生該文件。onchange：當(dāng)Te*t元素值改變時，產(chǎn)生該文件。例：<Formname="test"><inputtype="te*t"name="test"value="thisisajavascript"></form>...<scriptlanguage="Javascirpt">document.mytest.value="thatisaJavascript";document.mytest.select();document.mytest.blur();</script>〔2〕te*tarea多行多列輸入元素功能：實施對Te*tarea中的元素進(jìn)展控制。根本屬性name：設(shè)定提交信息時的信息名稱，對應(yīng)HTML文檔Te*tarea的Name。Value：用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。Defaultvalue：元素的默認(rèn)值。方法：blur()：將輸入焦點失去select()：將文字加亮后事件：onBlur:當(dāng)失去輸入焦點后產(chǎn)生該事件onFocus:當(dāng)輸入獲得焦點后，產(chǎn)生該文件Onchange:當(dāng)文字值改變時，產(chǎn)生該事件Onselect:當(dāng)文字加亮后，產(chǎn)生該文件〔3〕Select選擇元素功能：實施對滾動選擇元素的控制。屬性：name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔select中的name。Length:對應(yīng)文檔select中的lengthoptions:組成多個選項的數(shù)組selectInde*;該下標(biāo)指明一個選項select在中每一選項都含有以下屬性：Te*t:選項對應(yīng)的文字selected:指明當(dāng)前選項是否被選中Inde*:指明當(dāng)前選項的位置defaultselected:默認(rèn)選項事件：OnBlur：當(dāng)select選項失去焦點時，產(chǎn)生該文件。onFocas:當(dāng)select獲得焦點時，產(chǎn)生該文件。Onchange:選項狀態(tài)改變后，產(chǎn)生該事件?！?〕Button按鈕功能：實施對Button按鈕的控制。屬性：Name:設(shè)定提交信息時的信息名稱，對應(yīng)文檔中button的Name。Value:用以設(shè)定出現(xiàn)在窗口中對應(yīng)HTML文檔中Value的信息。方法：click()該方法類似于一個按下的按鈕。事件：onclick當(dāng)單擊button按鈕時，產(chǎn)生該事件。例：<Formname="test"><inputtype="button"name="testcall"onclick=tmyest()></form>...<scriptlanguage="javascirpt">document.elements[0].value="mytest";//通過元素訪問或document.testcallvalue="mytest";//通過名字訪問</script>下面我們演示通過點擊一個按鈕〔red〕來改變窗口顏色，點擊"調(diào)用動態(tài)按鈕文檔〞調(diào)用一個動態(tài)按鈕文檔。<html><head><ScriptLanguage="JavaScript">//原來的顏色document.bgColor="blue";document.vlinkColor="white";document.linkColor="yellow";document.alinkcolor="red";//動態(tài)改變顏色functionchangecolor(){document.bgColor="red";document.vlinkColor="blue";document.linkColor="green";document.alinkcolor="blue";}</script></HEAD><bodybgColor="White"><Ahref="test8_2.htm">調(diào)用動態(tài)按鈕文檔</a><form><Inputtype="button"Value="red"onClick="changecolor()"></form></BODY></HTML>輸出結(jié)果見圖4-1所示。圖4-1調(diào)用動態(tài)按鈕圖動態(tài)按鈕程序。<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="這里輸入你要的內(nèi)容";//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);}//end-->banner();</script></p></form></td></tr></table></center></div><p></p><BODY><Ahref="test8_1.htm">返回</a></BODY></HTML>圖4-2動態(tài)按鈕網(wǎng)頁圖本講介紹了使用JavaScript腳本實現(xiàn)Web頁面信息交互的方法。其中主要介紹了窗體中的根本元素的主要功能和使用。4.4框架框架Frames最主要功用是"分割"視窗，使每個"小視窗"能顯示不同的HTML文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設(shè)您開了兩個frames，第一個frame可顯示書的目錄，第二個frame則顯示章節(jié)的具體內(nèi)容。框架可以將屏幕分割成不同的區(qū)域，每個區(qū)域有自己的URL，通過Frames[]數(shù)組對象來實現(xiàn)不同框架的訪問。實際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。利用框架的例子具體說明，見圖5-3所示。圖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標(biāo)識將屏幕分成三個框架。先將窗口分成以二行為單位的窗口，之后再按分成二個窗口。并在相應(yīng)的框架中放入自己的HTML文檔。通過[Framset]告訴瀏覽器您要設(shè)置幾個框架；rows這項參數(shù)告訴瀏覽器您想將視窗分割成幾列；而cols這項參數(shù)是告訴瀏覽器您想將視窗分割成幾行?？梢杂煤芏嘟M的<frameset...>tags將視窗分割得更復(fù)雜?？梢越o每個frame一個"名字〞(name)。frame的名字在JavaScript語法中的地位非常重要?？梢杂?lt;src>告訴瀏覽器要載入的HTML文件。4.5框架的訪問在前面我們介紹過使用document.forms[]實現(xiàn)單一窗體中不同元素的訪問。而要實現(xiàn)框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個數(shù)組，他在父框架集中為每一個子框架設(shè)有一項。通過下標(biāo)實現(xiàn)不同框架的訪問：parent.frames[Inde*1].docuement.forms[inde*2]通過parent.frames.length確定窗口中窗體的數(shù)目。除了使用數(shù)組下標(biāo)來訪問窗體外還可以使用框架名和窗體名來實現(xiàn)各元素的訪問：parent.framesName.decument.formNames.elementName.(m/p)通過一個具體的實例，來說明利用JavaScript腳本在WEB中實現(xiàn)更為復(fù)雜的信息交互。該例子是在一個多窗口中實現(xiàn)窗體信息的動態(tài)交互，在程序中首先在瀏覽器窗口中制作三個用于窗體交互的窗口，每個窗體窗口實現(xiàn)不同信息的動態(tài)交互。tset9.html為主調(diào)用文檔它首先將窗口劃分為具有二行的窗體，此后再將第二行的窗體劃分為具有二列的窗體；test9-1.html為顯示標(biāo)題文檔；test9_2.html為第二框架文檔其中需要注意的是：通過JavaScript腳本將所示的"云南省〞和"四川省〞分別改為"昆明市〞和"成都市〞；test7_3.html為第三框架文檔。主調(diào)文檔主要作用是將窗口劃分為具有二行的窗體,此后再將第二行的窗體劃分為具有二列的窗體。<HTML><HEAD></HEAD><FramesetRows="10%,90%"> <framesrc="test9_1.htm"><FramesetCols="40%,60%"> <framesrc="test9_2.htm"> <framesrc="test9_3.htm"></Frameset></Frameset></HTML>第一個框架主要作用是顯示標(biāo)題文檔。<HTML><HEAD></HEAD><H2>使用框架實現(xiàn)WEB交互</H2></HTML>第二個框架主要作用是實現(xiàn)交互。可以通過JavaScript腳本將所示的"云南省〞和"四川省〞分別改為"昆明市〞和"成都市〞。<HTML><HEAD></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="復(fù)位"></Form><pre><scriptlanguage="JavaScript">document.test9_1.elements[0].options[0].te*t="太原市";document.test9_1.elements[0].options[1].te*t="成都市";</script></pre></Body></HTML>第三個框架：主要作用是實現(xiàn)交互。<HTML><HEAD></HEAD><Body><Formname="test9_2">請輸入用戶名：<InputType="te*t"name="te*t1"Value=""Size=20><BR><HR>請選擇:<InputType="Checkbo*"name="checkbo*1"Value="qb">全部信息<BR><InputType="Checkbo*"name="checkbo*2"Value="bf">局部信息<BR><InputType="Checkbo*"name="checkbo*3"Value="sy">所有城市<br><HR><InputType="Submit"name=""value="提交"><InputType="reset"name=""value="復(fù)位"><BR></Form><scriptlanguage="JavaScript">document.test9_2.elements[0].value="勞動和社會保障";document.test9_2.elements[1].checked=true;document.test9_2.elements[2].checked=true;document.test9_2.elements[3].checked=false;</script></Body></HTML>在瀏覽器中的結(jié)