網(wǎng)站外觀(guān)設(shè)計(jì)與內(nèi)容編輯詳述

第3章網(wǎng)站外觀(guān)設(shè)計(jì)和內(nèi)容編輯

河北科技大學(xué)經(jīng)濟(jì)管理學(xué)院袁再健6/12/20231通過(guò)本章的學(xué)習(xí)，主要掌握以下知識(shí)點(diǎn)：Dreamweaver簡(jiǎn)介站點(diǎn)的規(guī)劃與設(shè)計(jì)站點(diǎn)的管理網(wǎng)頁(yè)編輯與超連接網(wǎng)頁(yè)定位技術(shù)層疊樣式、模板與庫(kù)表單與應(yīng)用6/12/202323.1DreamweaverMX簡(jiǎn)介DreamweaverMX是Macromedia公司最新發(fā)布的集網(wǎng)頁(yè)設(shè)計(jì)、代碼開(kāi)發(fā)、網(wǎng)站創(chuàng)建和管理于一體的軟件。DreamweaverMX不僅可以輕松設(shè)計(jì)網(wǎng)站前臺(tái)的頁(yè)面，而且也可以方便地實(shí)現(xiàn)網(wǎng)站后臺(tái)的各種復(fù)雜功能。6/12/20233啟動(dòng)DreamweaverMX后，屏幕顯示的是工作區(qū)窗口，此時(shí)系統(tǒng)打開(kāi)一個(gè)名為Untitled的空白文檔，在網(wǎng)頁(yè)文件編輯區(qū)中，設(shè)計(jì)者可以完成網(wǎng)頁(yè)的設(shè)計(jì)。工作區(qū)窗口各部分功能如下所述。DreamweaverMX的工作環(huán)境6/12/20234標(biāo)題欄菜單欄文檔工具欄網(wǎng)頁(yè)文件編輯區(qū)狀態(tài)欄浮動(dòng)面板和浮動(dòng)面板組【插入】面板【屬性】面板6/12/202353.2站點(diǎn)的規(guī)劃與設(shè)計(jì)

1．創(chuàng)建具有瀏覽器兼容性的站點(diǎn)2．站點(diǎn)結(jié)構(gòu)的組織3．創(chuàng)建設(shè)計(jì)外觀(guān)4．設(shè)計(jì)導(dǎo)航方案5．規(guī)劃和收集資源6/12/20236創(chuàng)建網(wǎng)站一般有以下幾個(gè)步驟:(1)規(guī)劃站點(diǎn)：了解建站的目的，收集各種有關(guān)的資料。確定站點(diǎn)的主題、風(fēng)格、網(wǎng)站要提供的服務(wù)和網(wǎng)頁(yè)要表達(dá)的主要內(nèi)容。(2)創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)：在計(jì)算機(jī)中創(chuàng)建本地站點(diǎn)的根文件夾以及存放各種資料的子文件夾，配置好所有系統(tǒng)的參數(shù)和站點(diǎn)測(cè)試路徑。(3)網(wǎng)頁(yè)設(shè)計(jì)：充分利用收集到的數(shù)據(jù)資料，合理地運(yùn)用DreamweaverMX提供的技術(shù)，最完美地設(shè)計(jì)出能表達(dá)網(wǎng)站中心思想的Web頁(yè)面。6/12/20237規(guī)劃站點(diǎn)“Dreamweaver站點(diǎn)”和“Internetweb站點(diǎn)”不完全相同?！癉reamweaver站點(diǎn)”是在Dreamweaver制作網(wǎng)頁(yè)的過(guò)程中所使用的術(shù)語(yǔ)，是定義一個(gè)站點(diǎn)名稱(chēng)、存放文件的文件夾、使用的Web服務(wù)器和應(yīng)用服務(wù)器技術(shù)等?！癐nternetWeb站點(diǎn)”則是把已經(jīng)成功的網(wǎng)站內(nèi)容放到Internet或Intranet的web服務(wù)器上供用戶(hù)瀏覽，即運(yùn)行系統(tǒng)的web服務(wù)器上的站點(diǎn)。網(wǎng)站的發(fā)布過(guò)程就是將Dreamweaver站點(diǎn)變成InternetWeb站點(diǎn)的過(guò)程。

6/12/20238有兩種：一是使用“站點(diǎn)定義向?qū)А?，這可以根據(jù)提示逐步完成設(shè)置過(guò)程；二是使用“高級(jí)”設(shè)置，可以根據(jù)需要分別設(shè)置本地、遠(yuǎn)程和測(cè)試文件夾。

設(shè)置Dreamweaver站點(diǎn)的方法6/12/202393.2.1編輯站點(diǎn)

1．選擇菜單欄中的“站點(diǎn)”-〉“編輯站點(diǎn)”，出現(xiàn)“站點(diǎn)管理”對(duì)話(huà)框，在對(duì)話(huà)框中可以定義多個(gè)站點(diǎn)。

新建站點(diǎn)操作如下：1）單擊“新建”-〉“站點(diǎn)”，出現(xiàn)站點(diǎn)定義對(duì)話(huà)框2）單擊“基本”選項(xiàng)卡以使用站點(diǎn)定義向?qū)?，或者單擊“高?jí)”選項(xiàng)卡以使用“高級(jí)”設(shè)置。6/12/202310建站過(guò)程中要注意一點(diǎn)：所有站點(diǎn)名稱(chēng)和素材名稱(chēng)只能用英文，不能用中文，因?yàn)镈reamweaverMX對(duì)中文的解析不是很好，如果用中文會(huì)出現(xiàn)解析問(wèn)題。6/12/202311編輯站點(diǎn)對(duì)話(huà)框

