網(wǎng)頁(yè)設(shè)計(jì)概論

網(wǎng)頁(yè)設(shè)計(jì)概論第1頁(yè)，共82頁(yè)，2023年，2月20日，星期二本章主要內(nèi)容網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的多媒體技術(shù)HTML基礎(chǔ)第2頁(yè)，共82頁(yè)，2023年，2月20日，星期二1.1網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)1.1.1Internet與Web1.1.2網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)1.1.3網(wǎng)站分類與賞析1.1.4網(wǎng)頁(yè)色彩與布局第3頁(yè)，共82頁(yè)，2023年，2月20日，星期二Internet與WWWInternet又稱國(guó)際互聯(lián)網(wǎng)，是一個(gè)把分布于世界各地不同結(jié)構(gòu)的計(jì)算機(jī)網(wǎng)絡(luò)通過(guò)各種傳輸介質(zhì)互相連接起來(lái)的網(wǎng)絡(luò)。Internet上的信息資源極為豐富，分為信息資源和服務(wù)資源兩類。它的主要功能包括：網(wǎng)上信息查詢、網(wǎng)上交流、電子郵件、文件傳輸和遠(yuǎn)程登錄。第4頁(yè)，共82頁(yè)，2023年，2月20日，星期二WWW與瀏覽器WorldWideWeb簡(jiǎn)稱WWW或Web

基礎(chǔ)：超文本標(biāo)記語(yǔ)言（HypertextMarkupLanguage,HTML）與超文本傳輸協(xié)議（HypertextTransferProtocol，HTTP）服務(wù)：提供Internet信息查詢服務(wù)的瀏覽系統(tǒng)。

Web采用客戶機(jī)/服務(wù)器工作模式所有的客戶端和Web服務(wù)器統(tǒng)一使用TCP/IP協(xié)議，統(tǒng)一分配IP地址，使得客戶端和服務(wù)器的邏輯連接變成簡(jiǎn)單的點(diǎn)對(duì)點(diǎn)連接。在WWW工作過(guò)程中，用戶所使用的本地計(jì)算機(jī)是運(yùn)行Web客戶程序的客戶機(jī)，通過(guò)Internet訪問(wèn)分布在世界各地的Web服務(wù)器。用戶瀏覽Web上的信息需要使用Web瀏覽器。第5頁(yè)，共82頁(yè)，2023年，2月20日，星期二WWW與瀏覽器第6頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)（1）網(wǎng)頁(yè)（WebPage），也稱為Web頁(yè)，是用戶通過(guò)瀏覽器在Internet中看到的頁(yè)面。網(wǎng)頁(yè)：由HTML語(yǔ)言（超文本標(biāo)記語(yǔ)言）編寫的集文本、圖片、聲音和動(dòng)畫等信息元素為一體的頁(yè)面文件。第7頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)（2）網(wǎng)頁(yè)（WebPage），也稱為Web頁(yè)，是用戶通過(guò)瀏覽器在Internet中看到的頁(yè)面。網(wǎng)頁(yè)：由HTML語(yǔ)言（超文本標(biāo)記語(yǔ)言）編寫的集文本、圖片、聲音和動(dòng)畫等信息元素為一體的頁(yè)面文件。Web網(wǎng)頁(yè)采用超文本格式。它包含有文本、圖像、聲音、視頻；還含有指向其他Web頁(yè)或頁(yè)面本身某特定位置的超鏈接；網(wǎng)頁(yè)的元素還包括動(dòng)畫、表單、程序

第8頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)（3）從文件角度講，網(wǎng)頁(yè)通常是一種由HTML語(yǔ)言編寫的文本文件，網(wǎng)頁(yè)文件又稱HTML文件，其擴(kuò)展名為.html或htm。在瀏覽器中選擇【查看】→【源文件】命令，即可打開一個(gè)網(wǎng)頁(yè)文件并看到網(wǎng)頁(yè)的源代碼。第9頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)（4）編輯網(wǎng)頁(yè)的操作步驟如下：選擇【開始】→【程序】→【附件】→【記事本】命令，啟動(dòng)“記事本”程序。在記事本中輸入HTML代碼保存文件。雙擊文件圖標(biāo)，即可打開該文件，看到所示的頁(yè)面。第10頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)站（Website）又稱為站點(diǎn)或Web站點(diǎn)。網(wǎng)站是指根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合網(wǎng)頁(yè)、網(wǎng)站與主頁(yè)（5）主頁(yè)是進(jìn)入網(wǎng)站的門戶，是整個(gè)網(wǎng)站的第一頁(yè)。一般命名為index.html文件。主頁(yè)上通常會(huì)有整個(gè)網(wǎng)站的導(dǎo)航目錄，所以主頁(yè)也是一個(gè)網(wǎng)站的入口或者說(shuō)主目錄。第11頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)站分類與賞析1．門戶類網(wǎng)站網(wǎng)址：2．企業(yè)信息類網(wǎng)站網(wǎng)址：3．教育類網(wǎng)站網(wǎng)址：4．產(chǎn)品信息類網(wǎng)址：第12頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)色彩與布局網(wǎng)頁(yè)色彩的應(yīng)用“中國(guó)瓷器”網(wǎng)站“北美工藝品展”“多媒體設(shè)計(jì)”網(wǎng)站http://第13頁(yè)，共82頁(yè)，2023年，2月20日，星期二網(wǎng)頁(yè)布局的基本概念頁(yè)面尺寸：網(wǎng)頁(yè)的尺寸和顯示器大小及分辨率有關(guān)。分辨率為1024768，頁(yè)面的顯示尺寸為1007600像素；分辨率為800600，頁(yè)面的顯示尺寸為780428像素；分辨率為640480，頁(yè)面的顯示尺寸為620311像素。網(wǎng)頁(yè)布局第14頁(yè)，共82頁(yè)，2023年，2月20日，星期二頁(yè)面布局類型國(guó)字型也稱為“同”字型或“口”字型，。拐角型去掉“國(guó)”字型布局的最右邊的部。?！叭弊中陀址Q為上中下型，是一種簡(jiǎn)潔明快的藝術(shù)性網(wǎng)頁(yè)布局。/?！按ā弊中?///。封面型也稱為“POP”型。/。Flash型第15頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2多媒體素材基礎(chǔ)

