網頁設計與開發(fā).ppt

《網頁設計與開發(fā).ppt》由會員分享，可在線閱讀，更多相關《網頁設計與開發(fā).ppt（82頁珍藏版）》請在裝配圖網上搜索。

1、網頁設計與開發(fā),呂智強 ,網頁和網站,網站是有獨立域名、獨立存放空間的內容集合（即對外發(fā)布），這些內容可能是網頁，也可能是程序或其他文件，不一定要有很多網頁，主要有獨立域名和空間，那怕只有一個頁面也叫網站。 網頁是網站的組成部分。有了很多網頁沒有獨立的域名和空間也只能說是網頁。例如一個程序，盡管有很多頁面，功能也齊全，但沒有獨立域名和空間，沒對外發(fā)布，但都不能叫網站。,一、概述,網頁表現(xiàn)形式,靜態(tài)網頁,通常是以.htm、.html、.shtml等為后綴的，它的特點是不會“變” 靜態(tài)網頁沒有數(shù)據(jù)庫的支持，在網站制作和維護方面工作量較大，因此當網站信息量很大時完全依靠靜態(tài)網頁制作方式比較困難 靜態(tài)

2、網頁的交互性較差，功能簡單，無法實現(xiàn)更多的功能,網頁表現(xiàn)形式,動態(tài)網頁,通常是以.php、.aspx、.jsp等為后綴的，它的特點是會“變” 以數(shù)據(jù)庫技術為基礎，大大降低網站維護的工作量 可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調查、用戶管理、訂單管理等等 動態(tài)網頁實際上并不是獨立存在于服務器上的網頁文件，只有當用戶請求時服務器才返回一個完整的網頁;,什么是萬維網,萬維網的核心部分由統(tǒng)一資源定位器（URL）、超文本傳輸協(xié)議（HTTP）以及超文本標記語言（HTML）三個標準構成。 1統(tǒng)一資源定位器 統(tǒng)一資源定位器，又叫URL（Uniform Resource Locator）。是專為標識I

3、nternet網上資源位置而設的一種編址方式，通常所說的網頁地址指的即是URL。 2超文本傳輸協(xié)議 HTTP是超文本轉移協(xié)議，是客戶端瀏覽器或其他程序與Web服務器之間的應用層通信協(xié)議。在Internet上的Web服務器上存放的都是超文本信息，客戶機需要通過HTTP協(xié)議傳輸所要訪問的超文本信息。 3超文本標記語言 HTML（Hyper Text Markup Language）超文本標記語言是一種嵌入式語言。通過定義標記標簽使瀏覽器解析頁面并進行顯示。,工作原理,當進入萬維網上一個網頁，或者其他網絡資源的時候，通常你要首先在瀏覽器上鍵入想訪問網頁的統(tǒng)一資源定位器（URL），或者通過超鏈接方式鏈

4、接到那個網頁或網絡資源。這之后的工作首先是URL的服務器名部分，被名為域名系統(tǒng)的分布于全球的因特網數(shù)據(jù)庫解析，并根據(jù)解析結果決定進入哪一個IP地址。 接下來的步驟是為所要訪問的網頁，向在那個IP地址工作的服務器發(fā)送一個HTTP請求。在通常情況下，HTML文本、圖片和構成該網頁的一切其他文件很快會被逐一請求并發(fā)送回用戶。 網絡瀏覽器接下來的工作是把HTML、CSS和其他接受到的文件所描述的內容，加上圖像、鏈接和其他必須的資源，顯示給用戶。這些就構成了瀏覽器中所看到的“網頁”。,開發(fā)工具的選擇,HTML的編輯工具是比較多的，讀者既可以選擇最常用的基于文本的HTML編輯器（Windows自帶的記事本

