《網(wǎng)頁設(shè)計與制作DreamWeaver》教案

《網(wǎng)頁設(shè)計與制作DreamWeaver》教案,網(wǎng)頁設(shè)計與制作DreamWeaver,網(wǎng)頁,設(shè)計,制作,dreamweaver,教案 第一講　優(yōu)秀網(wǎng)站賞析 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第一講優(yōu)秀網(wǎng)站賞析 課時 2學(xué)時 教學(xué)目的 （1）了解各種類型網(wǎng)頁的布局結(jié)構(gòu)、色彩搭配 （2）對網(wǎng)頁有一個初步的印象，激發(fā)學(xué)習(xí)網(wǎng)頁制作的興趣 知識目標(biāo) （1）賞析各種經(jīng)典網(wǎng)頁 （2）對網(wǎng)頁的布局結(jié)構(gòu)、色彩搭配形成初步印象 能力目標(biāo) （1）對網(wǎng)頁的設(shè)計與制作形成感性認(rèn)識 （2）激發(fā)學(xué)習(xí)興趣 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生的創(chuàng)新能力與獨(dú)立思考能力，并使其具有分析問題、解決問題的能力。 重點(diǎn) （1）網(wǎng)頁的布局結(jié)構(gòu) （2）網(wǎng)頁的色彩搭配 難點(diǎn) （1）如何使學(xué)生對網(wǎng)頁設(shè)計感興趣 課型 講授型＋演示型 教學(xué)方法 邊講解、邊展示、邊欣賞 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)站設(shè)計與網(wǎng)頁配色》 教學(xué)環(huán)節(jié) 及 板書設(shè)計 時間安排 1．復(fù)習(xí)提問 了解本班學(xué)生以前是否有網(wǎng)頁設(shè)計方法的基礎(chǔ)，對網(wǎng)頁設(shè)計與制作是否有興趣 5 2．新課引入 設(shè)計網(wǎng)頁并不是一個十分復(fù)雜的過程，但是想要設(shè)計出合理而精美的網(wǎng)頁作品，需要經(jīng)過嚴(yán)謹(jǐn)?shù)睦硇苑治觥⒚翡J的觀察，以及感性的審美與創(chuàng)意技巧。 信息是網(wǎng)站核心，是網(wǎng)站設(shè)計的依據(jù)，分析和理解信息內(nèi)容是設(shè)計的起點(diǎn)也是終點(diǎn)。 色彩是網(wǎng)頁設(shè)計的靈魂之一，是最先也是最持久地印記在瀏覽者腦海中的網(wǎng)站印象。它對形成網(wǎng)站風(fēng)格設(shè)計、網(wǎng)站氣氛等感覺性設(shè)計的作用非常大。 合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強(qiáng)網(wǎng)站的吸引力。 5 3．知識技能目標(biāo)說明 5 4．網(wǎng)頁展示 　瀏覽優(yōu)秀的網(wǎng)站，對這些網(wǎng)站的主頁進(jìn)行分析，了解優(yōu)秀網(wǎng)頁的布局結(jié)構(gòu)、色彩搭配、導(dǎo)航欄的設(shè)計、動畫效果等。 15 5．網(wǎng)頁賞析 對各個網(wǎng)站的信息內(nèi)容、網(wǎng)頁布局結(jié)構(gòu)、色彩搭配進(jìn)行分析、說明 25 6．課堂實(shí)踐 15 7．課堂討論 組織學(xué)生討論，對所展示的網(wǎng)站發(fā)表自己見解 5 8.疑難解析 5 9．課堂小結(jié) （1）網(wǎng)站是信息內(nèi)容的存儲空間模式，它像一個放置信息的“柜子”，有著很多“格子”和“抽屜”，網(wǎng)站還是信息空間的外包裝，是“柜子”本身。 （2）色彩搭配是頁面中刺激記憶最初、最持久的元素，失去色彩，人們會失去快樂的心情、娛樂的氣氛，色彩是人們生活多姿多彩的表現(xiàn)，是互聯(lián)網(wǎng)生機(jī)的來源。 （3）合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強(qiáng)網(wǎng)站的吸引力。導(dǎo)航是引人注目的，瀏覽者進(jìn)行網(wǎng)站，首先尋找導(dǎo)航條 5 10．作業(yè)布置 5 總計 90 新授內(nèi)容 網(wǎng)頁展示 （1）軟件項目化精品課程 （2）C語言程序設(shè)計精品課程 （3）剪紙社團(tuán)網(wǎng)站 （4）書法協(xié)會網(wǎng)站 （5）我行我攝影網(wǎng)站 課堂實(shí)踐 瀏覽幾個網(wǎng)站，對所瀏覽網(wǎng)站首頁的特色和不足進(jìn)行賞析說明，主要包括頁面布局結(jié)構(gòu)、顏色搭配、導(dǎo)航欄、文字效果、圖片效果、動畫效果等。從以下網(wǎng)站中選擇兩個網(wǎng)站進(jìn)行賞析。 （1）海爾集團(tuán)網(wǎng)站：www.haier.com（企業(yè)網(wǎng)站） （2）旅游類網(wǎng)站：www.fhvip.com（旅游網(wǎng)站） （3）中國大眾體育網(wǎng)：www.chinasfa.net（體育網(wǎng)站） （4）新東方教育：www.neworiental.org（教育網(wǎng)站） （5）武漢理工大學(xué)海事二班：www.haishi0302.com（班級網(wǎng)站） 疑難解析 問題1：如何上網(wǎng)瀏覽網(wǎng)站？ 問題2：如果不知道某個網(wǎng)站的網(wǎng)址，怎樣獲得該網(wǎng)站的網(wǎng)址或?yàn)g覽該網(wǎng)站？ 課外 拓展 1.瀏覽以下網(wǎng)站，分析這些網(wǎng)站首頁的物色和不足。 （1）天津大學(xué)網(wǎng)站：www.tju.edu.cn （2）易趣網(wǎng)：www.ebay.com.cn （3）木葉之家個人網(wǎng)：zhangrui.haocool.net （4）求職網(wǎng)：www.51job.com （5）開心購物網(wǎng)：www.aroundsuzhou.com （6）湖南張家界旅游網(wǎng)：www.zjjok.com （7）曙光人才網(wǎng)：www.twinssusccess.cn 2.利用搜索引擎查找四川長虹集團(tuán)、深圳TCL集團(tuán)、九天音樂網(wǎng)的網(wǎng)址。 課后作業(yè) 上網(wǎng)找5個風(fēng)站，說明其信息類型、色彩搭配、網(wǎng)站布局結(jié)構(gòu) 課后評析 第二講　網(wǎng)頁制作基礎(chǔ) 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第二講　網(wǎng)頁制作基礎(chǔ) 課時 2學(xué)時 教學(xué)目的 （1）了解網(wǎng)頁制作的基礎(chǔ)知識和相關(guān)概念 （2）熟悉Dreamweaver CS3的界面布局和工作環(huán)境 知識目標(biāo) （1）萬維網(wǎng)、網(wǎng)頁、網(wǎng)站、主頁和HTML的基本概念 （2）熟悉Dreamweaver CS3的界面布局和工作環(huán)境 能力目標(biāo) （1）熟悉Dreamweaver CS3的界面布局和工作環(huán)境 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生的創(chuàng)新能力與獨(dú)立思考能力，并使其具有分析問題、解決問題的能力。 重點(diǎn) （1）萬維網(wǎng)、網(wǎng)頁、網(wǎng)站、主頁和HTML的基本概念 難點(diǎn) （1）Dreamweaver CS3幫助系統(tǒng)的使用 課型 講授型＋操作型 教學(xué)方法 邊講、邊練、講練結(jié)合 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作教程》 人民郵電出版社 教學(xué)環(huán)節(jié) 及 板書設(shè)計 時間安排 1．復(fù)習(xí)提問 請列出你經(jīng)常上過的幾個網(wǎng)站 2 2．新課引入 你知道WWW代表什么嗎？什么是網(wǎng)頁的源代碼嗎？一般包含那些元素？ 3 3．項目展示 展示各類經(jīng)典網(wǎng)站的網(wǎng)頁 7 4．知識技能目標(biāo)說明 要學(xué)習(xí)網(wǎng)頁制作，先要了解網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識 5 5．網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識 網(wǎng)頁的基本構(gòu)成元素 45 6．問題探討 怎樣使用Dreamweaver CS3的幫助系統(tǒng)搜索特定短語？ 5 7．課堂實(shí)踐 12 8．提問與討論 6 9.課堂小結(jié) 3 10．作業(yè)布置 2 總計 90 新授內(nèi)容 一、網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識 1、WWW 2、URL 3、Server與Browser 4、網(wǎng)頁 5、網(wǎng)站 6、Hypertext 7、HTTP 8、HTML 9、CSS 二、網(wǎng)頁的基本構(gòu)成元素 1、文本 2、圖像 3、超級鏈接 4、導(dǎo)航欄 5、動畫 6、表格 7、框架 8、表單 三、制作網(wǎng)頁的工具概述 （1）制作網(wǎng)頁的專門工具： （2）圖像處理工具： （3）動畫制作工具 （4）圖標(biāo)制作工具 （5）抓圖工具 （6）網(wǎng)站發(fā)布工具 四、初識Dreamweaver CS3中文版 1、Dreamweaver CS3簡介 2、Dreamweaver CS3工作環(huán)境 3、Dreamweaver CS3的幫助系統(tǒng) 課堂實(shí)踐 （1）啟動Dreamweaver CS3，認(rèn)識Dreamweaver CS3的工作環(huán)境。 （2）在Dreamweaver CS3主窗口中觀察其各個菜單、工具欄、面板的組成。 （3）利用Dreamweaver CS3的幫助，查找有關(guān)“JavaScript”的內(nèi)容，請分別利用“目錄”、“索引”、“搜索”三種途徑完成。 疑難解析 問題1：什么是URL？　 問題2：URL格式是什么形式？ 課外拓 展實(shí)踐 熟悉Dreamweaver CS3的工作環(huán)境 熟練使用Dreamweaver CS3的幫助系統(tǒng) 作業(yè) 使用Dreamweaver CS3的幫助系統(tǒng)搜索CSS 課后評析 第三講　站點(diǎn)創(chuàng)建與管理 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第三講站點(diǎn)的創(chuàng)建與管理 課時 2學(xué)時 教學(xué)目的 掌握站點(diǎn)的創(chuàng)建與管理 知識目標(biāo) （1）掌握“文件”面板的使用方法 （2）掌握站點(diǎn)的創(chuàng)建方法 （3）掌握站點(diǎn)的管理方法 能力目標(biāo) 熟記創(chuàng)建站點(diǎn)的流程，掌握站點(diǎn)管理的方法 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生的獨(dú)立思考能力，通過思考管理站點(diǎn)及布局美觀的網(wǎng)頁，培養(yǎng)學(xué)生分析問題、解決問題的能力 重點(diǎn) （1）站點(diǎn)的創(chuàng)建與管理 難點(diǎn) （1）站點(diǎn)的創(chuàng)建與管理 課型 講授型＋操作型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作教程》 人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1．復(fù)習(xí)提問：網(wǎng)頁的基本構(gòu)成元素有哪些？ 5 2．新課引入 通過講述上網(wǎng)的知識，引出上網(wǎng)時要用的網(wǎng)站，從而把本次課要學(xué)的知識點(diǎn)帶給學(xué)生 5 3．知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 6 4．講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 42 5．課堂實(shí)踐 15 6．問題探討：與學(xué)生一起引申問題留作思考 5 7.疑難解析： 5 8．歸納總結(jié)： 本節(jié)學(xué)習(xí)了如何創(chuàng)建站點(diǎn)和管理站點(diǎn)，同時也分析了網(wǎng)頁文檔的基本操作和“資源”面板、“文件”面板的使用方法。 5 9．作業(yè)布置 2 總計 90 新授內(nèi)容 1、站點(diǎn)的創(chuàng)建 (1)認(rèn)識“文件”面板 (2)創(chuàng)建本地站點(diǎn) 2、站點(diǎn)管理 切換、編輯、復(fù)制、刪除、導(dǎo)入站點(diǎn) 3、管理網(wǎng)站中的文件和文件夾 創(chuàng)建文件夾和文件、移動和復(fù)制文件、重命名文件夾和文件、刪除文件夾和文件。 4、用案例介紹本地站點(diǎn)的創(chuàng)建方法 動手操作在Dreamweaver CS3中創(chuàng)建站點(diǎn) 5、使用“資源”面板管理網(wǎng)站中的資源 （1）使用“資源”面板 （2）在頁面中使用資源 （3）選擇和編輯資源 （4）頁面的屬性設(shè)置 6、網(wǎng)頁文檔的基本操作 （1） 創(chuàng)建網(wǎng)頁文檔 （2） 打開網(wǎng)頁文檔 （3） 關(guān)閉網(wǎng)頁文檔 案例1：創(chuàng)建我的足球網(wǎng) 操作步驟： 1. 規(guī)劃站點(diǎn) 1） D:\myfootball。 2） 網(wǎng)站名“我的足球網(wǎng)”，包括3個欄目“我與足球”、“足球新聞”、“足球明星相片”，分別存放在根目錄下的aboutme、news、photo文件夾中。 3） 圖像素材放在image中。 2. 新建站點(diǎn) 1） 站點(diǎn)/新建站點(diǎn) 2） 站點(diǎn)定義：myfootball 3） 選擇默認(rèn)選項“否，我不想使用服務(wù)器技術(shù)” 4） 站點(diǎn)路徑：D:\myfootball 5） 在“您如何連接到遠(yuǎn)程服務(wù)器”選擇“無”選項 3. 在“文件”面板中管理文件 1） 在“文件”面板中的“站點(diǎn)-myfootball”，右鍵/新建文件/創(chuàng)建“untitled.htm”，改為“index.htm” 2） 右鍵站點(diǎn)/新建文件夾/創(chuàng)建四個文件夾：aboutme、news、photo、image 3） 在aboutme、news、photo這三個文件中分別再建3個網(wǎng)頁文件me.htm，photo.htm，news.htm，作為首頁文件的3個鏈接指向。 4. 編輯首頁文件 雙擊“文件”面板上的index.htm文件，下面介紹“我的足球網(wǎng)”的首頁文件的編輯方法。 1） 頁面屬性或修改/頁面屬性 2） 背景顏色/綠色 3） 輸入“我的足球網(wǎng)” 4） 在下方插入一個1行2列的表格，插入/表格，表格寬度：550，其它全為0 5） 光標(biāo)在第1列中，插入/圖像/將ch1/MAN.jpg，放入myfootball\image中 6） 在表格第2列中，分3行，依次輸入“我與足球”、“足球新聞”、“足球明星相片”，并在下一行處插入另一張圖像素材。 7） 將光標(biāo)移至表格的下一行，輸入“本網(wǎng)站最后更新時間”/插入/日期，選中“儲存時自動更新”，將其居中。 8） 選擇“我的足球網(wǎng)”/“屬性”面板中格式“標(biāo)題1”，色彩：#FF9900，將網(wǎng)頁標(biāo)題居中 9） 制作欄目鏈接，分別鏈接me.htm，photo.htm，news.htm，注意：3個頁面中要設(shè)置返回的超鏈接。 課堂實(shí)踐 （1）創(chuàng)建一個命名為“課堂實(shí)踐”的靜態(tài)網(wǎng)站，該網(wǎng)站的所有文件存儲在本機(jī)上E盤的“ClassroomPractise”文件夾中。 （2）在“文件面板”的站點(diǎn)根目錄下創(chuàng)建一個文件夾“00創(chuàng)建站點(diǎn)”。 （3）在文件夾“00創(chuàng)建站點(diǎn)”中創(chuàng)建三個子文件夾“image”、“music”和“text”。 （4）在文件夾“00創(chuàng)建站點(diǎn)”中創(chuàng)建一個命名為“00.html”的網(wǎng)頁文檔。 （5）將所需的圖像文件和音樂文件分別復(fù)制到“image”和“music”文件夾中。 疑難解析 問題1：在“文件”面板中，選擇一個已創(chuàng)建的文件夾或文件，然后單擊右鍵會彈出一個快捷菜單，鼠標(biāo)指針指向“編輯”菜單項，會顯示其級聯(lián)菜單，該級聯(lián)菜單包括了“拷貝”和“復(fù)制”兩個菜單項，這兩個菜單項有何區(qū)別呢？ 問題2：在“資源”面板中如何改變資源排列的次序？ 課外拓 展實(shí)踐 按照所學(xué)的站點(diǎn)創(chuàng)建方法創(chuàng)建一個個人網(wǎng)站 課后評析 第四講　頁面的整體控制 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第四講頁面的整體控制 課時 2學(xué)時 教學(xué)目的 掌握Dreamweaver CS3的參數(shù)、網(wǎng)頁頁面屬性的設(shè)置方法 知識目標(biāo) （1）了解Dreamweaver CS3的參數(shù)設(shè)置方法 （2）掌握頁面屬性的設(shè)置方法 （3）掌握設(shè)置文件頭內(nèi)容的方法 （4）學(xué)習(xí)輔助工具的使用 能力目標(biāo) （1）掌握Dreamweaver CS3的參數(shù)、網(wǎng)頁頁面屬性的設(shè)置方法 （2）學(xué)習(xí)輔助工具的使用 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生創(chuàng)新能力和獨(dú)立思考能力，并使其具有分析問題、解決問題的能力 重點(diǎn) 頁面屬性的設(shè)置、輔助工具的使用 難點(diǎn) 輔助工具的使用 課型 講授型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作》教程人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1.復(fù)習(xí)提問： 創(chuàng)建站點(diǎn)前為何要先建立本地文件夾？ 5 2.新課引入 通過復(fù)習(xí)上次課內(nèi)容，引入本次課要學(xué)的“頁面的整體控” 5 3.知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 5 4.講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 34 5.課堂實(shí)踐 15 6.問題探討：與學(xué)生一起引申問題留作思考 5 7．疑難解析 8 8.歸納總結(jié)： 通過學(xué)習(xí)設(shè)置首選參數(shù)、頁面屬性、文件頭內(nèi)容，輔助工具的使用。掌握從外觀上對頁面進(jìn)行有效控制，方便網(wǎng)頁的制作和瀏覽。頁面整體控制的方法，除了設(shè)置常規(guī)的背景顏色、背景圖片等屬性之外，Dreamweaver CS3還有輔助線、縮放等常用且必備的功能，掌握好這些基本工具的使用，有助于我們更好的制作網(wǎng)頁。 5 9．作業(yè)布置 3 總計 90 新授內(nèi)容 1.參數(shù)設(shè)置 打開“首選參數(shù)”對話框 參數(shù)設(shè)置方法 參數(shù)設(shè)置舉例 2．設(shè)置頁面屬性 打開“頁面屬性”對話框 設(shè)置外觀屬性 設(shè)置鏈接屬性 設(shè)置標(biāo)題屬性 設(shè)置標(biāo)題/編碼屬性 設(shè)置跟蹤圖像 在瀏覽器中瀏覽網(wǎng)頁 3．設(shè)置文件頭內(nèi)容 在“設(shè)計”視圖中顯示“文件頭內(nèi)容”工具欄 設(shè)置文件頭內(nèi)容的方法 4．輔助工具的使用 配置窗口大小 使用標(biāo)尺、網(wǎng)格、輔助線 課堂實(shí)踐 操作要求 打開“課堂實(shí)踐”站點(diǎn)文件夾“01頁面控制”下的網(wǎng)頁文檔“01.html”，然后完成以下各項的操作。 （1）首選參數(shù)的設(shè)置要求 設(shè)置啟動Dreamweaver CS3時顯示起始頁；設(shè)置站點(diǎn)屬性“總是顯示本地文件于左”；創(chuàng)建網(wǎng)頁文檔時，設(shè)置默認(rèn)文檔為“HTML”文檔，設(shè)置默認(rèn)擴(kuò)展名為“.html”；設(shè)置“復(fù)制/粘貼”屬性：使用“編輯>粘貼”從其他應(yīng)用程序粘貼到設(shè)計視圖時，復(fù)制“帶結(jié)構(gòu)的文本”，不清理Word段落間距。 （2）頁面屬性的設(shè)置要求 ? 外觀屬性的設(shè)置 “頁面字體”采用“默認(rèn)字體”，“大小”采用“12px”；“背景圖像”選用image文件夾下的“bj01.jpg”；“左邊距”和“右邊距”設(shè)置為“100px”，“上邊距”和“下邊距”設(shè)置為“20px”。 ? 鏈接屬性的設(shè)置要求 網(wǎng)頁中超鏈接文本默認(rèn)狀態(tài)下的字體設(shè)置為“宋體”，字體大小設(shè)置為14px；網(wǎng)頁中超鏈接文本的顏色設(shè)置為“blue”，訪問過的超鏈接的顏色設(shè)置為“olive”；當(dāng)鼠標(biāo)指針移動到網(wǎng)頁中超鏈接文字上方時超鏈接的顏色設(shè)置為“maroon”，下劃線樣式設(shè)置為“變換圖像時隱藏下劃線”；網(wǎng)頁中已激活的超鏈接文本顏色設(shè)置為“fuchsia”。 ? 標(biāo)題屬性的設(shè)置要求 設(shè)置網(wǎng)頁中標(biāo)題的字體為“隸書”，標(biāo)題1的大小為“18px”，顏色為“aqua”。 ? “標(biāo)題/編碼”屬性的設(shè)置要求 網(wǎng)頁的標(biāo)題設(shè)置為“湘江谷”；文檔類型設(shè)置為“HTML4.0Transitional”，編碼設(shè)置為“簡體中文(GB2312)”。 疑難解析 問題1：本章4.3節(jié)設(shè)置文件頭內(nèi)容時，還可以插入“刷新”，如何插入呢？ 問題2：本章4.3節(jié)設(shè)置文件頭內(nèi)容時，也可以插入“基址”，如何插入呢？ 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)的文件夾“01頁面控制”中創(chuàng)建一個網(wǎng)頁文檔，命名為“01.html”。 2．對網(wǎng)頁01.html設(shè)置首選參數(shù)、設(shè)置頁面屬性、設(shè)置文件頭內(nèi)容。 課后評析 第五講　文本操作 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第五講文本操作 課時 2學(xué)時 教學(xué)目的 1．學(xué)會在網(wǎng)頁中輸入文本與編輯文本 2．掌握輸入空格和實(shí)現(xiàn)文本換行的方法。 3．學(xué)會在網(wǎng)頁中插入水平線和日期 4．掌握網(wǎng)頁文本格式化操作。 知識目標(biāo) 1．在網(wǎng)頁中輸入文本與編輯文本 2．輸入空格和實(shí)現(xiàn)文本換行的方法。 3．在網(wǎng)頁中插入水平線和日期 4．網(wǎng)頁文本格式化操作。 能力目標(biāo) 掌握網(wǎng)頁中文本的各項操作 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生創(chuàng)新能力和獨(dú)立思考能力，并使其具有分析問題、解決問題的能力 重點(diǎn) （1）網(wǎng)頁文本格式化操作 難點(diǎn) 網(wǎng)頁文本操作 課型 講授型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作》教程人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1. 復(fù)習(xí)提問： 怎樣設(shè)置一圖片作網(wǎng)頁背景？ 5 2.新課引入 通過復(fù)習(xí)上次課內(nèi)容“頁面的整體控制”，引入本次課要學(xué)的“網(wǎng)頁文本編輯” 5 3.知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 5 4.講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 39 5.課堂實(shí)踐 15 6.問題探討：與學(xué)生一起引申問題留作思考 5 7．疑難解析 8 8.歸納總結(jié)： 通過本次課的學(xué)習(xí)，我們要熟練掌握鍵入普通文本、特殊字符和插入日期的方法；了解項目列表和編號列表，并能更改列表屬性，熟練掌握對文本屬性和段落屬性的設(shè)置，可以使網(wǎng)頁更加豐富、祥實(shí)、美觀 5 9．作業(yè)布置 3 總計 90 新授內(nèi)容 1．網(wǎng)頁中輸入文本 輸入文字 輸入文本空格 實(shí)現(xiàn)文本換行 2．網(wǎng)頁中編輯文本 網(wǎng)頁中輸入的文本與Word一樣，也能進(jìn)行編輯，常見的文本編輯操作有： （1）拖動鼠標(biāo)選中一個或多個文字、一行或多行文本，也可以選中網(wǎng)頁中的全部文本。 （2）按BackSpace鍵或Delete鍵實(shí)現(xiàn)刪除文本操作。 （3）將光標(biāo)移動到需要插入文本的位置，輸入新的文本。 （4）實(shí)現(xiàn)復(fù)制、剪切、粘貼等操作。 （5）實(shí)現(xiàn)查找與替換操作。 （6）實(shí)現(xiàn)撤消或重做操作。 3．插入相關(guān)文本要素 插入特殊字符 插入文本列表 插入水平線 插入時間 插入注釋 4．文本的格式化 文本屬性面板 設(shè)置網(wǎng)頁中文本的格式 課堂實(shí)踐 操作要求 （1）輸入文本 打開“課堂實(shí)踐”網(wǎng)站中文件夾“02文本操作”中的網(wǎng)頁文檔“02.html”，輸入標(biāo)題“湘江谷”，然后輸入正文內(nèi)容。這些文字內(nèi)容存儲在文件夾“02文本操作”中子文件夾“text”的文本文件“02.txt”中。 （2）插入一條“水平線”和日期，日期格式如圖5-17所示。 （3）設(shè)置“主要景點(diǎn)”為列表格式。 （4）設(shè)置文本格式 ? 將網(wǎng)頁02.html中標(biāo)題“湘江谷”格式設(shè)置為“標(biāo)題1”，字體設(shè)置為“隸書”，大小設(shè)置為“36”，文字顏色設(shè)置為“aqua”，且要求水平居中。 ? 將網(wǎng)頁中標(biāo)題以下的正文，字體設(shè)置為“華文行楷”，大小設(shè)置為“16”。 ? 插入的日期字體設(shè)置為“楷體_GB2321”，大小設(shè)置為“18”，文字顏色設(shè)置為“#FF6600”，且要求水平居中。 疑難解析 問題1：按Enter鍵換行與按Shift+Enter組合鍵換行時，設(shè)置文本居中對齊的效果有何不同？ 問題2：輸入法為“半角”狀態(tài)時，直接按空格鍵是否也能連續(xù)輸入多個空格？ 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)中根目錄中創(chuàng)建文件夾“02文本操作”，然后在“02文本操作”文件夾中創(chuàng)建網(wǎng)頁“02.html”，且對該網(wǎng)頁的頁面屬性進(jìn)行必要的設(shè)置。 2．在網(wǎng)頁02.html中輸入學(xué)院系部的介紹信息，插入日期，且要求對文本設(shè)置不同的字體、大小和顏色。 課后評析 第六講　圖像操作 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第六講圖像操作 課時 2學(xué)時 教學(xué)目的 靈活地運(yùn)用圖像來為網(wǎng)頁添加各種效果 知識目標(biāo) （1）掌握圖像的插入方法。 （2）掌握圖像屬性的設(shè)置方法。 （3）掌握圖像與文本混合編排的方法。 （4）掌握插入鼠標(biāo)經(jīng)過圖像的方法，了解插入圖像占位符的方法。 能力目標(biāo) （1）圖像的插入。 （2）圖像屬性的設(shè)置。 （3）圖像與文本混合編排。 （4）插入鼠標(biāo)經(jīng)過圖像。 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生創(chuàng)新能力和獨(dú)立思考能力，并使其具有分析問題、解決問題的能力 重點(diǎn) 圖像屬性的設(shè)置、圖像與文本混合編排 難點(diǎn) 插入鼠標(biāo)經(jīng)過圖像的方法、插入圖像占位符 課型 講授型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作》教程人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1. 復(fù)習(xí)提問： 在半角輸入狀態(tài)，怎么樣才能連續(xù)輸入多個空格？ 5 2.新課引入 通過上次實(shí)驗(yàn)，可看出文本、圖片對頁面的潤色起著主要作用 5 3.知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 8 4.講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 40 5.課堂實(shí)踐： 15 6.問題探討：當(dāng)我們?yōu)g覽網(wǎng)頁時，常?？梢砸姷骄W(wǎng)頁題頭有不斷變換的圖像，是怎么實(shí)現(xiàn)的呢？ 5 7.疑難解析 5 8．歸納總結(jié)： 本次課主要學(xué)習(xí)了在頁面上插入普通圖像、插入鼠標(biāo)經(jīng)過圖像的方法；學(xué)會設(shè)置圖像的屬性；熟練調(diào)整圖像的位置及大小，尤其是在圖文混排時，要能夠很好地將它們對齊。在今后的網(wǎng)頁制作過程中，要能夠靈活地運(yùn)用圖像來為自己的網(wǎng)頁增添各種效果。 4 9．作業(yè)布置 3 總計 90 新授內(nèi)容 1.圖像概述 2．圖像操作 （1）插入圖像 （2）設(shè)置圖像屬性 （3）編輯圖像 3．插入相關(guān)圖像元素 （1）插入“鼠標(biāo)經(jīng)過圖像” （2）插入導(dǎo)航條 （3）插入圖像占位符 案例2：我與足球（me.htm） 操作步驟： 1、 新建或打開網(wǎng)頁 1） 打開D:\myfootball\me.html。 2） 把素材ch2中的圖片素材拷到image文件夾中。 2、 設(shè)置頁面屬性 1） 修改/頁面屬性：左、右、上、下邊距都設(shè)為0 2） 背景圖像：bg.jpg 3、 設(shè)置頭部信息 1） 標(biāo)題輸入：我與足球 2） 插入“作者”信息，插入記錄/HTML/文件頭標(biāo)簽/META/值：author，在“內(nèi)容”中輸入“李小東”，即自己的名字。 3） 插入“關(guān)鍵字”，插入記錄/HTML/文件頭標(biāo)簽/關(guān)鍵字，輸入“設(shè)計開發(fā)，教育培訓(xùn)，圖書出版，關(guān)于我們”關(guān)鍵字，并以逗號隔開。 4） 插入“說明”：“這里是“我與足球”網(wǎng)站”。 5） 插入“刷新” 6） 查看“代碼” 4、 添加頁面元素 1） 插入文本：將素材里me.txt文件中的內(nèi)容全部拷貝到me.html。將“我與足球”水平居中，字體設(shè)置“華文彩云”，大小24，顏色為#999900，粗體，斜體。 2） 插入橫幅圖像：替代文本為“我的足球網(wǎng)” 3） 圖文混排：在左邊插入圖像girl.jpg，左對齊，垂直與水平邊距均為10， 4） 圖像的編輯：右擊可以借助計算機(jī)里有的圖像編輯器來編輯圖像。 5） 插入“鼠標(biāo)經(jīng)過圖像”效果：插入/圖像對象/鼠標(biāo)經(jīng)過圖像，原始圖像：mtd5，鼠標(biāo)經(jīng)過圖像：mtd5_2 6） 插入水平線：插入/HTML/水平線 7） 插入/日期 8） 插入特殊字符：插入/ HTML/特殊字符 版權(quán)：最后更新日期：2011年9月2日星期五 Copyright ? 個人網(wǎng)站設(shè)計 5、 設(shè)置超鏈接 1） 將光標(biāo)放到網(wǎng)頁橫幅圖像的下一行，水平居中。 2） 輸入“主頁”、“明星照片”、“足球新聞”，將中文輸入法切換到全角方式，按空格鍵，輸入幾個連續(xù)的空格用來間隔文字。 3） 選中“主頁”鏈接index.htm，同樣設(shè)置其它鏈接。 課堂實(shí)踐 案例：再別康橋 1、合理安排圖像與文字的位置。 2、利用圖像編輯軟件，完成對圖片的藝術(shù)處理。 3、右下方的圖片具有鼠標(biāo)經(jīng)過后翻轉(zhuǎn)成另外一幅圖像的特點(diǎn)。 疑難解析 問題1：網(wǎng)頁中的圖文混排時，如何調(diào)整圖像與文字之間的間距？ 問題2：網(wǎng)頁中圖文混排時，如何創(chuàng)建文字環(huán)繞圖像的效果？ 課外拓展 在“我的足球網(wǎng)”站點(diǎn)文件夾“news”中創(chuàng)建一個網(wǎng)頁文檔“03.html”,內(nèi)容是關(guān)于足球新聞，然后插入圖片和文字，實(shí)現(xiàn)圖文混排效果。 課后評析 第七講　超級鏈接與導(dǎo)航欄 +授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第八講超級鏈接與導(dǎo)航欄 課時 2學(xué)時 教學(xué)目的 （1）掌握創(chuàng)建外部鏈接和內(nèi)部鏈接的操作方法。 （2）掌握制作圖像映射的操作方法。 （3）掌握創(chuàng)建E-mail鏈接的操作方法。 （4）掌握測試鏈接的有效性的操作方法。 知識目標(biāo) （1）創(chuàng)建外部鏈接和內(nèi)部鏈接。 （2）制作圖像映射。 （3）創(chuàng)建E-mail鏈接。 （4）測試鏈接的有效性。 能力目標(biāo) （1）創(chuàng)建常用超鏈接、導(dǎo)航欄 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生的創(chuàng)新能力與獨(dú)立思考能力，并使其具有分析問題、解決問題的能力。 重點(diǎn) （1）常用超鏈接的創(chuàng)建方法 難點(diǎn) （1）模板 課型 講授型＋操作型 教學(xué)方法 邊講、邊練、講練結(jié)合 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作教程》 人民郵電出版社 教學(xué)環(huán)節(jié) 及 板書設(shè)計 時間安排 1．復(fù)習(xí)提問 鼠標(biāo)經(jīng)過圖像與導(dǎo)航條有何區(qū)別？ 2 2．新課引入 網(wǎng)頁中的鏈接是怎樣建立的呢？常見的鏈接有哪些？ 3 3．知識技能目標(biāo)說明 為文字添加字幕效果，創(chuàng)建欄目、腳本、錨點(diǎn)、網(wǎng)站、E-mail、下載鏈接，更改鏈接顏色、打開方式，測試鏈接有效性 5 4．詳細(xì)講解各知識點(diǎn) 45 5．問題探討 添加滾動字幕、創(chuàng)建鏈接還有什么方法？ 5 6．課堂實(shí)踐 15 7．疑難解析 7 8．提問與討論 3 9.課堂小結(jié) 3 10.作業(yè)布置 2 總計 90 新授內(nèi)容 1.超級鏈接概述 （1）絕對路徑 （2）文檔目錄相對路徑 （3）站點(diǎn)根目錄相對路徑 2.創(chuàng)建超級鏈接創(chuàng)建站點(diǎn)和主頁 （1）新建網(wǎng)頁 （2）編輯網(wǎng)頁 （3）創(chuàng)建超級鏈接:創(chuàng)建外部鏈接、創(chuàng)建文本形式的內(nèi)部鏈接、制作圖像映射、創(chuàng)建E-mail鏈接 （4）鏈接檢查： 3．導(dǎo)航欄簡介 課堂案例3：編織網(wǎng)站鏈接——足球新聞（news.htm） 操作步驟： 1、 準(zhǔn)備網(wǎng)頁內(nèi)容 1） 將素材ch3\news.htm文檔復(fù)制到站點(diǎn)的news文件夾下,取代原來所創(chuàng)建的news.htm文檔。 2） 將素材ch3\image文件夾下所有文件，復(fù)制到站點(diǎn)的image文件夾下。 2、 創(chuàng)建內(nèi)部超鏈接 內(nèi)部鏈接指網(wǎng)站內(nèi)部頁面之間創(chuàng)建的相互鏈接關(guān)系。 A. 選中news.htm中“首頁”，鏈接index.htm，目標(biāo)：_blank。 B. 用同樣的方法，可創(chuàng)建“我與足球”、“明星照片”的鏈接。 3、 創(chuàng)建外部鏈接 以http://開頭的，稱為絕對地址。 選中文字或圖像之后，直接在屬性面板的“鏈接”文本框中輸入外部的鏈接地址，如選中“世界杯新聞的條目”http://www.ffire.net 4、 創(chuàng)建E-mail鏈接 選中“聯(lián)系我們”，輸入鏈接：mailto:gy123@163.com 5、 創(chuàng)建錨點(diǎn)鏈接 是指同一個頁面中的不同位置鏈接。 1）創(chuàng)建命名錨記 將光標(biāo)定位在要設(shè)置標(biāo)記的位置， 插入欄｜命名錨記｜輸入錨記名稱（注意：區(qū)分大小寫） 2）創(chuàng)建到命名錨記的鏈接 選擇要創(chuàng)建鏈接的文本或圖像 在屬性面板的鏈接文本框中，鍵入＃號和錨記名稱 或在瀏覽對話框中，選中要鏈接的文件后加＃和錨記名稱。 C. 依次創(chuàng)建頁中標(biāo)題的命名錨記如下： 鏈接按鈕 錨記 足壇綜合新聞 zh 英超新聞 yc 意甲新聞 yj 德甲新聞 dj 西甲新聞 xj 法甲新聞 fj 冠軍杯新聞 gjb 聯(lián)盟杯新聞 lmb 世界杯新聞 sjb 6、 創(chuàng)建下載鏈接 將素材中a1.zip文件復(fù)制到站點(diǎn)中，選中“資源下載”，鏈接“a1.zip”。 7、 創(chuàng)建空鏈接 選中要制作空鏈接的對象，在鏈接文本框中直接輸入＃。 8、 創(chuàng)建跳轉(zhuǎn)菜單 下方友情鏈接創(chuàng)建 1）插入欄｜表單｜跳轉(zhuǎn)菜單 2）在“插入跳轉(zhuǎn)菜單”對話框中，單擊＋號添加菜單項 3）在“選擇時。轉(zhuǎn)到URL”文本框中，輸入該文件的路徑。 http://sports.com.cn國際足球 http://www.espnstar.com.cn中文網(wǎng) http://www.chinesewings.com華翼網(wǎng) http://www.soccerchina.com多來米中文網(wǎng) http://www.miqiu.com迷球網(wǎng) 9、 創(chuàng)建“圖像地圖” 1）選中“地圖”圖像 2）在圖像屬性面板中，使用熱區(qū)工具（矩形、橢圓、多邊形），在圖像上劃分熱區(qū)。 3）為繪制的每一個熱區(qū)設(shè)置不同的鏈接地址“http://www.espnstar.com.cn”和替代文字“ESPNSTAR中文網(wǎng)”。 課堂實(shí)踐 1) 打開課堂實(shí)戰(zhàn)文件夾ch3/3-02.html,在頁面下方的“小屋”圖片上，創(chuàng)建返回首頁的超鏈接； 2) 創(chuàng)建“與我聯(lián)系”的Email超鏈接； 3) 創(chuàng)建“關(guān)于我”的空鏈接； 4) 創(chuàng)建頁面上方圖片中個個小圓的熱點(diǎn)鏈接（圖像地圖） 疑難解析 問題1：如何鏈接到網(wǎng)頁文檔中的特定位置？ 問題2：如何在網(wǎng)頁中創(chuàng)建文件下載鏈接？ 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)文件夾“10超級鏈接”中創(chuàng)建網(wǎng)頁文檔“10.html”。 2．為該網(wǎng)頁的上部導(dǎo)航欄和底部導(dǎo)航欄設(shè)置超級鏈接。 作業(yè) 嘗試用其他方法實(shí)現(xiàn)字幕、超鏈接 課后評析 第八講　使用表格布局網(wǎng)頁 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第七講使用表格布局網(wǎng)頁 課時 2學(xué)時 教學(xué)目的 1．學(xué)會添加表格、設(shè)置表格屬性。 2．掌握設(shè)置表格中行和列屬性的方法。 3．掌握拆分單元格，合并單元格的方法。 4．掌握在表格中輸入文字并定位的方法。 5．掌握在表格中插入圖像并定位的方法。 知識目標(biāo) 1．添加表格、設(shè)置表格屬性。 2．設(shè)置表格中行和列屬性的方法。 3．拆分單元格，合并單元格的方法。 4．在表格中輸入文字并定位的方法。 5．在表格中插入圖像并定位的方法。 能力目標(biāo) 熟練記住用表格布局網(wǎng)頁的操作要點(diǎn) 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生創(chuàng)新能力和獨(dú)立思考能力，并使其具有分析問題、解決問題的能力 重點(diǎn) 表格的基本操作、表格及單元格的屬性設(shè)置 難點(diǎn) 利用表格布局頁面的技巧和方法 課型 講授型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作》教程人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1. 復(fù)習(xí)提問： 在新窗口打開鏈接頁，需要將鏈接目標(biāo)的打開方式設(shè)置為什么？ 5 2.新課引入 表格是常用的頁面元素，制作網(wǎng)頁經(jīng)常要借助表格進(jìn)行排版，在網(wǎng)頁布局方面，表格可謂起著舉足輕重的作用，通過設(shè)置表格以及單元格的屬性，對頁面中的元素進(jìn)行準(zhǔn)確定位，表格能夠有序地排列數(shù)據(jù)又能對頁面進(jìn)行更加合理的布局。靈活地使用表格的背景、框線等屬性可以得到更加美觀的效果。 5 3.知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 8 4.講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 45 5.課堂實(shí)踐：了解學(xué)生對知識點(diǎn)的掌握情況 15 6.疑難解析： 7.問題探討：與學(xué)生一起引申問題留作思考 5 8.歸納總結(jié)： 本次課主要學(xué)習(xí)了表格的創(chuàng)建方法，表格及單元格的基本操作，設(shè)置表格及單元格的屬性，格式化表格的方法；要學(xué)會應(yīng)用表格技術(shù)對網(wǎng)頁中的各個對象進(jìn)行定位，并通過表格在網(wǎng)頁上更直觀、更有條理地顯示各類信息。 4 9.作業(yè)布置 3 總計 90 新授內(nèi)容 1.認(rèn)識表格： 表格的組成元素、表格的應(yīng)用 2．表格的基本操作 （1）新建網(wǎng)頁 （2）插入表格 （3）選擇表格和表格元素 （4）設(shè)置表格及單元格的屬性 （5）調(diào)整表格的結(jié)構(gòu) （6）在表格中輸入文本和插入圖像 （7）重新設(shè)置表格的邊框，保存網(wǎng)頁，且在瀏覽器中預(yù)覽效果 案例4：創(chuàng)建網(wǎng)站相冊（初識表格）——足球明星頁面（photo.htm） 操作步驟： 1、 創(chuàng)建網(wǎng)站像冊 方法： 1） 將需制作相冊的圖片放在源圖像文件夾ch4/img中，同時建立一個空目標(biāo)文件夾photo，用來存放系統(tǒng)生成的圖片和文件。 2） 執(zhí)行 “命令|創(chuàng)建網(wǎng)站相冊”命令 3） 在【創(chuàng)建網(wǎng)站相冊】對話框中輸入相應(yīng)的參數(shù)，即可。 相冊標(biāo)題：足球明星 副標(biāo)信息：2009版 源圖像文件夾：素材/ch4/img 目標(biāo)文件夾：d:/myfootball/photo/ 縮略圖：100×100 列：5 縮略圖格式：JPEG-較高品質(zhì) 選擇為每張相片建立導(dǎo)覽頁面 2、 網(wǎng)站相冊的修改 1） 選擇“頁面屬性”，可以進(jìn)行文字、背景、顏色：#009900，以及表格的一些修改。 2） 標(biāo)題文字：標(biāo)題1，居中，#ffff00，字體：華文彩云，大?。?6像素 3） 定位在每一幅圖片下面，改為每位球星的名字，（在素材ch4文件夾下的文本文件中提供）。 4） 拖動光標(biāo)選中整個頁面的文字，設(shè)置文字顏色：##CC6600。 3、 相冊表格的美化 1) 選擇“命令|格式化表格”命令。 2) 設(shè)置如下：行顏色，第一行，最左列，邊框等。 3) 在標(biāo)題和圖片表格之間插入一行五列表格，寬度為600px，分別制作網(wǎng)站各頁的鏈接。 課堂實(shí)踐 案例：我的第一頁 （1）打開“實(shí)戰(zhàn)演練”文件夾ch4。 （2）利用表格布局網(wǎng)頁04.html的頁面。 （3）用表格布局 (4)插入網(wǎng)頁元素 (5)初識CSS樣式 疑難解析 問題1：Dreamweaver CS3提供了一些事先設(shè)計好的表格外觀樣式，如何讓網(wǎng)頁中的表格套用這些表格外觀樣式？ 問題2：網(wǎng)頁中的表格除了用于布局網(wǎng)頁外，還可以存儲數(shù)據(jù)，如何對表格中的數(shù)據(jù)象Excel表一樣進(jìn)行排序操作呢？ 問題3：怎樣向網(wǎng)頁中導(dǎo)入外部Excel文件中的數(shù)據(jù)和文本格式文件中的數(shù)據(jù)呢？ 問題4：怎樣將網(wǎng)頁中表格內(nèi)的數(shù)據(jù)輸出為數(shù)據(jù)文件？ 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)文件夾“04表格布局”中創(chuàng)建網(wǎng)頁“04.html”， 對該頁面進(jìn)行表格進(jìn)行布局。 課后評析 第九講　使用布局網(wǎng)頁布局網(wǎng)頁 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第八講使用布局表格布局網(wǎng)頁 課時 2學(xué)時 教學(xué)目的 （1）掌握切換視圖的操作方法。 （2）掌握繪制布局表格的操作方法 （3）掌握繪制布局單元格、移動布局單元格的操作方法 （4）掌握調(diào)整布局表格大小和布局單元格大小的操作方法 （5）掌握布局表格和布局單元格的屬性設(shè)置方法 知識目標(biāo) （1）切換視圖。 （2）繪制布局表格 （3）繪制布局單元格、移動布局單元格 （4）調(diào)整布局表格大小和布局單元格大小 （5）布局表格和布局單元格的屬性設(shè)置 能力目標(biāo) 熟記布局表格及布局單元格的使用方法 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生創(chuàng)新能力和獨(dú)立思考能力，并使其具有分析問題、解決問題的能力 重點(diǎn) 布局表格與布局單元格的使用方法 難點(diǎn) 布局表格與布局單元格屬性的設(shè)置 課型 講授型 教學(xué)方法 采用啟發(fā)示的教學(xué)方式循序漸進(jìn)的講解新課內(nèi)容 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作》教程人民郵電出版社 教學(xué)環(huán)節(jié) 時間安排 1． 復(fù)習(xí)提問： 表格中單元格的邊距與間距有何區(qū)別？ 5 2．新課引入 通過學(xué)習(xí)文本布局網(wǎng)頁、圖像布局網(wǎng)頁、表格布局網(wǎng)頁，可看出頁面布局非常重要，本次將主要學(xué)習(xí)Dreamweaver提供的布局工具布局表格 5 3．知識技能目標(biāo)說明：介紹本次課要掌握的知識目標(biāo) 8 4．講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 40 5．課堂實(shí)踐：了解學(xué)生對知識點(diǎn)的掌握情況 15 6．疑難解析： 5 7．問題探討：與學(xué)生一起引申問題留作思考 5 8.歸納總結(jié)： 本次課主要學(xué)習(xí)了布局表格和布局單元格的使用方法，可以像使用層一樣在頁面上直接畫一個或多個布局表格或布局單元格，并且可以任意拖動單元格。使用布局視圖制作網(wǎng)頁就像畫畫一樣輕松。 4 9．作業(yè)布置 3 總計 90 新授內(nèi)容 1.布局視圖方式 2.布局表格的基本操作 （1）新建網(wǎng)頁 （2）切換視圖到布局視圖模式 （3）繪制布局表格和布局單元格 （4）選擇布局表格和布局單元格 （5）調(diào)整布局表格和布局單元格的大小 （6）移動布局單元格 （7）設(shè)置布局表格和布局單元格的屬性 案例41：應(yīng)用表格布局頁面（page.htm） 操作步驟： 1、 設(shè)計頁眉區(qū) 1)T1：3×3表　寬778，居中對齊 2)頁面屬性：左、上邊距均為0 3)將第1列3個單元格，第2列3個單元格合并。 4)可插入固定大小占位符，以方便排版。第1列插入1個占位符，167×71，第2列插入1個占位符，499×71 加入收藏 聯(lián)系我們 設(shè)為首頁 網(wǎng)頁廣告圖像 網(wǎng)站Logo圖標(biāo) 167×71 499×71 默認(rèn) 2、 設(shè)計導(dǎo)航欄區(qū) 1） T 2：2×17表，寬778，其它為0 2） 欄目間的分隔符用｜，也可用其他特殊符號。 3） 第二行用于間隔。 | 主站首頁 | 站長簡介 | 音樂古堡 | BEYOND | 星爺專輯 | 友情鏈接 | 給我留言 | 瘋狂下載 | ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3、 設(shè)計信息區(qū) 1） T3：1×3表，寬778，其它為0，各單元格的寬度分別設(shè)為181、411、156 2） 設(shè)置左右內(nèi)容區(qū) a) T31：2×1表，寬100%，表格邊框?yàn)?，白色，垂直對齊：頂端。 b) 第1格高15，第2格高163，單元格邊框?yàn)?，綠色（細(xì)邊框色）。 c) 第1格：背景圖像，輸入欄目名“你的欄目”。 d) 第2格：輸入欄目的具體內(nèi)容 e) 復(fù)制T31表至右內(nèi)容區(qū)即第3列。 4、 設(shè)計主內(nèi)容區(qū). 1） T32：2×3表，寬100%，邊框?yàn)?，邊距為0，間距為0，垂直對齊：頂端。 2） 第一行：設(shè)置各單元格背景圖像，輸入欄目名稱 3） 第二行：合并第二行 a) T321：在第二行插入1×1表，寬100%，邊框?yàn)?，白色，單元格邊框?yàn)?，綠色。 b) 拆分T321為2列，第一列輸入具體內(nèi)容，第二列設(shè)置132×145的圖像占位符。 c) 復(fù)制和T32表，更名，并添加內(nèi)容　 提示：如果上述操作沒有將間距與屬性設(shè)為0，則表格的單元格與單元格之間出現(xiàn)一定的距離，不能實(shí)現(xiàn)插入背景圖像后無縫的結(jié)合。 5、 設(shè)計版權(quán)區(qū) 1）T4：2×1表，寬778，邊框?yàn)?，邊距為0，間距為0 a) 第一行：切換到“代碼”視圖，刪除代碼 ，插入水平線：1像素的細(xì)線。 b) 第二行：輸入相關(guān)版本信息：版權(quán)所有： Copyright ? 2003-2005 All rights reserved 網(wǎng)頁制作：山西信息職業(yè)技術(shù)學(xué)院　E-mail:qdgzy@163.com 郵編：266061　建議使用800×600分辨率 課堂實(shí)踐 操作要求 （1）打開“課堂實(shí)踐”網(wǎng)站文件夾“05布局表格”中的網(wǎng)頁文檔“05.html”。 （2）利用布局表格布局網(wǎng)頁05.html的頁面元素。 （3）繪制一個較大的布局表格A，然后在布局表格A中再繪制兩個布局表格B、C，B和C布局表格上下排列。 （4）在布局表格B中繪制1個布局單元格，在布局表格C中繪制6個布局單元格。 （5）分別在各個布局單元格中輸入文字和插入圖像。 疑難解析 問題1：布局表格中的列可以設(shè)置為自動伸展或固定寬度兩種方式，“自動伸展”列有何特點(diǎn)？網(wǎng)頁實(shí)際布局時如何應(yīng)用自動伸展的列？ 問題2：布局表格中的間隔圖像有什么作用？ 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)文件夾“05布局表格”中創(chuàng)建網(wǎng)頁文檔“05.html”。 2．利用“普通表格”和“布局表格”相結(jié)合的方式布局網(wǎng)頁。 課后評析 第十講　使用層布局網(wǎng)頁 授課日期 班級名稱 授課地點(diǎn) 教學(xué)課題 第十講　使用層布局網(wǎng)頁 課時 2學(xué)時 教學(xué)目的 （1）掌握如何描繪層和插入層、如何選擇層和激活層。 （2）掌握層的屬性設(shè)置方法、如何調(diào)整層的大小和位置。 （3）掌握在層中輸入文本和插入圖像的方法。 （4）掌握嵌套層的創(chuàng)建。 （5）了解層與表格之間的相互轉(zhuǎn)換方法。 知識目標(biāo) （1）能夠熟練用層技術(shù)來對網(wǎng)頁進(jìn)行排版 能力目標(biāo) （1）描繪層和插入層、選擇層和激活層。 （2）層的屬性設(shè)置、調(diào)整層的大小和位置。 （3）在層中輸入文本和插入圖像。 （4）嵌套層的創(chuàng)建。 （5）層與表格之間的相互轉(zhuǎn)換。 素質(zhì)目標(biāo) 培養(yǎng)學(xué)生的創(chuàng)新能力與獨(dú)立思考能力，并使其具有分析問題、解決問題的能力。 重點(diǎn) （1）掌握層的創(chuàng)建與屬性設(shè)置 難點(diǎn) （1）掌握層的創(chuàng)建與屬性設(shè)置 課型 講授型＋操作型 教學(xué)方法 邊講、邊練、講練結(jié)合 教學(xué)手段 多媒體教學(xué) 教參 《網(wǎng)頁設(shè)計與制作教程》 人民郵電出版社 教學(xué)環(huán)節(jié) 及 板書設(shè)計 時間安排 1．復(fù)習(xí)提問 布局表格中的間隔圖像有什么作用？ 2 2．新課引入 層是制作網(wǎng)頁時經(jīng)常用到的對象，在控制頁面布局方面，層要比表格更加的靈活，層體現(xiàn)了網(wǎng)頁技術(shù)從二維空間向三維空間的一種延伸，也是一種新的發(fā)展方向。Dreamweaver CS3中，層和表格可以互相轉(zhuǎn)換。 3 3．知識技能目標(biāo)說明 層的出現(xiàn)為網(wǎng)頁設(shè)計提供了更多的選擇和更快捷的途徑 5 4．講解各知識點(diǎn)：具體講述本次課新課內(nèi)容 45 5．課堂實(shí)踐：了解學(xué)生對知識點(diǎn)的掌握情況 15 6．問題探討 如何應(yīng)用層技術(shù)將對象完全貼合頁邊緣（不留一點(diǎn)空隙）？ 5 7．疑難解析： 7 8．課堂小結(jié) 5 9.作業(yè)布置 3 總計 90 新授內(nèi)容 1．認(rèn)識層 （1）層的概念 （2）應(yīng)用層布局網(wǎng)頁的特點(diǎn) 2．層的基本操作 （1）新建網(wǎng)頁 （2）創(chuàng)建層 （3）選擇層與激活層 （4）設(shè)置層的屬性 （5）調(diào)整層的大小和位置 （6）層的嵌套 （7）在層中輸入文本和插入對象 （8）層和表格的相互轉(zhuǎn)換 案例5：制作層布局頁面——環(huán)游世界（hysj.htm） 操作步驟： 1、 新建頁面，標(biāo)題這“環(huán)游世界”。 2、 “插入”面板組“布局”類別，單擊“繪制層”，在文檔窗口中繪制一個層layer1。 3、 將光標(biāo)置于層內(nèi)，插入ch5/ 1.jpg，如果圖片很大，在“屬性”將其寬度設(shè)置為250，高度設(shè)置為150 4、 選中層，在“屬性”中設(shè)置其精確位置，分別為左：70，上：40，寬：250，高150，以精確定位。 5、 插入層layer2，插入ch5/ 2.jpg，在“屬性”將其寬度設(shè)置為250，高度設(shè)置為150, 精確位置，分別為左：180，上：250，寬：150，高150 6、 插入層layer3，插入ch5/ 3.jpg，在“屬性”將其寬度設(shè)置為250，高度設(shè)置為150, 精確位置，分別為左：330，上：250，寬：260，高150 7、 改變層的疊放順序，單擊層layer2，將其Z值變?yōu)?，將laywr1編號變?yōu)?，layer3編號不變。 8、 再插入層layer4，寬度與高度為67px，內(nèi)輸入“環(huán)”，大小60px。 9、 繼續(xù)插入其它層，并分別輸入“游”、“世”、“界”。 課堂實(shí)踐 操作要求 （1）打開“課堂實(shí)踐”網(wǎng)站文件夾“06層的布局”中的網(wǎng)頁文檔“06.html”。 （2）利用層布局網(wǎng)頁06.html的頁面。 （3）繪制一個較大的層Layer0，然后在層Layer0中再繪制5個子層Layer1、Layer2、Layer3、Layer4。 （4）分別層Layer1、Layer2、Layer3、Layer4中輸入文字或插入圖像。 疑難解析 問題1：在頁面中有多個層，如何將它們對齊？ 答：使用層對齊命令可利用最后一個選定層的邊框來對齊一個或多個層。對齊多個層的操作方法是：先選中頁面中的多個層，然后單擊菜單【修改】→【排列順序】，在“排列順序”的級聯(lián)菜單中選擇一種對齊方式即可對齊。例如，如果選擇“左對齊”，所有層都會將它們的左邊框與最后一個選定層的左邊框?qū)R。 問題2：對于網(wǎng)頁中多個嵌套的層，如何更改層的疊放順序？答：使用層的“屬性”面板或“層”面板均可以更改層的疊放順序。“層”面板中處于列表頂部的層將位于疊放順序的頂部，并且會出現(xiàn)在其他層之前。 在“層”面板中更改層的疊放順序的操作方法是：先打開“層”面板，然后將層向上或向下拖至所需的疊放順序。當(dāng)移動層時會出現(xiàn)一條線，它指示該層將出現(xiàn)的位置。當(dāng)放置線出現(xiàn)在層疊順序中的所需位置時，釋放鼠標(biāo)按鈕即可。 利用層的“屬性”面板更改層的疊放順序的操作方法是：先打開“層”面板以查看頁面所有層的當(dāng)前疊放順序；然后在“層”面板或“文檔”窗口中選擇一個層，在層的“屬性”面板中，在Z軸文本框中輸入一個編號。輸入一個較大的數(shù)字可將該層在層疊順序中上移；輸入一個較小的數(shù)字可將該層在層疊順序中下移。 課外拓 展實(shí)踐 1．在“個人網(wǎng)站設(shè)計”站點(diǎn)文件夾“06層的布局”中創(chuàng)建網(wǎng)頁文檔“06.html”。 2．利用“普通表格”和“層”相結(jié)合的方式布局網(wǎng)頁。 作業(yè) 課后評析 第十一講　使用框架布局網(wǎng)頁 授