1.2.1顏色的基本概念1.2.2圖像的色彩模式1.2.3圖像的基本屬性1.2.4圖像文件的格式1.2.5計(jì)算機(jī)動(dòng)畫概述第16頁(yè)，共82頁(yè)，2023年，2月20日，星期二1.2.1顏色的基本概念1．顏色的三要素亮度指顏色的明暗程度，是光作用于人眼時(shí)所引起的明亮程度的感覺，它與被觀察物體表面的光線反光系數(shù)有關(guān)。色相（或色調(diào)）是指顏色的相貌，是人眼看到的一種或多種波長(zhǎng)的光時(shí)所產(chǎn)生的彩色感覺，它反映顏色的種類和基本特性。飽和度也常稱為純度或彩度。是色彩的鮮艷度或深淺程度，是由顏色摻入白色光的程度決定的。第17頁(yè)，共82頁(yè)，2023年，2月20日，星期二1.2.1顏色的基本概念2．三基色原理三基色，它們相互獨(dú)立，其中任意色均不能由其他兩色混合產(chǎn)生。自然界常見的各種彩色光，都可由三種顏色相互獨(dú)立的光組成。有兩種基色系統(tǒng)，一種是加色系統(tǒng)，其三基色是紅（Red）、綠（Green）、藍(lán)（Blue），另一種是減色系統(tǒng)，其三基色是青色（Cyan）、品紅（Magenta）和黃色（Yellow）。不同比例的三基色光相加得到的彩色稱為加色混合。其規(guī)律如下：紅色+綠色=黃色紅色+藍(lán)色=品紅綠色+藍(lán)色＝青色紅色+綠色+藍(lán)色＝白色第18頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.2圖像的色彩模式

色彩模式是指在計(jì)算機(jī)上打印或顯示圖像時(shí)表示顏色的數(shù)字方法1．灰度模式該模式只有灰度色（圖像的亮度），沒有彩色。在灰度色圖像中，每個(gè)像素都以8位或16位表示，取值范圍在0（黑色）～255（白色）之間。第19頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.2圖像的色彩模式

2．RGB模式RGB模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，通過(guò)對(duì)紅、綠、藍(lán)三個(gè)顏色通道的變化以及它們之間的相互疊加來(lái)得到各式各樣的顏色。這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前應(yīng)用最廣的顏色模式之一。網(wǎng)頁(yè)制作中使用最廣泛的是RGB色彩模式的十六進(jìn)制顯示模式。即用3個(gè)00～FF的十六進(jìn)制數(shù)來(lái)表示組成顏色的紅、綠、藍(lán)色的數(shù)值。例如：000000表示黑色，F(xiàn)FFFFF表示白色，F(xiàn)F0000表示紅色，0000FF表示藍(lán)色，總共有224種顏色。第20頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.2圖像的色彩模式

3．CMY模式計(jì)算機(jī)屏幕顯示彩色圖像時(shí)采用的是RGB模式，而在打印時(shí)一般需要轉(zhuǎn)換為CMY模式。CMY模式是使用青色（Cyan）、品紅（Magenta）、黃色（yellow）3

種基本顏色按一定比例合成色彩的方法。CMY采用相減混色模型。注意：等量的CMY混合后并不能產(chǎn)生完備的黑色或灰色。因此，在印刷時(shí)常加一種真正的黑色（Black），這樣CMY模式又稱為CMYK模式。CMYK色彩不如RGB色豐富飽滿，在Photoshop中會(huì)導(dǎo)致運(yùn)行速度比采用RGB色慢或部分功能無(wú)法使用。第21頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.2圖像的色彩模式

4．HSB模式

HSB模式是基于人類感覺顏色的方式建立起來(lái)的，對(duì)于人的眼睛來(lái)說(shuō)，能分辨出來(lái)的是顏色的色相、飽和度和亮度，而不是RGB模式中各基色所占的比例。HSB顏色就是根據(jù)人類對(duì)顏色分辨的直觀方法，將自然界的顏色看作由色相（Hue）、飽和度（Saturation）、亮度（Brightness）組成。5．Lab模式

Lab顏色模式通過(guò)A、B兩個(gè)色調(diào)參數(shù)和一個(gè)光強(qiáng)度來(lái)控制色彩，A、B兩個(gè)色調(diào)可以通過(guò)-128~+128之間的數(shù)值變化來(lái)調(diào)整色相，其中A色調(diào)為由綠到紅的光譜變化，B色調(diào)為由藍(lán)到黃的光譜變化，光強(qiáng)度可以在0～100數(shù)值范圍內(nèi)調(diào)節(jié)。第22頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.2圖像的色彩模式

6．安全色圖像在網(wǎng)絡(luò)發(fā)布時(shí)，色彩的顯示可能會(huì)受到瀏覽器端的操作系統(tǒng)和瀏覽器的影響，同一種顏色也會(huì)在不同的瀏覽器中顯示出不同的亮度或者色相。我們把在不同操作系統(tǒng)和瀏覽器中顯示效果一致的216中顏色稱為網(wǎng)絡(luò)安全色。辨別一種顏色是否是網(wǎng)絡(luò)安全色的方法是看其顏色值，任何由00、33、66、99、CC或者FF組合而成的顏色都是Web安全色。例如：003366、0066FF等。通常在Photoshop中顏色拾取框中可以直接選取的顏色都是Web安全色。第23頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.3圖像的基本屬性

