第八章：網(wǎng)頁

1、網(wǎng)頁制作- 1 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作第八章第八章 網(wǎng)網(wǎng) 頁頁 制制 作作網(wǎng)頁制作- 2 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作基本概念基本概念HTML語言簡介語言簡介Dreamver的使用的使用網(wǎng)頁中插入圖片網(wǎng)頁中插入圖片表格、表單的使用表格、表單的使用框架、圖層、時(shí)間軸框架、圖層、時(shí)間軸網(wǎng)頁制作- 3 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作基本概念基本概念n網(wǎng)頁與主頁網(wǎng)頁與主頁 n網(wǎng)頁與網(wǎng)站網(wǎng)頁與網(wǎng)站n網(wǎng)頁制作工具網(wǎng)頁制作工具網(wǎng)頁制作- 4 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作萬維網(wǎng)中的文件信息被稱作頁面頁面；每一個(gè)WWW服務(wù)器上存放著大量的頁面文件信息http:/ 5 -中國海洋大學(xué)

2、焦玲制作 網(wǎng)頁制作網(wǎng)頁網(wǎng)頁主頁主頁網(wǎng)站網(wǎng)站從從WebWeb站點(diǎn)傳過來的站點(diǎn)傳過來的第一個(gè)網(wǎng)頁文件；第一個(gè)網(wǎng)頁文件；對于主頁，只要寫上對于主頁，只要寫上協(xié)議名和服務(wù)器協(xié)議名和服務(wù)器的名字就可以的名字就可以把主頁傳過來了，這是因?yàn)榘阎黜搨鬟^來了，這是因?yàn)閃ebWeb服務(wù)器都有自己服務(wù)器都有自己默認(rèn)的默認(rèn)的主頁名稱主頁名稱；不同的服務(wù)器不同的服務(wù)器系統(tǒng)默認(rèn)系統(tǒng)默認(rèn)的主頁名稱也不同，常見的的主頁名稱也不同，常見的有有index.htmindex.htm（index.htmlindex.html）或）或default.htm default.htm （default.htmldefault.html）網(wǎng)

3、頁制作工具網(wǎng)頁制作工具網(wǎng)頁制作- 6 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作網(wǎng)頁網(wǎng)頁主頁主頁網(wǎng)站網(wǎng)站網(wǎng)頁通常成組出現(xiàn)，并且這組網(wǎng)頁網(wǎng)頁通常成組出現(xiàn)，并且這組網(wǎng)頁之間通過之間通過超鏈接超鏈接相互組織成為反映相互組織成為反映某個(gè)主題的網(wǎng)站。某個(gè)主題的網(wǎng)站。網(wǎng)頁制作工具網(wǎng)頁制作工具網(wǎng)頁制作- 7 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作網(wǎng)頁網(wǎng)頁主頁主頁網(wǎng)站網(wǎng)站網(wǎng)頁制作工具網(wǎng)頁制作工具NOTEPAD純文本編輯器（記事本）DreamweaverDreamweaverFrontPageFrontPage網(wǎng)頁制作- 8 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作必須知道必須知道 瀏覽器瀏覽器與與服務(wù)器服務(wù)器建立連接建立連接發(fā)

4、送請求信息發(fā)送請求信息關(guān)閉連接關(guān)閉連接網(wǎng)頁制作- 9 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作HTMLHTML語言簡介語言簡介網(wǎng)頁制作- 10 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作網(wǎng)頁制作語言網(wǎng)頁制作語言-超文本標(biāo)記語言超文本標(biāo)記語言HTMLHTML yper ext arkup anguage 歡迎光臨無名的主頁歡迎光臨無名的主頁歡迎光臨無名的主頁歡迎光臨無名的主頁樣樣 例例標(biāo)記需要放在中標(biāo)記中有很多是成對出現(xiàn)，一頭一尾（結(jié)束標(biāo)記前要加“/”）所有標(biāo)記中的字母不區(qū)分大小寫通常以“.html”或“htm”為文件后綴標(biāo)記的書寫格式如下： 文件內(nèi)容/ HTML特點(diǎn)特點(diǎn)網(wǎng)頁制作- 11 -中國海洋大學(xué) 焦玲

5、制作 網(wǎng)頁制作練習(xí)：使用練習(xí)：使用HTMLHTML編寫網(wǎng)頁編寫網(wǎng)頁簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yahoo! 網(wǎng)頁制作- 12 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作簡單的HTML例子歡迎光臨無名的主頁這就是我我常去的網(wǎng)站， Yahoo! 一個(gè)HTML文件總是由（HEAD）和）和（BODY）兩部分組成。標(biāo)記和用來說明本文件是一個(gè)HTML文件。HTMLHTML在瀏覽器中被解釋在瀏覽器中被解釋網(wǎng)頁制作- 13 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作常用標(biāo)識說明：常用標(biāo)識說明： 文本換行：文本換行：指定其后的文本另起一行。：指定其后的文本另起一行。：指定其后的文本另起一段。：指

