表格應用頁面布局設計應用篇應用布局模式作業框架應用層應用頁面布局設計

創建網頁表格應用應用布局模式框架應用層應用

網頁是在網站上顯示的基本頁面利用“頁面屬性”命令設置頁面的整體格式利用“屬性”面板設置頁面各個對象的格式插入文本數據普通文字輸入或粘貼特殊文字利用“插入/文本/字符”對象導入外部數據（文件/導入……）

插入多媒體數據頁面布局設計創建網頁

定位頁面元素（如：頁面分欄、文本和圖像等）創建表格（插入/表格）利用“屬性”面板設置表格對象格式在已有的表格中，單擊鼠標右鍵，通過“快捷”菜單中的“表格”命令編輯表格。頁面布局設計表格應用當前插入點示例表格提示框間距邊框①設置表格屬性創建表格（插入/表格）選定表格編輯表格表格嵌套為表格添加內容表格格式化表格排序應用示例②表格基本操作頁面布局設計Dreamweaver提供了標準視圖和布局視圖兩種創建表格方式來設計頁面布局，前面介紹的即是在標準視圖下創建表格的應用。布局模式是指用可視化的方法在頁面上繪制復雜的表格，可以在布局模式下任意地繪制表格，在表格中也可以任意地繪制單元格，給網頁設計工作帶來極大的方便，比在標準視圖下使用表格更具有靈活性。應用布局模式在默認的情況下，文檔窗口是以標準模式顯示的。要使用布局視圖，必須首先從Dreamweaver的標準視圖模式進入到布局視圖模式。①進入布局模式句炳插入點嵌套表格指向單元格時移動表格時應用示例②編輯表格或單元格應用示例

在一新頁面中插入一個3列的布局表格，其中左單元格使用固定像素，設置寬度為100；中間單元格使用百分比進行設置為“自動伸展”；右端單元格也使用固定像素，設置寬度為200。在左端單元格存放一幅寬度為100的圖片、右端存放一幅寬度為200的圖片，而在中間單元格存放一個文本文件。

也就是說，將固定大小內容的對象放置到固定寬度的單元格中，不需要固定寬度的內容放到中間可變的寬度的單元格中。這樣就可以實現不同瀏覽器下動態調整頁面內容，使頁面達到最佳瀏覽效果。③利用自動伸展特性

框架可以將瀏覽器窗口分割成不同的區域創建框架（文件/新建文檔/常規-框架集）框架中的每一個區域都是一個獨立的頁面整個框架由一個主文件控制

保存框架（主控文件和各個框架文件）選中某個框架（按下Alt+單擊區域）添加或刪除框架（拖拽邊線）在框架中打開文檔（文件/在框架中打開）頁面布局設計框架應用①創建框架示例框架邊框分割線topFramemainFrameleftFrame具有一個上方固定、左側嵌套的3個框架結構的框架集。

由于在框架集中的每個框架都是一個獨立的頁面，所以一個框架集可以包含若干個文檔文件，創建好框架集后需要將每個框架保存成一個個獨立的HTML文件和一個框架集文件（通常為index.html或index.htm）。然后就可以在這些獨立的文件中創建頁面內容了。

Dreamweaver提供了多種保存框架頁面的相關命令，隨著用戶當前的狀態不同，給出的保存命令也有所不同。在執行保存命令之前，首先要選中要保存的對象。通常，一個框架集具有n+1個文件。②保存框架輸入框架文件名提示保存的框架示例

框架集建立后，就可以往各個框架的區域存放內容了。只要在文檔窗口中的任意一個框架里單擊一下就可置當前插入點為該框架內，然后就可以象編輯一般的頁面一樣，插入各種各樣的文本、圖片等網頁元素。當然，也可以直接打開某個框架文件獨立進行頁面編輯制作。③添加內容④設置框架或框架集屬性層應用

層是網頁制作特色功能之一，提供了強大的網頁控制能力，可以精確定位Web頁面的各個元素。層是網頁中的一個區域，一個網頁中可以有多個層，其特點是各個層之間可以重疊，并可以決定每個層是否可見，也可以定義各層之間的層次關系。層的運用使創作者在處理圖像時能夠在多個“畫布”上進行，從而大大提高創作者的工作效率，同時使創作出的作品效果更加豐富。層技術屬于動態HTML范疇，只有4.0版本以上的瀏覽器才支持。

頁面布局設計

頁面對象按順序一張張疊放在一起，以垂直方向組合起來形成頁面的最終效果即為層。創建圖層（插入/布局對象/層）典型應用（在對象上疊放flash動畫）①基本知識200115②創建層③設置層屬性

層創建好后，就可以在層中添加對象，如文字、圖像等，其操作方法與插入對象相同。單擊層『邊框』，可以選中層；當鼠標指針放到層邊框線上指針變為十字時，按住鼠標左鍵可以拖動層，將其放置頁面任何位置。拖動層四周的小方塊，調整層的大小。④添加對象示例層應用示例：創建對象透明效果題目：在標題圖片文字上添加動畫效果創建一新頁面，保存為“ex-1.htm”；在文檔中插入標題圖片；在文檔中插入一個圖層；在圖層中插入“星星閃爍”動畫；設置層對象透明效果；預覽即可看到