1．圖形與圖像數(shù)字圖像的種類有兩種：圖形和圖像圖形又稱矢量圖形、幾何圖形或矢量圖，是經(jīng)過(guò)計(jì)算機(jī)運(yùn)算而形成的抽象化結(jié)果，由具有方向和長(zhǎng)度的矢量線段構(gòu)成。計(jì)算機(jī)在顯示圖形時(shí)從文件中讀取指令并轉(zhuǎn)化為屏幕上顯示的圖形效果。第24頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.3圖像的基本屬性

1．圖形與圖像圖像又稱點(diǎn)陣圖像或位圖圖像，是指在空間和亮度上已離散化的圖像。一幅圖劃分為M行×N列，行與列的交叉處為一個(gè)像素，每個(gè)像素點(diǎn)用若干個(gè)二進(jìn)制位表示該像素的顏色和亮度，因此，在計(jì)算機(jī)中對(duì)應(yīng)于該像素點(diǎn)的值是它的亮度或顏色等級(jí)，像素的顏色等級(jí)越多則圖像越逼真

位圖圖像及其放大后的效果

第25頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.3圖像的基本屬性

2．圖像分辨率分辨率是用于度量圖像單位長(zhǎng)度數(shù)據(jù)量的參數(shù)，其高低直接影響圖像的質(zhì)量。分辨率通常表示為ppi（pixelperinch，像素/英寸）和dpi（dotperinch，點(diǎn)/每英寸）。計(jì)算機(jī)顯示領(lǐng)域用ppi度量分辨率，而dpi用于打印、印刷領(lǐng)域等。第26頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.3圖像的基本屬性

顯示分辨率顯示分辨率是指數(shù)字化的圖像經(jīng)過(guò)計(jì)算機(jī)顯示系統(tǒng)，如顯示卡、顯示器描述時(shí)，屏幕呈現(xiàn)出橫向和縱向像素的個(gè)數(shù)。單位是ppi，其值是橫向像素×縱向像素。常見的標(biāo)準(zhǔn)顯示分辨率有800×600像素、1024×768像素、1280×1024像素等。掃描分辨率掃描分辨率是指每英寸掃描到的點(diǎn)，單位是dpi。它表示一臺(tái)掃描儀輸入圖像的細(xì)膩程度，數(shù)值越大掃描的圖像轉(zhuǎn)化位數(shù)字圖像越逼真，掃描儀的質(zhì)量越高。打印分辨率打印分辨率是打印機(jī)輸出圖像時(shí)采用的分辨率，單位是dpi。同一臺(tái)打印機(jī)可以使用不同的打印分辨率，打印分辨率越高，圖像輸出質(zhì)量越好。第27頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.4圖像文件的格式

1．BMP格式BMP（Bitmap）是Microsoft公司為其Windows系列操作系統(tǒng)設(shè)置的標(biāo)準(zhǔn)圖像文件格式。BMP文件格式具有以下特點(diǎn)：每個(gè)文件存放一幅圖像，可以多種顏色深度保存圖像(如16色、256色、24位真彩色模式)。BMP文件可以使用行程長(zhǎng)度編碼（RLC）進(jìn)行無(wú)損壓縮，也可不壓縮。不壓縮的BMP文件是一種通用的圖像文件格式，幾乎所有Windows應(yīng)用軟件都能支持，但文件較大。第28頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.4圖像文件的格式

2．GIF格式GIF（GraphicsInterchangeFormat）格式文件為網(wǎng)絡(luò)傳輸和BBS用戶使用圖像文件提供方便。目前，大多數(shù)圖像軟件都支持GIF文件格式，它特別適合于動(dòng)畫制作、網(wǎng)頁(yè)制作以及演示文稿制作等領(lǐng)域。GIF文件格式具有以下特點(diǎn)：采用無(wú)損壓縮的方式，產(chǎn)生的文件很小，下載速度快，但最多只支持256種顏色。第29頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.4圖像文件的格式

3．JPEG格式JPEG（JointPhotographicExpertsGroup）格式文件用有損壓縮方式去除冗余的圖像和彩色數(shù)據(jù)，在獲得極高壓縮率的同時(shí)能展現(xiàn)十分豐富和生動(dòng)的圖像，換句話說(shuō)，就是可以用最少的磁盤空間得到較好的圖像質(zhì)量。因此，JPEG文件格式適用于在Internet上傳輸圖像。4．TIF格式由Aldus和Microsoft公司聯(lián)合開發(fā)的，最初用于掃描和桌面出版業(yè)，是一種工業(yè)標(biāo)準(zhǔn)格式。它被許多圖形圖像軟件所支持。文件有壓縮和非壓縮兩種形式，非壓縮的TIF文件可獨(dú)立于軟件和硬件環(huán)境。第30頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.4圖像文件的格式

5．PNG格式的圖像文件PNG（PortableNetworkGraphic）圖像是網(wǎng)絡(luò)傳輸中的一種無(wú)損壓縮圖像文件格式，可以保存灰度模式、索引顏色模式、圖層、幀等圖像信息，在大多數(shù)情況下，它的壓縮比大于GIF格式圖像，利用Alphs通道可以調(diào)節(jié)圖像的透明度，可提供16位灰度圖像和48位真彩色圖像。6．PSD格式的圖像文件PSD圖像是著名的圖像處理軟件Photoshop中使用的一種標(biāo)準(zhǔn)圖像格式文件，可以不同圖層分別存儲(chǔ)，從而能夠保存圖像處理的每一個(gè)細(xì)節(jié)部分，便于圖像的編輯和再處理。第31頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.5計(jì)算機(jī)動(dòng)畫概述

