《網(wǎng)頁設(shè)計》課件網(wǎng)頁設(shè)計-5

表格應(yīng)用頁面布局設(shè)計應(yīng)用篇應(yīng)用布局模式作業(yè)框架應(yīng)用層應(yīng)用頁面布局設(shè)計

創(chuàng)建網(wǎng)頁表格應(yīng)用應(yīng)用布局模式框架應(yīng)用層應(yīng)用

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

插入多媒體數(shù)據(jù)頁面布局設(shè)計創(chuàng)建網(wǎng)頁

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

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

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

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

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

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

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

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

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

頁面布局設(shè)計

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

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