6/12/202312站點(diǎn)定義6/12/2023133.2.2設(shè)置本地文件夾1．在“站點(diǎn)定義”對(duì)話(huà)框中選擇“高級(jí)”選項(xiàng)卡和“本地信息”類(lèi)別選項(xiàng)。2．輸入“站點(diǎn)名稱(chēng)”，如mysite。3．輸入“本地根文件夾”，或者單擊文件夾圖標(biāo)以選擇或新建一個(gè)本地文件夾，如D:/xwx11。4．如果選中“自動(dòng)刷新本地文件列表”選項(xiàng)，則當(dāng)每次復(fù)制文件到本地文件夾時(shí)，系統(tǒng)將自動(dòng)刷新本地文件列表。如果不選中此項(xiàng)，則可以在站點(diǎn)面板中手動(dòng)刷新。5．在“默認(rèn)圖像文件夾”中確定存放圖像的默認(rèn)文件夾，一般是根目錄下的“Images”。6．在“HTTP地址”文本框中，輸入Web站點(diǎn)將使用的URL。這使Dreamweaver能夠驗(yàn)證站點(diǎn)中使用絕對(duì)URL的鏈接。7．“啟用緩存”選項(xiàng)，指定是否創(chuàng)建本地緩存以提高鏈接和站點(diǎn)管理任務(wù)的速度。6/12/202314完成后的本地文件夾對(duì)話(huà)框

6/12/2023153.2.3設(shè)置遠(yuǎn)程文件夾

1．在站點(diǎn)定義對(duì)話(huà)框中選擇“高級(jí)”選項(xiàng)卡的“遠(yuǎn)程信息”分類(lèi)選項(xiàng)

2．選擇一個(gè)“訪(fǎng)問(wèn)”選項(xiàng):本地/網(wǎng)絡(luò)。3．確定一個(gè)“遠(yuǎn)程文件夾”。4．“自動(dòng)刷新遠(yuǎn)程文件列表”復(fù)選框。5．“保存時(shí)自動(dòng)將文件上傳到服務(wù)器”復(fù)選框。6．“啟用文件存回和取出”。7．單擊“確定”按鈕。6/12/202316定義遠(yuǎn)程站點(diǎn)對(duì)話(huà)框

6/12/2023173.2.4用FTP連接到Web服務(wù)器1．輸入FTP主機(jī)名。2．輸入遠(yuǎn)程站點(diǎn)的主目錄名。3．輸入連接FTP服務(wù)器的登錄名和密碼。4．如果你的防火墻配置要求被動(dòng)FTP，則選擇“UsePassiveFTP”。5．使用防火墻選項(xiàng)。6．在windows中使用安全FTP選擇FTP來(lái)訪(fǎng)問(wèn)遠(yuǎn)程文件夾時(shí)，在Windows中可以選擇使用SSH安全登錄檢查框以自動(dòng)繼續(xù)FTP的安全檢查。7．其它選項(xiàng)與“本地／網(wǎng)絡(luò)”中相同。8．單擊“確定”按鈕。6/12/202318使用ftp連接時(shí)的遠(yuǎn)程站點(diǎn)定義對(duì)話(huà)框

6/12/2023191．在“站點(diǎn)定義”對(duì)話(huà)框中選擇“高級(jí)”選項(xiàng)卡，然后從“類(lèi)別”列表中選擇“測(cè)試服務(wù)器”2．服務(wù)器模型

3．訪(fǎng)問(wèn)方式有“無(wú)”、“FTP”和“Local/Network”三種。4．測(cè)試服務(wù)器5．自動(dòng)刷新遠(yuǎn)程文件列表選項(xiàng)6．URL前綴7．單擊“確定”按鈕3.2.5設(shè)置測(cè)試服務(wù)器6/12/202320測(cè)試服務(wù)器定義對(duì)話(huà)框

6/12/202321應(yīng)用服務(wù)器技術(shù)列表

6/12/2023223.3.1“文件”面板1．使用“文件”面板2．設(shè)置“文件”面板參數(shù)3．設(shè)置“文件視圖列”4．在“文件”面板中查看站點(diǎn)3.3管理站點(diǎn)文件6/12/202323展開(kāi)的文件面板

6/12/202324折疊的文件面板

6/12/202325站點(diǎn)面板工具欄

6/12/202326站點(diǎn)首選參數(shù)對(duì)話(huà)框

6/12/202327站點(diǎn)面板的文件列表

6/12/202328站點(diǎn)定義中的“文件視圖列”選項(xiàng)

6/12/2023293.3.2站點(diǎn)地圖站點(diǎn)地圖僅適用于本地站點(diǎn)，若要?jiǎng)?chuàng)建遠(yuǎn)程站點(diǎn)的地圖，需將遠(yuǎn)程站點(diǎn)的內(nèi)容復(fù)制到本地磁盤(pán)上的一個(gè)文件夾中，然后使用“編輯站點(diǎn)”命令將該站點(diǎn)定義為本地站點(diǎn)。6/12/2023301.設(shè)置站點(diǎn)

