4.2 課堂任務(wù)1 首頁版面的設(shè)計與制作
課程名稱：網(wǎng)站的設(shè)計與制作 課時數(shù)：4 教學(xué)目標：
知識與技能：了解圖層及圖層樣式相關(guān)概念。
過程與方法：掌握用PhotoShop進行簡單的圖片處理和文字效果制作的方法
理解首頁的總體設(shè)計要求、組成要素和制作方法； 情感與價值觀：培養(yǎng)學(xué)生主動思考問題的習(xí)慣和自主學(xué)習(xí)的能力。教學(xué)重點：
用PhotoShop進行簡單的圖片處理和文字效果制作。教學(xué)難點：
首頁總體設(shè)計要求、組成要素和制作方法的理解。教法：
任務(wù)驅(qū)動法 學(xué)法：
閱讀，記錄要點，動手操作。課前準備：
第四章第二節(jié)素材和實例。視頻教程：首頁版面的設(shè)計與制作.wmv。教學(xué)過程設(shè)計：
（一）導(dǎo)入設(shè)計：
色彩協(xié)調(diào)、清晰漂亮的高品質(zhì)網(wǎng)站常常能使瀏覽者對整個網(wǎng)站留下深刻的印象。Adobe Photoshop軟件能非常方便的幫助我們設(shè)計制作出漂亮的網(wǎng)頁界面。今天我們一起來學(xué)習(xí)網(wǎng)站的設(shè)計。
（二）新課講解設(shè)計：
（1）請學(xué)生帶著以下問題閱讀P140～142的知識預(yù)讀，問題如下： A.什么是圖層？圖層的上下順序跟顯示結(jié)果有關(guān)系么？ B.什么是圖層樣式？打開圖層樣式的方法有哪些？（2）請學(xué)生一一回答以上問題。（3）教師總結(jié)評價并補充相關(guān)要點。（4）了解任務(wù)目標。
（5）教師演示作品成品，請學(xué)生根據(jù)已有的知識猜測該圖的制作過程。（6）教師演示制作該圖的關(guān)鍵步驟，（詳見教材第16頁至第21頁的內(nèi)容）。
操作要點及注意事項如下：
A.一般作為首頁的圖片大小以屏幕剛好能完全顯示，并不需要滾動條為宜。B.首頁在色彩的使用上要盡量與子頁一致。（6）學(xué)生完成相同操作?？蓞⒖家曨l文件用首頁版面的設(shè)計與制作.wmv。教師巡視指導(dǎo)。（7）學(xué)生上傳作業(yè)。教師隨機抽查點評。（8）教師總結(jié)評價。
（9）請學(xué)生完成任務(wù)一對照練習(xí)。
（三）小結(jié)和作業(yè)： 小結(jié)：
（1）圖層的概念
（2）首頁的設(shè)計要求
（3）對圖像做了哪幾步操作 作業(yè)：
填寫《任務(wù)評價表》并上交
4.2 課堂任務(wù)2 內(nèi)容頁面版面的設(shè)計與制作
課程名稱：網(wǎng)站的設(shè)計與制作 課時數(shù)：6 教學(xué)目標：
知識與技能：了解圖層及圖層樣式相關(guān)概念。
過程與方法：掌握用PhotoShop進行簡單的圖片處理和文字效果制作的方法
理解內(nèi)容頁面的總體設(shè)計要求和方法； 情感與價值觀：培養(yǎng)學(xué)生主動思考問題的習(xí)慣和自主學(xué)習(xí)的能力。教學(xué)重點：
PhotoShop相關(guān)技術(shù)的應(yīng)用。教學(xué)難點：
內(nèi)容頁面的總體設(shè)計要求和方法。教法：
任務(wù)驅(qū)動法、演示法 學(xué)法：
閱讀，記錄要點，動手操作 課前準備：
第四章第二節(jié)素材和實例。視頻教程：內(nèi)容頁面版面的設(shè)計與制作1.WMV，內(nèi)容頁面版面的設(shè)計與制作2.WMV。教學(xué)過程設(shè)計：
（一）導(dǎo)入設(shè)計：
根據(jù)已有的首頁，我們可以分析出這個網(wǎng)站的色彩風(fēng)格，這樣我們在做內(nèi)容頁面的時候就可以對應(yīng)起來。
（二）新課講解設(shè)計：
（1）教師展示作品成品，請學(xué)生分析首頁與內(nèi)容頁面在色彩的使用上有什么特點。文字的處理有什么特點？
（2）請學(xué)生根據(jù)已有的知識猜測該圖的制作步驟。（3）教師補充相關(guān)要點。
（4）教師演示制作該圖的操作，（詳見教材第149～159頁的內(nèi)容）。操作要點及注意事項如下：
在已有的代碼上插入對稱標記的時候，要注意標記的嵌套，不要使標記交叉而導(dǎo)致文件出錯。（5）請一位學(xué)生上臺操作，其他學(xué)生完成相同操作?？蓞⒖家曨l文件內(nèi)容頁面版面的設(shè)計與制作1.WMV，內(nèi)容頁面版面的設(shè)計與制作2.WMV。（6）教師總結(jié)評價。
（7）學(xué)生上傳作品，教師抽取部分作品展示。（8）由學(xué)生完成任務(wù)二對照練習(xí)。并上傳作業(yè)。
（三）小結(jié)和作業(yè)： 小結(jié)：
（1）網(wǎng)站的風(fēng)格（2）顏色的選取
（3）內(nèi)容頁面的設(shè)計技巧 作業(yè)：
（1）填寫《任務(wù)評價表》并上交（2）完成本章習(xí)題。
網(wǎng)頁制作與設(shè)計教案
第一講 網(wǎng)頁設(shè)計概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 網(wǎng)頁中所使用的技術(shù)............................................................................................................4 1.4 制作網(wǎng)頁的基本方法............................................................................................................4 第二講 HTML的基本標志與格式標志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標志綜合運用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運用..................................................................................................................14 3.4.表格的應(yīng)用.........................................................................................................................14 3.5.在網(wǎng)頁中創(chuàng)建表單.............................................................................................................15 第八講 DREAMWEAVER中動態(tài)網(wǎng)頁設(shè)計.............................................................................15 第九講 DREAMWEAVER綜合性網(wǎng)頁設(shè)計案例.....................................................................16 第十講 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT語言簡介.............................................................................................................17 第十一講 VBSCRIPT的基本元素與輸入輸出.........................................................................18 4.2.基本數(shù)據(jù)類型.......................................................................................................................18 4.2.表達式和運算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網(wǎng)頁設(shè)計概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁設(shè)計的相關(guān)術(shù)語及網(wǎng)站制作的基本流程?！窘虒W(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣?！窘虒W(xué)重點】
網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)難點】
理解網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)方式】
講授式、討論式、案例分析式?！窘虒W(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《Internet 網(wǎng)頁工場》Wittime工作室 重慶出版社。
3、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
4、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的簡稱，一般也稱之為WWW或3W 1.1.2 Web的特點和結(jié)構(gòu)
Web最大的特點是使用了超文本（Hypertext）WWW采用C/S（客戶機/服務(wù)器）工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機名或IP地址：端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標志的使用?！窘虒W(xué)方式】
討論式、案例分析式、練習(xí)式。【教學(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語法
1、雙標記
語法：
<標記>內(nèi)容
2、單標記 語法：<標記> 最常用的單標記是
3、標記屬性 語法
<標記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標志與格式標志,并能靈活運用 列表,有序列表,無序列表標志及屬性。
第三講 HTML的文本、圖片與超級鏈接標志
【教學(xué)內(nèi)容】
講解HTML標準中的文本、圖片與超級鏈接標志 【教學(xué)目的】
* 使學(xué)生了解標題元素,掌握字體,上下標,及特殊字符的標志。
< EM>......，強調(diào)文字，通常用斜體。
< STRONG>......，特別強調(diào)的文字，通常用黑體。
......，以等寬體顯示西文字符。
......，使文字大小相對于前面的文字增大一級。
......，使文字大小相對于前面的文字減小一級。......，使文字成為前一個字符的上標。......，使文字成為前一個字符的下標。......，使文字顯示為閃爍效果。2.2.6
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始，以“；”結(jié)束，一個轉(zhuǎn)義符之間不能有空格 2.2.9 文本強制換行和不換行 文本強制換行
不換行 2.2.10 插入水平線 使用
標記
屬性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、無序列表
2、有序列表
- 列表條目1
- 列表條目2......
3、定義列表
- 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標志與相應(yīng)屬性，熟練運用這些標志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標志中，書簽鏈接是一類特殊的鏈接方式，理解和使用書簽鏈接學(xué)習(xí)HTML中超級鏈接標志的難點。
第四講 HTML表格、表單與框架標志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標志。【教學(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作。【教學(xué)重點】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標志與屬性?！窘虒W(xué)難點】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標志及屬性的含義?！窘虒W(xué)方式】
案例分析式、項目教學(xué) 【教學(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
2.5 插入表格
2.5.1 在網(wǎng)頁中插入表格
表格的基本構(gòu)成元素：表頭，單元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口屬性設(shè)置
2.7.4 常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分
（3）目錄和標題，分為左上、左下、右三部分
（4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁
