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

網(wǎng)頁設(shè)計(jì)與制作電子教案第1講網(wǎng)頁設(shè)計(jì)概述

第2講HTML語言基礎(chǔ)

第3講Dreamweaver基礎(chǔ)

第4講網(wǎng)頁中的基礎(chǔ)元素

第5講網(wǎng)頁頁面布局

第6講網(wǎng)頁中的層和時(shí)間軸

第7講表單的應(yīng)用第8講在網(wǎng)頁中使用行為

第9講CSS樣式使用

第10講網(wǎng)頁中的多媒體應(yīng)用

第11講模板和庫

第12講站點(diǎn)測(cè)試和發(fā)布

1編輯ppt

第1講網(wǎng)頁設(shè)計(jì)概述$

[知識(shí)目標(biāo)]

掌握網(wǎng)頁、網(wǎng)站及主頁的概念了解網(wǎng)頁中的主要元素了解各種網(wǎng)頁制作工具8

[能力目標(biāo)]

各種網(wǎng)頁制作工具的配合使用網(wǎng)站的整體規(guī)劃網(wǎng)站的設(shè)計(jì)流程2編輯ppt1.1網(wǎng)頁和網(wǎng)站1.2網(wǎng)頁中的主要元素1.3網(wǎng)頁制作工具1.4網(wǎng)頁設(shè)計(jì)的基本流程本講小結(jié)

第1講網(wǎng)頁設(shè)計(jì)概述3編輯ppt1.1網(wǎng)頁和網(wǎng)站1.1.1網(wǎng)頁

1.1.2網(wǎng)站1.1.3網(wǎng)頁的基本功能4編輯ppt

1．網(wǎng)頁

網(wǎng)頁（WEB）：是用html語言編寫的，通過www網(wǎng)傳輸，并被web瀏覽器翻譯成可以顯示出來的集合文本、圖片、聲音和動(dòng)畫等信息元素的頁面文件（網(wǎng)頁示例）。

2．網(wǎng)頁的類型根據(jù)頁面內(nèi)容可以分首頁、主頁、專欄網(wǎng)頁、內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型；按制作技術(shù)分為靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁。1.1.1

網(wǎng)頁

1.1網(wǎng)頁和網(wǎng)站5編輯ppt網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關(guān)聯(lián)起來形成的信息文件的集合。信息可以是網(wǎng)頁形式也可以是其他的文檔形式。網(wǎng)頁與網(wǎng)站的區(qū)別與聯(lián)系：網(wǎng)站是一個(gè)文件夾，其中的文件不僅是網(wǎng)頁還有網(wǎng)站所需的其他文件或文件夾。網(wǎng)頁是一個(gè)頁面文件，用來發(fā)布各種信息。網(wǎng)頁是網(wǎng)站的構(gòu)成要素，是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式；網(wǎng)站是網(wǎng)頁通過超鏈接形成的集合。1.1.2

網(wǎng)站

1.1網(wǎng)頁和網(wǎng)站6編輯ppt

1、媒介的作用。使用者與信息之間的媒介。一方面是發(fā)布者，功能是發(fā)布信息；另一方面是瀏覽者，功能是提供瀏覽的信息，通過瀏覽網(wǎng)頁找尋需要的信息。

2、互動(dòng)的作用。瀏覽者與網(wǎng)頁制作單位之間互動(dòng)的窗口，可以單向或雙向傳遞信息。

3、傳輸?shù)淖饔?。作為傳輸各種電子文件或信息之用，如下載說明書、更新文件、驅(qū)動(dòng)程序等。1.1.3網(wǎng)頁的基本功能

1.1網(wǎng)頁和網(wǎng)站7編輯ppt1.2網(wǎng)頁中的主要元素1.2.1文本1.2.2圖像1.2.3鏈接標(biāo)志1.2.4其他的基本要素網(wǎng)頁的基本要素一般包括：文字、圖像、動(dòng)畫和鏈接標(biāo)志等，除此之外，網(wǎng)頁的元素還包聲音、多媒體和視頻等。8編輯ppt是網(wǎng)頁中最基本的元素。網(wǎng)頁中文字的設(shè)計(jì)一般從以下幾個(gè)方面來考慮：

1．字體的選擇。

2．字號(hào)、行距的選擇。

3．特殊字體的使用。

4．字體的顏色。

1.2.1文本

1.2網(wǎng)頁中的主要元素9編輯ppt現(xiàn)在網(wǎng)絡(luò)上使用的絕大多數(shù)圖片和圖像是gif、jpeg和png文件格式。網(wǎng)頁上使用圖像要注意的問題：

?JPEG格式適合于照片圖像，GIF格式適合于包含純色的圖像，例如插圖和線條圖。

?利用圖像編輯軟件來放大或縮小圖像

?屏幕顯示圖像的分辨率一般為72dpi。制作圖像時(shí)，不必使用比此再高的分辨率。1.2.2圖像

1.2網(wǎng)頁中的主要元素10編輯ppt

?如果建立的圖像中只有黑色和白色，處理時(shí)可將它保存為黑白圖像格式，這樣可以減少圖像文件的大小。

?如果設(shè)計(jì)的GIF格式圖像包含了漸變和直線，應(yīng)盡量使得它們水平，因?yàn)镚IF格以每條水平線為基礎(chǔ)來壓縮。

?嘗試各種不同的JPEG壓縮率

?使用合適的色彩模式。

?慎用動(dòng)畫。1.2.2圖像

1.2網(wǎng)頁中的主要元素11編輯ppt鏈接也叫超鏈接（Hyperlink），是從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接，是頁面間的鏈接關(guān)系。鏈接標(biāo)志（載體）指的是網(wǎng)頁中特殊的文本或圖像，它們常常用不同的顏色和下劃線來標(biāo)識(shí)，在瀏覽器中，訪問者可以用鼠標(biāo)單擊它們，能夠從當(dāng)前的網(wǎng)頁轉(zhuǎn)到鏈接的目的端位置。超鏈接的標(biāo)志一般有：文本、圖像、熱區(qū)三種。要注意的是，所有超鏈接標(biāo)志均應(yīng)清晰無誤地向?yàn)g覽者標(biāo)識(shí)出來，讓人一看就知道。1.2.3鏈接標(biāo)志

1.2網(wǎng)頁中的主要元素12編輯ppt除上述幾種要素之外，在網(wǎng)頁上經(jīng)常使用的還有動(dòng)畫、視頻、聲音等各種信息的形式。

1．動(dòng)畫。目前網(wǎng)絡(luò)上常用的動(dòng)畫類型有g(shù)if和Flash動(dòng)畫兩種。

2．視頻。是多媒體網(wǎng)頁的一個(gè)重要組成部分，常用的視頻格式有avi、mpeg和mov等，視頻會(huì)大大增加網(wǎng)頁的文件量，從而使用訪問速度受到影響，因此要慎用。

3．音頻。在網(wǎng)頁中插入音頻會(huì)增加網(wǎng)頁的生動(dòng)性。常用的音頻格式有rm(ram)、midi、wav和mp3等格式。音頻文件和視頻文件一樣都會(huì)增加網(wǎng)頁的文件量，因此要慎用。1.2.4其他的基本要素

1.2網(wǎng)頁中的主要元素13編輯ppt1.3網(wǎng)頁制作工具1.3.1網(wǎng)頁編輯工具

1．超文本標(biāo)識(shí)語言（HTML）

2．FrontPage簡(jiǎn)介

3．Dreamweaver1.3.2網(wǎng)頁圖像編輯工具1.3.3動(dòng)態(tài)網(wǎng)頁技術(shù)14編輯ppt

1．Photoshop。是Adobe公司開發(fā)的，是當(dāng)今最流行的圖形圖象處理軟件之一，它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像制作、處理及合成。

2．Fireworks。是由Macromedia公司開發(fā)的圖形處理工具，它是第一個(gè)專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也提供專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。

3.Flash。Macromedia公司出品的Flash是目前非常流行的一種交互式Web矢量動(dòng)畫軟件。

Dreamweaver和Flash、Fireworks三個(gè)軟件被稱為“網(wǎng)頁三劍客”，是現(xiàn)在公認(rèn)的比較標(biāo)準(zhǔn)的網(wǎng)頁制作利器。1.3.2

網(wǎng)頁圖像編輯工具

1.3網(wǎng)頁制作工具15編輯ppt動(dòng)態(tài)網(wǎng)頁可以實(shí)現(xiàn)網(wǎng)頁瀏覽者和網(wǎng)頁設(shè)計(jì)者的交互，實(shí)現(xiàn)交互技術(shù)有兩種：一種是客戶端技術(shù)如常用的JavaScript和VBScript；另一種是服務(wù)器端技術(shù)如目前常用的ASP和PHP。

1．ASP(ActiveServerPages)

2．PHP(HypertextPreprocessor)

3．JSP(JavaServerPages)1.3.3動(dòng)態(tài)網(wǎng)頁技術(shù)

1.3網(wǎng)頁制作工具16編輯ppt1.4網(wǎng)頁設(shè)計(jì)的基本流程1.4.1網(wǎng)站的設(shè)計(jì)流程1.4.2網(wǎng)頁的設(shè)計(jì)與制作1.4.3網(wǎng)頁的測(cè)試1.4.4網(wǎng)頁上傳和發(fā)布17編輯ppt

1．確定網(wǎng)站的主題

2．規(guī)劃網(wǎng)站的整體結(jié)構(gòu)

3．收集整合網(wǎng)頁素材

4．確定網(wǎng)頁版面布局。

5．制作網(wǎng)頁。

6．添加網(wǎng)頁特效。

