【網(wǎng)頁設(shè)計(jì)與制作】可制作動(dòng)態(tài)網(wǎng)頁的軟件

1、第7章 可制作動(dòng)態(tài)網(wǎng)頁的軟件本章要點(diǎn)：了解可制作動(dòng)態(tài)網(wǎng)頁的軟件掌握用Dreamweaver UltraDev 學(xué)會(huì)如何制作動(dòng)態(tài)網(wǎng)頁7.1Dreamweaver UltraDev 概述 7.1.1 Dreamweaver UltraDev 功能特點(diǎn) UltraDev增加了很多新的功能，UltraDev原有的一些功能也大大增強(qiáng)了。下面從自動(dòng)化相關(guān)功能、動(dòng)態(tài)數(shù)據(jù)格式化、代碼編寫相關(guān)功能和自定義相關(guān)功能四個(gè)方面介紹UltraDev的新特色。1自動(dòng)化相關(guān)功能 在效勞器數(shù)據(jù)自動(dòng)化操作方面，UltraDev 4增強(qiáng)了許多功能，使用戶在創(chuàng)立 Web應(yīng)用程序時(shí)，有更快捷的操作方法和更強(qiáng)的數(shù)據(jù)控制能力。 實(shí)時(shí)數(shù)據(jù)

2、 可以在工作區(qū)中實(shí)時(shí)查看效勞器端數(shù)據(jù)，節(jié)省時(shí)間，防止重復(fù)勞動(dòng)?；顒?dòng)數(shù)據(jù)Live Data是完全可編輯的，因此，用戶可以在處理效勞器數(shù)據(jù)時(shí)連續(xù)布局頁面和邏輯。 數(shù)據(jù)綁定檢查器 使用數(shù)據(jù)綁定檢查器Data Bindings Inspector可以給頁面快速添加效勞器表達(dá)式或來自數(shù)據(jù)庫中的信息。把一個(gè)對象的屬性綁定到效勞器表達(dá)式無需知道準(zhǔn)確的語法。 遠(yuǎn)程數(shù)據(jù)庫連接 UltraDev允許用戶通過自己的網(wǎng)頁應(yīng)用效勞器行為，直接地連接數(shù)據(jù)庫，不再需要?jiǎng)討B(tài)架構(gòu)和設(shè)定效勞器連接。 用戶鑒定效勞器行為器 在不用書寫復(fù)雜的效勞端代碼的情況下，用戶可以將密碼保護(hù)參加到自己的站點(diǎn)里。它可以讓用戶通過數(shù)據(jù)庫驗(yàn)證用戶名和

3、密碼，同時(shí)密碼保護(hù)站點(diǎn)頁面。2動(dòng)態(tài)數(shù)據(jù)格式化 用戶可以把當(dāng)前的格式數(shù)據(jù)格式和ufl編碼，而不是手寫代碼，應(yīng)用到數(shù)據(jù)庫數(shù)據(jù)或者效勞器表達(dá)式中，還可以用那些效勞器語言中的asp，jsp和cfml等庫文件將根本的效勞器端的邏輯值應(yīng)用到頁面上。同時(shí)，通過數(shù)據(jù)庫制作網(wǎng)頁應(yīng)用導(dǎo)航條，顯示和隱藏版面的某些區(qū)域，插入、更新和刪除某些記錄。 3代碼編寫相關(guān)功能 為了彌補(bǔ)可視化編輯方法在 Web網(wǎng)頁制作方面的局限，UltraDev 4提高了自己的代碼編寫功能和整合性，使用戶既可以直接創(chuàng)立Web應(yīng)用程序的內(nèi)容，也可以通過手工來編寫程序代碼，從而增強(qiáng)了對Web的制作能力。 同時(shí)控制HTML和效勞器標(biāo)記 在可視化環(huán)境中

4、工作仍能保持對代碼的完全訪問。當(dāng)用戶在一個(gè)視圖中修改時(shí)，修改結(jié)果會(huì)在另一個(gè)視圖中立即反映出來。這樣，不但節(jié)省了用戶的編輯時(shí)間，而且還增強(qiáng)了代碼控制能力。 整合文本編輯器 增加了以代碼為中心的新特性，包括自動(dòng)縮排、標(biāo)點(diǎn)平衡和選擇多行后一次縮進(jìn)?，F(xiàn)在，手工編寫代碼就像在設(shè)計(jì)視圖環(huán)境中一樣方便。而且輸人代碼時(shí)，UltraDev 4自動(dòng)對HTML、客戶端JavaScript、ASP、JSP和CFML腳本使用不同的顏色顯示，可以快速區(qū)分關(guān)鍵字和標(biāo)記。 快速標(biāo)簽編輯器和代碼導(dǎo)航條 通過快速標(biāo)簽編輯器，用戶能夠手寫代碼并快速地把代碼參加到頁面視圖中。如果需要，用戶還能快速地修改、參加或者去除頁面中已選中物件

5、的html標(biāo)簽。用戶能夠快速地找到自己所要編輯的代碼，可以通過代碼視圖工具欄的下拉菜單找到文檔中的JavaScript函數(shù)。 整合 BBEdit或 HomeSite Bundle UltraDev內(nèi)置了BBEditMac的適用版和HomeSiteWindows的完全版，此組合讓用戶在那些主流的文本編輯器和UltraDev之間輕松工作。4自定義相關(guān)功能 UltraDev 4在 Web應(yīng)用支持上增加了更多的內(nèi)容，例如，支持所有工業(yè)標(biāo)準(zhǔn)的應(yīng)用效勞器和JavaBean，使用戶在web開發(fā)和應(yīng)用時(shí)有了更多的選擇余地。 效勞器行為生成器 使用效勞器行為生成器Server Behavior Builder，

6、用戶可以創(chuàng)立可重用的效勞器端腳本效勞器行為庫，無需對UltraDev API編程。這個(gè)功能在一個(gè)大型的 Web應(yīng)用程序中是非常有用的，可以大大減少用戶的程序創(chuàng)立的時(shí)間和精力。 支持工業(yè)標(biāo)準(zhǔn)的應(yīng)用效勞器 UltraDev 4支持所有工業(yè)標(biāo)準(zhǔn)的效勞器，例如， Microsoft IIS、Allaire ColdFusion、IBM WebSphere、BEA WebLogic和 Netscape Enterprise Sever等，用戶可以根據(jù)自己的實(shí)際情況選擇需要的效勞器，不必局限于某一個(gè)效勞器。 支持JavaBean 現(xiàn)在，JSP開發(fā)者可以注冊任何的JavaBean，作為UltraDev數(shù)據(jù)源

7、，從而可以把JSP頁面連接到JavaBean。UltraDev內(nèi)置 JavaBean類、jar和zip文件。注冊 JavaBean之后，用戶就可以在數(shù)據(jù)綁定檢查器Data Bindings Inspector中使用拖放方法訪問 JavaBean的屬性。7.1.2 Dreamweaver UltraDev 的安裝及配置 使用 UltraDev 開發(fā) Web應(yīng)用程序，在用戶本地計(jì)算機(jī)系統(tǒng)配置上與 Dreamweaver 4等網(wǎng)頁工具有所不同。這主要是因?yàn)?UltraDev 4不但支持傳統(tǒng)的靜態(tài)頁面，而且還支持基于新Web技術(shù)的動(dòng)態(tài)頁面。這就要求用戶的計(jì)算機(jī)除了具備根本的軟硬件要求外，還應(yīng)在軟件上滿

8、足一些特殊的要求，例如必須在本地計(jì)算機(jī)上安裝效勞器開發(fā)和控制環(huán)境。根據(jù)用戶需求的不同，所需要的根本配置也不相同，下面列出了三種不同的系統(tǒng)配置： 為運(yùn)行 UltraDev 4而需要使用的系統(tǒng)配置。 為運(yùn)行動(dòng)態(tài)頁面而需要使用的系統(tǒng)配置。 為存儲數(shù)據(jù)而需要使用的系統(tǒng)配置。 為了建立可行的Web應(yīng)用，用戶的系統(tǒng)至少要到達(dá)前兩個(gè)配置要求。如果需要使用數(shù)據(jù)庫，用戶的系統(tǒng)就必須到達(dá)存儲數(shù)據(jù)的配置要求。1、運(yùn)行 UItraDev 4的系統(tǒng)配置 在根本運(yùn)行環(huán)境上，UltraDev 4與 Dreamweaver 4的要求根本相同，用戶只需適當(dāng)?shù)卦黾右恍﹥?nèi)存，即可增加數(shù)據(jù)庫的連接以及數(shù)據(jù)查詢和操作速度，從而提高We