6、定其后的文本另起一段。 超鏈接：超鏈接：和和一對標(biāo)記一對標(biāo)記HrefHref中表明被鏈接的文件或者其他部分中表明被鏈接的文件或者其他部分 圖像插入：圖像插入：標(biāo)記標(biāo)記SrcSrc中指定嵌入的圖像文件中指定嵌入的圖像文件網(wǎng)頁制作- 14 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作基本概念基本概念HTML語言簡介語言簡介Dreamver的使用的使用網(wǎng)頁中插入圖片網(wǎng)頁中插入圖片表格、表單的使用表格、表單的使用框架、圖層、時(shí)間軸框架、圖層、時(shí)間軸網(wǎng)頁制作- 15 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作設(shè)計(jì)：設(shè)計(jì)：“頁面視圖”，所見即所得的編輯環(huán)境；代碼：代碼： “源代碼圖”，直接通過修改HTML標(biāo)記命令編輯網(wǎng)頁；

7、拆分：拆分：代碼視圖和設(shè)計(jì)視圖同時(shí)顯示。網(wǎng)頁制作- 16 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 如何建立站點(diǎn)如何建立站點(diǎn) 主頁的制作主頁的制作 表格的使用表格的使用 圖像的插入圖像的插入 超鏈接（圖像地圖）超鏈接（圖像地圖） 創(chuàng)建表單頁面創(chuàng)建表單頁面 網(wǎng)頁布局（框架、層）網(wǎng)頁布局（框架、層） CssCss樣式樣式 時(shí)間軸、行為時(shí)間軸、行為 腳本語言腳本語言建立建立本地網(wǎng)站文件夾本地網(wǎng)站文件夾，確立網(wǎng)站位置，確立網(wǎng)站位置使用使用Dreamweaber站點(diǎn)站點(diǎn)定義向?qū)Фx向?qū)Фx定義本地網(wǎng)本地網(wǎng)站站創(chuàng)建網(wǎng)站創(chuàng)建網(wǎng)站文件夾結(jié)構(gòu)文件夾結(jié)構(gòu)使用使用DreamweaverDreamweaver設(shè)計(jì)網(wǎng)頁的設(shè)計(jì)

8、網(wǎng)頁的第一步是建立網(wǎng)站第一步是建立網(wǎng)站舉例說明：1. 建立本地網(wǎng)站文件夾，如某盤下創(chuàng)建文件夾建立本地網(wǎng)站文件夾，如某盤下創(chuàng)建文件夾 “bluesky”2. 使用使用Dreamweaver向?qū)Ы⒈镜卣军c(diǎn)向?qū)Ы⒈镜卣军c(diǎn)3. 建立網(wǎng)站文件夾結(jié)構(gòu)：創(chuàng)建建立網(wǎng)站文件夾結(jié)構(gòu)：創(chuàng)建6個(gè)文件夾，分別為個(gè)文件夾，分別為“jiaoyin”、“pingfanderen”、“tongxinjie”、“xinling”、“wanan”、“yinyue”使用使用DreamweaverDreamweaver建立完網(wǎng)站之后，建立完網(wǎng)站之后，需要進(jìn)行需要進(jìn)行主頁的主頁的設(shè)計(jì)，設(shè)計(jì)，設(shè)計(jì)主頁時(shí)設(shè)計(jì)主頁時(shí)需要注意如下兩點(diǎn)：需要

9、注意如下兩點(diǎn)：設(shè)計(jì)網(wǎng)頁時(shí)，遵循設(shè)計(jì)網(wǎng)頁時(shí)，遵循“8秒鐘規(guī)則秒鐘規(guī)則”，即減少網(wǎng)頁中的即減少網(wǎng)頁中的圖像大小和數(shù)量圖像大小和數(shù)量設(shè)計(jì)顯示器的設(shè)計(jì)顯示器的分辨率為分辨率為1024*768，作為網(wǎng)頁的設(shè)計(jì)，作為網(wǎng)頁的設(shè)計(jì)標(biāo)準(zhǔn)，即為標(biāo)準(zhǔn)，即為用戶瀏覽的最佳分辨率用戶瀏覽的最佳分辨率網(wǎng)頁制作- 20 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：主頁設(shè)計(jì)舉例說明：主頁設(shè)計(jì)1. 啟動啟動Dreamweaver8.0，建立一個(gè)新的文檔，建立一個(gè)新的文檔頁面設(shè)置頁面設(shè)置：在在“頁面屬性頁面屬性”窗口，設(shè)置窗口，設(shè)置上下左右邊距上下左右邊距為為0像素，標(biāo)題為像素，標(biāo)題為“藍(lán)色的天空藍(lán)色的天空”3. 插入并設(shè)計(jì)表格

