《Dreamweaver 課件PPT》由會(huì)員分享，可在線閱讀，更多相關(guān)《Dreamweaver 課件PPT（104頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、網(wǎng)頁(yè)設(shè)計(jì)經(jīng)典教程主講 段玲 第一章 萬(wàn)維網(wǎng)和網(wǎng)頁(yè)的基本概念萬(wàn)維網(wǎng)又稱WWW和公眾信息網(wǎng)是Internet世界最為重要的成員之一。 WWW是從網(wǎng)上獲得信息的主要途徑。 萬(wàn)維網(wǎng)的特點(diǎn)萬(wàn)維網(wǎng)的信息是通過信息頁(yè)的形式體現(xiàn)的。信息頁(yè)是用HTML（超文本標(biāo)注語(yǔ)言）語(yǔ)言編寫的。（即網(wǎng)頁(yè)） 靜態(tài)網(wǎng)頁(yè)：網(wǎng)頁(yè)的內(nèi)容不會(huì)發(fā)生變化；不能實(shí)現(xiàn)和瀏覽者的交互。 動(dòng)態(tài)網(wǎng)頁(yè)：是指網(wǎng)頁(yè)文件里包含了程序代碼，通過后臺(tái)數(shù)據(jù)庫(kù)與WEB服務(wù)器進(jìn)行信息交互。信息頁(yè)的傳輸是采用的HTTP協(xié)議,即超文本傳輸 協(xié)議 。 客戶瀏覽信息頁(yè)必須使用客戶端軟件，即瀏覽器。如：IE，Netscape等 網(wǎng)站的設(shè)計(jì)和發(fā)布流程網(wǎng)站是有獨(dú)立域名、獨(dú)立存放空間

2、的內(nèi)容的集合，這些內(nèi)容可能是網(wǎng)頁(yè)，也可能是程序或其他文件。對(duì)網(wǎng)站進(jìn)行規(guī)劃確定所創(chuàng)建的網(wǎng)站的目的及所提供的服務(wù)，從而確定站點(diǎn)中應(yīng)包含哪些網(wǎng)頁(yè)。設(shè)計(jì)站點(diǎn)的基本結(jié)構(gòu)站點(diǎn)的結(jié)構(gòu)是指站點(diǎn)內(nèi)部文件存放的排列方式。根據(jù)站點(diǎn)規(guī)劃確定站點(diǎn)框架收集素材；包括圖片、文字和聲音等內(nèi)容制作具體的網(wǎng)頁(yè)將設(shè)計(jì)的站點(diǎn)上傳到所選擇的遠(yuǎn)程站點(diǎn)上 繼續(xù) 網(wǎng)站的站點(diǎn)建設(shè)什么是站點(diǎn)？ 站點(diǎn)可以看作是一系列文檔的組合，這些文檔之間通過各種鏈接關(guān)聯(lián)起來(lái)，用來(lái)管理網(wǎng)站中的各類文件。站點(diǎn)的優(yōu)越性： 自動(dòng)更新鏈接；自動(dòng)復(fù)制文件到當(dāng)前默認(rèn)的站點(diǎn)；自動(dòng)生成站點(diǎn)地圖等。 相關(guān)概念本地計(jì)算機(jī)：存放自己制作網(wǎng)頁(yè)的計(jì)算機(jī)。遠(yuǎn)程計(jì)算機(jī)：是用來(lái)發(fā)布自己主頁(yè)，提

3、供給Internet上的其它使用者來(lái)瀏覽的計(jì)算機(jī)。本地站點(diǎn)：是指建立在本地計(jì)算機(jī)上的站點(diǎn)。遠(yuǎn)程站點(diǎn)：上傳到遠(yuǎn)程計(jì)算機(jī)上的站點(diǎn) DR的啟動(dòng)及界面介紹 DR是將多個(gè)文件集中到一個(gè)界面中一個(gè)集成軟件。它大大降低了資源的占用率。使用戶可以方便快捷的完成相關(guān)的操作。 DR除了有一般應(yīng)用程序窗口所擁有的菜單和工具欄，它的更多操作是通過各種面板完成的。有關(guān)面板的使用以后慢慢介紹。 站點(diǎn)的創(chuàng)建創(chuàng)建站點(diǎn)方法：1.創(chuàng)建一個(gè)多級(jí)的文件夾，一般要設(shè)置有一個(gè)總文件夾，在其中再創(chuàng)建一些子文件夾，用于存放不同類型的文件。如img用于存放圖片文件，audio用于存放音頻文件。2.在DR中，指定總文件夾為站點(diǎn)方法：1)建立一個(gè)

