全套課件-《網(wǎng)頁(yè)制作技術(shù)教程》-賀軍

網(wǎng)頁(yè)制作技術(shù)教程第1章網(wǎng)頁(yè)制作基礎(chǔ)

本章教學(xué)目的(1)熟悉網(wǎng)頁(yè)的基本概念及網(wǎng)頁(yè)的制作工具(2)熟悉Dreamweaver8的工作界面(3)掌握HTML命令(4)掌握站點(diǎn)的創(chuàng)建和管理目錄第一講網(wǎng)頁(yè)制作的基本概念及窗口第二講HTML命令及站點(diǎn)的創(chuàng)建

WWW（WorldWideWeb）：萬(wàn)維網(wǎng)的英文縮寫(xiě)，它以“超文本”方式將Internet上的數(shù)據(jù)連接在一起，使用戶(hù)能以簡(jiǎn)單的方式交換世界各地的信息。

WWW服務(wù)的出現(xiàn)，使得Internet風(fēng)行全球，其主要原因是：即使不懂計(jì)算機(jī)的人也能借助瀏覽器在網(wǎng)上獲得信息;可以在家里上網(wǎng)購(gòu)物、炒股、聊天、辦理銀行轉(zhuǎn)賬、收發(fā)信件等，它的服務(wù)主要是通過(guò)網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)的。

網(wǎng)頁(yè)(Web)：在瀏覽器上看到的畫(huà)面叫網(wǎng)頁(yè)，進(jìn)入網(wǎng)站后所看到的第一個(gè)頁(yè)面稱(chēng)為主頁(yè)（Homepage）。一般網(wǎng)上能識(shí)別的主頁(yè)名稱(chēng)為index.htm(index.html)或index.asp。網(wǎng)頁(yè)是用HTML語(yǔ)言或其他語(yǔ)言編寫(xiě)的，它的出色之處在于能夠把超鏈接嵌入其中，使多個(gè)網(wǎng)頁(yè)通過(guò)超鏈接方式關(guān)聯(lián)在一起。

網(wǎng)站(Site)：就是一組相關(guān)網(wǎng)頁(yè)的集合。設(shè)計(jì)者設(shè)計(jì)了幾個(gè)網(wǎng)頁(yè)，并且經(jīng)過(guò)組織規(guī)劃，讓網(wǎng)頁(yè)彼此相連，以便讓Internet上的人都能看到，這樣的完整結(jié)構(gòu)稱(chēng)為網(wǎng)站，所以，當(dāng)有人說(shuō)要制作主頁(yè)時(shí)，通常指的是要建立一個(gè)網(wǎng)站，并非單指一個(gè)頁(yè)面。1.1.1網(wǎng)頁(yè)制作的基本概念

URL(UniformResourceLocator)：統(tǒng)一資源定位符，簡(jiǎn)單地說(shuō)，它就網(wǎng)絡(luò)上一個(gè)網(wǎng)站的完整地址。每個(gè)主頁(yè)都對(duì)應(yīng)一個(gè)唯一的URL，這樣主頁(yè)在網(wǎng)上才能被訪(fǎng)問(wèn)到。URL是有統(tǒng)一規(guī)則的，它的語(yǔ)法格式如下。協(xié)議名稱(chēng)：//服務(wù)器主機(jī)名稱(chēng)[：通信端口/文件目錄/文件名稱(chēng)]

其中協(xié)議名稱(chēng)就是這個(gè)URL所連接的網(wǎng)絡(luò)服務(wù)器名稱(chēng)。例如，Http就是指WWW上的存取方式。

HTML：是英文HyperTextMarkupLanguage的縮寫(xiě)，翻譯成中文是“超文本標(biāo)識(shí)語(yǔ)言”,它通過(guò)各種各樣的標(biāo)識(shí)來(lái)編排超文本信息。HTML文件基本上就是一種文本文件，可以用簡(jiǎn)單的文字編輯器(如記事本、寫(xiě)字板)來(lái)編寫(xiě)，文件的擴(kuò)展名為.html。有些網(wǎng)絡(luò)中的服務(wù)器的操作系統(tǒng)只支持8.3的文本格式，既文件的擴(kuò)展名只能為三個(gè)字符，所以文件的擴(kuò)展名也可以為.htm。

瀏覽器(Browser)：是安裝在計(jì)算機(jī)上的一種軟件，通過(guò)它可以文便地看到Internet上提供的各種信息和服務(wù)資源，常用的瀏覽器有兩種InternetExplorer和NetscapeCommunicator,簡(jiǎn)稱(chēng)為IE和NC。

超文本（Hypertext）指具有超級(jí)鏈接功能的文件。它可以將文件中已經(jīng)定義好的關(guān)鍵字，通過(guò)鼠標(biāo)的單擊取得該關(guān)鍵字的相關(guān)解釋。目前大多數(shù)的文件是以超文本的方式提供給用戶(hù)的。

超鏈接(Hyperlink)：是WWW上的一種鏈接方式，通過(guò)單擊某個(gè)圖標(biāo)或某段文字，就可以自動(dòng)連接相對(duì)應(yīng)的其他文件，從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。1.1.2常見(jiàn)的網(wǎng)頁(yè)制作軟件1.所見(jiàn)即所得的網(wǎng)頁(yè)編輯工具

網(wǎng)頁(yè)制作編輯工具的作用就是用直觀的方式制作網(wǎng)頁(yè)。現(xiàn)在的網(wǎng)頁(yè)編輯工具絕大多數(shù)都是所見(jiàn)即得的，即我們實(shí)際操作的結(jié)果就是最終生成的網(wǎng)頁(yè)（HTML文檔）的效果，也就是說(shuō)，網(wǎng)頁(yè)編輯工具將HTML代碼的生成自動(dòng)化了。

最常見(jiàn)的網(wǎng)頁(yè)編輯工具是Frontpage、Dreamweaver。另外一個(gè)工具就是代碼編輯工具，例如寫(xiě)字本、EditPlus等，這些工具主要編輯asp等動(dòng)態(tài)網(wǎng)頁(yè)。

此外還有一些網(wǎng)絡(luò)編程工具，javascript、java編輯器等。2.素材處理工具（1）Photoshop（2）Fireworks（3）Flash1、菜單欄

Dreamweaver8的菜單欄里包括有文件、編輯、查看、插入、修改、文本、命令、站點(diǎn)、窗口、幫助等10個(gè)菜單項(xiàng)。單擊每個(gè)菜單項(xiàng)均會(huì)彈出一個(gè)下拉菜單，其中每個(gè)菜單項(xiàng)又包括若干命令，單擊該菜單命令即可。如圖所示。2、對(duì)象面板網(wǎng)頁(yè)的內(nèi)容雖然多種多樣，但它們都可以稱(chēng)為網(wǎng)頁(yè)元各素。簡(jiǎn)單的網(wǎng)頁(yè)元素如文字、圖像、表格等，復(fù)雜的如導(dǎo)航、程序等?！安迦搿惫ぞ邫诘墓δ苤饕褪窃诰W(wǎng)頁(yè)中插入各種類(lèi)型的網(wǎng)頁(yè)元素，如圖所示。

3.編輯窗口編輯窗口是編輯網(wǎng)頁(yè)時(shí)的主要窗口，新建或打開(kāi)一個(gè)網(wǎng)頁(yè)后，即可顯示（在圖像文件夾中）所示的窗口。它主要由項(xiàng)目選擇標(biāo)簽、文檔工具欄、編輯區(qū)域、狀態(tài)欄、標(biāo)尺、垂直和水平擴(kuò)展按鈕等組成。（1）項(xiàng)目選擇標(biāo)簽：當(dāng)打開(kāi)多個(gè)網(wǎng)頁(yè)文件時(shí)，將為每個(gè)文件顯示一個(gè)標(biāo)簽，單擊其中任意一個(gè)標(biāo)簽則可以在編輯區(qū)域中顯示該文件的內(nèi)容，并進(jìn)行編輯。而且選擇標(biāo)簽的右側(cè)有3個(gè)按鈕，可實(shí)現(xiàn)最小化、還原及關(guān)閉當(dāng)前窗口。1.2Dreamweaver8的工作界面

2）文檔工具欄：主要用于切換編輯區(qū)域視圖模式、設(shè)置網(wǎng)頁(yè)標(biāo)題、進(jìn)行標(biāo)簽驗(yàn)證及瀏覽器中瀏覽網(wǎng)頁(yè)等，如圖所示，其中各選項(xiàng)的功能及含義如下。按鈕：顯示代碼視圖，可在編輯窗口中直接輸入HTML代碼。按鈕：顯示代碼視圖和設(shè)計(jì)視圖，可在編輯窗口中同時(shí)進(jìn)行代碼和頁(yè)面設(shè)計(jì)。按鈕：顯示設(shè)計(jì)視圖，可在編輯窗口中進(jìn)行頁(yè)面設(shè)計(jì)。文本框：用于設(shè)置網(wǎng)頁(yè)標(biāo)題。按鈕：對(duì)網(wǎng)頁(yè)進(jìn)行瀏覽器錯(cuò)誤檢查。按鈕：對(duì)網(wǎng)頁(yè)中的標(biāo)簽進(jìn)行驗(yàn)證。按鈕：對(duì)站點(diǎn)中的文件進(jìn)行管理。按鈕：在瀏覽器中預(yù)覽和調(diào)試網(wǎng)頁(yè)。按鈕：刷新設(shè)計(jì)視圖。 按鈕：隱藏或顯示文件中的內(nèi)容、標(biāo)尺、網(wǎng)格和輔助線(xiàn)等對(duì)象。按鈕：隱藏或顯示層外框、表格寬度、表格邊框和框架邊框等可視化助理對(duì)象。（3）編輯區(qū)域：編輯網(wǎng)頁(yè)和編寫(xiě)網(wǎng)頁(yè)代碼的區(qū)域，該區(qū)域有代碼、拆分和設(shè)計(jì)3種視圖模式。（4）狀態(tài)欄：位于編輯區(qū)域的下方，其中包括標(biāo)簽選擇器、選取工具、手形工具、縮放工具、設(shè)置縮放比率下拉列表框、窗口大小欄和文件大小欄等項(xiàng)目。（5）水平和垂直標(biāo)尺：編輯網(wǎng)頁(yè)時(shí)方便查看或定位網(wǎng)頁(yè)中元素的坐標(biāo)位置。（6）垂直和水平擴(kuò)展按鈕：分別位于編輯區(qū)域的或側(cè)和下方，用于顯示或隱藏編輯窗口右側(cè)的浮動(dòng)面板及下方的屬性面板，以擴(kuò)展編輯窗口的寬度和高度。（7）“屬性”面板用于查看和更改當(dāng)前選擇對(duì)象的各種屬性，根據(jù)選擇對(duì)象的不同，“屬性”面板中設(shè)置的項(xiàng)目也不同，如圖所示。5.浮動(dòng)面板組浮動(dòng)面板組是停靠在編輯窗口右側(cè)的浮動(dòng)面板的集合，如圖所示。