7．測(cè)試和發(fā)布網(wǎng)站。1.4.1

網(wǎng)站的設(shè)計(jì)流程

1.4網(wǎng)頁設(shè)計(jì)的基本流程18編輯ppt

1．確定網(wǎng)頁的版面布局（1）平衡性。（2）對(duì)稱性。（3）對(duì)比性。（4）疏密度。（5）比例。（6）韻律感。網(wǎng)頁的排版布局是決定網(wǎng)站美觀與否的一個(gè)重要方面,通過合理的、有創(chuàng)意布局,才可以把文字、圖像等內(nèi)容完美地展現(xiàn)在瀏覽者前面。

2．網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作一般分為靜態(tài)網(wǎng)頁制作和動(dòng)態(tài)網(wǎng)頁制作兩類。1.4.2網(wǎng)頁的設(shè)計(jì)與制作

1.4網(wǎng)頁設(shè)計(jì)的基本流程19編輯ppt

1．瀏覽器兼容性測(cè)試。目前瀏覽器有：

InternetExplorer與Netscape兩大主流瀏覽器，二者對(duì)HTML和CSS等語法的支持度是不同的。在Dreamweaver中提供了可以檢查網(wǎng)頁中是否含有某版本瀏覽器不能識(shí)別的語法功能，設(shè)計(jì)者可以借助其進(jìn)行檢查。

2．平臺(tái)的兼容性測(cè)試。設(shè)計(jì)要為用戶著想，必須最少在一臺(tái)PC和一臺(tái)Mac機(jī)上測(cè)試你的網(wǎng)站網(wǎng)頁，看看兼容性如何；

3．超鏈接完好性測(cè)試。超鏈接是連接網(wǎng)頁之間、網(wǎng)站之間的橋梁，瀏覽者是不愿意訪問一個(gè)經(jīng)常出現(xiàn)“找不到網(wǎng)頁”的問題的網(wǎng)站，作為設(shè)計(jì)者必須檢測(cè)超鏈接的完好性，保證鏈接的有效性，不要留下太多的壞鏈接。1.4.3網(wǎng)頁的測(cè)試

1.4網(wǎng)頁設(shè)計(jì)的基本流程20編輯ppt網(wǎng)頁設(shè)計(jì)好，必須把它發(fā)布到互聯(lián)網(wǎng)上，否則網(wǎng)站形象仍然不能展現(xiàn)出去。發(fā)布的服務(wù)器可以是遠(yuǎn)程，也可以是本地。如果是發(fā)布到互聯(lián)網(wǎng)上，要先申請(qǐng)域名和主頁空間，然后再利用專用軟件（如：CuteFTP）上傳，F(xiàn)TP有很多種軟件，最著名的是CuteFTP和LeapFTP，也可以用Dreamweaver內(nèi)置的FTP上傳。1.4.4網(wǎng)頁上傳和發(fā)布

1.4網(wǎng)頁設(shè)計(jì)的基本流程21編輯ppt本講小結(jié)第1講網(wǎng)頁設(shè)計(jì)概述網(wǎng)頁設(shè)計(jì)概述網(wǎng)頁和網(wǎng)站網(wǎng)頁中的主要元素網(wǎng)頁設(shè)計(jì)的基本流程網(wǎng)頁制作工具網(wǎng)頁網(wǎng)站網(wǎng)頁的基本功能文本圖像鏈接標(biāo)志其他的基本要素網(wǎng)頁編輯工具網(wǎng)頁圖像編輯工具網(wǎng)站的設(shè)計(jì)流程網(wǎng)頁的設(shè)計(jì)與制作網(wǎng)頁的測(cè)試網(wǎng)頁上傳和發(fā)布常見的各種網(wǎng)頁制作工具動(dòng)態(tài)網(wǎng)頁技術(shù)22編輯ppt$

[知識(shí)目標(biāo)]

了解HTML文件的基本結(jié)構(gòu)掌握HTML中文本的編輯及圖像的語法掌握HTML中各種設(shè)置超級(jí)鏈接的語法掌握HTML中表格和框架的基本語法8

[能力目標(biāo)]

掌握進(jìn)行文本及圖像的編輯操作掌握創(chuàng)建各種超級(jí)鏈接的操作能夠編寫簡(jiǎn)單的HTML網(wǎng)頁掌握HTML文件中表格和框架的使用第2講HTML語言基礎(chǔ)23編輯ppt2.1HTML概述2.2文本的編輯2.3圖像編輯2.4建立超鏈接2.5表格與框架本講小結(jié)第2講HTML語言基礎(chǔ)24編輯ppt2.1HTML概述2.1.1HTML簡(jiǎn)介2.1.2HTML語法結(jié)構(gòu)25編輯ppt

HTML（HyperTextMarkupLanguage）又稱超文本標(biāo)識(shí)語言，是一種標(biāo)識(shí)性的語言，是網(wǎng)頁設(shè)計(jì)的最初語言。文件的擴(kuò)展名:“html”或“htm”。例2.1簡(jiǎn)單的HTML文檔

<html>

<head>

<title>.長春歡迎您！</title>

</head>

<body>這里是長春悠游網(wǎng)，我們帶您暢游長春！

</body>

</html>由“<”和“>”組成的就是標(biāo)記。在HTML語言中標(biāo)記分“單標(biāo)記”和“圍堵標(biāo)記”。2.1.1HTML簡(jiǎn)介

2.1HTML概述26編輯ppt

1．圍堵標(biāo)記格式：

<標(biāo)記>……</標(biāo)記>

2．單標(biāo)記格式：<標(biāo)記>只有起始標(biāo)記，沒有結(jié)束標(biāo)記。最常用的單標(biāo)記是<br>,它表示段內(nèi)換行。

3．標(biāo)記屬性格式：<標(biāo)記屬性1屬性2屬性3……>各屬性間無前后順序，屬性也可省略，當(dāng)省略屬性時(shí)取標(biāo)記的默認(rèn)值。2.1.1HTML簡(jiǎn)介

2.1HTML概述27編輯ppt

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

<HTML>文件開始

<HEAD>標(biāo)頭區(qū)開始

<TITLE>...</TITLE>標(biāo)題區(qū)

</HEAD>標(biāo)頭區(qū)結(jié)束

<BODY>文件主體內(nèi)容開始文件主體內(nèi)容……

</BODY>文件主體內(nèi)容結(jié)束

</HTML>文件結(jié)束

其中<HTML></HTML>之間表示這是個(gè)網(wǎng)頁文件，是必有的標(biāo)記。2.1.2HTML語法結(jié)構(gòu)

2.1HTML概述28編輯ppt2.2文本的編輯2.2.1段落標(biāo)記

2.2.2文本標(biāo)記

2.2.3標(biāo)題顯示等級(jí)2.2.4列表

29編輯ppt

1．段落（<P>）基本語法格式為：

<palign=left/center/right>其中參數(shù)align用于設(shè)定段落的位置是靠左、靠右還是居中。默認(rèn)值是靠左；除align之外<p>還有其他參數(shù)如class。class參數(shù)是可選項(xiàng)，如果沒有將按照默認(rèn)值顯示。

2．換行<br>單標(biāo)記，放在一行的末尾，可以在一個(gè)段落內(nèi)實(shí)現(xiàn)文本的強(qiáng)制換行，設(shè)置標(biāo)記后面的文本字、圖像和表格等內(nèi)容顯示于下一行。2.2.1

段落標(biāo)記

2.2文本的編輯30編輯ppt

1．字體標(biāo)記<font>其基本語法格式為：

<fontface=？size=？color=？>…</font>

Size：設(shè)置字體的顯示字號(hào)，范圍是從“1～7”，其中“3”是默認(rèn)值。

Color：設(shè)置文本的顏色，值可以是顏色名（英文如red代表紅色）或顏色的十六進(jìn)制代碼（#000000代表黑色，#FFFFFF代表白色）。

Face：設(shè)置文本顯示的字體，值為字體的名稱。在文本的標(biāo)記中還有很多常用的標(biāo)記，比如表示字體效果的，<b>(黑體)，<i>（斜體），<u>（加下劃線）。2.2.2

文本標(biāo)記

2.2文本的編輯31編輯ppt

2．特殊字符

HTML中除了我們上面學(xué)的的一些標(biāo)記外，還有一些我們常用的特殊字符比如“<”，這些特殊字符在HTML語言中都有對(duì)的轉(zhuǎn)義符，常用的轉(zhuǎn)義符與特殊字符參見下表：2.2.2

文本標(biāo)記

2.2文本的編輯HTML代碼顯示結(jié)果說明<<小于號(hào)或顯示標(biāo)記>>大于號(hào)或顯示標(biāo)記&&可用于顯示其它特殊字符""引號(hào)®?注冊(cè)©?版權(quán)™?商標(biāo)

不斷行的空格32編輯ppt

3．水平線標(biāo)記<hr>水平線是在網(wǎng)頁上劃出一條水平的分割線，用<hr>來標(biāo)記水平線。語法格式為：

<hralign=left/center/rightnoshadesize=？width=？color=？>

Size：設(shè)置水平線的高度，以像素為單位。

Color：設(shè)置水平線的顏色。

Width：設(shè)置水平線的寬度，單位是像素或百分比，像素是絕對(duì)大小，不會(huì)隨著程序窗口的大小而改，百分比是相對(duì)于程序窗口水平線所占的比例，會(huì)隨著程序窗口的大小而改變。

Align：設(shè)置水平線的對(duì)齊方式。對(duì)齊方式有左對(duì)齊，居中，右對(duì)齊三種。2.2.2

文本標(biāo)記

2.2文本的編輯33編輯ppt

語法格式為：

<Hn>…</Hn>