4、文件夾2)站點(diǎn)/站點(diǎn)管理（指定所建的文件夾為站點(diǎn)文件夾） 站點(diǎn)規(guī)劃要點(diǎn)1.用分級(jí)文件夾來(lái)保存文檔2.使用合理的文件名 文件名要直觀3.合理配置文檔中的資源4.將本地站點(diǎn)和遠(yuǎn)程站點(diǎn)設(shè)置為同樣的結(jié)構(gòu)5.整個(gè)站點(diǎn)要有一個(gè)整體的風(fēng)格 設(shè)計(jì)站點(diǎn)和網(wǎng)頁(yè)的注意事項(xiàng)在網(wǎng)頁(yè)設(shè)計(jì)中，不能使用中文作為文件或文件夾名網(wǎng)頁(yè)中的文件命名區(qū)分大小寫每個(gè)網(wǎng)站都必須有一個(gè)主頁(yè)主頁(yè)文件一般以index.htm文件名而且必須放在站點(diǎn)的根文件夾下 網(wǎng)站頁(yè)面布局網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)的基本內(nèi)容通常包括：標(biāo)題、標(biāo)志、頁(yè)眉、導(dǎo)航欄、主內(nèi)容區(qū)和頁(yè)腳。1.標(biāo)題是用來(lái)提示該頁(yè)面內(nèi)容的，通常顯示在IE的標(biāo)題欄。是在頁(yè)面屬性中設(shè)置的。2.網(wǎng)站的標(biāo)志：成功的

5、網(wǎng)站標(biāo)志有著獨(dú)特的形象標(biāo)識(shí)。3. Banner(橫幅廣告）：大多數(shù)網(wǎng)站的創(chuàng)建者在此設(shè)置網(wǎng)站的宗旨、宣傳口號(hào)和廣告語(yǔ)。4.導(dǎo)航欄：導(dǎo)航既是網(wǎng)頁(yè)設(shè)計(jì)中的重要部分，又是整個(gè)網(wǎng)站設(shè)計(jì)中的一個(gè)較獨(dú)立的部分。它通常放在頂端和左邊。5.內(nèi)容區(qū)：它是頁(yè)面設(shè)計(jì)的主體元素。6.頁(yè)腳：是頁(yè)面的底部；它用來(lái)標(biāo)注該站點(diǎn)所屬公司的名稱、地址、上的版權(quán)和電子信箱地址等 網(wǎng)頁(yè)的布局類型常用的有：國(guó)字型、廠字型、封面型等。 網(wǎng)頁(yè)的制作瀏覽和修改1.網(wǎng)頁(yè)文檔的創(chuàng)建在DR中進(jìn)行編輯2. 文檔的保存注意1.應(yīng)將文檔保存在站點(diǎn)文件夾中 2.一般只要建立了站點(diǎn)會(huì)默認(rèn)存入站點(diǎn)文件夾中3.網(wǎng)頁(yè)的預(yù)覽：需要在IE中4.網(wǎng)頁(yè)文件的修改：需要在D

6、R中5. 關(guān)閉文檔 視圖方式在Dreamweaver 中共有三種視圖方式。1.代碼2.設(shè)計(jì)3.代碼和設(shè)計(jì)它們之間的切換可以利用“查看”/也可以利用“查看”菜單中的視圖按鈕。 網(wǎng)頁(yè)文件的建立1.建立站點(diǎn)2.在站點(diǎn)目錄中右擊/新建文件/為該文件改名注意：網(wǎng)頁(yè)文件常用的文件類型為.htm。在更改文件名時(shí)不可更改擴(kuò)展名。也可以用文件/新建/基本頁(yè)完成，但是這種方法建立的文件應(yīng)立即保存為好。 頁(yè)面的屬性設(shè)置頁(yè)面屬性包括對(duì)背景、標(biāo)題以及頁(yè)面元素的初步設(shè)置在創(chuàng)建新網(wǎng)頁(yè)時(shí)，默認(rèn)的頁(yè)面總是以白色為背景，沒有背景圖像、沒有標(biāo)題。制作一個(gè)網(wǎng)頁(yè)時(shí)，一般需要先對(duì)網(wǎng)頁(yè)的頁(yè)面屬性進(jìn)行設(shè)置。網(wǎng)頁(yè)的標(biāo)題是在瀏覽網(wǎng)頁(yè)時(shí)做為IE窗

7、口的標(biāo)題顯示在IE的標(biāo)題欄上。 文檔的輸入和編輯方法一：直接輸入方法二：可以從其它軟件中復(fù)制/粘貼 空格的輸入在編輯網(wǎng)頁(yè)時(shí)一般情況下只能輸入一個(gè)空格，不能輸入連續(xù)的，可以采用以下方法。將漢字的輸入方式設(shè)制為全角方式，按SPACE鍵便可連續(xù)輸入空格。用與背景顏色相同的字符來(lái)完成空格的輸入。 分段與分行回車是段落的結(jié)束標(biāo)記，當(dāng)需要分段時(shí)，只需要回車就可以。如果只需要換行而不分段，則需要同時(shí)按下SHIFT+ENTER段落間的距離要比行距大。在HTML語(yǔ)言的標(biāo)記中，分段為而換行的標(biāo)記為 字符格式的設(shè)置字符格式一般包括字體、字號(hào)、顏色、字形等。字符格式的設(shè)置都可以使用下面兩種方法完成：1.屬性面板2.文

8、本/如果所需要的字體字體列表中沒有則可以從“字體列表編輯”框中添加。設(shè)置字符的顏色時(shí)，最好使用屬性面板。在代碼中顏色是用十六進(jìn)制數(shù)表示的。字號(hào)有17級(jí)，在“編輯/參數(shù)選擇”中可以設(shè)置各級(jí)字體的大小。要注意如何刪除已設(shè)置好的顏色。 滾動(dòng)字幕的制作在網(wǎng)頁(yè)中常?？梢钥吹綕L動(dòng)的字幕。制作法一：選中要滾動(dòng)的文字1.插入/標(biāo)簽/marquee(這時(shí)的視圖方式自動(dòng)變?yōu)樵O(shè)計(jì)/代碼視圖2.在代碼視圖中填寫需要的參數(shù)輸入marque direction=“up”,即可讓文字向上移動(dòng)。方向還可用“down” ,”left”, “right” 可以使用onmouseover=“stop()”和onmouseout=“

9、start()” 注意： marquee標(biāo)簽不能放入之中。 項(xiàng)目符號(hào)和編號(hào)a.給段落添加項(xiàng)目符號(hào)和編號(hào)后，段落間的距離會(huì)變小。b.設(shè)置好項(xiàng)目符號(hào)和編號(hào)后，可以用屬性面板上的“項(xiàng)目符號(hào)”按鈕設(shè)置項(xiàng)目符號(hào)的形狀和編號(hào)的起始數(shù)。 面板的操作 DR的面板是浮動(dòng)的，可以隨意的在屏幕上移動(dòng)，也可以隱藏或關(guān)閉。如何將關(guān)閉的面板打開方法：窗口/面板的名稱如何將隱藏的面板顯示出來(lái)方法：窗口/排列面板 插入對(duì)象在網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)的頁(yè)面上除了文字之外，還可以插入一些非文字性的對(duì)象。如日期，圖片等 。插入的方法都需要先定位插入點(diǎn)，然后可以用下面兩種插入對(duì)象：1.在“插入”面板上選擇需要的對(duì)象2.在“插入”菜單中選擇需