分類根據(jù)動(dòng)畫的性質(zhì)和運(yùn)動(dòng)方式，計(jì)算機(jī)動(dòng)畫可分為，逐幀動(dòng)畫（又稱幀動(dòng)畫）、實(shí)時(shí)動(dòng)畫（又稱算法動(dòng)畫）和矢量動(dòng)畫。按照動(dòng)畫的表現(xiàn)形式分類，可以分為二維動(dòng)畫、三維動(dòng)畫和變形動(dòng)畫3大類。逐幀動(dòng)畫是指構(gòu)成動(dòng)畫的基本單位是幀，許多幀組成一幅動(dòng)畫。逐幀動(dòng)畫借鑒傳統(tǒng)動(dòng)畫的概念，每幀的內(nèi)容不同，當(dāng)連續(xù)播放時(shí)，通過(guò)一幀一幀顯示動(dòng)畫的圖像序列形成動(dòng)畫視覺效果。逐幀動(dòng)畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。逐幀動(dòng)畫主要用在傳統(tǒng)動(dòng)畫片的制作、網(wǎng)頁(yè)的制作、以及電影特技的制作方面。第32頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.6音頻與視頻基礎(chǔ)

常見的音頻文件格式聲音文件又稱為音頻文件，用來(lái)記錄自然聲和計(jì)算機(jī)等電子設(shè)備產(chǎn)生的聲音。聲音文件分為兩大類：一類是采用WAV格式的波形的音頻文件；另一類是采用MIDI格式的樂(lè)器數(shù)字化接口文件。對(duì)于WAV格式文件，通過(guò)數(shù)字采樣獲得聲音素材；而對(duì)于MIDI格式文件，則通過(guò)MIDI樂(lè)器的演奏獲得聲音素材。第33頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.2.6音頻與視頻基礎(chǔ)

視頻文件的格式視頻文件可以分為兩大類，其一是影像文件，例如常見的VCD。影像文件一般可達(dá)幾MB至幾十MB甚至更大。其二是流式視頻文件，它是隨著國(guó)際互聯(lián)網(wǎng)的發(fā)展而誕生的，例如在線實(shí)況轉(zhuǎn)播，就是建立在流式視頻技術(shù)之上的。AVI文件是由Microsoft公司開發(fā)的一種數(shù)字音頻與視頻文件格式，被大多數(shù)操作系統(tǒng)直接支持。它將視頻和音頻混合交錯(cuò)地存儲(chǔ)在一起，調(diào)用方便、圖像質(zhì)量好。但AVI文件沒有限定壓縮標(biāo)準(zhǔn)，不同壓縮標(biāo)準(zhǔn)生成的AVI文件，必須使用相應(yīng)的解壓算法才能將其播放出來(lái)，而且文件體積過(guò)于龐大。MOV文件是Apple公司開發(fā)的一種音頻、視頻文件格式。MOV格式支持25位彩色，支持領(lǐng)先的集成壓縮技術(shù)，提供了150多種視頻效果，并配有提供了200多種MIDI兼容音響和設(shè)備的聲音裝置，包含了基于Internet應(yīng)用的關(guān)鍵特性，具有跨平臺(tái)、存儲(chǔ)空間要求小的技術(shù)特點(diǎn)。另外還有MPEG、DAT、RM、ASF、WMV等格式的文件。第34頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3HTML基礎(chǔ)

1.3.1HTML文檔基本結(jié)構(gòu)1.3.2HTML的基本結(jié)構(gòu)標(biāo)記1.3.3文字與段落排版標(biāo)記1.3.4多媒體標(biāo)記1.3.5超鏈接標(biāo)記1.3.7框架標(biāo)記第35頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.1HTML文檔基本結(jié)構(gòu)

1．HTML簡(jiǎn)介HTML是HypertextMarkupLanguage（超文本標(biāo)記語(yǔ)言）的縮寫，它是構(gòu)成Web頁(yè)面的符號(hào)標(biāo)記語(yǔ)言。通過(guò)HTML將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，并將這些HTML文件翻譯成可以識(shí)別的信息，就是所見到的網(wǎng)頁(yè)。2．一個(gè)簡(jiǎn)單的HTML實(shí)例【案例1.1】用HTML制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。①在“記事本”中輸入文本。②在“記事本”中，選擇“文件”→“保存”命令，將該文件保存為“1-1.htm”（HTML文件的擴(kuò)展名是.htm或.html。③雙擊“1-1.htm”，即可顯示網(wǎng)頁(yè)。第36頁(yè)，共82頁(yè)，2023年，2月20日，星期二

示例

第37頁(yè)，共82頁(yè)，2023年，2月20日，星期二<html><head><title>第一個(gè)簡(jiǎn)單網(wǎng)頁(yè)</title></head><bodybgcolor="#808080"><h1align="center">我的攝影網(wǎng)頁(yè)</h1><hr><p><h2align="center">首頁(yè)|業(yè)界資訊|攝影器材|攝影技術(shù)|作品欣賞</h2></p><p><h2align="center"><imgsrc="image\1-2.jpg"align="middle"/>攝影愛好者的家園</h2></p><p>攝影專題</P><ul><li>攝影雜談</li><li>攝影攻略</li><li>攝影專題</li><oltype="1"><li><ahref="#">風(fēng)光攝影</a></li><li><ahref="#">體育攝影</a></li><li><ahref="#">休閑攝影</a></li></ol></ul></body></html>【案例1.1】源代碼

第38頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.1HTML文檔基本結(jié)構(gòu)

一個(gè)最基本的網(wǎng)頁(yè)一般由三個(gè)組成部分構(gòu)成：<html>…</html><head>…</head><body>…</body>第39頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.1HTML文檔基本結(jié)構(gòu)

3.標(biāo)記和屬性

（1）HTML標(biāo)記