n：表示不同級(jí)別的標(biāo)題，n值可以是1-6中的任意數(shù)字，其中1表示的標(biāo)題字體最大。另外，可以用align屬性設(shè)置對(duì)齊方式，常用的有左對(duì)齊，居中，右對(duì)齊三種對(duì)齊方式。2.2.3

標(biāo)題顯示等級(jí)

2.2文本的編輯34編輯ppt在HTML中，列表常用的有“有序列表”和“無序列表”。

1．有序列表<OL>基本語法結(jié)構(gòu)為：

<oltype=nstart=？>

<li>項(xiàng)目1

<li>項(xiàng)目2

……

<li>項(xiàng)目n

</ol>2.2.4

列表

2.2文本的編輯35編輯ppt

1．有序列表<OL>

Type：設(shè)置列表的序號(hào)類型，常用序號(hào)如下：

n=1：用數(shù)字作為序號(hào)。

n=A；用大寫字母作為序號(hào)。

n=a：用小寫字母作為序號(hào)。

n=I：用大寫羅馬數(shù)字作為序號(hào)。

n=i：用小寫羅馬數(shù)字作為序號(hào)。

Start：為可選參數(shù)，用于設(shè)置序號(hào)的起始數(shù)值。如不添加“start”則從每類序號(hào)的第一個(gè)序號(hào)開始。2.2.4

列表

2.2文本的編輯36編輯ppt

2．無序列表基本語法結(jié)構(gòu)為：

<ultype=n>

<li>項(xiàng)目1

<li>項(xiàng)目2

……

<li>項(xiàng)目n

</ul>

Type:設(shè)置符號(hào)形狀，有實(shí)心圓、小正方形、空心圓三種，具體如下：

n=disk：符號(hào)為實(shí)心圓。

n=square：符號(hào)為正方形。

n=circle：符號(hào)為空心圓。2.2.4

列表

2.2文本的編輯37編輯ppt2.3圖像編輯 2.3.1插入圖像2.3.2使用背景圖像我們?cè)诰W(wǎng)頁上經(jīng)常會(huì)瀏覽圖像，適當(dāng)使用圖像可以增加網(wǎng)頁的美觀。在網(wǎng)頁最常用到的是插入圖像和設(shè)置背景圖像。38編輯ppt

1．語法格式：

<imgsrc=“url”>，單標(biāo)記

Src：指明要添加的圖像所在的具體路徑和文件名。路徑可以是相對(duì)路徑，也可以是絕對(duì)路徑。例：<imgsrc="images/ball.gif">。絕對(duì)路徑：完整的描述文件位置的路徑就是絕對(duì)路徑。對(duì)于絕對(duì)路徑可以不需要知道其他任何信息就可以判斷出文件的位置。相對(duì)路徑：所謂相對(duì)路徑,顧名思義就是當(dāng)前文檔與目標(biāo)的相對(duì)位置。例<src=1.bmp>.2.3.1插入圖像

2.3圖像編輯 39編輯ppt

2．圖像的屬性除了“src”以外，<img>還有其他屬性，可以定義圖像的對(duì)齊方向，與周圍元素的距離等，各屬性及作用見表2.2。表2.2圖像屬性列表2.3.1插入圖像

2.3圖像編輯 名稱作用border設(shè)定圖像的邊框vspace設(shè)定圖像、文字與圖像上下之間的間隔hspace設(shè)定圖像、文字與圖像左右之間的間隔width調(diào)整圖像的寬度height調(diào)整圖像的高度alt當(dāng)瀏覽器無法顯示圖像時(shí)，會(huì)顯示出alt屬性所設(shè)定的文字40編輯ppt語法格式為：

<bodybackground=“url”>2.3.2使用背景圖像

2.3圖像編輯 41編輯ppt2.4

建立超鏈接2.4.1建立超鏈接2.4.2使用書簽2.4.3標(biāo)記新窗口和基準(zhǔn)鏈接42編輯ppt建立超鏈接的標(biāo)記是<a>，語法格式為：

<ahref=“url”>超鏈接標(biāo)識(shí)</a>

url：指明鏈接目標(biāo)的具體路徑和文件名。超鏈接標(biāo)識(shí)：是網(wǎng)頁中鏈接的載體，可以是文字或圖像等頁面元素，用戶點(diǎn)擊它就會(huì)跳到超鏈接的目標(biāo)位置。2.4.1

建立超鏈接

2.4建立超鏈接43編輯ppt１．定義書簽在HTML中，首先要定義書簽，然后才在鏈接使用。定義書簽的語法格式為：

<aname=”書簽名”>書簽名不能用中文，只能用英文和數(shù)字。２．使用書簽鏈接其鏈接的格式為：

<ahref=”#書簽名”>超鏈接標(biāo)識(shí)</a>

#與書簽名之間不能有空格。2.4.2使用書簽

2.4建立超鏈接44編輯ppt

1．標(biāo)記新窗口（target）“target=”_blank””，是鏈接標(biāo)記的一個(gè)參數(shù)。語法格式為：

<ahref=“url”target=_blank>超鏈接標(biāo)識(shí)</a>當(dāng)點(diǎn)擊鏈接載體的，就會(huì)在新窗口打開鏈接目標(biāo)。

2．基準(zhǔn)鏈接<base>

<base>標(biāo)記是單標(biāo)記，禁止使用結(jié)束標(biāo)記，可以改變文件中所有鏈接標(biāo)記的參數(shù)默認(rèn)值。它只能位于文件的開頭部分，即標(biāo)記<head>與</head>之間。語法格式為：

<basehref=“url”>2.4.3

標(biāo)記新窗口和基準(zhǔn)鏈接

2.4建立超鏈接45編輯ppt2.5表格與框架2.5.1建立表格2.5.2表格屬性2.5.3建立框架2.5.4框架屬性46編輯ppt表格標(biāo)記有<table>、<th>、<tr>和<td>四個(gè)，他們的具體含義是：

<table></table>:定義表格,是表格必須的元素

<th></th>：定義標(biāo)題單元格，在這個(gè)單元格中的文字將用粗體表示。

<tr></tr>：定義表格中的行。

<td></td>：定義單元格，使用<td>標(biāo)記一定要放在<tr>標(biāo)記內(nèi)部。上述標(biāo)記中，<th></th>可以省略，其他三個(gè)是必須的。具體應(yīng)用見例2.12。

<Table>標(biāo)記中可以添加屬性和參數(shù)，其中border，用于設(shè)置表格的邊框?qū)挾龋禐榇笥诘扔凇?”的整數(shù)，當(dāng)值為“0”，在瀏覽器中顯示無邊框表格，無邊框表格是網(wǎng)頁布局最主要的手段。2.5.1

建立表格

2.5表格與框架47編輯ppt除了border外，常用的表格屬性參數(shù)有：

<tablecellspacing=？>：定義單元格之間的距離，值為大于等于“0”的整數(shù)，單位是像素，“0”表示沒有間距。

<tableCellpadding=？>：定義單元格內(nèi)的文字或其他元素到邊框的距離,值為大于等于“0”的整數(shù)，單位是像素，“0”表示沒有距離。

<tableheight=？>：定義表格的高度，值有兩種單位，一是像素，表示表格高度為固定大小，一是百分比表示表格占據(jù)整個(gè)網(wǎng)頁的高度百分比。

<tablewidth=？>：定義表格的寬度，與高度一樣有像素和百分比兩種單位。

<tablebordercolor=？>：定義表格邊框的顏色。

<tablebgcolor=？>：定義表格的背景色2.5.2

表格屬性

2.5表格與框架48編輯ppt

1．框架頁的基本結(jié)構(gòu)

<html>

<head>

<title>…</title>

</head>

<noframes>…</noframes>

<frameset>

<framesrc="url">

<framesrc="url">

……

</frameset>

</html>

<noframes>…</noframes>：標(biāo)記一個(gè)普通的HTML文檔，用于在不支持框架的瀏覽器中顯示。

<frameset>：用于定義分割窗口，可以設(shè)置窗口的分割方式及是否顯示框架邊框等。

<frame>用于設(shè)置每個(gè)區(qū)域顯示的內(nèi)容，每個(gè)URL值指定一個(gè)事先己制作好的文件。2.5.3

建立框架

2.5表格與框架49編輯ppt

2．建立框架（1）建立縱向框架建立縱向框架的基本語法為：

<framesetcols=？>

Cols：設(shè)置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表對(duì)應(yīng)的子窗體占屏幕窗口的大小。如要將屏幕分割成三個(gè)子窗口，其中兩個(gè)都占整個(gè)窗口的30%，那么只給開始的兩個(gè)窗口賦值。語句為<framesetcols="30%,30%,*">，*代表框架剩余的部分分給最后一個(gè)子窗口，當(dāng)然也可以寫成<framesetcols="30%,30%,30%">。2.5.3

建立框架

2.5表格與框架50編輯ppt（2）建立橫框架建立橫向框架的基本語法為：

<framesetrows=？>

rows：這個(gè)參數(shù)用來水平分割窗口，它的值可以是數(shù)字或者是百分比，代表對(duì)應(yīng)的子窗口的大小，使用方法與cols相同。（3）嵌套框架嵌套框架是在己有的框架中嵌入框架的結(jié)構(gòu)，利用嵌套框架可以實(shí)現(xiàn)窗口的橫向與縱向的混合分割。嵌套框架的設(shè)置見例2.16.2.5.3

建立框架

2.5表格與框架51編輯ppt常用的框架屬性有以下幾種：

1．<framesetframeborder=？>：設(shè)置框架的邊框。值為yes（或1）有邊框或no（或0）無邊框。