10、要的對(duì)象 插入水平線長(zhǎng)度的設(shè)置有兩種方式，一種是按絕對(duì)像素長(zhǎng)度，另一種是按屏幕的相對(duì)長(zhǎng)度。水平線獨(dú)立成一段落 插入日期在網(wǎng)頁(yè)上設(shè)置站點(diǎn)發(fā)布的日期，無(wú)論是對(duì)設(shè)計(jì)者還是瀏覽者來(lái)說(shuō)都會(huì)帶來(lái)方便。如果選中“存儲(chǔ)時(shí)自動(dòng)更新”項(xiàng)，則每次存儲(chǔ)時(shí)都會(huì)自動(dòng)更新插入的日期。 插入特殊符號(hào)用此功能輸入鍵盤上不能輸入的字符。 插入圖片在設(shè)計(jì)網(wǎng)頁(yè)時(shí)主要用到的有三種格式的圖像文件，它們是JPG,GIF和PNG。當(dāng)網(wǎng)頁(yè)頁(yè)面被瀏覽時(shí)，系統(tǒng)會(huì)在站點(diǎn)中調(diào)用所用到的圖像文件。為了確保圖像的正確瀏覽，一定要將所用到的圖像文件復(fù)制到當(dāng)前站點(diǎn)之中。圖片的圖文混排：在DW中圖文混排是利用對(duì)齊方式來(lái)完成的。當(dāng)圖片與文字的對(duì)齊方式設(shè)置為左對(duì)齊

11、或右對(duì)齊時(shí)可實(shí)現(xiàn)圖文混排。圖片屬性面板中的“替換（ALT)項(xiàng)是為圖片添加說(shuō)明的。利用“屬性”面板可以設(shè)置圖像的效果，如：亮度、裁剪等。 插入圖片的注意事項(xiàng)在網(wǎng)頁(yè)中插入的圖片尺寸越大讀取的速度越慢，因此應(yīng)先在其它軟件中將尺寸改小。如果在DW中改變它的大小則還會(huì)改變文件的大小。如果一張圖片要用多次可以在”窗口“/資源，即利用資源面板完成。 圖像占位符圖像占位符，顧名思義就是占領(lǐng)位置的圖形。在網(wǎng)頁(yè)設(shè)計(jì)過程中，頁(yè)面中的某個(gè)位置一時(shí)沒有合適的圖片或其它的內(nèi)容，可能導(dǎo)致整個(gè)頁(yè)面的混亂，我們就可以用占位符，先占用這些圖片的位置。方法一：插入/占位符方法二：插入面板/圖像/占位符。 插入翻轉(zhuǎn)（輪換）圖片翻轉(zhuǎn)圖

