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