10、：插入插入并設(shè)計(jì)表格：插入4行行3列列的表格，設(shè)置表格的表格，設(shè)置表格寬度為寬度為1002像素，邊框粗細(xì)、單元格邊距、間距為像素，邊框粗細(xì)、單元格邊距、間距為0，頁眉選擇兩者，頁眉選擇兩者網(wǎng)頁制作- 21 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：主頁設(shè)計(jì)舉例說明：主頁設(shè)計(jì)4、合并單元格：、合并單元格：（1）合并第一列，將其寬度設(shè)置為：）合并第一列，將其寬度設(shè)置為：491，選擇，選擇“垂直為頂端垂直為頂端”（2）選中第二列第一個(gè)單元格，寬度為）選中第二列第一個(gè)單元格，寬度為326，左對齊左對齊，垂直頂端垂直頂端（3）選中第二列第二個(gè)單元格，高度為選中第二列第二個(gè)單元格，高度為18（4）選中第

11、二列第三個(gè)單元格，高度為）選中第二列第三個(gè)單元格，高度為208（5）合并第三列的一至三單元格，寬度為）合并第三列的一至三單元格，寬度為185，高度為，高度為450，左對左對齊齊，垂直頂端垂直頂端（6）合并第二列中的合并第二列中的4與第三例中的與第三例中的4單元格，高度為單元格，高度為131網(wǎng)頁制作- 22 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：主頁設(shè)計(jì)舉例說明：主頁設(shè)計(jì)5、插入圖片：、插入圖片：（1）首先將需要的圖片放在站點(diǎn)文件夾中的）首先將需要的圖片放在站點(diǎn)文件夾中的Images文件夾中文件夾中（2）依次在相應(yīng)的單元格中插入圖片）依次在相應(yīng)的單元格中插入圖片（3）在）在D單元格設(shè)備單元

12、格背景，插入背景圖片單元格設(shè)備單元格背景，插入背景圖片blue5.jpgAblue1blue2B blue3C blue4ED blue5網(wǎng)頁制作- 23 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：插入圖像舉例說明：插入圖像 圖形的插入：圖形的插入：執(zhí)行執(zhí)行“插入插入|圖像圖像” 菜單命令菜單命令使用屬性面板設(shè)置圖片屬性使用屬性面板設(shè)置圖片屬性HTML并不能包含圖像，它只是包含圖像文件的名稱并不能包含圖像，它只是包含圖像文件的名稱和相應(yīng)的格式代碼。和相應(yīng)的格式代碼。網(wǎng)頁制作- 24 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作利用圖像作為網(wǎng)頁背景利用圖像作為網(wǎng)頁背景： 通過頁面屬性中的設(shè)置通過頁面屬性

13、中的設(shè)置 一般情況下需要插入一般情況下需要插入背景圖片背景圖片DreamweaverDreamweaver對對中文文件名中文文件名的的兼容性不好兼容性不好，建議網(wǎng)頁，建議網(wǎng)頁文件名以及圖片插入的圖片文件名文件名以及圖片插入的圖片文件名采用西文字符命名采用西文字符命名舉例說明：插入圖像舉例說明：插入圖像網(wǎng)頁制作- 25 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作網(wǎng)頁中插入圖像的圖像格式：網(wǎng)頁中插入圖像的圖像格式： GIF JPEG PNG （圖形交換格式）（聯(lián)合圖像專家組）（可移植網(wǎng)絡(luò)圖形）（圖形交換格式）（聯(lián)合圖像專家組）（可移植網(wǎng)絡(luò)圖形）可用顏色數(shù)可用顏色數(shù) 16777216 16777216 42

14、94967296每幅圖像的顏色每幅圖像的顏色 壓縮壓縮 無損無損 透明透明 否否 半透明半透明 否否 否否 動畫動畫 否否 否否GGR RB B舉例說明：插入圖像舉例說明：插入圖像網(wǎng)頁制作- 26 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作.PNP文件舉例.GIF文件舉例.JPG文件舉例魔鏡魔鏡告訴我魔鏡魔鏡告訴我網(wǎng)頁中常用圖片文件網(wǎng)頁中常用圖片文件網(wǎng)頁制作- 27 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 GIF格式圖像舉例（ raphics nterchange ormat）是作為一個(gè)跨平臺圖形標(biāo)準(zhǔn)而開發(fā)的、與硬件無關(guān)的8位彩色圖形格式，也是在因特網(wǎng)上使用最早、應(yīng)用最廣泛的圖像格式，包含87A和89A兩

15、種格式。2cm2cm2K4cm3.6cm8K5cm14cm47K256色的調(diào)色板導(dǎo)致色灘出現(xiàn)，色彩層次感差。詳見精彩詳見精彩GIF動畫動畫 網(wǎng)頁制作- 28 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 JPEG格式圖像舉例格式（簡稱）是一種流行的圖像文件壓縮格式，通常，JPEG可將圖像文件的長度縮短成原來的50%到2%不等。在保證對圖像質(zhì)量的前提下，獲得較高的壓縮比。攝影圖像通常采用JPEG格式存儲和顯示，大多數(shù)數(shù)字相機(jī)拍攝的圖像都經(jīng)過了JPEG壓縮處理。壓縮比 15cm20cm 43K壓縮比 8cm6cm116K網(wǎng)頁制作- 29 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：表格設(shè)計(jì)舉例說明：表格設(shè)計(jì)