9、b開發(fā)速度。下面是運(yùn)行UltraDev時(shí)的系統(tǒng)配置要求： 中央處理器：Intel奔騰處理器233MHz的處理速度或者更快、奔騰處理器或其他同級別的兼容處理器。 內(nèi)存：64MB的RAM。 硬盤空間： 50MB的可用磁盤空間。 其他設(shè)備：支持 SVGA 24色以上的顯示器、鼠標(biāo)和調(diào)制解調(diào)器等設(shè)備。 操作系統(tǒng)： Windows 95、Windows 98、Windows Me、帶有 Service Pack 5的 Windows NT 4.0 、Windows 2000、Windows XP以及其他支持 UltraDev 4的操作系統(tǒng)。2、運(yùn)行動(dòng)態(tài)頁面的系統(tǒng)配置 在 UltraDev 4中，實(shí)現(xiàn) W

10、eb應(yīng)用時(shí)已包括了創(chuàng)立動(dòng)態(tài)的頁面。在網(wǎng)絡(luò)效勞器把動(dòng)態(tài)的頁面發(fā)送到瀏覽器之前，應(yīng)用效勞器就會(huì)在運(yùn)行中處理該動(dòng)態(tài)頁面。為了運(yùn)行動(dòng)態(tài)頁面，用戶需要一個(gè)應(yīng)用效勞器，它應(yīng)支持 ASP、JSP或 Allaire ColdFusion中的任何一種或多種，能在為瀏覽器提交動(dòng)態(tài)頁面之前生成HTML源代碼文件。 3、實(shí)現(xiàn)數(shù)據(jù)存儲的系統(tǒng)要求 無論用戶創(chuàng)立何種Web應(yīng)用程序，不進(jìn)行數(shù)據(jù)的存儲幾乎是不可能的。對于一個(gè)數(shù)據(jù)存儲量不大的程序，可以使用文本文件來實(shí)現(xiàn)數(shù)據(jù)的存儲和讀取，不過，文本的執(zhí)行效率不高，也不便管理。所以，一般的Web應(yīng)用程序都不采用文本來存儲數(shù)據(jù)，而是利用數(shù)據(jù)庫技術(shù)來存儲數(shù)據(jù)。數(shù)據(jù)庫的數(shù)據(jù)查詢快速，管理

11、方便，容錯(cuò)功能強(qiáng)，在Internet信息管理和應(yīng)用中占有絕對的優(yōu)勢。 對于數(shù)據(jù)庫，不同的用戶、不同的數(shù)據(jù)量要求，也可能有不同的選擇。如果用戶構(gòu)建的站點(diǎn)規(guī)模不大，可以使用一些小型的數(shù)據(jù)庫程序，例如，Microsoft Access或 Lotus Approach等。本書就是以 Microsoft Access 2000為例向大家介紹數(shù)據(jù)的使用的，因?yàn)樗谶M(jìn)行數(shù)據(jù)庫設(shè)計(jì)和管理時(shí)非常便捷，而且性能優(yōu)越，幫助信息也很全面，用戶很容易掌握其使用方法。 如果用戶構(gòu)建的站點(diǎn)規(guī)模很大，有大量的數(shù)據(jù)等待處理，并且希望數(shù)據(jù)庫非常強(qiáng)壯和擁有強(qiáng)大的容錯(cuò)能力，那么應(yīng)該安裝效勞器級別的數(shù)據(jù)庫系統(tǒng)，例如 Microsoft

12、 SQL Server、Sybase、Informix和Oracle等，一般使用Microsoft SQL Server和Oracle,因?yàn)樗鼈兊墓δ軓?qiáng)大，而且應(yīng)用范圍廣，受支持程度高。7.1.3 Dreamweaver UltraDev工作界面 當(dāng)?shù)谝淮螁?dòng) UltraDev 4時(shí)，看到如圖7-1所示的窗口和面板，用戶會(huì)感覺到它有別于其他許多網(wǎng)頁創(chuàng)作軟件。許多網(wǎng)頁創(chuàng)作軟件的界面擁有大量固定的菜單、工具欄和工具，使得在工作過程中真正的文檔工作區(qū)域經(jīng)常被壓縮得很小，而UltraDev 4卻使用了簡便、精巧、實(shí)用的工具，不同級別和經(jīng)驗(yàn)的用戶都可以根據(jù)需要有選擇地定制自己所喜歡的界面，以用來提高工作

13、效率。下面介紹一下窗口中界面元素的名稱和功能： 對象面板 圖7-1 UltraDev的窗口結(jié)構(gòu) 1文檔商口 文檔窗口是UltraDev 4的主工作區(qū)域，通過在文檔窗口中輸入文字、插入圖片以及其他各種頁面元素，并且進(jìn)行鏈接設(shè)置等操作，就可以在其中創(chuàng)立新的Web頁。當(dāng)需要對已有的Web頁面進(jìn)行編輯等操作時(shí)，也需要在文檔窗口中翻開并且完成編輯工作。在文檔窗口還可以快速查看當(dāng)前頁面的各種屬性，使用標(biāo)記選擇器追蹤HTML元素，以及設(shè)置頁面尺寸等。它的顯示結(jié)果同文件在測覽器中顯示的結(jié)果根本相同。 2對象面板 在對象面板上包含網(wǎng)頁中所有可能用到的頁面元素，從簡單的文本、圖像一直到復(fù)雜的ActiveX、交互圖

14、像，甚至網(wǎng)頁中的隱藏對象如非間斷空格、效勞器引用等，用于在文檔中創(chuàng)立不同類型的對象。在 Window菜單中選擇 Objects命令，就會(huì)在屏幕中顯示 Objects面板。3啟動(dòng)面板 啟動(dòng)面板上包含了普通用戶最常使用的控制按鈕，通過這些按鈕，可以快速啟動(dòng)或關(guān)閉最常用的檢視器和浮動(dòng)面板。在UltraDev 4中，除了Objects面板和屬性面板外，最重要的就是啟動(dòng)面板，使用它可以快速翻開一些重要窗口。一個(gè)復(fù)雜的頁面創(chuàng)作需要經(jīng)常用到這些工具，而使用裝載器來管理，可以極大地提高工作效率。 由于 UltraDev 4擁有數(shù)量眾多的窗口和面板，用戶也許希望其他一些窗口和面板也可以通過裝載器來快速翻開，這就

15、需要自定義裝載器。單擊Edit菜單中的Preferences命令，可以翻開Preferences對話框，在Category列表中選擇Panels選項(xiàng)，在右邊對話框中，可以在列表中通過增減相應(yīng)的工程來設(shè)置裝載器的按鈕，如圖7-2所示。 單擊加號按鈕可以翻開工程菜單，在其中選擇未添加到裝載器中的工程。在列表中顯示的是已經(jīng)添加到裝載器中的工程，使用減號按鈕可以將選中的工程從列表中刪除。圖7-2 Preferences對話框 4屬性面板 屬性面板在 UltraDev 4中是一個(gè)十分重要的工具，使用它可以對任何頁面對象進(jìn)行詳細(xì)的屬性查看和設(shè)置。中選定頁面中的某個(gè)對象時(shí)，屬性面板將顯示相應(yīng)對象的所有屬性細(xì)

16、節(jié)。如果需要，用戶可以隨時(shí)對這些屬性進(jìn)行編輯和設(shè)置。屬性面板中的內(nèi)容不是固定的，它會(huì)隨著選擇對象的不同而變化。例如，在文檔中空白區(qū)域單擊，在屬性面板中只會(huì)顯示一些諸如格式、字體、字號等文本屬性；而選擇了圖像對象時(shí)，將在屬性面板中顯示圖像的尺寸、鏈接、替換文本的屬性。選擇的對象不同，那么屬性面板的內(nèi)容也不同，如圖7-3所示。圖7-3 不同對象下的屬性面板 文本的屬性面板圖像的屬性面板表格的屬性面板 5可停靠浮動(dòng)面板 可?？扛?dòng)面板是一個(gè)工具集合的控制框架，用戶可以將各種浮動(dòng)窗口、面板和檢視器放在其中，組合成為選項(xiàng)卡的形式，以節(jié)省屏幕的空間，必要的時(shí)候還可以將這些浮動(dòng)窗口、面板和檢視器從中別離，從

17、而成為獨(dú)立的浮動(dòng)面板。 7.1.4 Dreamweaver UltraDev 4的工作方式 利用 UltraDev 4設(shè)計(jì)Web應(yīng)用程序，不僅要對應(yīng)用程序的數(shù)據(jù)流程和文件結(jié)構(gòu)進(jìn)行設(shè)計(jì)，而且還要掌握UItraDev 4的根本工作方式，只有這樣才能減少不必要的開發(fā)環(huán)節(jié)，提高應(yīng)用程序的開發(fā)效率。在UltraDev 4中，一個(gè)頁面程序的創(chuàng)立應(yīng)按照三個(gè)步驟來走，它們分別為：制作靜態(tài)頁面和定義記錄集、添加和激活動(dòng)態(tài)內(nèi)容，以及編輯和調(diào)試Web頁。 1制作靜態(tài)頁面和定義記錄集 制作動(dòng)態(tài)頁的第一步就是創(chuàng)立靜態(tài)頁面。用戶可以定置Dreamweaver所有的設(shè)計(jì)工具，然后根據(jù)頁面的實(shí)際需要?jiǎng)?chuàng)立顯示內(nèi)容。 如果在應(yīng)用

18、中使用了數(shù)據(jù)庫，下一步就要定義記錄集，以便從數(shù)據(jù)庫中臨時(shí)提取數(shù)據(jù)。應(yīng)用不能直接調(diào)用數(shù)據(jù)庫，它必須以記錄集為中介手段。用戶定義的任何記錄集都要添加到數(shù)據(jù)捆綁監(jiān)視器的列表中，然后用這個(gè)監(jiān)視器往用戶的Web頁中添加動(dòng)態(tài)內(nèi)容。2添加和激活動(dòng)態(tài)內(nèi)容 在向數(shù)據(jù)捆綁監(jiān)視器中添加了記錄集或其他數(shù)據(jù)源之后，就可以向用戶的Web頁中添加動(dòng)態(tài)內(nèi)容，而不必考慮插入到用戶的 Web頁中的效勞器端腳本。向 UltraDev 4添加動(dòng)態(tài)內(nèi)容時(shí)，僅僅需要指明其位置和內(nèi)容。3編輯和調(diào)試Web頁 最后一步就是根據(jù)需要編輯和調(diào)試Web頁。Dreamweaver UltraDev 4為用戶提供了三種編輯環(huán)境：Dreamweaver傳

19、統(tǒng)的可視化編輯環(huán)境、UltraDev 4活動(dòng)數(shù)據(jù)Live Data編輯環(huán)境和源代碼編輯環(huán)境。 當(dāng)然，用戶還可以使用其他的 ASP調(diào)試工具進(jìn)行實(shí)時(shí)的跟蹤調(diào)試，比方 Microsoft公司的InterDev。另外，Microsoft公司還出了一個(gè)產(chǎn)品叫做ScriptDebuger，也是個(gè)很好用的調(diào)試工具。它甚至可以讓用戶單步執(zhí)行腳本，實(shí)時(shí)查看變量數(shù)據(jù)。7.2 框架的創(chuàng)立 在 UltraDev 4中，專門提供了一個(gè)用于創(chuàng)立框架的對象面板，集成8種常用的框架，通過它們，用戶可以很快完成各種框架結(jié)構(gòu)的應(yīng)用。另外，通過萊單，用戶也可以逐步完成框架的創(chuàng)立。下面分別對框架的規(guī)劃、創(chuàng)立和分割進(jìn)行介紹。 在正式創(chuàng)

20、立框架頁面之前，必須對框架頁面的布局和內(nèi)容進(jìn)行規(guī)劃，以減少后期修改工作。規(guī)劃框架頁面可能會(huì)涉及到以下幾個(gè)問題： 確定頁面結(jié)構(gòu)。通過結(jié)構(gòu)草圖規(guī)劃頁面內(nèi)框架的數(shù)量、排列方式、是否需要滾動(dòng)條、框架與框架之間的距離等。通常，三框架頁面是大多數(shù)人的選擇。協(xié)調(diào)色彩。多框架的頁面需要使用協(xié)調(diào)的背景色、文本色和鏈接色，尤其是鏈接顏色應(yīng)該統(tǒng)一。用戶應(yīng)該從頁面、甚至站點(diǎn)設(shè)計(jì)的全局出發(fā)，考慮框架內(nèi)色彩的應(yīng)用問題。 規(guī)劃初始頁面。每個(gè)框架都應(yīng)該有一個(gè)初始頁面，簡單的問候語、富有意義的圖像都可以作為初始頁面的內(nèi)容，否那么在測覽器內(nèi)將看到一個(gè)空白的區(qū)域。初始頁面可以是以前創(chuàng)立的頁面文件，也可以從空白頁面開始，在發(fā)布站點(diǎn)之

21、前，完成空白頁面的編輯和填充。確定目標(biāo)框架。目標(biāo)框架是更換最頻繁的窗口區(qū)域，可能多個(gè)鏈接目標(biāo)都需要在此框架內(nèi)翻開，所以該框架應(yīng)該處在醒目的位置，而且顯示區(qū)域比較大，一般應(yīng)占整個(gè)頁面的60以上的比例空間。創(chuàng)立框架 要為當(dāng)前頁面創(chuàng)立框架結(jié)構(gòu)，最常用的方法是使用Frames對象面板來創(chuàng)立。在該面板中，UltraDev 4提供了8種框架結(jié)構(gòu)如圖7-6所示，用戶只要單擊其中的框架按鈕，就可以在當(dāng)前頁面或者插入點(diǎn)所在的框架中應(yīng)用按鈕所對應(yīng)的框架結(jié)構(gòu)，完成頁面分割任務(wù)。例如，單擊對象面板中的 Insert Left and Nested Top Frame按鈕，可將當(dāng)前文檔窗口分割成三局部，如圖7-7所示。

22、 圖7-7 通過Frames對象面板創(chuàng)立框架 圖7-6 Frames對象面 單獨(dú)使用 UltraDev 4提供的 8種框架結(jié)構(gòu)，是不能滿足框架頁面的創(chuàng)立需要的，開發(fā)人員需要結(jié)合使用它們才能創(chuàng)立各種各樣的框架。UltraDev 4不但允許用戶在一個(gè)文檔窗口中應(yīng)用框架技術(shù)，也允許用戶嵌套框架，即在單個(gè)框架中應(yīng)用框架。 除了Frames對象面板外，用戶還可以通過三種方式來創(chuàng)立框架：一種是通過Insert菜單下的Frames子菜單來完成，一種是通過Modify菜單的Frameset子菜單來完成，另一種是使用Alt功能鍵。其中，Alt功能鍵的使用必須是在原有框架的根底上。如果用戶要使用Alt功能鍵分割框