1.3HTML命令

HTML是HyperTextMarkupLanguage（超文本標(biāo)記語(yǔ)言）的縮寫(xiě)。用HTML語(yǔ)言編制的文檔為HTML文檔，其文檔擴(kuò)展名通常是.htm或.html。1.3.1HTML語(yǔ)言的基本語(yǔ)法標(biāo)記是HTML語(yǔ)言的標(biāo)簽符號(hào)和用標(biāo)簽符號(hào)構(gòu)成的各種元素的統(tǒng)稱(chēng)，用來(lái)界定各種單元，用一對(duì)尖括號(hào)“〈〉”中間包含若干字符命令表示，前一個(gè)“〈〉”為起始標(biāo)記，后一個(gè)“〈∕〉”為結(jié)束標(biāo)記，單元的名稱(chēng)和屬性寫(xiě)在起始標(biāo)記內(nèi)。

HTML的標(biāo)記及其屬性有以下語(yǔ)法規(guī)則。（1）〈HTML〉標(biāo)記（最外層的標(biāo)記）語(yǔ)法規(guī)則：〈HTML〉…〈／HTML〉

屬性：VERSION=String（2）〈HEAD〉標(biāo)記（用來(lái)標(biāo)記HTML文檔的頁(yè)首）語(yǔ)法規(guī)則：〈HEAD〉…〈／HEAD〉（3）〈TITLE〉標(biāo)記（設(shè)置網(wǎng)頁(yè)標(biāo)題）語(yǔ)法規(guī)則：〈TITLE〉…〈／TITLE〉（4）〈BODY〉標(biāo)記（標(biāo)注HTML文檔的正文）語(yǔ)法規(guī)則：〈BODY〉…〈／BODY〉

屬性：BACKGROUND=URL指定用于網(wǎng)頁(yè)背景圖片文件的地址

BGCOLOR=#RRGGBB指定背景色彩

TEXT=#RRGGBB指定非可鏈接文字的色彩

LINK=#RRGGBB指定可鏈接文字的色彩

ALINK=#RRGGBB指定正被鼠標(biāo)點(diǎn)擊的可鏈接文字的色彩

VLINK=#RRGGBB指定已被鼠標(biāo)點(diǎn)擊的可鏈接文字的色彩提示：#RRGGBB是指色彩紅—綠—藍(lán)的值,用16進(jìn)制數(shù)碼表示，根椐規(guī)范前面需加“#”。（5）〈HN〉標(biāo)記（標(biāo)注文檔正文的各級(jí)標(biāo)題）語(yǔ)法規(guī)則：〈HN〉…〈／HN〉屬性：ALIGN=left→right→center→justify（6）〈P〉標(biāo)記（顯示段落標(biāo)記）語(yǔ)法規(guī)則：〈P〉…[〈／P〉]屬性：ALIGN=left→center→right（7）〈BR〉標(biāo)記(強(qiáng)制換行標(biāo)記)語(yǔ)法規(guī)則：〈BR〉（8）〈PRE〉標(biāo)記(預(yù)格式化文本標(biāo)記)語(yǔ)法規(guī)則：〈PRE〉…〈PRE〉屬性：WIDTH=n常用的HTML標(biāo)記符如下：<P>…</P>：段落標(biāo)記符<BR>：換行標(biāo)記符<Center>…</Center>：居中標(biāo)記符<u>…</u>：下劃線(xiàn)標(biāo)記符<b>…</b>：加粗標(biāo)記符<i>…</i>：斜體表記符<hn>…</hn>：標(biāo)題標(biāo)記符（n取1～6之間的正整數(shù)）<UL>…</UL>：無(wú)序列表標(biāo)記符<Li>…</Li>：列表項(xiàng)標(biāo)記符常用表格標(biāo)記符如下：<table>…</table>：定義表格<tr>…</tr>：定義行<th>…</th>：定義表頭<td>…</td>：定義數(shù)據(jù)表格屬性如下：跨多列：<thcolspan=#>跨多行：<throwspan=#>邊框：<tableborder=#>表格大?。?lt;tablewidth=#height=#>第二講HTML命令和創(chuàng)建站點(diǎn)1.3.2HTML文檔的基本結(jié)構(gòu)一個(gè)HTML文檔是由標(biāo)記和文本內(nèi)容組成，其結(jié)構(gòu)如下：<HTML><HEAD><TITLE>……</TITLE></HEAD><BODY>……</BODY></HTML>【任務(wù)1-1-1】創(chuàng)建簡(jiǎn)單的HTML文件【操作要求】在“D:\root\unit1”新建文件夾y1-01，然后創(chuàng)建一個(gè)新的HTML文件，并保存HTML文件到“D:\root\unit1\y1-01”，文件名為：Y1-0A.html?！静僮鞑襟E】（1）打開(kāi)“D:\root\unit1”，單擊鼠標(biāo)右鍵，選擇【新建】→【文件夾】菜單命令，命名為y1-01。（2）啟動(dòng)Dreamweaver,選擇【創(chuàng)建新項(xiàng)目】→【HTML】菜單命令。（3）選擇“代碼”項(xiàng)。（4）輸入如下代碼：<htmlVERSION="/1999/xhtml"><head><title>簡(jiǎn)單HTML文件的編寫(xiě)教程</title><styletype="text/css"><!--.STYLE1{ font-family:"華文行楷"; font-size:18px; font-weight:bold;}.STYLE2{ font-size:16px; font-weight:bold;}.STYLE3{font-size:14px}--></style></head><body><pclass="STYLE1">全國(guó)計(jì)算機(jī)信息高新技術(shù)考試</p><pclass="STYLE2">第1章網(wǎng)頁(yè)制作基礎(chǔ)</p><p>本章主要介紹網(wǎng)頁(yè)的基本概念及HTML語(yǔ)言等。</p><pclass="STYLE3"><strong>1.1網(wǎng)頁(yè)的基本概念</strong></p><pclass="STYLE3"><strong>1.2HTML命令</strong></p><p>1.2.1HTML語(yǔ)言的基本語(yǔ)法</p><p>1.2.2HTM語(yǔ)言的基本結(jié)構(gòu)</p></body></html>（5）按F12，運(yùn)行后結(jié)果將如教材所示。至此，操作完畢。1.4站點(diǎn)的創(chuàng)建1.4.1站點(diǎn)的規(guī)劃在制作網(wǎng)頁(yè)之前，應(yīng)先對(duì)要制作的網(wǎng)站的站點(diǎn)進(jìn)行規(guī)劃和創(chuàng)建，這樣就可利用站點(diǎn)的管理功能對(duì)站點(diǎn)中的文件進(jìn)行管理或測(cè)試。1.認(rèn)識(shí)站點(diǎn)在Dreamweaver8中提供了本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測(cè)試站點(diǎn)3種類(lèi)型的站點(diǎn)。通過(guò)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)可以在本地磁盤(pán)和Web服務(wù)器之間傳輸文件，通過(guò)測(cè)試站點(diǎn)可以對(duì)動(dòng)態(tài)站點(diǎn)進(jìn)行測(cè)試。（1）本地站點(diǎn)本地站點(diǎn)是用戶(hù)工作的目錄，是存放用戶(hù)網(wǎng)頁(yè)、素材等的本地文件夾。在制作一般網(wǎng)頁(yè)時(shí)只需建立本地站點(diǎn)即可。（2）遠(yuǎn)程站點(diǎn)若需要不連接Internet就能對(duì)所建的站點(diǎn)進(jìn)行測(cè)試，可以在本地電腦上創(chuàng)建遠(yuǎn)程站點(diǎn)模擬真實(shí)的Web服務(wù)器環(huán)境進(jìn)行測(cè)試。（3）測(cè)試站點(diǎn)測(cè)試站點(diǎn)主要是對(duì)動(dòng)態(tài)頁(yè)面進(jìn)行測(cè)試時(shí)使用，是Dreamweaver處理動(dòng)態(tài)頁(yè)面的文件夾。Dreamweaver使用此文件夾生成動(dòng)態(tài)內(nèi)容并在工作時(shí)連接到數(shù)據(jù)庫(kù)。2.規(guī)劃站點(diǎn)結(jié)構(gòu)規(guī)劃站點(diǎn)結(jié)構(gòu)是指利用不同的文件夾將不同的網(wǎng)頁(yè)內(nèi)容分門(mén)別類(lèi)地保存，合理地組織站點(diǎn)結(jié)構(gòu)，可提高工作效率。在規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)應(yīng)先在本地磁盤(pán)上創(chuàng)建一個(gè)文件夾作為站點(diǎn)的根目錄，所有在制作過(guò)程中創(chuàng)建和編輯的網(wǎng)頁(yè)都應(yīng)當(dāng)保存在該文件夾中。在發(fā)布站點(diǎn)時(shí)，只需將此文件夾中的所有內(nèi)容上傳到Web服務(wù)器上即可。如果站點(diǎn)結(jié)構(gòu)復(fù)雜，內(nèi)容較多，則還需建立子文件夾，以存放不同內(nèi)容的網(wǎng)頁(yè)。

在站點(diǎn)規(guī)劃中合理地為文件和文件夾進(jìn)行命名也非常重要，好的名稱(chēng)容易理解，能夠表達(dá)出網(wǎng)頁(yè)的內(nèi)容?？梢圆捎门c文件或文件夾內(nèi)容相對(duì)應(yīng)的英文或拼音來(lái)命名，且避免使用長(zhǎng)文件名和中文，比如圖片文件夾可以命名為images或tupian。制作網(wǎng)頁(yè)所需的圖片或動(dòng)畫(huà)等文件存放的位置也是規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)應(yīng)考慮的。如果是大型站點(diǎn)，可在站點(diǎn)根目錄下創(chuàng)建一個(gè)名稱(chēng)為images的文件夾，用以存放主頁(yè)中用到的圖片和動(dòng)畫(huà)。3.制作導(dǎo)航流程做好站點(diǎn)的規(guī)劃后，就可以根據(jù)規(guī)劃制作一個(gè)導(dǎo)航流程圖，以便理清思路，制作時(shí)可直接在紙上粗略地繪出導(dǎo)航流程圖。如圖所示是一個(gè)音樂(lè)網(wǎng)站最初的導(dǎo)航草圖。海外中國(guó)主題曲“天籟之音”網(wǎng)站首頁(yè)最新動(dòng)態(tài)流行音樂(lè)古典音樂(lè)原聲碟電影音樂(lè)民族音樂(lè)人物作曲家歌星

