表單網(wǎng)頁與框架網(wǎng)頁的制作

1、.表單網(wǎng)頁與框架網(wǎng)頁的制作一：制作如下圖所示的表單網(wǎng)頁（提示：先插入表單，然后在表單內(nèi)插入一個(gè)9行2列的表格，在表格的單元格中插入表格元素）二：框架網(wǎng)頁制作1  框架的創(chuàng)建下創(chuàng)建如圖10.2所示的框架頁，這是比較簡單而且最為常用的網(wǎng)頁布局結(jié)構(gòu)。圖10.2  框架頁展示在Dreamweaver 8中創(chuàng)建框架有4種方法：   選擇菜單命令【文件】【新建】，彈出【新建文檔】對話框，在對話框中選擇【常規(guī)】【框架集】【垂直拆分】，單擊【創(chuàng)建】按鈕，可創(chuàng)建框頁，如圖10.3所示。   選擇菜單命令【查看】【可視化助理】【可視框架邊框助理】，在網(wǎng)頁

2、中按Alt鍵后，用鼠標(biāo)拖動(dòng)框架邊框，也可創(chuàng)建框架。   選擇菜單命令【插入】【HTML】【框架】【次級菜單中框架類別】，在文檔中創(chuàng)建框架。   切換工具欄類別為【布局】，單擊【框架】按鈕右側(cè)的三角形，在下拉列表框中選擇相應(yīng)的框架類別，創(chuàng)建框架。在彈出的【框架標(biāo)簽輔助功能屬性】對話框中設(shè)置每個(gè)框架的標(biāo)題，如圖10.4所示。          圖10.3  創(chuàng)建框架        

3、                           圖10.4  設(shè)置框架標(biāo)題單擊【確定】按鈕，在文檔中創(chuàng)建左右形式的框架。2  設(shè)置框架集屬性框架和框架集的屬性都可以在屬性面板中設(shè)置，此處需要介紹框架面板來協(xié)助完成。（1）用快捷鍵Shift+F2或選擇菜單命令【窗口】【框架】，調(diào)出【框架】面板，如圖10.5所示。（

4、2）在框架面板中，單擊最外一層邊框，在【屬性】面板中可以設(shè)置框架集的屬性，如圖10.6所示。           圖10.5  【框架】面板                         圖10.6  框架集【屬性】面板在屬性面板中各項(xiàng)參

5、數(shù)詳細(xì)設(shè)置如下：   邊框：設(shè)置框架集是否顯示邊框，即是、否、默認(rèn)值，默認(rèn)顯示邊框。   邊框?qū)挾龋喝绻x擇顯示邊框，在此可以設(shè)置邊框的寬度。   邊框顏色：如果選擇顯示邊框，在此可以設(shè)置邊框的顏色。   列：單擊屬性面板右側(cè)中框架集的縮圖，可以設(shè)置框架集的比例，一般設(shè)置一列框架的值為固定的像素或百分比，另一列的值為“1”，單位選擇“相對”，這樣可以保證讓框架集未固定設(shè)置寬度的一列隨瀏覽器而自動(dòng)適應(yīng)寬度。3  設(shè)置框架屬性（1）在【框架】面板中單擊框架的名稱，可以在相應(yīng)的【屬性】面板中設(shè)置框架的相關(guān)屬性，

6、如圖10.7、圖10.8、圖10.9和圖10.10所示。         圖10.7  選擇左側(cè)框架                      圖10.8  選擇左側(cè)框架頁的【屬性】面板         圖10

7、.9  選擇右側(cè)框架                      圖10.10  選擇右側(cè)框架頁的【屬性】面板在屬性面板中可以進(jìn)行下面的設(shè)置：   框架名稱：在框架名稱下方的文本框中可設(shè)置框架的名稱，方便區(qū)別不同的框架。   源文件：在文本框中設(shè)置當(dāng)前框架頁內(nèi)的文檔名稱，也可通過單擊按鈕查找本地文件路徑。  

8、邊框：設(shè)置當(dāng)前框架是否有邊框，默認(rèn)有。   邊框顏色：如果設(shè)置有邊框，可在此設(shè)置邊框顏色。   滾動(dòng)：設(shè)置當(dāng)前框架是否顯示滾動(dòng)條，有是、否、自動(dòng)、默認(rèn)4個(gè)選項(xiàng)，當(dāng)選擇自動(dòng)時(shí)，網(wǎng)頁內(nèi)容超出框架的范圍會(huì)自動(dòng)顯示滾動(dòng)條。   不能調(diào)整大?。哼x中該復(fù)選框，框架將不能調(diào)整大小。   邊界寬度：框架距離距框集的左右距離。   邊界高度：框架距離距框集的上下距離。4  框架的基本操作對于框架可以進(jìn)行如下的操作：選擇框架、拆分框架、刪除框架和打開框架中的一個(gè)網(wǎng)頁。下面結(jié)合圖例來講述這幾種基本操作。1選

