網(wǎng)站外觀設計和內(nèi)容編輯課件_第1頁
網(wǎng)站外觀設計和內(nèi)容編輯課件_第2頁
網(wǎng)站外觀設計和內(nèi)容編輯課件_第3頁
網(wǎng)站外觀設計和內(nèi)容編輯課件_第4頁
網(wǎng)站外觀設計和內(nèi)容編輯課件_第5頁
已閱讀5頁,還剩97頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領

文檔簡介

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

通過本章的學習,主要掌握以下知識點:Dreamweaver簡介站點的規(guī)劃與設計站點的管理網(wǎng)頁編輯與超連接網(wǎng)頁定位技術(shù)層疊樣式、模板與庫表單與應用2023/7/2323.1DreamweaverMX簡介DreamweaverMX是Macromedia公司最新發(fā)布的集網(wǎng)頁設計、代碼開發(fā)、網(wǎng)站創(chuàng)建和管理于一體的軟件。

DreamweaverMX不僅可以輕松設計網(wǎng)站前臺的頁面,而且也可以方便地實現(xiàn)網(wǎng)站后臺的各種復雜功能。2023/7/233啟動DreamweaverMX后,屏幕顯示的是工作區(qū)窗口,此時系統(tǒng)打開一個名為Untitled的空白文檔,在網(wǎng)頁文件編輯區(qū)中,設計者可以完成網(wǎng)頁的設計。工作區(qū)窗口各部分功能如下所述。DreamweaverMX的工作環(huán)境2023/7/234標題欄菜單欄文檔工具欄網(wǎng)頁文件編輯區(qū)狀態(tài)欄浮動面板和浮動面板組【插入】面板【屬性】面板2023/7/2353.2站點的規(guī)劃與設計

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

2023/7/238有兩種:一是使用“站點定義向?qū)А?,這可以根據(jù)提示逐步完成設置過程;二是使用“高級”設置,可以根據(jù)需要分別設置本地、遠程和測試文件夾。

設置Dreamweaver站點的方法2023/7/2393.2.1編輯站點

1.選擇菜單欄中的“站點”-〉“編輯站點”,出現(xiàn)“站點管理”對話框,在對話框中可以定義多個站點。

新建站點操作如下:1)單擊“新建”-〉“站點”,出現(xiàn)站點定義對話框2)單擊“基本”選項卡以使用站點定義向?qū)?,或者單擊“高級”選項卡以使用“高級”設置。2023/7/2310建站過程中要注意一點:所有站點名稱和素材名稱只能用英文,不能用中文,因為DreamweaverMX對中文的解析不是很好,如果用中文會出現(xiàn)解析問題。2023/7/2311編輯站點對話框

2023/7/2312站點定義2023/7/23133.2.2設置本地文件夾1.在“站點定義”對話框中選擇“高級”選項卡和“本地信息”類別選項。2.輸入“站點名稱”,如mysite。3.輸入“本地根文件夾”,或者單擊文件夾圖標以選擇或新建一個本地文件夾,如D:/xwx11。4.如果選中“自動刷新本地文件列表”選項,則當每次復制文件到本地文件夾時,系統(tǒng)將自動刷新本地文件列表。如果不選中此項,則可以在站點面板中手動刷新。5.在“默認圖像文件夾”中確定存放圖像的默認文件夾,一般是根目錄下的“Images”。6.在“HTTP地址”文本框中,輸入Web站點將使用的URL。這使Dreamweaver能夠驗證站點中使用絕對URL的鏈接。7.“啟用緩存”選項,指定是否創(chuàng)建本地緩存以提高鏈接和站點管理任務的速度。2023/7/2314完成后的本地文件夾對話框

2023/7/23153.2.3設置遠程文件夾

1.在站點定義對話框中選擇“高級”選項卡的“遠程信息”分類選項

2.選擇一個“訪問”選項:本地/網(wǎng)絡。3.確定一個“遠程文件夾”。4.“自動刷新遠程文件列表”復選框。5.“保存時自動將文件上傳到服務器”復選框。6.“啟用文件存回和取出”。7.單擊“確定”按鈕。2023/7/2316定義遠程站點對話框

2023/7/23173.2.4用FTP連接到Web服務器1.輸入FTP主機名。2.輸入遠程站點的主目錄名。3.輸入連接FTP服務器的登錄名和密碼。4.如果你的防火墻配置要求被動FTP,則選擇“UsePassiveFTP”。5.使用防火墻選項。6.在windows中使用安全FTP選擇FTP來訪問遠程文件夾時,在Windows中可以選擇使用SSH安全登錄檢查框以自動繼續(xù)FTP的安全檢查。7.其它選項與“本地/網(wǎng)絡”中相同。8.單擊“確定”按鈕。2023/7/2318使用ftp連接時的遠程站點定義對話框