4.繪制頁(yè)面草圖制作好導(dǎo)航流程圖后，接下來(lái)應(yīng)確定整個(gè)站點(diǎn)的頁(yè)面風(fēng)格，也就是設(shè)計(jì)站點(diǎn)的樣式和版面草圖。它可以用Photoshop、CorelDRAW和Fireworks等圖形軟件制作。海外中國(guó)主題曲“天籟之音”網(wǎng)站首頁(yè)最新動(dòng)態(tài)流行音樂(lè)古典音樂(lè)原聲碟電影音樂(lè)民族音樂(lè)人物作曲家歌星【任務(wù)1-1-2】創(chuàng)建本地站點(diǎn)【操作要求】在“D:\root\unit1”新建文件夾y1-01，然后創(chuàng)建一個(gè)新的本地站點(diǎn)root?！静僮鞑襟E】（1）選擇【站點(diǎn)】【管理站點(diǎn)】菜單命令，彈出“管理站點(diǎn)”對(duì)話(huà)框。（2）選擇“新建”按鈕,在彈出的下拉菜單中選擇“站點(diǎn)”命令，具體操作如圖所示。（3）在對(duì)話(huà)框中輸入站點(diǎn)名稱(chēng)如“root“后單擊按鈕，如圖所示。（4）在彈出的對(duì)話(huà)框中選是否使用服務(wù)器技術(shù)，由于我們?cè)诒镜赜脖P(pán)上進(jìn)行測(cè)試，所以這里選擇“否，我不想使用服務(wù)器技術(shù)”單選按鈕，如圖所示，單擊“下一步”按鈕。（5）由于我們將在本地硬盤(pán)上進(jìn)行站點(diǎn)的制作和測(cè)試，因此在彈出的對(duì)話(huà)框中選擇“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器”單選按鈕（如下圖所示），在該對(duì)話(huà)框中還要選擇站點(diǎn)文件的存放位置，可在文本框中直接輸入，也可以單擊文本框旁邊的瀏覽按鈕，在打開(kāi)的“選擇站點(diǎn)root的本地根文件夾：”對(duì)話(huà)框中選擇存放站點(diǎn)文件的文件夾，然后選擇需存放的位置即可。（6）單擊“下一步”按鈕，在彈出的對(duì)話(huà)框中選擇“否，不啟用存回和取出”，如圖所示。（7）單擊“下一步”按鈕，顯示創(chuàng)建的站點(diǎn)信息，如果需要修改設(shè)置可以單擊“上一步”按鈕，如果沒(méi)有問(wèn)題，單擊“完成”按鈕關(guān)閉對(duì)話(huà)框。至此，操作完畢。如圖所示。上機(jī)作業(yè)1、【實(shí)戰(zhàn)訓(xùn)練一】第1－3步驟2、【拓展實(shí)戰(zhàn)一】第1—3步驟3、【拓展實(shí)戰(zhàn)二】HTML文檔的基本結(jié)構(gòu)的操作本講小結(jié)1.1.1網(wǎng)頁(yè)制作的基本概念1.1.2Dreamweaver8的工作界面

1.1.3HTML命令

1.1.4創(chuàng)建本地站點(diǎn)第2章網(wǎng)頁(yè)制作

本章教學(xué)目的①掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法。②熟練掌握在網(wǎng)頁(yè)中輸入、設(shè)置標(biāo)題和正文文字的方法。③掌握在網(wǎng)頁(yè)中嵌入圖像、聲音、多媒體信息的方法。④掌握建立各種形式超級(jí)鏈接的方法。⑤熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法。⑥掌握制作表單的方法。⑦掌握在網(wǎng)頁(yè)中添加CSS的方法。⑧掌握網(wǎng)頁(yè)特效的制作方法。⑨掌握模板和庫(kù)的使用方法。⑩掌握行為的使用方法。目錄第一講文檔及文本操作第二講圖像及超級(jí)鏈接第三講媒體及表格第四講框架及圖層第五講表單、模板和庫(kù)第六講CSS樣式第七講行為第一講

文檔及文本操作[教學(xué)內(nèi)容]1新建空白文檔網(wǎng)頁(yè)

2設(shè)置頁(yè)面屬性

3保存文檔

4文本的輸入及格式

5列表、水平線(xiàn)等其他元素

6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容[教學(xué)重點(diǎn)和難點(diǎn)]網(wǎng)頁(yè)文件的建立、頁(yè)面屬性的設(shè)置、網(wǎng)頁(yè)中文本等元素的輸入以及文件頭部?jī)?nèi)容的設(shè)置文檔及文本操作2.1文檔操作

2.1.1新建空白文檔網(wǎng)頁(yè)

2.1.2設(shè)置頁(yè)面屬性

2.1.3保存文檔2.2文本操作

2.2.1在網(wǎng)頁(yè)中輸入文本

2.2.2設(shè)置文本屬性

2.2.3文本換行

2.2.4插入特殊字符和在字符之間添加空格

2.2.5使用列表

2.2.6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容

2.2.7插入水平線(xiàn)和時(shí)間2.1.1新建空白文檔網(wǎng)頁(yè)新建一個(gè)網(wǎng)頁(yè)文檔有兩種方法：（1）如果您的Dreamweaver運(yùn)行后顯示起始頁(yè)，則在起始頁(yè)中直接選擇“創(chuàng)建新項(xiàng)目”下的HTML選項(xiàng)。（2）如果您的Dreamweaver運(yùn)行后不顯示起始頁(yè)，則選擇“文件”→“新建”命令，彈出“新建文檔”對(duì)話(huà)框，通過(guò)該對(duì)話(huà)框完成新建?！救蝿?wù)2-1-1】新建空白文檔網(wǎng)頁(yè)【操作要求】在站點(diǎn)根目錄（D:\root）下建立一個(gè)名為index.html的網(wǎng)頁(yè)【操作步驟】（1）啟動(dòng)Dreamweaver后，在文件面板中選擇“站點(diǎn)－我的站點(diǎn)”，如圖1所示。單擊文件面板中的按鈕，在“文件”的級(jí)聯(lián)菜單中選擇“新建文件”選項(xiàng)，如圖2所示。【任務(wù)2-1-1】新建空白文檔網(wǎng)頁(yè)圖1圖2【任務(wù)2-1-1】新建空白文檔網(wǎng)頁(yè)（2）在文件面板的“站點(diǎn)－我的站點(diǎn)（D:\root）”文件夾中出現(xiàn)了一個(gè)新文件，名稱(chēng)為untitled.html，如圖3所示。將其重命名為index.html，如圖4所示。（3）在文件面板中，雙擊index.html即可在Dreamweaver的文檔窗口中打開(kāi)該網(wǎng)頁(yè)，對(duì)其進(jìn)行編輯修改。【任務(wù)2-1-1】新建空白文檔網(wǎng)頁(yè)圖3圖42.1.2設(shè)置頁(yè)面屬性

在制作網(wǎng)頁(yè)時(shí)，還需要對(duì)影響整個(gè)頁(yè)面的參數(shù)進(jìn)行必要的設(shè)置。 選擇“修改”→“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話(huà)框，如圖5所示。

1．設(shè)置外觀

2．設(shè)置鏈接

3．設(shè)置標(biāo)題

4．設(shè)置標(biāo)題和編碼

5．設(shè)置跟蹤圖像圖5【任務(wù)2-1-2】頁(yè)面屬性設(shè)置【操作要求】在文檔窗口中打開(kāi)D:\root\index.html網(wǎng)頁(yè)，將網(wǎng)頁(yè)標(biāo)題設(shè)為“我的主頁(yè)”，文本字體為“仿宋”，大小為12像素，顏色為#00FF00?！静僮鞑襟E】（1）在文檔窗口中打開(kāi)D:\root\index.html網(wǎng)頁(yè)，右擊窗口空白處，彈出一個(gè)快捷菜單如圖6所示，從中選擇“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話(huà)框，如圖7所示。圖6圖7（2）在“分類(lèi)”列表框中選擇“外觀”選項(xiàng)，單擊“頁(yè)面字體”下拉列表框查找所需字體，在字體列表中無(wú)所需字體則選擇“編輯字體列表”，彈出“編輯字體列表”對(duì)話(huà)框。（3）在該對(duì)話(huà)框中的“可用字體”列表框中找到“仿宋”，單擊按鈕，則“仿宋”字體添加到了“選擇的字體”列表框中。（4）在“外觀”選項(xiàng)中，在“大小”下拉列表框中選擇12，在“文本顏色”文本框中輸入#00FF00，如圖8所示。（５）在“分類(lèi)”列表框中選擇“標(biāo)題和編碼”選項(xiàng)，在標(biāo)題對(duì)話(huà)框中輸入“我的主頁(yè)”，單擊“確定”按鈕，操作完成。圖82.1.3保存文檔

新建一個(gè)文件后，選擇“文件”→“保存”命令，彈出“另存為”對(duì)話(huà)框，在“另存為”對(duì)話(huà)框選中保存路徑，給文件命名，選擇保存類(lèi)型，然后單擊“保存”按鈕即可完成文件保存。2.2文本操作