1）選擇“站點(diǎn)”-〉“編輯站點(diǎn)”，出現(xiàn)“編輯站點(diǎn)”對(duì)話(huà)框。2）選擇一個(gè)“站點(diǎn)”并單擊“編輯”按鈕，出現(xiàn)“站點(diǎn)定義”對(duì)話(huà)框。3）從左側(cè)的“分類(lèi)”列表中選擇“站點(diǎn)地圖布局”，“站點(diǎn)定義”對(duì)話(huà)框即可顯示“站點(diǎn)地圖布局”選項(xiàng)4）單擊文件夾圖標(biāo)以通過(guò)瀏覽查找站點(diǎn)的主頁(yè)。6/12/2023315）在“列數(shù)”文本框中，鍵入一個(gè)數(shù)字以設(shè)置在站點(diǎn)地圖窗口中每行要顯示的頁(yè)數(shù)。6）在“列寬”文本框中，鍵入一個(gè)數(shù)字以設(shè)置站點(diǎn)地圖列的寬度。7）在“圖標(biāo)標(biāo)簽”下，選擇在站點(diǎn)地圖中與文檔圖標(biāo)一起顯示的名稱(chēng)表示為文件名還是頁(yè)標(biāo)題。8）在“選項(xiàng)”下，選擇要在站點(diǎn)地圖中顯示的文件。9)單擊“確認(rèn)”按鈕6/12/202332站點(diǎn)地圖布局對(duì)話(huà)框

6/12/202333站點(diǎn)地圖例圖

6/12/2023342.站點(diǎn)地圖

站點(diǎn)地圖的顯示規(guī)則如下：（1）以紅色顯示的文本指示斷開(kāi)的鏈接；（2）以藍(lán)色顯示并標(biāo)有地球圖標(biāo)的文本，指示其它站點(diǎn)上的文件或特殊鏈接；（3）綠色選中標(biāo)記指示你已取出的文件；（4）紅色選中標(biāo)記指示他人取出的文件；（5）鎖形圖標(biāo)指示只讀或鎖定的文件。

6/12/202335若要在站點(diǎn)地圖中打開(kāi)某頁(yè)進(jìn)行編輯，可執(zhí)行以下操作之一（1）雙擊該文件；（2）選擇該文件，然后選擇“文件”-〉“打開(kāi)”或“站點(diǎn)”-〉“打開(kāi)”。

6/12/2023363.3.3從站點(diǎn)列表中刪除站點(diǎn)1．選擇“站點(diǎn)”-〉“編輯站點(diǎn)”，出現(xiàn)“編輯站點(diǎn)”對(duì)話(huà)框。2．選擇一個(gè)站點(diǎn)名稱(chēng)。3．單擊“刪除”按鈕，出現(xiàn)一個(gè)對(duì)話(huà)框，要求確認(rèn)刪除。如圖3?16所示。4．單擊“是”，從列表中刪除站點(diǎn)，或單擊“NO”保留站點(diǎn)名稱(chēng)。5．單擊“完成”，關(guān)閉“編輯站點(diǎn)”對(duì)話(huà)框。6/12/202337確認(rèn)刪除站點(diǎn)對(duì)話(huà)框

6/12/2023383.3.4獲取和上傳文件

1．從遠(yuǎn)程或測(cè)試服務(wù)器或取文件（1）在“文件”面板上，從“站點(diǎn)”彈出式菜單中選擇一個(gè)“站點(diǎn)”。（2）如果在使用FTP傳輸文件，請(qǐng)單擊“連接”按鈕打開(kāi)于遠(yuǎn)程服務(wù)器的連接。如果可以在前以鏈接的“遠(yuǎn)程”窗格中看到遠(yuǎn)程文件，則無(wú)需單擊“連接”；當(dāng)單擊“獲取”時(shí)，Dreamweaver會(huì)自動(dòng)連接。6/12/202339

（3）選擇所需文件進(jìn)行下載。通常在“遠(yuǎn)程視圖”或“測(cè)試服務(wù)器”視圖中選擇這些文件，也可以在“本地視圖”中選擇相應(yīng)的文件。（4）單擊“文件”面板工具欄上的“獲取”按鈕，或者選擇“站點(diǎn)”-〉“獲取”。如果文件當(dāng)前已在文檔窗口中打開(kāi)，則可以從文檔窗口中選擇“站點(diǎn)”－〉“獲取”，出現(xiàn)一個(gè)對(duì)話(huà)框，詢(xún)問(wèn)是否要獲取相應(yīng)文件。（5）若要下載相關(guān)文件，則單擊“是”；否則單擊“否”按鈕。6/12/202340

3.3.5同步本地和遠(yuǎn)程站點(diǎn)上的文件

（1）在“文件”面板上選擇一個(gè)站點(diǎn)。（2）選擇要上傳的文件。通常在“本地”視圖中選擇這些文件，也可以在“遠(yuǎn)程”視圖中選擇相應(yīng)的文件。（3）單擊“文件”面板工具欄上的“上傳”按鈕。如果文件當(dāng)前已經(jīng)在文檔窗口中打開(kāi)，則可以從文檔窗口種選擇“站點(diǎn)”－〉“上傳”命令，（4）若要上傳相關(guān)文件，則單擊“是”；否則單擊“否”按鈕。6/12/202341確認(rèn)獲取相關(guān)文件對(duì)話(huà)框

6/12/202342