2．<framesetframespacing=？>：設(shè)置各窗口之間的空白區(qū)域大小。值是以像素為單位的數(shù)值。

3．<framesetbordercolor=？>：設(shè)置邊框的顏色。值可以是的英文或顏色代碼。

4．<framesetscrolling=？>：設(shè)置框架是否顯示滾動(dòng)條。有三個(gè)值：yes表示有滾動(dòng)條，no表示沒有，auto表示根據(jù)內(nèi)容的多少瀏覽器自動(dòng)設(shè)置。

5．<framesetnoresize>：設(shè)置框架在瀏覽器中不能被調(diào)整。2.5.4框架屬性

2.5表格與框架52編輯ppt本講小結(jié)第2講HTML語言基礎(chǔ)HTML語言基礎(chǔ)HTML概述圖像編輯表格與框架建立超鏈接HTML簡(jiǎn)介HTML語法結(jié)構(gòu)段落標(biāo)記文本標(biāo)記標(biāo)題顯示等級(jí)列表插入圖像使用背景圖像建立超鏈接標(biāo)記新窗口和基準(zhǔn)鏈接建立表格表格屬性建立框架框架屬性使用書簽文本的編輯53編輯ppt$

[知識(shí)目標(biāo)]

認(rèn)識(shí)Dreamweaver8操作界面掌握如何規(guī)劃站點(diǎn)的結(jié)構(gòu)掌握網(wǎng)頁文件的基本操作8

[能力目標(biāo)]

熟悉工作界面和使用各種面板能夠建立和管理本地站點(diǎn)熟練網(wǎng)頁文件的基本操作第3講Dreamweaver基礎(chǔ)54編輯ppt3.1Dreamweaver8工作界面3.2規(guī)劃與創(chuàng)建站點(diǎn)3.3網(wǎng)頁文件的基本操作本章小結(jié)第3講Dreamweaver基礎(chǔ)55編輯ppt3.1Dreamweaver8工作界面3.1.1

啟動(dòng)Dreamweaver83.1.2Dreamweaver8操作界面56編輯ppt單擊“開始”按鈕，在開始菜單中依次選擇“程序”—“Macromedia”—“MacromediaDreamweaver8”，啟動(dòng)Dreamweaver8程序。啟動(dòng)Dreamweaver8后出現(xiàn)開始界面。3.1.1啟動(dòng)和退出Dreamweaver83.1Dreamweaver8工作界面57編輯ppt

在Dreamweaver8的起始頁中，單擊“創(chuàng)建新項(xiàng)目”下的“HTML”，打開Dreamweaver8的工作界面。3.1.2Dreamweaver8操作界面3.1Dreamweaver8工作界面58編輯ppt3.1.2Dreamweaver8操作界面3.1Dreamweaver8工作界面文檔工具欄面板組和文件面板59編輯ppt3.2規(guī)劃與創(chuàng)建站點(diǎn)3.2.1規(guī)劃網(wǎng)站的整體結(jié)構(gòu)3.2.2建立本地站點(diǎn)3.2.3管理本地站點(diǎn)60編輯ppt

規(guī)劃網(wǎng)站的結(jié)構(gòu)要注意以下幾個(gè)方面：

1．文件及文件夾的命名要規(guī)范

2．不要將所有文件存放在站點(diǎn)根目錄下

3．建立子文件夾對(duì)文件進(jìn)行分類存放

4．每個(gè)主欄目下都建立獨(dú)立的Image目錄

5．模板（Library）和庫(Templates)文件夾一定要位于站點(diǎn)根目錄之下并不能被更名，否則在使用模板和庫就會(huì)出錯(cuò)。3.2.1

規(guī)劃網(wǎng)站的整體結(jié)構(gòu)3.2規(guī)劃與創(chuàng)建站點(diǎn)61編輯ppt

1．在本地電腦硬盤上建立一個(gè)空的文件夾

2．在Dreamweaver8中建立站點(diǎn)的操作：

（1）單擊菜單欄中“站點(diǎn)”|“新建站點(diǎn)”命令，打開“未命名站點(diǎn)1的站點(diǎn)定義為”對(duì)話框。3.2.2

建立本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)（2）在“您打算為您的站點(diǎn)起什么名字？”對(duì)話框中輸入站點(diǎn)的名稱，如我們?cè)诖溯斎搿伴L春悠游網(wǎng)”。然后單擊下一步。62編輯ppt3.2.2

建立本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)

（3）在對(duì)話框中選擇“否，我不想使用服務(wù)器技術(shù)”，單擊“下一步”，打開對(duì)話框。63編輯ppt3.2.2

建立本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)（4）選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)（推薦）（E）”選項(xiàng)。（5）單擊“瀏覽”按鈕，打開對(duì)話框，選擇D盤上創(chuàng)建的“myweb1”文件夾為站點(diǎn)本地根文件夾。（6）單擊“下一步”打開對(duì)話框如下右圖。64編輯ppt3.2.2

建立本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)（7）在“如何連接到遠(yuǎn)程服務(wù)器？”選項(xiàng)的下拉列表中選擇“無”，單擊下一步，打開站點(diǎn)定義的“總結(jié)”對(duì)話框如左圖。（8）單擊“完成”后，可以在“文件”面板中看到所設(shè)置的站點(diǎn)，如右圖所示。

65編輯ppt

單擊菜單欄中“站點(diǎn)”|“站點(diǎn)管理”命令,打開“站點(diǎn)管理”對(duì)話框。

（一）復(fù)制站點(diǎn)

1．在“管理站點(diǎn)”對(duì)話框中，選擇要復(fù)制的站點(diǎn)，如選擇“依林小鎮(zhèn)”。

2．單擊對(duì)話框中的“復(fù)制”按鈕，即可復(fù)制出“依林小鎮(zhèn)復(fù)制”的站點(diǎn)。3.2.3

管理本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)66編輯ppt

（二）刪除站點(diǎn)

1．在“管理站點(diǎn)”對(duì)話框中，選擇要?jiǎng)h除的站點(diǎn)，如選擇“依林小鎮(zhèn)”。

2．單擊對(duì)話框中的“刪除”按鈕，彈出提示對(duì)話框，詢問是否刪除本地站點(diǎn)（如圖所示），單擊“是”，即可刪除本地站點(diǎn)“依林小鎮(zhèn)”。3.2.3

管理本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)67編輯ppt

（三）編輯站點(diǎn)：編輯站點(diǎn)是對(duì)己創(chuàng)建的本地站點(diǎn)進(jìn)行修改和編輯。將“依林小鎮(zhèn)復(fù)制”站點(diǎn)的名稱改為“依林小鎮(zhèn)”為例的操作為：

1．在“管理站點(diǎn)”對(duì)話框中選擇要編輯的站點(diǎn)——“依林小鎮(zhèn)復(fù)制”。

2．單擊對(duì)話框中的“編輯”按鈕，打開“依林小鎮(zhèn)復(fù)制的站點(diǎn)定義為對(duì)話框”，單擊高級(jí)選項(xiàng)卡。

3.在站點(diǎn)名稱對(duì)話框中，將“依林小鎮(zhèn)復(fù)制”改為“依林小鎮(zhèn)”，單擊“確定”按鈕即可。3.2.3

管理本地站點(diǎn)3.2規(guī)劃與創(chuàng)建站點(diǎn)68編輯ppt3.3網(wǎng)頁文件的基本操作3.3.1新建網(wǎng)頁3.3.2保存網(wǎng)頁3.3.3關(guān)閉網(wǎng)頁3.3.4打開網(wǎng)頁3.3.5預(yù)覽網(wǎng)頁69編輯ppt

1．執(zhí)行以下操作之一：

?單擊菜單欄中“文件”|“新建”命令。

?單擊標(biāo)準(zhǔn)工具欄上的

按鈕。

2．打開“新建文檔”對(duì)話框。

3．選擇“基本頁”選項(xiàng)中的“HTML”，單擊“創(chuàng)建”按鈕，即可新建一個(gè)空白的文檔。3.3.1

新建網(wǎng)頁3.3網(wǎng)頁文件的基本操作70編輯ppt

1．執(zhí)行以下操作之一：

?單擊菜單欄中“文件”|“保存”命令

?單擊標(biāo)準(zhǔn)工具欄上的

按鈕。

2．打開“另存為”對(duì)話框。

3．在“保存在”選項(xiàng)中選擇網(wǎng)頁的保存位置。在“文件名”文本框中的輸入文件名。

4．單擊“保存”按鈕，文件就保存到指定位置。3.3.2

保存網(wǎng)頁3.3網(wǎng)頁文件的基本操作

單擊菜單欄中“文件”|“關(guān)閉”或單擊文檔的窗口右上角的“關(guān)閉”即可。3.3.3

關(guān)閉網(wǎng)頁71編輯ppt

打開己保存的網(wǎng)頁有以下三種方法

１、通過文件菜單打開己有的網(wǎng)頁：

（1）執(zhí)行以下操作之一：

?單擊菜單欄中的“文件”|“打開”命令。

?或單擊標(biāo)準(zhǔn)工具欄上的。

（2）打開“打開”對(duì)話框。

（3）在查找范圍下拉列表中選擇網(wǎng)頁所在的文件夾,選擇要打開的文件,單擊“打開”按鈕,即可打開了文件

2、在“文件”面板中打開網(wǎng)頁文件

在“文件”面板中,雙擊要打開的文件,即可打開網(wǎng)頁

3、在資源管理器中打開網(wǎng)頁文件

在資源管理器中，右擊要打開的網(wǎng)頁文件，在彈出的快捷菜單中選擇“在Dreamweaver8”中編輯即可將文件在Dreamweaver8中打開。3.3.4