5、），也可以選擇一套功能強大，可取代記事本編輯器的EditPlus，還可以選擇所見即所得的Dreamweaver等。,網頁制作的相關技術,1HTML HTML（Hyper Text Markup Language）超文本標記語言是一種嵌入式語言。和一般文本的不同的是，一個HTML文件不僅包含文本內容，還包含一些Tag，中文稱“標記”。 通過定義標記標簽使瀏覽器解析頁面并進行顯示。一個HTML文件的后綴名是htm或者是html。 2CSS CSS意思就是疊層樣式表（Cascading Style Sheets），使用CSS的優(yōu)點在于將格式從功能中分離出來。它定義了HTML元素的顯示，是一種對web

6、文檔添加樣式的簡單機制。 在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。 只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網頁的外觀和格式。,網頁制作的相關技術,3JavaScript JavaScript是由 Netscape公司開發(fā)的一種腳本語言（script language），稱為描述性語言， 具有面向對象的能力，可以非常自由地嵌入到HTML/XHTML 文件中，從而更便捷地開發(fā)出可交互的Web網頁。 JavaScript是目前最為流行的客戶端腳本語言，大大地增強了網頁的交互性。JavaScript語法構

7、成與C、C+、Java類似，都包括if語句、while循環(huán)、分支選擇以及運算等結構，但也僅是在語法上的相似。,網頁元素單位,相對長度單位 px：像素是相對于顯示器屏幕分辨率而言 em：相對于當前對象內文本的字體尺寸 絕對長度單位 cm：厘米 mm：毫米 in：英寸,HTML文檔結構,HTML（Hyper Text Markup Language）超文本標記語言是一種嵌入式語言。通過定義標記標簽使瀏覽器解析頁面并進行顯示。一個HTML4.01的文檔結構包括以下幾部分： DOCTYPE聲明定義文檔類型。 HTML頭元素信息。 HTML正文信息（body標簽內信息）。,二、初識HTML,聲明定義文檔

8、類型,在HTML4.01中提供了三種DTD文檔： 嚴格型HTML4.01DTD文檔不包括那些不被推薦的元素和屬性，并且不能在帶有frameset的頁面中出現(xiàn)。 過渡型HTML4.01DTD文檔包含所有嚴密型DTD文檔中所允許的內容，還可以使用那些不被推薦的元素以及屬性。 框架型HTML4.01 DTD文檔包含過渡型以及框架。 ,HTML頭元素信息,HTML文檔的head元素中包含了meta元素，meta元素用來指定有關這個文檔的相關信息。 例如： 用httpequiv、content、charset描述頁面的內容。 meta元素的屬性有兩種：http-equiv和name 。,什么是標簽大多數(shù)

9、HTML文檔的標簽都是由開始標簽和結束標簽進行界定（開始標簽和結束標簽成對出現(xiàn)），結束標簽是以斜線開頭（/），例如中為結束標簽。每一個標簽都是由尖括號（）包圍。 有單向標簽和雙向標簽 單向標簽：br、hr、img等,三、標簽,標簽的屬性,標簽可以擁有屬性，屬性可以為頁面中的HTML元素提供附加信息。屬性被放置在標簽的后面，但在最終括號（）的前面，即屬性應該添加在HTML元素里的起始標簽中。 例如：,標簽的嵌套,HTML標簽經常使用嵌套的方式，所謂的嵌套是指一個HTML標簽包含另外一個標簽的情況。 例如： 標題 顯示的內容 ,HTML基本標簽,HTML基本標簽包括:標題標簽h1、段落標簽p、換行

10、標簽br、水平分割標簽hr、部分標簽div、注釋標簽、字體標簽font。 部分標簽最早在HTML3.2標準中定義，可以將文檔分割成獨立的、不同的部分。在標簽中定義的文本內容，實際上與沒有在標簽中定義的沒有什么區(qū)別，但要是引入了align屬性，標簽就變的十分有用了（用來設置段落或標題的對齊方式）。 和其他編程語言一樣，HTML也提供了代碼注釋的方式（，作為一個程序員應該養(yǎng)成對代碼注釋的習慣，這樣可以保持清晰的思路。瀏覽器不顯示注釋的部分。,文字格式化,常見的文字格式化標簽如下表。,字體設置,在HTML中，字體標簽（font）通過其屬性來設置文本字體、字體大小和字體顏色。字體標簽的屬性如下表。,c