2023/7/23191.在“站點定義”對話框中選擇“高級”選項卡,然后從“類別”列表中選擇“測試服務器”2.服務器模型

3.訪問方式有“無”、“FTP”和“Local/Network”三種。4.測試服務器5.自動刷新遠程文件列表選項6.URL前綴7.單擊“確定”按鈕3.2.5設置測試服務器2023/7/2320測試服務器定義對話框

2023/7/2321應用服務器技術(shù)列表

2023/7/23223.3.1“文件”面板1.使用“文件”面板2.設置“文件”面板參數(shù)3.設置“文件視圖列”4.在“文件”面板中查看站點3.3管理站點文件2023/7/2323展開的文件面板

2023/7/2324折疊的文件面板

2023/7/2325站點面板工具欄

2023/7/2326站點首選參數(shù)對話框

2023/7/2327站點面板的文件列表

2023/7/2328站點定義中的“文件視圖列”選項

2023/7/23293.3.2站點地圖

站點地圖僅適用于本地站點,若要創(chuàng)建遠程站點的地圖,需將遠程站點的內(nèi)容復制到本地磁盤上的一個文件夾中,然后使用“編輯站點”命令將該站點定義為本地站點。2023/7/23301.設置站點

1)選擇“站點”-〉“編輯站點”,出現(xiàn)“編輯站點”對話框。2)選擇一個“站點”并單擊“編輯”按鈕,出現(xiàn)“站點定義”對話框。3)從左側(cè)的“分類”列表中選擇“站點地圖布局”,“站點定義”對話框即可顯示“站點地圖布局”選項4)單擊文件夾圖標以通過瀏覽查找站點的主頁。2023/7/23315)在“列數(shù)”文本框中,鍵入一個數(shù)字以設置在站點地圖窗口中每行要顯示的頁數(shù)。6)在“列寬”文本框中,鍵入一個數(shù)字以設置站點地圖列的寬度。7)在“圖標標簽”下,選擇在站點地圖中與文檔圖標一起顯示的名稱表示為文件名還是頁標題。8)在“選項”下,選擇要在站點地圖中顯示的文件。9)單擊“確認”按鈕2023/7/2332站點地圖布局對話框

2023/7/2333站點地圖例圖

2023/7/23342.站點地圖

站點地圖的顯示規(guī)則如下:(1)以紅色顯示的文本指示斷開的鏈接;(2)以藍色顯示并標有地球圖標的文本,指示其它站點上的文件或特殊鏈接;(3)綠色選中標記指示你已取出的文件;(4)紅色選中標記指示他人取出的文件;(5)鎖形圖標指示只讀或鎖定的文件。

2023/7/2335若要在站點地圖中打開某頁進行編輯,可執(zhí)行以下操作之一(1)雙擊該文件;(2)選擇該文件,然后選擇“文件”-〉“打開”或“站點”-〉“打開”。

2023/7/23363.3.3從站點列表中刪除站點1.選擇“站點”-〉“編輯站點”,出現(xiàn)“編輯站點”對話框。2.選擇一個站點名稱。3.單擊“刪除”按鈕,出現(xiàn)一個對話框,要求確認刪除。如圖3?16所示。4.單擊“是”,從列表中刪除站點,或單擊“NO”保留站點名稱。5.單擊“完成”,關閉“編輯站點”對話框。2023/7/2337確認刪除站點對話框

2023/7/23383.3.4獲取和上傳文件

1.從遠程或測試服務器或取文件(1)在“文件”面板上,從“站點”彈出式菜單中選擇一個“站點”。(2)如果在使用FTP傳輸文件,請單擊“連接”按鈕打開于遠程服務器的連接。如果可以在前以鏈接的“遠程”窗格中看到遠程文件,則無需單擊“連接”;當單擊“獲取”時,Dreamweaver會自動連接。2023/7/2339

(3)選擇所需文件進行下載。通常在“遠程視圖”或“測試服務器”視圖中選擇這些文件,也可以在“本地視圖”中選擇相應的文件。(4)單擊“文件”面板工具欄上的“獲取”按鈕,或者選擇“站點”-〉“獲取”。如果文件當前已在文檔窗口中打開,則可以從文檔窗口中選擇“站點”-〉“獲取”,出現(xiàn)一個對話框,詢問是否要獲取相應文件。(5)若要下載相關文件,則單擊“是”;否則單擊“否”按鈕。2023/7/2340