12、片是指這樣當(dāng)鼠標(biāo)指針掠過一幅圖片時(shí)，它的顯示會(huì)變?yōu)榱硪环鶊D片。翻轉(zhuǎn)圖片包含了兩張圖片，一張是初始圖片另一張是替換圖片。 插入FLSH按鈕和FLSH文字 FLSH按鈕是利用內(nèi)置的FLSH按鈕和文字，可以在網(wǎng)頁(yè)上制作出有動(dòng)態(tài)效果的按鈕和方字。方法：1.插入/交互式圖像/FLSH按鈕2.利用對(duì)象面板 .如果多次用到同一形式（標(biāo)注文字不同）的按鈕，必須一個(gè)一個(gè)插入，不能復(fù)制。按鈕的大小在屬性面板上修改。每插入一個(gè)FLSH按鈕就會(huì)產(chǎn)生一個(gè)“.swf”格式的文件，最好將其存在站點(diǎn)文件夾下。 FLASH文字只能改變顏色。 插入flash文件插入flash文件方法：插入/媒體/FLASH注意：必須事先準(zhǔn)備好類

13、型為.swf的flash文件。 表格表格是網(wǎng)頁(yè)設(shè)計(jì)中非常有用的設(shè)計(jì)工具。它不僅可以使得數(shù)據(jù)的表達(dá)更加清晰，而且在設(shè)計(jì)頁(yè)面中有著非常特殊的作用，如頁(yè)面的布局，頁(yè)面分欄等。 表格的創(chuàng)建表格的創(chuàng)建的方法：1.插入/表格2.單擊“對(duì)象”面板中的“插入表格”按鈕。3.拖動(dòng)“對(duì)象”面板上的“插入表格”按鈕到需要的位置。 表格屬性的設(shè)置表格的寬度和高度有兩種設(shè)置方式，即像素?cái)?shù)(pixels)和瀏覽器窗口的百分比數(shù)()。表格的高度一般采用自動(dòng)?！斑吙颉表?xiàng)是用來(lái)設(shè)置表格線的寬度，默認(rèn)值為1。當(dāng)邊框設(shè)為0時(shí)，表格線為虛線，在瀏覽器中不顯示。表格或單元格的背景可以是純色也可以是圖片。 選中整張表格選中表格的標(biāo)致：整

14、個(gè)表格的外邊框線為粗線。選中整張表格的方法：1.用鼠標(biāo)單擊表格的左上角2.用鼠標(biāo)單擊表格的任意一條表格線3.修改/表格/選擇表格4.將光標(biāo)定位到表格中，單擊任務(wù)欄上的標(biāo)記5.編輯/全選（ctrl+A) 關(guān)于“全選”命令該命令不同于word 中的“全選”命令，具體操作如下：1.如光標(biāo)在單元格中，則選中該單元格。2.如果已選中了單元格，則選中整張表。3.如果已選中了整張表則選中該網(wǎng)頁(yè)中的所有內(nèi)容。 選中表格和單元格選中單元格的標(biāo)致1.光標(biāo)在該單元格中閃爍;2.單元格的邊框線為粗線選擇方法：1.先單擊要選擇的單元格，然后拖動(dòng)鼠標(biāo)到相鄰的單元格。2.先單擊要選擇的單元格，然后單擊狀態(tài)欄的。 單元格的拆

15、分1.選中要拆分的單元格2.單擊屬性面板上的拆分單元格按鈕 單元格的合并1.選中要合并的單元格2.單擊屬性面板上的合并單元格按鈕。 表格行、列的增加和刪除方法：1.修改/表格/2.利用右鍵3.用屬性面板改變行數(shù)和列數(shù)4.用TAB鍵 表格格式套用1.選中表格2.命令/格式化表格 單元格的復(fù)制、移動(dòng)、和清除其操作與WORD相同注意：1.如果復(fù)制的是整行或整列，則會(huì)添加一行或是一列。2.編輯/清除不能刪除單元格 表格排序方法：命令/表格排序 表格在頁(yè)面布局中的應(yīng)用用表格布局頁(yè)面時(shí)常常需要與跟蹤圖配合使用。跟蹤圖常常是用其他軟件制作的。跟蹤圖的使用方法：頁(yè)面屬性/跟蹤圖 布局視圖DR有兩種視圖：標(biāo)準(zhǔn)視

16、圖和布局視圖。切換方法：對(duì)象面板中，單擊相應(yīng)的按鈕。說(shuō)明：在布局視圖中，應(yīng)在選使用布局表格，才能使用布局單元格。 超級(jí)鏈接的使用超鏈接的概述超鏈接為暢游網(wǎng)絡(luò)提供了方便，是網(wǎng)頁(yè)制作中使用的比較多的一種技術(shù)。是WWW的魅力所在。使用超鏈接是為了把眾多的網(wǎng)站的網(wǎng)頁(yè)聯(lián)系起來(lái)，構(gòu)成一個(gè)有機(jī)的整體。超鏈接使用的方法就是選擇需要插入超鏈接的頁(yè)面元素，然后再設(shè)置該鏈接的URL地址。 超鏈接的分類超級(jí)鏈接有文本超級(jí)鏈接、圖像熱點(diǎn)的超級(jí)鏈接、Email鏈接、錨點(diǎn)的超級(jí)鏈接和下載文件的超級(jí)鏈接。 文本或圖像的超級(jí)鏈接首先要選定欲要?jiǎng)?chuàng)建鏈接的文本使用下列方法之一建立鏈接：1.用屬性面板2.用“修改/創(chuàng)建鏈接”3.利用

