第一篇:高中信息技術(shù)《網(wǎng)頁制作初步》教案
高中信息技術(shù)《網(wǎng)頁制作初步》教案
www.tmdps.cn 教材分析
教學(xué)內(nèi)容:高中信息技術(shù)第五章第二節(jié)《網(wǎng)頁的制作》。
教學(xué)重點(diǎn):網(wǎng)頁文字處理、插入圖片、動畫、水平線以及設(shè)置背景的方法。
教學(xué)難點(diǎn):通過網(wǎng)站自主學(xué)習(xí),讓學(xué)生自己建立網(wǎng)頁。
學(xué)生分析
本課對象是高一學(xué)生,學(xué)生通過前面woRD和INTERNET的學(xué)習(xí),對網(wǎng)頁內(nèi)容編輯、結(jié)構(gòu)和效果等設(shè)計有了一定的感性認(rèn)識。
教學(xué)目標(biāo)
熟悉網(wǎng)頁中的各種元素及其制作方法,初步了解網(wǎng)頁制作過程,培養(yǎng)學(xué)生的自學(xué)能力和創(chuàng)新探索精神。
教學(xué)環(huán)境
設(shè)計“網(wǎng)頁制作”網(wǎng)站,是學(xué)生通過網(wǎng)站在教師的引導(dǎo)下,實(shí)現(xiàn)自主學(xué)習(xí),完成網(wǎng)站中每一知識點(diǎn)的學(xué)習(xí),教師借助投影儀及時反饋學(xué)生在完成目標(biāo)時出現(xiàn)的問題。
教學(xué)方法
通過網(wǎng)站引導(dǎo)學(xué)生自主學(xué)習(xí),解決教師提出的實(shí)際問題。
教學(xué)過程
(引入)邊講邊演示
展示一個簡單的網(wǎng)頁
你現(xiàn)在正在上網(wǎng),一定去了不少站點(diǎn)吧!這些站點(diǎn)的頁面都設(shè)計得非常精美,讓你在瀏覽信息的同時,還可以得到美的享受。這么吸引人的頁面,是怎么制作出來的呢?你想不想也做一個精美的個人主頁呢?如果你的回答是肯定的,那我們就一起學(xué)一下FrontPage的使用。FrontPage是優(yōu)秀的專業(yè)化網(wǎng)頁設(shè)計軟件之一,使用FrontPage你只要幾分鐘就可以建立一個自己的網(wǎng)頁,這可是一件令人激動的事喲!
(新課)教師引導(dǎo)學(xué)生根據(jù)網(wǎng)站自學(xué),完成教師提出具體操作要求
模塊
一、教師引導(dǎo)學(xué)生自學(xué)“網(wǎng)頁制作知識準(zhǔn)備”,提出問題:
1、啟動FRoNTPAGE?
2、FRoNTPAGE的三種顯示模式?
3、在e:下新建空站點(diǎn),取名為abc站點(diǎn)文件夾。
模塊
二、教師引導(dǎo)學(xué)生自學(xué)“新建網(wǎng)頁”,提出要求:
1、新建普通網(wǎng)頁。
4、打開e:網(wǎng)站制作素材可愛的家鄉(xiāng)高郵.htm網(wǎng)頁。
模塊
三、教師引導(dǎo)學(xué)生自學(xué)“文字編輯”,提出要求:
1、把高郵.htm網(wǎng)頁中的標(biāo)題設(shè)置為“5號”、綠色,“加粗”字體,“居中”對齊。
2、把高郵.htm網(wǎng)頁中的正文字體設(shè)置為“3號”,綠色。
模塊
四、教師引導(dǎo)學(xué)生自學(xué)“圖片動畫”,提出要求:
1、在網(wǎng)頁中插入e:網(wǎng)站制作素材高郵風(fēng)景高郵湖.jpg
2、在網(wǎng)頁中插入e:網(wǎng)站制作素材高郵風(fēng)景welcome.gif
模塊
五、教師引導(dǎo)學(xué)生自學(xué)“水平線”,提出要求:
1、在網(wǎng)頁中標(biāo)題與正文之間插入水平線。
2、水平線寬度設(shè)置為100%,高度為3像素,水平居中,顏色改為綠色。
模塊
六、教師引導(dǎo)學(xué)生自學(xué)“設(shè)置背景”,提出要求:
設(shè)置網(wǎng)頁背景為e:網(wǎng)頁制作網(wǎng)站制作素材高郵風(fēng)景背景2文件
模塊
七、教師引導(dǎo)學(xué)生自學(xué)“保存”,提出要求:
將當(dāng)前網(wǎng)頁另存到e:abc高郵.htm,并將圖片保存到images文件夾中。
模塊
七、教師引導(dǎo)學(xué)生自學(xué)“小結(jié)”,提出要求把學(xué)生分為兩組,一組練習(xí)制作個人網(wǎng)頁,一組練習(xí)制作班級網(wǎng)頁。制作素材在e:網(wǎng)站制作素材練習(xí)素材中。對學(xué)生作品點(diǎn)評,小結(jié)。www.tmdps.cn
第二篇:浙江省高中信息技術(shù)網(wǎng)頁制作會考知識點(diǎn)
浙江省高中信息技術(shù)網(wǎng)頁制作會考知識點(diǎn)
一、插入網(wǎng)頁元素:
01.文字及格式:從文本文件中復(fù)制文字內(nèi)容 → 光標(biāo)定位到相應(yīng)單元格中 → 粘貼 → 選中文字 → 格式 → 字體(段落)→ 根據(jù)題意設(shè)置 → 確定
02.字幕組件:定位 → 插入 → 組件 → 字幕 → 輸入文字設(shè)置屬性 → 確定。
03.藝術(shù)字:定位 → 插入 → 圖片 → 藝術(shù)字 → 選擇一種式樣后確定 → 輸入文字設(shè)置格式后確定。
04.圖片及屬性:光標(biāo)定位于單元格中 → 插入 → 圖片 → 來自文件 → 找到并選中圖片文件(一定要從考生文件夾中找圖片,包括擴(kuò)展名都要正確,文件類型可以選所有文件。)→ 確定 → 右擊圖片 → 圖片屬性 → 根據(jù)題意設(shè)置 → 確定(注意不能設(shè)置成單元格背景圖片)
05.表格:光標(biāo)定位 → “表格”菜單 → 插入 → 表格(行或列、單元格)。
06.水平線及屬性:光標(biāo)定位 → 插入 → 水平線 → 右擊水平線 → 水平線屬性 → 根據(jù)題意設(shè)置 → 確定
二、背景(顏色或圖片、音樂)、屬性的設(shè)置:
01.網(wǎng)頁屬性(網(wǎng)頁背景、背景音樂、網(wǎng)頁標(biāo)題等):在網(wǎng) 1
頁中右擊 → 網(wǎng)頁屬性 → 根據(jù)題意設(shè)置 → 確定(圖片和音樂文件一定要來自自己的考生文件夾,網(wǎng)頁標(biāo)題不能插入到網(wǎng)頁的上方)
02.表格背景、表格屬性:光標(biāo)定位于要設(shè)置的表格右擊 → 表格屬性 → 根據(jù)題意設(shè)置 → 確定
03.單元格背景、單元格屬性:光標(biāo)定位于要設(shè)置的單元格右擊 → 單元格屬性 → 根據(jù)題意設(shè)置 → 確定
三、表格的操作:
01.插入行(列):光標(biāo)定位 → 表格 → 插入 → 行或列 02.刪除行(列):選中要刪除的行(列)→ 表格 → 刪除單元格(正確選擇行或列)
03.合并(拆分)單元格:選中要合并(拆分)的單元格 → 表格 → 合并(拆分)單元格→ 根據(jù)題意設(shè)置 → 確定
四、超鏈接的設(shè)置:
01.在文字(圖片)上設(shè)置(修改)超鏈接到網(wǎng)站地址:選中文字(圖片)→ 在選中區(qū)域右擊 → 超鏈接(超鏈接屬性)→ 單擊“原有文件或網(wǎng)頁”按鈕 → 在地址欄中輸入網(wǎng)址 → 確定。
示例:超鏈接到“中央電視臺”http://常見錯誤:(1)只有(2)http://http://2
02.鏈接到文件:選中文字(圖片)→ 在選中區(qū)域右擊 → 超鏈接(超鏈接屬性)→ 單擊“原有文件或網(wǎng)頁”按鈕 → 找到并選中文件(必須到考生文件夾中去尋找所要鏈接的文件,包括擴(kuò)展名都要正確。顯示擴(kuò)展名的操作:打開一個文件夾 → 工具→ 文件夾選項 →“查看”標(biāo)簽 → 去掉“隱藏已知文件類型的擴(kuò)展名”前面的對號 → 確定)→ 確定
示例:鏈接文件germ.htm
常見錯誤: http://germ.htm
03.鏈接到電子郵件:選中文字(圖片)→ 在選中區(qū)域右擊 → 超鏈接(超鏈接屬性)→ 單擊“電子郵件地址”按鈕 → 電子郵件地址欄中輸入電子郵件地址 → 確定
示例:超鏈接到abc@163.com
常見錯誤:(1)只有myname@163.com(2)http:// myname@163.com
五、新建網(wǎng)頁(保存位置是考生文件夾、文件名要正確)
文件 → 新建 → 空白網(wǎng)頁(開始 → 所有程序 → Microsoft Office → Microsoft Office FrontPage 2003)→ 按照題意制作網(wǎng)頁 → 文件 → 保存 → 選擇保存位置和輸入文件名 → 保存 → 關(guān)閉窗口
第三篇:高中信息技術(shù) 網(wǎng)頁制作教案 粵教版選修3
網(wǎng)頁制作
教學(xué)目標(biāo):
1、了解網(wǎng)頁的主要構(gòu)成內(nèi)容
2、學(xué)會網(wǎng)頁的布局
3、學(xué)會網(wǎng)頁中插入圖片,文字設(shè)置,插入超鏈接的方法 教學(xué)內(nèi)容:
1、啟動FrontPage “開始”菜單——程序——Microsoft office——Microsoft FrontPage
2、新建網(wǎng)頁:文件——新建——空白網(wǎng)頁
表格——表格布局 表格——插入表格
專心
愛心
用心 1
調(diào)整表格
插入圖片:
1. 插入:插入——圖片——剪貼畫(來自文件)2. 設(shè)置:右擊圖片(快捷菜單)——圖片屬性 3. 刪除:選擇圖片——按刪除鍵
調(diào)整圖片,單擊圖片,出現(xiàn)小黑方塊,就可調(diào)整圖片
專心
愛心
用心 2
文字的錄入:直接錄入。
復(fù)制——復(fù)制粘貼
文字的編輯:格式——字體
格式——段落
文字最后生成格式
專心
愛心
用心 3
超級鏈接:
1. 鏈接到郵箱
選擇“求助信箱圖片”——單擊超鏈接按鈕——選擇“郵件超鏈接”按鈕——輸入郵箱地址——確定
2. 鏈接到其他網(wǎng)頁、網(wǎng)站
選擇鏈接文字——單擊超鏈接按鈕——輸入指定網(wǎng)頁地址——確定 3. 取消超鏈接
選擇超鏈接部分——單擊超鏈接按鈕——刪除URL地址欄的內(nèi)容——確定
保存:文件——保存
保存位置為F:/**班級/
專心
愛心
用心 4
第四篇:網(wǎng)頁制作教案
網(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的基本標(biāo)志與格式標(biāo)志.......................................................................................4 2.1 HTML文檔的基本結(jié)構(gòu).........................................................................................................5 第三講 HTML的文本、圖片與超級鏈接標(biāo)志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入圖片................................................................................................................................8 2.4 建立超級鏈接........................................................................................................................8 第四講 HTML表格、表單與框架標(biāo)志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表單的應(yīng)用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五講 HTML標(biāo)志綜合運(yùn)用案例.............................................................................................11 第六講 DREAMWEAVER中簡單WEB站點(diǎn)建立與管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七講 DREAMWEAVER中靜態(tài)網(wǎng)頁設(shè)計.............................................................................13 3.2 在頁面中加入文字和圖像..................................................................................................14 3.3 超級鏈接的運(yùn)用..................................................................................................................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.表達(dá)式和運(yùn)算符.................................................................................................................19 第十二講 VBSCRIPT的條件語句、循環(huán)語句和過程.............................................................20 4.3 VBSCRIPT基本語句.............................................................................................................20
第一講 網(wǎng)頁設(shè)計概述
【教學(xué)內(nèi)容】
講解網(wǎng)頁設(shè)計的相關(guān)術(shù)語及網(wǎng)站制作的基本流程。【教學(xué)目的】
使學(xué)生對網(wǎng)站及網(wǎng)頁有一定的認(rèn)識,激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣。【教學(xué)重點(diǎn)】
網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)難點(diǎn)】
理解網(wǎng)頁設(shè)計中的若干術(shù)語。【教學(xué)方式】
講授式、討論式、案例分析式。【教學(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的特點(diǎn)和結(jié)構(gòu)
Web最大的特點(diǎn)是使用了超文本(Hypertext)WWW采用C/S(客戶機(jī)/服務(wù)器)工作模式
在瀏覽器和服務(wù)器之間應(yīng)用HTTP(Hyper Text Transfer Protocol,超文本傳輸協(xié)議)作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議 1.1.3 URL URL的完整格式
協(xié)議://主機(jī)名或IP地址:端口號/路徑名/文件名
1.2 IE5的使用
Web瀏覽器是瀏覽Internet資源的客戶端軟件
在Windows環(huán)境下使用的瀏覽器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表標(biāo)志的使用。【教學(xué)方式】
討論式、案例分析式、練習(xí)式。【教學(xué)參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
2.1 HTML文檔的基本結(jié)構(gòu)
2.1.1 HTML語法
1、雙標(biāo)記
語法:
<標(biāo)記>內(nèi)容標(biāo)記>
2、單標(biāo)記 語法:<標(biāo)記> 最常用的單標(biāo)記是
3、標(biāo)記屬性 語法
<標(biāo)記
屬性1 屬性2 屬性3 … > 例子
4、注釋語句 格式
例子
2.1.2 HTML文檔的基本結(jié)構(gòu) 【課后小結(jié)】
通過本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用 列表,有序列表,無序列表標(biāo)志及屬性。
第三講 HTML的文本、圖片與超級鏈接標(biāo)志
【教學(xué)內(nèi)容】
講解HTML標(biāo)準(zhǔn)中的文本、圖片與超級鏈接標(biāo)志 【教學(xué)目的】
* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。
< EM>...... EM>,強(qiáng)調(diào)文字,通常用斜體。
< STRONG>...... STRONG >,特別強(qiáng)調(diào)的文字,通常用黑體。
......,以等寬體顯示西文字符。
......,使文字大小相對于前面的文字增大一級。
......,使文字大小相對于前面的文字減小一級。......,使文字成為前一個字符的上標(biāo)。......,使文字成為前一個字符的下標(biāo)。
文本修飾 2.2.7
預(yù)格式化文本 使用預(yù)格式化標(biāo)記
不再忽略在此之間的空格、制表符與回車符等元素 2.2.8 轉(zhuǎn)義字符與特殊字符
一般轉(zhuǎn)義符都是以“&”開始,以“;”結(jié)束,一個轉(zhuǎn)義符之間不能有空格 2.2.9 文本強(qiáng)制換行和不換行 文本強(qiáng)制換行
不換行
標(biāo)記
屬性:Width,Size,Align,Noshade,color 2.2.11 使用列表
1、無序列表
- 列表條目1
- 列表條目2......
2、有序列表
- 列表條目1
- 列表條目2......
3、定義列表
- 列表條目1
- 條目1的說明
- 列表條目2
- 條目2的說明 ……
...... 2.4.4 圖像地圖 【課后小結(jié)】
本節(jié)介紹了在網(wǎng)頁中加入文本、圖片和超級鏈接的標(biāo)志與相應(yīng)屬性,熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁的基礎(chǔ)。超級鏈接標(biāo)志中,書簽鏈接是一類特殊的鏈接方式,理解和使用書簽鏈接學(xué)習(xí)HTML中超級鏈接標(biāo)志的難點(diǎn)。
第四講 HTML表格、表單與框架標(biāo)志
【教學(xué)內(nèi)容】
講解HTML中制作表格、表單與框架的標(biāo)志。【教學(xué)目的】
使學(xué)生掌握簡單表格、表單與框架的制作。【教學(xué)重點(diǎn)】
* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】
* 理解表格屬性rowspan與colspan的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性name、target的意義。
* 理解表單中相應(yīng)元素對應(yīng)標(biāo)志及屬性的含義。【教學(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)成元素:表頭,單元格,列,行
第一行第一列 | 第一行第二列 |
第二行第一列 | 第二行第二列 |