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