11、olor,color,color,color,無序列表,所謂無序列表就是列表中列表項的前導符號沒有一定的次序，而是用黑點、圓圈、方框等一些特殊符號標識。無序列表并不是使列表項雜亂無章，而是使列表項的結構更清晰，更合理。 當創(chuàng)建一個無序列表時，主要使用用HTML的標簽和標簽來標記。其中標簽標識一個無序列表的開始；標簽標識一個無序列表項。 基本語法結構為： 項目名稱 項目名稱 項目名稱 項目名稱 ,四、列表,有序列表,有序列表與前面介紹的無序列表正好相反，所謂有序列表就是列表項的前導符號是有序的符號標識的列表。有序的符號標識包括：阿拉伯數(shù)字、小寫英文字母、大寫英文字母、小寫羅馬數(shù)字、大寫羅馬數(shù)字。

12、 基本語法結構為： 項目名稱 項目名稱 項目名稱 標簽的type屬性用來定義一個有序列表的前導字符，如果省略了type屬性，瀏覽器會默認顯示為“1”前導字符。 type取值為 1（阿拉伯數(shù)字）、a（小寫英文字母）、A（大寫英文字母）、i（小寫羅馬數(shù)字）、I（大寫羅馬數(shù)字）,圖片的使用,HTML和XHTML的一個重要特性就是可以在文本中加入圖片，既可以把圖片作為文檔的內在對象加入，又可以通過超級鏈接的方式加入，同時還可以將圖片作為背景加入到文檔中。在文檔中合理地使用圖片會使瀏覽器顯示的網頁更活潑、引人入勝。,五、圖片,在頁面中插入圖片,在HTML中，用標簽在網頁中添加圖片。圖片是以嵌入的方式添加

13、到網頁中的。網頁開發(fā)者可以通過多種方式獲取網頁設計中用到的圖片，可以將現(xiàn)有的圖片掃描到計算機內、從Internet上的Web站點獲取以及通過制圖軟件自己動手制作。如果是“引用”的圖片，一定要得到圖片版權擁有者的同意才可使用。 在頁面中插入圖片的語法： ,替換文本說明,有時，由于網絡過忙或者用戶在圖片還沒有下載完全就點擊了瀏覽器的停止鍵，用戶不能在瀏覽器中看到圖片，這時替換文本說明就十分有必要了。替換文本說明應該簡潔而清晰，能為用戶提供足夠的圖片說明信息，在無法看到圖片的情況下也可以了解圖片的內容信息 。 例如： ,調整圖片大小,在HTML中，通過img標簽的屬性width和height來調整圖

14、片大小，其目的是通過指定圖片的高度和寬度加快圖片的下載速度。如果不設置width和height屬性，瀏覽器就要等到圖片下載完畢才顯示網頁，因此延緩了其它頁面元素的顯示。 例如：,設置背景圖片,背景屬性將背景設置為圖片。屬性值為圖片的URL。如果圖片尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。 例如： ,添加背景顏色,使用body標簽的bgcolor屬性可以給HTML頁面指明背景顏色。其值可以是16進制數(shù)、RGB值或者是顏色的名稱。 例如： ,HTML使用標簽來建立一個鏈接，通常標簽又稱為錨。一個超級鏈接可以指向任意一個Web上的資源（一個HTML頁面，一張圖片，一段聲音文件，一部電

15、影等）。 創(chuàng)建超級鏈接的基本語法格式： 這是要鏈接的站點(文字、圖片) 在和標簽之間的文本文字，用戶可以單擊該文字來實現(xiàn)網頁的瀏覽訪問。,六、超級鏈接,同一頁面內的書簽鏈接,當網頁的頁面較長，且該頁面是由幾個部分組成時，不得不拖動瀏覽器的滑動條查看信息，這樣既麻煩又費時。HTML恰好提供了跳轉功能，能夠非常方便、快捷地實現(xiàn)從網頁當前的部分跳轉到同一網頁的另一部分。 建立書簽語法： 鏈接內容 創(chuàng)建書簽鏈接語法： 鏈接標題,不同頁面間的書簽鏈接,書簽鏈接還可以在不同頁面間進行鏈接。當單擊書簽鏈接標題，頁面會根據(jù)鏈接中的href屬性所以定的地址，將網頁跳轉到目標地址中書簽名稱所表示的內容。 建立書簽

