第五章框架與交互式表單優(yōu)秀PPT

第五章框架與交互式表單5.1框架的基本操作5.2表單的創(chuàng)建與應用5.3應用實例DREAMWEAVER5.1框架的基本操作5.1.1關于框架框架技術用于在一個瀏覽器窗口顯示多個頁面，類似于Windows的資源瀏覽器窗口。其主要用途是在同一個窗口中，實現(xiàn)網(wǎng)頁之間的導航，它是一種常用的網(wǎng)頁設計方式。它又是一種非常實用有效的網(wǎng)頁布局技術，能幫助用戶實現(xiàn)復雜的網(wǎng)頁，乃至整個網(wǎng)站的頁面布局。DREAMWEAVER5.1.2認識框架和框架集框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關的HTML文檔。DREAMWEAVER框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的URL?？蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，但noframes部分除外；框架集文件只是向瀏覽器提供應如何顯示一組框架以及在這些框架中應顯示哪些文檔的有關信息?？蚣芎涂蚣芗蔷o密聯(lián)系在一起的，用到框架就要用到框架集。DREAMWEAVERhtm，并調整框架寬度。DREAMWEAVER框架技術用于在一個瀏覽器窗口顯當頁面處于“設計〞視圖中時，用紅色的虛輪廓線指示表單。DREAMWEAVERDREAMWEAVER從“插入”>“框架〞子菜單中選擇預定義的框架集。在屬性檢查器中，根據(jù)需要設置圖像域的屬性。件，要讓瀏覽器知道框架的數(shù)目、大小比例，預先載入那些網(wǎng)頁等信息。POST方法將在HTTP請求中嵌入表單數(shù)據(jù)?？蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，但noframes部分除外；“菜單〞選項在一個菜單中顯示選項值，用戶只能從中選擇單個選項。主框架文件〔也就是最外面的框架〕是所以框架文件的載體，通常是首頁或特定主題的進入點，因而有必要設置網(wǎng)頁的標題。該文件被發(fā)送到表單的“操作〞文本框中所指定的地址。選中左側的第一個條目“集郵天地”，調出屬性面板，在Link框中選擇相應的文件，這里我們選擇001.從“MIME類型〞彈出菜單中，選擇multipart/form-data。打開一個頁面，將插入點放在希望表單出現(xiàn)的位置。一個典型的利用框架制作的頁面DREAMWEAVER5.1.3框架的創(chuàng)建、調整與刪除創(chuàng)建一個框架。在Dreamweaver中有兩種創(chuàng)建框架集的方法：您既可以從若干預定義的框架集中選擇，也可以自己設計框架集。從“插入”>“框架〞子菜單中選擇預定義的框架集。在“插入〞欄的“框架〞類別中，選擇預定義的框架集。拆分框架單擊要拆分的框架內(nèi)部。選擇“修正”〉“框架集〞命令，然后選擇拆分左框架、拆分右框架、拆分上框架、拆分下框架，來完成框架的拆分。DREAMWEAVER拖曳鼠標調整框架將鼠標指針放在兩個框架的邊框上，鼠標指針變成雙向箭頭。用鼠標拖曳邊框到合適的位置，然后釋放鼠標，可以調整框架的大小。按住Alt不放，再用鼠標拖曳邊框，可以拆分框架。刪除框架。將鼠標指向要刪除的框架邊框，當鼠標變成雙向箭頭時，拖動鼠標到上一級框架的上下或左右邊框線處，松開鼠標即可刪除框架。當框架面板中的信息顯示為Containsnoframes，表明當前無框架。DREAMWEAVER實例：建立一個如下圖的框架DREAMWEAVER5.1.4框架和框架集的選擇與屬性設置選擇框架和框架集選擇“窗口”>“其它”>“框架〞命令，或按快捷鍵Shift+F2，打開框架面板。然后在框架面板中單擊框架邊框線，可選擇框架集。單擊某個框架區(qū)域可選擇該框架?；蛘咴诰W(wǎng)頁編輯窗口中按住Alt鍵，然后單擊要選中的框架的任意設置，便可選中該框架。如果選中一個框架，按住Alt鍵，然后按鍵盤上的左右箭頭鍵，可以選中同一級別的框架。按住Alt鍵，然后按鍵盤上的向上箭頭鍵，可以選中當前框架的上一級框架，連續(xù)重復操作，可以選中整個框架集。DREAMWEAVER打開框架集屬性面板框架和框架集有各自的屬性面板?？蚣芗膶傩悦姘蹇捎脕碓O置框架的大小、框架邊框線的顏色和寬度。DW中默認的框架及屬性是：無邊界、無滾動條、禁止改變框架的大小。打開框架集屬性面板：選擇“窗口”>“屬性〞命令，或者用快捷鍵Ctrl+F3。打開框架屬性面板選擇“窗口”>“屬性〞命令，或者用快捷鍵Ctrl+F3?；蛘?，按住Alt鍵并單擊一個框架，或單擊框架面板中的相應框架。DREAMWEAVER框架里的內(nèi)容主要是HTML文檔，在一個網(wǎng)頁中創(chuàng)建了框架結構后，可在屬性面板中設置框架頁面的超鏈接?？蚣芙Y構的網(wǎng)頁制作完成后，可以分別保存每個框架文檔；也可單獨保存框架集文檔；還可以將整個框架集與它的各個框架文檔一起保存。保存框架文的步驟在網(wǎng)頁編輯區(qū)窗口中，單擊要保存的框架。選擇“文件”>“保存框架〞命令，就可以保存該框架文件。DREAMWEAVER保存框架集文檔的步驟在網(wǎng)頁編輯區(qū)窗口中，選中框架集。選擇“文件”>“保存框架集〞命令，可保存框架集文檔。如果希望將框架集文檔用另外的路徑或文件名保存，應選擇“文件”>“框架頁另存為〞命令。保存框架集中所有文檔的步驟選擇“文件”>“保存全部〞命令。先保存框架集文檔，然后保存框架集中其它框架文檔。DREAMWEAVER5.1.6關于框架的實例建立一個簡單的框架，如下圖示：DREAMWEAVER向框架中添加網(wǎng)頁內(nèi)容。我們先制作好四個網(wǎng)頁，分別為top.htm，用于顯示在上部框架中；left.htm用于顯示在下部左框架中；001.htm、002.htm用于顯示在下部右側框架中。DREAMWEAVERtop.htmleft.htm001.htm002.htm單擊Frame視窗中的topFrame，將上面的框架選定，此時可以看到編輯頁面中此框架邊界以虛線包圍。調出屬性面板，可以看到此框架的缺省名字為topFrame，如果框架很復雜，這個名字就不適用了。我們可以將其改名，只要在下面的輸入框中輸入新名字就行了，這里我們將其命名為myframe_top，給框架命名是為了便于區(qū)分各個網(wǎng)頁中的框架。DREAMWEAVER接下來指定此框架中的源文件。單擊“源文件〞輸入框左面的文件圖標，選擇事先制作好的文件“Top.htm”，看，Top.htm網(wǎng)頁顯示在上面的框架中了。我們可以調整框架的高度，使其與內(nèi)容相適應。將鼠標指針放在上下框架的分界線上，當鼠標變?yōu)樯舷码p箭頭時，按下鼠標左鍵進行拖動，直接改變框架高度DREAMWEAVER這時我們看到框架與里面內(nèi)容間總有一個間隙，我們可將這個間隙去掉。先選中myframe_top框架，將屬性面板中的“MarginWidth”、“MarginHeight〞值均設為0，這回再調整框架高度，可以使其剛好容納里面的內(nèi)容。按住ALT鍵，單擊左側的框架，選中l(wèi)eftFrame框架，將框架命名為“myframe_left”，源文件設為left.htm，并調整框架寬度。DREAMWEAVER選中右側的框架，框架名為“myframe_main”，將其源文件設為001.htm。因為右側框架內(nèi)容可能比較多，可以讓此框架存在滾動條。在屬性面板中，在Scroll列表中選擇“Auto”。DREAMWEAVER別忘了保存文件喲！選擇“文件〞菜單下的“保存框架頁〞命令，將主框架體文件命名為myframe.htm。留意：這個文件相當于一個匯總文件，要讓瀏覽器知道框架的數(shù)目、大小比例，預先載入那些網(wǎng)頁等信息。保存此文件的另一個好處是框架中調入網(wǎng)頁文件時，源文件框中會呈現(xiàn)相對目錄，而不是本地的目錄名稱?，F(xiàn)在我們要實現(xiàn)這樣一個目標，點擊左側框架中的主題，對應的文章便會呈現(xiàn)在右側的頁框架中。DREAMWEAVERDreamweaver將插入一個空的表單。從“插入”>“框架〞子菜單中選擇預定義的框架集。選中左側的第一個條目“集郵天地”，調出屬性面板，在Link框中選擇相應的文件，這里我們選擇001.DREAMWEAVER在“文檔〞窗口中，單擊表單輪廓以將其選定。DREAMWEAVER根據(jù)需要，調整表單的布局。HTML語言中，<u></u>表示什么？將鼠標指針放在上下框架的分界線上，當鼠標變?yōu)樯舷码p箭頭時，按下鼠標左鍵進行拖動，直接改變框架高度DREAMWEAVER件，要讓瀏覽器知道框架的數(shù)目、大小比例，預先載入那些網(wǎng)頁等信息。將插入點放置在表單輪廓內(nèi)，然后選擇“插入”>“表單”>“文件域”。在網(wǎng)頁編輯區(qū)窗口中，選中框架集。DREAMWEAVER下面的示例通過顯示三個選中的復選框項來說明這一點：沖浪、山地自行車和漂流。選中左側的第一個條目“集郵天地”，調出屬性面板，在Link框中選擇相應的文件，這里我們選擇001.htm，再單擊“target〞列表框，從中選擇要顯示此內(nèi)容的框架名，這里選擇“myframe_main”，表示鏈接在框架myframe_main中打開。DREAMWEAVER接下來我們選擇“文學天地”，鏈接到002.htm文件，“target〞還是設為“myframe_main”。進入瀏覽器，單擊左側條目，右側框架就顯示出頁面的內(nèi)容。設置主框架標題。主框架文件〔也就是最外面的框架〕是所以框架文件的載體，通常是首頁或特定主題的進入點，因而有必要設置網(wǎng)頁的標題。當光標在框架內(nèi)時，按下Ctrl+J調出的“PageProperties〞對話框只能設置對應框架內(nèi)源文件的頁面屬性。要想設置主框架文件〔myframe.htm〕的屬性，可以將鼠標移動到最外層框架〔在本例中為上下結構的框架〕的框線上，當鼠標指針變?yōu)殡p向箭頭時單擊鼠標左鍵，使可選定整體框架。DREAMWEAVER再次調出“PageProperties〞對話框，就可以設置主框架文件的屬性了。我們將Title設為“笨象的家”，對框架集而言，背景圖或背景顏色的設定是沒有任何意義的。單擊“OK”，主框架標題設置完了?？纯葱Ч?！有些網(wǎng)站是用框架來設計的，但表面卻看不出來，這是因為看不到頁框間分隔線和頁框滾動條。下面我們就看一下如何設計這樣的框架。先選取整個框架集，在屬性面板上，從Borders下拉菜單中選擇“否”。DREAMWEAVER同樣，將下面的框架體的Borders也設為No，再瀏覽此頁面，框線消失了。DREAMWEAVER作業(yè)：在DW中打開樣式面板的快捷操作是什么？在DW中是利用什么HTML標記構件的分層？一個有3個框架的Web頁實際上有幾個獨立的HTML頁面？HTML語言中，<bodyvlink=>表示什么？HTML語言中，<u></u>表示什么？DREAMWEAVER5.2表單的創(chuàng)建與應用5.2.1關于表單表單的作用是從訪問您的Web站點的用戶那里獲得信息。訪問者可以使用諸如文本域、列表框、復選框以及單選按鈕之類的表單對象輸入信息，然后單擊某個按鈕提交這些信息。無論是電子商務、網(wǎng)上調查，還是留言板、聊天室，都要求網(wǎng)頁能夠接收瀏覽者輸入的信息，而表單就是網(wǎng)站獲取用戶信息的最重要的手段之一。DREAMWEAVER表單支持客戶端-服務器關系中的客戶端。當訪問者在Web瀏覽器中顯示的表單中輸入信息，然后單擊提交按鈕時，這些信息將被發(fā)送到服務器，服務器端腳本或應用程序在該處對這些信息進行處理。DREAMWEAVER5.2.2表單的對象在Dreamweaver中，表單輸入類型稱為表單對象。表單對象是允許用戶輸入數(shù)據(jù)的機制。您可以在表單中添加以下表單對象：文本域接受任何類型的字母數(shù)字文本輸入內(nèi)容。文本可以單行或多行顯示，也可以以密碼域的方式顯示，在這種情況下，輸入文本將被替換為星號或項目符號，以避免旁觀者看到這些文本。隱藏域存儲用戶輸入的信息，如姓名、電子郵件地址或偏愛的查看方式，并在該用戶下次訪問此站點時使用這些數(shù)據(jù)。按鈕在單擊時執(zhí)行操作。通常，這些操作包括提交或重置表單。您可以為按鈕添加自定義名稱或標簽，或使用預定義的“提交〞或“重置〞標簽之一。DREAMWEAVER復選框允許在一組選項中選擇多個選項。用戶可以選擇任意多個適用的選項。下面的示例通過顯示三個選中的復選框項來說明這一點：沖浪、山地自行車和漂流。單選按鈕代表互相排斥的選擇。在某單選按鈕組〔由兩個或多個共享同一名稱的按鈕組成〕中選擇一個按鈕，就會取消選擇該組中的所有其它按鈕。在下面的示例中，漂流是當前選擇的選項。如果用戶單擊了沖浪，那么漂流按鈕將被自動清除。列表/菜單在一個滾動列表中顯示選項值，用戶可以從該滾動列表中選擇多個選項?！安藛唯曔x項在一個菜單中顯示選項值，用戶只能從中選擇單個選項。DREAMWEAVER跳轉菜單是可導航的列表或彈出菜單，它使您可以插入一種菜單，這種菜單中的每個選項都鏈接到某個文檔或文件。文件域使用戶可以瀏覽到其計算機上的某個文件并將該文件作為表單數(shù)據(jù)上傳。圖像域使您可以在表單中插入一個圖像。圖像域可用于生成圖形化按鈕，例如“提交〞或“重置〞按鈕。5.2.3表單的創(chuàng)建方法若要創(chuàng)建HTML表單，需要執(zhí)行以下操作：打開一個頁面，將插入點放在希望表單出現(xiàn)的位置。DREAMWEAVER選擇“插入”>“表單”，或選擇“插入〞欄上的“表單〞類別，然后單擊“表單〞圖標。Dreamweaver將插入一個空的表單。當頁面處于“設計〞視圖中時，用紅色的虛輪廓線指示表單。如果沒有看到此輪廓線，請檢查是否選中了“查看”>“可視化助理”>“不可見元素”。DREAMWEAVER指定將處理表單數(shù)據(jù)的頁面或腳本。在“文檔〞窗口中，單擊表單輪廓以將其選定。在屬性查看器中（“窗口”>“屬性”）的“動作〞文本框中鍵入路徑，或者單擊文件夾圖標瀏覽到適當?shù)捻撁婊蚰_本。指定將表單數(shù)據(jù)傳輸?shù)椒掌魉褂玫姆椒?。在屬性檢查器中，在“方法〞彈出菜單中選擇以下選項之一：默認方法使用瀏覽器的默認設置將表單數(shù)據(jù)發(fā)送到服務器。通常，默認方法為GET方法。GET方法將值附加到請求該頁的URL中。POST方法將在HTTP請求中嵌入表單數(shù)據(jù)。DREAMWEAVER插入表單對象。將插入點放置在希望表單對象在表單中出現(xiàn)的位置，然后在“插入”>“表單〞菜單中，或者在“插入〞欄的“表單〞類別中選擇對象。根據(jù)需要，調整表單的布局?？梢允褂脫Q行符、段落標記、預格式化的文本或表來設置表單的格式。不能將表單插入另一個表單中，即標簽不能交迭，但是可以在一個頁面中包含多個表單。DREAMWEAVER5.2.4插入表單對象在網(wǎng)頁上創(chuàng)建一個表單實例表單的圖像域。圖像域是一個表單域，它的主體是一個圖片。在瀏覽時單擊這個圖片，表單就會向服務器發(fā)送表單中各個表單域的值。如果要插入一