17、“指向文件圖標(biāo) ”創(chuàng)建鏈接例一文本的超級(jí)鏈接例二圖像的超級(jí)鏈接（返回按鈕） 熱區(qū)鏈接所謂熱區(qū)鏈接是指將一張圖片分成若干個(gè)區(qū)域，為不同的區(qū)域設(shè)置不同的鏈接或圖片說(shuō)明。在創(chuàng)建超鏈接時(shí)，可以為整幅圖建立鏈接也可以為每個(gè)熱區(qū)創(chuàng)建一個(gè)鏈接。定義熱區(qū)的方法1.選中整個(gè)圖片2.選擇屬性面板上的矩形、圓形或多邊形工具3.在圖形適當(dāng)位置標(biāo)記出形狀不同的熱區(qū) 錨點(diǎn)的超級(jí)鏈接所謂錨點(diǎn)超級(jí)鏈接就是鏈接到同一個(gè)網(wǎng)頁(yè)中的不同的位置或者鏈接到另一個(gè)網(wǎng)頁(yè)的某一個(gè)位置。錨點(diǎn)用來(lái)標(biāo)記網(wǎng)頁(yè)中的某一個(gè)具體的位置。 創(chuàng)建錨點(diǎn)及錨點(diǎn)的超級(jí)鏈接1.在網(wǎng)頁(yè)中選擇需要插入錨點(diǎn)的位置2.選擇“插入/命名錨記”或在對(duì)象面板中單擊“命名錨記”按鈕。

18、3.便會(huì)在插入點(diǎn)上顯示錨標(biāo)記 4.如果沒有錨點(diǎn)顯示用“查看/可視化助理/不可見元素”設(shè)置其顯示，也可用這種方法 設(shè)置錨點(diǎn)隱藏。5.錨點(diǎn)在鏈接的引用時(shí)，同一文檔中路徑需要在錨點(diǎn)名前加#；不同文檔中錨點(diǎn)的描述應(yīng)是文檔名.htm #錨點(diǎn)名6.命名錨點(diǎn)是區(qū)分大小寫的。7.例一：報(bào)價(jià)單（同一網(wǎng)頁(yè)中和不同網(wǎng)頁(yè)中）例二：為中國(guó)地圖不同的區(qū)域設(shè)置不同的說(shuō)明和鏈接。 文件下載超級(jí)鏈接當(dāng)被鏈接的文件類型不是網(wǎng)頁(yè)文件時(shí)，這時(shí)文件就會(huì)被下載。如類型為.MP3時(shí)，就為MP3下載。 創(chuàng)建E-mail鏈接E-mail鏈接的方式在很多網(wǎng)頁(yè)中都被廣泛地采用，當(dāng)瀏覽者單擊該鏈接時(shí)，系統(tǒng) 會(huì)啟動(dòng)電子郵件發(fā)送程序（如Outlook

19、Express),并將網(wǎng)頁(yè)設(shè)計(jì)者的郵件地址放在收件人文本框，為瀏覽者發(fā)送郵件做好準(zhǔn)備。 創(chuàng)建E-mail鏈接的方法1.插入/電子郵件鏈接2.選中要?jiǎng)?chuàng)建鏈接的對(duì)象/在屬性面板的Link文本框中輸入 mailto:要鏈接的電子郵件地址 友情鏈接所謂友情鏈接是指被鏈接的對(duì)象是本站點(diǎn)之外的其它網(wǎng)站。創(chuàng)建方法與其它方法相同，只是鏈接的地址必須填寫被鏈接網(wǎng)站的網(wǎng)址。如要鏈接新浪鏈接地址應(yīng)為：http:/ 空鏈接和腳本鏈接空鏈接：將鏈接地址設(shè)為#腳本鏈接：將鏈接地址設(shè)為腳本，通常為：javascript:腳本代碼。如javascript:close() 其作用是關(guān)閉當(dāng)前窗口。 建立超鏈接需注意的問題1.超鏈

20、接路徑中的文件名或文件夾的名字都必須是英文的。2.目標(biāo)文件必須保存才可以鏈接成功。3.打開鏈接窗口的方式可以在“屬性面板中”用“目標(biāo)”項(xiàng)設(shè)定。blank 將被鏈接的文件在新的窗口中打開self 在原窗口中打開 網(wǎng)頁(yè)的自動(dòng)刷新在對(duì)象面板中的“文件頭”子面板中選擇刷新 按鈕。 網(wǎng)頁(yè)的頭部文件一個(gè)HTML文件，通常由包括在和標(biāo)記間的頭部和包括在和標(biāo)記間的正文兩個(gè)部分組成。在文檔窗口中，主要顯示的是正文部分的內(nèi)容；頭部中包括很多非常重要的信息，如標(biāo)題、文檔類型等很多不可見元素，但這些元素對(duì)網(wǎng)頁(yè)的設(shè)計(jì)是很重要的。 書寫頭部的方法可在代碼中直接書寫可用對(duì)象面板中的文件頭面板編寫 網(wǎng)頁(yè)的自動(dòng)刷新在瀏覽網(wǎng)頁(yè)時(shí)