16、 表格的插入：表格的插入：執(zhí)行執(zhí)行“插入插入|表格表格” 菜單命令菜單命令使用屬性面板設(shè)置表格屬性使用屬性面板設(shè)置表格屬性網(wǎng)頁制作- 30 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例說明：主頁的進(jìn)一步設(shè)計(jì)舉例說明：主頁的進(jìn)一步設(shè)計(jì) ：在網(wǎng)頁中嵌入網(wǎng)頁，即在網(wǎng)頁中嵌入網(wǎng)頁，即iframe標(biāo)簽標(biāo)簽的使用的使用在頁面中在頁面中插入插入Flash動畫動畫使用與透明設(shè)置使用與透明設(shè)置圖片熱區(qū)劃分圖片熱區(qū)劃分以及利用熱點(diǎn)鏈接的方法以及利用熱點(diǎn)鏈接的方法網(wǎng)頁制作- 31 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例1：1、在主頁中嵌入網(wǎng)頁：、在主頁中嵌入網(wǎng)頁：（1）在）在E單元格嵌入網(wǎng)頁單元格嵌入網(wǎng)頁frame.ht

17、ml。將。將E單元格設(shè)置單元格設(shè)置為為垂直頂端垂直頂端（2）單擊）單擊“插入插入”菜單中的菜單中的“標(biāo)簽標(biāo)簽”，選擇，選擇“標(biāo)記語標(biāo)記語言言HTML”中的中的“HTML”標(biāo)簽，選擇標(biāo)簽，選擇“iframe”標(biāo)簽標(biāo)簽代碼。高度為代碼。高度為208，頂端對齊頂端對齊，無滾動無滾動。網(wǎng)頁制作- 32 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作舉例2：2、在主頁中插入、在主頁中插入Flash動畫：動畫：（1）將）將D單元格設(shè)為文本右對齊單元格設(shè)為文本右對齊（2）插入）插入Flash動畫，寬為動畫，寬為208，高為，高為103（3）保存文件，單擊）保存文件，單擊“屬性屬性”面板中的播放按鈕，查面板中的播放按鈕，

18、查看效果看效果（3）修改）修改flash動畫的背景設(shè)為透明效果動畫的背景設(shè)為透明效果 wmode transparent網(wǎng)頁制作- 33 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作3、主頁欄目名稱與對應(yīng)網(wǎng)頁的鏈接：、主頁欄目名稱與對應(yīng)網(wǎng)頁的鏈接：（1）圖片熱區(qū)）圖片熱區(qū)在在“屬性屬性”面板中是用面板中是用“矩形熱點(diǎn)工具矩形熱點(diǎn)工具”選取選取“平平凡的人凡的人”，然后鏈接相應(yīng)的頁面，然后鏈接相應(yīng)的頁面網(wǎng)頁制作- 34 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作表單表單表單表單能夠向網(wǎng)頁中添加文本框、能夠向網(wǎng)頁中添加文本框、單選按鈕、復(fù)選框、按鈕等用單選按鈕、復(fù)選框、按鈕等用戶界面控件。戶界面控件。每個(gè)網(wǎng)頁可以包

19、含一個(gè)或多個(gè)表每個(gè)網(wǎng)頁可以包含一個(gè)或多個(gè)表單，每個(gè)表單占據(jù)網(wǎng)頁中的一個(gè)單，每個(gè)表單占據(jù)網(wǎng)頁中的一個(gè)特定區(qū)域。特定區(qū)域。表單中必須有一個(gè)元素作為表單中必須有一個(gè)元素作為“提交提交”按鈕。按鈕。單擊單擊“提交提交”按鈕按鈕后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點(diǎn)服務(wù)器后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點(diǎn)服務(wù)器需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在文件或數(shù)據(jù)庫中，也可能作為電子郵件發(fā)出等等。文件或數(shù)據(jù)庫中，也可能作為電子郵件發(fā)出等等。網(wǎng)頁制作- 35 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作網(wǎng)頁布局（框架和層）網(wǎng)頁布局（框架和層） 涉及網(wǎng)頁

20、除了考慮網(wǎng)頁中的文字和圖像內(nèi)容本身涉及網(wǎng)頁除了考慮網(wǎng)頁中的文字和圖像內(nèi)容本身之外，還有一個(gè)重要的因素就是之外，還有一個(gè)重要的因素就是網(wǎng)頁布局。網(wǎng)頁布局。 要想把網(wǎng)頁中的文字、圖像和動畫等對象像在要想把網(wǎng)頁中的文字、圖像和動畫等對象像在wordword中那樣實(shí)現(xiàn)中那樣實(shí)現(xiàn)圖文混排圖文混排的效果，必須借助其他的效果，必須借助其他技術(shù)。技術(shù)。 這種這種技術(shù)技術(shù)包括：包括：表格、框架、圖層表格、框架、圖層網(wǎng)頁制作- 36 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作表格布局表格布局網(wǎng)頁制作- 37 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 表格布局表格布局網(wǎng)頁制作- 38 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作如何使用表