打開網(wǎng)頁3.3網(wǎng)頁文件的基本操作72編輯ppt

以在Iexplore中預(yù)覽為例，執(zhí)行以下操作之一：

?單擊菜單欄中“文件”|“在瀏覽器中預(yù)覽”|“Iexplore6.0”命令。

?使用快捷鍵為F12。

?在文檔工具欄中單擊，選擇在瀏覽器中預(yù)覽，如圖所示。3.3.5

預(yù)覽網(wǎng)頁3.3網(wǎng)頁文件的基本操作73編輯ppt本講小結(jié)第3講Dreamweaver基礎(chǔ)Dreamweaver基礎(chǔ)Dreamweaver8工作界面規(guī)劃與創(chuàng)建站點(diǎn)網(wǎng)頁文件的基本操作啟動(dòng)和退出DreamweaverDreamweaver8操作界面規(guī)劃網(wǎng)站的整體結(jié)構(gòu)建立本地站點(diǎn)管理本地站點(diǎn)關(guān)閉網(wǎng)頁打開網(wǎng)頁新建網(wǎng)頁保存網(wǎng)頁預(yù)覽網(wǎng)頁74編輯ppt$

[知識(shí)目標(biāo)]

掌握在網(wǎng)頁中的文本和段落的設(shè)置方法掌握?qǐng)D像的插入及其屬性的設(shè)置的方法熟悉頁面屬性的設(shè)置熟悉各種超級(jí)鏈接及設(shè)置8

[能力目標(biāo)]

掌握文本和段落屬性設(shè)置的操作掌握?qǐng)D像的插入及圖像屬性設(shè)置的操作掌握頁面屬性的設(shè)置操作掌握各種超級(jí)鏈接的設(shè)置及編輯操作第4講網(wǎng)頁中的基礎(chǔ)元素75編輯ppt4.1在網(wǎng)頁中插入文本4.2在網(wǎng)頁插入圖像4.3插入其他網(wǎng)頁元素4.4設(shè)置網(wǎng)頁的頁面屬性4.5設(shè)置超級(jí)鏈接本講小結(jié)第4講網(wǎng)頁中的基礎(chǔ)元素76編輯ppt4.1在網(wǎng)頁中插入文本4.1.1插入文本4.1.2設(shè)置文本格式4.1.3段落格式的編輯4.1.4設(shè)置列表4.1.5簡(jiǎn)單的CSS樣式應(yīng)用77編輯ppt

（一）插入普通文本:添加文本有以下三種方法：

1．直接在文檔窗口中輸入文本。

2．拷貝文本。

3．從其他文檔導(dǎo)入文本。

（二）插入特殊字符

1．將光標(biāo)定位在要插入特殊字符的位置。

2．在“插入”欄的“文本”類別中，選擇要插入的符號(hào)，如圖。4.1.1插入文本

4.1在網(wǎng)頁中插入文本78編輯ppt

1．選擇要設(shè)置的文本。

2．在“屬性檢查器”，設(shè)置文本格式。4.1.2設(shè)置文本格式4.1在網(wǎng)頁中插入文本79編輯ppt

（一）應(yīng)用己有的標(biāo)題格式

（二）自定義設(shè)置段落格式

1．設(shè)置對(duì)齊方式

2．設(shè)置段落縮進(jìn)4.1.3

段落格式的編輯4.1在網(wǎng)頁中插入文本80編輯ppt列表包括項(xiàng)目列表和編號(hào)列表兩種。創(chuàng)建項(xiàng)目列表或編號(hào)列表的操作為：

1.選擇要?jiǎng)?chuàng)建列表的文本。

2.在“屬性檢查器”中單擊按鈕，可以創(chuàng)建項(xiàng)目列表；單擊按鈕，可以創(chuàng)建編號(hào)列表。

3.單擊“屬性檢查器”中的按鈕，以彈出的“列表屬性”對(duì)話框中可以重新設(shè)置列表的屬性。4.1.4設(shè)置列表4.1在網(wǎng)頁中插入文本81編輯ppt

CSS是CascadingStyleSheets（層疊樣式表單）的簡(jiǎn)稱。使用CSS樣式改變行距的操作為：

1．按組合鍵Shift+F11，打開CSS面板如所示。

2．點(diǎn)擊CSS面板上的按鈕，打開“新建CSS規(guī)則”對(duì)話框并設(shè)置如圖右，單擊確定。4.1.5

簡(jiǎn)單的CSS樣式應(yīng)用4.1在網(wǎng)頁中插入文本82編輯ppt３．單擊“確定”按鈕，打開“.hangju的CSS規(guī)則定義”對(duì)話框。設(shè)置如圖，單擊“確定”退出。4.1.5

簡(jiǎn)單的CSS樣式應(yīng)用4.1在網(wǎng)頁中插入文本83編輯ppt４．選擇要應(yīng)用樣式的兩段文本或光標(biāo)定位在段落中，在“屬性檢查器”中“樣式”下拉列表中，選擇“hangju”，則文本的行距發(fā)生了改變，如圖所示。4.1.5

簡(jiǎn)單的CSS樣式應(yīng)用4.1在網(wǎng)頁中插入文本84編輯ppt4.2在網(wǎng)頁插入圖像4.2.1插入圖像4.2.2設(shè)置圖像屬性4.2.3編輯圖像4.2.4圖像外部編輯4.2.5鼠標(biāo)經(jīng)過圖像4.2.6創(chuàng)建導(dǎo)航條85編輯ppt

在網(wǎng)頁中插入圖像的操作為：

1.將光標(biāo)定位在要插入圖像的位置。

2.執(zhí)行以下操作之一：

?單擊菜單欄中的“插入”|“圖像”命令。

?在“插入”欄的“常用”類別中，單擊“圖像”按鈕

3．打開“選擇圖像源文件”對(duì)話框，選擇需要的文件名稱。

6．在“相對(duì)于”下拉列表中選擇“站點(diǎn)”。

7．單擊“確定”按鈕，圖像則插入到網(wǎng)頁中。4.2.1

插入圖像4.2在網(wǎng)頁插入圖像86編輯ppt

在文檔窗口選中圖像時(shí)，在“屬性檢查器中就可以顯示該圖像的屬性，并可對(duì)其進(jìn)行修改。

1．設(shè)置圖像大小：可以直接在“寬”和“高”兩個(gè)文本框內(nèi)輸入新的數(shù)值即可。還可以直接用鼠標(biāo)拖動(dòng)來改變圖像的大小。具體操作為：

（1）選中要改變的圖像，圖像四周出現(xiàn)控制點(diǎn)。

（2）拖動(dòng)任一個(gè)控制點(diǎn)則可改變圖像大小

4.2.2

設(shè)置圖像屬性4.2在網(wǎng)頁插入圖像87編輯ppt

3．設(shè)置圖像對(duì)齊方式

4．其他圖像屬性

?“源文件”：指定圖像的源文件。單擊“瀏覽”

按鈕或者直接鍵入文件的路徑，可以重新定義源文件。

?“替代”：用于指定在圖像不能正常顯示時(shí)，顯示的關(guān)于圖像的文本提示信息。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過圖像時(shí)也會(huì)顯示該文本。

?“垂直邊距和水平邊距”：以像素為單位設(shè)定圖像與周圍的網(wǎng)頁元素間的距離。

?“邊框”：是以像素為單位的圖像邊框的寬度。默認(rèn)為無邊框。4.2.2

設(shè)置圖像屬性4.2在網(wǎng)頁插入圖像88編輯ppt在Dreamweaver8中提供了基本圖像編輯功能，各編輯按鈕如下：

——優(yōu)化。單擊此按鈕可以打開“Fireworks”程序?qū)D像進(jìn)行優(yōu)化。

——裁剪?？勺屝藜魣D像的大小，從所選圖像中刪除不需要的區(qū)域。

——重新取樣?？蓪?duì)已調(diào)整大小的圖像進(jìn)行重新取樣，提高圖片在新尺寸和形狀下的品質(zhì)。