16、語法： 鏈接內容 創(chuàng)建書簽鏈接語法： 鏈接標題,超級鏈接路徑,超級鏈接標簽的屬性“href”定義了當前鏈接所指的目標地址，也就是超級鏈接路徑。在HTML中，主要提供了2種路徑：絕對路徑和相對路徑。,絕對路徑,絕對路徑就是主頁上的文件或目錄在硬盤上真正的路徑（URL和物理路徑）。例如，C:xyzindex.html代表了index.html文件的物理絕對路徑；,相對路徑,相對路徑就是相對與某個基準目錄的路徑。相對路徑適合于創(chuàng)建網站內部鏈接。它是以當前文件所在的路徑為起點，進行相對文件的查找。 1同一級目錄的文件鏈接 假設1.html路徑是：c:Inetpubwwwrootsites admin1

17、.html 假設2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件和2.html文件在同一個文件夾， 1.html文件鏈接到2.html文件，可以在1.html中寫成：同級目錄文件鏈接 2上級目錄的文件鏈接 假設1.html路徑是：c:Inetpubwwwrootsites 1.html 假設2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上一級目錄的文件，2.html文件鏈接到1.html文件，可以在2.html中寫成：1.html,相對路徑,假設1.html路徑

18、是：c:Inetpubwwwroot1.html 假設2.html路徑是：c:Inetpubwwwrootsites admin2.html 1.html文件是2.html文件的上兩級目錄中的文件，2.html文件鏈接到1.html文件，可以在2.html中寫成： 1.html 假設1.html路徑是：c:Inetpubwwwrootsitesadmin1.html 假設2.html路徑是：c:Inetpubwwwrootsites reg2.html 1.html文件和2.html分別在c:Inetpubwwwrootsites目錄下的admin和reg兩個文件夾內，1.html文件鏈接到2

19、.html文件，可以在1.html中寫成： 2.html,相對路徑,3下級目錄的文件鏈接 假設1.html路徑是：c:Inetpubwwwrootsites 1.html 假設2.html路徑是：c:Inetpubwwwrootsites admin2.html 2.html文件是1.html文件的下一級目錄的文件，1.html文件鏈接到2.html文件，可以在1.html中寫成： 2.html 假設1.html路徑是：c:Inetpubwwwrootsites 1.html 假設2.html路徑是：c:Inetpubwwwrootsites adminuser2.html 2.html文件是

20、1.html文件的下兩級目錄的文件，1.html文件鏈接到2.html文件，可以在1.html中寫成： 2.html,七、表格,主要內容： 表格的構成 設置表格背景 設置表格表頭 設置表格大小 設置表格數(shù)據(jù)對齊方式 cellspancing與cellpadding屬性 橫跨行和列 添加表格高級標簽 使用表格進行網頁布局,7.1 表格簡介,表格在網站開發(fā)中應用廣泛，幾乎多有的HTML頁面或多或少地采用了表格。表格可以靈活地控制頁面的排版，使整個頁面層次清晰。學好網頁制作，熟練掌握表格的各種屬性是很有必要的。,表格標記,基本標簽 : table定義一個表格 tr定義表格中的行 td定義表格中的數(shù)據(jù)