23、架，可按住Alt功能鍵，將鼠標(biāo)移動(dòng)到框架邊框處。當(dāng)鼠標(biāo)的形狀切換成垂直狀時(shí)，沿箭頭指示的方向拖動(dòng)鼠標(biāo)，可將框架分割成上、下兩個(gè)局部。當(dāng)鼠標(biāo)的形狀切換成水平狀時(shí)，沿箭頭指示的方向拖動(dòng)鼠標(biāo)，可將框架分割成左、右兩個(gè)局部。 7.2.3 修改框架屬性 用戶在創(chuàng)立框架時(shí)，UltraDev 4都按照默認(rèn)的內(nèi)容來設(shè)置框架的大小以及其他一些屬性，包括邊框的有無、邊框?qū)挾?、邊框顏色、所選行或列的寬度、行或列寬度的度量單位等內(nèi)容。為了框架的美觀和統(tǒng)一，用戶還必須對上面這些屬性進(jìn)行設(shè)置，下面分別進(jìn)行介紹。 1選擇框架 要對框架進(jìn)行屬性設(shè)置和其他操作，首先必須選擇框架UltraDev 4提供了兩種選擇框架的方法，用戶

24、可選擇其中任一種方法： 圖7-8 框架面板 按住Alt功能鍵，單擊頁面內(nèi)的框架。 在翻開的框架面板內(nèi)單擊框架。框架面板是UltraDev 4用于管理框架的工具，執(zhí)行 window菜單的Frames命令或者使用 Ctrl F10組合鍵時(shí)，都將翻開如圖7-8所示的框架面板，當(dāng)前頁面的框架集及其框架的布局將顯示在框架面板內(nèi)。 UltraDev 4提供了兩種選擇框架集的方法，用戶可執(zhí)行以下操作之一： 在文檔窗口單擊框架邊框。 在框架面板內(nèi)單擊包圍框架的白色邊框。 無論是框架還是框架集處于選擇狀態(tài)時(shí)，在它的周圍都將出現(xiàn)由圓點(diǎn)組成的虛線框。按住Ctrl功能鍵的同時(shí)，按左、右移動(dòng)鍵時(shí)，將選擇相鄰的框架。按上

25、移動(dòng)鍵，將選擇父框架集，按下移動(dòng)鍵，將選擇子框架集。2調(diào)整框架大小 框架集由多個(gè)矩形框架組成，它們都是從簡單的水平或垂直框架演變而來的，這與表格對頁面的劃分非常類似。對于規(guī)那么的框架來說，同列的框架都具有相同的行高，或者同行的框架都具有相同的列寬。對于不規(guī)那么的框架來說，較小的框架仍然是由初始框架分割而成的，較大的框架那么是由初始框架合并而成的，本質(zhì)上仍然可將它們看成是由行、列內(nèi)的框架組成的。 用戶要調(diào)整單個(gè)框架的大小，將鼠標(biāo)指向框架的邊框整個(gè)框架邊框除外，當(dāng)鼠標(biāo)變成上下的箭頭時(shí)，按住鼠標(biāo)水平垂直地拖動(dòng)框架的邊框可對同列行內(nèi)框架的寬度高度進(jìn)行快速的調(diào)整。另外，在框架邊框的屬性面板中，用戶也可以

26、通過ColumnRow選項(xiàng)區(qū)域中的Value和Units值的調(diào)整來對行或列內(nèi)框架的大小進(jìn)行定量的設(shè)置。 3設(shè)置邊框 邊框是位于不同框架之間的分割線，與邊框有關(guān)的屬性包括是否顯示邊框、邊框的寬度與邊框的顏色等。用戶如果要設(shè)置框架邊框，首先選擇它，然后翻開框架邊框的屬性面板如圖7-9所示來設(shè)置。其中，Borders下拉列表框用于設(shè)置是否顯示邊框，翻開該下拉列表框，選擇Yes選項(xiàng)時(shí)，表示以三維和灰度顯示邊框。選擇No選項(xiàng)時(shí)，表示顯示扁平和灰度邊框。選擇Default選項(xiàng)時(shí)，將由訪問者使用的瀏覽器決定是否顯示邊框的內(nèi)容。圖7-9 框架邊框的屬性面板 Border Color顏色框用于設(shè)置框架集邊框的顏

27、色，用戶可直接在文本框內(nèi)輸入代表顏色的16進(jìn)制數(shù)值，也可以翻開顏色選擇器選擇所需的顏色。注意，只有在Borders下拉列表框內(nèi)定義框架集的邊框?yàn)轱@示狀態(tài)時(shí)，在此設(shè)置的顏色才能生效。 Border Width文本框用于設(shè)置邊框的寬度，用戶可直接在文本框內(nèi)輸入邊框的數(shù)值，它的度量單位是像素。加大邊框的寬度時(shí)，它們在瀏覽器窗口占據(jù)的位置也將增大，尤其是框架較多的情況下，顯示邊框往往會(huì)暄賓奪主，使頁面內(nèi)容在瀏覽器窗口處于次要的地位。因此大多數(shù)情況下，都將邊框的寬度定義為1或0。4改變框架其他屬性 除了框架大小的調(diào)整、邊框的顯示狀態(tài)和邊框顏色之外，用戶還需要設(shè)置框架的其他一些屬性，例如，框架名稱、滾動(dòng)條

28、、源文件、邊距寬度和邊距高度等內(nèi)容，這些屬性都出現(xiàn)在框架的屬性面板，如圖7-10所示。其中，框架名稱是設(shè)置目標(biāo)框架的關(guān)鍵，鏈接頁面就是通過框架名稱來確定翻開頁面內(nèi)容的位置的。在Frame Name文本框中，用戶可以輸入框架的名稱，數(shù)字、字母、下劃線及其組合都可以作為框架名稱的組成局部。不過，UltraDev 4不允許使用空格、短橫、半角句點(diǎn)作為框架名稱的組成局部，并且下劃線不得出現(xiàn)在名稱的最前端?？蚣苊Q確定了之后，就可以通過Src文本框?yàn)楫?dāng)前框架設(shè)置一個(gè)默認(rèn)的頁面文件。 圖7-10 框架的屬性面板 在框架內(nèi)填充內(nèi)容時(shí)，它的方法與在文檔窗口添加頁面內(nèi)容完全相似，在內(nèi)容與邊框之間總是保存一定的距

29、離，這樣，不同的框架就會(huì)以間距為分割線，即使邊框未出現(xiàn)在瀏覽器窗口，不同框架的頁面內(nèi)容仍然能夠很好地加以區(qū)分。UltraDev 4使用屬性面板的 Margin Width文本框定義框架內(nèi)容與邊框之間的水平間距，Margin Height文本框定義框架內(nèi)容與邊框之間的垂直間距。當(dāng)框架內(nèi)的內(nèi)容較多時(shí)，它們占據(jù)的空間將超過框架大小覆蓋的范圍，這時(shí)就需要在框架的右側(cè)添加垂直滾動(dòng)條，在框架的底端添加水平滾動(dòng)條。UltraDev 4不僅允許用戶在框架內(nèi)設(shè)置滾動(dòng)條，還可以根據(jù)框架內(nèi)容的多少自動(dòng)決定是否顯示滾動(dòng)條。在框架屬性面板中，翻開Scroll下拉列表框，確定滾動(dòng)條的顯示狀態(tài)。選擇No選項(xiàng)時(shí)，滾動(dòng)條不會(huì)出

30、現(xiàn)在瀏覽器窗口。選擇Yes選項(xiàng)時(shí)，滾動(dòng)條將始終顯示在瀏覽器窗口。選擇Auto選項(xiàng)時(shí)，表示當(dāng)框架內(nèi)容超過框架覆蓋的區(qū)域時(shí)，將顯示滾動(dòng)條，否那么滾動(dòng)條處于隱藏狀態(tài)。選擇Default選項(xiàng)時(shí)，由訪問者使用的瀏覽器來決定是否顯示滾動(dòng)條，濟(jì)覽器的類型不同，它對滾動(dòng)條的處理方式也不同。 在瀏覽器窗口內(nèi)使用鼠標(biāo)拖動(dòng)頁面的框架時(shí)，也能夠?qū)蚣艿拇笮∵M(jìn)行修改。但如果在框架的屬性面板內(nèi)啟用 No Resize復(fù)選框，那么訪問者修改框架大小的嘗試將是無效的。7.2.4 保存框架頁面 在 UltraDev 4中，保存框架頁面比保存普通頁面要復(fù)雜一些，這主要是由于框架頁面是由框架集及其框架內(nèi)容組成的。在保存框架頁面時(shí)，

