網(wǎng)頁設(shè)計(jì)與制作-畢業(yè)設(shè)計(jì)(論文)外文資料翻譯

理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯理工大學(xué)應(yīng)用科學(xué)學(xué)院畢業(yè)設(shè)計(jì)(論文)外文資料翻譯系 別： 信息工程系專 業(yè)： 電子信息工程班 級： 電信112姓 名：學(xué) 號： 0附 件：1. 外文資料翻譯譯文 ;2.外文原文指導(dǎo)教師評語：簽名：年 月 日理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯網(wǎng)頁設(shè)計(jì)與制作論文將對個(gè)人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基礎(chǔ)上，著重使用JavaScript作為工具語言進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作，分別對基于對象的JavaScript語言、內(nèi)部對象系統(tǒng)的使用及WEB頁面信息交互——窗口和框架進(jìn)行詳細(xì)描述，并利用具體的實(shí)例進(jìn)行驗(yàn)證。1.前言隨著21世紀(jì)的到來，人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來越重要，越來越來的職業(yè)需要具有計(jì)算機(jī)的應(yīng)用技能。掌握計(jì)算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)頁設(shè)計(jì)的相關(guān)知識。1.1網(wǎng)頁設(shè)計(jì)概述網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(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è)計(jì)的要素網(wǎng)頁設(shè)計(jì)的兩大要素是：整體風(fēng)格和色彩搭配。一、確定網(wǎng)站的整體風(fēng)格第二章HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用2.1HTML語言介紹HTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。2.1.1HTML語言的特點(diǎn)HTML 文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是盛行的原因之一，HTML語言的特點(diǎn)如下：1、簡易性，HTML版本升級采用超集方式，從而更加靈活方便。2、可擴(kuò)展性，HTML語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。3、平臺無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺上，這也是WWW盛行的另一個(gè)原因。2.1.2HTML語言的編輯軟件HTML的本質(zhì)是文本，需要瀏覽器的解釋，HTML的編輯器大體可以分為三種：1、基本編輯軟件，使用WINDOWS自帶的記事本或?qū)懽职娑伎梢跃帉懀?dāng)然，如果你用WPS來編寫，也可以。不過存盤時(shí)請使用.htm或.html作為擴(kuò)展名，這樣瀏覽器就可以解釋執(zhí)行了。2、半所見即所得軟件，這種軟件能大大提高開發(fā)效率，它可以使你在很短的時(shí)間內(nèi)做出Homepage，且可以學(xué)習(xí)HTML，這種類型的軟件主要有HOTDOG，還有國產(chǎn)的軟件網(wǎng)頁作坊。3、所見即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識就可以做出網(wǎng)頁。1理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯第二章 HTML網(wǎng)頁設(shè)計(jì)技術(shù)的應(yīng)用2.2.3JavaScript技術(shù)在網(wǎng)頁設(shè)計(jì)中應(yīng)用一、JavaScript概述JavaScript是一種基于對象(Object)和事件驅(qū)動(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言（Java小程序）一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個(gè)基本特點(diǎn)：1、是一種腳本編寫語言JavaScript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣,JavaScript同樣已是一種解釋性語言,它提供了一個(gè)易的開發(fā)過程。它的基本結(jié)構(gòu)形式與C、C++、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中被逐行地解釋。它與HTML標(biāo)識結(jié)合在一起，從而方便用戶的使用操作。2、基于對象的語言。JavaScript是一種基于對象的語言，同時(shí)以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。3、簡單性JavaScript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計(jì),從而對于學(xué)習(xí)Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。4、安全性JavaScript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。5、動態(tài)性的JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應(yīng)，無須經(jīng)過 Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。所謂事件驅(qū)動，就是指在主頁(HomePage)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。6、跨平臺性JavaScript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)， 并支持JavaScript的瀏覽器就可正確執(zhí)行。從而實(shí)現(xiàn)了“編寫一次,走遍天下”的夢想。實(shí)際上JavaScript最杰出之處在于可以用很小的程序做大量的事。無須有高性能的電腦，軟件僅需一個(gè)字處理軟件及一瀏覽器，無須WEB服務(wù)器通道，通過自己的電腦即可完成所有的事情。總之，JavaScript是一種新的描述語言，它可以被箝入到HTML的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件(如：form的輸入)，而不用任何的網(wǎng)路來回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，它不用經(jīng)過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應(yīng)用程式所處理。第三章 WEB頁面信息的交互——窗體與框架2理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯要實(shí)現(xiàn)網(wǎng)頁的動態(tài)交互，必須掌握有關(guān)窗體對象（Form）和框架對象（Frames）更為復(fù)雜的知識。3.1窗體基礎(chǔ)知識窗體對象可以使設(shè)計(jì)人員能用窗體中不同的元素與客戶機(jī)用戶相交互，而用不著在之前首先進(jìn)行數(shù)據(jù)輸入，就可以實(shí)現(xiàn)動態(tài)改變Web文檔的行為。3.1.1窗體對象窗體（Form）：它構(gòu)成了Web頁面的基本元素。通常一個(gè)Web頁面有一個(gè)窗體或幾個(gè)窗體，使用Forms[]數(shù)組來實(shí)現(xiàn)不同窗體的訪問。3.1.2窗體對象的方法窗體對象的方法只有一個(gè) --submit()方法，該方法主要功用就是實(shí)現(xiàn)窗體信息的提交。3.1.3窗體對象的屬性窗體對象中的屬性主要包括以下：elementsnameactiontargetencodingmethod。除Elements外，其它幾個(gè)均反映了窗體中標(biāo)識中相應(yīng)屬性的狀態(tài)，這通常是單個(gè)窗體標(biāo)識；而elements常常是多個(gè)窗體元素值的數(shù)組。3.1.4訪問窗體對象在JavaScript中訪問窗體對象可由兩種方法實(shí)現(xiàn)：（1）通過訪問窗體在窗體對象的屬性中首先必須指定其窗體名，而后就可以通過下列標(biāo)識訪問窗體如：document.Mytable()。（2）通過數(shù)組來訪問窗體除了使用窗體名來訪問窗體外，還可以使用窗體對象數(shù)組來訪問窗體對象。但需要注意一點(diǎn)，因窗體對象是由瀏覽器環(huán)境的提供的，而瀏覽器環(huán)境所提供的數(shù)組下標(biāo)是由0到n。3.1.5引用窗體的先決條件在JavaScript中要對窗體引用的條件是：必須先在頁面中用標(biāo)識創(chuàng)建窗體，并將定義窗體部分放在引用之前。3.2窗體中的基本元素窗體中的基本元素由按鈕、單選按鈕、復(fù)選按鈕、提交按鈕、重置按鈕、文本框等組成。在JavaScript中要訪問這些基本元素，必須通過對應(yīng)特定的窗體元素的數(shù)組下標(biāo)或窗體元素名來實(shí)現(xiàn)。每一個(gè)元素主要是通過該元素的屬性或方法來引用。3.3框架框架Frames最主要功用是"分割"視窗，使每個(gè)"小視窗"能顯示不同的HTML文件，不同框架之間可以互動(interact)，這就是說不同框架之間可以交換訊息與資料。例如:假設(shè)您開了兩個(gè)frames，第一個(gè)frame可顯示書的目錄，第二個(gè)frame則顯示章節(jié)的具體內(nèi)容?？蚣芸梢詫⑵聊环指畛刹煌膮^(qū)域，每個(gè)區(qū)域有自己的URL，通過Frames[]數(shù)組對象來實(shí)現(xiàn)不同框架的訪問。實(shí)際上框架對象本身也一類窗口，它繼承了窗口對象的所有特征，并擁有所有的屬性和方法。利用框架的例子具體說明3.4框架的訪問在前面我們介紹過使用document.forms[]實(shí)現(xiàn)單一窗體中不同元素的訪問。而要實(shí)現(xiàn)框架中多窗體的不同元素的訪問，則必須使用window對象中的Frames屬性。Frames屬性同樣也是一個(gè)數(shù)組，他在父框架集中為每一個(gè)子框架設(shè)有一項(xiàng)。所不能具備的。從中可以了解到 JavaScript是Web涉及人員的良好工具。表單表單是一個(gè)包含表單元素的區(qū)域。3理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。表單使用表單標(biāo)簽（<form>）定義。<form>...input元素...</form>輸入多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（ <input>）。輸入類型是由類型屬性（ type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：文本域（TextFields）當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會用到文本域。<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>瀏覽器顯示如下：Firstname:Lastname:注意，表單本身并不可見。同時(shí)，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個(gè)字符。單選按鈕（RadioButtons）當(dāng)用戶從若干給定的的選擇中選取其一時(shí)，就會用到單選框。<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>瀏覽器顯示如下：MaleFemale注意，只能從中選取其一。復(fù)選框（Checkboxes）當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)時(shí)，就會用到復(fù)選框。<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>4理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯瀏覽器顯示如下：IhaveabikeIhaveacar表單的動作屬性（Action）和確認(rèn)按鈕當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會被傳送到另一個(gè)文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個(gè)文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。<formname="input"action="html_form_action.asp"method="get">Username:<inputtype="text"name="user"/><inputtype="submit"value="Submit"/></form>瀏覽器顯示如下：Username:假如您在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到"html_form_action.asp"的頁面。該頁面將顯示出輸入的結(jié)果。標(biāo)簽 描述<for定義供用戶輸入的表單m><inp定義輸入域ut><text 定義文本域 (一個(gè)多行的輸area> 入控件)<lab 定義一個(gè)控制的標(biāo)簽el><fiel定義域dset><leg定義域的標(biāo)題end><sele定義一個(gè)選擇列表ct><opt定義選項(xiàng)組group><opti 定義下拉列表中的選項(xiàng)on><button>