HTML文檔中用于描述功能的標(biāo)識(shí)符稱為標(biāo)記，標(biāo)記的作用是指定瀏覽器如何顯示被標(biāo)記的相關(guān)內(nèi)容。標(biāo)記符由一些字母組成。格式為：<標(biāo)記>受標(biāo)記影響的內(nèi)容</標(biāo)記>說(shuō)明：①任何標(biāo)記都用“<”和“>”括起來(lái)，如<b>，<table>，以表示這是HTML代碼而非普通文本。注意，“<”、“>”與標(biāo)記名之間不能留有空格或其他字符。②HTML的多數(shù)標(biāo)記都是成對(duì)出現(xiàn)的，分別稱為開始和結(jié)束標(biāo)記，結(jié)束標(biāo)記需在標(biāo)記名前加上符號(hào)“/”，也有不用</標(biāo)記>結(jié)束的，稱為單標(biāo)記，如<hr>、<img>、<br>。③任何標(biāo)記的大小寫都是等價(jià)的，建議用小寫形式。（4）標(biāo)記可以嵌套使用，嵌套時(shí)注意不要發(fā)生交叉嵌套。下面的嵌套是正確的：<b><divalign=center><fontcolor=blue>攝影動(dòng)態(tài)</font></div></b>第40頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.1HTML文檔基本結(jié)構(gòu)

（2）標(biāo)記的屬性格式為：

<標(biāo)記名屬性名1="屬性值1"屬性名2="屬性值2"…>受標(biāo)記影響的內(nèi)容</標(biāo)記名>例如，段落標(biāo)記p的一種使用形式：<palign="center">說(shuō)明：①屬性只可加于開始標(biāo)記中，并非所有的標(biāo)記都有屬性，如換行標(biāo)記就沒有屬性。②根據(jù)需要可以使用某標(biāo)記的所有屬性，也可以只使用其中的幾個(gè)屬性。在使用時(shí)屬性之間沒有順序要求。③屬性和標(biāo)記一樣，不區(qū)分大小寫，但建議使用小寫字母表示。④任何標(biāo)記的屬性都有默認(rèn)值，當(dāng)使用默認(rèn)值時(shí)屬性描述可省略。第41頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.1HTML文檔基本結(jié)構(gòu)

【案例1.2】標(biāo)記屬性示例<html><head><title>標(biāo)記屬性示例</title></head><body>Hello!網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)從HTML開始！

<palign="center">HTML語(yǔ)言是建立網(wǎng)頁(yè)的規(guī)范</p></body></html>第42頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

1．文檔標(biāo)記<html>…</html>格式：<html>html文檔的內(nèi)容</html><html>是開始標(biāo)記，處于文檔的最前面，表示文檔的開始，即瀏覽器從<html>開始解釋，直到遇到</html>結(jié)束。其他所有的HTML標(biāo)記都位于這兩個(gè)標(biāo)記之間。<html>…</html>標(biāo)記不是必需的，但最好不要省略這兩個(gè)標(biāo)記，以保持Web文檔結(jié)構(gòu)的完整性。第43頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

2．文檔頭部標(biāo)記<head>…</head>格式：<head>頭部的內(nèi)容</head>

頭部標(biāo)記<head>…</head>用來(lái)設(shè)定有關(guān)頁(yè)面的一些信息，其內(nèi)容可以是標(biāo)題名、文本文件地址、創(chuàng)作信息等。例如，用<title>…</title>標(biāo)記來(lái)設(shè)置網(wǎng)頁(yè)的標(biāo)題，用<style>…</style>標(biāo)記來(lái)定義樣式表。第44頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

2．文檔頭部標(biāo)記<head>…</head>格式：<head>頭部的內(nèi)容</head>

頭部標(biāo)記<head>…</head>用來(lái)設(shè)定有關(guān)頁(yè)面的一些信息，其內(nèi)容可以是標(biāo)題名、文本文件地址、創(chuàng)作信息等。例如，用<title>…</title>標(biāo)記來(lái)設(shè)置網(wǎng)頁(yè)的標(biāo)題，用<style>…</style>標(biāo)記來(lái)定義樣式表。3．文檔標(biāo)題標(biāo)記<title>…</title>格式：<title>標(biāo)題名/<title>

標(biāo)題概括了網(wǎng)頁(yè)的內(nèi)容，能使瀏覽者迅速了解網(wǎng)頁(yè)的主題。瀏覽網(wǎng)頁(yè)時(shí)標(biāo)題名顯示在瀏覽器的標(biāo)題欄中。第45頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

4．文檔主體標(biāo)記<body>…</body><body>…</body>標(biāo)記定義網(wǎng)頁(yè)上顯示的主要內(nèi)容與顯示格式，網(wǎng)頁(yè)正文中的所有內(nèi)容，包括文字、表格、圖像、聲音和動(dòng)畫等都包含在本標(biāo)記中。

Body常用的標(biāo)記有排版標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記、表格標(biāo)記等，這些標(biāo)記在后面陸續(xù)介紹，這里只介紹body的常用屬性。第46頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

其中：（1）bgcolor屬性設(shè)置網(wǎng)頁(yè)的背景色，格式為：bgcoloer="RGB顏色編碼"（或者bgcoloer="顏色標(biāo)識(shí)符"）“RGB顏色編碼”是一組六位的十六進(jìn)制數(shù)值，第1、2位代表紅色值（R），第3、4位代表綠色值（G），第5、6位代表藍(lán)色值（B）。如，紅色為ff0000，綠色為00ff00，藍(lán)色為0000ff?！邦伾珮?biāo)識(shí)符”在HTML的預(yù)定義顏色中取值。常用的顏色標(biāo)識(shí)符有：red（紅）、green（綠）、blue（藍(lán)）、black（黑）、white（白）等。第47頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.2HTML的基本結(jié)構(gòu)標(biāo)記

5．注釋標(biāo)記格式為：<!--注釋內(nèi)容-->，或者<!注釋內(nèi)容>

其中的“注釋內(nèi)容”被瀏覽器解釋為注釋，而不在瀏覽器窗口中顯示。例如：<!--下一個(gè)標(biāo)記設(shè)立鏈接-->第48頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

