網(wǎng)頁(yè)設(shè)計(jì)與制作

1、電子科技大學(xué)畢業(yè)設(shè)計(jì)（論文）論文題目：網(wǎng)頁(yè)設(shè)計(jì)與制作學(xué)習(xí)中心（或辦學(xué)單位）：電子科技大學(xué)指導(dǎo)老師：官曉波職 稱(chēng)：高級(jí)實(shí)馬 學(xué)生姓名：鐘華學(xué) 號(hào):V080604411 專(zhuān) 業(yè):計(jì)算繼續(xù)教育學(xué)院電子科技大學(xué)制 網(wǎng)絡(luò)教育學(xué)院2012年06月12日電子科技大學(xué)畢業(yè)設(shè)計(jì)（論文）任務(wù)書(shū)題目：網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)與要求：禾I用所學(xué)的語(yǔ)言做一個(gè)以介紹低碳生活為主題的靜態(tài)網(wǎng)頁(yè)以及網(wǎng)頁(yè)多個(gè)模塊的連接。時(shí)間：2012 年2 月28 日至 2012_年 6月4 日共8 周學(xué)習(xí)中心：（或辦學(xué)單位）電子科技大學(xué)學(xué)生姓名：鐘華學(xué)號(hào)：v08專(zhuān)業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)指導(dǎo)單位或教研室：電子科技大學(xué)中山學(xué)習(xí)中心指導(dǎo)教師：官曉波職稱(chēng)：高

2、繼續(xù)教育學(xué)院電子科技大學(xué)網(wǎng)絡(luò)教育學(xué)院制2012年6月12日畢業(yè)設(shè)計(jì)（論文）進(jìn)度計(jì)劃表日期工作內(nèi)容執(zhí)行情況指導(dǎo)教師 簽字4月15日至4月20日進(jìn)行畢業(yè)資料收集和整理良好4月21日 至5月1日網(wǎng)頁(yè)設(shè)計(jì)和制作良好5月2日 至5月10日經(jīng)過(guò)中期檢查后，對(duì)網(wǎng)頁(yè)設(shè) 計(jì)與實(shí)現(xiàn)進(jìn)行修改及完善良好5月11日 至5月22日論文的構(gòu)思，修改撰寫(xiě)良好5月23日 至5月25日將論文由網(wǎng)上發(fā)給指導(dǎo)老 師良好5月曰至5月日論文的打印及裝訂良好6月曰至6月日論文提交良好教師對(duì) 進(jìn)度計(jì) 劃實(shí)施 情況總 評(píng)簽名年 月日本表作評(píng)定學(xué)生平時(shí)成績(jī)的依據(jù)之一摘要網(wǎng)頁(yè)設(shè)計(jì)作為用戶(hù)界面交互設(shè)計(jì)的延伸， 實(shí)在新的媒體和新的技術(shù)支持實(shí)現(xiàn)一 個(gè)全

3、新的設(shè)計(jì)創(chuàng)作領(lǐng)域。 設(shè)計(jì)創(chuàng)作網(wǎng)頁(yè)與循環(huán)其特有的特點(diǎn)和結(jié)構(gòu)思路， 具備可 實(shí)際行和外觀時(shí)尚。 本論文將對(duì)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā)語(yǔ)言開(kāi)展研究和討論。 在網(wǎng)頁(yè)設(shè) 計(jì)與制作語(yǔ)言的基礎(chǔ)上，著重使用HTML作為工具語(yǔ)言進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作的 實(shí)際操作，分別對(duì)基于對(duì)象的 HTML、css、JavaScript 進(jìn)行詳細(xì)描述并實(shí)現(xiàn)網(wǎng) 頁(yè)的開(kāi)發(fā)。關(guān)鍵字 ：制作、設(shè)計(jì)、 HTMLSummaryWeb design as an extension of the interactive user interface design, it is a new media and new technologies to suppor

4、t a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure of ideas with the actual line and stylish 。 The webdesign of this paper will develop language tools to carry out the study and discussion 。 On the basis of a website on th

5、e design and production of language ， focus on using HTMLweb design and production operations as a tool for language, a detailed description of the object based HTML, CSS， JavaScript and web page development. 文檔為個(gè)人 收集整理，來(lái)源于網(wǎng)絡(luò)個(gè)人收集整理 , 勿做商業(yè)用途Keywords: production, design ， HTML目錄第一章 緒論 61. 網(wǎng)頁(yè)設(shè)計(jì)概述 61。2網(wǎng)

6、頁(yè)設(shè)計(jì)的要素 . 7第二章HTML語(yǔ)言概述 72。1什么是HTM文件 72.3HTML格式 82。5HTML羊式 92。6HTM鏈接 92.7HTML表格 112.8HTML列表 132。9HTML表單 13第三章 Css 的運(yùn)用 173。1Css 簡(jiǎn)介 173.2 Css 基礎(chǔ)語(yǔ)法 173.3 派生選擇器 . 183。4 id 和類(lèi)選擇器 183。5 Css 框架型結(jié)構(gòu) 19第四章 Javascript 的運(yùn)用 224.1JavaScript 介紹 224.2HTML包含 JavaScript 的方法 224.3 JavaScript 語(yǔ)句, 注釋與變量 234。4JavaScript 常用

