第9網(wǎng)頁(yè)制作基礎(chǔ)學(xué)習(xí)HTML語(yǔ)言,掌握網(wǎng)頁(yè)制作的基礎(chǔ)技術(shù)。中山大學(xué)計(jì)算機(jī)科學(xué)系第網(wǎng)頁(yè)制作基礎(chǔ)學(xué)習(xí)HTML語(yǔ)言,掌握網(wǎng)頁(yè)制作的基礎(chǔ)技術(shù)。中山第九章網(wǎng)頁(yè)制作基礎(chǔ)概述網(wǎng)頁(yè)制作工具配置WEB服務(wù)器HTML制作基礎(chǔ)級(jí)聯(lián)樣式表（CSS）技術(shù)使用多媒體網(wǎng)頁(yè)布局技術(shù)中山大學(xué)計(jì)算機(jī)科學(xué)系第九章網(wǎng)頁(yè)制作基礎(chǔ)概述中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.1基本概念一、WebWeb是以HTML語(yǔ)言和HTTP協(xié)議為基礎(chǔ)、提供面向Internet服務(wù)、具有一致用戶界面的全球信息網(wǎng)絡(luò)，具有交互性、動(dòng)態(tài)性和多平臺(tái)等特性。Web訪問(wèn)流程：中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.1基本概念中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述二、HTTP協(xié)議超文本傳輸協(xié)議（HyperTextTransferProtocol，簡(jiǎn)稱HTTP）是Web瀏覽器和Web服務(wù)器用來(lái)交換信息的一種Internet協(xié)議，該協(xié)議允許用戶使用一個(gè)客戶端程序（如Web瀏覽器）通過(guò)URL在Web服務(wù)器上檢索文本、圖形、聲音等信息。三、超文本超文本（Hypertext）也是普通的文本，但是可以通過(guò)標(biāo)記控制文本的顯示格式，也可以嵌入鏈接、圖形和其他多媒體信息，因此超文本也常稱為超媒體（Hypermedia）。中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述二、HTTP協(xié)議中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述四、超鏈接超鏈接（(Hyperlink）是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接。五、HTML語(yǔ)言HTML是HyperTextMarkupLanguage的簡(jiǎn)稱，用來(lái)描述Web頁(yè)面。HTML通過(guò)在正文文本中嵌入各種標(biāo)記，使普通正文文本具有超文本的功能。HTML文件的擴(kuò)展名：“.htm”或“.html”生成方式：手工直接編寫自動(dòng)轉(zhuǎn)換由Web服務(wù)器上的程序動(dòng)態(tài)生成中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述四、超鏈接中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述六、DHTML語(yǔ)言動(dòng)態(tài)HTML（簡(jiǎn)稱DHTML）是一種即使在網(wǎng)頁(yè)下載到瀏覽器以后仍然能夠隨時(shí)變換的HTML。DHTML有3個(gè)主要特征，即動(dòng)態(tài)樣式、動(dòng)態(tài)內(nèi)容和動(dòng)態(tài)定位。動(dòng)態(tài)樣式是指改變網(wǎng)頁(yè)的外部顯示特征，動(dòng)態(tài)內(nèi)容是指更換顯示在頁(yè)面上的文本或圖像，而動(dòng)態(tài)定位是指移動(dòng)頁(yè)面上的文本和圖像DHTML技術(shù)：腳本語(yǔ)言（如JavaScript）、文檔對(duì)象模型（簡(jiǎn)稱DOM）和級(jí)聯(lián)樣式表（簡(jiǎn)稱CSS）等。中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述六、DHTML語(yǔ)言中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.2網(wǎng)頁(yè)制作步驟（1）收集、整理資料（2）規(guī)劃、創(chuàng)建站點(diǎn)（3）制作網(wǎng)頁(yè)(構(gòu)建頁(yè)面框架、導(dǎo)航條、返回首頁(yè)鏈接）（4）站點(diǎn)測(cè)試（5）站點(diǎn)的更新與維護(hù)中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.2網(wǎng)頁(yè)制作步驟中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.3網(wǎng)頁(yè)制作原則（1）整體規(guī)劃（2）站名有創(chuàng)意（3）主題鮮明（4）網(wǎng)頁(yè)通用（5）導(dǎo)航要明朗（6）動(dòng)畫(huà)不宜過(guò)多（7）圖像優(yōu)化（8）定期更新中山大學(xué)計(jì)算機(jī)科學(xué)系9.1概述9.1.3網(wǎng)頁(yè)制作原則中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具M(jìn)icrosoft公司的FrontPageMacromedia公司的網(wǎng)頁(yè)制作“三劍客”：Dreamweaver、Flash和Fireworks它們都提供了一個(gè)可用于創(chuàng)建、設(shè)計(jì)和編輯Web站點(diǎn)及其相應(yīng)頁(yè)面的“所見(jiàn)即所得”的制作環(huán)境。中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具9.2.1網(wǎng)頁(yè)制作方式HTML方式：使用純文本編輯器（如“記事本”）直接編寫頁(yè)面的HTML代碼?？梢暬绞剑菏褂每梢暬谱鞴ぞ吆铜h(huán)境（如FrontPage、Dreamweaver），以“所見(jiàn)即所得”的直觀方式設(shè)計(jì)頁(yè)面內(nèi)容，制作工具將自動(dòng)生成相應(yīng)的HTML代碼。兩種方式各有優(yōu)劣、相輔相成：先用可視化方式設(shè)計(jì)頁(yè)面布局和內(nèi)容，然后用HTML方式檢查、修改自動(dòng)生成的HTML代碼。中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具9.2.1網(wǎng)頁(yè)制作方式中山大學(xué)計(jì)算機(jī)科9.2網(wǎng)頁(yè)制作工具9.2.2FrontPage制作初步FrontPage2002工作界面中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具9.2.2FrontPage制作初步9.2網(wǎng)頁(yè)制作工具網(wǎng)頁(yè)創(chuàng)建示例例9.1制作一個(gè)如圖9.4所示的帶滾動(dòng)字幕“歡迎進(jìn)入網(wǎng)頁(yè)世界!”的簡(jiǎn)單頁(yè)面。中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具網(wǎng)頁(yè)創(chuàng)建示例中山大學(xué)計(jì)算9.2網(wǎng)頁(yè)制作工具創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn)就是創(chuàng)建一個(gè)文件夾，然后將有關(guān)文件放入這個(gè)文件夾中。例9.2使用FrontPage的“個(gè)人站點(diǎn)”模板創(chuàng)建一個(gè)“個(gè)人主頁(yè)”網(wǎng)站。中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具創(chuàng)建站點(diǎn)中山大學(xué)計(jì)算機(jī)科9.2網(wǎng)頁(yè)制作工具打開(kāi)網(wǎng)頁(yè)FrontPage可打開(kāi)當(dāng)前站點(diǎn)中的網(wǎng)頁(yè)或本地文件系統(tǒng)中任意位置的網(wǎng)頁(yè)文件，甚至打開(kāi)Web上的遠(yuǎn)程網(wǎng)頁(yè)例9.3使用FrontPage打開(kāi)微軟公司的主頁(yè)中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具打開(kāi)網(wǎng)頁(yè)中山大學(xué)計(jì)算機(jī)科9.2網(wǎng)頁(yè)制作工具9.2.3Dreamweaver制作初步采用Mac機(jī)浮動(dòng)面板的設(shè)計(jì)風(fēng)格Dreamweaver8.0工作界面中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具9.2.3Dreamweaver制作9.2網(wǎng)頁(yè)制作工具網(wǎng)頁(yè)創(chuàng)建示例例9.4制作一個(gè)含有翻轉(zhuǎn)圖片（即，當(dāng)鼠標(biāo)移到一張圖片時(shí)，原來(lái)的圖片切換為另一張圖片，鼠標(biāo)移開(kāi)后，又恢復(fù)為原圖片）的頁(yè)面。使用“屬性”面板格式化文字選擇菜單“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過(guò)圖像”命令，設(shè)計(jì)一個(gè)“鼠標(biāo)經(jīng)過(guò)圖像”中山大學(xué)計(jì)算機(jī)科學(xué)系9.2網(wǎng)頁(yè)制作工具網(wǎng)頁(yè)創(chuàng)建示例中山大學(xué)計(jì)算9.3配置Web服務(wù)器9.3.1安裝IIS5.1IIS是Windows平臺(tái)的Web服務(wù)器，支持Web服務(wù)、FTP服務(wù)、SMTP服務(wù)等功能。安裝步驟：“控制面板”→“添加或刪除程序”→“添加/刪除Windows組件”→選中“Internet信息服務(wù)(IIS)”選項(xiàng)驗(yàn)證：打開(kāi)IE，輸入localhost中山大學(xué)計(jì)算機(jī)科學(xué)系9.3配置Web服務(wù)器9.3.1安裝IIS5.1中山大9.3配置Web服務(wù)器9.3.2配置Web站點(diǎn)啟動(dòng)“Internet信息服務(wù)”管理程序：“控制面板”→“管理工具”→執(zhí)行快捷方式“Internet信息服務(wù)”查看本機(jī)默認(rèn)Web站點(diǎn)：“(本地計(jì)算機(jī))”→“網(wǎng)站”→“默認(rèn)網(wǎng)站”一、設(shè)置主目錄例9.5把“默認(rèn)網(wǎng)站”的主目錄設(shè)置為E:\MyWeb。中山大學(xué)計(jì)算機(jī)科學(xué)系9.3配置Web服務(wù)器9.3.2配置Web站點(diǎn)中山大學(xué)計(jì)9.3配置Web服務(wù)器二、創(chuàng)建虛擬目錄例9.6創(chuàng)建一個(gè)虛擬目錄Company，并把該目錄映射到物理目錄E:\Company(使用FrontPage的網(wǎng)站模板“公司展示向?qū)А痹谀夸汦:\Company下創(chuàng)建一個(gè)網(wǎng)站)。三、設(shè)置默認(rèn)文檔默認(rèn)文檔是指當(dāng)訪問(wèn)者沒(méi)有在其URL請(qǐng)求中指定文件名時(shí)，服務(wù)器將向訪問(wèn)者提供的文檔。例9.7創(chuàng)建一個(gè)虛擬目錄Test（映射到物理目錄E:\Test），默認(rèn)文檔設(shè)置為只有一個(gè)文檔名S0901.htm。中山大學(xué)計(jì)算機(jī)科學(xué)系9.3配置Web服務(wù)器二、創(chuàng)建虛擬目錄中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)網(wǎng)頁(yè)制作的本質(zhì)是編寫網(wǎng)頁(yè)的HTML代碼，因此必須熟悉HTML語(yǔ)言。在學(xué)習(xí)HTML語(yǔ)言的過(guò)程中，讀者沒(méi)有必要死記大量的HTML標(biāo)記。讀者要善于利用現(xiàn)有的專業(yè)化網(wǎng)頁(yè)制作工具（如FrontPage），根據(jù)設(shè)計(jì)意圖，先在網(wǎng)頁(yè)工具的可視化環(huán)境下設(shè)計(jì)頁(yè)面，然后看一看它自動(dòng)生成的HTML代碼，就可以逐漸熟悉、掌握HTML語(yǔ)言。中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.1HTML標(biāo)記一、HTML標(biāo)記的作用HTML標(biāo)記規(guī)定Web文檔的邏輯結(jié)構(gòu)，并且控制文檔的顯示格式二、HTML標(biāo)記的形式使用尖括號(hào)標(biāo)注標(biāo)記名，如<P>、</P>。分為：雙標(biāo)記：如<H1>HTML入門</H1>單標(biāo)記：如<BR>三、HTML標(biāo)記的屬性域如<HRsize="3"align="left"width="75%">中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.1HTML標(biāo)記中山大學(xué)計(jì)9.4HTML制作基礎(chǔ)9.4.2結(jié)構(gòu)標(biāo)記標(biāo)準(zhǔn)的HTML文檔包括5個(gè)結(jié)構(gòu)標(biāo)記，其嵌套和順序如例9.8所示。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML3.2//EN"><HTML><HEAD><TITLE>關(guān)于文檔結(jié)構(gòu)</TITLE></HEAD><BODY><P>精通文檔結(jié)構(gòu)</P></BODY></HTML>中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.2結(jié)構(gòu)標(biāo)記中山大學(xué)計(jì)算機(jī)9.4HTML制作基礎(chǔ)9.4.3常用標(biāo)記HTML頁(yè)面通常有標(biāo)題、段落、列表和水平線等元素，對(duì)這些頁(yè)面元素標(biāo)記的認(rèn)識(shí)是掌握HTML語(yǔ)言的起點(diǎn)。中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.3常用標(biāo)記中山大學(xué)計(jì)算機(jī)9.4HTML制作基礎(chǔ)標(biāo)題HTML提供6級(jí)標(biāo)題標(biāo)記，<H1>最大，<H2>次之，…，<H6>最小。例9.9設(shè)計(jì)一個(gè)含有1級(jí)標(biāo)題、3級(jí)標(biāo)題和6級(jí)標(biāo)題的頁(yè)面?；局谱鞣椒刂茦?biāo)記的大小寫<META>標(biāo)記：用于標(biāo)注可被瀏覽器、搜索引擎或制作工具使用的元信息。使用“Microsoft腳本編輯器幫助”查看HTML標(biāo)記中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)標(biāo)題中山大學(xué)計(jì)算機(jī)9.4HTML制作基礎(chǔ)段落段落標(biāo)記用于指定整段文本的格式例9.10制作幾種段落格式基本制作方法注釋標(biāo)記<!--…-->轉(zhuǎn)義字符“ ”、“<”、“>”中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)段落中山大學(xué)計(jì)算機(jī)9.4HTML制作基礎(chǔ)強(qiáng)制分行<BR>標(biāo)記指定分行，但不分段例9.11顯示一首詩(shī)中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)強(qiáng)制分行中山大學(xué)計(jì)9.4HTML制作基礎(chǔ)列表例9.12無(wú)序列表例9.13改變列表外觀例9.14使用定義列表給出HTML和IE的定義水平線例9.15使用水平線把章節(jié)名和章節(jié)內(nèi)容分隔開(kāi)來(lái)中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)列表中山大學(xué)計(jì)算機(jī)9.4HTML制作基礎(chǔ)字符級(jí)格式化字符級(jí)格式化用于對(duì)單個(gè)字符或單詞進(jìn)行強(qiáng)調(diào)。例9.16對(duì)段落中的一些文字進(jìn)行格式化<FONT>標(biāo)記<FONT>標(biāo)記用于指定文本的字體特性，如顏色、大小和字體。例9.17使用<FONT>設(shè)置字體中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)字符級(jí)格式化中山大9.4HTML制作基礎(chǔ)9.4.4使用超鏈接超鏈接標(biāo)記的基本形式是：<Ahref="URL">…</A>其中，href屬性指定的URL用于標(biāo)識(shí)Web上文件的位置，這些地址可能指向某個(gè)HTML文檔，也可能指向文檔引用的其他元素，如圖形、小程序、腳本和其他類型的文件。中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.4使用超鏈接中山大學(xué)計(jì)算9.4HTML制作基礎(chǔ)文本鏈接鏈接的文本允許在一個(gè)單詞或短語(yǔ)上單擊從而跳到另一個(gè)文件。例9.18在文字“千禧年”上建立了一個(gè)到頁(yè)面year2k.htm的超鏈接FrontPage制作方法圖形鏈接鏈接的圖形也允許在一個(gè)圖片上單擊而跳到另一個(gè)文件。例9.19在圖形上建立了一個(gè)到頁(yè)面year2k.htm的超鏈接中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)文本鏈接中山大學(xué)計(jì)9.4HTML制作基礎(chǔ)錨點(diǎn)鏈接定義錨點(diǎn)，如：<aname="location">這里是一個(gè)錨點(diǎn)</a>鏈接錨點(diǎn)，如：<ahref="#location">鏈接錨點(diǎn)location</a>例9.20錨點(diǎn)定義及鏈接FrontPage方法中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)錨點(diǎn)鏈接中山大學(xué)計(jì)9.4HTML制作基礎(chǔ)URL的形式在鏈接中，既可以使用絕對(duì)URL（包括協(xié)議名、主機(jī)名），也可以使用相對(duì)URL（不包括協(xié)議名、主機(jī)名），另外也可以使用錨點(diǎn)。中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)URL的形式中山9.4HTML制作基礎(chǔ)9.4.5通過(guò)<BODY>標(biāo)記設(shè)置顏色一、設(shè)置背景顏色背景色是填充整個(gè)瀏覽器窗口的顏色，如：<BODYbgcolor="#C0C0C0">二、設(shè)置文本顏色例如，以下代碼把正文設(shè)置為黑色，把鏈接設(shè)置為藍(lán)色，把已訪問(wèn)的鏈接設(shè)置為藍(lán)色，而把活動(dòng)鏈接設(shè)置為紅色：<BODYtext="#FFFFFF"link="#0000FF"alink="#000099"vlink="#FF0000">中山大學(xué)計(jì)算機(jī)科學(xué)系9.4HTML制作基礎(chǔ)9.4.5通過(guò)<BODY>標(biāo)記設(shè)9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.1CSS簡(jiǎn)介級(jí)聯(lián)樣式表（簡(jiǎn)稱CSS）技術(shù)是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)技術(shù)，CSS使用樣式定義頁(yè)面元素的顯示方式和位置，以擴(kuò)展HTML的功能。CSS樣式可以作用于一個(gè)元素，也可以作用于具有指定HTML標(biāo)記的所有元素，另外也可以作用于一組分配有指定class屬性或id屬性的元素。例9.21使用CSS技術(shù)設(shè)計(jì)一個(gè)含有2個(gè)<P>段落的頁(yè)面，其所有文字的字形為“傾斜”。FrontPage方法<STYLE>標(biāo)記中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.1CSS簡(jiǎn)介中山大9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.2樣式定義樣式定義的格式基本格式：selector{property1:value1;property2:value2;…}每個(gè)樣式定義都包含一個(gè)選擇器，其后是該選擇器的屬性和值，如：H1{font-size:large;color:green}H2{font-size:small;color:blue}也可以在一個(gè)樣式定義中指定多個(gè)選擇器，如：H1,H2,H3{color:red}中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.2樣式定義中山大學(xué)9.5級(jí)聯(lián)樣式表（CSS）技術(shù)選擇器的分類選擇器分為HTML標(biāo)記、具有上下文關(guān)系的HTML標(biāo)記、類、ID和虛類。一、HTML標(biāo)記選擇器HTML標(biāo)記是最典型的選擇器，為HTML標(biāo)記定義的樣式將改變它的默認(rèn)顯示格式。二、具有上下文關(guān)系的HTML標(biāo)記選擇器為位于某個(gè)標(biāo)記內(nèi)的標(biāo)記設(shè)置特定的樣式。如：ADDRESSI{color:red}中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)選擇器的分類9.5級(jí)聯(lián)樣式表（CSS）技術(shù)三、類選擇器類選擇器形式：.classname{property:value;…}例如：.web_name{font-style:italic;font-weight:bold}效果：引用該類的標(biāo)記將采用所定義的樣式例9.22使用類選擇器控制頁(yè)面中單詞“Web”的顯示樣式為“傾斜、加粗”中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)三、類選擇器中山大學(xué)計(jì)算機(jī)科9.5級(jí)聯(lián)樣式表（CSS）技術(shù)四、ID選擇器HTML標(biāo)記可以有ID屬性，其作用在于為頁(yè)面元素指定一個(gè)ID選擇符。ID選擇器樣式的定義格式：#IDname{property:value;…}如：#web_name{font-style:italic;font-weight:bold}例9.23使用ID選擇器控制頁(yè)面首次出現(xiàn)的術(shù)語(yǔ)“級(jí)聯(lián)樣式表(CSS)”顯示樣式為“傾斜、加粗、大字體”。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)四、ID選擇器中山大學(xué)計(jì)算機(jī)9.5級(jí)聯(lián)樣式表（CSS）技術(shù)五、虛類選擇器對(duì)于<A>標(biāo)記，可以使用虛類的方式設(shè)置不同類型鏈接的顯示方式，如表9-10所示。例9.24使用虛類選擇器除去頁(yè)面中超鏈接的下劃線，其瀏覽效果如圖9.39所示。屬性“text-decoration:none”指明文本沒(méi)有修飾，當(dāng)然也就沒(méi)有下劃線了。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)五、虛類選擇器中山大學(xué)計(jì)算機(jī)9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.3使用樣式使用CSS樣式有三種方式，即：嵌入樣式表、鏈接外部樣式表和內(nèi)嵌樣式。嵌入樣式表使用<STYLE>標(biāo)記把一個(gè)或多個(gè)CSS樣式定義在HTML文檔的<HEAD>標(biāo)記之間。在嵌入樣式表中定義的CSS樣式作用于當(dāng)前頁(yè)面的有關(guān)元素。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.3使用樣式中山大學(xué)9.5級(jí)聯(lián)樣式表（CSS）技術(shù)鏈接外部樣式表定義外部樣式表：把CSS樣式定義寫入一個(gè)以.css為擴(kuò)展名的文本文件中使用方法：在<HEAD>部分加入以下代碼：<linkrel="stylesheet"type="text/css"href="mystyle.css">鏈接外部樣式表的好處在于一個(gè)外部樣式表可以控制多個(gè)頁(yè)面的顯示外觀，從而確保這些頁(yè)面外觀的一致性。例9.25設(shè)計(jì)多個(gè)頁(yè)面，要求這些頁(yè)面中所有大學(xué)名稱的顯示樣式為“加粗”，并且所有超鏈接沒(méi)有下劃線。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)鏈接外部樣式9.5級(jí)聯(lián)樣式表（CSS）技術(shù)內(nèi)嵌樣式直接為某個(gè)頁(yè)面元素的HTML標(biāo)記的style屬性指定的樣式就是內(nèi)嵌樣式，該樣式只作用于這個(gè)元素。例如：<Pstyle="font-size:large;color:red">Hello</P>例9.26使用內(nèi)嵌樣式設(shè)計(jì)一個(gè)頁(yè)面，要求頁(yè)面中大學(xué)名稱的顯示樣式為“加粗”，并且超鏈接沒(méi)有下劃線。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)內(nèi)嵌樣式中山9.5級(jí)聯(lián)樣式表（CSS）技術(shù)CSS樣式的優(yōu)先級(jí)CSS樣式是“級(jí)聯(lián)”的，即全局樣式規(guī)則會(huì)一直應(yīng)用于HTML元素，直到有局部樣式將其取代為止。局部樣式的優(yōu)先級(jí)高于全局樣式。在局部樣式應(yīng)用于頁(yè)面元素之后，全局樣式中不與局部樣式?jīng)_突的部分繼續(xù)應(yīng)用于這些元素。例9.27設(shè)計(jì)一個(gè)頁(yè)面，要求頁(yè)面中超鏈接的顯示字體為“隸書(shū)”，沒(méi)有下劃線，但其中一個(gè)超鏈接有下劃線。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)CSS樣式的9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.4CSS屬性CSS屬性簡(jiǎn)介級(jí)聯(lián)樣式表（CSS）技術(shù)的核心是大量的CSS屬性，這些屬性大致分為以下幾類：字體屬性、文本屬性、顏色和背景屬性、容器屬性、列表屬性、鼠標(biāo)屬性、定位和顯示屬性以及CSS濾鏡屬性等。關(guān)于CSS屬性的詳細(xì)描述也可從Microsoft腳本編輯器幫助系統(tǒng)中查找到。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)9.5.4CSS屬性中山大9.5級(jí)聯(lián)樣式表（CSS）技術(shù)在使用CSS屬性時(shí)，有必要了解如何指定長(zhǎng)度單位和顏色值。長(zhǎng)度單位可以用絕對(duì)單位，也可以用相對(duì)單位。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)在使用CSS屬性時(shí)，有必要了9.5級(jí)聯(lián)樣式表（CSS）技術(shù)顏色值可以使用表9-13所列的任何一種方式為CSS屬性指定顏色值。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)顏色值中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)CSS濾鏡濾鏡是CSS的一種擴(kuò)充，能夠?qū)⑻囟ǖ男Чㄈ珀幱靶Ч⒛：Ч?、翻轉(zhuǎn)效果等）應(yīng)用于文本、圖片或其他對(duì)象。使用filter屬性定義濾鏡效果，格式如下：filter:濾鏡名稱（參數(shù)）例如：IMG{filter:alpha(Opacity=80)}IMG{filter:alpha(Opacity=50)flipV()}例9.28設(shè)計(jì)含有一幅圖像的頁(yè)面，要求圖像垂直翻轉(zhuǎn)，并且半透明。中山大學(xué)計(jì)算機(jī)科學(xué)系9.5級(jí)聯(lián)樣式表（CSS）技術(shù)CSS濾鏡中9.6使用多媒體除圖片之外，HTML頁(yè)面也可以使用多種標(biāo)記添加音頻、視頻、動(dòng)畫(huà)等多媒體信息。9.6.1網(wǎng)頁(yè)的背景聲音使用<BGSOUND>標(biāo)記為網(wǎng)頁(yè)配置背景聲音。例9.29設(shè)計(jì)一個(gè)只播放音樂(lè)的空白頁(yè)面。<BGSOUNDsrc="S0929.mid"loop="-1">中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.2插入視頻<IMG>標(biāo)記可以使用dynsrc屬性為頁(yè)面引入視頻例9.30為頁(yè)面添加一個(gè)循環(huán)播放10次的視頻：<IMGborder="0"dynsrc="S0930.AVI">中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.2插入視頻中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.3插件插件標(biāo)記<EMBED>用于插入音頻或視頻等多媒體文件。要正確解釋這種標(biāo)記，瀏覽器必須安裝播放相應(yīng)多媒體文件的插件程序。例9.31為頁(yè)面添加了一個(gè)訪問(wèn)者可以控制是否播放的音頻插件<EMBEDsrc="Momo.mp3"autostart="false">Web瀏覽器將根據(jù)<EMBED>標(biāo)記的src屬性所指定的文件擴(kuò)展名來(lái)調(diào)用相應(yīng)的瀏覽器插件程序中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.3插件中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.4ActiveX控件ActiveX控件是Windows操作系統(tǒng)所支持的特殊軟件組件HTML使用<OBJECT>標(biāo)記為網(wǎng)頁(yè)添加ActiveX控件，以擴(kuò)展HTML的功能使用ActiveX控件也可以為網(wǎng)頁(yè)添加特殊格式的圖像、音頻、視頻、動(dòng)畫(huà)等多媒體信息。例9.32為頁(yè)面添加一個(gè)由WindowsMediaPlayer控件播放的視頻文件中山大學(xué)計(jì)算機(jī)科學(xué)系9.6使用多媒體9.6.4ActiveX控件中山大學(xué)計(jì)9.7網(wǎng)頁(yè)布局技術(shù)布局頁(yè)面時(shí)通常采用以下三種技術(shù)：表格布局、框架布局和層布局。9.7.1表格布局表格布局是最常用的一種頁(yè)面布局技術(shù)，大部分網(wǎng)頁(yè)都采用表格作為基本的布局技術(shù)。表格布局的基本思想是使用表格將一個(gè)網(wǎng)頁(yè)分隔成多個(gè)互不重疊的