1．文字控制標(biāo)記（1）控制文本的字體、字號(hào)、顏色文字控制標(biāo)記<font>…</font>用于控制文字的顯示形式，常用的屬性有face、size、color，格式為：

<fontface=字體名稱size=字號(hào)大小color=顏色屬性值>文本內(nèi)容</font>

其中，face用于設(shè)置文字的字體，只有當(dāng)前系統(tǒng)中能夠使用的字體（中英文），設(shè)置才有效。size用于設(shè)置文字的字號(hào)大小，取值范圍是1~7，數(shù)值越大字越大，默認(rèn)值是3號(hào)字。color用于設(shè)置文字的顏色，默認(rèn)顏色是黑色。第49頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

1．【案例1.3】font常用屬性應(yīng)用示例。<html><head><title>font常用屬性示例</title></head><body><fontcolor=red>只設(shè)置文字的顏色為紅色</font><fontsize=+3color=blueface=仿宋_GB2312>設(shè)置文字為5號(hào)藍(lán)色仿宋字</font></body></html>第50頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

（2）控制字體特殊效果的標(biāo)記

常用字體特效控制標(biāo)記標(biāo)記名稱標(biāo)記作用標(biāo)記格式b文字加粗<b>文字</b>i文字斜體<i>文字</i>u文字加下畫線<u>文字</u>strike文字加刪除線<strike>文字</strike>sup文字為上標(biāo)^文字Sub文字為下標(biāo)_文字第51頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

2．段落排版標(biāo)記段落排版標(biāo)記主要是對(duì)網(wǎng)頁(yè)的頁(yè)面版式進(jìn)行控制的標(biāo)記，主要包括標(biāo)題標(biāo)記、段落標(biāo)記、換行標(biāo)記等。（1）標(biāo)題標(biāo)記標(biāo)題標(biāo)記用于設(shè)置文本的各種題目，標(biāo)題號(hào)越小，字號(hào)也大。格式：

<hnalign=對(duì)齊方式>標(biāo)題文字</hn>其中，hn用來(lái)指定標(biāo)題文字的大小，分別為h1、h2、…、h6。align屬性用來(lái)設(shè)置標(biāo)題在頁(yè)面中的對(duì)齊方式，取值為left（左對(duì)齊）、right(右對(duì)齊)和center（居中）。第52頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

【案例1.4】標(biāo)題標(biāo)記應(yīng)用示例<html><head><title>標(biāo)題標(biāo)記應(yīng)用示例</title></head><body><h1>1級(jí)標(biāo)題的顯示效果</h1><h2>2級(jí)標(biāo)題的顯示效果</h2><h3>3級(jí)標(biāo)題的顯示效果</h3><h4align=left>4級(jí)標(biāo)題的顯示效果(左對(duì)齊）</h4><h5align=center>5級(jí)標(biāo)題的顯示效果（居中）</h5><h6align=right>6級(jí)標(biāo)題的顯示效果（右對(duì)齊）</h6></body></html>第53頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

（2）換行和段落標(biāo)記在HTML文檔中，無(wú)法使用多個(gè)回車、空格、Tab鍵來(lái)調(diào)整文檔段落的格式，只能用換行、段落標(biāo)記來(lái)強(qiáng)制實(shí)現(xiàn)。換行標(biāo)記br是一個(gè)單標(biāo)記，其作用是產(chǎn)生換行。格式：<br><br>僅產(chǎn)生一個(gè)新行，并不產(chǎn)生新段落。若在一個(gè)段落中使用該標(biāo)記，產(chǎn)生的新行仍然具有原段落的屬性。段落標(biāo)記<p>用于定義一個(gè)段落，并對(duì)段落的屬性進(jìn)行說(shuō)明。它位于各段落起始位置部位，使用該標(biāo)記后，每塊文本段落之間都會(huì)空出一行。P標(biāo)記有多個(gè)屬性，最常用的是align屬性，用于定義段落的對(duì)齊方式，格式為：<palign=對(duì)齊方式>文本</p>，其中，對(duì)齊方式為：left、right、center。第54頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

【案例1.5】換行、段落標(biāo)記應(yīng)用示例。<html><head><title>換行、段落標(biāo)記應(yīng)用示例</title></head><body><p>

諾貝爾獎(jiǎng)簡(jiǎn)介。諾貝爾獎(jiǎng)的由來(lái)<!該行和上一行是同一段落><palign=“center”>諾貝爾獎(jiǎng)的獎(jiǎng)項(xiàng)<br>物理、化學(xué)、生理或醫(yī)學(xué)、文學(xué)、和平、經(jīng)濟(jì)</p>諾貝爾獎(jiǎng)的故事

</p></body></html>提醒：由瀏覽結(jié)果可見，文件中的<br>標(biāo)記產(chǎn)生了換行效果，但產(chǎn)生的新行“物理、化學(xué)、生理或醫(yī)學(xué)、文學(xué)、和平、經(jīng)濟(jì)”與“諾貝爾獎(jiǎng)的獎(jiǎng)項(xiàng)”屬同一段落，仍居中顯示。第55頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

3．其他標(biāo)記（1）水平線標(biāo)記水平線標(biāo)記可以在網(wǎng)頁(yè)中插入一條水平線，將不同功能的文字分隔開來(lái)。

<hralign=對(duì)齊方式size=數(shù)字width=數(shù)字color=顏色>其中，

align屬性設(shè)置水平線的位置，

size屬性設(shè)置水平線寬度，以像素為單位，默認(rèn)為2。width屬性設(shè)置水平線的長(zhǎng)度，可以是像素或相對(duì)于當(dāng)前窗口的百分比，默認(rèn)值為100%。

Color屬性設(shè)置水平線的顏色。第56頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

（2）有序列表標(biāo)記有序列表是在各列表前面顯示數(shù)字或字母的所排列表，可以使用有序列表標(biāo)記ol和列表項(xiàng)標(biāo)記li來(lái)創(chuàng)建。格式為：<olstrat=整數(shù)值type=有序列表標(biāo)識(shí)符><li>表項(xiàng)1<li>表項(xiàng)2┅</ol>說(shuō)明：Start屬性設(shè)置數(shù)字或字母的起始值，可以取整數(shù)值。type屬性設(shè)置序列的樣式，有序列表標(biāo)識(shí)符可以設(shè)置為：A～大寫英文字母；a～小寫英文字母；1～阿拉伯?dāng)?shù)字；I～大寫羅馬字母；i～小寫羅馬字母。第57頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