7、運(yùn)算符 234.5JavaScript 條件語(yǔ)句 244。6函數(shù)的定義與應(yīng)用 274.7HTML事件處理 28第五章WEB頁(yè)面信息的交互一一窗體與框架 335。1 窗體基礎(chǔ)知識(shí) 335.2 窗體中的基本元素 345。3窗體對(duì)象實(shí)例 385。 4 框架 415。 5 框架的訪問(wèn) 42第六章 結(jié)束語(yǔ) 47致 謝 47參考文獻(xiàn) 47第一章 緒論隨著 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. 網(wǎng)頁(yè)

8、設(shè)計(jì)概述 網(wǎng)頁(yè)是企業(yè)向用戶(hù)和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式， 是企業(yè) 開(kāi) 展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開(kāi)網(wǎng)站（或者只是利用第三方網(wǎng)站 ） 去談 電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱(chē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)頁(yè)的整體風(fēng)格 在這里，我提供給大家一些參考經(jīng)驗(yàn)：1 將你的標(biāo)志logo,盡可能的放在每個(gè)頁(yè)面上最突出的位置。2 突出你的標(biāo)準(zhǔn)色彩。3 總結(jié)一句能反映貴站精髓的宣傳標(biāo)語(yǔ)！4 相同類(lèi)型的圖像采用相同效果，比如說(shuō)標(biāo)題字都采用陰影效果

9、，那么在網(wǎng)頁(yè)中出現(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).在網(wǎng)頁(yè)配色中，還要切記一些誤區(qū)：1 不要將所有顏色都用到，盡量控制在三至五種色彩以?xún)?nèi) 2 背景和前 文的對(duì)比盡量要大（絕對(duì)不要用花紋繁復(fù)的圖案作背景），以便 突出主要 文字內(nèi)容。第二章HTML語(yǔ)言概述2。1什么是HTML文件HTML勺英文全稱(chēng)是 Hypertext M

10、arked Language，中文叫做“超文本標(biāo)記語(yǔ)言"。和一般文本的不同的是，一個(gè) HTML文件不僅包含文本內(nèi)容，還包含一些Tag,中文稱(chēng)“標(biāo)記”。一個(gè)HTML文件的后綴名是.htm或者是.html 。用文本編輯器就可以編寫(xiě) HTML文件。下面寫(xiě)個(gè)小HTML文件htmlhead<title>Title of page /title</head<body>Thisds imyfirsfehomepag®p <b>ThiSitfixt 曲d</b b誼心</body</html2.2 HTML 元素HTML元素指的是

11、從開(kāi)始標(biāo)簽(start tag )到結(jié)束標(biāo)簽(end tag )的所有代碼. HTML元素以開(kāi)始標(biāo)簽起始 HTML元素以結(jié)束標(biāo)簽終止 元素的內(nèi)容是開(kāi)始標(biāo)簽 與結(jié)束標(biāo)簽之間的內(nèi)容某些HTML元素具有空內(nèi)容(empty content ) 空元素 在開(kāi)始標(biāo)簽中進(jìn)行關(guān)閉(以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束)大多數(shù)HTML元素可擁有屬性2。3HTMI格式HTMI定義了一些文本格式的Tag,比如利用Tag，可以將字體變成粗體或者斜 體。從下面的示例，你可以了解各種文本格式Tag如何改變HTML文本的顯示.Tag曰些說(shuō)嗨弋tl A粗悻baldu i A斜體iteliudel文字當(dāng)中劃戟表疾刪降u ins a文宇下劃線

12、表存插入V 占 LI tn A下標(biāo)c sup上標(biāo)u block quote =-縮逬表示弓1用u pre a保留空格和換行-c code r=-表示計(jì)苴機(jī)代瑪鼻等盤(pán)字體2.4 HTML的特殊字符顯示有些字符在HTML!有特別的含義，比如小于號(hào)就表示 HTMLTag的開(kāi)始，這 個(gè)小于號(hào)是不顯示在我們最終看到的網(wǎng)頁(yè)里的.那如果我們希望在網(wǎng)頁(yè)中顯示一 個(gè)小于號(hào)，該怎么辦呢？這就要說(shuō)到 HTML?符實(shí)體(HTMICharacter Entities) 了。一個(gè)字符實(shí)體(Character Entity )分成三部分：第一部分是一個(gè)&符號(hào)，英 文叫ampersand;第二部分是實(shí)體(Entity

13、)名字或者是#加上實(shí)體(Entity)編號(hào);第三部分是一個(gè)分號(hào)。比如，要顯示小于號(hào)，就可以寫(xiě)&lt ;或者&# 60;。用實(shí) 體(Entity )名字的好處是比較好理解，一看lt,大概就猜出是less than的意 思，但是其劣勢(shì)在于并不是所有的瀏覽器都支持最新的Entity名字。而實(shí)體(Entity )編號(hào)，各種瀏覽器都能處理。注意：Entity是區(qū)分大小寫(xiě)的.最常用的字符實(shí)體如下圖：昱示錯(cuò)果說(shuō)明Entity NameEntity Number顯示一平空格&nbsp;小于8dt;>大于&gt;II雙引號(hào)&quot;&#34;2。5HTML