定義一個(gè)按鈕<isin已廢棄。有<input>代替。dex>圖像標(biāo)簽（<img>）和源屬性（Src）在HTML 中，圖像由 <img>標(biāo)簽定義。<img>是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。要在頁面上顯示圖像，你需要使用源屬性（ src）。src指"source"。源屬性的值是圖像的URL地址。5理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯定義圖像的語法是：<imgsrc="url"/>URL指存儲圖像的位置。如果名為"boat.gif"的圖像位于的images目錄中，那么其URL為/images/boat.gif。瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。替換文本屬性（Alt）alt屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。<imgsrc="boat.gif"alt="BigBoat">在瀏覽器無法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。基本的注意事項(xiàng)-有用的提示：假如某個(gè)HTML文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁面，需要加載11個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。圖像標(biāo)簽標(biāo)描述簽<定義圖像。img><定義圖像地圖。map>定義圖像地圖中的可點(diǎn)擊area> 區(qū)域。背景（Backgrounds）<body>擁有兩個(gè)配置背景的標(biāo)簽。背景可以是顏色或者圖像。背景顏色（Bgcolor）背景顏色屬性將背景設(shè)置為某種顏色。屬性值可以是十六進(jìn)制數(shù)、 RGB值或顏色名。<bodybgcolor="#000000"><bodybgcolor="rgb(0,0,0)"><bodybgcolor="black">以上的代碼均將背景顏色設(shè)置為黑色。背景（Background）背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。<bodybackground="clouds.gif"><bodybackground="/clouds.gif">URL可以是相對地址，如第一行代碼。也可以使絕對地址，如第二行代碼。提示：如果你打算使用背景圖片，你需要緊記一下幾點(diǎn)：背景圖像是否增加了頁面的加載時(shí)間。小貼士：圖像文件不應(yīng)超過 10k。背景圖像是否與頁面中的其他圖象搭配良好。背景圖像是否與頁面中的文字顏色搭配良好。圖像在頁面中平鋪后，看上去還可以嗎？對文字的注意力被背景圖像喧賓奪主了嗎？6理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯基本的注意事項(xiàng) -有用的提示：<body>標(biāo)簽中的背景顏色（bgcolor）、背景（background）和文本（text）屬性在最新的HTML標(biāo)準(zhǔn)（HTML4和XHTML）中已被廢棄。W3C在他們的推薦標(biāo)準(zhǔn)中已刪除這些屬性。應(yīng)該使用層疊樣式表（CSS）來定義 HTML 元素的布局和顯示屬性。顏色由紅色、綠色、藍(lán)色混合而成。顏色值顏色由一個(gè)十六進(jìn)制符號來定義，這個(gè)符號由紅色、綠色和藍(lán)色的值組成（ RGB）。每種顏色的最小值是0（十六進(jìn)制：#00）。最大值是255（十六進(jìn)制：#FF）。這個(gè)表格給出了由三種顏色混合而成的具體效果：CColorColorolorHEXRGB#000rgb(0,0,0)000#FF0rgb(255,0,0000)#00Frgb(0,255,F000)#000rgb(0,0,250FF5)#FFFrgb(255,2F0055,0)#00Frgb(0,255,FFF255)#FF0rgb(255,0,0FF255)#C0rgb(192,1C0C092,192)#FFFrgb(255,2FFF55,255)<thead>,<tbody>和<tfoot>很少被用到，這是由于瀏覽器對它們的支持不太好。 希望這種情況在未來版本的XHTML中會有所改觀。如果你使用IE5.0或者更新的版本，可以查看在我們的《XML教程》中的具體例子。表格描述<tabl定義表格e><cap定義表格標(biāo)題。tion><th>定義表格的表頭。<tr>定義表格的行。<td>定義表格單元。<the定義表格的頁眉。ad>7xx理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯<tbo定義表格的主體。dy><tfo定義表格的頁腳。ot><col定義用于表格列的>屬性。<col定義表格列的組。group>無序列表無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于 <ul>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。<ul><li>Coffee</li><li>Milk</li></ul>瀏覽器顯示如下：CoffeeMilk列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。有序列表同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。<ol><li>Coffee</li><li>Milk</li></ol>瀏覽器顯示如下：CoffeeMilk列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>瀏覽器顯示如下：CoffeeBlackhotdrinkMilk8理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯Whitecolddrink定義列表的列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。<thead>,<tbody>和<tfoot>很少被用到，這是由于瀏覽器對它們的支持不太好。 希望這種情況在未來版本的XHTML中會有所改觀。如果你使用IE5.0或者更新的版本，可以查看在我們的《XML教程》中的具體例子。表格 描述<tabl定義表格e><caption><th><tr><td><thead><tbody><tfoot><col>

