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

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