14、羊式style屬性的作用：提供了一種改變所有HTML元素的樣式的通用方法。 樣 式是HTML 4弓|入的,它是一種新的首選的改變 HTML元素樣式的方式。通過(guò) HTML樣式，能夠通過(guò)使用style 屬性直接將樣式添加到HTML元素，或者間 接地在獨(dú)立 的樣式表中(CSS文件)進(jìn)行定義。2.6HTML鏈接HTML使用a> (錨)標(biāo)簽來(lái)創(chuàng)建連接另一個(gè)文檔的鏈接錨可以指向網(wǎng)絡(luò) 上的任何資源：一張HTML頁(yè)面,一幅圖像，一個(gè)聲音或視頻文件等 等。1) a和href屬性HTMLffi a來(lái)表示超鏈接，英文叫 anchor。a>可以指向任何一個(gè)文件源：一個(gè)HTM網(wǎng)頁(yè)，一個(gè)圖片，一個(gè)影視文件等。

15、用法如下：<a i8(liiiiiS.CM/litalri title就網(wǎng)說(shuō)贛順勰與代鮒中颯加漲 網(wǎng)船臧伽a href =“ url “ > 鏈接的文字 </a>點(diǎn)擊a/a當(dāng)中的內(nèi)容，即可打開(kāi)一個(gè)鏈接文件，href屬性則表示這個(gè)鏈 接文件的路徑.比如鏈接到/html站點(diǎn)首頁(yè)，就可以這樣表示：2)target屬性使用title 屬性，可以讓鼠標(biāo)懸停在超鏈接上的時(shí)候，顯示該超鏈接的文字注釋。3 )name屬性使用name屬性，可以跳轉(zhuǎn)到一個(gè)文件的指定部位。使用name屬性，要設(shè)置一對(duì)。一是設(shè)定name的名稱(chēng)，二是設(shè)定一個(gè)href指向這 個(gè) name;4)

16、鏈接到email屬性 在網(wǎng)站中，你經(jīng)常會(huì)看到“聯(lián)系我們”的鏈接，一點(diǎn) 擊這個(gè)鏈接，就會(huì)觸發(fā)你的郵件客戶(hù)端，比如Outlook Express,然后顯示一個(gè)新 建mail的窗口 .用a>可以實(shí)現(xiàn)這樣的功能.代碼如：<html>bodyvp>這是一個(gè)最簡(jiǎn)單的郵箱地址的鏈接：<a href= ” mailto : info sina。 com">新浪網(wǎng)站發(fā)信/a></p><P這個(gè)郵箱地址的鏈接寫(xiě)了 subject內(nèi)容：<a href= ” mailto : info sina。 com?subject=Hello ” >

17、;給新浪網(wǎng)站發(fā)信 </a>/pp>這個(gè)郵箱地址鏈接寫(xiě)了 to, cc, bcc，subject, body 的內(nèi)容：a href= ” mailto : info ?cc=webmaste &subject=l%20like%20your %20site &body=真是個(gè)好站點(diǎn)！ ”寫(xiě)信給新浪 </a/p><p>b注：</b>空格請(qǐng)用 20表示./p></body></html>顯示效果如下圖：這是一個(gè)最簡(jiǎn)單的郵箱地址的饒接；給新丫艮網(wǎng)站發(fā)信這個(gè)郵箱地址的鏈接寫(xiě)

18、了 subject內(nèi)容：給新浪網(wǎng)站發(fā)信這個(gè)郵箱地址鏈接寫(xiě)F"g, bcc, subject, bodyK內(nèi)容: 寫(xiě)信給新浪注:空格請(qǐng)用鴉0表示，圖2-12.7HTML表格表格由<table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由<tr標(biāo)簽定義） 每行被分割為若干單元格（由<td>標(biāo)簽定義）.字母td指表格數(shù)據(jù)（table data）,即數(shù)據(jù)單元格的內(nèi) 容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、 表單、水平線、表格等等.示列如圖2-2 :vhtmlbodyP表格所用到的Tag：整個(gè)表格開(kāi)始要用table ;每一行開(kāi)始要用tr ；每一單元格 開(kāi)始要用td。

19、</ph4只有一行（RoW 一列（Column）的表格 </h4 <table border= ” 1"<trtd100 /td>/tr</tablevh4> 行三列的表格</h4<table border= ” 1">tr>td100</tdtd>200 /td<td300</td</tr/tablevh4>兩行三列的表格</h4vtable border="1 ”tr>td>100 /tdtd>200 /tdtd>300</

20、td</tr><tr>td>400</td>td>500 /tdtd>600</td</tr></table</body/html>表梏所用到的Tn滬 整個(gè)表格幵始要用每一行開(kāi)始真用 tr;毎一單元格幵貽要用2亠只有一'行(Row)列(Column的表搐兩行三列的表格1002003004005006002。8HTML列表無(wú)序列表 無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小 黑圓圈）進(jìn)行標(biāo)記.無(wú)序列表始于ul標(biāo)簽。每個(gè)列表項(xiàng)始于li有序列 表 同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)