如果遠(yuǎn)程站點(diǎn)為ftp服務(wù)器，則使用ftp來(lái)同步文件，其操作如下。1．在“文件”面板中，從“當(dāng)前站點(diǎn)”列表彈出式菜單中選擇一個(gè)站點(diǎn)。2．選擇特定的文件或文件夾。如果要同步整個(gè)站點(diǎn)，則跳過(guò)此步驟。3．從上下菜單中選擇“同步”，出現(xiàn)“同步文件”對(duì)話(huà)框。4．完成該對(duì)話(huà)框。6/12/2023433.4網(wǎng)頁(yè)編輯與超鏈接DreamweaverMX文字格式化主要有4種方式：(1)手工格式化方式是在文本【屬性】面板中完成文字的格式化操作。(2)用HTML標(biāo)記格式化方式是用系統(tǒng)提供的HTML標(biāo)記來(lái)格式化文本。(3)用HTML樣式來(lái)格式化文本的方式。(4)CSS樣式是一種對(duì)網(wǎng)頁(yè)文檔內(nèi)容進(jìn)行精確格式化的方法，它可以使用許多HTML樣式不能使用的屬性。3.4.1網(wǎng)頁(yè)文檔的格式化6/12/2023443.4.2網(wǎng)頁(yè)編輯的基本操作在網(wǎng)頁(yè)中插入各種元素1.插入水平線(xiàn)2.插入日期3.插入Flash按鈕和Flash文字4.插入JavaApplet程序5.插入ActiveX控件6.插入第三方插件6/12/202345文本的查找和替換*

文本的拼寫(xiě)檢查*

建立網(wǎng)站相冊(cè)

利用外部編輯器編輯圖像

創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像

6/12/2023463.4.3創(chuàng)建超鏈接超鏈接概述超鏈接是用準(zhǔn)備好的文本、按鈕、圖像等對(duì)象與其他對(duì)象建立鏈接，也就是在源端點(diǎn)和目標(biāo)端點(diǎn)之間建立一種鏈接。源端點(diǎn)是超鏈接的起始端點(diǎn)，目標(biāo)端點(diǎn)是鏈接的對(duì)象，也稱(chēng)為目標(biāo)錨。超鏈接按源端點(diǎn)的鏈接劃分，分為超文本鏈接和非超文本鏈接兩類(lèi)。6/12/2023473.4.3創(chuàng)建超鏈接創(chuàng)建超鏈接的方法（5種）在站點(diǎn)管理器中編輯超鏈接創(chuàng)建錨點(diǎn)鏈接創(chuàng)建電子郵件鏈接創(chuàng)建導(dǎo)航條創(chuàng)建跳轉(zhuǎn)菜單創(chuàng)建映射圖鏈接6/12/2023483.5網(wǎng)頁(yè)的定位技術(shù)3.5.1創(chuàng)建表格的基本操作3.5.2表格的編輯與格式化3.5.3外部數(shù)據(jù)導(dǎo)入和表格排序3.5.4布局表格和布局單元格3.5.5層的創(chuàng)建和基本操作3.5.6層的屬性設(shè)置1003.5.7層與表格互換3.5.8層的應(yīng)用實(shí)例3.5.9框架的基本操作3.5.10框架和框架集的選擇與屬性設(shè)置3.5.11框架和框架集的保存3.5.12框架應(yīng)用實(shí)例6/12/2023493.5.1創(chuàng)建表格的基本操作新建表格設(shè)置表格和單元格的屬性選取表格和單元格表格的嵌套6/12/2023506/12/2023513.5.2表格的編輯與格式化改變表格或單元格的大小表格行、列的增加和刪除單元格的拆分和合并單元格的復(fù)制、粘貼、移動(dòng)和清除表格格式化6/12/2023523.5.3外部數(shù)據(jù)導(dǎo)入和表格排序在表格中導(dǎo)入外部數(shù)據(jù)文件表格內(nèi)容排序*6/12/2023533.5.4布局表格和布局單元格創(chuàng)建和調(diào)整布局表格與布局單元格布局視圖應(yīng)用實(shí)例6/12/2023543.5.5層的創(chuàng)建和基本操作創(chuàng)建和刪除層激活和選中層調(diào)整、移動(dòng)和對(duì)齊層6/12/2023553.5.6層的屬性設(shè)置利用層【屬性】面板設(shè)置層的控制和操作3.5.7層與表格互換表格轉(zhuǎn)換為層層轉(zhuǎn)換為表格3.5.8層的應(yīng)用實(shí)例6/12/202356本節(jié)重點(diǎn)回顧主要介紹在Dreamweaver中如何規(guī)劃、設(shè)計(jì)和管理站點(diǎn)，可以用多種方法創(chuàng)建站點(diǎn)，如果開(kāi)發(fā)Web應(yīng)用程序，則必須根據(jù)需要設(shè)置服務(wù)器和數(shù)據(jù)庫(kù)，然后再設(shè)計(jì)該站點(diǎn)的外觀(guān)，并對(duì)該站點(diǎn)進(jìn)行功能測(cè)試，以驗(yàn)證該站點(diǎn)是否符合定義的目標(biāo)，可以在站點(diǎn)中包含動(dòng)態(tài)頁(yè)，在服務(wù)器上可以發(fā)布網(wǎng)站，并定期地維護(hù)，以確保站點(diǎn)保持最新，且工作正常。本章培養(yǎng)學(xué)生實(shí)際動(dòng)手操作能力。6/12/202357另外，介紹了DrameweaverMX中的3種頁(yè)面定位工具——表格、層和框架，重點(diǎn)介紹了表格、層和框架在設(shè)計(jì)網(wǎng)頁(yè)時(shí)的定位作用以及表格、層、框架的創(chuàng)建、編輯和屬性設(shè)置等操作。重點(diǎn)知識(shí)有：表格、層、框架和框架集的創(chuàng)建、選擇、編輯、保存等操作方法，表格、層、框架和框架集的各種屬性設(shè)置，在表格、層和框架中輸入各種網(wǎng)頁(yè)元素的方法，布局表格和布局單元格的應(yīng)用、表格樣式化、外部數(shù)據(jù)導(dǎo)入表格、層及嵌套層、層的疊放次序、層的可見(jiàn)性、框架中網(wǎng)頁(yè)的鏈接和顯示方法等。6/12/2023583.6層疊樣式、模板與庫(kù)3.6.1層疊樣式表概述3.6.2層疊樣式表的創(chuàng)建與編輯3.6.3層疊樣式表的應(yīng)用3.6.4模板的應(yīng)用3.6.5庫(kù)的應(yīng)用3.6.6資源管理6/12/2023593.6.1層疊樣式表概述

