第一節(jié) 網(wǎng)頁布局的步驟和基本原則
教學(xué)課題：網(wǎng)頁布局的步驟和基本原則
教學(xué)目標(biāo)：1、了解網(wǎng)頁布局的基本原則
2、掌握網(wǎng)頁布局的步驟
教學(xué)重點(diǎn)：理解網(wǎng)頁布局的步驟
教學(xué)難點(diǎn)：網(wǎng)頁布局的基本原則的區(qū)別和聯(lián)系
教學(xué)方法：教師講授法、任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：1節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
【技能要點(diǎn)】
- 網(wǎng)頁布局的步驟
- 網(wǎng)頁布局的基本原則
【知識(shí)點(diǎn)詳解】
- 網(wǎng)頁布局的步驟
(1) 構(gòu)思
根據(jù)網(wǎng)站的內(nèi)容整體風(fēng)格，設(shè)計(jì)版面布局。
(2) 初步填充內(nèi)容
這一步就要把一些主要的內(nèi)容放到網(wǎng)頁中，例如網(wǎng)站的標(biāo)志、廣告條、菜單、導(dǎo)航條、計(jì)數(shù)器等，要注意重點(diǎn)突出，把網(wǎng)站標(biāo)志、廣告條、菜單放在最突出、最醒目的位置，然后再考慮其它元素的放置。
(3) 細(xì)化
在將各主要元素確定好之后，下面就可以考慮文字、圖像、表格等頁面元素的排版布局。
- 網(wǎng)頁排版布局的基本原則
- 平衡性
- 對(duì)稱性
- 對(duì)比性
- 疏密度
- 比例
【作業(yè)】
了解網(wǎng)頁布局的步驟和基本原則
第二節(jié) AP Div基礎(chǔ)
教學(xué)課題：AP Div基礎(chǔ)
教學(xué)目標(biāo)：1、了解“AP Div”的含義
2、掌握“AP Div”的使用方法
教學(xué)重點(diǎn)：創(chuàng)建“AP Div”的方法
教學(xué)難點(diǎn)：設(shè)置“AP Div”的屬性
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例1：使用AP Div排版
【需求分析】
根據(jù)頁面所需要的AP Div，給每個(gè)AP Div中添加內(nèi)容，制作一個(gè)完整的利用AP Div布局的網(wǎng)頁。
【技能要點(diǎn)】
- 插入AP Div的方法
- AP Div中各個(gè)屬性的設(shè)置
【操作步驟】
- 執(zhí)行【文件】|【打開】命令，打開“QQ秀.html”頁面，并新建站點(diǎn)。
- 單擊“插入”—>“布局對(duì)象” —>“AP Div”命令，在網(wǎng)頁中插入一個(gè)div元素。將該AP Div中插入圖像“image/3.jpg”，如圖10-1。
圖10-1
- AP Div的屬性面板如下圖10-2所示。
圖10-2
- 相同的制作方法，在剛剛插入圖像的AP Div下方再繪制三個(gè)AP Div，并設(shè)置這三個(gè)AP Div的屬性，在該AP Div中插入圖像。完成的效果圖如圖10-3所示。
圖10-3
- 此AP Div的屬性面板設(shè)置如圖10-4所示
圖10-4
演示案例2：利用AP Div溢出屬性排版
【需求分析】
當(dāng)AP Div中的內(nèi)容超過AP Div的指定大小時(shí)，可以使用AP Div的溢出屬性控制如何在瀏覽器中顯示AP Div 。
【技能要點(diǎn)】
- 設(shè)置AP Div的溢出屬性
【操作步驟】
- 執(zhí)行【文件】|【打開】命令，打開“AP Div溢出屬性.html”頁面，并新建站點(diǎn)。單擊“插入”面板選項(xiàng)卡中的“布局對(duì)象”下的“AP Div”，添加一個(gè)AP Div，如圖10-5所示。
圖10-5
- 選中剛插入的AP Div，在“屬性”面板上對(duì)其進(jìn)行設(shè)置，將光標(biāo)移至AP Div中，在該AP Div中輸入相應(yīng)的文字，效果如圖10-6所示。
圖10-6
- 再次選中AP Div，在“屬性”面板上對(duì)其屬性進(jìn)行設(shè)置，如圖10-13所示，此時(shí)的頁面效果如圖10-7所示。
圖10-13
圖10-7
- 執(zhí)行【文件】|【保存】命令，保存頁面。單擊“文檔”工具欄上得“在瀏覽器中預(yù)覽”（或按F12），在瀏覽器中預(yù)覽頁面，可以看到AP Div溢出排版的效果。如圖10-8所示。
圖10-8
【作業(yè)】
(1) 學(xué)生上機(jī)練習(xí)演示案例1，并學(xué)會(huì)插入AP Div的方法和設(shè)置屬性的方法。
(2) 學(xué)生上機(jī)練習(xí)演示案例2，學(xué)會(huì)利用AP Div溢出屬性排版
第三節(jié) 使用Spay Div構(gòu)件
教學(xué)課題：使用Spay Div構(gòu)件
教學(xué)目標(biāo)：1、了解Spay Div構(gòu)件的定義和種類
2、掌握設(shè)置Spay Div構(gòu)件的方法
教學(xué)重點(diǎn)：掌握各種Spay Div構(gòu)件的添加方法
教學(xué)難點(diǎn)：理解Spay Div各種構(gòu)件的區(qū)別
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法。
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例3：頁面中設(shè)置Spay菜單欄
【需求分析】
Spay菜單欄是一系列導(dǎo)航菜單，當(dāng)鼠標(biāo)指向某個(gè)按鈕時(shí)，可以彈出子菜單的項(xiàng)目。Spay菜單欄可以使頁面在有限的空間內(nèi)顯示大量的導(dǎo)航信息。
【技能要點(diǎn)】
- 插入Spay菜單欄的方法
- 設(shè)置Spay菜單欄的屬性
【操作步驟】
1 將光標(biāo)置于頁面中需要插入Spay菜單欄的位置，單擊插入”—>“布局對(duì)象” —>“Spay菜單欄”命令，彈出“Spay菜單欄”對(duì)話框，具體如圖10-9。
圖10-9
2 點(diǎn)擊“確定”按鈕，在頁面中插入Spay菜單欄，具體如圖：10-10所示。
圖10-10
3 設(shè)置菜單欄屬性
選中剛剛插入的Spay菜單欄，在“屬性”面板中可以對(duì)Spay菜單欄的相關(guān)屬性進(jìn)行設(shè)置，可以添加菜單項(xiàng)和刪除多余的菜單欄選項(xiàng)，如圖10-11所示。
圖10-11
在“屬性”面板中的“主菜單項(xiàng)列表”框中選中“項(xiàng)目1”，可以看到其“子菜單項(xiàng)列表”框中看到該菜單項(xiàng)下的子菜單項(xiàng)。單擊 
中的“+”可以添加子菜單項(xiàng)，單擊“-”可以減少子菜單項(xiàng)。
最后的“屬性”面板的設(shè)置如圖10-12所示。
圖10-12
5 保存頁面，在瀏覽器中預(yù)覽頁面，可以看到Spay 菜單欄的顯示效果，如圖10-12所示。
圖10-12
演示案例4：頁面中設(shè)置Spay選項(xiàng)卡式面板
【需求分析】
Spay選項(xiàng)卡式面板構(gòu)件是一組面板，用來將內(nèi)容放置在緊湊的空間中，瀏覽者可以通過單擊面板選項(xiàng)卡，來隱藏或顯示放置在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)瀏覽者單擊不同的選項(xiàng)卡時(shí)，會(huì)打開構(gòu)件相應(yīng)的面板。
【技能要點(diǎn)】
- 插入Spay選項(xiàng)卡式面板的方法
- 設(shè)置Spay選項(xiàng)卡式面板的屬性
【操作步驟】
1 將光標(biāo)置于頁面中需要插入Spay選項(xiàng)卡式面板的位置，單擊插入”—>“布局對(duì)象” —>“Spay選項(xiàng)卡式面板”命令，插入一個(gè)“Spay選項(xiàng)卡式面板”，具體如圖10-13所示。
圖10-13
2 設(shè)置菜單欄屬性
選中剛剛插入的Spay選項(xiàng)卡式面板，在“屬性”面板中可以對(duì)Spay選項(xiàng)卡式面板的相關(guān)屬性進(jìn)行設(shè)置，屬性面板如圖10-14所示。
圖10-14
3 更改選項(xiàng)卡式面板中的內(nèi)容，點(diǎn)擊“標(biāo)簽2”旁邊的“眼睛”標(biāo)記，可以更改“標(biāo)簽2”的對(duì)應(yīng)的相關(guān)內(nèi)容，如圖10-15所示。
圖10-15
4 一步步的更改相關(guān)的面板，最后的設(shè)置如圖10-16所示。
圖10-16
5 保存頁面，在瀏覽器中預(yù)覽頁面，可以看到Spay 選項(xiàng)卡式面板的顯示效果，如圖10-17所示。
圖10-17
演示案例5：頁面中設(shè)置Spay折疊式面板
【需求分析】
Spay折疊式面板是一級(jí)可折疊的面板，同樣可以將大量頁面內(nèi)容放置在一個(gè)緊湊的頁面空間中。瀏覽者可以通過單擊該面板上的選項(xiàng)卡，來隱藏或顯示放置在折疊式構(gòu)件中的內(nèi)容。當(dāng)瀏覽者單擊不同的選項(xiàng)卡時(shí)，折疊式構(gòu)件的面板會(huì)相應(yīng)展開或收縮。
【技能要點(diǎn)】
- 插入Spay折疊式面板的方法
- 設(shè)置Spay折疊式面板的屬性
【操作步驟】
1 在Dreamweaver CS5中打開素材“Spay折疊式面板.html”，如圖10-18所示,并建立相應(yīng)的站點(diǎn)。
圖10-18
2 將光標(biāo)置于頁面中需要插入Spay折疊式面板的位置，單擊插入”—>“布局對(duì)象” —>“Spay折疊式面板”命令，插入一個(gè)“Spay折疊式面板”，具體如圖10-19所示。
圖10-19
3 將“標(biāo)簽1”內(nèi)容改為“糖果樹產(chǎn)品一”，將“內(nèi)容1”刪除掉，插入圖片“cafe01.jpg”，如圖10-20所示。
圖10-20
5 保存頁面，在瀏覽器中預(yù)覽頁面，可以看到Spay 折疊式面板的顯示效果，如圖10-21所示。
圖10-21
演示案例6：頁面中設(shè)置Spay工具提示
【需求分析】
當(dāng)用戶將鼠標(biāo)指針移至網(wǎng)頁中的某個(gè)特定元素上是，Spay工具提示會(huì)顯示該特定元素的其他信息內(nèi)容。用戶移開鼠標(biāo)時(shí)，其他內(nèi)容會(huì)消失，從而使頁面中的交互效果更佳突出。
【技能要點(diǎn)】
- 插入Spay工具提示的方法
- 設(shè)置Spay工具提示的屬性
【操作步驟】
1 在Dreamweaver CS5中打開素材“Spay工具提示.html”，并建立相應(yīng)的站點(diǎn)。
2 選中圖片，單擊插入”—>“Spay” —>“Spay工具提示”命令，插入一個(gè)“Spay工具提示面板”，具體如圖10-22所示。
圖10-22
3 Spay工具提示的“屬性”面板如圖10-23所示。
圖10-23
4 更改設(shè)計(jì)視圖中的相應(yīng)位置，如圖10-24所示。
圖10-24
5 保存頁面，在瀏覽器中預(yù)覽頁面，可以看到Spay 折疊式面板的顯示效果，如圖10-25所示。
圖10-25
【作業(yè)】
學(xué)生上機(jī)實(shí)現(xiàn)演示案例3-6的各個(gè)技能點(diǎn)，并學(xué)會(huì)實(shí)現(xiàn)Spay Div的各種構(gòu)件。
第四節(jié) 綜合案例
教學(xué)課題：綜合案例
教學(xué)目標(biāo)：利用綜合案例考察本章所學(xué)知識(shí)點(diǎn)
教學(xué)重點(diǎn)：AP Div的設(shè)置和構(gòu)件的使用
教學(xué)難點(diǎn)：CSS樣式和AP Div布局配合制作頁面
教學(xué)方法：任務(wù)驅(qū)動(dòng)法、小組合組學(xué)習(xí)法
教學(xué)課時(shí)：2節(jié)
教學(xué)過程：
1、導(dǎo)入：略
2、講解新課
演示案例7：綜合案例--制作個(gè)人博客頁面
【需求分析】
根據(jù)之前學(xué)過的添加AP Div的方法和插入構(gòu)件的方法，將綜合案例中的各部分內(nèi)容分塊制作，運(yùn)用的知識(shí)包括：
(1) AP Div的基礎(chǔ)知識(shí)
(2) 使用AP Div布局頁面
(3) 利用AP Div溢出屬性布局頁面
(4) 使用Spay Div構(gòu)件
【技能要點(diǎn)】
- 用AP Div布局頁面中的“會(huì)員登錄”模塊
- 用Div構(gòu)件制作導(dǎo)航欄
- 插入Spay選項(xiàng)卡式面板
【操作步驟】
1 設(shè)置整個(gè)頁面背景顏色：#66CCCC
2 標(biāo)題用CSS樣式： 字體大?。?0px 字體顏色：#678275 字體：Verdana, Geneva, sans-serif，如圖10-26所示。
圖10-26
3 插入圖片head.png，將此圖片用CSS樣式做成透明效果，提示：(Alpha：透明度85，漸變樣式：X型漸變)
插入Spay選項(xiàng)卡式面板，如圖10-27所示。
首 頁：首頁內(nèi)容
服務(wù)介紹：成功案例 博客鏈接 博客好友
業(yè)務(wù)介紹：業(yè)務(wù)咨詢 業(yè)務(wù)總結(jié) 個(gè)性化業(yè)務(wù)
聯(lián)系我們：聯(lián)系電話 關(guān)于我們
圖10-27
4 用AP Div布局制作上圖所示的部分，如圖10-28所示
背景圖片為：1.jpg
水平線為白色，寬度：200px
圖10-28
5 將此部分做成“浮動(dòng)框架”。開始鏈接的效果如圖，具體文字在“文本.txt”中，如圖10-29所示。
<iframe>標(biāo)簽：框架高度height：300px 框架寬度width：600px
框架邊框frameborder：0 滾動(dòng)條scrolling：auto
名字name：me 開始鏈接src
圖10-29
6 此部分做成相冊(cè)文件，當(dāng)點(diǎn)擊第一張照片，在上面的浮動(dòng)框架顯示大圖片，顯示效果如圖“完成圖2.jpg”所示。(提示：此處需要新建一個(gè)頁面，在浮動(dòng)框架中設(shè)置鏈接此頁面)，如圖10-30所示。
圖10-30
7 整個(gè)頁面利用行為設(shè)置“彈出信息”，文字為“歡迎來到淘寶網(wǎng)”。
8 在表單“提交”按鈕上面添加行為，檢查表單，要求姓名和密碼必須值不為空。如果為空，將彈出如圖所示的對(duì)話框。如圖10-31所示。
圖10-31
9 提交按鈕有“提交”功能，取消按鈕有“重置”功能。
10 網(wǎng)頁上方“轉(zhuǎn)到頁尾”和“關(guān)閉”，在頁尾插入錨點(diǎn)，點(diǎn)擊“轉(zhuǎn)到頁尾”可以跳轉(zhuǎn)到頁尾，單擊“關(guān)閉”，如下圖所示彈出對(duì)話框：
圖10-32
【作業(yè)】
學(xué)生上機(jī)完成綜合案例--制作個(gè)人博客頁面。