【案例1.6】有序列表標(biāo)記應(yīng)用示例。<html><head><title>有序列表應(yīng)用示例</title></head><body><palign="center"><fontcolor="blue"size=6><b>璀璨的諾貝爾獎(jiǎng)</b></font></p><fontcolor=red>諾貝爾獎(jiǎng)項(xiàng)</font><oltype=1start=1><li>諾貝爾物理學(xué)獎(jiǎng)

<li>諾貝爾化學(xué)獎(jiǎng)

<li>諾貝爾生理或醫(yī)學(xué)獎(jiǎng)

<li>諾貝爾文學(xué)獎(jiǎng)

<li>諾貝爾和平獎(jiǎng)

<li>諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)

</ol><fontcolor=red>華裔諾貝爾物理學(xué)獎(jiǎng)</font><oltype=Astart=1><li>楊振寧

<li>李政道

<li>丁肇中

<li>朱棣文

<li>崔琦

<li>高錕

</ol></body></html>第58頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

（3）無(wú)序列表標(biāo)記無(wú)序列表是在各列表前面顯示特殊符號(hào)的所排列表，可以使用無(wú)序列表標(biāo)記ul和列表項(xiàng)標(biāo)記li來(lái)創(chuàng)建。格式為：<ultype=無(wú)序列表標(biāo)識(shí)符><litype=無(wú)序列表標(biāo)識(shí)符>表項(xiàng)1<litype=無(wú)序列表標(biāo)識(shí)符>表項(xiàng)2┅</ul>說(shuō)明：type屬性設(shè)置每個(gè)表項(xiàng)左端的符號(hào)類型，取值有disc（實(shí)心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（方塊）。第59頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.3文字與段落排版標(biāo)記

4．文字與段落排版綜合實(shí)例【案例1.7】制作一個(gè)介紹諾貝爾獎(jiǎng)的頁(yè)面，如圖所示。第60頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.4多媒體標(biāo)記

1．圖像標(biāo)記圖像標(biāo)記<img>用于在網(wǎng)頁(yè)中插入圖像。格式為：

<imgsrc=url[align="對(duì)齊方式"][alt="提示文本"][border="邊框?qū)挾?][width="寬度像素大小"][height="高度像素大小"][hspace="水平空白像素值"][vspace="垂直空白像素值"]>第61頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.4多媒體標(biāo)記

標(biāo)記中的屬性及其說(shuō)明屬性名屬性用途功能srcSrc=”url”設(shè)置插入圖像的urlalignalign=”top”圖像兩側(cè)的文字與圖像頂部對(duì)齊align=”center”圖像兩側(cè)的文字與圖像中部對(duì)齊align=”bottom”圖像兩側(cè)的文字與圖像底部對(duì)齊align=”left”圖像位置左對(duì)齊align=”right”圖像位置右對(duì)齊altalt=”圖像替代文字”在瀏覽器還沒有裝入圖像時(shí)，在圖像位置顯示的文字borderborder=”圖像邊框?qū)挾取痹O(shè)置圖像邊框?qū)挾龋ㄏ袼兀﹚idthwidth=”圖像寬度”設(shè)置圖像寬度（像素）hspacehspace="水平空白像素值"設(shè)置圖片與文本之間水平方向的空白（像素）vspacevspace="垂直空白像素值"設(shè)置圖片與文本之間垂直方向的空白（像素）第62頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.4多媒體標(biāo)記

2．背景音樂(lè)標(biāo)記<bgsound>用于插入背景音樂(lè)，格式為：<bgsoundsrc="url"autostart="true|false"loop="n|infinite">其中：url指定插入音樂(lè)文件的url。autostart指定是否自動(dòng)播放音樂(lè)，取true時(shí)自動(dòng)播放。loop指定是否循環(huán)播放，取值為n（整數(shù)）時(shí)，連續(xù)播放n次，否則循環(huán)播放，如：<bgsoundsrd="天空之城.MP3"autostart="true"loop="3">第63頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.4多媒體標(biāo)記

3．音頻和視頻標(biāo)記在HTML文檔中可以使用<ember>標(biāo)記插入音頻和視頻文件。格式為：<embersrc="url"width="播放文件的寬度"heigth="播放文件的高度"></ember>例如：<embersrc="clock..avi"></ember>4．Flash標(biāo)記在HTML文檔中可以使用<ember>標(biāo)記插入Flash。格式為：<embersrc="url""></ember>

第64頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.4多媒體標(biāo)記

【案例1.8】圖文混排及多媒體標(biāo)記綜合實(shí)例，如圖1.3124所示。在【案例1.7】的基礎(chǔ)上進(jìn)行修改，添加背景音樂(lè)和圖像，具體修改如下：①在<body>中增加播放音樂(lè)文件的功能：<bgsoundsrc="\audio\天空之城.wma"autostart="true"loop="3">②在<body>的一級(jí)標(biāo)題</h1>后面插入右對(duì)齊的圖像：<p><imgsrc="諾貝爾獎(jiǎng)?wù)?jpg"align="right"></p>③在水平線<hr>標(biāo)記后面插入左對(duì)齊的圖像：<p><imgsrc="諾貝爾像.jpg"align="left"></p>第65頁(yè)，共82頁(yè)，2023年，2月20日，星期二案例1.8第66頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