層疊樣式表（CascadingStyleSheets,以下簡(jiǎn)稱(chēng)CSS樣式表）是由W3C（WordWideWebConsortium）組織批準(zhǔn)的一種網(wǎng)頁(yè)元素定義規(guī)則，是一種可以對(duì)網(wǎng)頁(yè)文檔內(nèi)容進(jìn)行精確格式化控制的工具。利用CSS樣式表可自動(dòng)格式化網(wǎng)頁(yè)文檔，可將CSS樣式表直接存儲(chǔ)在網(wǎng)頁(yè)文檔中，也可以將CSS樣式表定義在網(wǎng)頁(yè)文檔之外，然后將它鏈接到多個(gè)文檔中。6/12/2023603.6.2層疊樣式表的創(chuàng)建與編輯在DreamweaverMX中，單擊網(wǎng)頁(yè)編輯窗口中狀態(tài)欄右下角的按鈕，或選擇【窗口】|【CSS樣式】命令，還可以單擊【設(shè)計(jì)】浮動(dòng)面板組的【CSS樣式】選項(xiàng)卡，便可打開(kāi)【CSS樣式】面板。層疊樣式、模板與庫(kù)電子商務(wù)網(wǎng)站建設(shè)教程在【CSS樣式】面板中，有【應(yīng)用樣式】和【編輯樣式】?jī)煞N模式，分別用于CSS樣式的應(yīng)用和編輯操作。設(shè)計(jì)者可以用【CSS樣式】面板右下角的4個(gè)按鈕對(duì)CSS樣式進(jìn)行操作。4個(gè)按鈕的作用如下所述。6/12/202361圖7-1【CSS樣式】面板6/12/202362

