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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3HTML命令

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

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

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

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

BGCOLOR=#RRGGBB指定背景色彩

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

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

ALINK=#RRGGBB指定正被鼠標點擊的可鏈接文字的色彩

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

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

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

1.1.3HTML命令

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

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

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

2設(shè)置頁面屬性

3保存文檔

4文本的輸入及格式

5列表、水平線等其他元素

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

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

2.1.2設(shè)置頁面屬性

2.1.3保存文檔2.2文本操作

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

2.2.2設(shè)置文本屬性

2.2.3文本換行

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

2.2.5使用列表

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

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

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

1．設(shè)置外觀

2．設(shè)置鏈接

3．設(shè)置標題

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

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

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

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

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

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

本講小結(jié)

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

在網(wǎng)頁中插入圖像、圖像對象以及插入超級鏈接圖像及超級鏈接2.3圖像操作2.3.1插入圖像2.3.2設(shè)置圖像的一般屬性2.3.3插入占位符2.3.4鼠標經(jīng)過圖像設(shè)置2.3.5導(dǎo)航條的創(chuàng)建2.4超級鏈接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)建錨點鏈接2.4.6創(chuàng)建腳本鏈接2.4.7創(chuàng)建空鏈接2.4.8圖像熱點鏈接

2.3圖像操作

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

能選取要編輯的圖像，展開“圖像”屬性面板，如圖10所示。其左上角顯示了選取圖像的縮略圖，“源文件”文本框中顯示了插入圖像的源位置。屬性具體含義如下：圖10【寬】【高】是圖片的尺寸，默認單位是象素?！驹次募渴菆D片的路徑，點擊后面的文件夾圖標也能選擇其他圖片?！炬溄印渴擎溄拥哪繕隧撁婊蛘叨ㄎ稽c的URL?！灸繕恕挎溄訒r的目標窗口或框架?！咎娲渴菆D片的文字注釋，當圖片不能正常顯示的時候，圖片的位置就會顯示文字注釋?！揪庉嫛繂訄D像編輯軟件對圖像編輯?！镜貓D】用于制作圖像映射（熱點）【垂直邊距】【水平邊距】圖像在垂直或水平方向與網(wǎng)頁中其他元素之間的距離?！具吙颉繄D像邊框的寬度。選擇空白或零時沒有邊框?！緦R】下拉列表用于指定圖片相對于文本的排列方式?！镜徒馕龆仍础慨斍皥D片的低分辨率副本的路徑。如果圖片很大，則先讓瀏覽器下載顯示一個文件較小的圖片副本，瀏覽器裝載完其他內(nèi)容后再回頭來下載較大的圖像，這樣做既能保持網(wǎng)頁的完整性，又能減少用戶等待時間。2.3.3插入占位符

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2．插入Flash按鈕

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

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

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

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

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

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

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

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

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

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

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

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

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

繪制布局表格：像畫圖一樣在頁面里面排版表格。

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

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

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

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

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

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

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

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

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

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