21、字進(jìn)行標(biāo)記 有序列表始于 ol標(biāo)簽。每個(gè)列表項(xiàng)始于 li標(biāo)簽。示列如圖23：列分 framehtmlframeset cols="25 % ,50%,25%"vframe src="./asdocs/html_tutorials/Frame_a.html"frame src=" 。./asdocs/html_tutorials/Frame_b 。html"frame src=". 。/asdocs/html_tutorials/Frame_c 。html ”/frameset/html，此程序無(wú)法顯，此程李無(wú)法顯示網(wǎng)頁(yè)1出息

22、序無(wú)9最習(xí)蔭的甌3是：迢可応的豆因是：聶刁能注甌m*而f建到ii*不三博吏H la-temcto*劉f用*便朗站囲至！T喪陰帖驅(qū)匚問(wèn)贛空剛站il在地址屮可f ft電址屮可鴕舉性銘V新罠-aM1您可氐嘗妙下拗您可以豈試旦下劇乍：您可慎黑試以牖百軌勺Tut愴酉酗重新漣人顧重新奏入眩址.重新曜切理匾到上一頁(yè)返用至11上而逅回知上,'T更薯信息更芳信息更旁信息圖232。9HTML表單表單是一個(gè)包含表單元素的區(qū)域。表單元素是允許用戶(hù)在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素表單使用表單標(biāo)簽 （form）定義。10. HTML框架框架結(jié)構(gòu)標(biāo)簽（frameset）定義如何將

23、窗口 分割為框架每個(gè)frameset 定義了一系列行或列rows/co lumns 的值規(guī)定了每 行或每列占據(jù)屏幕的面積Css示列如圖2-4:htmlvhead title 輸入用戶(hù)姓名 </title /head>body>formadm in5 method= ” get ”action= ” /html/asdocs/htm l_tutorials/yourname.asp 請(qǐng)輸入你的姓名：in put type= ” text ” n ame="your name” <input type="submit” valu

24、e="提交"</form </body</html>請(qǐng)輸入你的姓名2.10 HTML 圖片用<img>這個(gè)Tag可以在HTML里面插入圖片。最基本的語(yǔ)法如下：img src="url ” > url 表示圖片的路徑和文件名。比如 url可以是 images/logo/blabla_logo01.gif,也可以是個(gè)相對(duì)路徑是” o ./images/logo/blabla_logo01 。gif ”。圖片 alt 屬性 <img>中有一個(gè) alt 屬性，英文叫 alternate text 。例句如下：img s

25、rc = "。/images/html_tutorials/smile.jpg ” alt="smile face" 假使瀏覽器沒(méi)有載入圖片的功能，瀏覽器就會(huì)轉(zhuǎn)而顯示Alt屬性的值。其實(shí)，現(xiàn)在大多數(shù)瀏覽器都支持圖片載入。在此介紹Alt屬性，是因?yàn)樗牧硗庖粋€(gè)重要功能。目前搜索引擎抓取工具無(wú)法識(shí)別圖像中所含的文字，所以用ALT屬性寫(xiě)上 圖片的說(shuō)明，便于搜索引擎抓取你網(wǎng)頁(yè)的內(nèi)容示列如圖2-5:<htmlvbodyvp將鼠標(biāo)停留在圖片上,你可以看到Alt屬性里寫(xiě)的內(nèi)容。/p><img src= ” ./images/logo/blabla_logo 。

26、 gif" alt="站長(zhǎng)網(wǎng) 站長(zhǎng)學(xué)院的 Logo標(biāo)志”brvimg src= ”。./images/html_tutorials/frjj01。jpg ” alt="芙蓉姐姐照片:紅配綠一臺(tái)戲”/body/html將鼠標(biāo)停留在圏片上，禰可以看到Alt屬性里寫(xiě)骯內(nèi)容。I叵站長(zhǎng)網(wǎng) 站長(zhǎng)學(xué)院的匚。即標(biāo)志 辰芙暮姐姐頗片:紅酉歸一合戲圖252.11 HTML字體的大小在HTM里，可以用font這個(gè)元素及其屬性來(lái)設(shè)定字體的大小,顏色和字體風(fēng) 格.字體大小用字體大小屬性（size）來(lái)設(shè)定字體的大小。示例代碼如下：pfont size= ” 2”這一段的字體大小的值是2。v/

27、font /p字體風(fēng)格用face屬性來(lái)設(shè)定字體風(fēng)格.示例代碼如下：p font fac="arial”這一段的字體風(fēng)格是arial。 /font /p字體顏色用顏色屬性（color ）來(lái)設(shè)定字體顏色。字 體顏色代碼請(qǐng)參見(jiàn)字體顏色代碼請(qǐng)參見(jiàn)HTM!顏色參考字體顏色代碼請(qǐng)參見(jiàn) HTM顏色參考（HTML Color Referenee）。 p font color= ”# FF0000' 這一段 的字體顏色是紅色/font/p注意HTML緇勺標(biāo)準(zhǔn)中，已經(jīng)不建議使用font 及其屬性來(lái)設(shè)定字體，而是建議用CSS來(lái)設(shè)定字體的大小，顏色，字體風(fēng)格等。有關(guān)CSS中和文字的相關(guān)屬性，請(qǐng)參見(jiàn)我

28、們教程中的。示列如圖2-6 :vhtmlhead title 字體大小 font size /title /headvbody><p><fo nt size="1"> 這段文字的字體大小值為 1 p><fo nt size=<p> font size=Pvp>” 2” 這段文字的字體大小值為 ” 3” 這段文字的字體大小值為vfont size= ” 4"這段文字的字體大小值為font size="5 ” 這段文字的字體大小值為/font</p2。v/font> /p>3. &