附加樣式：?jiǎn)螕舸税粹o，可選擇一個(gè)外部樣式表文件，并將其應(yīng)用于當(dāng)前文檔。新建樣式：?jiǎn)螕舸税粹o，可打開(kāi)【新建樣式】對(duì)話(huà)框，新建一個(gè)樣式。編輯樣式：?jiǎn)螕舸税粹o，可打開(kāi)【編輯樣式】對(duì)話(huà)框，編輯制定的樣式。刪除樣式：選中列表中的樣式后，單擊此按鈕可刪除該樣式。6/12/202363創(chuàng)建層疊樣式和層疊樣式表外部樣式表的鏈接、導(dǎo)入和編輯層疊樣式表的應(yīng)用6/12/2023643.6.3層疊樣式表的應(yīng)用濾鏡的概述透明度濾鏡的應(yīng)用顯示濾鏡的應(yīng)用模糊濾鏡的應(yīng)用6/12/202365濾鏡的概述濾鏡是CSS樣式表中功能最豐富、效果最奇特的工具之一，調(diào)整DreamweaverMX中CSS樣式表的十幾種濾鏡的參數(shù)，就能在網(wǎng)頁(yè)上制作出多姿多彩、令人眩目的各種效果。6/12/202366透明度濾鏡的應(yīng)用用透明度(Alpha)濾鏡可以通過(guò)具體的數(shù)值來(lái)指定網(wǎng)頁(yè)中對(duì)象點(diǎn)、線(xiàn)、面的透明度，使得網(wǎng)頁(yè)中對(duì)象的透明度發(fā)生變化，制作出一些特殊的視覺(jué)效果。透明度濾鏡的語(yǔ)法格式是：{filter:Alpha（Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)}6/12/202367顯示濾鏡的應(yīng)用可以利用混合(blend)和顯示(reveal)兩種濾鏡在頁(yè)面上添加動(dòng)人的淡入淡出、網(wǎng)頁(yè)轉(zhuǎn)換效果，前者可以使頁(yè)面中的對(duì)象逐漸消失或顯示，后者提供了24種網(wǎng)頁(yè)轉(zhuǎn)換的效果。其語(yǔ)法格式如下：{filter:blendTrans(duration=時(shí)間數(shù)值)}{filter:revealTrans(duration=時(shí)間數(shù)值，transition=過(guò)渡類(lèi)型)}6/12/202368模糊濾鏡的應(yīng)用模糊濾鏡(Blur)是CSS的濾鏡之一，將其應(yīng)用到網(wǎng)頁(yè)文本上可以產(chǎn)生出立體字的效果。模糊濾鏡能為制作網(wǎng)頁(yè)的立體字標(biāo)題帶來(lái)方便，與其他立體字效果的處理方法相比，能使頁(yè)面的下載速度明顯增快。將濾鏡應(yīng)用到圖片上，也能得到意想不到的效果。模糊濾鏡的語(yǔ)法格式是：{filter:Blur(Add=add，Direction=direction，Strength=strength)}6/12/2023693.6.4模板的應(yīng)用DreamweaverMX的模板是一種預(yù)先設(shè)計(jì)好的網(wǎng)頁(yè)樣式，在制作風(fēng)格相似的頁(yè)面時(shí)，只要套用這種模板便可以設(shè)計(jì)出風(fēng)格一致的網(wǎng)頁(yè)。6/12/202370創(chuàng)建與保存模板創(chuàng)建模板的方法可以是新建一個(gè)空白的模板，然后對(duì)它進(jìn)行編輯后保存，也可以利用一個(gè)現(xiàn)成的網(wǎng)頁(yè)，設(shè)置好可編輯區(qū)，轉(zhuǎn)存為模板。1.新建一個(gè)空白模板2.利用一個(gè)現(xiàn)成的網(wǎng)頁(yè)文件來(lái)創(chuàng)建一個(gè)模板6/12/202371應(yīng)用與修改模板1.應(yīng)用模板制作網(wǎng)頁(yè)2.修改模板6/12/202372更新基于模板的網(wǎng)頁(yè)文檔將創(chuàng)建的模板應(yīng)用到頁(yè)面制作以后，只需修改一個(gè)模板，就可修改所有應(yīng)用此模板的網(wǎng)頁(yè)。6/12/2023733.6.5庫(kù)的應(yīng)用創(chuàng)建和應(yīng)用庫(kù)項(xiàng)目編輯庫(kù)項(xiàng)目用庫(kù)項(xiàng)目更新網(wǎng)站6/12/202374編輯庫(kù)項(xiàng)目1.重命名一個(gè)庫(kù)項(xiàng)目2.刪除一個(gè)庫(kù)項(xiàng)目3.修改庫(kù)項(xiàng)目6/12/2023753.6.6資源管理圖像管理顏色管理超鏈接管理Flash管理6/12/202376本節(jié)摘要與重點(diǎn)回顧樣式、模板和庫(kù)是網(wǎng)頁(yè)設(shè)計(jì)者設(shè)計(jì)制作網(wǎng)頁(yè)時(shí)不可缺少的工具。它們可以幫助設(shè)計(jì)者統(tǒng)一整個(gè)網(wǎng)站的風(fēng)格，節(jié)省網(wǎng)頁(yè)創(chuàng)作的時(shí)間，提高工作效率，給管理整個(gè)網(wǎng)站帶來(lái)很大方便。CSS層疊樣式表不但能使設(shè)計(jì)者控制許多HTML樣式不能控制的屬性，還能迅速準(zhǔn)確地將樣式作用于整個(gè)網(wǎng)站的多個(gè)網(wǎng)頁(yè)上；另外，它帶有的特效濾鏡，也可使網(wǎng)頁(yè)設(shè)計(jì)效果豐富多彩。6/12/202377本節(jié)中介紹的【資源】管理面板可以統(tǒng)一管理整個(gè)站點(diǎn)的資源，避免反復(fù)查找某些網(wǎng)頁(yè)元素，能提高網(wǎng)頁(yè)設(shè)計(jì)的效率，得到事半功倍的效果。本節(jié)的重點(diǎn)知識(shí)：創(chuàng)建、編輯CSS樣式，創(chuàng)建、編輯、選用CSS外部樣式表，常用CSS特效濾鏡的使用方法，模板和庫(kù)的創(chuàng)建、編輯、應(yīng)用，站點(diǎn)的更新，用網(wǎng)站資源管理器統(tǒng)一管理網(wǎng)站中的各種資源。6/12/2023783.7表單及應(yīng)用3.7.1交互式表單概述3.7.2創(chuàng)建表單3.7.3表單應(yīng)用實(shí)例6/12/2023793.7.1交互式表單概述表單（Form）技術(shù)可以實(shí)現(xiàn)瀏覽者與Internet服務(wù)器之間信息的交互傳送，它是網(wǎng)絡(luò)信息收集處理的一種重要的方式。使用表單，可以幫助Internet服務(wù)器從用戶(hù)那里收集信息，例如收集用戶(hù)資料、獲取用戶(hù)訂單，在Internet上統(tǒng)也同樣存在大量的表單，讓用戶(hù)輸入文字進(jìn)行選擇。6/12/202380表單有兩個(gè)重要的組成部分：（1）一個(gè)是在網(wǎng)頁(yè)中進(jìn)行描述的表單對(duì)象。（2）二是應(yīng)用程序，它可以是服務(wù)器端的，也可以是客戶(hù)端的，用于對(duì)客戶(hù)信息進(jìn)行分析處理。6/12/202381通常表單的工作過(guò)程如下：（1）訪(fǎng)問(wèn)者在瀏覽有表單的頁(yè)面時(shí)，可填寫(xiě)必要的信息，然后單擊“提交”按鈕。（2）這些信息通過(guò)Internet傳送到服務(wù)器上。（3）服務(wù)器上專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。（4）當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成信息。6/12/202382在Dreamweaver中，表單輸入類(lèi)型稱(chēng)為表單對(duì)象。可以通過(guò)選擇“插入”>“表單對(duì)象”來(lái)插入表單對(duì)象，或者通過(guò)從下圖顯示的“插入”欄的“表單”面板訪(fǎng)問(wèn)表單對(duì)象來(lái)插入表單對(duì)象。