9、擇框架（1）要選擇框架，只要單擊一個(gè)框架內(nèi)的任意地方，該框架就成為當(dāng)前活動(dòng)的框架。該框架中的網(wǎng)頁就成為當(dāng)前活動(dòng)的網(wǎng)頁。（2）要選擇所有的框架，把光標(biāo)移到框架與框架之間的分隔線上，等光標(biāo)變成形狀后單擊。（3）要改變框架的尺寸，把光標(biāo)移到框架的邊框上，等光標(biāo)變成形狀后拖動(dòng)邊框，如圖10.11所示。圖10.11  選擇框架2拆分框架（1）要把框架一分為二，按住Ctrl鍵不放然后拖動(dòng)框架的邊框。（2）也可以選擇菜單命令【修改】【框架頁】的下級菜單選項(xiàng)來拆分框架命令。例如，選擇【拆分右框架】選項(xiàng)，則右側(cè)的框架被拆分成了左右兩個(gè)框架，如圖10.12所示。圖10.12  拆分框架【修改】

10、【框架頁】菜單命令的次級菜單的各項(xiàng)功能如下：   編輯無框架內(nèi)容：編輯代碼<noframes></noframes>之間的內(nèi)容，當(dāng)瀏覽器不支持框架時(shí)網(wǎng)頁所顯示的內(nèi)容。   拆分左框架：拆分后原框架在新生成的框架左側(cè)。   拆分右框架：拆分后原框架在新生成的框架右側(cè)。   拆分上框架：拆分后原框架在新生成的框架上面。   拆分下框架：拆分后原框架在新生成的框架下面。3刪除一個(gè)框架框架創(chuàng)建后可刪除，具本操作步驟如下：（1）選擇菜單命令【查看】【可視化助理】【框架邊框】，將框架

11、邊框設(shè)為顯示。（2）將框架邊框拖離頁面或拖到父框架的邊框上。（3）經(jīng)過步驟（1）（2）的操作，框架成功刪除，余下的框架將自動(dòng)撐滿文檔窗口。框架刪除前后分別如圖10.13和圖10.14所示。    圖10.13  框架被刪除前                            

12、   圖10.14  框架被刪除后技巧：如果框架的邊框設(shè)為隱藏，是無法進(jìn)行拖動(dòng)進(jìn)行刪除的。在刪除時(shí)，按住鼠標(biāo)不放一直將要?jiǎng)h除的框架邊框拖離頁面或拖到父框架的邊框上。查看框架面板可以確認(rèn)框架是否刪除成功。4在框架中打開網(wǎng)頁要在框架中打開一個(gè)網(wǎng)頁，操作步驟如下：（1）打開框架面板，單擊框架。（2）在相應(yīng)的【屬性】面板設(shè)置框架中的頁面。（3）在屬性面板的【源文件】中直接輸入框架中的頁面的路徑和名稱，或單擊按鈕，查找文件的本地路徑。5  框架的保存在預(yù)覽或關(guān)閉當(dāng)前文檔中的框架時(shí)，必須對框架集和其中的每個(gè)框架頁文件進(jìn)行保存，在創(chuàng)建一個(gè)新的框架時(shí)，系統(tǒng)自動(dòng)為框架集命

13、名為“UntitleFrame-1”、“UntitleFrame-2”。這樣的文件名一來不好記，二來也沒有意義，在設(shè)計(jì)時(shí)也容易將這些文件混淆，所以在保存時(shí)要對其進(jìn)行相應(yīng)的重命名，文件的名稱一般用其所在框架集中的位置相關(guān)的名稱進(jìn)行命名，例如admin_left.htm、admin_right.htm、admin_top.htm、admin_bottom.htm，這樣讓人一看就知道哪個(gè)文件在哪個(gè)框架中。與保存框架集有關(guān)的命令有保存框架頁、框架集另存、保存全部3個(gè)；與保存框架有關(guān)的命令有保存框架、框架另存、保存全部3個(gè)，第3個(gè)命令是將框架集和框架集中所有的框架頁文件同時(shí)進(jìn)行保存，如果要保存單個(gè)框架頁

14、中的文件，只需選擇菜單命令【文件】【保存框架】即可，【框架】另存是將框架在保存時(shí)重新命名為一個(gè)新的文件。6  為框架頁設(shè)置鏈接在網(wǎng)頁制作中之所以使用框架，最主要的還是因?yàn)榭蚣茼摢?dú)特的鏈接方式，應(yīng)用框架可以在不同的框架中顯示不同的頁面。在設(shè)置框架頁中某處文字或圖像等元素進(jìn)行鏈接時(shí)，會(huì)發(fā)現(xiàn)在屬性面板中，【目標(biāo)】下拉列表框中多了幾個(gè)選項(xiàng)，如圖10.16所示。圖10.16  設(shè)置鏈接的目標(biāo)多出來的幾項(xiàng)名稱是當(dāng)前框架集所組成的框架名稱，進(jìn)行正確的鏈接目標(biāo)設(shè)置，才能保證整個(gè)頁面的導(dǎo)航無誤，讓頁面顯示正確的鏈接。創(chuàng)建框架鏈接步驟如下：（1）打開配書光盤中的案例/frame/admin_manager.htm，在左側(cè)框架頁中選擇要鏈接的對象，在此選擇文本【添加新聞內(nèi)容】。（2）設(shè)置文件的鏈接路徑。（3）在【目標(biāo)】下拉列表框中選擇【main】選項(xiàng)（main為右側(cè)框架的名稱，讓鏈接的內(nèi)容在文檔