29、lt;/font </p4<p>p> /body>font size= ” 6”這段文字的字體大小值為fo nt size="7"這段文字的字體大小值為 7。/font> /p>/font /p>6.</font </p>/font </p/html返段文字的字體大小値克2。這段文字的字體大小值為3。這段文字的字體大小值為4。這段文字的字體大小值為5。這段文字的字體人小值為6。 這段文字的字體大小 值為7。如圖26第三章Css的運(yùn)用3.1Css簡(jiǎn)介隨著In ternet的迅猛發(fā)展，HTML被廣泛應(yīng)用，上

30、網(wǎng)的人們當(dāng)然希望網(wǎng)頁(yè)做得 漂亮些,因此HTML排版和界面效果的局限性日益暴露出來(lái)。為了解決這個(gè)問(wèn)題,人們也走了不少?gòu)澛?，用了一些不好的方?比如給HTM出曾加很多的屬性結(jié)果將 代碼變得很臃腫，將文本變成圖片,過(guò)多利用Table來(lái)排版,用空白的圖片表示白 色的空間等.直到CSS出現(xiàn)。CSS可算是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)突破，它解決了網(wǎng)頁(yè)界 面排版的難題?？梢赃@么說(shuō)，HTML的Tag主要是定義網(wǎng)頁(yè)的內(nèi)容(Co nte nt)，而 CSS決定這些網(wǎng)頁(yè)內(nèi)容如何顯示(Layout )。CSS的英文是 Cascading StyleSheets，中文可以翻譯成串聯(lián)式樣式表.CSS按其位置可以分成三種:1 )內(nèi)嵌樣

31、式(Inline Style ) 2)內(nèi)部樣式表(Internal Style Sheet ) 3 )外部樣式表 (External Style Sheet) 示列如圖3 1：<html>vheadtitle> 內(nèi)嵌式樣式(Inline Style)v/title> /headvbody<P style="font size : 20pt; color : red"> 這個(gè)內(nèi)嵌樣式(Inline Style)定義段落里面的文字是20pt字體，字體顏色是紅色。/p>p>a段文字沒(méi)有使用內(nèi)嵌樣式。/p/body </html

32、這個(gè)內(nèi)嵌樣式(Inline Style) 義段 落里面的文字是字體.字體顏色 是紅色口這段文字沒(méi)有佚用內(nèi)歆樣式。3.2 Css基礎(chǔ)語(yǔ)法CSS語(yǔ)法由三部分構(gòu)成： 選擇器、屬性和值：selector property: value 選擇器(selector)通常是你希望定義的HTML元素或標(biāo)簽，屬性(property) 是你希望 改變的屬性，并且每個(gè)屬性都有一個(gè)值屬性和值被冒號(hào)分開(kāi)，并由花 括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明(declaration ) : body color: blue 上面這行代碼的作用是將body元素內(nèi)的文字顏色定義為藍(lán)色.在上述 例子中，body是 選擇器，而包括在

33、花括號(hào)內(nèi)的的部分是聲明。聲明依次由兩 部分構(gòu)成：屬性和值，color為屬性,blue為值。示列如圖32：<HTML><HEAD><STYLEtype= ” text/css ”H1。mylayout border width: 1; border : solid; text align: center；coloured/STYLE></HEAD>BODY<H1 class="mylayout ”這個(gè)標(biāo)題使用了 Style.</H1>H1這個(gè)標(biāo)題沒(méi)有使用Style。 /H1>/BODY</HTML>|

34、這個(gè)標(biāo)題使用了 StylTL這個(gè)標(biāo)題沒(méi)有使用Style Q圖3-23。3派生選擇器通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔在CSS1中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱(chēng)為上下文選擇器 (contextual selectors )，這是由于它們依賴(lài)于上下文關(guān)系來(lái)應(yīng)用或者避免某項(xiàng) 規(guī)則.在CSS2中，它們 稱(chēng)為派生選擇器，但是無(wú)論你如何稱(chēng)呼它們，它們的作 用都是相同的。派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式.通過(guò)合理地使用派生 選擇器，我們可以使HTML代碼變得更加整潔。3。4 id和類(lèi)選擇器id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定

35、的樣式。 id 選擇器 以 ”#" 來(lái)定義。 下面的兩個(gè) id 選擇器， 第一個(gè)可以定義元素的顏色為紅色， 第二個(gè)定義元素的顏色為 綠色 : red color:red; green color ：green ；下面的 HTML 代碼中 ,id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元 素顯 示為綠色。 sidebar p font style ： italic; text align ： right ； margin-top ： 0.5em; #sidebar h2 font-size: 1em; font-weight: normal; f