21、常常需要自動(dòng)轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，這就是頭部標(biāo)記META的刷新作用。標(biāo)記格式：Meta http-equiv=“refresh”conten=“秒數(shù);URL網(wǎng)頁(yè)的URL地址”注意：1. URL必須大寫。2.網(wǎng)頁(yè)地址中的文件名必須帶有擴(kuò)展名例如：meat http-equiv=“refresh”conten=“3;URL=file:/e:lx01.htm” 表單的創(chuàng)建與應(yīng)用表單技術(shù)可以實(shí)現(xiàn)瀏覽者同Internet服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的 種重要的方式。無(wú)論是電子商務(wù)、網(wǎng)上調(diào)查、還是留言板都要求網(wǎng)頁(yè)能夠接收瀏覽者輸入的信息，而表單就是網(wǎng)站獲取用戶信息的最重要的手段之一。 創(chuàng)建表單

22、的方法創(chuàng)建表單的方法 ：1.插入/表單2.使用“表單”對(duì)象面板 注意：使用表時(shí)單必須先創(chuàng)建表單，再創(chuàng)建表單元素。當(dāng)創(chuàng)建了表單之后，在頁(yè)面上會(huì)用紅色虛線框表示表單域。這種紅色域是不能被編輯的，但會(huì)自動(dòng)調(diào)整。 插入表單對(duì)象表單可以包含標(biāo)準(zhǔn)對(duì)象，如文本域、按鈕、復(fù)選框、單選框、列表和跳轉(zhuǎn)菜單等。利用表單發(fā)送的內(nèi)容:在表單“屬性”面板中的“動(dòng)作”文本框中輸入：mailto:電子郵件地址，表示要將表單數(shù)據(jù)發(fā)送給相應(yīng)的電子郵箱，當(dāng)單擊“提交”按鈕后，將自動(dòng)打開outlook expreese處理該郵件。 框架框架就是把網(wǎng)頁(yè)頁(yè)面劃分成相對(duì)獨(dú)立的若干區(qū)域，每個(gè)區(qū)域都相當(dāng)于一個(gè)獨(dú)立的頁(yè)面，這些頁(yè)面既各自獨(dú)立又相

23、互聯(lián)系?？蚣芗夹g(shù)是由框架集和框架兩部分組成?？蚣芗强蚣艿募稀Ｋx了各框架的結(jié)構(gòu)、數(shù)量、大小尺寸及裝入框架中的頁(yè)面屬性等?？蚣苁强蚣芗慕M成元素，框架的頁(yè)面是整個(gè)網(wǎng)頁(yè)頁(yè)面的一部分，它具有網(wǎng)頁(yè)所有的屬性和功能。 框架的創(chuàng)建、調(diào)整與刪除用框架技術(shù)制作的網(wǎng)頁(yè)可以將一個(gè)頁(yè)面分成上下或左右結(jié)構(gòu)的框架，把單頁(yè)面拓展成多頁(yè)面。創(chuàng)建方法1.文件/新建/框架類型2.對(duì)象面板/框架類型3.修改/框架集 框架的保存框架結(jié)構(gòu)的網(wǎng)頁(yè)制作完成后，可以分別保存每個(gè)框架文檔;也可以單獨(dú)保存框架集文檔;還可以將整個(gè)框架集與它的各個(gè)框架文檔一起保存，不同方式的操作如下：1.保存框架文檔：2.保存框架集文檔3.保存框架集中所有

24、文檔 說(shuō)明：含有框架的網(wǎng)頁(yè)保存會(huì)同時(shí)存在多個(gè).htm文件。除每個(gè)框架一個(gè)文件外，框架集還會(huì)有一個(gè)文件。 拆分框架1.單擊要拆分的框架內(nèi)部2.修改/框架3.按住ALT鍵用鼠標(biāo)拖動(dòng)邊框線 調(diào)整框架1.用鼠標(biāo)拖動(dòng)邊框線2.用屬性面板 刪除框架拖動(dòng)邊框線 框架集的屬性設(shè)置1.選中框架集 單擊邊框線2.框架集屬性面板 默認(rèn)框架屬性是無(wú)邊框線、無(wú)滾動(dòng)條的。 框架屬性設(shè)置1.選中框架 按住alt鍵單擊要選中的框架的任意位置2.框架屬性：框架的名稱：它是用于超鏈接的，其名稱中只能用字母、數(shù)字、下劃線?？梢栽O(shè)置框架是否有滾動(dòng)條 框架中內(nèi)容的填寫1.可以在框架中直接編輯網(wǎng)頁(yè)內(nèi)容2.將事先制作好的網(wǎng)頁(yè)文件設(shè)為源文件