31、不僅要保存框架的內(nèi)容，還要對框架集本身進(jìn)行保存。 如果用戶要保存框架集，可選擇File菜單的 Save Frameset命令，翻開 Save AS對話框，將框架集文件定位在當(dāng)前站點(diǎn)內(nèi)。需要將當(dāng)前框架集進(jìn)行另存處理時(shí)，可選擇File菜單的save Framset As命令。 如果用戶要保存框架內(nèi)的頁面時(shí)，需要將插入點(diǎn)定位在框架內(nèi)，然后選擇File菜單的Save命令，這樣在翻開的對話框內(nèi)便可確定框架頁面的名稱及其路徑。一次性地對框架文件、框架集文件存盤時(shí)，可選擇File菜單中的Save All命令，UltraDev 4將依次對框架集和框架內(nèi)容進(jìn)行保存。7.3 表單 表單是訪問者與網(wǎng)頁維護(hù)人員之間進(jìn)

32、行溝通和交流的橋梁，當(dāng)訪問者填寫完表單數(shù)據(jù)之后，信息將被發(fā)送給ASP應(yīng)用程序，由ASP應(yīng)用程序分析訪問者的要求，并將結(jié)果顯示在瀏覽器窗口，或者反響給站點(diǎn)所有者，并對訪問者作出響應(yīng)。表單是UltraDev 4創(chuàng)立 Web應(yīng)用程序的重要內(nèi)容。本節(jié)首先介紹表單的一些根本內(nèi)容，使用戶對表單有一個(gè)明確的認(rèn)識，然后詳細(xì)介紹表單及主要表單元素的創(chuàng)立方法。 7.3.1 表單的創(chuàng)立 在動(dòng)態(tài)交互式網(wǎng)頁中，表單對象是最常用的頁面對象，它能夠方便地收集各種所需信息，是用戶與Web應(yīng)用程序之間進(jìn)行數(shù)據(jù)交換的重要接口。UltraDev 4提供了多種創(chuàng)立表單的方法，在文檔窗口內(nèi)，執(zhí)行以下方法之一時(shí)，都可以創(chuàng)立一張表單： 選

33、擇Insert菜單的Form命令。 翻開 Form對象面板，單擊 Insert Form按鈕。 選擇 Insert菜單的 Form Objects選項(xiàng)，然后從其子菜單中選擇任何一個(gè)表單元素插入命令。 表單被創(chuàng)立之后，以紅色虛線框的形式出現(xiàn)在文檔窗口，說明表單元素的填充范圍，只有出現(xiàn)在該區(qū)域的內(nèi)容才作為表單的一局部。如果紅色虛線框未顯示在文檔窗口內(nèi)，用戶可以選擇View菜單中的 Invisible Elements命令。在表單的邊框上單擊，或者將插入點(diǎn)移動(dòng)至表單內(nèi)，都將使表單處于選擇狀態(tài)。當(dāng)用戶選擇表單之后，屬性面板就會(huì)顯示出表單的屬性內(nèi)容，如圖7-11所示。圖7-11 表單的屬性面板7.3.2

34、 創(chuàng)立文本框 對于表單的創(chuàng)立，UltraDev 4支持兩種情況，一種是創(chuàng)立單行文本框，一種是創(chuàng)立滾動(dòng)文本框。其中單行文本框用于接收簡短的用戶信息，滾動(dòng)文本框用于接收內(nèi)容較多的用戶信息。下面分別介紹它們的創(chuàng)立過程。 7.3.3 創(chuàng)立復(fù)選框 在Windows的對話框中，用戶也許經(jīng)常接觸到復(fù)選框的使用，復(fù)選框允許用戶在眾多項(xiàng)選擇項(xiàng)內(nèi)進(jìn)行多項(xiàng)選擇，啟用的復(fù)選框內(nèi)將出現(xiàn)勾選號。一般，復(fù)選框的使用必須與說明文字相配合，訪問者可根據(jù)說明文字的內(nèi)容來判斷是否啟用復(fù)選框。 圖7-14 設(shè)置復(fù)選框的屬性 下拉菜單是對單項(xiàng)選擇按鈕的改進(jìn)，其中的選項(xiàng)具有互斥的特點(diǎn)。相對于單項(xiàng)選擇按鈕，下拉菜單有優(yōu)點(diǎn)也有缺點(diǎn)，優(yōu)點(diǎn)是可

35、將所有的選項(xiàng)都集中起來，只顯示經(jīng)常處于選擇狀態(tài)的選項(xiàng)，克服了單項(xiàng)選擇按鈕占用過多頁面空間的缺點(diǎn)，節(jié)約了頁面空間。缺點(diǎn)是不方便訪問者進(jìn)行快速選擇。在 UltraDev中，創(chuàng)立下拉菜單的方法也有兩種，用戶只要選擇其中的一種即可： 選擇InsertForm ObjectsList/Menu命令。 翻開對象面板，單擊listMenu按鈕。 下拉菜單的屬性包括菜單名稱、初始選項(xiàng)和菜單數(shù)值等。菜單名稱是識別下拉菜單的唯一標(biāo)記，ASP應(yīng)用程序是通過該名稱識別不同的表單元素的。初始選項(xiàng)就是翻開頁面時(shí)，首先出現(xiàn)在下拉菜單的內(nèi)容。當(dāng)訪問者將表單發(fā)送給ASP應(yīng)用程序時(shí)，應(yīng)用程序?qū)⒏鶕?jù)下拉菜單的數(shù)值來判斷菜單項(xiàng)選擇項(xiàng)

36、是否已被選中，在菜單數(shù)值與菜單項(xiàng)選擇項(xiàng)之間存在著對應(yīng)關(guān)系。 要設(shè)置下拉菜單的屬性，在表單中選擇它，然后翻開如圖7-16所示的屬性面板來進(jìn)行，具體內(nèi)容可參照下面的選項(xiàng)介紹。 。 LislMenu文本框：在該文本框中設(shè)置下拉菜單的名稱。 Type選項(xiàng)區(qū)域：在該選項(xiàng)區(qū)域中，確認(rèn)選擇了Menu單項(xiàng)選擇按鈕。 List Values按鈕：通過該按鈕設(shè)置下拉菜單中的選項(xiàng)。用戶要通過list Values按鈕設(shè)置下拉菜單中的選項(xiàng)，可以參照下面的操作步驟：1在下拉菜單的屬性面板中，單擊 list Values按鈕，翻開 List Values對話框。2單擊左上角的“按鈕，然后在 Item Label欄內(nèi)輸人下

37、拉菜單的第一個(gè)選項(xiàng)。圖7-16 下拉菜單的屬性面板 3在Value欄內(nèi)輸人第一選項(xiàng)的菜單數(shù)值。4重復(fù)上面第2步到第3步，繼續(xù)添加其他選項(xiàng)及其數(shù)值。5選項(xiàng)添加完畢，單擊向上箭頭按鈕時(shí)，將使所選的菜單項(xiàng)選擇項(xiàng)及其數(shù)值向前移動(dòng)一個(gè)位置。相反地，單擊向下箭頭按鈕時(shí)，將使所選的菜單項(xiàng)選擇項(xiàng)及其數(shù)值向后移動(dòng)一個(gè)位置。6要?jiǎng)h除某個(gè)菜單項(xiàng)選擇項(xiàng)，在選項(xiàng)列表中選擇它，然后單擊“按鈕即可。7單擊OK按鈕，返回到下拉菜單的屬性面板。 在個(gè)人信息表單內(nèi)需要了解職稱情況時(shí)，可在表單內(nèi)添加“職稱下拉菜單，它包括“工人、“初級工程師、“工程師、“高級工程師和“系統(tǒng)工程師5個(gè)選項(xiàng)，訪問者可根據(jù)自身的情況，選擇與自己相對應(yīng)的職