36、ont-style： italic; margin: 0; line-height: 1.5 ；text-align ： right ； 3.5 Css 框架型結(jié)構(gòu)CSS 框模型 ( Box Model) 規(guī)定了元素框處理元素內(nèi)容、 內(nèi)邊距、 邊框 和 外邊距 的方 式。 元素框的最內(nèi)部分是實(shí)際的內(nèi)容， 直接包圍內(nèi)容的是內(nèi)邊距。 內(nèi)邊距呈現(xiàn)了元素的背景。 內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距 默認(rèn)是透明的，因此不會(huì)遮擋其后的任何 元素。 內(nèi)邊距、 邊框和外邊距都是可 選的，默認(rèn)值是零。但是， 許多元素將由用戶(hù)代理樣式表 設(shè)置外邊距和內(nèi)邊距 . 可以通過(guò)將元素的 margin 和 pad

37、ding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣 式。這可 以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：在CSS中，width和 height 指的是內(nèi)容區(qū)域的寬度和高度 . 增加內(nèi)邊距、邊框和外 邊距不會(huì)影響內(nèi) 容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。 假設(shè)框的每個(gè)邊上有 10 個(gè)像素 的外邊距和 5 個(gè)像素的內(nèi)邊距 .如果希望這個(gè)元素框 達(dá)到 100 個(gè)像素，就需要 將內(nèi)容的寬度設(shè)置為 70 像素 示列如圖 3-3 ： <html <head<title> 字體大小屬性 font-size</title> STYLEBODYfont-size : 10pt

38、。si font size:16px 。 s2 font-size : 16pt 。s3 font size:80% .s4 font-size : larger 。 s5 font size : xx-large /STYLE></headvbodyp>這段文字大小是10pt。 /p<p class = "s1"> 這段文字大小是 16px。</p>p class =” s2"> 這段文字大小是 16pt o </p><p class = "s3"> 這段文字大小是 10

39、pt 的 80%. /p<p class = "s4” >這段文字的大小比10pt大。/p><p class =” s5"這段文字的大小是特大號(hào)(xx large)。</p/bodyv/htmliS段文字大小是lcie 0遠(yuǎn)段文字大小是16pm這段文字大小是16pta建駁文字大小足七的汕虬這段文字的大小比lgt大"這卑文字旳大小是特犬號(hào)(xx-large)。圖3-33.6定為基礎(chǔ)和相對(duì)絕對(duì)定位CSS為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將 布局的一 部分與另一部分重疊，還可以完成多年來(lái)通常需要使用多個(gè)表格才能 完

40、成的任務(wù)。定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置 應(yīng)該出現(xiàn)的位置，或者 相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。 顯然，這個(gè)功能非常強(qiáng)大，也很讓人吃驚。要知道，用戶(hù)代理對(duì) CSS2中定位的支持遠(yuǎn)勝于對(duì)其它方面的支持，對(duì)此不應(yīng)感到奇怪。另一方面，CSS1中首次提出了浮動(dòng),它以Netscape在Web發(fā)展初期增加的一個(gè)功 能為基礎(chǔ)。浮動(dòng) 不完全是定位，不過(guò)，它當(dāng)然也不是正常流布局。我們會(huì)在后面的章節(jié)中明確浮動(dòng)的含義.CSS有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。除非專(zhuān) 門(mén)指定，否則所有框都在普通流中定位。 也就是說(shuō)， 普通流中的元素的位置由元 素在 X (HTML

41、) 中的位置決定。 塊級(jí)框從上到 下 一個(gè)接一個(gè)地排列，框之間 的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。 行內(nèi)框在一行中水平布置。 可以使 用水平內(nèi)邊距、 邊框和外邊距調(diào)整它們的間距。 但是， 垂直內(nèi)邊距、 邊框和 外邊距不影響行內(nèi)框的高度。 由一行形成的水平框稱(chēng)為行框 (Line Box) ， 行 框的高度總是足以容納它包含的所有行內(nèi)框。 不過(guò)，設(shè)置行高可以增加這個(gè)框的 高度。 在下面的章節(jié)，我們會(huì)為您詳細(xì)講解相對(duì)定位、 絕對(duì)定位和浮動(dòng)。 CSS 相 對(duì)定位 相對(duì)定位是一個(gè)非常容易掌握的概念。 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位 , 它將出現(xiàn)在它所 在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)

42、元 素“相對(duì)于”它的起點(diǎn)進(jìn)行移 動(dòng)。 如果將 top 設(shè)置為 20px ，那么框?qū)⒃谠?置頂部下面 20 像素的地方 . 如果 left 設(shè) 置為 30 像素, 那么會(huì)在元素左邊創(chuàng) 建 30 像素的空間 , 也就是將元素向右移動(dòng) . CSS 絕對(duì)定位 絕對(duì)定位使元素的 位置與文檔流無(wú)關(guān)， 因此不占據(jù)空間 . 這一點(diǎn)與相對(duì)定位不同， 相對(duì) 定位實(shí)際上 被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置 . 普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣： 文檔為個(gè)人收集整理，來(lái)源 于網(wǎng)絡(luò)文檔為個(gè)人收集整理 , 來(lái)源于網(wǎng)絡(luò)第四章Javascript 的運(yùn)用4。JavaScr