文本是網(wǎng)頁(yè)中不可或缺的元素，網(wǎng)頁(yè)中的文本用來(lái)傳達(dá)網(wǎng)頁(yè)包含的各種信息與提示。文本的信息量大且生成的文件小，容易被瀏覽器下載，不會(huì)讓瀏覽者用過(guò)多的時(shí)間等待，因此，不論網(wǎng)頁(yè)內(nèi)容如何豐富，文本始終都是網(wǎng)頁(yè)中的基本元素。同時(shí)掌握好文本的使用也是網(wǎng)頁(yè)制作的基本功。2.2.1在網(wǎng)頁(yè)中輸入文本在網(wǎng)頁(yè)中輸入文本的方法很簡(jiǎn)單，單擊網(wǎng)頁(yè)中要插入文本的空白區(qū)域，窗口隨即出現(xiàn)閃動(dòng)的光標(biāo)，選擇輸入法，輸入文字即可。也可以用復(fù)制方法將其他文本內(nèi)容粘貼過(guò)來(lái)。2.2.2設(shè)置文本屬性文本的屬性主要通過(guò)文本的“屬性”面板來(lái)完成，如圖9所示。圖92.2.3文本換行（1）按Enter鍵可以換行，同時(shí)也就結(jié)束了一個(gè)段落，且可以使兩段之間多出一空行。（2）按Shift+Enter鍵，文檔在同一個(gè)段落中換行，兩行之間不產(chǎn)生空行。2.2.4插入特殊字符和在字符之間添加空格1．插入特殊字符在Dreamweaver中可以插入的特殊字符包括版權(quán)符號(hào)、注冊(cè)商標(biāo)符號(hào)、商標(biāo)符號(hào)、英鎊符號(hào)、日元符號(hào)、左引號(hào)、右引號(hào)、破折號(hào)等。插入特殊字符可以通過(guò)“插入”菜單或“插入”面板來(lái)完成。2．在字符之間添加空格在Dreamweaver中只允許字符之間包含一個(gè)空格，若要在文檔中添加連續(xù)多個(gè)空格時(shí)，可執(zhí)行如下操作之一：（1）在“插入”面板中選擇“文本”子面板，在其中單擊按鈕，打開(kāi)特殊字符面板，選擇“插入不換行空格”選項(xiàng)。（2）選擇“插入”→HTML→“特殊字符”→“不換行空格”命令。（3）按Ctrl+Shift+空格鍵輸入。（4）將輸入法切換到全角狀態(tài)再按空格鍵。2.2.5使用列表在Dreamweaver中常用的列表分為有序列表（編號(hào)列表）、無(wú)序列表（項(xiàng)目列表）和自定義列表3種形式。插入項(xiàng)目、編號(hào)列表的方法：將現(xiàn)有文本設(shè)置成項(xiàng)目列表：（1）選擇要定義列表的文本，選擇“文本”→“列表”→“項(xiàng)目／編號(hào)列表”命令。（2）選擇要定義列表的文本，在“屬性”面板中單擊列表按鈕。將新文本設(shè)置成項(xiàng)目列表，則在輸入文本之前，先選擇項(xiàng)目列表。2.2.6在網(wǎng)頁(yè)中插入文件頭部?jī)?nèi)容一個(gè)網(wǎng)頁(yè)文檔由頭部和正文兩個(gè)部分組成。文檔的標(biāo)題信息就存儲(chǔ)在頭部位置，在瀏覽網(wǎng)頁(yè)時(shí)，它會(huì)顯示在瀏覽器的標(biāo)題欄中，當(dāng)該網(wǎng)頁(yè)被放入到瀏覽器的收藏夾時(shí)，文檔的標(biāo)題又會(huì)作為收藏夾中項(xiàng)目的名稱(chēng)。頭部?jī)?nèi)容是網(wǎng)頁(yè)中必須添加的信息,它幫助網(wǎng)頁(yè)實(shí)現(xiàn)功能。1．插入Meta屬性

Meta標(biāo)簽是記錄有關(guān)當(dāng)前頁(yè)面的信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字）的Head元素。2．插入關(guān)鍵字 許多搜索引擎裝置（自動(dòng)瀏覽Web頁(yè)為搜索引擎收集信息以編入索引的程序）讀取關(guān)鍵字Meta標(biāo)簽的內(nèi)容，并使用該信息在它們的數(shù)據(jù)庫(kù)中將你的頁(yè)面編入索引。3．插入說(shuō)明文字 許多搜索引擎裝置讀取說(shuō)明Meta標(biāo)簽的內(nèi)容。4．設(shè)置網(wǎng)頁(yè)的刷新 使用刷新元素可以指定瀏覽器在一定的時(shí)間后應(yīng)該自動(dòng)刷新頁(yè)面，方法是重新載入當(dāng)前頁(yè)面或轉(zhuǎn)到不同的頁(yè)面。該元素通常用于在顯示了說(shuō)明URL已改變的文本消息后，將用戶(hù)從一個(gè)URL重定向到另一個(gè)URL。5．設(shè)置基礎(chǔ)屬性 使用Base元素可以設(shè)置頁(yè)面中所有文檔相對(duì)路徑相對(duì)的基礎(chǔ)URL。6．設(shè)置鏈接標(biāo)簽的屬性 使用“鏈接”標(biāo)簽可以定義當(dāng)前文檔與其他文件之間的關(guān)系。2.2.7插入水平線(xiàn)和時(shí)間1．插入水平線(xiàn) 水平線(xiàn)對(duì)于信息的組織很有用。在頁(yè)面上，可以使用一條或多條水平線(xiàn)以可視方式分隔文本和對(duì)象。2．插入時(shí)間

Dreamweaver提供了一個(gè)方便的日期對(duì)象，該對(duì)象使可以以任何喜歡的格式插入當(dāng)前日期（包含或不包含時(shí)間都可以），并在每次保存文件時(shí)都自動(dòng)更新該日期?！救蝿?wù)2-2-1】插入日期【操作要求】將當(dāng)前日期插入到文檔中【操作步驟】（1）在“文檔”窗口中將插入點(diǎn)放在要插入日期的位置。（2）執(zhí)行下列操作之一： 選擇“插入”→“日期”命令，打開(kāi)“插入日期”對(duì)話(huà)框。 在“插入”面板中選擇“常用”子面板，單擊按鈕，也會(huì)打開(kāi)“插入日期”對(duì)話(huà)框。（3）在該對(duì)話(huà)框中選擇星期格式、日期格式和時(shí)間格式。（4）單擊“確定”按鈕即可插入日期。

本講小結(jié)

本講主要介紹網(wǎng)頁(yè)文件的建立、頁(yè)面屬性的設(shè)置、網(wǎng)頁(yè)中文本等元素的輸入以及文件頭部?jī)?nèi)容的設(shè)置上機(jī)作業(yè)【上機(jī)要求】 在網(wǎng)頁(yè)中輸入文本與編輯文本、掌握輸入空格和實(shí)現(xiàn)文本換行的方法；學(xué)會(huì)在網(wǎng)頁(yè)中插入水平線(xiàn)和日期；掌握網(wǎng)頁(yè)文本格式化操作第二講圖像及超級(jí)鏈接[教學(xué)內(nèi)容]1插入圖像和設(shè)置圖像屬性插入占位符鼠標(biāo)經(jīng)過(guò)圖像設(shè)置導(dǎo)航條的創(chuàng)建關(guān)于鏈接路徑創(chuàng)建外部鏈接創(chuàng)建內(nèi)部鏈接創(chuàng)建其他鏈接[教學(xué)重點(diǎn)和難點(diǎn)]

在網(wǎng)頁(yè)中插入圖像、圖像對(duì)象以及插入超級(jí)鏈接圖像及超級(jí)鏈接2.3圖像操作2.3.1插入圖像2.3.2設(shè)置圖像的一般屬性2.3.3插入占位符2.3.4鼠標(biāo)經(jīng)過(guò)圖像設(shè)置2.3.5導(dǎo)航條的創(chuàng)建2.4超級(jí)鏈接2.4.1關(guān)于鏈接路徑2.4.2創(chuàng)建外部鏈接2.4.3創(chuàng)建內(nèi)部鏈接2.4.4創(chuàng)建E-mail鏈接2.4.5創(chuàng)建錨點(diǎn)鏈接2.4.6創(chuàng)建腳本鏈接2.4.7創(chuàng)建空鏈接2.4.8圖像熱點(diǎn)鏈接

2.3圖像操作

由于受網(wǎng)絡(luò)速度等方面的影響，因此在網(wǎng)頁(yè)制作中圖像的格式有一定的要求，一般用于網(wǎng)頁(yè)的圖像要求是GIF、JPEG或PNG三種格式中的一種。2.3.1插入圖像插入圖像的具體方法：選擇“插入”→“圖像”菜單；單擊“插入”面板“常用”子面板中的按鈕；按Ctrl+Alt+I鍵2.3.2設(shè)置圖像的一般屬性設(shè)置圖像屬性具體操作如下。

能選取要編輯的圖像，展開(kāi)“圖像”屬性面板，如圖10所示。其左上角顯示了選取圖像的縮略圖，“源文件”文本框中顯示了插入圖像的源位置。屬性具體含義如下：圖10【寬】【高】是圖片的尺寸，默認(rèn)單位是象素。【源文件】是圖片的路徑，點(diǎn)擊后面的文件夾圖標(biāo)也能選擇其他圖片。【鏈接】是鏈接的目標(biāo)頁(yè)面或者定位點(diǎn)的URL。【目標(biāo)】鏈接時(shí)的目標(biāo)窗口或框架?！咎娲渴菆D片的文字注釋?zhuān)?dāng)圖片不能正常顯示的時(shí)候，圖片的位置就會(huì)顯示文字注釋。【編輯】啟動(dòng)圖像編輯軟件對(duì)圖像編輯。【地圖】用于制作圖像映射（熱點(diǎn)）【垂直邊距】【水平邊距】圖像在垂直或水平方向與網(wǎng)頁(yè)中其他元素之間的距離。【邊框】圖像邊框的寬度。選擇空白或零時(shí)沒(méi)有邊框?！緦?duì)齊】下拉列表用于指定圖片相對(duì)于文本的排列方式?！镜徒馕龆仍础慨?dāng)前圖片的低分辨率副本的路徑。如果圖片很大，則先讓瀏覽器下載顯示一個(gè)文件較小的圖片副本，瀏覽器裝載完其他內(nèi)容后再回頭來(lái)下載較大的圖像，這樣做既能保持網(wǎng)頁(yè)的完整性，又能減少用戶(hù)等待時(shí)間。2.3.3插入占位符

如果目前還不確定該插入哪幅圖像，但可以確定圖像的大小，則可以使用占位符的方式插入圖像，當(dāng)確定好要插入的圖像時(shí)再進(jìn)行插入即可。（1）將光標(biāo)定位到要插入圖像的位置（文本、層或表格中）。（2）執(zhí)行以下方法之一：選擇“插入”→“圖像對(duì)象”→“圖像占位符”命令。選擇“插入”面板的“常用”子面板中的按鈕后的下拉按鈕，在打開(kāi)的列表中選擇“圖像占位符”選項(xiàng)。2.3.4鼠標(biāo)經(jīng)過(guò)圖像設(shè)置

鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針移過(guò)它時(shí)發(fā)生變化的圖像。鼠標(biāo)經(jīng)過(guò)圖像由兩個(gè)圖像組成：主圖像和次圖像。鼠標(biāo)經(jīng)過(guò)圖像中的兩個(gè)圖像其大小應(yīng)相等，如果兩個(gè)圖像大小不同，Dreamweaver將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的大小。插入鼠標(biāo)經(jīng)過(guò)圖像的具體操作如下。（1）在“文檔”窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過(guò)圖像的位置。（2）使用以下方法之一插入鼠標(biāo)經(jīng)過(guò)圖像。單擊“插入”面板的“常用”子面板中的按鈕后的下拉按鈕，單擊“鼠標(biāo)經(jīng)過(guò)圖像”按鈕；選擇“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過(guò)圖像”命令，如圖11所示。圖112.3.5導(dǎo)航條的創(chuàng)建