21、格布局頁面如何使用表格布局頁面利用單元格的合并與拆利用單元格的合并與拆分分 ，創(chuàng)建不規(guī)則的表格。，創(chuàng)建不規(guī)則的表格。單元格的不同填充色、邊單元格的不同填充色、邊框線顏色分割區(qū)域?？蚓€顏色分割區(qū)域。設(shè)置單元格屬性，單元格設(shè)置單元格屬性，單元格內(nèi)對象的排版方式。內(nèi)對象的排版方式。設(shè)置表格屬性，整個(gè)表格設(shè)置表格屬性，整個(gè)表格的排版方式。的排版方式。網(wǎng)頁制作- 39 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作表格單位的設(shè)置：像素和表格單位的設(shè)置：像素和% %8像素是絕對單位，不隨瀏覽器窗口尺寸變化而變化。像素是絕對單位，不隨瀏覽器窗口尺寸變化而變化。8% %是相對單位，隨著瀏覽器窗口尺寸變化而變化。是相對單位

22、，隨著瀏覽器窗口尺寸變化而變化。0-0-顯示器分辯率值顯示器分辯率值0%-100%0%-100%表格有兩種度量單位：表格有兩種度量單位：像素和像素和% %網(wǎng)頁制作- 40 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作框架布局框架布局框架是一種將瀏覽器窗口劃分為功能獨(dú)立的多個(gè)區(qū)域的常用框架是一種將瀏覽器窗口劃分為功能獨(dú)立的多個(gè)區(qū)域的常用方法。方法。定義每個(gè)框架的大小、位置、名稱和初始網(wǎng)頁，定義每個(gè)框架的大小、位置、名稱和初始網(wǎng)頁，普通網(wǎng)頁提供每個(gè)框架的內(nèi)容。一個(gè)框架的超鏈接可以更改普通網(wǎng)頁提供每個(gè)框架的內(nèi)容。一個(gè)框架的超鏈接可以更改顯示在另一個(gè)框架中的網(wǎng)頁。顯示在另一個(gè)框架中的網(wǎng)頁?？蚣苊Q框架名稱 初始

23、網(wǎng)頁初始網(wǎng)頁vivaband.htm網(wǎng)頁制作- 41 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 認(rèn)識框架集網(wǎng)頁認(rèn)識框架集網(wǎng)頁是一種特殊的網(wǎng)頁，該網(wǎng)頁定義了整體的框架布局，是一種特殊的網(wǎng)頁，該網(wǎng)頁定義了整體的框架布局，但不提供實(shí)際內(nèi)容。但不提供實(shí)際內(nèi)容。VIVABAND 此網(wǎng)頁使用了框架，但您的瀏覽器不支持框架。 vivaband.htm網(wǎng)頁制作- 42 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架網(wǎng)頁的創(chuàng)建框架網(wǎng)頁的創(chuàng)建- -步驟一步驟一網(wǎng)頁制作- 43 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架網(wǎng)頁的創(chuàng)建框架網(wǎng)頁的創(chuàng)建- -步驟二步驟二分別為不同的框架設(shè)定初始網(wǎng)頁文件分別為不同的框架設(shè)定初始網(wǎng)頁文件ba

24、nnerbanner頁頭頁頭.html.htmlContentsContents菜單菜單.htm.htmMain Main 檸檬寢室檸檬寢室.html.html網(wǎng)頁制作- 44 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架網(wǎng)頁的創(chuàng)建框架網(wǎng)頁的創(chuàng)建- -步驟三步驟三在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。按住Alt鍵同時(shí)選擇某一個(gè)框架，打開框架屬性面板（窗口-框架）網(wǎng)頁制作- 45 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架網(wǎng)頁的保存框架網(wǎng)頁的保存需要分別保存每一個(gè)框架對應(yīng)的網(wǎng)頁文件，并要保存需要分別保

25、存每一個(gè)框架對應(yīng)的網(wǎng)頁文件，并要保存“”文件本身。文件本身。 執(zhí)行執(zhí)行“文件文件|保存全保存全部部”命令命令,保存所有保存所有的框架和框架集的框架和框架集,以以虛框突出顯示的框虛框突出顯示的框架就是當(dāng)前需要保架就是當(dāng)前需要保存的框架。存的框架。網(wǎng)頁制作- 46 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架之間的超鏈接框架之間的超鏈接指定超鏈接目的網(wǎng)頁出現(xiàn)在哪個(gè)框架中。指定超鏈接目的網(wǎng)頁出現(xiàn)在哪個(gè)框架中。在框架網(wǎng)頁中，單擊某框架內(nèi)網(wǎng)頁上的超鏈接時(shí)，被超鏈接在框架網(wǎng)頁中，單擊某框架內(nèi)網(wǎng)頁上的超鏈接時(shí)，被超鏈接所指定的網(wǎng)頁通常在另一個(gè)框架中打開，這個(gè)框架稱為所指定的網(wǎng)頁通常在另一個(gè)框架中打開，這個(gè)框架稱