43、ipt 介紹JavaScript是屬于網(wǎng)絡(luò)的腳本語(yǔ)言！JavaScript被數(shù)百萬(wàn)計(jì)的網(wǎng)頁(yè)用來(lái)改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies ，以及更多的應(yīng)用。JavaScript 是因特網(wǎng)上最流行的腳本語(yǔ)言。在數(shù)百萬(wàn)張頁(yè)面中,JavaScript被用來(lái)改進(jìn)設(shè) 計(jì)、驗(yàn)證表單、檢測(cè)瀏覽器、創(chuàng)建cookies ，等等等等。JavaScript 是因 特網(wǎng)上最流行的腳本語(yǔ)言，并且可在所有主要的瀏覽器中運(yùn)行，比方說(shuō)In ternet Explorer、Mozilla 、Firefox、Netscape、和 Opera。下面來(lái)看一下簡(jiǎn)單的 JavaScript的入門(mén)示列如圖4 1。vhtmlhead

44、xtitle用 document。write 輸出帶格式的 HTML文本的 Javascript 示 例 v/title </head<body>vscript type="text/javascript ”document。write （”hlHello World ！/h1>”）v/script /body</html>Hello Won-IH I圖4-14.2HTML包含 JavaScript 的方法Javascript程序放到一個(gè)后綴名為。js的文本文件里.這樣做，可以提Javascript的復(fù)用性，減少代碼維護(hù)的負(fù)擔(dān)，不必將相同的Java

45、script代碼拷貝到多個(gè)HTM網(wǎng)頁(yè)里,將來(lái)一旦程序有所修改,也只要修改。js文件就可以，不 用再修改每個(gè)用到這個(gè)Javascript程序的HTMI文件。在HTML!引用外部文件里的 Javascript，應(yīng)在 Head里寫(xiě)一句 vscript src= ” 文件名"</script> ，其 中src的值，就是Javascript所在文件的文件路徑。示例代碼如下：html>vheadscriptsrc= ” http:/www。 /script /head>body/body/html演示示例里的common.js其實(shí)就是一個(gè)文本文件，內(nèi)容如下：fun cti

46、 on clickme ()alert (” You clicked me! ”)4.3 JavaScript 語(yǔ)句，注釋與變量語(yǔ)句,JavaScript語(yǔ)句是發(fā)給瀏覽器的命令。這些命令的作用是告訴瀏覽"Hello器要做的事情t說(shuō)!這個(gè)javascr訓(xùn)刪句告訴瀏覽器向網(wǎng)頁(yè)輸出world ”： document.write("Hello wodd =;_JavaScript 二 注釋可以添加注釋來(lái)對(duì)javaScript進(jìn)行解釋,或者提高其可讀性't匕單行的注釋以碎 開(kāi)始。 JavaScript變量 正如代數(shù)一樣，JayaSc£jp變量用于保存值或表達(dá)式?？梢?/p>

47、給變量起一個(gè)簡(jiǎn)短名稱(chēng)，比如x，或者更有描述性的名稱(chēng)，比如length。-減潔-, 一，天:，亠 ”JavaScript、變量也可以保存文本值，比如carname= Volvo"。謹(jǐn)械*乘i去如果尤等于U3八等于3,結(jié)果等于1如果疋等于ID x+等于1丄如果y等于1匕y等干9邏輯運(yùn)算符:運(yùn)算符說(shuō)明示例示例說(shuō)陰=等于如果工等于為馬等于=全等于1值相尊，數(shù)據(jù)奘型也帕等）龍=如果又等于整數(shù)2丹為字符串乜J 則艾二二二丫不咸立>大于x>y>=犬于等于小于丈星y< =小于等干x* =y1=環(huán)等于x!=y下全等于x!=»j/&&與(and)x &l

48、t; 10 衣散 y > 1III或(g)X" =3 11 / = =P賦值運(yùn)算符:運(yùn)算符運(yùn)苴將說(shuō)明示例示例說(shuō)明賦值>c=s將整數(shù)5這個(gè)值賦給變星艾注意：請(qǐng)注意賦值（=和等于（=）的區(qū)別4.5JavaScript 條件語(yǔ)句在一般情況下，程序語(yǔ)句的執(zhí)行是按照其書(shū)寫(xiě)順序來(lái)執(zhí)行的。前面的代碼先執(zhí) 行，后面的代碼后執(zhí)行但是這種簡(jiǎn)單的自上而下的單向流程只適于用一些很簡(jiǎn) 單的程序大多數(shù)情況下，需要根據(jù)邏輯判斷來(lái)決定程序代碼執(zhí)行的優(yōu)先順序。 要改變程序代碼執(zhí)行的先后順序，任何編程語(yǔ)言都需要用到條件語(yǔ)句和循環(huán)語(yǔ) 句，Javascript 也不例外。這一節(jié)我們主要介紹Javascript

49、條件語(yǔ)句。Javascript條件語(yǔ)句有以下幾種：1） 單項(xiàng)條件結(jié)構(gòu)（if條件語(yǔ)句）2）雙向條件結(jié)構(gòu)（if.。.else條件語(yǔ)句）3）多項(xiàng)條件結(jié)構(gòu)（switch條件語(yǔ)句）4）單項(xiàng)條件結(jié)構(gòu)（if條件語(yǔ)句）If條件語(yǔ)句的語(yǔ)法如下：if ( expression )statement1這句語(yǔ)法的含義是， 如果符合 expression 條件，就執(zhí)行 statement1 代碼, 反之， 則不執(zhí)行 statement1 代碼。下面的這個(gè) Javascript 示例就用到了 Javascript 的 if 條件語(yǔ)句。首先用 .length 計(jì)算出字符串 What's up? 的長(zhǎng)度，然后使用 i