6/12/2023831、表單“表單”在文檔中插入表單。任何其他表單對(duì)象，如文本域、按鈕等，都必須插入表單之中，這樣所有瀏覽器才能正確處理這些數(shù)據(jù)。2、文本域“文本域”在表單中插入文本域。文本域可接受任何類(lèi)型的字母數(shù)字項(xiàng)。輸入的文本可以顯示為單行、多行或者顯示為項(xiàng)目符號(hào)或星號(hào)（用于保護(hù)密碼）。3、復(fù)選框“復(fù)選框”在表單中插入復(fù)選框。復(fù)選框允許在一組選項(xiàng)中選擇多項(xiàng)，用戶(hù)可以選擇任意多個(gè)適用的選項(xiàng)。6/12/2023844、單選按鈕“單選按鈕”在表單中插入單選按鈕。單選按鈕代表互相排斥的選擇。選擇一組中的某個(gè)按鈕，就會(huì)取消選擇該組中的所有其他按鈕。例如，用戶(hù)可以選擇“是”或“否”。5、單選按鈕組“單選按鈕組”插入共享同一名稱(chēng)的單選按鈕的集合。6、列表/菜單“列表/菜單”使您可以在列表中創(chuàng)建用戶(hù)選項(xiàng)?！傲斜怼边x項(xiàng)在滾動(dòng)列表中顯示選項(xiàng)值，并允許用戶(hù)在列表中選擇多個(gè)選項(xiàng)?！安藛巍边x項(xiàng)在彈出式菜單中顯示選項(xiàng)值，而且只允許用戶(hù)選擇一個(gè)選項(xiàng)。6/12/2023857、跳轉(zhuǎn)菜單“跳轉(zhuǎn)菜單”插入可導(dǎo)航的列表或彈出式菜單。跳轉(zhuǎn)菜單允許您插入一種菜單，在這種菜單中的每個(gè)選項(xiàng)都鏈接到文檔或文件。請(qǐng)參見(jiàn)創(chuàng)建跳轉(zhuǎn)菜單。8、圖像域“圖像域”使您可以在表單中插入圖像?？梢允褂脠D像域替換“提交”按鈕，以生成圖形化按鈕。9、文件域“文件域”在文檔中插入空白文本域和“瀏覽”按鈕。文件域使用戶(hù)可以瀏覽到其硬盤(pán)上的文件，并將這些文件作為表單數(shù)據(jù)上傳。6/12/20238610、按鈕“按鈕”在表單中插入文本按鈕。按鈕在單擊時(shí)執(zhí)行任務(wù)，如提交或重置表單?？梢詾榘粹o添加自定義名稱(chēng)或標(biāo)簽，或者使用預(yù)定義的“提交”或“重置”標(biāo)簽之一。11、標(biāo)簽“標(biāo)簽”在文檔中給表單加上標(biāo)簽，以<label></label>形式開(kāi)頭和結(jié)尾。12、字段集“字段集”在文本中設(shè)置文本標(biāo)簽。認(rèn)識(shí)了表單，那么創(chuàng)建和使用表單時(shí)就可以根據(jù)需要進(jìn)行選擇。表單時(shí)是動(dòng)態(tài)網(wǎng)頁(yè)的靈魂。6/12/2023873.7.2創(chuàng)建表單在Dreamweaver中可以創(chuàng)建各種各樣的表單，表單中可以包含各種對(duì)象，例如文本域、按鈕、列表等。1、插入表單在網(wǎng)頁(yè)中添加表單對(duì)象，首先必須創(chuàng)建表單。表單在瀏覽網(wǎng)頁(yè)中屬于不可見(jiàn)元素。在Dreamweaver8中插入一個(gè)表單。當(dāng)頁(yè)面處于“設(shè)計(jì)”視圖中時(shí)，用紅色的虛輪廓線(xiàn)指示表單。如果沒(méi)有看到此輪廓線(xiàn)，請(qǐng)檢查是否選中了“查看”>“可視化助理”>“不可見(jiàn)元素”。（1）將插入點(diǎn)放在希望表單出現(xiàn)的位置。選擇“插入”>“表單”，或選擇“插入”欄上的“表單”類(lèi)別，然后單擊“表單”圖標(biāo)，（2）用鼠標(biāo)選中表單，在屬性面板上可以設(shè)置表單的各項(xiàng)屬性。