38、稱選項(xiàng)。 1在表單中選擇下拉列表框，并翻開其屬性面板，如圖7-17所示。圖7-17 設(shè)置下拉列表框的屬性2選擇Type的List單項(xiàng)選擇按鈕。3在list/Menu文本框內(nèi)命名下拉列表框。4單擊 list Values按鈕，翻開 list Values對話框，按照上面的方法確定下拉列表框的選項(xiàng)名稱及其數(shù)值，然后單擊OK按鈕之后，返回屬性面板。5在Height文本框內(nèi)設(shè)置列表框選項(xiàng)在瀏覽器窗口的顯示長度。 6在 Selections選項(xiàng)區(qū)域中，啟用 Allow multiple復(fù)選框時(shí)，表示允許訪問者一次選擇多個(gè)選項(xiàng)，此時(shí)下拉列表框的作用與復(fù)選框完全相同。取消 Allow multiple復(fù)選框

39、時(shí)，下拉列表框的作用與單項(xiàng)選擇按鈕相同。將Height文本框內(nèi)的數(shù)值修改為1，并取消Allow multiple復(fù)選框時(shí)，下拉列表框的作用與下拉菜單相同。 7.3.7 創(chuàng)立重置和提交按鈕 收集數(shù)據(jù)信息是表單的主要功能，當(dāng)訪問者完成文本框的輸入、復(fù)選框和單項(xiàng)選擇按鈕等的選擇之后，便可對表單的內(nèi)容進(jìn)行檢查并進(jìn)行修改，最后將表單數(shù)據(jù)提交給ASP應(yīng)用程序。UltraDev 4提供了兩個(gè)按鈕未完成這項(xiàng)工作，其中，重置按鈕用于恢復(fù)默認(rèn)的表單數(shù)據(jù)，提交按鈕用于以Post或Get的方式提交數(shù)據(jù)給ASP應(yīng)用程序。 用戶在創(chuàng)立好用于接收信息的表單元素之后，可按照下面的步驟來創(chuàng)立重置和提交按鈕并設(shè)置其屬性： 1將插

40、入點(diǎn)置于表單中，選擇 InsertForm ObectsButton命令，或者單擊對象面板中的Button按鈕，創(chuàng)立一個(gè)按鈕。 2選擇新創(chuàng)立按鈕，翻開其屬性面板，設(shè)置按鈕屬性，如圖7-18所示。圖7-18 設(shè)置按鈕屬性3在 Button Name文本框內(nèi)定義表單按鈕的名稱。4在lable文本框內(nèi)定義表單按鈕的標(biāo)簽。5在Action選項(xiàng)區(qū)域中，選擇 Submit form單項(xiàng)選擇按鈕，那么創(chuàng)立的按鈕為提交按鈕；選擇Reset form單項(xiàng)選擇按鈕，那么創(chuàng)立的按鈕為重置按鈕。這里選擇 Reset form單項(xiàng)選擇按鈕。6按照前面的步驟創(chuàng)立第第二個(gè)按鈕，并在按鈕的屬性面板中選擇 Submit for

41、m單項(xiàng)選擇按鈕，將按鈕設(shè)置為提交按鈕。7.4 應(yīng)用層 隨著信息時(shí)代的來臨，人們對頁面內(nèi)容的定位、移動(dòng)和顯示提出了更高的要求，為引入層的概念。層是一種全新的頁面定位技術(shù)，可以對其中的對象提供像素級的精確定位，并可以自由地在頁面中移動(dòng)。用戶將對象放入到層中之后，可以控制哪些顯示在前面，哪些顯示在后面，哪些顯示，哪些不顯示。另外，配合時(shí)間軸的使用，用戶還可以同時(shí)移動(dòng)一個(gè)或者多個(gè)層，輕松地制作出各種動(dòng)態(tài)效果。 7.4.1 層的根本概念 在層出現(xiàn)之前，用戶可以使用表格控制頁面的版面。文本、圖像都可填充在表格內(nèi)，它們的位置通過表格是非常容易控制的。當(dāng)需要精確地控制圖像時(shí)，就必須借助更加小巧的表格，而且無法

42、改變在平面上布置對象的限制。為增強(qiáng)Web設(shè)計(jì)者布置版面的手段，W3C在新的 Cascading Style Sheet層疊樣式表中包括了一個(gè)特性，允許對頁面上的元素進(jìn)行絕對的定位。絕對定位使某 個(gè)元素圖像或文本可以定位到頁面上的任何位置，這個(gè)特性就是Web頁面上的層，Web頁面上的層實(shí)際上是通過HTML標(biāo)記來創(chuàng)立的，通過在標(biāo)記中設(shè)置頁面坐標(biāo)，可以在頁面中對層進(jìn)行精確定位。在 UltraDev 4中，用戶可以通過簡單的方法在頁面中創(chuàng)立層，而無須進(jìn)行任何編碼的工作。通過在 UltraDev 4中創(chuàng)立層，可以在頁面中的任何位置插入精確定位的元素，并且可以對多個(gè)層進(jìn)行堆疊和隱藏等操作，還可以通過使用行

43、為設(shè)置層的動(dòng)畫和交互效果，大大提高頁面創(chuàng)作的能力和質(zhì)量。7.4.2 層的根本操作 層的根本操作主要包括默認(rèn)參數(shù)的修改、層的創(chuàng)立、層的對齊、嵌套、尺寸調(diào)整和位置移動(dòng)等，下面分別進(jìn)行介紹。1修改層的默認(rèn)參數(shù) 在使用層時(shí)，都是按默認(rèn)參數(shù)來設(shè)置，為了使頁面中創(chuàng)立的層能夠適應(yīng)自己工作的需要，用戶可以修改它的默認(rèn)參數(shù)值。選擇 EditPreference命令或按下鍵盤上的 CtrlU鍵，翻開Preferences對話框，并在Category列表框中選擇Layers選項(xiàng)，如圖7-19所示。 有關(guān)層的默認(rèn)設(shè)置內(nèi)容主要包括以下幾項(xiàng)： Tag下拉列表框：該下拉列表框設(shè)置在創(chuàng)立層時(shí)使用的HTML標(biāo)記。 Visibi

44、lity下拉列表框：該下拉列表框設(shè)置創(chuàng)立的層默認(rèn)的可見性。 Width和Height文本框：這兩個(gè)文本框設(shè)置創(chuàng)立的層默認(rèn)的寬度和高度屬性。 Backgroud選項(xiàng)：該選項(xiàng)用來指定背景顏色或者圖像。 Nesting復(fù)選框：啟用該復(fù)選框?qū)研聦釉O(shè)置為嵌入式的層。 Netscape 4復(fù)選框：啟用該復(fù)選框?qū)⒃诓迦雽訒r(shí)加人 Resize修復(fù)程序。 圖7-19 設(shè)置層的默認(rèn)屬性 2創(chuàng)立層 UltraDev 4為用戶提供了下面三種創(chuàng)立層的方式，用戶使用任何一種都可以創(chuàng)立出一個(gè)新層。 選擇InsertLayer命令，可以得到一個(gè)默認(rèn)的層。 使用 CSS Style選項(xiàng)卡可以創(chuàng)立一個(gè)精確定義大小的層。 最直接

45、的方法是從對象面板中單擊“Draw Layer按鈕之后，在頁面上拖動(dòng)出層的大小。3激活與選擇 需要在層內(nèi)添加文本、圖像、插件、表格時(shí)，必須先激活層。激活層的方法非常簡單，用戶只需單擊層所在的區(qū)域。層被激活后，光標(biāo)將停留在層中，層的邊框高亮顯示，此時(shí)在層的左上角出現(xiàn)選擇手柄如圖7-20所示，將鼠標(biāo)指向手柄時(shí)，它的形狀將切換成手形，單擊之后便可使激活的層處于選擇狀態(tài)。 如果用戶需要一次性地選擇多個(gè)層時(shí)，可按以下方法之一進(jìn)行操作： 按住Shift功能鍵的同時(shí)，依次單擊多個(gè)層。 按住Shift功能鍵的同時(shí)，依次在層面板的名稱列表內(nèi)選擇。當(dāng)多個(gè)層被選中時(shí)，最后選擇的層的手柄以黑色小方塊的形式出現(xiàn)，而在此