50、f 語(yǔ)句進(jìn)行判斷，如果該字符串長(zhǎng)度 <100,就顯示 "該字符串長(zhǎng)度小于 100。" 。 <html>vheadxtitle一個(gè)使用到 if 條件語(yǔ)句的 Javascript 示例 </title> /head <body<script type= ”text/javascript”var vText = "What 's up? ”；var vLen = vText.length;if (vLen < 100)document。write ("p> 該字符串長(zhǎng)度小于 100。</p&g

51、t;") /script> /body></html>雙向條件結(jié)構(gòu) ( if 。 .else 條件語(yǔ)句 ) If 。 else 條件語(yǔ)句的語(yǔ)法如下：if ( expression )statement1elsestatement2這句語(yǔ)法的含義是， 如果符合 expression 條件, 則執(zhí)行 statement1 代碼，反之， 則執(zhí)行 statement2 代碼。下面的 Javascript 示例使用了 if. 。 .else 條件語(yǔ)句 判斷，如果 vHour 小于 17，顯示”日安 ", 反之則顯示 "晚安”。<html>

52、head title使用 if °°.else 條件語(yǔ)句的 Javascript 示例/title /head<body script type= ”text/javascript"var vDay = new Date（ ）var vHour = vDay.getHours（）if （vHour 17 ）document。write（ ” <b>日 安/b> ”）elsedocument。 write（"<b 晚安 /b>" ） /script /body /html 多項(xiàng)條件結(jié)構(gòu) （switch 條件語(yǔ)句

53、）Switch 條件語(yǔ)句的語(yǔ)法如下：switch （expression）case label1statement1breakcase label2 :statement2break。 .default ：statementdefault這句語(yǔ)法的含義是 , 如果 expression 等于 label1 ，則執(zhí)行 statement1 代碼；如 果 expression 等于 label2 ，則執(zhí)行 statement2 代碼；以此類(lèi)推。如果 expression 不符合任何 label ，則執(zhí)行 default 內(nèi)的 statementdefault 代碼。 Switch 條件 語(yǔ)句中的

54、break ，表示 switch 語(yǔ)句結(jié)束。 如果沒(méi)有使用一個(gè) break 語(yǔ)句 , 則多 個(gè) label 塊被執(zhí)行。 下面的 Javascript 示例使用了 switch 條件語(yǔ)句 , 根據(jù)星 期天數(shù)的不同，顯示不同的話。html <head>title> 使用 swith 條件語(yǔ)句的 Javascript 示例 /title> /head body><script type= ”text/javascript">var d = new Date（ ） theDay=d.getDay（ ） switch （theDay ） case 5

55、：document.write （”b>總算熬到星期五了。 /b"）breakcase 6 ：document。write （” b>哈哈,周末啦！ v/b>"）breakcase 0 ：document.write （” <b>明天又要上班，想想就煩。/b> ）breakdefault:document。write （ "<b>每個(gè)工作日慢得都象蝸牛爬?。?lt;/b>"）</script </body /html 4。6 函數(shù)的定義與應(yīng)用 函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)

56、使用的代碼塊。 將腳 本編寫(xiě)為函數(shù)，就可以避免頁(yè)面載入時(shí)執(zhí)行該腳本。 函數(shù)包含著一些代碼，這 些代碼只能被事件激活，或者在函數(shù)被調(diào)用時(shí)才會(huì)執(zhí)行。 你可以在頁(yè)面中的任 何位置調(diào)用腳本 （ 如果函數(shù)嵌入一個(gè)外部的 。 js 文件, 那么甚至可 以從其他的 頁(yè)面中調(diào)用 ） 。 函數(shù)在頁(yè)面起始位置定義 , 即 <head 部分。4。7HTML事件處理JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面。 事件是可以被 JavaScript 偵測(cè)到 的行為 . 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。 比方說(shuō)，我們可 以在用戶(hù)點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) onClick 事件來(lái)

57、觸發(fā)某個(gè)函 數(shù)。事件在 HTML 頁(yè)面中定 義. onload 和 onUnload 當(dāng)用戶(hù)進(jìn)入或離開(kāi)頁(yè)面時(shí) 就會(huì)觸發(fā) onload 和 onUnload 事件 . onload 事件常用來(lái)檢測(cè)訪問(wèn)者的瀏覽器 類(lèi)型和版本，然后根據(jù)這些信息載入特定版本 的網(wǎng)頁(yè)。 onload 和 onUnload 事 件也常被用來(lái)處理用戶(hù)進(jìn)入或離開(kāi)頁(yè)面時(shí)所建立的 cookies 。例 如，當(dāng)某用戶(hù) 第一次進(jìn)入頁(yè)面時(shí) , 你可以使用消息框來(lái)詢(xún)問(wèn)用戶(hù)的姓名 . 姓名會(huì)保存在 cookie 中. 當(dāng)用戶(hù)再次進(jìn)入這個(gè)頁(yè)面時(shí)，你可以使用另一個(gè)消息框來(lái)和這個(gè)用戶(hù)打招 呼： ”WelcomeJohn Doe!" 。 onFocus, onBlur 和 onChange onFocus、 onBlur 和 onChange