——亮度和對(duì)比度?？勺屨{(diào)整圖像的亮度和對(duì)比度設(shè)置。

——銳化可調(diào)整圖像的清晰度。4.2.3

編輯圖像

4.2在網(wǎng)頁插入圖像89編輯ppt啟動(dòng)外部圖像編輯器執(zhí)行以下操作之一：

?雙擊要編輯的圖像。

?選擇要編輯的圖像，然后在屬性檢查器中單擊“編輯”。

?在“站點(diǎn)”面板中雙擊圖像文件，啟動(dòng)主圖像編輯器。如果尚未指定圖像編輯器，Dreamweaver8將啟動(dòng)該文件類型的默認(rèn)編輯器。4.2.4圖像外部編輯4.2在網(wǎng)頁插入圖像90編輯ppt設(shè)置鼠標(biāo)經(jīng)過圖像的操作為：

1．在“文檔”窗口中,將光標(biāo)定位在要顯示鼠標(biāo)經(jīng)過圖像的位置。

2．執(zhí)行以下操作之一，打開插入鼠標(biāo)經(jīng)過圖像對(duì)話框：

?單擊菜單欄中“插入|圖像對(duì)象|鼠標(biāo)經(jīng)過圖像”命令。

?在“插入”欄的“常用”類別中，單擊“圖像”按鈕右側(cè)的箭頭，在彈出的菜

單中，選擇“鼠標(biāo)

經(jīng)過圖像”，如圖

所示。4.2.5

鼠標(biāo)經(jīng)過圖像4.2在網(wǎng)頁插入圖像91編輯ppt

3．打開“鼠標(biāo)經(jīng)過圖像”對(duì)話框。

4．單擊“確定”，在網(wǎng)頁中插入了鼠標(biāo)經(jīng)過圖像。

5．保存并在瀏覽器中預(yù)覽網(wǎng)頁。4.2.5

鼠標(biāo)經(jīng)過圖像4.2在網(wǎng)頁插入圖像92編輯ppt

1．準(zhǔn)備好用于制作導(dǎo)航條的圖像,這些圖像最好大小尺寸一樣。

2．在文檔窗口中，將光標(biāo)定位在要顯示導(dǎo)航條的位置。一般導(dǎo)航條位網(wǎng)頁的頂部或兩側(cè)。

3．單擊菜單欄中“插入”|“圖像對(duì)象”|“導(dǎo)航條”。

4．打開對(duì)話框，在對(duì)話框中設(shè)置。在導(dǎo)航條中，每一個(gè)項(xiàng)目都對(duì)應(yīng)一個(gè)按鈕，該按鈕具有一組狀態(tài)圖像，最多可達(dá)四個(gè)。項(xiàng)目名稱在“導(dǎo)航條項(xiàng)目”列表中顯示。用箭頭按鈕排列項(xiàng)目在導(dǎo)航條中的位置。單擊“+”按鈕，添加另一個(gè)項(xiàng)目，單擊“-”可以刪除選中的項(xiàng)目。向上和向下的箭頭按鈕，用于調(diào)整項(xiàng)目在導(dǎo)航條中排序。4.2.6

創(chuàng)建導(dǎo)航條4.2在網(wǎng)頁插入圖像93編輯ppt

5．設(shè)置完成一個(gè)項(xiàng)目后，單擊加號(hào)“+”按鈕向?qū)Ш綏l添加另一個(gè)項(xiàng)目，然后重復(fù)上述步驟定義該項(xiàng)目。

6．完成設(shè)置后，單擊“確定”按鈕，在網(wǎng)頁中插入了導(dǎo)航條。4.2.6創(chuàng)建導(dǎo)航條4.2在網(wǎng)頁插入圖像94編輯ppt4.3插入其他網(wǎng)頁元素4.3.1水平線4.3.2日期和時(shí)間95編輯ppt（一）插入水平線:在網(wǎng)頁中插入水平線的操作為：

1．在“文檔”窗口中，將光標(biāo)定位在要插入水平線的位置。

2．執(zhí)行下列操作之一：

?單擊菜單欄中“插入”|“HTML”|“水平線”命令。

?在“插入”欄的“HTML”類別中，單擊“水平線”按鈕，如圖。

3．水平線插入在網(wǎng)頁中如圖4.3.1

水平線4.3插入其他網(wǎng)頁元素96編輯ppt（二）設(shè)置水平線屬性：

1．選擇水平線

2．打開“水平線屬性”，如圖所示。

?“寬”：用于設(shè)置水平線的寬度。

?“高”：以像素為單位，設(shè)置水平線的高度。

?“對(duì)齊”：設(shè)置水平線的對(duì)齊方式（“默認(rèn)”、“左對(duì)齊”、“居中對(duì)齊”或“右對(duì)齊”）。

?“陰影”：指定繪制水平線時(shí)是否帶陰影。取消選擇此選項(xiàng)將使用純色繪制水平線。4.3.1

水平線4.3插入其他網(wǎng)頁元素97編輯ppt（三）.增添顏色

1．選擇水平線

2．在“屬性檢查器”上，單擊打開快速標(biāo)簽編輯器如圖。

3．插入color="？"，顏色取值可以是英語（如yellow）也可用十六進(jìn)制代碼（如#FFFF00）.4.3.1

水平線4.3插入其他網(wǎng)頁元素98編輯ppt（一）將當(dāng)前日期插入到文檔中

1在“文檔”窗口中，定位光標(biāo)在要插入日期的位置。在圖4.34的網(wǎng)頁中的圖像下面輸入文本“本網(wǎng)頁制作于：”。

2執(zhí)行下列操作之一：

?單擊菜單欄中“插入”|“日期”命令。

?在“插入”欄的“常用”類別中，單擊“日期”按鈕

3．打開“插入日期”對(duì)話框如圖。4.3.2

日期和時(shí)間4.3插入其他網(wǎng)頁元素99編輯ppt

4．在對(duì)話框中，選擇星期格式、日期格式和時(shí)間格式。

5．如選擇“儲(chǔ)存時(shí)自動(dòng)更新”，在每次保存文檔時(shí)都會(huì)更新插入的日期。取消選擇，日期在插入后變成純文本并永遠(yuǎn)不自動(dòng)更新。

6．單擊“確定”插入日期，效果如圖所示。4.3.2

日期和時(shí)間4.3插入其他網(wǎng)頁元素100編輯ppt4.4設(shè)置網(wǎng)頁的頁面屬性4.4.1打開頁面屬性對(duì)話框4.4.2設(shè)置網(wǎng)頁的標(biāo)題4.4.3設(shè)置網(wǎng)頁的背景4.4.4設(shè)置網(wǎng)頁的文本4.4.5設(shè)置網(wǎng)頁的邊界101編輯ppt

1．要打開頁面屬性對(duì)話框可以執(zhí)行以下操作之一：

?單擊菜單欄中“修改”|“頁面屬性”命令。

?單擊文本“屬性檢查器”中的“頁面屬性”按鈕。

2．打開頁面屬性對(duì)話框，如圖所示。4.4.1打開頁面屬性對(duì)話框4.4設(shè)置網(wǎng)頁的頁面屬性102編輯ppt

1．在頁面屬性對(duì)話框中，選擇“標(biāo)題/編碼”分類，如圖所示。

2．在“標(biāo)題”文本框內(nèi)輸入網(wǎng)頁的標(biāo)題內(nèi)容，如“長春游游網(wǎng)”。

3．點(diǎn)擊“確定”退出頁面屬性對(duì)話框。

4．保存并在瀏覽器中預(yù)覽網(wǎng)頁,則標(biāo)題出現(xiàn)在瀏覽器的左上角4.4.2設(shè)置網(wǎng)頁的標(biāo)題4.4設(shè)置網(wǎng)頁的頁面屬性103編輯ppt（一）設(shè)置網(wǎng)頁的背景顏色

1．在頁面屬性對(duì)話框中，選擇“外觀”分類。

2．執(zhí)行以下操作之一：

?在“背景顏色”對(duì)話框中輸入顏色的十六進(jìn)制代碼如“#66CCFF”

?點(diǎn)背景顏色后的按鈕，打開調(diào)色板選擇顏色。

3．點(diǎn)擊“確定”退出頁面屬性對(duì)話框。

4．保存并在瀏覽器中預(yù)覽網(wǎng)頁。4.4.3設(shè)置網(wǎng)頁的背景4.4設(shè)置網(wǎng)頁的頁面屬性104編輯ppt（二）設(shè)置網(wǎng)頁的背景圖像

1．在頁面屬性對(duì)話中，選擇“外觀”分類。

2．點(diǎn)擊“背景圖像”后的“瀏覽”按鈕，打開選擇圖像源對(duì)話框。

3．查找并選擇作為網(wǎng)頁背景的圖像，單擊“確定”退出頁面屬性對(duì)話框。

4．保存并在瀏覽器中預(yù)覽網(wǎng)頁。

5.重復(fù)選項(xiàng)：確定是否以及如何重復(fù)背景圖像。有四個(gè)選項(xiàng)：“不重復(fù)”只在開始處顯示一次圖像?！爸貜?fù)”在水平和垂直方向平鋪圖像。“橫向重復(fù)”和“縱向重復(fù)”，分別在水平和垂直方向重復(fù)排列背景圖像。4.4.3設(shè)置網(wǎng)頁的背景4.4設(shè)置網(wǎng)頁的頁面屬性105編輯ppt在頁面屬性對(duì)話框架可以對(duì)網(wǎng)頁的文本進(jìn)行統(tǒng)一的字體、字號(hào)及文本顏色的設(shè)置

1．在頁面屬性對(duì)話框中，選擇“外觀”分類。

2．在“頁面字體”的下拉菜單中，選擇字體。

3．在“大小”下拉菜單中，選擇字號(hào)。

4．單擊“文本顏色”右側(cè)的調(diào)色板，可以設(shè)置文本的顏色。4.4.4

設(shè)置網(wǎng)頁的文本4.4設(shè)置網(wǎng)頁的頁面屬性頁面屬性中“左邊距”、“右邊距”、“上邊距”和“下邊距”四個(gè)選項(xiàng)，用于設(shè)置網(wǎng)頁頁面元素與頁面邊界的寬度或高度。其右側(cè)下拉列表為寬度或高度的單位，默認(rèn)為“像素”。4.4.5

設(shè)置網(wǎng)頁的邊界106編輯ppt4.5設(shè)置超級(jí)鏈接4.5.1超鏈接的路徑4.5.2創(chuàng)建基本超鏈接4.5.3錨點(diǎn)鏈接4.5.4熱區(qū)鏈接4.5.5電子郵件鏈接107編輯ppt①絕對(duì)路徑。是提供所鏈接文檔的完整路徑，且包含其應(yīng)用協(xié)議（如http://）。主要用于創(chuàng)建站外具有固定地址的鏈接，如要建立到中央電視臺(tái)的鏈接就可以使用。②文檔相對(duì)路徑。是以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)由的路徑，省略對(duì)于當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)路徑部分，而只提供不同的路徑部分，如：gerenwenjian/jiangli.html。具有可移植性，是網(wǎng)頁制作的首選。③根目錄相對(duì)路徑（又稱服務(wù)器路徑）：使用多個(gè)服務(wù)器的大型站點(diǎn)會(huì)要用到這種文檔路徑。如："/image/button.gif”即是連接網(wǎng)絡(luò)服務(wù)器根目錄下的image文件夾中的button.gif文件，必須在網(wǎng)絡(luò)環(huán)境之下才能使用這種路徑。4.5.1