26、為。網(wǎng)頁制作- 47 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 框架之間的超鏈接框架之間的超鏈接目標(biāo)名稱瀏覽器動作_black加載到一個(gè)新的窗口，同時(shí)保持當(dāng)前窗口不變_parent加載到父窗口中_self加載到包含該超鏈接的框架中_top加載到當(dāng)前瀏覽器的整個(gè)窗口，并替換掉原來所有的框架集網(wǎng)頁制作- 48 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作層的使用層的使用層就是一個(gè)容器：網(wǎng)頁中的元素，如文本、圖像，都可以放層就是一個(gè)容器：網(wǎng)頁中的元素，如文本、圖像，都可以放置到置到中；中；再配合再配合時(shí)間線時(shí)間線（Timeline）的應(yīng)用可以做出很多效果，使網(wǎng)）的應(yīng)用可以做出很多效果，使網(wǎng)頁動感十足；頁動感十足；還

27、可以配合還可以配合行為行為（Behaviors），使得網(wǎng)頁在某種事件發(fā)生），使得網(wǎng)頁在某種事件發(fā)生時(shí)顯示隱藏的指定層等。時(shí)顯示隱藏的指定層等。用鼠標(biāo)拖動的方法畫出一用鼠標(biāo)拖動的方法畫出一個(gè)任意尺寸大小的層。個(gè)任意尺寸大小的層。繪制層按鈕繪制層按鈕網(wǎng)頁制作- 49 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作層的基本操作層的基本操作繪制層按鈕繪制層按鈕 用鼠標(biāo)拖動的方法畫出一個(gè)任意用鼠標(biāo)拖動的方法畫出一個(gè)任意尺寸大小的層尺寸大小的層1.1.使用按鈕使用按鈕2.2.選擇插入選擇插入| |布局對象布局對象| |層層網(wǎng)頁制作- 50 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 層的編輯層的編輯激活圖層：激活圖層：單擊圖

28、層中任一位置，圖層只有被激活后單擊圖層中任一位置，圖層只有被激活后才可以插入對象。才可以插入對象。 選取圖層選取圖層：單擊圖層邊框或單擊文檔窗口狀態(tài)欄左側(cè)單擊圖層邊框或單擊文檔窗口狀態(tài)欄左側(cè)層標(biāo)記層標(biāo)記圖標(biāo)圖標(biāo) ，或單擊圖層圖標(biāo)，或單擊圖層圖標(biāo) 。 選中的圖層四周出現(xiàn)選中的圖層四周出現(xiàn)8個(gè)黑色的小方塊。個(gè)黑色的小方塊。圖層標(biāo)記圖層標(biāo)記閃爍插入光標(biāo)閃爍插入光標(biāo)黑色的圖層邊框黑色的圖層邊框 網(wǎng)頁制作- 51 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作移動層移動層 ：選中層時(shí)，可用鼠標(biāo)拖動層的邊框移動圖選中層時(shí)，可用鼠標(biāo)拖動層的邊框移動圖層的位置，或者在層的位置，或者在“層層”屬性面板中精確設(shè)置圖層的屬性面

29、板中精確設(shè)置圖層的新位置（左和上的值）。新位置（左和上的值）。改變圖層尺寸改變圖層尺寸 ：選中圖層時(shí)，可用鼠標(biāo)拖動圖層選中圖層時(shí)，可用鼠標(biāo)拖動圖層四周的小方塊調(diào)整圖層的尺寸，或者在四周的小方塊調(diào)整圖層的尺寸，或者在“層層”屬性屬性面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。 層的編輯層的編輯網(wǎng)頁制作- 52 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作層的編輯層的編輯 圖層的屬性設(shè)置（層的屬性面板） 層編號 層的寬和高 層的背景圖像 層的可見性 hidden：對象超過圖層大小時(shí)，超過的部分將隱藏 使用面板管理圖層網(wǎng)頁制作- 53 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁

30、制作時(shí)間軸：與圖層結(jié)合實(shí)現(xiàn)動畫效果時(shí)間軸：與圖層結(jié)合實(shí)現(xiàn)動畫效果時(shí)間軸是一條貫穿時(shí)間的軸線時(shí)間軸是一條貫穿時(shí)間的軸線, ,時(shí)間軸動畫時(shí)間軸動畫是把動畫對象是把動畫對象放置在不同的層中放置在不同的層中, ,通過改變層的位置、大小、可見性和通過改變層的位置、大小、可見性和疊放順序等屬性來創(chuàng)建動畫疊放順序等屬性來創(chuàng)建動畫執(zhí)行執(zhí)行“窗口窗口| |時(shí)間軸時(shí)間軸”命令，調(diào)出命令，調(diào)出時(shí)間軸面板時(shí)間軸面板網(wǎng)頁制作- 54 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 如何制作時(shí)間軸動畫如何制作時(shí)間軸動畫1.1.插入一個(gè)層插入一個(gè)層2.2.在層中插入對象在層中插入對象3. 3. 使用使用“窗口窗口| |時(shí)間軸時(shí)間軸”命