導(dǎo)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨操作不同而不同，一個(gè)網(wǎng)頁(yè)中只允許有一個(gè)導(dǎo)航條，導(dǎo)航條項(xiàng)目有如下4種狀態(tài)：一般：尚未單擊或尚未與此項(xiàng)目交互時(shí)所顯示的圖像?；^(guò)：指鼠標(biāo)指針滑過(guò)“一般”圖像時(shí)所顯示的圖像。項(xiàng)目的外觀發(fā)生變化（例如變得更亮），以便讓知道可與這個(gè)項(xiàng)目進(jìn)行交互。按下：指項(xiàng)目被單擊后所顯示的圖像。按下時(shí)鼠標(biāo)經(jīng)過(guò)：指在項(xiàng)目被單擊后，鼠標(biāo)指針滑過(guò)“按下”圖像時(shí)，所顯示的圖像。插入導(dǎo)航條的具體操作如下：（1）將光標(biāo)定位到要插入導(dǎo)航條的位置。（2）執(zhí)行下列操作之一打開(kāi)“插入導(dǎo)航條”對(duì)話(huà)框：選擇“插入”面板的“常用”子面板中按鈕后的下拉按鈕，并單擊“插入導(dǎo)航條”按鈕。選擇“插入”→“圖像對(duì)象”→“導(dǎo)航條”命令?！救蝿?wù)2-3】建立網(wǎng)站相冊(cè)【操作要求】 在Dreamweaver中內(nèi)置了創(chuàng)建網(wǎng)站相冊(cè)的命令，但此命令實(shí)際是調(diào)用了Fireworks的圖片處理功能，因此，如果要?jiǎng)?chuàng)建網(wǎng)站相冊(cè)，必須先安裝Fireworks軟件。另外，為了創(chuàng)建網(wǎng)站相冊(cè)，還需要收集建立相冊(cè)的圖片。在開(kāi)始創(chuàng)建相冊(cè)之前，將相冊(cè)的所有圖像放置在一個(gè)文件夾中。另外，制作相冊(cè)的原始圖像文件類(lèi)型是以gif、jpg、jpeg、png、psd、tif或tiff為擴(kuò)展名?！静僮鞑襟E】首先創(chuàng)建一個(gè)名為“電子相冊(cè)”的站點(diǎn)，設(shè)置本地文件夾為F:\photo，并在該文件夾下新建兩個(gè)文件夾，分別取名為Source和Object，然后在Source文件夾中放入收藏的圖片。做好上述的準(zhǔn)備工作之后，接下來(lái)開(kāi)始創(chuàng)建網(wǎng)站相冊(cè)，具體操作如下：（1）選擇“命令”→“創(chuàng)建網(wǎng)站相冊(cè)”命令，彈出“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話(huà)框。（2）在“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話(huà)框中對(duì)各種參數(shù)進(jìn)行設(shè)置。（3）單擊“確定”按鈕，F(xiàn)ireworks自動(dòng)啟動(dòng)并創(chuàng)建縮略圖和大尺寸圖像。當(dāng)處理完成后，Dreamweaver將再次處于活動(dòng)狀態(tài)并創(chuàng)建包含縮略圖的Web頁(yè)。（4）當(dāng)出現(xiàn)提示“相冊(cè)已經(jīng)建立”的對(duì)話(huà)框時(shí)，單擊“確定”按鈕。（5）等待幾秒鐘，相冊(cè)頁(yè)即可出現(xiàn)，各縮略圖根據(jù)文件名按字母順序顯示。（6）按F12鍵在瀏覽器中預(yù)覽效果。2.4超級(jí)鏈接

鏈接是一個(gè)網(wǎng)站的靈魂，一個(gè)網(wǎng)站是由多個(gè)頁(yè)面組成的，而這些頁(yè)面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。 超級(jí)鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間、站點(diǎn)與Web之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)的網(wǎng)頁(yè)成為有機(jī)的整體，還能使不同站點(diǎn)之間建立聯(lián)系。超級(jí)鏈接由兩部分組成：鏈接點(diǎn)和鏈接目標(biāo)。2.4.1關(guān)于鏈接路徑（1）絕對(duì)路徑（2）相對(duì)路徑（3）根路徑2.4.2創(chuàng)建外部鏈接不論是文字還是圖像，都可以創(chuàng)建鏈接到絕對(duì)地址的外部鏈接。創(chuàng)建鏈接的方法有兩個(gè)：一個(gè)是直接輸入地址，另一個(gè)是使用“超級(jí)鏈接”對(duì)話(huà)框?！救蝿?wù)2-4-1】外部鏈接【操作要求】 在Root網(wǎng)站的主頁(yè)（index.html）中創(chuàng)建鏈接到“懷化職業(yè)技術(shù)學(xué)院”網(wǎng)站，且在原瀏覽器窗口中打開(kāi)的鏈接?！静僮鞑襟E】方法1：直接輸入地址（1）打開(kāi)主頁(yè)index.html，在文本窗口中輸入并選中文字“懷化職業(yè)技術(shù)學(xué)院”。在“屬性”面板中，“鏈接”組合框用來(lái)設(shè)置圖像或文字的超鏈接，“目標(biāo)”下拉列表框用來(lái)設(shè)置打開(kāi)方式。（2）在“鏈接”組合框中直接輸入外部絕對(duì)地址，在“目標(biāo)”下拉列表框中選擇_self，方法2：使用“超級(jí)鏈接”對(duì)話(huà)框（1）在主頁(yè)index.html的文檔窗口中，單擊“常用”子面板中的“超級(jí)鏈接”按鈕，彈出“超級(jí)鏈接”對(duì)話(huà)框，如圖13所示。圖13（2）進(jìn)行以下各項(xiàng)設(shè)置： “文本”文本框輸入設(shè)置超級(jí)鏈接顯示的文本“懷化職業(yè)技術(shù)學(xué)院”； “鏈接”組合框用來(lái)輸入超鏈接連接到的路徑； “目標(biāo)”下拉列表框用來(lái)設(shè)置超鏈接的打開(kāi)方式，有4個(gè)選項(xiàng)，選擇_self；“標(biāo)題”文本框用來(lái)設(shè)置超鏈接的標(biāo)題。（3）設(shè)置好后，單擊“確定”按鈕，即向網(wǎng)頁(yè)中插入了“懷化職業(yè)技術(shù)學(xué)院”超鏈接。2.4.3創(chuàng)建內(nèi)部鏈接 1.在文檔窗口中選中文字或圖像，單擊“屬性”面板“鏈接”組合框后的按鈕，彈出“選擇文件”對(duì)話(huà)框，選擇要鏈接到的網(wǎng)頁(yè)文件，即可鏈接到這個(gè)網(wǎng)頁(yè)

2.拖動(dòng)“鏈接”組合框后的按鈕到站點(diǎn)面板上的相應(yīng)網(wǎng)頁(yè)文件，則鏈接將指向這個(gè)網(wǎng)頁(yè)文件。

3.直接將相對(duì)地址輸入到“鏈接”組合框中來(lái)鏈接一個(gè)頁(yè)面2.4.4創(chuàng)建E-mail鏈接

創(chuàng)建郵件鏈接后，當(dāng)瀏覽者單擊郵件鏈接時(shí)，系統(tǒng)會(huì)自動(dòng)啟動(dòng)瀏覽器默認(rèn)的郵件處理程序，且其中程序的收件人地址會(huì)自動(dòng)更新為鏈接郵件的地址。 下面通過(guò)任務(wù)講解如何創(chuàng)建E-mail鏈接?！救蝿?wù)2-4-2】E-mail鏈接【操作要求】 在Root網(wǎng)站的主頁(yè)（index.html）中創(chuàng)建以文本“與我聯(lián)系”為鏈接點(diǎn)的郵件鏈接（郵箱地址為tmbbje@163.com），且在新窗口中打開(kāi)鏈接。【操作步驟】方法1：（1）打開(kāi)主頁(yè)index.html，單擊“常用”子面板中的“電子郵件鏈接”按鈕，彈出“電子郵件鏈接”對(duì)話(huà)框，如圖14所示。（2）在“文本”文本框中輸入要鏈接的文本“與我聯(lián)系”，然后在E-Mail文本框中輸入郵箱地址tmbbje@163.com，單擊“確定”按鈕，然后在“屬性”面板的“目標(biāo)”下拉列表框中選擇_Blank選項(xiàng)。方法2：（1）選擇“插入”→“電子郵件鏈接”命令，彈出“電子郵件鏈接”對(duì)話(huà)框。（2）在“文本”文本框中輸入“與我聯(lián)系”，在E-Mail文本框中輸入tmbbje@163.com，單擊“確定”按鈕，然后在“屬性”面板的“目標(biāo)”下拉列表框中選擇_Blank選項(xiàng)。方法3：（1）選擇要?jiǎng)?chuàng)建郵件鏈接的文本，在“屬性”面板中的“鏈接”組合框中輸入mailto:tmbbje@163.com（2）在“目標(biāo)”下拉列表框選擇_Blank選項(xiàng)。圖142.4.5創(chuàng)建錨點(diǎn)鏈接

所謂錨點(diǎn)鏈接，是指在同一個(gè)頁(yè)面中的不同位置的鏈接或鏈接到另一頁(yè)面的某一具體位置。常用的建立方法有兩種： （1）面板操作 （2）菜單操作2.4.6創(chuàng)建腳本鏈接

所謂腳本鏈接是指選擇JavaScript代碼或調(diào)用JavaScript函數(shù)，能夠在不離開(kāi)當(dāng)前網(wǎng)頁(yè)的情況下，了解關(guān)于某個(gè)項(xiàng)目的一些附加信息，此外該方式用于計(jì)算、表單驗(yàn)證或其他任務(wù)。利用腳本鏈接創(chuàng)建關(guān)閉網(wǎng)頁(yè)效果，操作步驟如下：（1）在文檔編輯窗口中輸入文字“關(guān)閉窗口”。（2）選中文本“關(guān)閉窗口”，在“屬性”面板的“鏈接”組合框中輸入javascript:window.close(),該腳本鏈接可以關(guān)閉窗口。2.4.7創(chuàng)建空鏈接

所謂空鏈接實(shí)際上是一個(gè)未設(shè)計(jì)的鏈接，利用該鏈接可激活頁(yè)面上的文本和對(duì)象。例如有些JavaScript事件需要鏈接，但并不是鏈接到文本、圖像或其他對(duì)象，這時(shí)就需要用無(wú)地址來(lái)實(shí)現(xiàn)。創(chuàng)建空鏈接的方法是：在文檔編輯窗口中，選中要?jiǎng)?chuàng)建空鏈接的文本，在“屬性”面板的“鏈接”組合框中輸入“#”。2.4.8圖像熱點(diǎn)鏈接

