第8章-使用層和Spry(完成)

高等學校計算機應用規(guī)劃教材《網(wǎng)頁設計與制作基礎(chǔ)教程》第8章使用層和Spry(完成)ppt課件（全）第八

章使用層和Spry第8章使用層和Spry(完成)ppt課件（全）學習目標層(AP?Div)用于網(wǎng)頁元素的精確定位，層的使用非常廣泛，可以定位頁面上的任意位置，在層中可以插入各種元素。Spry相對于一個JavaScript框架庫，使用它可以靈活創(chuàng)建各種豐富的網(wǎng)頁框架效果。本章主要介紹有關(guān)層和Spry框架的詳細使用方法.:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::本章重點

層的基本作用

層的基本操作轉(zhuǎn)換表格和層使用Spry框架:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1使用層層是帶有CSS樣式的Div或Span代碼，用于網(wǎng)頁元素的精確定位。由于一個頁面中可以擁有多個層，而不同的層之間可以相互重疊，并能通過設置透明度來決定每個層是否可見或可見的程度，所以層可用來實現(xiàn)許多特效。層簡介

創(chuàng)建層操作層設置層轉(zhuǎn)化表格和層使用層規(guī)劃網(wǎng)頁布局

:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.1層簡介

層就像是包含文字或圖像等元素的膠片，按順序疊放在一起，組合成頁面的最終效果。層可以精確地定位頁面上的元素，并且在層中可以加入文本、圖像、表格、插件等元素，還可以插入嵌套層。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.2創(chuàng)建層

在網(wǎng)頁文檔中插入層后，在“代碼”視圖中會自動插入HTML標簽。層的常用標簽有<Div>和<Span>兩種，默認是使用<Div>標簽來插入層。本節(jié)將介紹在網(wǎng)頁中插入普通層、嵌套層以及繪制層的具體方法。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.3操作層

在Dreamweaver中選擇“窗口”|“AP元素”命令，打開“AP元素”面板。在該面板中顯示了網(wǎng)頁文檔中所有插入的層，如圖8-3所示，用戶可以通過其管理網(wǎng)頁文檔中的所有插入的層元素（防止重疊，更改層的可見性，嵌套或堆疊層等）。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.4設置層

在Dreamweaver中，用戶除了可以對層執(zhí)行一些基本操作以外，還可以設置層在頁面中的狀態(tài)，例如排列層、對齊層、隱藏層等。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.5轉(zhuǎn)化表格和層

要改變網(wǎng)頁中各元素的布局，最方便的方法就是將元素置于層內(nèi)，然后通過移動層來改變網(wǎng)頁的布局。要使用這種方法改變網(wǎng)頁布局，首先要將表格轉(zhuǎn)換為層。DreamweaverCS5允許使用層來創(chuàng)建布局，然后將層轉(zhuǎn)換為表格，以使網(wǎng)頁能夠在瀏覽器中正確瀏覽；也可以將網(wǎng)頁中的表格轉(zhuǎn)換為層。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.1.6使用層規(guī)劃網(wǎng)頁布局

一些非常復雜的網(wǎng)頁如果仍然使用表格來布局網(wǎng)頁的話，這將是一個非常大的工作量，而且將來修改起來會很麻煩。當我們要布局一個多元素的網(wǎng)頁的時候，可以使用層來布局。下面將通過一個實例來介紹使用層來布局網(wǎng)頁的方法。:::::《計算機基礎(chǔ)與實訓教材系列》系列叢書官方網(wǎng)站http://edu:::::8.2使用Spry布局對象Spry框架是一個JavaScript庫，使用它可以創(chuàng)建更豐富的網(wǎng)頁。可以使用HTML、CSS和一些JavaScript將XML數(shù)據(jù)合并到HTML文檔中、創(chuàng)建構(gòu)件、向各種網(wǎng)頁元素添加不同種類的效果等。使用Spry菜單

使用Spry