31、令打開時(shí)間軸面板命令打開時(shí)間軸面板4.4.將層拖到時(shí)間軸的第將層拖到時(shí)間軸的第1 1幀上幀上5.5.選中第選中第1 1幀幀, ,將圖層拖到將圖層拖到動畫開始位置動畫開始位置6.6.選中第選中第1515幀幀, ,將圖層拖將圖層拖到動畫結(jié)束位置到動畫結(jié)束位置7.7.選中自動播放復(fù)選框選中自動播放復(fù)選框步驟步驟: :網(wǎng)頁制作- 55 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 讓圖層中的對象沿路徑動起來讓圖層中的對象沿路徑動起來（1 1）添加一個(gè)圖層，在圖層中插入一張圖片；）添加一個(gè)圖層，在圖層中插入一張圖片；（2 2）增加一個(gè)時(shí)間軸；）增加一個(gè)時(shí)間軸；（3 3）“修改修改| |時(shí)間軸時(shí)間軸| |錄制層路徑

32、錄制層路徑”命令，拖動圖層繪制路徑命令，拖動圖層繪制路徑網(wǎng)頁制作- 56 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 讓圖層中的內(nèi)容動起來（滾動看板）讓圖層中的內(nèi)容動起來（滾動看板）的創(chuàng)建：的創(chuàng)建：創(chuàng)建圖層，如創(chuàng)建圖層，如layer7選中該圖層，按住選中該圖層，按住Alt鍵鍵的同時(shí)，在其的同時(shí)，在其中創(chuàng)建其嵌套圖層。中創(chuàng)建其嵌套圖層。利用利用“剪輯剪輯”選項(xiàng)設(shè)置選項(xiàng)設(shè)置layer7圖層的可圖層的可見區(qū)域：見區(qū)域：hidden網(wǎng)頁制作- 57 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 讓圖層中的內(nèi)容動起來（滾動看板）讓圖層中的內(nèi)容動起來（滾動看板）起始幀起始幀結(jié)束幀結(jié)束幀選中圖層選中圖層Layer8，執(zhí)，執(zhí)行

33、行“修改修改|時(shí)間軸時(shí)間軸|錄制錄制層路徑層路徑”命令命令，制作，制作該圖層從圖層該圖層從圖層Layer7底部移動到圖層底部移動到圖層Layer7頂部的運(yùn)頂部的運(yùn)動效果動效果。網(wǎng)頁制作- 58 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作利用層插入背景音樂：利用層插入背景音樂：創(chuàng)建層以及層中嵌入頁面：創(chuàng)建層以及層中嵌入頁面：（1）創(chuàng)建層）創(chuàng)建層“插入插入”工具欄中工具欄中“布局布局”中選擇中選擇“描繪層描繪層”，插入，插入一個(gè)層一個(gè)層（2）創(chuàng)建一個(gè)）創(chuàng)建一個(gè)musicbj1.html文件，插入一個(gè)聲音文件；文件，插入一個(gè)聲音文件；使用使用“插入插入”|“標(biāo)簽標(biāo)簽”|“HTML標(biāo)簽標(biāo)簽”|embed（3）

34、在層中嵌入）在層中嵌入musicbj1.html文件；文件；使用使用“插插入入”|“標(biāo)簽標(biāo)簽”|“HTML標(biāo)簽標(biāo)簽”|iframe網(wǎng)頁制作- 59 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作使用行為使用行為 行為行為是在網(wǎng)頁中進(jìn)行的一系列動作是在網(wǎng)頁中進(jìn)行的一系列動作,通過這些動作通過這些動作實(shí)現(xiàn)用戶與頁面的實(shí)現(xiàn)用戶與頁面的交互交互；使用使用Dreamweaver內(nèi)置的內(nèi)置的行為行為(實(shí)質(zhì)是實(shí)質(zhì)是JavaScript代碼代碼), 用戶不需編寫代碼用戶不需編寫代碼,就可以實(shí)現(xiàn)交互和控制功就可以實(shí)現(xiàn)交互和控制功能能.行為由行為由事件和動作事件和動作組成組成,事件是動作被觸發(fā)的條件事件是動作被觸發(fā)的條件,動

35、作是用于完成特定任務(wù)預(yù)先編好的動作是用于完成特定任務(wù)預(yù)先編好的JavaScript代代碼碼.網(wǎng)頁制作- 60 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 使用行為使用行為步驟步驟: :1.1.執(zhí)行執(zhí)行“窗口窗口| |行為行為”命命令令, ,打開打開行為面板行為面板2.2.選中要添加行為的對象選中要添加行為的對象, ,單擊加號按鈕單擊加號按鈕3.3.在彈出的動作菜單中選在彈出的動作菜單中選擇某個(gè)動作擇某個(gè)動作4.4.根據(jù)所選的動作根據(jù)所選的動作, ,在參在參數(shù)窗口中設(shè)置參數(shù)數(shù)窗口中設(shè)置參數(shù)5.5.在事件菜單中為動作選在事件菜單中為動作選擇觸發(fā)事件擇觸發(fā)事件動作菜單動作菜單事件菜單事件菜單網(wǎng)頁制作- 61