一個(gè)對(duì)象只能創(chuàng)建一個(gè)鏈接，但在網(wǎng)頁(yè)設(shè)計(jì)時(shí)有可能要在一個(gè)圖像上添加多個(gè)鏈接，若使用前面所講的鏈接方法則只能鏈接到一個(gè)目標(biāo)。為了解決這一矛盾，在Dreamweaver中巧妙地使用了熱點(diǎn)進(jìn)行鏈接。利用熱點(diǎn)工具可以將一個(gè)圖像劃分為多個(gè)熱區(qū)作為鏈接點(diǎn)，再單獨(dú)對(duì)每個(gè)熱區(qū)添加相應(yīng)的圖像熱點(diǎn)鏈接。上機(jī)作業(yè)【上機(jī)要求】掌握?qǐng)D像的插入方法；掌握?qǐng)D像屬性的設(shè)置方法；掌握?qǐng)D像與文本混合編排的方法；掌握插入鼠標(biāo)經(jīng)過(guò)圖像的方法，了解插入圖像占位符的方法創(chuàng)建外部鏈接和內(nèi)部鏈接的操作方法；掌握制作圖像映射的操作方法；掌握創(chuàng)建E-mail鏈接的操作方法第三講媒體及表格[教學(xué)內(nèi)容]1.在網(wǎng)頁(yè)中插入Flash對(duì)象2.插入其他動(dòng)態(tài)元素3.為網(wǎng)頁(yè)加入背景音樂(lè)4.插入并編輯表格5.嵌套表格6.表格的格式化7.布局表格[教學(xué)重點(diǎn)和難點(diǎn)]

在網(wǎng)頁(yè)中插入多媒體對(duì)象、不同媒體相關(guān)參數(shù)的具體設(shè)置，系統(tǒng)集成Flash按鈕和文本的插入，加入音樂(lè)的技巧。

表格或單元格的選定、新行或新列的插入操作、單元格合并與拆分操作、表格及單元格屬性設(shè)置方法以及運(yùn)用表格布局網(wǎng)頁(yè)。媒體及表格2.5媒體2.5.1在網(wǎng)頁(yè)中插入Flash對(duì)象2.5.2插入其他動(dòng)態(tài)元素2.5.3為網(wǎng)頁(yè)加入背景音樂(lè)

2.6表格2.6.1插入并編輯表格2.6.2嵌套表格2.6.3表格的格式化2.6.4布局表格2.5媒體

一個(gè)優(yōu)秀的網(wǎng)站應(yīng)該不僅僅是由文字和圖片組成的，而應(yīng)該在網(wǎng)頁(yè)中加入聲音、動(dòng)畫(huà)、影片等內(nèi)容。為了增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)力，豐富文檔的顯示效果，我們可以向其插入Flash動(dòng)畫(huà)、Java小程序、音頻播放插件等多媒體內(nèi)容。2.5.1在網(wǎng)頁(yè)中插入Flash對(duì)象1．插入Flash影片

Flash動(dòng)畫(huà)是一種高品質(zhì)的矢量動(dòng)畫(huà)，它由Macromedia公司的Flash動(dòng)畫(huà)制作軟件創(chuàng)建，目前已經(jīng)成為Internet上矢量動(dòng)畫(huà)的標(biāo)準(zhǔn)，是制作網(wǎng)上矢量圖形和動(dòng)畫(huà)的首選軟件。Flash、Dreamweaver和Fireworks并稱(chēng)為Macromedia公司的網(wǎng)絡(luò)三劍客。

插入Flash影片的具體操作如下。（1）將光標(biāo)定位到頁(yè)面中要插入Flash影片的位置。（2）在插入欄的“常用”選項(xiàng)卡中單擊媒體右側(cè)的按鈕，在彈出的列表框中選擇“Flash”選項(xiàng)，或選擇[插入]→[媒體]→[Flash]菜單命令打開(kāi)“選擇文件”對(duì)話(huà)框。 （3）在“查找范圍”下拉列表框中查找要插入的Flash播放文件（格式為：*.swf）。單擊“確定”按鈕后，插入的Flash動(dòng)畫(huà)并不會(huì)在文檔窗口中顯示內(nèi)容，而是以一個(gè)帶有字母F的灰色框來(lái)表示。只有在保存文檔之后，在瀏覽器中才能正常顯示Flash。

2．插入Flash按鈕

插入Flash按鈕是指Dreamweaver集成的動(dòng)態(tài)按鈕。除此之外，在Dreamweaver中也可以插入自已制作的Flash按鈕（Flash文件），方法與插入Flash影片類(lèi)似。插入Flash按鈕的具體操作如下：（1）將光標(biāo)定位到頁(yè)面中要插入Flash按鈕的位置上。（2）選擇“插入”→“媒體”→“Flash按鈕”命令，打開(kāi)“插入Flash按鈕”對(duì)話(huà)框，如圖15所示。（3）在“樣式”列表框中選擇需要的按鈕樣式，在“范例”欄中將顯示出所選樣式的效果。（4）在“按鈕文本”文本框中輸入要在按鈕上顯示的文本。（5）在“字體”下拉列表框中選擇按鈕文本的字體，在“大小”數(shù)值框中輸入字號(hào)。（6）在“鏈接”文本框中指定按鈕所要鏈接文檔的URL地址。（7）在“目標(biāo)”下拉列表框中選擇所鏈接文件的打開(kāi)方式。（8）在“背景色”文本框中設(shè)置Flash按鈕的背景色。（9）在“另存為”文本框中輸入保存的路徑，最好保存到當(dāng)前頁(yè)面站點(diǎn)的圖像文件夾中。至此設(shè)置就完成了。（10）單擊“確定”按鈕將設(shè)置的Flash按鈕插入到當(dāng)前位置。（11）單擊插入的Flash按鈕，在其屬性面板中編輯相關(guān)的屬性。如果要修改Flash按鈕的名稱(chēng)、外觀等參數(shù)時(shí)，可雙擊插入的Flash按鈕或單擊其屬性面板中的“編輯”按鈕打開(kāi)“插入Flash按鈕”對(duì)話(huà)框，更改其設(shè)置即可。（12）如果在頁(yè)面中調(diào)整了Flash按鈕的大小，又想恢復(fù)原大小時(shí)，可單擊屬性面板中的“重設(shè)大小”按鈕。（13）單擊“播放”按鈕播放，當(dāng)鼠標(biāo)移到按鈕上時(shí)就會(huì)看到按鈕的動(dòng)態(tài)效果。圖153．插入Flash文本

插入Flash文本與插入Flash按鈕一樣，是指Dreamweaver中集成的文本動(dòng)畫(huà)。插入Flash文本的具體操作如下：（1）將光標(biāo)定位到頁(yè)面中要插入Flash文本的位置上。（2）選擇“插入”→“媒體”→“Flash文本”命令，打開(kāi)如圖16所示的“插入Flash文本”對(duì)話(huà)框。（3）在“文本”文本框中輸入要顯示的文本。（4）選中“顯示字體”復(fù)選項(xiàng)，在文本框中將顯示所設(shè)置文本字體的效果。（5）在“字體”下拉列表框中選擇文本的字體，在“大小”文本框中輸入文本的大小，并完成參數(shù)的設(shè)置。（6）單擊“確定”按鈕將設(shè)置的Flash文本插入到頁(yè)面中。圖162.5.2插入其他動(dòng)態(tài)元素 Dreamweaver不僅支持Flash動(dòng)畫(huà)，還支持如Shockwave影片、Applet等媒體。1．插入Shockwave影片

Shockwave是Macromedia公司制定的一種網(wǎng)上媒體交互壓縮格式的標(biāo)準(zhǔn)，其生成的壓縮格式可以被快速下載，并且被目前的主流瀏覽器所支持。 在Dreamweaver中插入Shockwave影片的具體操作如下：（1）將光標(biāo)置于頁(yè)面中要插入Shockwave影片的位置上。（2）選擇“插入”→“媒體”→Shockwave命令，也可以在“插入”面板的“常用”子面板中單擊“媒體”右側(cè)的按鈕，在彈出的列表框中選擇Shockwave選項(xiàng)，打開(kāi)“選擇文件”對(duì)話(huà)框。（3）選擇要插入的Shockwave影片文件，同時(shí)在對(duì)話(huà)框中可以設(shè)置URL的類(lèi)型。（4）單擊“確定”按鈕，即可將影片插入到頁(yè)面中，Shockwave影片插入到頁(yè)面中將以一個(gè)圖標(biāo)的形式顯示。（5）單擊Shockwave影片的圖標(biāo)，在屬性面板中設(shè)置其屬性。2．插入Applet

為了使網(wǎng)頁(yè)更加引入注目，經(jīng)常需要制作一些特殊效果，用Java語(yǔ)言可以實(shí)現(xiàn)這些特殊效果。Applet是Java的小應(yīng)用程序，它是動(dòng)態(tài)、安全、跨平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序。JavaApplet被嵌入到HTML語(yǔ)言中，編寫(xiě)一些Applet放在網(wǎng)頁(yè)中可以實(shí)現(xiàn)較為復(fù)雜的控制，也可以實(shí)現(xiàn)各種各樣的效果。插入Applet的具體操作如下：（1）將光標(biāo)定位到頁(yè)面中要插入Applet的位置。（2）選擇“插入”→“媒體”→Applet命令，也可以在“插入”面板的“常用”子面板中單擊“媒體”右側(cè)的按鈕，在彈出的列表框中選擇Applet選項(xiàng)，打開(kāi)“選擇文件”對(duì)話(huà)框。（3）設(shè)置完畢后，單擊“確定”按鈕即可將Applet插入到頁(yè)面中。插入頁(yè)面中的Applet以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中。（4）單擊頁(yè)面中的Applet圖標(biāo)，可以在如圖17所示的屬性面板中設(shè)置其相應(yīng)的屬性。圖173．插入ActiveX控件 ActiveX控件是Microsoft公司對(duì)瀏覽器的能力擴(kuò)展，ActiveX控件的作用和插件是相同的，但兩者也存在著差異，載入網(wǎng)頁(yè)時(shí)，如果瀏覽器不支持ActiveX控件，瀏覽器會(huì)自動(dòng)安裝所需軟件，如果是插件，則需要用戶(hù)找到相關(guān)的軟件進(jìn)行安裝。插入ActiveX控件的課體操作如下：（1）將光標(biāo)定位到頁(yè)面中要插入ActiveX的位置。（2）選擇“插入”→“媒體”→ActiveX命令，也可以在“插入”面板的“常用”子面板中單擊“媒體”右側(cè)的按鈕，在彈出的列表框中選擇ActiveX選項(xiàng)，即可將ActiveX插入到頁(yè)面中。插入頁(yè)面中的ActiveX以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中。（3）單擊頁(yè)面中的ActiveX圖標(biāo)，可以在屬性面板中設(shè)置其相應(yīng)的屬性。4．插入插件