21、 基本語法： ,表格邊框,可以使用table標簽的border屬性為表格添加邊框并設置表格邊框寬度，表格的邊框按照數(shù)據(jù)單元將表格分割成單元格，邊框的寬度以像素為單位。 可以通過bordercolor屬性為邊框添加顏色，其顏色值可以是rgb(x,x,x)、16進制顏色值或代表顏色值的顏色名稱。,表格表頭,表頭是指表格的第一行或第一列對該列或該行的表格內容進行說明。表頭的文字樣式為居中、加粗顯示，通過標簽實現(xiàn)。 基本語法： ,7.2 表格背景,表格可以添加背景顏色和背景圖片，使用表格背景顏色或背景圖片必須使表格中的文本數(shù)據(jù)顏色與表格的背景顏色或背景圖片形成足夠的反差。否則，將不容易分辯表格中的文本

22、數(shù)據(jù)。,設置表格背景,可以使用bgcolor屬性設置表格的背景顏色，其值可以是rgb(x,x,x)、#xxxxxx或顏色名（colorname）。 例如： 或 ,設置表格單元背景,可以通過bgcolor屬性和background屬性為表格中的單元格添加背景顏色或背景圖片。,7.3 表格大小,設置表格大?。?如果需要表格在網頁中占用適當?shù)目臻g，可以通過width和height屬性指定像素值來設置表格的寬度和高度，也可以通過表格寬度占瀏覽器窗口的百分比來設置表格的大小。方法如下： 設置單元格大小： width屬性和height屬性不但可以設置表格的大小，還可以設置表格單元格的大小，為表格單元設置w

23、idth屬性或height，將影響整行或整列單元的大小。例如： 汽車名稱 價格范圍 級別 ,7.4 對齊方式,表格的對齊方式包括： 行數(shù)據(jù)水平對齊 單元格數(shù)據(jù)水平對齊 行數(shù)據(jù)垂直對齊 單元格數(shù)據(jù)垂直對齊 align屬性和valign屬性混合使用,設置表格對齊方式,使用align屬性設置表格在網頁中的對齊方式，在默認的情況下表格的對齊方式為左對齊。 設置方法為： 這里 align的值為left、center、right。將表格的對齊方式設置成右對齊，則表格的右邊框自動地向瀏覽器右邊框對齊。,設置表格數(shù)據(jù)對齊方式,1行數(shù)據(jù)水平對齊 使用align可以設置表格中數(shù)據(jù)的水平對齊方式，如果在標簽中使用a

24、lign屬性，將影響整行數(shù)據(jù)單元的水平對齊方式。align屬性的值可以是left、center、right，它的默認值為left。 2單元格數(shù)據(jù)水平對齊 如果在某個標簽中使用align屬性，那么align屬性將影響一個表格單元數(shù)據(jù)水平對齊方式。 3行數(shù)據(jù)垂直對齊 如果在標簽中使用valign屬性，那么valign屬性將影響整行數(shù)據(jù)單元的垂直對齊方式，這里的valign值可以是top、middle、bottom、baseline。它的默認值是middle。,設置表格數(shù)據(jù)對齊方式,4單元格數(shù)據(jù)垂直對齊 如果在某個標簽中使用valign屬性，那么valign只影響當前表格單元數(shù)據(jù)垂直對齊方式。 5a

25、lign屬性和valign屬性混合使用 align屬性和valign屬性除了上述用法外，有時在格式化表格單元數(shù)據(jù)時需要align屬性和valign屬性混合使用。,7.5 表格單元格的邊距,改變表格單元格間距離和單元格內的數(shù)據(jù)填充距離可以通過table標簽的cellspancing與cellpadding屬性實現(xiàn)。 cellspancing屬性用來添加表格單元格之間的間距（以像素為單位或表格寬度百分比）。 cellpadding屬性用來添加表格單元格內數(shù)據(jù)填充間距（以像素為單位或表格寬度百分比）。,7.6 橫跨行和列,橫跨列是指一個表格單元格橫跨多列；橫跨行是指一個表格單元格橫跨多個行。表格橫跨