25、（即設(shè)置默認(rèn)顯示頁(yè)面）。A)選中該框架B)在屬性面板中填寫源文件名為欲使用的網(wǎng)頁(yè)文件路徑。 用鏈接控制框架顯示內(nèi)容1.選擇要建立超鏈接的對(duì)象2.在屬性面板中指定要鏈接的文件名3.在“目標(biāo)”欄中，選擇要顯示被鏈接文檔的框架名稱。默認(rèn)為在當(dāng)前框架中顯示。 CSS樣式 CSS是英文cascading style sheet的縮寫。稱為“級(jí)聯(lián)樣式表”，也稱為層疊樣式表。 CSS是一種對(duì)文本進(jìn)行格式化操作的高級(jí)技術(shù)，它從一個(gè)較高的級(jí)別上對(duì)文本進(jìn)行控制。它的特點(diǎn)是可以對(duì)文本的格式進(jìn)行精確控制，而且可以在文檔中實(shí)現(xiàn)格式的自動(dòng)更新。 CSS樣式的分類嵌入式：獨(dú)立的文檔中應(yīng)用CSS樣式外部鏈接式：應(yīng)用于多個(gè)文檔

26、 ，生成專門的*.css文件。 CSS樣式引例設(shè)置超鏈接文字的格式.利用“頁(yè)面屬性”設(shè)置，查看代碼如下：可從代碼中修改代碼如下：a:hover color: #33CC00;font-family:華文彩云; 創(chuàng)建CSS樣式的方法1.用菜單在CSS樣式面板中（窗口/CSS樣式）右擊/新建說(shuō)明：新建樣式的名稱必須以”.”開始樣式有三種類型，其中use CSS selector用于超鏈接的格式設(shè)置。2.套用CSS樣式：選中對(duì)象/在CSS樣式面板中右擊/套用。 幾種常見的CSS格式1.設(shè)置背景不隨文字一起滾動(dòng)。CSS樣式定義框中：背景/附件/固定（設(shè)置后一定要選擇：全選/應(yīng)用）2.字的大小、添加上、

27、下劃線3.設(shè)置陰影（擴(kuò)展/shadow)。 陰影的效果只對(duì)層起作用。4.動(dòng)感效果（擴(kuò)展/blur/)5.光暈的效果（擴(kuò)展/glow)6.修改項(xiàng)目符號(hào)和編號(hào)的形式(列表）7.設(shè)置表格的邊框線。（邊框） 樣式文件的刪除CSS樣式面板中/選中要?jiǎng)h除的樣式/刪除樣式 2.用代碼設(shè)置CSS屬性在文檔的頭部?jī)?nèi)容中插入CSS格式代碼。其格式為：查看代碼雙擊CSS樣式名。例如：設(shè)置背景不隨文字一起滾動(dòng)可在頭部?jī)?nèi)容中加入 層層是可以將頁(yè)面元素精確定位的一種新的定位技術(shù)。層內(nèi)可以放置文本、圖像、表單等元素。插入層的方法：方法1：插入/布局對(duì)象/層方法2：布局面板/層層的標(biāo)簽為Div 選擇層1.選定層的標(biāo)志是層的邊

28、框線上有黑色的方塊點(diǎn)。2.方法：?jiǎn)螕魧拥倪x擇手柄或邊線。（如果在層中單擊則只是激活層）3.選擇多個(gè)層：在選擇的同時(shí)按住SHIFT鍵。 層的屬性1.名稱2.定位3.大小4.層的疊放層次5.層顏色的填充6.可見性 層面板的使用1.打開：窗口/層2.可觀察、設(shè)置可見性和疊放層次3.可設(shè)置“防止重疊” 層的操作1.層的對(duì)齊：選中/修改/對(duì)齊2.防止層的重疊3.層與表的相互轉(zhuǎn)換：修改/轉(zhuǎn)換/ 層的應(yīng)用層和行為技術(shù)組合可以完成很多網(wǎng)頁(yè)制作中的操作如：下拉菜單、拼圖游戲等。還有一個(gè)重要應(yīng)用就是布局頁(yè)面。例利用層制作模板。 時(shí)間線所謂時(shí)間線，是DW提供的一個(gè)設(shè)計(jì)網(wǎng)頁(yè)動(dòng)態(tài)運(yùn)動(dòng)層的工具面板，時(shí)間線通過設(shè)置不同時(shí)間

