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

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