26、行和列屬性，有時橫跨行和列又稱為合并單元格。 表格橫跨行和列屬性： colspan=“”指明該單元格應有多少列的跨度，在th和td標簽中使用。 rowspan=“”指明該單元格應有多少行的跨度，在th和td標簽中使用。,7.7 表格的高級標簽,使用表格的高級標簽可以為表格中相似的區(qū)域添加邊界，在表格標題上添加行或文本格式信息，定義表格的腳標等。 表格的高級標簽如下： thead定義表格的標題區(qū)域。 tbody定義表格的主題區(qū)域。 tfoot定義表格的腳標區(qū)域。 colgroup定義表格的列組。 col為表格中的一個或多個列定義屬性值。只能在表格或colgroup里使用這個元素。,7.8 使用表

27、格進行網頁布局,使用個非HTML時一常普遍的應用就是用HTML表格功能給網頁進行布局。下圖就是利用HTML表格對網頁進行布局的效果，此布局定義了兩個表格，上下各一個表格，將這兩個表格的border值設置為0。如果將border值設置為1，則很容易看出此頁面的表格布局。,八、表單,主要內容： 創(chuàng)建單行文本框 創(chuàng)建口令文本框 創(chuàng)建提交與復位按鈕 創(chuàng)建單選按鈕與復選按鈕 創(chuàng)建多行文本框 創(chuàng)建下拉框 上傳文件 處理表單 定義域集合 使用Tab鍵與快捷鍵,8.1 單行文本框,一個表單是一塊可以含有表單元素的區(qū)域，可以使用標簽在網頁中創(chuàng)建表單。 例如： ,8.2 口令文本框,在進行網上注冊的時候，用戶使用