36、 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作使用行為舉例使用行為舉例 看下面兩個(gè)簡單的例子：看下面兩個(gè)簡單的例子： 彈出一個(gè)新的瀏覽器窗口彈出一個(gè)新的瀏覽器窗口OnLoad OnLoad 打開瀏覽器窗口打開瀏覽器窗口 定制網(wǎng)頁瀏覽器狀態(tài)欄中的顯示文字定制網(wǎng)頁瀏覽器狀態(tài)欄中的顯示文字 OnLoad OnLoad 設(shè)置文本設(shè)置文本| |設(shè)置狀態(tài)欄文設(shè)置狀態(tài)欄文本本網(wǎng)頁制作- 62 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 利用圖層實(shí)現(xiàn)下拉菜單利用圖層實(shí)現(xiàn)下拉菜單- -步驟一步驟一圖層默認(rèn)為隱藏狀態(tài)圖層默認(rèn)為隱藏狀態(tài)步驟一：步驟一：分別為各個(gè)菜單項(xiàng)分別為各個(gè)菜單項(xiàng)創(chuàng)建對應(yīng)的下拉菜創(chuàng)建對應(yīng)的下拉菜單圖層。單圖層。網(wǎng)

37、頁制作- 63 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 利用圖層實(shí)現(xiàn)下拉菜單利用圖層實(shí)現(xiàn)下拉菜單- -步驟二步驟二指定行為動作：指定行為動作：當(dāng)鼠標(biāo)指向菜單項(xiàng)時(shí)，當(dāng)鼠標(biāo)指向菜單項(xiàng)時(shí)，隱藏的指定圖層將被隱藏的指定圖層將被顯示，當(dāng)鼠標(biāo)移開菜單顯示，當(dāng)鼠標(biāo)移開菜單項(xiàng)時(shí)，顯示的指定圖層項(xiàng)時(shí)，顯示的指定圖層重被隱藏。重被隱藏。步驟二：步驟二：分別為各個(gè)菜單項(xiàng)分別為各個(gè)菜單項(xiàng)和下拉菜單圖層指和下拉菜單圖層指定行為動作。定行為動作。網(wǎng)頁制作- 64 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 步驟三：調(diào)整多個(gè)圖層的疊放順序步驟三：調(diào)整多個(gè)圖層的疊放順序選中圖層選中圖層Layer7，直接用鼠，直接用鼠標(biāo)將其拖拽到相應(yīng)層次

38、。標(biāo)將其拖拽到相應(yīng)層次。網(wǎng)頁制作- 65 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 補(bǔ)充：網(wǎng)頁背景音樂處理補(bǔ)充：網(wǎng)頁背景音樂處理盡量使用盡量使用mid格式的音樂文件，避免產(chǎn)生慢速網(wǎng)頁。格式的音樂文件，避免產(chǎn)生慢速網(wǎng)頁。 Dreamweaver本身沒有提供設(shè)置背景音樂的命令，需本身沒有提供設(shè)置背景音樂的命令，需要在代碼視圖中要在代碼視圖中之間直接輸入代碼。之間直接輸入代碼。 網(wǎng)頁制作- 66 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作 網(wǎng)頁背景音樂處理網(wǎng)頁背景音樂處理設(shè)置開啟新窗口的超鏈接設(shè)置開啟新窗口的超鏈接網(wǎng)頁制作- 67 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作利用框架使網(wǎng)頁背景音樂連貫利用框架使網(wǎng)頁背景音樂

39、連貫1. 把把index.htm重命名為重命名為index-content.htm2. 新建一個(gè)新建一個(gè) “上方固定上方固定”框架網(wǎng)頁框架網(wǎng)頁3. 下框架設(shè)置初始網(wǎng)頁為下框架設(shè)置初始網(wǎng)頁為index-conten.htm網(wǎng)頁制作- 68 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作利用框架使網(wǎng)頁背景音樂連貫利用框架使網(wǎng)頁背景音樂連貫4. 取消取消index-content網(wǎng)頁的背景音樂設(shè)置網(wǎng)頁的背景音樂設(shè)置5. 保存框架集網(wǎng)頁為保存框架集網(wǎng)頁為index.htm,上框架網(wǎng)頁為上框架網(wǎng)頁為index-top.htm6. 在在index-top.htm網(wǎng)頁中設(shè)置背景音樂網(wǎng)頁中設(shè)置背景音樂7. 設(shè)置上框架屬性設(shè)置上框架屬性:框架高度為框架高度為1像素像素, 不顯示邊框。不顯示邊框。網(wǎng)頁制作- 69 -中國海洋大學(xué) 焦玲制作 網(wǎng)頁制作補(bǔ)充：應(yīng)用圖像