Dreamweaver CS5.5中文版案例教程教學課件 作者 教學課件第5章5.ppt

(24頁)

'Dreamweaver CS5.5中文版案例教程教學課件 作者 教學課件第5章5.ppt'
第5章 使用表格和層頁面布局是進行網頁設計最基本和最重要的工作之一。網頁布局設計的常用工具是表格,合理布局表格,會使網頁更具有自己的個性特點,又便于管理和修改。Dreamweaver提供了3種方式來查看和操作表格:標準視圖、擴展視圖和布局視圖。在標準視圖中,表格顯示為行和列的網格,而布局視圖允許在將表格用做基礎結構的同時在網頁上進行繪制、移動,以及調整布局表格和布局單元格的大小,在擴展視圖中可以了解表格的結構關系。本章主要講解制作表格的方法、表格數據的處理及使用表格進行頁面布局。第5章 使用表格和層5.1.1 插入表格在Dreamweaver CS5.5中,表格可以用于制作簡單的圖表,還可以用于安排網頁文檔的整體布局,在網頁整體設計中起著非常重要的作用。表格不但能夠記載表單式的資料、規范各類數據和輸入列表式的文字,而且還可以排列文字和圖像。第5章 使用表格和層5.1.2 選擇表格像處理文本或圖像一樣,對表格進行操作時首先需要選擇表格, 然后才是修改、編輯。主要有以下幾種方法選擇表格。第5章 使用表格和層5.1.3 調整表格和單元格的大小在文檔中插入表格后,若想改變表格的高度和寬度可以先選中該表格,在出現3個控制點后將鼠標指針移動到控制點上,當鼠標指針變成如圖5-10和圖5-11所示的形狀時,按住鼠標左鍵并拖動即可改變表格的高度和寬度。第5章 使用表格和層5.1.4 添加或刪除行或列表格創建后,可能需要添加內容而添加行或列。用戶可以使用不同的方法在表格中幾乎任何地方添加行或列。第5章 使用表格和層5.1.5 拆分單元格在使用表格的過程中,有時需要拆分單元格以達到最終的效果。第5章 使用表格和層5.1.6 合并單元格合并單元格就是將選中的單元格內容合并到一個單元格中,選中要合并的單元格,選擇“修改”→“表格”→“合并單元格”菜單命令,如圖5-20所示,此時會打開“合并單元格”對話框,單擊“合并單元格”按鈕,將單元格進行合并,效果如圖5-21所示。5.2 設置表格及其元素屬性5.2.1 設置表格屬性在Dreamweaver CS5.5中為了使創建的表格更加美觀、醒目,需要對表格屬性進行設置??梢栽诒砀竦摹皩傩浴泵姘逯袑Ρ砀竦膶傩赃M行詳細的設置,在設置表格屬性之前首先要選中表格。表格的“屬性”面板如圖5-22所示。5.2 設置表格及其元素屬性5.2.2 設置單元格的屬性將光標置于單元格中,該單元格就處于選中狀態,此時“屬性”面板中顯示出所有允許設置的單元格屬性的選項,如圖5-23所示。5.3 導入表格式數據Dreamweaver可以將在另一個應用程序(如 Microsoft Excel)中創建并以分隔文本的格式(其中的項以制表符、逗號、冒號或分號隔開)保存的表格式數據導入到 Dreamweaver 中,并設置為表格格式。5.4 插入AP DivDiv元素體現了網頁技術的一種延伸,是一種新的網頁設計發展方向。有了Div元素就可以在網頁中實現諸如下拉菜單、圖片、文本的各種效果等。另外,使用Div元素和CSS樣式表也可以實現頁面的排版和布局。5.4 插入AP Div5.4.1 創建普通AP Div在Dreamweaver CS5.5中有兩種插入AP Div的方法,一種是通過菜單創建,一種是通過“插入”面板創建。在網頁中插入AP Div的具體操作步驟如下。5.4 插入AP Div5.4.2 創建嵌套AP Div在Dreamweaver CS5.5中,一個AP Div里還可以包含另一個AP Div,也就是嵌套AP Div,嵌套的AP Div稱為子AP Div,子AP Div外面的AP Div稱為父AP Div。5.4.2 創建嵌套AP Div將光標置于文檔窗口中的已有AP Div中,選擇“插入”→“布局對象”→“AP Div”菜單命令,即可創建嵌套AP Div,如圖5-31所示 。5.5 設置AP Div的屬性與其他對象一樣,AP Div元素也有自己的“屬性”面板,在“屬性”面板中可以分為對每個AP Div元素或幾個AP Div元素進行單獨設定。單擊AP Div元素邊界將其選中,即可出現如圖5-32所示的“屬性”面板。5.6 使用Spry布局對象Spry框架支持一組用標準HTML、CSS和JavaScript編寫的可重用構件,可以方便地插入這些構件(采用最簡單的HTML和CSS代碼),然后設置構件的樣式??蚣苄袨榘ㄔ试S用戶執行下列操作的功能:顯示或隱藏頁面上的內容、更改頁面的外觀(如顏色)與菜單交互等。5.6 使用Spry布局對象5.6.1 使用Spry菜單欄 菜單欄構件是一組可導航的菜單按鈕,當用戶將鼠標指針懸停在其中的某個按鈕上時,將顯示相應的子菜單。使用菜單欄構件可在緊湊的空間中顯示大量的可導航信息,并使用戶無需深入瀏覽站點即可了解站點上提供的內容。5.6 使用Spry布局對象5.6.2 使用Spry選項卡式面板選項卡式面板構件是一組面板,用來將內容排列到緊湊空間中。用戶可通過單擊所要訪問面板上的選項卡來隱藏或顯示排列在選項卡式面板中的內容。當用戶單擊不同的選項卡時,會打開相應的構件面板。在特定時間內,選項卡式面板構件中只有一個內容面板處于打開狀態。5.6 使用Spry布局對象5.6.3 使用Spry折疊式面板 折疊構件是一組可折疊的面板,可以將大量內容存儲在一個緊湊的空間中。用戶可通過單擊該面板上的選項卡來隱藏或顯示存儲在折疊構件中的內容。當用戶單擊不同的選項卡時,折疊構件的面板會相應地展開或收縮。5.6 使用Spry布局對象5.6.4 使用Spry可折疊面板 可折疊面板構件是一個面板,可將內容存儲到緊湊的空間中。用戶單擊構件的選項卡即可隱藏或顯示存儲在可折疊面板中的內容。5.7 案例——利用AP Div制作網頁下拉菜單下拉菜單是網頁中最常見的效果之一,下拉菜單不僅節省了網頁排版的空間,使網頁布局簡潔有序,一個新穎美觀的下拉菜單更是為網頁增色不少。步驟01 打開素材文件步驟02 “AP Div”命令步驟03 插入AP Div步驟04 插入表格5.7 案例——利用AP Div制作網頁下拉菜單步驟05 輸入文字步驟06 添加“顯示-隱藏元素”步驟07 “顯示-隱藏元素”對話框步驟08 “行為”子面板5.7 案例——利用AP Div制作網頁下拉菜單步驟09 “顯示-隱藏元素”對話框步驟10 “行為”子面板步驟11 設置“AP元素”面板5.7 案例——利用AP Div制作網頁下拉菜單步驟12 預覽效果5.8 知識與技能梳理在網頁設計中,表格除了可以用來定位內容,用最簡潔的形式表達復雜的內容,還可以用來控制文本和圖像在頁面上出現的位置,把文字和圖像規范地按照行或列對齊,使整個頁面看上去緊湊而統一。這對于復雜版面的網頁排版來說,有很大的幫助,對于一個網頁設計者來說,如果能夠靈活地應用表格,會讓設計的網頁看上去井井有條、美觀大方。重要工具:表格、AP Div。核心技術:利用AP Div制作可以重疊、便于移動和下拉菜單效果。實際應用:企業網站、旅游網站、個人主頁。
關 鍵 詞:
教學 中文版 教程 案例 cs cs5.5 作者 dreamweaver
 天天文庫所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:Dreamweaver CS5.5中文版案例教程教學課件 作者 教學課件第5章5.ppt
鏈接地址: http://www.476824.live/p-51617276.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服點擊這里,給天天文庫發消息,QQ:1290478887 - 聯系我們

本站為“文檔C2C交易模式”,即用戶上傳的文檔直接賣給(下載)用戶,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有【成交的100%(原創)】。本站是網絡服務平臺方,若您的權利被侵害,侵權客服QQ:1290478887 歡迎舉報。

[email protected] 2017-2027 http://www.476824.live 網站版權所有

粵ICP備19057495號 

收起
展開
球探网即时蓝球比分 天津快乐十分走势图彩经网 个人理财规划报告书 福彩新快三 极速11选5计划 黑龙江6+1开奖查询 pk10免费计划软件苹果 内蒙11选五开奖结果85 北京赛车微信群 贵州11选5兑奖规则 湖北11选5奖金是什么样