46、之前選擇的層手柄將切換成白色。在文檔窗口的空白位置單擊時(shí)，將取消所有層的選擇。4調(diào)整層的尺寸將鼠標(biāo)移動(dòng)到層的邊框處，它的形狀將切換成雙向箭頭，按住鼠標(biāo)并進(jìn)行拖動(dòng)即可調(diào)整層的尺寸。不過，如果要精確地定義層，必須使用鍵盤和屬性面板。如果選擇多個(gè)層，那么層的操作對所選的層都有效，并且這些層將具有相同的高度或?qū)挾取?圖7-20 激活的層 如果要使用鍵盤調(diào)整，先選擇層，然后按住Ctrl功能鍵，每按一次光標(biāo)移動(dòng)鍵，將按照箭頭指示的方向以像素為單位改變層的大小。如果同時(shí)按住Shift和Ctrl功能鍵，每按一次光標(biāo)移動(dòng)鍵，將按照箭頭指示的方向以網(wǎng)格為單位改變層的大小。如果用戶要使用屬性面板來調(diào)整層的尺寸，先選

47、擇文檔窗口的一個(gè)或多個(gè)層，然后翻開屬性面板，在Height、Width文本框內(nèi)輸入以像素為單位的數(shù)值。5改變層的位置 選擇層之后，使用鼠標(biāo)拖動(dòng)便可改變層在文檔窗口的位置。配合光標(biāo)移動(dòng)鍵的使用，用戶可以以像素或網(wǎng)格為單位移動(dòng)層，前者適合于快速地改變層的位置，后者適合于精確定位的情況。與移動(dòng)層關(guān)聯(lián)的菜單命令是View菜單的 Prevent Overlaps命令。如果該命令前出現(xiàn)勾號，表示 UltraDev 4啟用防止層相互重疊的功能，此時(shí)用戶就無法對層進(jìn)行移動(dòng)。再次執(zhí)行該命令時(shí)，將取消防止層相互重疊的功能。 6對齊層在進(jìn)行層對齊時(shí)，需要確定基準(zhǔn)層，其他層都是通過基準(zhǔn)層來進(jìn)行對齊的。一次性地選擇多個(gè)

48、層之后，UltraDev 4總是將最后選擇的層作為基準(zhǔn)層。如果多個(gè)層相互重疊，用戶還可改變層的排列順序。要對齊層，一次性地選擇文檔窗口的多個(gè)層，單擊 ModifyAlign中的對齊命令即可。7嵌套層嵌套層就是在父層內(nèi)添加新的子層，嵌套的級別是不受限制的，用戶可通過層面板來查看包括嵌套層在內(nèi)的所有層。選擇Window菜單中的Layers命令，翻開層面板，其中顯示各個(gè)嵌套層之間的關(guān)系，如圖7-21所示。在名稱列表內(nèi)出現(xiàn)當(dāng)前頁面內(nèi)所有層的名稱，而且層的名稱將按照添加的順序依次排列，最先添加的層位于名稱列表的底部，最近添加的層位于名稱列表的頂部。特定層的可見性通過眼睛圖標(biāo)在面板的第一列顯示，選擇眼睛圖

49、標(biāo)可以使用戶在三種不同的可見性狀態(tài)之間進(jìn)行切換：眼睛閉上表示層被隱藏，眼睛睜開表示層是可見的，沒有眼睛表示層的可見性屬性被設(shè)置為默認(rèn)的，對于 和 ，它們都意味著繼承父層的可見性。需要同時(shí)將所有層的可見性設(shè)為相同的狀態(tài)，可在標(biāo)簽的頂部單擊眼睛圖標(biāo)，所有的眼睛都會(huì)同時(shí)開關(guān)。 用戶要改變某一層的名稱，只要在面板中雙擊該層的名稱，該名稱就會(huì)高亮顯示，輸人新的層名稱之后回車即可。在嵌套層的左側(cè)會(huì)出現(xiàn)一個(gè)“或“號，假設(shè)出現(xiàn)“號那么表示只顯示父層而不顯示對應(yīng)的子層，單擊“號可以顯示子層；單擊“號將隱藏所有的子層。 UltraDev 4提供了3種添加嵌套層的方法，用戶可選擇以下方法之一進(jìn)行操作。 選擇父層，執(zhí)

50、行Insert菜單的Layer命令。圖7-21 顯示層間的嵌套 拖動(dòng)對象面板的Layer按鈕至父層內(nèi)。 單擊對象面板的Layer按鈕，在父層內(nèi)拖動(dòng)。 按住Ctrl功能鍵在層面板內(nèi)選擇一個(gè)層后拖動(dòng)到父層，當(dāng)包圍目標(biāo)層名稱的方框顯示時(shí)，釋放鼠標(biāo)便形成新的嵌套層。嵌套層隨著父層的移動(dòng)而移動(dòng)，并繼承父層的可見性。用戶可以使用嵌套屬性快速地隱藏層。如果所有子層的可見性都被設(shè)置為默認(rèn)，那么通過父層，用戶可能使所有的子層繼承父層的可見性設(shè)置，并從視圖中消失。7.4.3 設(shè)置層的屬性 用戶要設(shè)置某個(gè)層的屬性，就先在頁面中選擇該層，然后翻開其屬性面板如圖7-22所示。為了讓CSS和JavaScript能夠正確地

51、引用層，必須為層命名，該名稱必須是唯一的。在創(chuàng)立層的同時(shí)，UltraDev 4自動(dòng)為每一個(gè)層進(jìn)行命名，其命名規(guī)那么是“Layer與阿拉伯?dāng)?shù)字的結(jié)合，用戶可在層屬性面板左上角的文本框內(nèi)輸入一個(gè)便于管理和記憶的名稱。UltralDev 4規(guī)定層的名字可以使用英文字母和數(shù)字，但不允許使用特殊字符如空格、連字號、斜線或句號等。 翻開 Tag下拉列表框之后，可以看到與層有關(guān)的 HTML標(biāo)識。默認(rèn)情況下，被定位的層使用div標(biāo)識，但是用戶也可以選擇span、layer或ilayer標(biāo)識。Visibility下拉列表框決定著圖的可見性，各選項(xiàng)的意義與Layers選項(xiàng)卡的完全相同。在層面板內(nèi)，選擇想要改變可見

52、性的層所在的行，單擊左側(cè)的眼睛圖標(biāo)也能夠改變層的可見性。如果層左側(cè)的眼睛圖標(biāo)是睜開的，表示該層是可見的。圖7-22 層屬性面板 如果層左側(cè)的眼睛圖標(biāo)是閉上的，表示該層不可見。如果層的左側(cè)沒有眼睛圖標(biāo)，那么層繼承其父層的可見性。如果層沒有嵌套，那么層的父層就是文檔本身，它總是可見的。希望改變所有層的可見性時(shí)，可在翻開的層面板內(nèi)，單擊眼睛圖標(biāo)列最頂部的眼睛圖標(biāo)，使眼睛圖標(biāo)處于關(guān)閉狀態(tài)。無論層是否可見，層都占用頁面上的空間，并且需要一些頁面下載的時(shí)間。隱藏層不會(huì)影響布局，但其中的內(nèi)容將消耗和可見層相同的下載時(shí)間。 通常，層的大小總是與插入其中的文本或圖形相匹配。通過改變屬性面板中的高度和寬度屬性，用

53、戶可以限制層的尺寸。當(dāng)用戶定義的層相對于某個(gè)圖像太小時(shí)，或者當(dāng)許多文本依賴于層的Overflow屬性的設(shè)置時(shí)，就會(huì)發(fā)生溢出現(xiàn)像Overflow。CSS層支持4種不同的Overflow設(shè)置： Visible選項(xiàng)表示將顯示所有溢出的文本或圖像，同時(shí)忽略為層所設(shè)定的高度和寬度。 Hidden選項(xiàng)表示忽略文本或者圖形中溢出尺寸之外的局部。 Scroll選項(xiàng)表示無論插入對象的尺寸或數(shù)量如何，也無論層的大小尺寸如何，水平和垂直的滾動(dòng)條都將被添加到層上。 Auto選項(xiàng)表示當(dāng)層的內(nèi)容超過寬度和高度時(shí)，水平的和垂直的滾動(dòng)條將顯示在瀏覽器窗口。目前，UltralDev 4還不能在文檔窗口直接顯示結(jié)果，需要設(shè)置層的