3.3.5同步本地和遠程站點上的文件

(1)在“文件”面板上選擇一個站點。(2)選擇要上傳的文件。通常在“本地”視圖中選擇這些文件,也可以在“遠程”視圖中選擇相應的文件。(3)單擊“文件”面板工具欄上的“上傳”按鈕。如果文件當前已經(jīng)在文檔窗口中打開,則可以從文檔窗口種選擇“站點”-〉“上傳”命令,(4)若要上傳相關文件,則單擊“是”;否則單擊“否”按鈕。2023/7/2341確認獲取相關文件對話框

2023/7/2342

如果遠程站點為ftp服務器,則使用ftp來同步文件,其操作如下。1.在“文件”面板中,從“當前站點”列表彈出式菜單中選擇一個站點。2.選擇特定的文件或文件夾。如果要同步整個站點,則跳過此步驟。3.從上下菜單中選擇“同步”,出現(xiàn)“同步文件”對話框。4.完成該對話框。2023/7/23433.4網(wǎng)頁編輯與超鏈接DreamweaverMX文字格式化主要有4種方式:(1)手工格式化方式是在文本【屬性】面板中完成文字的格式化操作。(2)用HTML標記格式化方式是用系統(tǒng)提供的HTML標記來格式化文本。(3)用HTML樣式來格式化文本的方式。(4)CSS樣式是一種對網(wǎng)頁文檔內(nèi)容進行精確格式化的方法,它可以使用許多HTML樣式不能使用的屬性。3.4.1網(wǎng)頁文檔的格式化2023/7/23443.4.2網(wǎng)頁編輯的基本操作

在網(wǎng)頁中插入各種元素1.插入水平線2.插入日期3.插入Flash按鈕和Flash文字4.插入JavaApplet程序5.插入ActiveX控件6.插入第三方插件2023/7/2345

文本的查找和替換*

文本的拼寫檢查*

建立網(wǎng)站相冊

利用外部編輯器編輯圖像

創(chuàng)建鼠標經(jīng)過圖像

2023/7/23463.4.3創(chuàng)建超鏈接

超鏈接概述超鏈接是用準備好的文本、按鈕、圖像等對象與其他對象建立鏈接,也就是在源端點和目標端點之間建立一種鏈接。源端點是超鏈接的起始端點,目標端點是鏈接的對象,也稱為目標錨。超鏈接按源端點的鏈接劃分,分為超文本鏈接和非超文本鏈接兩類。2023/7/23473.4.3創(chuàng)建超鏈接

創(chuàng)建超鏈接的方法(5種)

在站點管理器中編輯超鏈接

創(chuàng)建錨點鏈接

創(chuàng)建電子郵件鏈接

創(chuàng)建導航條

創(chuàng)建跳轉(zhuǎn)菜單

創(chuàng)建映射圖鏈接2023/7/23483.5網(wǎng)頁的定位技術(shù)3.5.1創(chuàng)建表格的基本操作3.5.2表格的編輯與格式化3.5.3外部數(shù)據(jù)導入和表格排序3.5.4布局表格和布局單元格3.5.5層的創(chuàng)建和基本操作3.5.6層的屬性設置1003.5.7層與表格互換3.5.8層的應用實例3.5.9框架的基本操作3.5.10框架和框架集的選擇與屬性設置3.5.11框架和框架集的保存3.5.12框架應用實例2023/7/23493.5.1創(chuàng)建表格的基本操作新建表格設置表格和單元格的屬性選取表格和單元格表格的嵌套2023/7/23502023/7/23513.5.2表格的編輯與格式化改變表格或單元格的大小表格行、列的增加和刪除單元格的拆分和合并單元格的復制、粘貼、移動和清除表格格式化2023/7/23523.5.3外部數(shù)據(jù)導入和表格排序在表格中導入外部數(shù)據(jù)文件表格內(nèi)容排序*2023/7/23533.5.4布局表格和布局單元格創(chuàng)建和調(diào)整布局表格與布局單元格布局視圖應用實例2023/7/23543.5.5層的創(chuàng)建和基本操作創(chuàng)建和刪除層激活和選中層調(diào)整、移動和對齊層2023/7/23553.5.6層的屬性設置利用層【屬性】面板設置層的控制和操作3.5.7層與表格互換表格轉(zhuǎn)換為層層轉(zhuǎn)換為表格3.5.8層的應用實例2023/7/2356本節(jié)重點回顧主要介紹在Dreamweaver中如何規(guī)劃、設計和管理站點,可以用多種方法創(chuàng)建站點,如果開發(fā)Web應用程序,則必須根據(jù)需要設置服務器和數(shù)據(jù)庫,然后再設計該站點的外觀,并對該站點進行功能測試,以驗證該站點是否符合定義的目標,可以在站點中包含動態(tài)頁,在服務器上可以發(fā)布網(wǎng)站,并定期地維護,以確保站點保持最新,且工作正常。本章培養(yǎng)學生實際動手操作能力。2023/7/2357另外,介紹了DrameweaverMX中的3種頁面定位工具——表格、層和框架,重點介紹了表格、層和框架在設計網(wǎng)頁時的定位作用以及表格、層、框架的創(chuàng)建、編輯和屬性設置等操作。重點知識有:表格、層、框架和框架集的創(chuàng)建、選擇、編輯、保存等操作方法,表格、層、框架和框架集的各種屬性設置,在表格、層和框架中輸入各種網(wǎng)頁元素的方法,布局表格和布局單元格的應用、表格樣式化、外部數(shù)據(jù)導入表格、層及嵌套層、層的疊放次序、層的可見性、框架中網(wǎng)頁的鏈接和顯示方法等。2023/7/23583.6層疊樣式、模板與庫3.6.1層疊樣式表概述3.6.2層疊樣式表的創(chuàng)建與編輯3.6.3層疊樣式表的應用3.6.4模板的應用3.6.5庫的應用3.6.6資源管理2023/7/23593.6.1層疊樣式表概述