29、段的層的大小、位置和可見性等屬性可以制出動(dòng)態(tài)的網(wǎng)頁(yè)動(dòng)畫。 時(shí)間線創(chuàng)作動(dòng)畫的基本原理把一對(duì)象在一定的時(shí)間內(nèi)，根據(jù)設(shè)計(jì)好的路徑顯示在某網(wǎng)頁(yè)頁(yè)面上，再把其它對(duì)象放置在另外的時(shí)間段內(nèi)。在時(shí)間線上顯示的每一對(duì)象就叫一幀。整條時(shí)間線就是由許多幀構(gòu)成的。當(dāng)將時(shí)間段連續(xù)播放時(shí)，則所有的幀將按照設(shè)置好的時(shí)間和顯示方式一個(gè)一個(gè)的顯示出來(lái)，一段動(dòng)態(tài)效果畫面就顯示在瀏覽者面前。 相關(guān)術(shù)語(yǔ)1.關(guān)鍵幀：是指給某個(gè)對(duì)象指定了屬性的幀?？梢宰詣?dòng)生成兩個(gè)關(guān)鍵幀之間的過渡幀。2. FPS：是每秒播放的幀數(shù)。一般電影每秒播放27幀。 用時(shí)間線創(chuàng)建動(dòng)畫1.時(shí)間線只能移動(dòng)層，因此要移動(dòng)的文字或圖像首先要將其放入層中。2.時(shí)間線通過改變

30、層的位置、大小、可見性以及疊放順序來(lái)創(chuàng)建動(dòng)畫。 創(chuàng)建對(duì)象的移動(dòng)過程1.創(chuàng)建相關(guān)的層2.打開時(shí)間線面板（窗口/時(shí)間軸）3.為時(shí)間線添加對(duì)象a.右擊時(shí)間線/添加對(duì)象b.直接拖動(dòng)對(duì)象到時(shí)間線c.修改/時(shí)間軸/添加對(duì)象4.設(shè)置路徑：a.添加關(guān)鍵幀:設(shè)置關(guān)鍵幀的位置b.修改/時(shí)間軸/錄制路徑/拖動(dòng)對(duì)象繪制路徑5.設(shè)置播放速度和播放方式。 在時(shí)間線上改變層的可見性在時(shí)間線上選擇一個(gè)關(guān)鍵幀打開屬性面板進(jìn)行調(diào)整 事件、動(dòng)作和行為的應(yīng)用行為（behaviors)顧名思義就是以某種方式完成的動(dòng)作，行為是由事件（Event)和動(dòng)作（action)兩部分組成的，事件是指完成某一動(dòng)作的方式,如單擊、雙擊、鼠標(biāo)離開等。動(dòng)

31、作是指網(wǎng)頁(yè)的一些特殊的功能，如播放音樂、顯示和隱藏層。如在右擊圖標(biāo)打開快捷菜單的行為中，右擊是事件，打開菜單是動(dòng)作即行為事件動(dòng)作 為對(duì)象添加行為為對(duì)象添加行為是通過行為面板完成的。打開方法：窗口/行為 具體步驟1.在合適的位置插入所有的元素2.選中要添加行為的對(duì)象3.單擊行為面板上的“”按鈕，并為該元素選擇一個(gè)動(dòng)作，然后為其設(shè)置屬性。4.單擊事件和動(dòng)作之間的可以選擇需要的事件。注意：一定要選擇適用的瀏覽器，否則很多行為和事件不能添加。 修改行為1.修改行為也是在行為面板中完成的。 常用的行為層的顯示與隱藏（例捉迷藏、下拉菜單）層的拖動(dòng)（看圖記英語(yǔ)、拼圖游戲）彈出消息框（大小是默認(rèn)的，例：拒絕下

32、載：設(shè)置右擊彈出消息框）彈出網(wǎng)頁(yè)（是一個(gè)預(yù)先制作好的網(wǎng)頁(yè)，可以設(shè)置窗口的大?。?yàn)證表單（簡(jiǎn)單的內(nèi)容驗(yàn)證）播放音樂（試聽）動(dòng)態(tài)的下拉菜單和級(jí)聯(lián)菜單(設(shè)置此行為前必須先建立自鏈接并保存此文件）設(shè)置狀態(tài)欄的文本行為與時(shí)間軸的結(jié)合（制作“開始”和“停止”按鈕）調(diào)用javascript(例09.htm)1 編寫函數(shù)2 給對(duì)象添加行為 代碼插件（例如：插入視頻文件） 模板新建模板文件1.資源面板中/新建按鈕2.編輯頁(yè)面內(nèi)容：主要編輯布局和不變內(nèi)容區(qū)。3.設(shè)置可編輯區(qū)域。4.保存應(yīng)用模板1.新建/基本頁(yè)2.在資源面板中選中要套用的模板文件/應(yīng)用。注意：1.模板中的區(qū)域默認(rèn)為“不可編輯區(qū)”2.萬(wàn)萬(wàn)不可直接打開模板文件建立基本網(wǎng)頁(yè)。 后續(xù)作業(yè)添加時(shí)間軸（停止和播放按鈕）層的拖動(dòng)（新的網(wǎng)頁(yè)）菜單層的隱藏消息框和彈出網(wǎng)頁(yè)“網(wǎng)絡(luò)調(diào)查”添加驗(yàn)證新歌中添加“試聽”改變狀態(tài)欄的文本調(diào)用腳本（新的網(wǎng)頁(yè)）代碼插件