54、 Overflow屬性，必須借助于瀏覽器。層在頁面內(nèi)的位置是相對于文檔窗口或父層左上角的位置，L、T文本框以像素默認(rèn)為單位的數(shù)值將決定著這段距離的長短，它們分別表示相對于左上角的橫向距離與縱向距離。 W、H文本框用于指定層的寬度與高度，該數(shù)值只能對所選的層有效，未選擇的層仍將保存 以前的大小。定義距離、長度數(shù)值時(shí)，除了默認(rèn)的像素之外，用戶還可以使用其他的單位，例如 pc(picas)，pt(points)，ininches，mmmillimeters，cmcentimeters或在父層的百分比等，縮寫的單符號或百分號必須緊鄰輸入的數(shù)值，中間不能存在空格。 Clip選項(xiàng)區(qū)域用于指定顯示區(qū)域與層邊

55、界之間的距離，它可以實(shí)現(xiàn)層對象的剪切。用戶可從Ttop、LIeft、RRight、BBottom4個(gè)方向上設(shè)置顯示區(qū)域與層邊界的距離。ZIndex文本框用于設(shè)置層的疊放順序，當(dāng)多個(gè)層出現(xiàn)時(shí)，它能夠改變層的顯示狀態(tài)。數(shù)值較大的層出現(xiàn)在上面，數(shù)值較小的層出現(xiàn)在下面。另外，為了改變層的疊放順序，用戶還可選擇層面板的Z列，然后單擊希望改變疊放順序的層數(shù)字。在數(shù)字的周圍出現(xiàn)活動(dòng)邊框時(shí)，可在此輸入一個(gè)較大的數(shù)字，表示將層盡量移動(dòng)到前端。輸入一個(gè)較小的數(shù)字時(shí)，表示將層盡量移動(dòng)到底端。ZIndex的值必須被設(shè)置為整數(shù)，正、負(fù)沒有關(guān)系。由于該值是相對的，因此較大的值對應(yīng)的層將顯示在頂層，而較小的值對齊的層將顯示

56、在底層。 Bg Image文本框用于指定層的背景圖像，用戶可在文本框中輸入背景圖像的路徑與名稱，或者單擊右側(cè)的文件夾圖標(biāo)，在翻開的對話框內(nèi)確定背景圖像的位置與名稱。當(dāng)層的大小超過圖像的尺寸時(shí)，背景圖像將被拉伸，以適用層的大小。如果希望給層添加背景顏色時(shí)，可在Bg Color文本框內(nèi)輸入16進(jìn)制的數(shù)值，該數(shù)值與某個(gè)顏色相對應(yīng)。當(dāng)然，用戶也可以翻開顏色框從中進(jìn)行選擇。7.5 站點(diǎn)管理 7.5.1 規(guī)劃站點(diǎn)1確定站點(diǎn)主題針對建站的目的制定主題是一條必須遵循的規(guī)那么，如果主題與目的相去甚遠(yuǎn)，那么建站的目的也就沒有到達(dá)，可以說站點(diǎn)本身是不成功的。在確定站點(diǎn)的主題時(shí)，需要對當(dāng)前的站點(diǎn)進(jìn)行系統(tǒng)的分析，尋找自

57、己的突破口與切入點(diǎn)，以期到達(dá)“標(biāo)新的目標(biāo)。公司站點(diǎn)的主題集中在產(chǎn)品研發(fā)、生產(chǎn)銷售、客戶關(guān)系和工程協(xié)作等方面，而個(gè)人站點(diǎn)可以把注意力集中在一個(gè)或幾個(gè)關(guān)鍵性主題上，每個(gè)主題都采用數(shù)個(gè)網(wǎng)頁加以展示。對于正在從事某項(xiàng)工作的用戶來說，可以通過站點(diǎn)邀請一些志同道合的朋友共同參與，站點(diǎn)的主題是針對工程內(nèi)容、前景預(yù)測、個(gè)人想法和當(dāng)前情況等進(jìn)行說明。如果訪問者對介紹的情況比較感興趣，就會(huì)以電子郵件、 或 的方式與建站者進(jìn)行聯(lián)系。站點(diǎn)是展現(xiàn)個(gè)人才華的舞臺，設(shè)計(jì)者對制作工具的掌握、大局的處理、色彩的運(yùn)用和文字功底的深厚在站點(diǎn)上都一覽無余。如果用戶在音樂、書法、繪畫和手工等方面具有獨(dú)到之處，可以將代表性的作品拍攝下來

58、，通過掃描儀將照片轉(zhuǎn)換成圖片，在站點(diǎn)上建立個(gè)人作品專集。對于變幻莫測的世界，人們難免會(huì)對其間發(fā)生的事件和涌現(xiàn)的人物提出自己的看法，通過站點(diǎn)拋磚引玉，與訪問者進(jìn)行交流、切磋，即使不能形成統(tǒng)一的意見，也可以從中受到啟發(fā)，增進(jìn)學(xué)識。 2搜集材料 一般，站點(diǎn)所需要的材料包括文字、圖片、動(dòng)畫、音頻和視頻等內(nèi)容，用戶可以從報(bào)刊、雜志、書籍、光盤以及網(wǎng)絡(luò)上獲得，其中網(wǎng)絡(luò)和光盤是大量素材的重要來源。如果素材來源于共享資源，經(jīng)過加工就可以應(yīng)用到自己的站點(diǎn)內(nèi)。如果素材帶有版權(quán)屬性，那么在使用之前必須征得所有人的同意。 對于圖片類素材來說，需要使用Photoshop、PhotoDraw等工具進(jìn)行處理、加工。對于動(dòng)畫

59、來說，需要使用 ImageReady和 Flash等工具來進(jìn)行創(chuàng)立或編輯。對于音、視頻素材來說，需要使用專用的編輯器進(jìn)行剪輯。對于數(shù)據(jù)類素材來說，在使用之前應(yīng)該進(jìn)行認(rèn)真的核對，以防誤傳。3選擇相關(guān)編輯工具由于 UltraDev 4具有 Dreamweaver 4的一切功能，因此它不需要其他網(wǎng)頁編輯工具來幫助完成工作，但是 UltraDev 4本身并不具有圖像繪制、圖像處理、動(dòng)畫制作和音頻制作等功能，仍然需要其他一些相關(guān)編輯工具來制作和處理網(wǎng)頁材料。例如，利用 Cakewalk Audio設(shè)計(jì)MIDI音樂、利用GoldWave設(shè)計(jì)WAV音效、利用Flash設(shè)計(jì)網(wǎng)頁動(dòng)畫，以及利用Photoshop

60、處理圖像等。 7.5.2 創(chuàng)立站點(diǎn)站點(diǎn)是保存網(wǎng)頁文件及其文件夾的載體，在創(chuàng)立站點(diǎn)期間，它的內(nèi)容總是保存在本地的計(jì)算機(jī)中，經(jīng)過網(wǎng)頁編輯、站點(diǎn)測試之后，就可以著手將它發(fā)布到遠(yuǎn)程效勞器上，這樣訪問者在瀏覽器的幫助下，通過互聯(lián)網(wǎng)就可以瀏覽到站點(diǎn)的內(nèi)容。要?jiǎng)?chuàng)立站點(diǎn)，可參照下面的過程：l在文檔窗口中，選擇 Site菜單中的 New Site命令，翻開 Site Definition for Unnamed Site l對話框，并顯示Local Info選項(xiàng)的內(nèi)容，如圖7-23所示。 圖7-23 創(chuàng)立新站點(diǎn) 2在 Site Name文本框內(nèi)輸入站點(diǎn)的名稱。3單擊Local Root文本框右側(cè)的文件夾圖標(biāo)，翻