層疊樣式表(CascadingStyleSheets,以下簡稱CSS樣式表)是由W3C(WordWideWebConsortium)組織批準的一種網(wǎng)頁元素定義規(guī)則,是一種可以對網(wǎng)頁文檔內(nèi)容進行精確格式化控制的工具。利用CSS樣式表可自動格式化網(wǎng)頁文檔,可將CSS樣式表直接存儲在網(wǎng)頁文檔中,也可以將CSS樣式表定義在網(wǎng)頁文檔之外,然后將它鏈接到多個文檔中。2023/7/23603.6.2層疊樣式表的創(chuàng)建與編輯

在DreamweaverMX中,單擊網(wǎng)頁編輯窗口中狀態(tài)欄右下角的按鈕,或選擇【窗口】|【CSS樣式】命令,還可以單擊【設計】浮動面板組的【CSS樣式】選項卡,便可打開【CSS樣式】面板。層疊樣式、模板與庫電子商務網(wǎng)站建設教程在【CSS樣式】面板中,有【應用樣式】和【編輯樣式】兩種模式,分別用于CSS樣式的應用和編輯操作。設計者可以用【CSS樣式】面板右下角的4個按鈕對CSS樣式進行操作。4個按鈕的作用如下所述。2023/7/2361圖7-1【CSS樣式】面板2023/7/2362

附加樣式:單擊此按鈕,可選擇一個外部樣式表文件,并將其應用于當前文檔。新建樣式:單擊此按鈕,可打開【新建樣式】對話框,新建一個樣式。編輯樣式:單擊此按鈕,可打開【編輯樣式】對話框,編輯制定的樣式。刪除樣式:選中列表中的樣式后,單擊此按鈕可刪除該樣式。2023/7/2363創(chuàng)建層疊樣式和層疊樣式表外部樣式表的鏈接、導入和編輯層疊樣式表的應用2023/7/23643.6.3層疊樣式表的應用濾鏡的概述透明度濾鏡的應用顯示濾鏡的應用模糊濾鏡的應用2023/7/2365濾鏡的概述濾鏡是CSS樣式表中功能最豐富、效果最奇特的工具之一,調(diào)整DreamweaverMX中CSS樣式表的十幾種濾鏡的參數(shù),就能在網(wǎng)頁上制作出多姿多彩、令人眩目的各種效果。2023/7/2366透明度濾鏡的應用用透明度(Alpha)濾鏡可以通過具體的數(shù)值來指定網(wǎng)頁中對象點、線、面的透明度,使得網(wǎng)頁中對象的透明度發(fā)生變化,制作出一些特殊的視覺效果。透明度濾鏡的語法格式是:{filter:Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)}2023/7/2367顯示濾鏡的應用可以利用混合(blend)和顯示(reveal)兩種濾鏡在頁面上添加動人的淡入淡出、網(wǎng)頁轉(zhuǎn)換效果,前者可以使頁面中的對象逐漸消失或顯示,后者提供了24種網(wǎng)頁轉(zhuǎn)換的效果。其語法格式如下:{filter:blendTrans(duration=時間數(shù)值)}{filter:revealTrans(duration=時間數(shù)值,transition=過渡類型)}2023/7/2368模糊濾鏡的應用模糊濾鏡(Blur)是CSS的濾鏡之一,將其應用到網(wǎng)頁文本上可以產(chǎn)生出立體字的效果。模糊濾鏡能為制作網(wǎng)頁的立體字標題帶來方便,與其他立體字效果的處理方法相比,能使頁面的下載速度明顯增快。將濾鏡應用到圖片上,也能得到意想不到的效果。模糊濾鏡的語法格式是:

{filter:Blur(Add=add,Direction=direction,Strength=strength)}2023/7/23693.6.4模板的應用DreamweaverMX的模板是一種預先設計好的網(wǎng)頁樣式,在制作風格相似的頁面時,只要套用這種模板便可以設計出風格一致的網(wǎng)頁。2023/7/2370創(chuàng)建與保存模板

創(chuàng)建模板的方法可以是新建一個空白的模板,然后對它進行編輯后保存,也可以利用一個現(xiàn)成的網(wǎng)頁,設置好可編輯區(qū),轉(zhuǎn)存為模板。

1.新建一個空白模板

2.利用一個現(xiàn)成的網(wǎng)頁文件來創(chuàng)建一個模板2023/7/2371應用與修改模板1.應用模板制作網(wǎng)頁2.修改模板2023/7/2372更新基于模板的網(wǎng)頁文檔將創(chuàng)建的模板應用到頁面制作以后,只需修改一個模板,就可修改所有應用此模板的網(wǎng)頁。2023/7/23733.6.5庫的應用創(chuàng)建和應用庫項目編輯庫項目用庫項目更新網(wǎng)站2023/7/2374編輯庫項目1.重命名一個庫項目2.刪除一個庫項目3.修改庫項目2023/7/23753.6.6資源管理圖像管理顏色管理超鏈接管理Flash管理2023/7/2376本節(jié)摘要與重點回顧樣式、模板和庫是網(wǎng)頁設計者設計制作網(wǎng)頁時不可缺少的工具。它們可以幫助設計者統(tǒng)一整個網(wǎng)站的風格,節(jié)省網(wǎng)頁創(chuàng)作的時間,提高工作效率,給管理整個網(wǎng)站帶來很大方便。CSS層疊樣式表不但能使設計者控制許多HTML樣式不能控制的屬性,還能迅速準確地將樣式作用于整個網(wǎng)站的多個網(wǎng)頁上;另外,它帶有的特效濾鏡,也可使網(wǎng)頁設計效果豐富多彩。2023/7/2377本節(jié)中介紹的【資源】管理面板可以統(tǒng)一管理整個站點的資源,避免反復查找某些網(wǎng)頁元素,能提高網(wǎng)頁設計的效率,得到事半功倍的效果。本節(jié)的重點知識:創(chuàng)建、編輯CSS樣式,創(chuàng)建、編輯、選用CSS外部樣式表,常用CSS特效濾鏡的使用方法,模板和庫的創(chuàng)建、編輯、應用,站點的更新,用網(wǎng)站資源管理器統(tǒng)一管理網(wǎng)站中的各種資源。2023/7/23783.7表單及應用3.7.1交互式表單概述3.7.2創(chuàng)建表單3.7.3表單應用實例2023/7/23793.7.1交互式表單概述

表單(Form)技術(shù)可以實現(xiàn)瀏覽者與Internet服務器之間信息的交互傳送,它是網(wǎng)絡信息收集處理的一種重要的方式。使用表單,可以幫助Internet服務器從用戶那里收集信息,例如收集用戶資料、獲取用戶訂單,在Internet上統(tǒng)也同樣存在大量的表單,讓用戶輸入文字進行選擇。2023/7/2380表單有兩個重要的組成部分:(1)一個是在網(wǎng)頁中進行描述的表單對象。(2)二是應用程序,它可以是服務器端的,也可以是客戶端的,用于對客戶信息進行分析處理。2023/7/2381通常表單的工作過程如下:(1)訪問者在瀏覽有表單的頁面時,可填寫必要的信息,然后單擊“提交”按鈕。(2)這些信息通過Internet傳送到服務器上。(3)服務器上專門的程序?qū)@些數(shù)據(jù)進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。(4)當數(shù)據(jù)完整無誤后,服務器反饋一個輸入完成信息。2023/7/2382

在Dreamweaver中,表單輸入類型稱為表單對象。可以通過選擇“插入”>“表單對象”來插入表單對象,或者通過從下圖顯示的“插入”欄的“表單”面板訪問表單對象來插入表單對象。

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論