超鏈接是由源端點(diǎn)到目標(biāo)端點(diǎn)的一種跳轉(zhuǎn)。源端點(diǎn)可以是文字或圖像等。目標(biāo)端點(diǎn)可以是多種對(duì)象（如其他網(wǎng)頁(yè)或站點(diǎn)、圖片、E-mail地址、頁(yè)內(nèi)段落等）。根據(jù)目標(biāo)端點(diǎn)的不同，網(wǎng)頁(yè)中的超鏈接可以分為：文件鏈接、圖像鏈接、E-mail鏈接等。第67頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

1．超鏈接路徑超鏈接的路徑設(shè)置非常重要，如果路徑不正確，可能會(huì)出現(xiàn)無(wú)法跳轉(zhuǎn)的情況。路徑一般分為絕對(duì)路徑和相對(duì)路徑。絕對(duì)路徑是指Internet上資源的完整地址，形式為“協(xié)議://計(jì)算機(jī)域名/文檔名”。當(dāng)鏈接到其他網(wǎng)站中的文件時(shí)必須用絕對(duì)路徑。例如：href=/index.htm。絕對(duì)路徑主要用于創(chuàng)建外部鏈接。相對(duì)路徑是指相對(duì)于當(dāng)前頁(yè)面的地址，它包含從當(dāng)前頁(yè)面指向目標(biāo)頁(yè)面位置的路徑。例如，public/html1.htm表示當(dāng)前頁(yè)面所在目錄下的public子目錄中的html1.htm文檔，相對(duì)路徑適用于網(wǎng)站內(nèi)部的鏈接。第68頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

2．建立文件鏈接在HTML中，使用<a>標(biāo)記建立文件鏈接，格式為：<ahref=urltitle=字符串target=打開窗口方式>鏈接標(biāo)識(shí)</a>說(shuō)明：①參數(shù)href是必選項(xiàng)，用于指定要鏈接到的目標(biāo)文件名稱。②title屬性是可選項(xiàng)，用來(lái)設(shè)置指向超鏈接時(shí)所顯示的標(biāo)題文字。第69頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

2．建立文件鏈接在HTML中，使用<a>標(biāo)記建立文件鏈接，格式為：<ahref=urltitle=字符串target=打開窗口方式>鏈接標(biāo)識(shí)</a>說(shuō)明：③target屬性用來(lái)設(shè)置目標(biāo)網(wǎng)頁(yè)打開的窗口，默認(rèn)是在當(dāng)前窗口打開鏈接目標(biāo)?？扇≈禐椋篲blank，_parent，_top，_self。④鏈接標(biāo)識(shí)以超鏈接的形式呈現(xiàn)在網(wǎng)頁(yè)中，單擊該標(biāo)識(shí)，瀏覽器將url的資源顯示在屏幕上。例如：<ahref="">中原工學(xué)院</a>用戶單擊當(dāng)前網(wǎng)頁(yè)中的“中原工學(xué)院”時(shí)，即可打開中原工學(xué)院首頁(yè)。第70頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

3．鏈接到E-mail單擊指向電子郵件的鏈接，將打開默認(rèn)的電子郵件程序，如Foxmail、OutlookExpress等，并自動(dòng)填寫郵件地址。格式為：<ahref="mailto:E-mail地址">鏈接標(biāo)識(shí)</a>其中，"E-mail地址"是要鏈接到的E-mail的實(shí)際地址。例如：<ahref="mailto:123456@qq.COM">請(qǐng)給我寫信</a>第71頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

4．用圖像建立鏈接可以用圖像作為鏈接標(biāo)識(shí)建立超鏈接。格式為：<ahref="url"><imgsrc="url"></a>其中，<imgsrc="url">將插入一個(gè)圖像并以該圖像作為超鏈接標(biāo)識(shí)，單擊該圖像將跳轉(zhuǎn)到鏈接目標(biāo)位置。提示：若要?jiǎng)?chuàng)建空鏈接，只需在a標(biāo)記的href屬性設(shè)置為href=#即可。第72頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.5超鏈接標(biāo)記

【案例1.9】使用a標(biāo)記創(chuàng)建超鏈接示例。<html><head><title>超鏈接標(biāo)記的應(yīng)用</title></head><body><p><ahref="1-4.htm"title="鏈接另一頁(yè)面"target=_black>標(biāo)題標(biāo)記應(yīng)用示例</a><br><p><ahref=""title="鏈接其他站點(diǎn)">中原工學(xué)院</a><br><p><ahref="hp.jpg"title="鏈接到一個(gè)圖像文件">惠普海報(bào)</a><br><p><ahref="image\flower.jpg"><imgsrc="image\flower1.jpg"></a><br><p><ahref="mailto:jsjjc@">請(qǐng)給我回信</a><br></body></html>第73頁(yè)，共82頁(yè)，2023年，2月20日，星期二

1.3.6框架標(biāo)記

框架是進(jìn)行網(wǎng)頁(yè)布局的常用技術(shù)，使用框架可以將瀏覽器窗口劃分為多個(gè)相互隔離的區(qū)域，每個(gè)區(qū)域顯示一個(gè)HTML文件，從而可以取得在同一個(gè)瀏覽器窗口中同時(shí)顯示不同網(wǎng)頁(yè)的效果。1．建立框架框架標(biāo)記有兩個(gè)：框架組標(biāo)記<frameset>┅</frameset>和框架標(biāo)記<frame>┅</fram>。<frameset>標(biāo)記用來(lái)劃分框架，<frame>標(biāo)記用來(lái)聲明其中框架頁(yè)面的內(nèi)容，并且必須在<frameset>┅</frameset>范圍中使用。框架標(biāo)記的基本格式如下：<frameset><framesrc="url"><framesrc="url">┅</frameset>第74頁(yè)，共82頁(yè)，2023年，2月20日，