6/12/202388在“動(dòng)作”文本框中指定處理該表單的動(dòng)態(tài)也或腳本的路徑。在“方法”下拉列表中，選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。表單“方法”有：POST在HTTP請(qǐng)求中嵌入表單數(shù)據(jù)。GET將值追加到請(qǐng)求該頁(yè)的URL中。默認(rèn)使用瀏覽器的默認(rèn)設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。通常，默認(rèn)方法為GET方法。不要使用GET方法發(fā)送長(zhǎng)表單。URL的長(zhǎng)度限制在8,192個(gè)字符以?xún)?nèi)。如果發(fā)送的數(shù)據(jù)量太大，數(shù)據(jù)將被截?cái)?，從而?dǎo)致意外的或失敗的處理結(jié)果。而且，在發(fā)送機(jī)密用戶(hù)名和密碼、信用卡號(hào)或其他機(jī)密信息時(shí)，不要使用GET方法。用GET方法傳遞信息不安全。6/12/202389在“目標(biāo)”彈出式菜單指定一個(gè)窗口，在該窗口中顯示調(diào)用程序所返回的數(shù)據(jù)。如果命名的窗口尚未打開(kāi)，則打開(kāi)一個(gè)具有該名稱(chēng)的新窗口。目標(biāo)值有：_blank，在未命名的新窗口中打開(kāi)目標(biāo)文檔。_parent，在顯示當(dāng)前文檔的窗口的父窗口中打開(kāi)目標(biāo)文檔。_self，在提交表單所使用的窗口中打開(kāi)目標(biāo)文檔。_top，在當(dāng)前窗口的窗體內(nèi)打開(kāi)目標(biāo)文檔。此值可用于確保目標(biāo)文檔占用整個(gè)窗口，即使原始文檔顯示在框架中。6/12/202390表單的應(yīng)用1、一個(gè)簡(jiǎn)單的提交留言頁(yè)面新建11.html網(wǎng)頁(yè)文件，選擇表單插入欄，插入表單，將光標(biāo)放置在表單內(nèi)，插入一個(gè)5行2列的表格，將第1、5行合并。分別在第2、3行插入文本字段，在第4行插入文本區(qū)域，在第5行插入兩個(gè)按鈕。文本域是用戶(hù)在其中輸入響應(yīng)的表單對(duì)象。有三種類(lèi)型的文本域：?jiǎn)涡形谋居蛲ǔＬ峁﹩巫只蚨陶Z(yǔ)響應(yīng)，如姓名或地址。多行文本域?yàn)樵L(fǎng)問(wèn)者提供一個(gè)較大的區(qū)域，供其輸入響應(yīng)?？梢灾付ㄔL(fǎng)問(wèn)者最多可輸入的行數(shù)以及對(duì)象的字符寬度。如果輸入的文本超過(guò)這些設(shè)置，則該域?qū)凑論Q行屬性中指定的設(shè)置進(jìn)行滾動(dòng)。密碼域是特殊類(lèi)型的文本域。當(dāng)用戶(hù)在密碼域中鍵入時(shí)，所輸入的文本被替換為星號(hào)或項(xiàng)目符號(hào)，以隱藏該文本，保護(hù)這些信息不被看到。6/12/2023916/12/202392表單應(yīng)用實(shí)例－－調(diào)查問(wèn)卷制作調(diào)查問(wèn)卷是網(wǎng)頁(yè)設(shè)計(jì)者與瀏覽者進(jìn)行交流的最有效手段，在本節(jié)中介紹一個(gè)網(wǎng)上書(shū)店問(wèn)卷調(diào)查的表單應(yīng)用實(shí)例，要求：在網(wǎng)頁(yè)上創(chuàng)建一個(gè)網(wǎng)上書(shū)店服務(wù)問(wèn)卷調(diào)查的表單，表單包含單選按鈕、復(fù)選框、單行文本框、多行文本框、下拉式列表等表單元素，表單中的表單元素用表格定位，表單中的標(biāo)題及標(biāo)識(shí)文字如下圖所示。6/12/202393圖8-14表單應(yīng)用實(shí)例6/12/202394本例的操作步驟如下。（1）新建網(wǎng)頁(yè)文件，并選擇【修改】|【頁(yè)面屬性】命令，設(shè)置頁(yè)面背景圖像。（2）單擊【插入】浮動(dòng)面板組的【表單】選項(xiàng)卡中的【創(chuàng)建表單】按鈕。（3）在表單中插入用于定位的表格，表格為12行1列，780×460像素，表格邊框顏色為#993300。（4）在第1行輸入標(biāo)題文字“網(wǎng)上書(shū)店服務(wù)調(diào)查”，字體為“紅色”，背景顏色為#FFFFCC。6/12/202395（5）在第2行輸入文字“尊敬的顧客：您好!為了更好地為您服務(wù)，我們非常重視您在購(gòu)物過(guò)程中的感受，您的意見(jiàn)與建議是我們不斷進(jìn)步的源泉，謝謝您對(duì)我們工作的支持，歡迎您參與我們的網(wǎng)上書(shū)店服務(wù)調(diào)查?！保?）在第4行輸入單選按鈕組的標(biāo)識(shí)文字：“1.請(qǐng)對(duì)本書(shū)店在滿(mǎn)足客戶(hù)需求的以下方面進(jìn)行評(píng)價(jià)：”。設(shè)背景顏色為：#CCFFCC。（7）在表格的第5行插入5×6的嵌套表格。并在【屬性】面板中將嵌套表格的【間距】和【邊框】設(shè)為0，設(shè)置嵌套表格第1列的寬度為280像素，其他5列的每列寬度設(shè)為100像素。6/12/202396（8）按題目要求輸入單選按鈕組的標(biāo)識(shí)文字。并分別將光標(biāo)插入到嵌套表格的單元格中，單擊【表單】選項(xiàng)卡中的【單選】按鈕，創(chuàng)建20個(gè)單選按鈕。（9）在第6行輸入復(fù)選框的標(biāo)識(shí)文字：“2.您經(jīng)常關(guān)注本網(wǎng)上書(shū)店的哪些欄目?”。為醒目起見(jiàn)，可設(shè)置背景顏色為：#99FFFF。（10）將光標(biāo)插入到第7行的合適位置上，單擊【表單】選項(xiàng)卡中的【復(fù)選框】按鈕，創(chuàng)建表單的復(fù)選框，并輸入這個(gè)復(fù)選框的標(biāo)識(shí)文字“新書(shū)速遞”。（11）用同樣的方法分別創(chuàng)建標(biāo)識(shí)文字為“精品系列”、“科學(xué)技術(shù)”、“現(xiàn)代文學(xué)”、“生活藝術(shù)”、“文化教育”、“電子音像”、“政治法律”、“網(wǎng)友書(shū)評(píng)”的復(fù)選框。6/12/202397（12）在第8行輸入多行文本框的標(biāo)識(shí)文字：“3.如果您有任何好的建