28、的是提交用戶名和口令的表單?？诹钗谋究螂[藏了當前要填寫的內容，使信息更加保密。 例如： ,8.3 提交與復位按鈕,使用提交按鈕（submit）可以將填寫在文本框中的內容發(fā)送到服務器，復位按鈕（Reset）使表單文本框的內容返回初始值。 例如： ,8.4 單選按鈕與復選框按鈕,單選按鈕允許用戶從選擇列表中選擇一個單項的輸入字段類型。當type=“radio”是表示該輸入是一個單選按鈕。 復選按鈕允許用戶從選擇列表中選擇一個或多個選項的輸入字段類型。當type=“checkbox ”是表示該輸入是一個復選按鈕。,8.5 多行文本框,多行文本框是在表單中應用比較廣泛的文本輸入區(qū)域。多行文本框主要用于

29、得到用戶的評論和一些反饋信息，用戶可以在里面書寫文字，字數(shù)沒有限制。默認的字體是固定的。可以通過標簽創(chuàng)建多行文本。 textarea標簽的屬性： Cols指定文本區(qū)域的列數(shù)。 Row指定文本區(qū)域的行數(shù)。 Disabled第一次加載的時候文字區(qū)域不可用。 Readonly將文本區(qū)域的內容設置為不可修改（可選屬性）。 Name：指定文本區(qū)域的名稱（可選屬性）。,8.6 下拉框,如果一個列表選項過長，可以考慮使用下拉框。下拉框可以使用戶選擇其中的一個選項，在選擇列表中僅有一個是可選項，單擊右邊下拉按鈕便可進行選項的選擇。下拉框通過select標簽、option標簽來定義。 其屬性如下表 。,8.7

30、處理表單,通常情況下，用戶通過submit按鈕來提交表單，收集的信息發(fā)送到Web服務器上。這一過程通過HTML文檔中action屬性指定所收集的信息發(fā)送到哪里。如何處理信息，可以通過form標簽的特殊屬性實現(xiàn)。 處理表單的通用語法模式： ,8.8 定義域集合,在設計網頁時，如果表單中包含多個控件，可以通過標簽將相關主題的控件或標簽組合在一起（定義域集合），這樣使網頁中的表單分布更合理、結構更清晰，從而增加了網頁的易讀性；同時也有利于tab鍵在元素之間的移動。 在定義表單的域集合時，往往要用標簽為fieldset設置標題，還可以使用align屬性設置標題的對齊方式。 用戶信息 姓名： 年齡： 性

31、別： 籍貫： ,8.9 使用Tab鍵與快捷鍵,1. 使用Tab鍵 瀏覽者可以通過使用Tab鍵在表單的各個組件之間移動。默認情況下，Tab鍵的移動順序為順序移動?？梢酝ㄟ^tabindex屬性來實現(xiàn)。 例如： 姓名： 年齡： 性別： 籍貫： 2. 快捷鍵 可以通過accesskey屬性給HTML中的元素指定一個快捷方式，指定方法如下： ,九、多媒體,主要內容： 會滾動的文字 音樂 創(chuàng)建視頻,9.1 會滾動的文字,滾動文字可以增加文字的動態(tài)效果，引起瀏覽者的注意，豐富頁面的內容。,創(chuàng)建滾動文字標簽,使文字在網頁中動態(tài)地滾動好像只是flash的專利，其實則不然，可以通過HTML的同樣能夠達到文字在網頁

32、中移動的效果。但是只適用于Internet Explorer，并不是標準標簽，這里并不推薦使用這個擴展標簽。 例如： 這是會滾動的文字！,設置滾動文字的屬性,滾動文字的屬性用來控制文字的移動方向、滾動方式、文字滾動速度以及移動文字的外觀等多個屬性。常見的屬性有direction、scrollamount、align、bgcolor等。 1設置文字滾動的方向 可以通過direction屬性來設置文字滾動的方向，該屬性有l(wèi)eft、right屬性值，left為默認屬性值，在不設置direction屬性時文字的滾動順序為從右向左移動。 2設置滾動文字速度 與屬性用來控制滾動文字的速度。scrollam

33、ount屬性用來設置滾動過程中文字每次移動的像素數(shù)，當scrollamount取值較小時，文字滾動的較慢；反之文字滾動較快。scrolldelay屬性用來設置文字移動的延遲，以毫秒為單位。值越小，文字滾動的越快（文字滾動速度與計算機的處理能力有關）。,設置滾動文字的屬性,3設置滾動文字字幕區(qū)域 使用height和width屬性設置滾動文字字幕區(qū)域大小，在默認情況下，滾動文字字幕區(qū)域為整個IE瀏覽器屏幕。這兩個屬性值可以取絕對的像素數(shù)，也可以取相對的百分比。,9.2 背景音樂,為網頁添加背景音樂的方法一般有三種，第一種是通過普通的標簽來添加，一種是通過標簽來添加, 還有一種直接建立聲音的鏈接 。

34、,嵌入背景音樂,1. 標簽 Internet Explorer自帶了一個內置音頻解碼器，支持特殊的標簽，該標簽可以把聲音文件集成到文檔中，在后臺作為背景音樂播放。 基本語法： 2. 標簽 embed可以用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等等。 基本語法： 3. 建立聲音的鏈接 在設計網頁的時候可以創(chuàng)建一個背景音樂的鏈接，單擊網頁上的鏈接后，就會播出背景音樂。當建立聲音鏈接時，提倡使用萬維網上的音頻格式。建立聲音的鏈接方法如下： 點擊播放音樂春風 ,9.3 創(chuàng)建視頻,在網頁中創(chuàng)建視頻與創(chuàng)建音頻的方法基本相同，可以通過創(chuàng)建一個視頻的鏈接實現(xiàn)視頻在網頁中的加載。當

35、瀏覽者選中視頻連接時，瀏覽器將播放該視頻。如果瀏覽器不能播放該視頻格式，則會自動打開本地計算機上已安裝支持該格式的視頻播放器軟件。如果本地計算機上沒有安裝所需的視頻播放軟件，則瀏覽器會提示瀏覽者是否要保存該視頻文件到本地的計算機上。,創(chuàng)建內部視頻,1使用標簽創(chuàng)建視頻 所謂內部視頻就是視頻文件可以直接在網頁中播放?？梢酝ㄟ^標簽創(chuàng)建內部視頻。創(chuàng)建方法如下： 2使用標簽創(chuàng)建視頻 一些網頁設計者利用標簽的dynsrc屬性在網頁內部添加視頻文件。dynsrc屬性用來指定視頻文件所在位置。 例如：,11 CSS語法基礎,CSS意思就是疊層樣式表（Cascading Style Sheets），使用CSS的

36、優(yōu)點在于將格式從功能中分離出來。它定義了HTML元素的顯示，是一種對web文檔添加樣式的簡單機制。 主要內容： CSS定義 CSS語法 CSS類型 偽類與為元素,11.1 理解CSS,1基本語法 CSS規(guī)則由選擇器（selector）、屬性（property）和值（value）三部分組成。 基本格式如下： selector property : value 2組合 為了提高效率，可以將相同屬性和值賦給多個選擇器，并用逗號將選擇器分開。例如： h1,h2,h3,h4,h5,h6 color: blue ,11.1 理解CSS,3選擇器類 選擇器類可以將同一類型的HTML元素定義出不同的樣式。例如

37、： p.right text-align: right p.center text-align: center 居右顯示。 居中顯示。 4ID選擇器 可以使用id選擇器來定義HTML標簽的樣式。id選擇器可用“#”來定義。例如： p# idone text-align: center; color:blue或# idone text-align: center; color:blue,11.1 理解CSS,5關聯(lián)選擇器 可以為嵌入的其它標簽定義樣式，格式為： h3 em color:blue 指定了嵌套在標簽中的標簽所包含的內容字體顏色為藍色。具有這樣形式的選擇器稱為關聯(lián)選擇器（context

38、ual selector），兩個標簽之間用空格分隔（h3和em之間用空格隔開）。類似的還有： h3 b color:blue h2 em b color:blue,11.2 CSS類型,CSS按其位置不同主要分為以下三種類型： 行內樣式表（Inline Style Sheet） 內部樣式表（Intenal Style Sheet） 外部樣式表（Extenal Style Sheet）,行內樣式表,行內樣式是定義在HTML標簽里，只對所在的標簽有效。使用行內樣式就失去了樣式表的優(yōu)勢，將內容和形式相混淆了，一般這類方法在個別元素需要改變樣式時使用。 ,內部樣式表,內部樣式表是使用標簽在head區(qū)域

39、內定義樣式，內部樣式表只對所在的網頁有效，缺點是不利于多個網頁的維護。 例如： p.parghtext-align:center hr.linecolor:blue 內部樣式表 ,外部樣式表,外部樣式表可以集中控制和管理多個網頁的格式和布局，省去了對這些網頁的每個標簽都要分別進行格式化的麻煩。與內部樣式表不同，外部樣式表作為單獨的文件存儲。如果對外部樣式表進行修改，結果將影響到引用該樣式表的所有網頁。 引用方法：,多重樣式表,樣式表的優(yōu)先級依次是行內樣式表（Inline Style Sheet），內部樣式表（Intenal Style Sheet）外部樣式表（Extenal Style She

40、et），瀏覽器缺省（Browser Default）。 如果一些屬性被相同的選擇器設置成不同的樣式，值就會被更為具體的樣式所繼承，也就是按照樣式表的優(yōu)先級進行繼承。,11.3 偽類與偽元素,偽類是一種特殊的類選擇器，用來指定一個或者與其相關的選擇符的狀態(tài)。 偽類由四部分組成：選擇器（selector）、偽類（pseudo-class）、屬性（property）、值（value）。其語法結構如下： 選擇器:偽類 屬性: 值 selector:pseudo-class property: value 此外，CSS類還可以和偽類混合使用。格式如下： 選擇器.類:偽類 屬性: 值，例如：a.two:link color: #ff0000 selector.class:pseudo-class property: value,11.3 偽類與偽元素,偽元素的語法規(guī)則與偽類語法規(guī)則類似，偽元素用于為一個選擇器添加特殊效果。 其語法結構如下： 選擇器:偽元素 屬性: 值 selector:pseudo-element property: value 偽元素同樣可以與CSS類混合使用，其結構如下： 選擇器. 類: 偽元素 屬性: 值 selector.class:pseudo-element property: value,