定義表格標(biāo)題。定義表格的表頭。定義表格的行。定義表格單元。定義表格的頁眉。定義表格的主體。定義表格的頁腳。定義用于表格列的屬性。<col定義表格列的組。group>無序列表無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于 <ul>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>。<ul><li>Coffee</li><li>Milk</li></ul>瀏覽器顯示如下：CoffeeMilk列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。有序列表同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol>標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。<ol><li>Coffee</li><li>Milk</li></ol>瀏覽器顯示如下：CoffeeMilk9理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>瀏覽器顯示如下：CoffeeBlackhotdrinkMilkWhitecolddrink定義列表的列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。10理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯WebdesignandproductionPaperswillexpandthepersonalwebdesignandproductionmethods,toolsandotherresearchanddiscussion.Basedontheintroductionofwebdesignandproductionoflanguage,theemphasisonusingtheJavaScriptlanguageasatoolfortheactualoperationofwebdesignandproductionof,respectively,basedontheobjectoftheJavaScriptlanguage,theuseofinternalobjectsystemandWEBpagesofinformationexchange-windowsandframeworksDetaileddescriptionoftheuseofspecificexamplesandverified.1.IntroductionWiththeadventofthe21stcentury,peoplearemoreandmoreimportanttofeelthelifeandworkofthecomputer'sroleintheincreasinglyprofessionalneedstohaveacomputerapplicationskillsdeeply.Isrequiredtomasterthecomputerprofession,butalsocareerdevelopmentneeds.Webdesignandproductionisaconcretemanifestationoftheabilityofacomputer,thischapterintroducestherelevantknowledgeofwebdesign.1.1WebDesignOverviewWebsiteisawaybusinessesanduserstoprovideinformation(includingproductsandservices)totheuser,istheenterprisee-commerceinfrastructureandinformationplatform,leavethesite(orjustuseathird-partysite)isnotpossibletotalkaboute-commerce.Corporatewebsitecalled"networkbrand",alsopartofintangibleassets,andthesiteisanimportantwindowofpublicityandreflectthecorporateimageandcultureontheINTERNET.WebDesignElements1.2Twoelementsofwebdesignare:overallstyleandcolormatching.First,determinetheoverallstyleofthesiteApplicationchapterHTMLwebdesigntechnology2.1HTMLlanguagedescriptionHTML(HyperTextMark-upLanguage)ie,HTML,orHypertextMarkupLanguage,iscurrentlythemostwidelyusedlanguagenetwork,butalsoconstitutetheprimarylanguageofthedocumentpages.HTMLtextiscomposedbyHTMLcommandsdescriptivetext,HTMLcommandscanexplaintext,graphics,animation,sound,tables,links,andsoon.HTMLstructureincludesahead(Head),thespecificcontentofthebody(Body)intotwoparts,ofwhichtheheadofthedescriptionofthebrowseryouwant,andthebodycontainsthedesirednote.Features2.1.1HTMLlanguageHTMLdocumentproductionisnotverycomplexandpowerful,supportingdifferentdatafileformatsinsert,whichisoneofthereasonsfortheprevalenceofWWW,HTMLlanguagecharacteristicsareasfollows:1,simplicity,HTMLversionupgradeusingasupersetoftheway,whichismoreflexibleandconvenient.2,scalability,widelyusedinHTMLlanguagebringstostrengthencapabilitiesandincreaseidentifiersandotherrequirements,HTMLelementstaketheformofasubclass,bringassurancesystemexpansion.3,platformindependence.WhilethePCispopular,buttheuseofMACandothermachinesoutthere,HTMLcanbeusedonawiderangeofplatforms,andthisisanotherreasonforthe1理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯prevalenceofWWW.2.1.2HTMLlanguageeditingsoftwareHTMListheessenceofthetext,youneedtoexplainyourbrowser,HTMLeditorcanberoughlydividedintothreetypes:1,thebasiceditingsoftware,usingWINDOWSnotepadorwriteversioncanbewritten,ofcourse,ifyouuseWPStowrite,youcan.However,pleaseuse.htmor.htmlastheextension,sothebrowsercaninterpretsavewhenexecuted.2,semi-WYSIWYGsoftware,whichcangreatlyimprovedevelopmentefficiency,itcanmakeyoumakeaHomepageinaveryshortperiodoftime,andyoucanlearnHTML,thistypeofsoftwarehasHOTDOG,aswellasdomesticSoftwarewebworkshop.3,WYSIWYGsoftware,themostwidelyusededitor,canunderstandalittleHTMLknowledgecanmakepages.ApplicationchapterHTMLwebdesigntechnology2.2.3JavaScripttechnologyinwebdesignOne,JavaScriptOverviewJavaScriptisanobject-based(Object)andevent-driven(EventDriven)andsafetyperformancehavescriptinglanguage.ItspurposeistouseHTMLandHTML,Javascriptinglanguage(Javaapplet)linktogethertoachievemultipleobjectsinaWebpage,theWebclientinteractions.Whichcandevelopclientapplications.ItisbyembeddingortransferredinstandardHTMLlanguageimplemented.ItappearstomakeupfortheshortcomingsofHTMLlanguage,whichisacompromisechoiceforJavaandHTML,hasthefollowingbasiccharacteristics:1,isascriptinglanguageJavaScriptisascriptinglanguage,whichusesasmallwaytoblockimplementationofprogramming.Likeotherscriptinglanguages,JavaScriptisaninterpretedlanguageisalso,itprovidesaneasydevelopmentprocess.ItsbasicstructurewithC,C++,VB,Delphiisverysimilar.Butitisnotliketheselanguages,youneedtocompile,butisinterpretedlinebylineintheprogramisrunning.ItiscombinedwithHTMLmarkup,soastofacilitatetheuser'soperation.2,object-basedlanguage.JavaScriptisanobject-basedlanguage,buttobeseenasanobject-oriented.Thismeansthatitcanuseobjectsthattheyhavecreated.Therefore,manyfunctionscanbederivedfromtheinteractionofmethodsandscriptsscriptingenvironmentobject.3.SimplicitySimplicityismainlyreflectedinJavaScript:First,itisaJavabasicstatementsandcontrolflowabovethesimpleandcompactdesignbasedonorderforJavaisaverygoodtransitionstudy.Secondly,itistheuseofweaklytypedvariabletype,didnotusestrictdatatypes.4,securityJavaScriptisasafelanguage,itdoesnotallowaccesstothelocalharddisk,datacannotbestoredontheserver,thenetworkisnotallowedtomodifyanddeletedocuments,canonlybeachievedthroughadynamicinteractiveinformationbrowsingorbrowser.Thuseffectivelypreventthelossofdata.5,thedynamicnatureofJavaScriptisdynamic,itcanresponddirectlytotheuserorcustomerinput,withoutgoingthroughtheWebserviceprogram.Itreflectstheuser'sresponse,istheuseofevent-driven2理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯manner.Theso-calledevent-driven,meaningtheimplementationofcertainactionsarisingfromtheactiononthehomepage(HomePage),andiscalledthe"event"(Event).Forexample,pressingthemousebutton,movethewindow,selectthemenuandsocanbeconsideredanevent.Whentheeventoccurs,itmaycausetheappropriateincidentresponse.6,cross-platformJavaScriptisdependentonthebrowseritself,regardlessoftheoperatingenvironment,aslongasthecomputerrunningthebrowser,andthebrowsersupportsJavaScriptcanbeexecutedcorrectly.Inordertoachievethe"writeonce,everywhere"dream.InfactthemostprominentplaceJavaScriptprogramthatcanbeusedtodoalotoflittlethings.Noneedtohaveahigh-performancecomputers,softwareisonlyawordprocessingsoftwareandabrowserwithoutWEBserverchannelsthroughtheircomputertocompleteeverything.Inshort,JavaScriptisanewdescriptionlanguage,itcanbeamongtheclampintotheHTMLfile.JavaScriptlanguagecanbedonetorespondtotheneedsoftheuserevent(suchas:forminput)withoutanynetworktransferdatabackandforth,sothatwhenauserentersamaterial,itdoesnotpassthroughtheservoend(server)processing,andtransmitsitbacktotheprocess,andcanbedirectlyhandledbytheclient(client)apps.ChapterIIIWEBpageinteractioninformation-FormsandFrameworkToachieveadynamicinteractivewebpages,youmustmastertheformobject(Form)andtheframeobject(Frames)morecomplexknowledge.3.1FormBasicsFormobjectallowsdesignerscanformdifferentelementsinteractwithclientusers,anddonotneedtocarryoutbeforethefirstdataentry,youcandynamicallychangethebehaviorofWebdocuments.3.1.1FormobjectForm(Form):ItconstitutesthebasicelementofaWebpage.UsuallyaWebpagehasaformorseveralforms,usingForms[]arraytoachievedifferentformsofaccess.Methods3.1.2FormobjectThemethodoftheformobjectisonlyone--submit()method,whichmainfunctionistoachieveaformofinformationsubmitted.3.1.3FormobjectpropertiesFormobjectpropertiesincludethefollowing:elementsnameactiontargetencodingmethod.InadditionElementsaddition,severalotherformsofstatearereflectedinthecorrespondingattributeidentifier,whichisusuallyaformofindividualidentification;andthearrayelementsareoftenmorethanoneformelementvalues.3.1.4AccessformobjectAccessformobjectinJavaScriptbytwomethods:(1)theformbyvisitingFirst,youmustspecifythenameoftheforminthepropertyofaformobject,andafteryoucanaccesstheformbyfollowingidentifiesas:document.Mytable().(2)toaccesstheformbythearrayInadditiontousingtheformnametoaccesstheform,youcanalsousetheformtoaccesstheformobjectarrayofobjects.Butnotethat,duetotheformobjectistoprovideabrowserenvironment,andthearraysubscriptbrowserenvironmentprovidedisfrom0ton.3理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯3.1.5referencesprerequisiteformConditionsinJavaScriptwanttoformreferenceis:youmustfirstcreateaformonthepagetoidentifywith,andformspartoftheplacebeforethereferencedefinition.3.2ThebasicelementsoftheformFormthebasicelementsofthebuttons,radiobuttons,checkbuttons,submitbuttons,resetbuttons,textboxesandothercomponents.InJavaScriptyouwanttoaccessthesebasicelementsmustbeachievedthroughaspecificformelementscorrespondingarraysubscriptorformelementnames.Eachelementisreferencedbymajorpropertyormethodoftheelement.3.3FrameworkFrameFramesmainfunctionisto"split"thewindow,sothateach"smallwindow"canshowdifferentHTMLfiles,interactionbetweendifferentframeworks(interact),whichmeansyoucanexchangemessagesanddatabetweendifferentframeworks.Forexample:Supposeyouopenedtwoframes,thefirstframeofthebookcatalogcanbedisplayed,andthesecondframedisplaysspecificcontentsections.Frameworkcanbedividedintodifferentareasofthescreen,eachregionhasitsownURL,throughFrames[]arrayofobjectstoachieveaccesstodifferentframeworks.Frameobjectitselfisactuallyaclassofwindow,itinheritsallthecharacteristicsofawindowobject,andhasalltheattributesandmethods.SpecificexamplesillustratetheuseoftheframeworkAccessFramework3.4Infrontofushadtousedocument.forms[]toaccessthedifferentelementstoachieveasingleform.Inordertoachieveaccesstothedifferentelementsoftheframeworkofmulti-form,youmustusethewindowobjectFramesproperty.Framespropertyisalsoanarray,hefocusedontheparentframeforeachsub-frameisprovidedwithone.Cannothave.ItcanbeagoodtooltolearnJavaScriptWebinvolvespersonnel.FormTheformisanareathatcontainsformelements.Formelementsthatallowtheuserintheform(forexample:textfields,drop-downlists,radiobuttons,checkboxes,etc.)elementoftheinputinformation.Formusingtheformtag(<form>)definition.<Form>...inputelement...</Form>EnterInmostcasesthelabelistobeusedintheforminputtag(<input>).Theinputtypeisthetypeattribute(type)definition.Mostfrequentlyusedinputtypesareasfollows:Textfields(TextFields)Whentheusertotypeletters,numbers,andothercontentintheform,itwillusethetextfield.<Form>Firstname:<Inputtype="text"name="firstname"/>4理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯<br/>Lastname:<Inputtype="text"name="lastname"/></Form>Thebrowserdisplaysthefollowing:Firstname:Lastname:Notethattheformitselfisnotvisible.Also,inmostbrowsers,thedefaultwidthofthetextfieldis20characters.Radiobutton(RadioButtons)Whenauserfromanumberofchoicestoselectwhichevergivenmoment,itwilluseasinglebox.<Form><Inputtype="radio"name="sex"value="male"/>Male<br/><Inputtype="radio"name="sex"value="female"/>Female</Form>Thebrowserdisplaysthefollowing:MaleFemaleNotethatonlyselectfromone.Checkbox(Checkboxes)Whenauserneedstoselectoneorseveraloptionsfromanumberofthegivenoptions,checkboxeswillbeused.<Form><Inputtype="checkbox"name="bike"/>Ihaveabike<br/><Inputtype="checkbox"name="car"/>Ihaveacar</Form>Thebrowserdisplaysthefollowing:IhaveabikeIhaveacarTheformactionattribute(Action)andtheOKbuttonWhentheuserclickstheOKbutton,thecontentsoftheformwillbesenttoanotherfile.Formactionattributedefinesthefilenameofthedestinationfile.Actionattributedefinedbythefilenormallybereceivedinputdataassociatedprocessing.<Formname="input"action="html_form_action.asp"method="get">Username:<Inputtype="text"name="user"/><Inputtype="submit"value="Submit"/></Form>Thebrowserdisplaysthefollowing:5理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯Username:Ifyoutypeafewlettersintheabovetextbox,thenclicktheOKbutton,thenenterthedatawillbesentto"html_form_action.asp"page.Thispagewillshowtheresultsofinputs.LabelDescription<Form>Formdefinitionforuserinput<Input>Definitionoftheinputfield<Textarea>Definedtextfields(morethanonelineofinputcontrol)<Label>Thedefinitionofacontrollabel<Fieldset>Domain<Legend>Definesadomaintitle<Select>Defineaselectlist<Optgroup>Customoptiongroup<Option>Drop-downlistofoptionsforthedefinition<Button>Thedefinitionofabutton<Isindex>obsolete.Have<input>instead.Imagetag(<img>)andsourceattributes(Src)InHTML,imagesaredefinedbythe<img>tag.<Img>tagisempty,meaningthatitcontainsattributes,andnoclosingtag.Todisplayanimageonapage,youneedtousethesourceattribute(src).srcrefersto"source".ValueofthesourceattributeistheURLoftheimage.Definitionimagesyntaxis:<Imgsrc="url"/>URLreferstothelocationforstoringimages.Iftheimageisnamed"boat.gif"theimagesdirectory,thentheURLis/images/boat.gif.Thebrowserwilldisplaytheimageinthedocumentwheretheimagetagappears.Ifyouputanimagetagbetweentwoparagraphs,thebrowserwillfirstdisplaythefirstparagraph,andthendisplaytheimagedisplayedlastparagraph.Replacetextproperties(Alt)altattributeisusedasanalternativedefinitionofastringoftextimagesprepared.ReplaceTextpropertyvaluesareuser-defined.<Imgsrc="boat.gif"alt="BigBoat">Whenthebrowsercannotloadimages,textattributestellthereadersthattheyreplacethelostinformation.Inthiscase,thebrowserwilldisplaythealternativetextinsteadofimages.The6理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯imageonthepageareplusreplacementtextpropertyisagoodhabit,whichhelpstobetterdisplaytheinformation,andforthosewhouseplaintextbrowserisveryuseful.Basicprecautions-usefultips:IfanHTMLfilecontainstenimages,theninordertodisplaythispagecorrectly,youneedtoloadthe11files.Loadpicturetakestime,soouradviceis:cautionpicture.ImagetagLabelDescription<Img>Definitionimages.<Map>Customimagemap.<Area>Customimagemapclickablearea.Background(Backgrounds)<Body>taghastwoconfigurationsbackground.Backgroundcolororimagecanbe.Thebackgroundcolor(Bgcolor)Thebackgroundcolorattributesetthebackgroundtoacolor.Propertyvaluesmaybeahexadecimalnumber,RGBvaluesorcolornames.<Bodybgcolor="#000000"><Bodybgcolor="rgb(0,0,0)"><Bodybgcolor="black">Thecodeaboveallthebackgroundcolortoblack.Background(Background)Backgroundpropertiessetthebackgroundimage.URLoftheimagepropertyvalue.Iftheimagesizeissmallerthanthebrowserwindow,thentheimagewillbereplicatedintheentirebrowserwindow.<Bodybackground="clouds.gif"><Bodybackground="/clouds.gif">URLaddresscanberelative,asthefirstlineofcode.Youcanalsomakeanabsoluteaddress,suchasasecondlineofcode.Tip:Ifyouintendtouseabackgroundimage,youneedtobearinmindthefollowingpoints:?Isthebackgroundimageofthepageloadtimeincreases.Tips:Theimagefileshouldnotexceed10k.Doesthepagebackgroundimagewithagoodimageoftheother.Doesthebackgroundimageandpagetextcolorswell.Theimagetileonthepage,youcanalsolookit?Forthetextoftheattentionwasdistractingbackgroundpictureyet?Basicprecautions-usefultips:<Body>taginthebackgroundcolor(bgcolor),background(background)andtext(text)propertyinthelatestHTMLstandard(HTML4andXHTML)hasbeenabandoned.W3Cintheirrecommendationhasbeenremovedfromtheseproperties.HTMLelementstodefinethelayoutanddisplaypropertiesshoulduseCascadingStyleSheets(CSS).7理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯Colorsbymixingred,green,bluetogether.ColorvaluesThecolorisdefinedbyahexadecimalnotation,thissymbolfromred,green,andbluevaluescomposition(RGB).Theminimumvalueofeachcoloris0(hex:#00).Themaximumvalueis255(hex:#FF).Thistableshowsthemixtureofthreecolorsfromthespecificeffects:ColorColorHEXColorRGB000000rgb(0,0,0)FF0000rgb(255,0,0)00FF00rgb(0,255,0)0000FFrgb(0,0,255)FFFF00rgb(255,255,0)00FFFFrgb(0,255,255)FF00FFrgb(255,0,255)C0C0C0rgb(192,192,192)#FFFFFFRgb(255,255,255)<Thead>,<tbody>and<tfoot>rarelyused,whichisduetobrowsersupportforthemisnotverygood.IhopethissituationinfutureversionsofXHTMLwillbechanged.IfyouareusingIE5.0orlater,youcanviewaspecificexampleinour"XMLTutorial"in.FormDescription<Table>Definitiontable<Caption>Definesatableheader.<Th>Definesatableheader.<Tr>Thedefinitionofthetablerows.<Td>Thedefinitionofatablecell.<Thead>Definesatableheader.<Tbody>Bodydefinitiontable.<Tfoot>Definesatablefooter.<Col>Definesattributetablecolumn.<Colgroup>Definesatablecolumngroup.UnorderedlistUnorderedlistisalistofitems,thelistofitemsinbolddots(typicallysmallblackcircles)aremarked.8理工大學(xué)應(yīng)用科學(xué)學(xué)院中英文翻譯Unorderedliststartswith<ul>tag.Eachlistitemstartswith<li>.<Ul><Li>Coffee</li><Li>Milk</li></Ul>Thebrowserdisplaysthefollowing:CoffeeMilkInternallistofitemsyoucanuseparagraphs,linebre