如果想在瀏覽器中訪(fǎng)問(wèn)更多類(lèi)型的媒體對(duì)象，就必須借助于插件，前面所介紹的Shockwave就是插件中的一員。插件的類(lèi)型主要有對(duì)象類(lèi)、命令類(lèi)、行為類(lèi)、組件類(lèi)4種，這里講解的是對(duì)象類(lèi)插件。為了敘述方便，在此簡(jiǎn)稱(chēng)為插件。插入插件的具體操作如下：（1）將光標(biāo)定位到頁(yè)面中要插入插件的位置。（2）選擇“插入”→“媒體”→“插件”命令，也可以在“插入”面板的“常用”子面板中單擊“媒體”右側(cè)的按鈕，在彈出的列表框中選擇“插件”選項(xiàng)，則打開(kāi)“選擇文件”對(duì)話(huà)框。（3）設(shè)置完畢后，單擊“確定”按鈕即可將插件插入到頁(yè)面中，插件以一個(gè)圖標(biāo)的形式顯示在頁(yè)面中。（4）單擊頁(yè)面中的插件圖標(biāo)，可以在屬性面板中設(shè)置其相應(yīng)的屬性。2.5.3為網(wǎng)頁(yè)加入背景音樂(lè)

打開(kāi)一些網(wǎng)站時(shí)，優(yōu)雅的背景音樂(lè)伴隨著我們的瀏覽一直縈繞在耳邊。但Dreamweaver中并沒(méi)有背景音樂(lè)的具體設(shè)置，要想達(dá)到這種效果，可以通過(guò)在源代碼中手動(dòng)添加代碼或插入插件的方法來(lái)實(shí)現(xiàn)。1．添加背景音樂(lè)代碼具體操作如下：（1）將要插入背景音樂(lè)的網(wǎng)頁(yè)從設(shè)計(jì)視圖切換至代碼視圖或拆分視圖。（2）在<body>和</body>之間的任何地方加入：

<embedsrc="URL"hidden=trueloop=true>其中src指定音樂(lè)文件的位置及文件名，hidden=true表示不顯示播放器，loop=true表示循環(huán)播放。2．通過(guò)插入插件來(lái)添加背景音樂(lè)具體操作如下：（1）將光標(biāo)定位到要插入背景音樂(lè)的網(wǎng)頁(yè)的空白處。（2）同插入其他插件的方法一樣，打開(kāi)“選擇文件”對(duì)話(huà)框。（3）在打開(kāi)的對(duì)話(huà)框中選擇音樂(lè)文件。（4）設(shè)置完畢后，單擊“確定”按鈕即可將音樂(lè)文件插入到頁(yè)面中，音樂(lè)文件同樣以一般插件的圖標(biāo)形式顯示在頁(yè)面中。（5）單擊音樂(lè)文件圖標(biāo)，在屬性面板中將高度和寬度都設(shè)置為0，這樣就不會(huì)顯示播放器。（6）在插件URL的文本框中可以輸入下載插件的完整URL。如果在瀏覽頁(yè)面時(shí)沒(méi)有該插件，則InternetExplorer將從這里提供的URL上下載?！救蝿?wù)2-5】制作水中倒影效果【操作要求】在root\unit2\image文件夾中有兩個(gè)文件：一個(gè)是JavaApplet小程序文件Lake.class（該文件的作用是產(chǎn)生倒影效果），一個(gè)是圖像文件Ap49013.jpg。運(yùn)用這兩個(gè)文件制作如圖18所示的效果。圖182.6表格

表格是網(wǎng)頁(yè)設(shè)計(jì)制作不可缺少的元素，它以簡(jiǎn)潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁(yè)面上，讓我們可以設(shè)計(jì)出漂亮的頁(yè)面。使用表格排版的頁(yè)面在不同平臺(tái)、不同分辨率的瀏覽器里都能保持其原有的布局，而在不同的瀏覽器平臺(tái)有較好的兼容性，所以表格是網(wǎng)頁(yè)中最常用的排版方式之一。2.6.1插入并編輯表格1．插入表格 在文檔窗口中，將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置，選擇下列方法：?jiǎn)螕簟俺Ｓ谩弊用姘逯械摹氨砀瘛卑粹o；選擇[插入]→[表格]菜單命令；按【Ctrl+Alt+T】鍵。 則彈出“表格”對(duì)話(huà)框，指定表格的屬性后在文檔窗口中插入設(shè)置的表格。2．選擇各表格對(duì)象對(duì)于表格、行、列、單元格屬性的設(shè)置是以選擇這些對(duì)象為前提的。（1）選擇整個(gè)表格的方法是把鼠標(biāo)放在表格邊框的任意處，當(dāng)出現(xiàn)標(biāo)志時(shí)單擊即可選中整個(gè)表格，或在表格內(nèi)任意處單擊，然后在狀態(tài)欄選中<table>標(biāo)簽即可；或在單元格任意處單擊，點(diǎn)鼠標(biāo)右鍵在彈出快捷菜單中選擇“表格”→“選擇表格”選項(xiàng)。（2）要選中某一單元格，按住Ctrl鍵的同時(shí)在需要選中的單元格單擊；或者選中狀態(tài)欄中的<td>標(biāo)簽。（3）要選中連續(xù)的單元格，按住鼠標(biāo)左鍵從一個(gè)單元格的左上方開(kāi)始向要連續(xù)選擇的單元格方向拖動(dòng)。要選中不連續(xù)的幾個(gè)單元格，可以按住Ctrl鍵，再單擊要選擇的所有單元格。（4）要選擇某一行或某一列，將光標(biāo)移動(dòng)到行左側(cè)或列上方，鼠標(biāo)指針變?yōu)橄蛴一蛳蛳碌募^圖標(biāo)時(shí)單擊。3．設(shè)置表格屬性

選中一個(gè)表格后，可以通過(guò)屬性面板（如圖19所示）更改表格屬性。圖194．單元格屬性

把光標(biāo)移動(dòng)到某個(gè)單元格內(nèi)，可以利用單元格屬性面板（如圖20所示）對(duì)這個(gè)單元格的屬性進(jìn)行設(shè)置。圖205．表格的行和列操作（1）插入行或列。 選中要插入行或列的單元格，右擊，在彈出的快捷菜單中選擇“插入行”、“插入列”或“插入行或列”命令。如果選擇了“插入行”命令，則在選擇行的上方插入了一個(gè)空白行；如果選擇了“插入列”命令，則在選擇列的左側(cè)插入了一個(gè)空白列；如果選擇了“插入行或列”命令，會(huì)彈出“插入行或列”對(duì)話(huà)框，在其中可以設(shè)置插入行還是列、插入的數(shù)量，以及是在當(dāng)前選擇的單元格的上方或下方、左側(cè)還是右側(cè)插入行或列。（2）刪除行或列。 選擇要?jiǎng)h除的行或列，右擊，在彈出的快捷菜單中選擇“刪除行”或“刪除列”命令。6．拆分與合并單元格

拆分單元格時(shí)，將光標(biāo)放在待拆分的單元格內(nèi)，單擊屬性面板中的“拆分”按鈕，在彈出的對(duì)話(huà)框中按需要設(shè)置。 合并單元格時(shí)，選中要合并的單元格，再單擊屬性面板中的“合并”按鈕。2.6.2嵌套表格

表格之中還有表格即嵌套表格。網(wǎng)頁(yè)的排版有時(shí)會(huì)很復(fù)雜，在外部需要一個(gè)表格來(lái)控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過(guò)總表格來(lái)實(shí)現(xiàn)，容易引起行高列寬等的沖突，給表格的制作帶來(lái)困難。其次，瀏覽器在解析網(wǎng)頁(yè)的時(shí)候，是將整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者要等待很長(zhǎng)時(shí)間才能看到網(wǎng)頁(yè)內(nèi)容。 引入嵌套表格，由總表格負(fù)責(zé)整體排版，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中，各司其職，互不沖突。 另外，通過(guò)嵌套表格，利用表格的背景圖像、邊框、單元格間距和單元格邊距等屬性可以得到漂亮的邊框效果，制作出精美的音畫(huà)貼圖網(wǎng)頁(yè)。 創(chuàng)建嵌套表格的操作方法是，先插入總表格，然后將光標(biāo)置于要插入嵌套表格的地方，繼續(xù)插入表格即可?！救蝿?wù)2-6-1】嵌套表格【操作要求】在Root網(wǎng)站的主頁(yè)（index.html）中，創(chuàng)建一個(gè)表中套表再套表的三層嵌套表格，如圖21所示。圖21【操作步驟】（1）打開(kāi)主頁(yè)（index.html）文檔，將光標(biāo)放置在文檔窗口要插入表格的位置，單擊“常用”子面板中的“表格”按鈕，插入一個(gè)1行1列的表格1，寬度為500像素，高度為100％，邊框?yàn)?，單元格間距為0，單元格邊距為12像素，背景顏色為#333333。（2）將光標(biāo)放置在表格1內(nèi)，插入表格2：1行1列，寬度為100％，高度為100％，邊框?yàn)?，單元格間距為0，單元格邊距為12像素，背景顏色為#CCCCCC。（3）將光標(biāo)放置在表格2內(nèi)，插入表格3：1行1列，寬度為100％，高度100％，單元格間距和單元格邊距都為8像素，邊框?yàn)?0，邊框顏色為#FEE4ED，背景顏色為#9966FF。制成的嵌套表格如圖21所示。2.6.3表格的格式化

做好的表格可以使用Dreamweaver提供的預(yù)設(shè)外觀樣式，這樣可以提高制作效率，保持表格外觀的統(tǒng)一性，同時(shí)樣式提供的色彩搭配也比較美觀?！救蝿?wù)2-6-2】表格的格式化【操作要求】 在Root網(wǎng)站的主頁(yè)（index.html）中，插入一個(gè)5行6列的表格，表格的寬為500像素，高為300像素，邊框、單元格間距和邊距全為0，表格樣式為AltRowsBasicGray?！静僮鞑襟E】（1）在主頁(yè)的文檔窗口中，將光標(biāo)放在需要?jiǎng)?chuàng)建表格的位置，單擊“常用”子面板的“表格”按鈕，彈出“表格”對(duì)話(huà)框，如圖2-67所示，對(duì)下列參數(shù)進(jìn)行設(shè)置：“行數(shù)”文本框：輸入5?！傲袛?shù)”文本框：輸入6?！氨砀駥挾取蔽谋究颍狠斎?00像素?！皢卧襁吘唷蔽谋究颍狠斎??！皢卧耖g距”文本框：輸入0?！斑吙虼旨?xì)”文本框：輸入0。表格高度在屬性面板中設(shè)置。（2）選擇表格，居中對(duì)齊表格后選擇“命令”→“格式化表格”命令，彈出“格式化表格”對(duì)話(huà)框，如圖22所示，在其中選擇AltRowsBasicGray格式，單擊“確定”按鈕表格的樣式就設(shè)定好了，最終效果如圖23所示。圖22圖232.6.4布局表格 Dreamweaver8的布局視圖功能以直觀的方式自動(dòng)生成了網(wǎng)頁(yè)中的表格，能夠使設(shè)計(jì)者在文檔窗口中通過(guò)拖曳鼠標(biāo)來(lái)實(shí)現(xiàn)復(fù)雜表格排版效果。在Dreamweaver8中要使用布局視圖，應(yīng)將窗口從“標(biāo)準(zhǔn)視圖”切換到“布局視圖”。 在“插入”面板中選擇“布局”子面板，單擊面板中的“布局視圖”按鈕，如圖24所示。