超鏈接的路徑4.5設(shè)置超級(jí)鏈接108編輯ppt

1、在網(wǎng)頁中，選擇要超鏈接的載體（文字或者圖）像，選擇“凈月潭國家森林公園”。

2．在屬性檢查器中，單擊“鏈接”后的“瀏覽”按鈕，打開“選擇文件”對(duì)話框。

3．選擇鏈接的目標(biāo)文件，單擊“確認(rèn)”按鈕。

4．在“屬性檢查器”中的“目標(biāo)”下拉菜單中,選擇目標(biāo)文件打開的位置,如圖。

5．保存并在瀏覽器中預(yù)覽網(wǎng)頁，建立了超鏈接的文字變?yōu)樗{(lán)色并帶有下劃線。

6．單擊創(chuàng)建超鏈接的文字，測(cè)試鏈接的完好性。4.5.2

創(chuàng)建基本超鏈接4.5設(shè)置超級(jí)鏈接109編輯ppt

1．創(chuàng)建命名錨記（1）光標(biāo)定位在要?jiǎng)?chuàng)建命名錨記的位置，如在圖4.49網(wǎng)頁中的標(biāo)題“長春介紹”前定位光標(biāo)。（2）執(zhí)行以下操作之一：

?單擊菜單欄中的“插入”|“命名錨記”命令

?在“插入”欄中的“常用”類別中，單擊“命名錨記”。（3）打開“命名錨記”對(duì)話框，如圖。

4.5.3

錨點(diǎn)鏈接4.5設(shè)置超級(jí)鏈接110編輯ppt（4）在“錨記名稱”文本框中輸入錨記名稱，如“top”。（5）單擊“確定”按鈕退出，則在文檔的相應(yīng)位置出現(xiàn)一個(gè)圖標(biāo)這就是命名錨記的符號(hào)。4.5.3

錨點(diǎn)鏈接4.5設(shè)置超級(jí)鏈接111編輯ppt

1、在網(wǎng)頁中插入圖片。

2．單擊選中圖片，“屬性檢查器”出現(xiàn)熱區(qū)工具按鈕。

3．單擊“矩形”熱區(qū)按鈕，將光標(biāo)移到圖像上按下并拖動(dòng)鼠標(biāo)，繪制出一個(gè)淺藍(lán)色帶有黑色的邊框的矩形區(qū)域。4.5.4

熱區(qū)鏈接4.5設(shè)置超級(jí)鏈接112編輯ppt

4．松開鼠標(biāo)，“屬性檢查器”變?yōu)椤盁狳c(diǎn)屬性”，如圖所示。

５．設(shè)置鏈接。與文本或圖像的超鏈接設(shè)置相同。

６．保存并在瀏覽器中預(yù)覽網(wǎng)頁，將光標(biāo)指向熱區(qū)位置時(shí)，出現(xiàn)手形圖標(biāo)，如圖所示。4.5.4

熱區(qū)鏈接4.5設(shè)置超級(jí)鏈接113編輯ppt

1．在文檔窗口中，選擇鏈接載體，如選擇“站長信箱”文本。

2．執(zhí)行以下操作之一：

?單擊菜單欄“插入”|“電子郵件鏈接”命令。

?在“插入”欄的“常用”類別中，單擊“電子郵件鏈接”按鈕。

3．打開“電子郵件鏈接”對(duì)話框.

4．“文本”：顯示己選中的文本，如沒有選擇文本，可在此直接輸入作為鏈接的文本載體。

5．“E—Mail”：輸入電子郵件地址。

6．保存并在瀏覽器中預(yù)覽網(wǎng)頁測(cè)試電子郵件鏈接。4.5.5

電子郵件鏈接4.5設(shè)置超級(jí)鏈接114編輯ppt本講小結(jié)第４講網(wǎng)頁中的基礎(chǔ)要素網(wǎng)頁中的基礎(chǔ)要素在網(wǎng)頁中插入文本在網(wǎng)頁中插入圖像設(shè)置網(wǎng)頁的頁面屬性其他網(wǎng)頁元素插入文本設(shè)置文本格式段落格式的編輯設(shè)置列表簡(jiǎn)單的CSS樣式應(yīng)用插入圖像設(shè)置圖像屬性編輯圖像圖像外部編輯圖像外部編輯鼠標(biāo)經(jīng)過圖像水平線日期和時(shí)間打開頁面屬性對(duì)話框設(shè)置網(wǎng)頁的標(biāo)題設(shè)置網(wǎng)頁的背景設(shè)置網(wǎng)頁的文本設(shè)置網(wǎng)頁的邊界創(chuàng)建導(dǎo)航條設(shè)置超級(jí)鏈接超鏈的路徑創(chuàng)建基本超鏈接錨點(diǎn)鏈接熱區(qū)鏈接郵件鏈接115編輯ppt$

[知識(shí)目標(biāo)]

掌握表格及單元格的創(chuàng)建和編輯掌握通過表格來進(jìn)行網(wǎng)頁頁面的布局方法掌握建立框架網(wǎng)頁及框架屬性設(shè)置的方法8

[能力目標(biāo)]

熟練掌握表格的基本操作熟練運(yùn)用表格進(jìn)行網(wǎng)頁布局熟練運(yùn)用框架進(jìn)行網(wǎng)頁的布局第5講網(wǎng)頁頁面布局116編輯ppt5.1表格5.2表格布局5.3框架布局本講小結(jié)第5講網(wǎng)頁頁面布局117編輯ppt5.1表格5.1.1插入表格5.1.2添加內(nèi)容5.1.3選擇表格5.1.4設(shè)置表格屬性5.1.5編輯表格的基本操作

在表格中橫向?yàn)樾校v向?yàn)榱?。行列交叉部分就叫做單元格。單元格中的?nèi)容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。表格的邊線叫做邊框。118編輯ppt

（一）插入表格

1．定位光標(biāo)在要插入表格的位置，然后執(zhí)行以下操作之一：

?單擊菜單欄中的“插入”|“表格”命令。

?在“插入”欄的“常用”類別中，單擊“表格”按鈕。

2．打開表格對(duì)話框。5.1.1

插入表格5.1表格119編輯ppt5.1.1

插入表格5.1表格

3．單擊“確定”創(chuàng)建表格插入“4行5列”的表格。120編輯ppt

（二）插入嵌套表格

1．將光標(biāo)定位在表格的一個(gè)單元格內(nèi)。

2．執(zhí)行插入表格的操作，即可在表格內(nèi)嵌套表格如圖。5.1.1

插入表格5.1表格121編輯ppt

將插入點(diǎn)定位在表格內(nèi)，即可輸入文本、圖像、動(dòng)畫等網(wǎng)頁元素。5.1.2

添加內(nèi)容5.1表格122編輯ppt

(一)選擇整個(gè)表格

選擇整個(gè)表格執(zhí)行以下操作之一：

?單擊表格的左上角、右邊或底部邊緣的任意位置。

?單擊表格單元格，在菜單欄單擊“修改”|“表格”|“選擇表格”命令。(二)選擇行或列1．鼠標(biāo)指向行的左邊緣或列的上邊緣，光標(biāo)變?yōu)榛颉?．單擊鼠標(biāo)則選擇鼠標(biāo)指向的行或列。3．拖動(dòng)鼠標(biāo)，則選擇連續(xù)的多行或多列。4．按Ctrl同時(shí)單擊鼠標(biāo)，則可選擇不連續(xù)的多行或多列。5.1.3選擇表格5.1表格123編輯ppt

(三)選擇單元格

1.選擇單個(gè)單元格，請(qǐng)執(zhí)行以下操作之一：

?單擊單元格，然后在文檔窗口左下角的標(biāo)簽選擇器中選擇<td>標(biāo)簽.

?在單元格內(nèi)雙擊鼠標(biāo)則可選擇該單元格。

?在單元格內(nèi)單擊，然后按組合鍵Ctrl+A。

2．選擇連續(xù)的多個(gè)單元格可以執(zhí)行以下操作之一：

?單擊第一個(gè)單元格，按住Shift鍵的同時(shí)單擊另一個(gè)單元格，兩個(gè)單元格之間的矩形區(qū)域內(nèi)所有的單元格均被選中。

?在一個(gè)單元格中單擊并拖動(dòng)鼠標(biāo)橫向或縱向移動(dòng)到其他一個(gè)單元格，然后松開鼠標(biāo)則鼠標(biāo)經(jīng)過區(qū)域的單元格被選中。

3．按Ctrl同時(shí)單擊單元格則可選擇不相鄰的多個(gè)單元格。5.1.3選擇表格5.1表格124編輯ppt

（一）表格屬性

表格被選中之后，可以利用表格屬性來設(shè)置或修改表格的屬性。

（二）單元格屬性

單元格被選中或光標(biāo)定位在單元格中時(shí)，可以利用單元格屬性，來設(shè)置或修改單元格的屬性。5.1.4設(shè)置表格屬性5.1表格125編輯ppt

(一)調(diào)整表格的大?。?/p>

1．選擇整個(gè)表格，在表格的邊緣出現(xiàn)3個(gè)黑色控制點(diǎn)。

2．執(zhí)行以下操作：

?用鼠標(biāo)拖動(dòng)這些控制點(diǎn)則可改變表格的大小。

?在表格“屬性檢查器”中重新設(shè)置“高度”與“寬度”值，改變表格的大小。