繪制布局表格：像畫(huà)圖一樣在頁(yè)面里面排版表格。

繪制布局單元格：在表格中畫(huà)單元格。圖24用布局表格建立網(wǎng)頁(yè)的步驟（1）新建網(wǎng)頁(yè)文件。新建一個(gè)網(wǎng)頁(yè)→保存新建的網(wǎng)頁(yè)→修改頁(yè)面屬性。（2）進(jìn)入布局視圖繪制布局表格與布局單元格。單擊“插入”面板中的“布局”按鈕→單擊“布局視圖”按鈕→單擊“繪制布局表格”按鈕→繪制布局表格→單擊“繪制布局單元格”按鈕→繪制布局單元格→繪制所有的布局單元格。（3）修改布局單元格。選擇布局單元格→調(diào)整單元格大小→用鼠標(biāo)拖動(dòng)單元格或按箭頭鍵移動(dòng)單元格。（4）在單元格中插入網(wǎng)頁(yè)元素。在布局單元格中插入圖像→退出布局視圖→選擇要插入背景圖像的單元格→在屬性面板中單擊單元格背景中的“瀏覽”按鈕→選取背景圖像；選中要插入文字的單元格→單擊“常用”按鈕→單擊“插入表格”按鈕→插入一個(gè)1行1列、90%的表格→將表格居中對(duì)齊→在表格中輸入或粘貼文字（5）進(jìn)入布局視圖，修改布局表格與單元格。進(jìn)入布局視圖→修改或調(diào)整布局單元格→返回標(biāo)準(zhǔn)視圖→完成后的布局網(wǎng)頁(yè)。本講小結(jié)

本講主要介紹不同媒體相關(guān)參數(shù)的具體設(shè)置，系統(tǒng)集成Flash按鈕和文本的插入，加入音樂(lè)的技巧，表格或單元格的選定，新行或新列的插入操作，單元格合并與拆分操作，表格及單元格屬性設(shè)置方法，插入布局表格以及用布局表格布局網(wǎng)頁(yè)的步驟。

第四講框架和圖層[教學(xué)內(nèi)容]1 創(chuàng)建框架2 框架集與框架的選擇及刪除操作3 框架及框架集的屬性設(shè)置4 框架及框架集的保存創(chuàng)建層層的屬性設(shè)置層的基本操作層的高級(jí)操作[教學(xué)重點(diǎn)和難點(diǎn)]

框架及框架集的概念、框架及框架集的創(chuàng)建，層的顯示/隱藏、層名稱(chēng)的改變及層的疊放順序的改變方法。2.7框架

框架是網(wǎng)頁(yè)中經(jīng)常使用的頁(yè)面設(shè)計(jì)方式，框架的作用就是把網(wǎng)頁(yè)在一個(gè)瀏覽器窗口下分割成幾個(gè)不同的區(qū)域，實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)HTML頁(yè)面。使用框架可以非常方便地完成導(dǎo)航工作，使網(wǎng)站的結(jié)構(gòu)更加清晰，而且各個(gè)框架之間絕不存在干擾問(wèn)題。利用框架最大的好處就是使網(wǎng)站的風(fēng)格一致。通常把一個(gè)網(wǎng)站中頁(yè)面相同的部分單獨(dú)制作成一個(gè)頁(yè)面，作為框架結(jié)構(gòu)的一個(gè)子框架的內(nèi)容給整個(gè)網(wǎng)站公用。 一個(gè)框架結(jié)構(gòu)由兩部分網(wǎng)頁(yè)文件構(gòu)成：框架和框架集。 框架（Frame）：框架是瀏覽器窗口中的一個(gè)區(qū)域，在框架中可以顯示其他的網(wǎng)頁(yè)。 框架集（Frameset）：框架集也是一個(gè)網(wǎng)頁(yè)文件，它將一個(gè)窗口通過(guò)行和列的方式分割成多個(gè)框架。框架集包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁(yè)面地址。2.7.1創(chuàng)建框架

在Dreamweaver中有兩種創(chuàng)建框架集的方法，既可以從若干預(yù)定義的框架集中選擇，也可以自己設(shè)計(jì)框架集。1．插入預(yù)定義的框架集 通過(guò)預(yù)定義的框架集，可以很容易地選擇要?jiǎng)?chuàng)建的框架集類(lèi)型。創(chuàng)建預(yù)定義的框架集有兩種方法：通過(guò)“插入”面板可以創(chuàng)建框架集并在某一個(gè)新的框架中顯示當(dāng)前文檔；通過(guò)“新建文檔”對(duì)話(huà)框可以創(chuàng)建新的空框架集。 要?jiǎng)?chuàng)建預(yù)定義的框架集并在某一框架中顯示現(xiàn)有文檔，可執(zhí)行如下操作：（1）將插入點(diǎn)放置在文檔中。（2）執(zhí)行下列操作之一：?jiǎn)螕簟安迦搿薄鶫TML→“框架”命令，彈出框架集樣式子菜單，從中選取所需框架。在“插入”面板中選擇“布局”子面板，單擊“框架”按鈕上的下拉箭頭，然后選擇預(yù)定義的框架集。將光標(biāo)定位在一個(gè)框架中，選擇“修改”→“框架集”子菜單中的選項(xiàng)。（3）執(zhí)行以上任一操作后，將打開(kāi)“框架標(biāo)簽輔助功能屬性”對(duì)話(huà)框，為每個(gè)框架指定一個(gè)標(biāo)題，然后單擊“確定”按鈕。2．創(chuàng)建新的空預(yù)定義框架集創(chuàng)建新的空預(yù)定義框架集的具體操作如下：（1）選擇“文件”→“新建”命令。（2）在“新建文檔”對(duì)話(huà)框“常規(guī)”選項(xiàng)卡的“類(lèi)別”列表框中選擇“框架集”選項(xiàng)。（3）從“框架集”列表框中選擇相應(yīng)的框架集。（4）單擊“創(chuàng)建”按鈕，則框架集出現(xiàn)在文檔中。3．將現(xiàn)有文檔分割為框架將現(xiàn)在文檔分割為框架的具體操作如下：（1）新建一個(gè)空白的HTML文檔后，選擇“查看”→“可視化助理”→“框架邊框”菜單命令，即可在當(dāng)前文檔中顯示出框架的邊框。（2）拖動(dòng)文檔窗口四周的邊框即可創(chuàng)建新框架，在窗口中通過(guò)拖動(dòng)文檔窗口的邊框創(chuàng)建出新框架。（3）在左框架中單擊，再拖動(dòng)文檔窗口上邊的邊框。若按住Alt鍵，在左框架中單擊，再拖動(dòng)文檔窗口上邊的邊框。2.7.2框架集與框架的選擇及刪除操作1．認(rèn)識(shí)框架面板 框架面板中顯示了所創(chuàng)建的框架的結(jié)構(gòu)，并在不同的框架區(qū)域中顯示框架的名稱(chēng)。當(dāng)在框架文檔中進(jìn)行新建、刪除某個(gè)現(xiàn)有框架，或修改框架的尺寸、名稱(chēng)等操作時(shí)，框架面板中的示意圖會(huì)隨著變化。 如果窗口中沒(méi)有框架面板，可以選擇“窗口”→“框架”命令或按Shift+F2鍵打開(kāi)框架面板。2．選取框架和框架集（1）在文檔窗口中選擇。 在文檔窗口中選擇框架的方法很簡(jiǎn)單，即：按住Alt鍵并在要選取的框架內(nèi)單擊，被選取的框架邊框有虛線(xiàn)。選擇框架集時(shí)，單擊要選取的框架邊框即可，選取的所有框架邊框呈現(xiàn)虛線(xiàn)。（2）在“框架”面板中選擇。 在框架面板中選擇框架的方法為：直接在面板中單擊要選擇的框架區(qū)域中的任意位置，選中的框架以粗黑框顯示。選取框架集的方法為：在“框架”面板中單擊包含要選取的框架集的邊框，如選擇整個(gè)框架集，只需單擊框架最外面的邊框即可。3．刪除框架 如果窗口中有不需要的框架，可將其刪除，方法為：用鼠標(biāo)將要?jiǎng)h除框架的邊框拖到父框架邊框上或拖離頁(yè)面。2.7.3框架及框架集的屬性設(shè)置

在Dreamweaver中，可以使用“框架”屬性面板來(lái)定義框架的名稱(chēng)、源文件、頁(yè)邊距等屬性。使用“框架集”屬性面板可以定義框架集邊線(xiàn)顏色、寬度等。1．框架集的屬性設(shè)置 使用框架集屬性面板可以查看和設(shè)置大多數(shù)框架集屬性，如圖25所示。圖252．框架的屬性設(shè)置選中要設(shè)置屬性的框架，框架屬性面板如圖26所示圖262.7.4框架及框架集的保存

用瀏覽器瀏覽框架網(wǎng)頁(yè)前應(yīng)先保存框架集文件及要在框架中顯示的所有文檔。在Dreamweaver中可以保存某個(gè)框架文檔，也可以單獨(dú)保存框架集文檔，還可以保存框架集文件和框架中出現(xiàn)的所有文檔。1．保存框架文檔 保存框架集文檔窗口中的某個(gè)框架中的文檔的具體操作如下：（1）將光標(biāo)定位到要保存的框架中。（2）選擇“文件”→“保存框架”命令，在打開(kāi)的“另存為”對(duì)話(huà)框中像其他文檔的保存方法一樣指定保存路徑、文件名，然后單擊“保存”按鈕進(jìn)行保存。

若要將框架另存為新文件，可選擇“文件”→“框架另存為”命令進(jìn)行保存。

2．保存框架集文檔 保存框架集文檔的具體操作如下：（1）選中要保存的框架集。（2）選擇“文件”→“保存框架頁(yè)”命令，打開(kāi)“另存為”對(duì)話(huà)框。（3）在“保存在”下拉列表框中指定框架集的保存路徑，在“文件名”文本框中為框架集命名。（4）單擊“保存”按鈕。3．保存框架集中的所有文檔 要保存框架集中的所有文檔，只需選擇“文件”→“保存全部”命令。 如果框架集中有框架文檔未被保存，則會(huì)出現(xiàn)“另存為”對(duì)話(huà)框，提示保存該文檔。如果有多個(gè)文檔未保存，則會(huì)依次打開(kāi)多個(gè)“另存為”對(duì)話(huà)框。當(dāng)所有的文檔都已保存后，Dreamweaver直接以原先保存的框架名保存文檔，不