（二）調(diào)整行高和列寬

1．將鼠標(biāo)移到要調(diào)整的行高或列寬的邊框上，光標(biāo)變?yōu)榛颉?/p>

2．拖動(dòng)鼠標(biāo)即調(diào)整行高或列寬。5.1.5編輯表格的基本操作5.1表格126編輯ppt

（三）合并或折分單元格

1．拆分單元格

（1）選擇（或?qū)⒐鈽?biāo)定位在）要拆分的單元格。

（2）執(zhí)行以下操作之一：

?單擊菜單欄中的“修改”|“表格”|“拆分單元格”命令。

?在“屬性檢查器”中，單擊“拆分單元格”的按鈕。

(3)打開拆分單元格對(duì)話框如圖。

（4）在這可以選擇拆分行還是拆分列，以及設(shè)置拆分的行數(shù)或列數(shù)。如設(shè)置拆分為“行”，行數(shù)為“2”。

（5）單擊確定，單元格被拆分。5.1.5編輯表格的基本操作5.1表格127編輯ppt

2．合并單元格

（1）選擇需要進(jìn)行合并的兩個(gè)以上單元格。

（2）執(zhí)行以下操作之一：

?單擊菜單欄“修改”|“表格”|“合并單元格”命令

?在“屬性檢查器”中，單擊“合并單元格”按鈕。

（3）選的單元格被合并。5.1.5編輯表格的基本操作5.1表格128編輯ppt

（四）插入和刪除行或列

1．插入單行或單列

在所選擇的行、列或單元格的上面及左側(cè)插入單行或單列，操作如下：

（1）選擇行、列或單元格。

（2）單擊菜單欄中的“修改”|“表格”|“插入行”或“插入列”命令。

?選擇“插入列”命令：可以在所選列的左側(cè)添加一列。

?選擇“插入行”命令：可以在所選行的上面添加一行。5.1.5編輯表格的基本操作5.1表格129編輯ppt

2．插入多行或多列

（1）選擇行、列或單元格。

（2）單擊菜單欄中的“修改”|“表格”|“插入行或列…”的命令，打開“插入行或列”對(duì)話框。

（3）選擇插入“列”或“行”，并設(shè)置數(shù)目，單擊確定。

5.1.5編輯表格的基本操作5.1表格130編輯ppt

3．刪除行或列

在表格中刪除行或列的操作為：

（1）選擇要?jiǎng)h除的行或列。

（2）執(zhí)行以下操作之一：

?單擊菜單欄中的“修改”|“表格”|“刪除行”或“刪除列”命令。

?單擊菜單欄中的“編輯”|“清除”命令。

?使用鍵盤上的“Delete”鍵。5.1.5編輯表格的基本操作5.1表格131編輯ppt5.2表格布局5.2.1布局視圖5.2.2繪制布局表格和布局單元格5.2.3編輯布局表格和布局單元格132編輯ppt5.2表格布局133編輯ppt

（一）切換布局視圖

1．執(zhí)行以下操作之一：

?單擊菜單欄中“視圖”|“表格視圖”|“布局視圖”命令。

?在“插入”欄的“布局”類別中，單擊“布局模式”按鈕。

2．打開“從布局模式開始”對(duì)話框5.2.1

布局視圖5.2表格布局134編輯ppt

3．單擊“確定”按鈕，進(jìn)入布局視圖模式。

4．單擊“退出”按鈕，或單擊相應(yīng)的其他視圖按鈕，退出布局視圖。5.2.1

布局視圖5.2表格布局135編輯ppt

（二）布局工具按鈕

在“插入欄”的“布局”類別中，有布局用的各種工具按鈕。

從左到右依次為：

?“標(biāo)準(zhǔn)”：?jiǎn)螕暨M(jìn)入標(biāo)準(zhǔn)視圖模式。

?“擴(kuò)展”：?jiǎn)螕暨M(jìn)入擴(kuò)展表格模式。

?“布局”：?jiǎn)螕暨M(jìn)入布局視圖模式。

?“

”：用于繪制布局表格。

?“

”：用于繪制布局單元格。

?“

”：用于添加布局框架。

?“

”：用于導(dǎo)入表格數(shù)據(jù)。5.2.1

布局視圖5.2表格布局136編輯ppt

（一）繪制布局表格

1．切換到布局視圖模式

2．單擊“繪制布局表格”按鈕

，鼠標(biāo)指針變?yōu)椤?”。

3．在文檔窗口中，按住鼠標(biāo)左鍵并拖動(dòng)，可以繪制出布局表格，表格的框線顯示為綠色。

5．要繪制多個(gè)布局表格，

按住Ctrl鍵同時(shí)單擊“繪制

布局表格”按鈕。6．每個(gè)布局表格都在頂端

有標(biāo)簽，并在布局表格的底

端或頂端顯示表格的大小。

5.2.2

繪制布局表格和布局單元格5.2表格布局137編輯ppt

7．單擊“繪制布局表格”按鈕，可以在布局表格內(nèi)繪制嵌套的布局表格如圖所示，嵌套的表格大小不能超過包含它的布局表格。5.2.2

繪制布局表格和布局單元格5.2表格布局138編輯ppt

（二）繪制布局單元格

1．切換到布局視圖模式

2．單擊“繪制布局單元格”按鈕

，鼠標(biāo)指針變?yōu)椤?”

3．在布局表格中合適位置，

按住鼠標(biāo)左鍵并拖動(dòng)，可以繪

制出布局單元格，單元格的框

線顯示為藍(lán)色，如圖所示。

4．要繪制多個(gè)單元格，

可以在按住Ctrl鍵的同時(shí)單擊

“繪制布局單元格”按鈕并繪制。5.2.2

繪制布局表格和布局單元格5.2表格布局139編輯ppt

（一）移動(dòng)布局表格和布局單元格

1．單擊布局表格標(biāo)簽，可以選中布局表格；單擊單元格邊框，可以選擇布局單元格；

2．用鼠標(biāo)拖動(dòng)布局表格或布局單元格到合適位置。

（二）調(diào)整布局表格和布局單元格大小

1．選擇要調(diào)整的布局表格和布局單元格。

2．選擇的表格或單元格四周會(huì)出現(xiàn)控制點(diǎn)，拖動(dòng)控制點(diǎn)可以調(diào)整其大小。

（三）向單元格中添加內(nèi)容

1．將光標(biāo)定位在要添加內(nèi)容的單元格。

2．插入文字和圖像等各種網(wǎng)頁元素。5.2.3

編輯布局表格和布局單元格5.2表格布局140編輯ppt

（四）刪除布局表格或布局單元格

刪除布局表格或布局單元格的操作為：

1．選擇要?jiǎng)h除的布局表格和布局單元格。

2．執(zhí)行以下操作之一：

?單擊菜單欄中“編輯”|“清除”命令。

?使用鍵盤上的“Delete”鍵。5.2.3

編輯布局表格和布局單元格5.2表格布局141編輯ppt

（五）設(shè)置布局表格屬性

1．布局表格屬性

2．布局單元格屬性

5.2.3

編輯布局表格和布局單元格5.2表格布局142編輯ppt

（四）利用表格制作垂直線和水平線

（1）在網(wǎng)頁中插入一個(gè)無邊框、無邊距的表格

（2）定位光標(biāo)在制作水平線的單元格內(nèi)

（3）在“屬性檢查器”中，設(shè)置高度（或?qū)挾龋椤?”，為單元格添加背景顏色。

（4）單擊“文檔”工具欄中的“拆分”按鈕，切換到“代碼和設(shè)計(jì)視圖”，刪除單元格內(nèi)的“ ”代碼，如圖。5.2.3

編輯布局表格和布局單元格5.2表格布局143編輯ppt

（4）保存網(wǎng)頁，在瀏覽器中預(yù)覽網(wǎng)頁，如圖所示。5.2.3

編輯布局表格和布局單元格5.2表格布局144編輯ppt5.3框架布局5.3.1建立框架5.3.2框架面板5.3.3設(shè)置框架的屬性5.3.4保存框架5.3.5框架中的超鏈接145編輯ppt

1．定位光標(biāo)在要插入框架集的窗口中。

2．執(zhí)行以下操作之一：

?單擊菜單欄中“插入”|“HTML”|“框架”命令，在子菜單中單擊相應(yīng)的框樣式。

?在“插入”欄的“布局”類別中，單擊框架按鈕右側(cè)的下拉按鈕，彈出下拉菜單，單擊相應(yīng)的框架集圖標(biāo)。建立框架網(wǎng)頁。5.3.1建立框架5.3框架布局146編輯ppt

（—）打開框架面板

單擊菜單欄中“窗口”|“框架”命令，打開框架面板。在面板中標(biāo)識(shí)了每個(gè)框的名稱。

（二）框架面板的基本操作：

1．選擇框架集：在“框架”面板中單擊最外層的邊框，使其出現(xiàn)粗黑邊顯示，則選中了框架集。

2．選擇框架：在“框架”面板中單擊要選擇的框架，使其出現(xiàn)細(xì)黑邊顯示，則選中了框架。5.3.2框架面板5.3框架布局147編輯ppt

（一）設(shè)置框架集屬性：選中框架集，打開框集屬性

1．邊框選項(xiàng)設(shè)置

2．框架集中框架大小設(shè)置

（二）設(shè)置框架屬性

選擇框架后（如選擇左側(cè)框架），打開框架屬性5.3.3

設(shè)置框架的屬性5.3框架布局148編輯ppt

（一）保存框架集的操作：

1．在框架面板中，選擇中要保存的框架集。

2．單擊菜單欄中“文件”|“保存框架頁”命令。

3．打開“另存為