《Frontpage2003网页设计与制作》教案
FrontPage2003 网页制作教程
1.1 FrontPage 2003的启动和退出
一、启动
在Windows 桌面单击“开始”菜单，执行［所有程序］[ Microsoft Office ] [Microsoft Office FrontPage 2003 ]命令
二、退出
执行[文件][退出]命令，或者单击窗口右上角标题栏的[关闭]按钮
example: “标题”框架 模板新建网页
1)执行[文件][新建] 命令，出现“新建” 任务窗格
2)在“新建网页”栏中，选择[其他网页 模板]
3)选择“框架网页”选项卡
4)选择“标题”模板 ,并编辑网页 14
2.4 利用框架网页模板新建网页
5) 浏览网页
返回
15
3 网页的编辑与效果设计
5
1.4 任务窗格
返回
6
2 新建网页
2.1 新建网页的方法 2.2 新建空白网页 2.3 利用常规模板新建网页 2.4 利用框架网页模板新建网页
7
2.1 新建网页的方法
一、空白网页
新建一个空白的网页
二、文本文档
新建一个纯文本文件，后缀名为· txt
三、根据现有网页新建
从本地或互联网上查找到网页，新建一个同样的网页
21
4.1 设置网页属性
执行[文件][属性]命令
一、设置网页背景音乐
二、设置网页背景图片
22
4.2 设置网页主题
应用主题
1)打开要应用主题的网页 2)执行[格式][主题] 命令，弹出“主题”任务 窗格 3) “主题”任务窗格中，浏览主题的缩略图， 单击需要的主题
删除主题
1)执行[格式][主题]命令 2)在“主题”任务窗格中删除网站的主题
用FrontPage2003制作网页课件
用 FrontPage2003 制作网页课件Frontpage2003 是 office 家族的一员，应用于网站、网页的编写管理，操作简单方便。
对于广大中小学教师来说，掌握 frontpage2003 的操作，我们能够：<1）制作网页课件 <演示型、 flash 课件，网络型）<2）建设教学设计资源网站举例：三角形中的线段为例今日我们将以“乡愁”为例，来叙述网站的制作过程。
创立网站是一个系统的过程，包含设计网站的构造、采集与加工网站素材、开发网站和公布网站四个步骤。
一、设计网站的构造二、采集与加工网站所需素材三、开发网站四、公布网站应当掌握的技术：1、利用FrontPage，新建并保留一个站点。
2、新建、保留站点中的网页。
3、插入并调整表格。
4、在表格中输入文字并编写。
5、加入背景图片。
6、在网页中插入图片并调整。
7、在网页中创立“超链接”。
8、在网页中利用框架布局网站。
9、在网页中设置背景音乐。
10、在网页中加入音频、视频、转动字幕、水平线。
11、公布网站。
一、设计网站的构造<一）确立网站的名称与栏目1.网站名称就是一个网站的名字命名原则： <1）内容性； <2）艺术性2.网站栏目是网站内容的目录栏目的设计应以教学设计需要为主要目的。
本网站的栏目主要有：如菜单<二）规划网站构造网站的构造是指网站中各个网页之间的关系。
例: 《乡愁》网站构造图示例主页二、采集与加工网站所需素材网站素材包含文本、图片<图形与图像）、动画、音频和视频等。
在网站开发前，应依据每个网页内容的需要，采集有关的素材，门路：网上搜走倾品感索或自制。
听味悟近1. 如：网站所需素材表乡乡乡乡愁愁愁愁网页编号网页内容所需素材形式与内容1文本、图片、动画、音频23、、、、、、、、、、、、、、、、、、、、、、、、三、开发网站站点：是一组有关网页的有机联合，网页之间相互相连，这类完好的构造就称为站点。
FrontPage网页设计教学教案
FrontPage網頁設計教學教案學生的起點行為：熟悉電腦之基本操作，例如啟動電腦、開啟與關閉檔案，使用滑鼠等。
熟悉FrontPage2003軟體的基本操作，如啟動軟體，開啟與關閉檔案，拖曳與按點滑鼠兩下等。
瞭解PhotoImpact11工具列與屬性工具列的位置，並已會存檔與使用文字輸入工具及百寶箱的基本操作。
貳、發展活動教師講解一、建立資料夾按「我的電腦／（Ｃ：）／按右鍵／新増／資料夾」，輸入：班級-座號姓名二、開啟網站1.執行FrontPage程式：按「開始／程式集／ Microsoft Office／Microsoft FrontPage」2.開啟網站：按「檔案／開啟網站」執行PhotoImpact程式：點選「我的工作區／完整功整」按「是／正確」按「網路／元件設計師」：點選「橫幅」樣式，按「下一步」，設定「色彩」及「標題／文字」，輸入如：「三信家商資處科二年13組10號周杰倫」，勾取「文字改變時，同時改變形狀」按「匯出／作為個別物件」，按「儲存」，儲存於：「C:／個人資料夾／images」，輸入檔名：「title」，存檔類型：「GIF」2.插入橫幅元件回FrontPage畫面，打開images資料夾，將拖曳至網頁中，點選圖，按右鍵／顯示圖片工具列，按「設定透明色彩」，點選橫幅背景，設為透明六、製作網頁1.製作按鈕按「插入／Web元件／互動式按鈕／完成」，點選「按鈕」標籤，再點選「按鈕樣式」，輸入文字：「自我介紹」點選「字型」標籤，再設定「原始字型色彩」、「停留時字型色彩」、「按下時字型色彩」點選「圖像」標籤，圈選「將按鈕製成GIF圖像並使用透明背景」2.複製按鈕點選「自我介紹」按鈕，按複製＋貼上複製四個，利用「按右鍵／按鈕屬性」，分別更改四個按鈕文字為：「成長歷程、好站連結、相片藝廊、與我聯絡」七、製作網頁1.插入跑馬燈：按「插入／Web元件／跑馬燈／完成」，輸入歡迎文字2.輸入網站名稱：按「插入／圖片／文字藝術師」，幫自己的網站取超炫名字3.插入自製GIF動畫八、按鈕超連結設定1.按「新增頁面」，新增、、、並輸入標題，按儲存2.點選「自我介紹」按鈕，「按右鍵／超連結」，點選「」網頁，目標框架：點選「右邊」3.同上方法，成長歷程（）、好站連結（）、相片藝廊（）4.點選「與我聯絡」按鈕，「按右鍵／超連結」，點選「電子郵件地址」，輸入E-Mail信箱，如」學生實作1.教師依步驟帶領學生實作練習，並做行間巡視，瞭解學生的學習狀況並解答問答。
《Frontpage2003网页设计与制作》教案
《Frontpage2003网页设计与制作》教案2009141119 郭飞一、教学目标1. 知识与技能目标：(1) 了解网页制作过程，初步学会如何分割网页版面；(2) 掌握对网页中素材的简单处理方法，如插入图片、艺术字、文本框；对图片进行超链接设置。
2. 能力目标：(1) 学习一种逆向思维方式，对版面进行设计能力，并充分利用背景图片、背景音乐及字幕的设置；(2) 通过对演示的网页的分析与小组合作锻炼学生交流与表达，增强学生的分析能力、动手实践能力；(3) 学会将素材有效地组织在一起，以表达综合信息的能力。
3. 情感、态度、价值观：鼓励学生大胆构思，学生交流过程中学会尊敬他人，客观评价他人观点，同时认识到网页所展示的内容要积极向上。
二、教学重、难点教学重点：1.利用Frontpage2003对设计的网页进行插入文本（包括艺术字、文本框的运用）；2.插入图片以及图片的超链接制作。
教学难点：1.利用网页分割设计原理，结合自己的主题，规划网页的版面；2.插入表格并对表格进行设置；3.设置背景图片、背景音乐、字幕。
三、教学步骤1.插入艺术字、文本框：“插入”——>“图片”——>“艺术字”“插入”——>“文本框”2.插入图片并设置超链接：“插入”——>“图片”——>“来自文件”——>“完成”——>选中——>单击鼠标右键“超链接”3.设置背景图片、背景音乐及字幕：网页的任意位置单击鼠标右键——>“网页属性”——>“背景音乐浏览”——>“确定”网页的任意位置单击鼠标右键——>“网页属性”——>“格式”——>“背景图片”——>“浏览”——>“确定”“插入”——>“Web组件”——>“字幕”4.设置表格属性及单元格属性：选中——>单击右键“表格属性/单元格属性”——>“确定”四、教学过程基于对前面的网页制作页眉页脚设置掌握后，要进一步讲解对版面的分割、文字图片插入技术的知识点。
FrontPage 2003 网页制作
按快捷键Alt + Fl打开文件夹列表窗格，使用Word 2003编辑文本资 料，并将编辑好的文字粘贴到网页右侧布局单元格中选择右侧文字 资料所在布局单元格，按快捷键Ctrl+ Fl打开任务窗格。设置单元 格格式左、右边距及文字垂直对齐方式，如图5-14所示。
个空白的网页。 2.使用模板或向导创建网页 选择“文件”→“新建”→“网页”命令，打开“新建”对话框。 在“新建”对话框的“常规”选项卡中，选择除“普通网页”图标
以外的任意一个模板向导选项。 单击“确定”按钮，Microsoft FrontPage。即可根据用户选择
的模板或向导创建包含指定文本、图形、网页元素的Web页。
模块5 FrontPage 2003 网页制作
任务1 FrontPage 2003 的基础知识 任务2 在网页中插入图片和超链接 任务3 使用FrontPage 2003组件美化制作动态网 任务4 发布管理网站
本章导读
FrontPage是一款当今很流行的网页设计软件，它集图 片网页设计、数据库应用、多媒体处理、网页特效等众多功 能于一体，并且能给设计者建立一个所见即所得的网页设计 环境。
上一页 下一页 返回
任务1 FrontPage 2003 的基础知识
5.1.3 网页的保存
选择“文件”→“保存”命令，在出现的对话框中的“保存位
置”下拉列表框中选定新文件的保存位置，在“文件名”文本框 中输入文件名称，在“保存类型”下拉列表框中选定新文件的保 存类型(一般为网页文件，如“Web页”类型)，最后单击“保存” 按钮即可保存当前网页。
学习目标
Frontpage2003网页设计与制作教学计划
《Frontpage2003网页设计与制作》教学计划
一、教学目标：
1. 知识与技能目标：
(1) 了解网页制作过程，初步学会如何分割网页版面；
(2) 掌握对网页中素材的简单处理方法，如插入图片、艺术字、文本框；对图片进行超链接设置。
2. 能力目标：
(1) 学习一种逆向思维方式，对版面进行设计能力，并充分利用背景图片、背景音乐及字幕的设置；
(2) 通过对演示的网页的分析与小组合作锻炼学生交流与表达，增强学生的
分析能力、动手实践能力；
(3) 学会将素材有效地组织在一起，以表达综合信息的能力。
3. 情感、态度、价值观：鼓励学生大胆构思，学生交流过程中学会尊敬他人，客观评价他人观点，同时认识到网页所展示的内容要积极向上。
二、教学重、难点：
教学重点：
1.利用Frontpage2003对设计的网页进行插入文本（包括艺术字、文本框
的运用）；
2.插入图片以及图片的超链接制作。
教学难点：
1.利用网页分割设计原理，结合自己的主题，规划网页的版面；
2.插入表格并对表格进行设置；
3.设置背景图片、背景音乐、字幕。
FRONTPAGE2003 教程(设计网站部分)
FRONTPAGE2003 教程（设计网站部分）FrontPage2003 教程轻松布局网页用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。
首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域，也就是单元格。
下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。
一、创建布局表格1.创建布局表格打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口(图1)，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。
创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最下。
3.设置表格属性插入表格后，还需对表格属性进行设置。
在“表格属性”项中设置该表格所需的属性。
提示:在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。
在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标- 1 -签。
每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。
FrontPage2003还提供了一个表格自动功能，它可以按照比例自动伸缩，调整表格的宽度和高度，使用时在边距标签下拉菜单中选择“自动伸缩”命令即可快速地对表格的尺寸进行调整，非常方便。
二、单元格的添加和设置1.添加单元格布局表格创建了网页框架后，还要向表格中添加单元格。
网页制作入门(frontpage2003教材) (4)
仅供个人参考网页制作4第三单元本单元以“可爱的中国”为主题，运用前2单元已经学过的F rontpage2003网页制作知识、制作完成“可爱的中国”主题网站。
第一课规划网站，主要是设计网站结构图及创建“可爱的中国”网站的站点，并为制作网站准备素材。
第二课设计框架网页，要求在左框架网页中始终显示导航栏,并且通过导航栏链接的网页能够分别显示在右框架网页之中。
第三课学习设置网页过渡效果以给浏览者提供美妙且富有情趣的视觉环境。
仅供个人参考第四课发布网站本课第一任务是对“可爱的中国”网站进行最后的检测。
第二任务是通过Windows系统中的“个人Web服务器”，将自己的计算机作为服务器，发布网站。
第五课将制作网站的一般步骤进行如下归纳，学生检查自己制作的网站并完成评价表的填写。
本单元中所用到的素材等，都保存在相关网页的相应文件夹中。
知识要点：第1课：1、规划网站的结构。
2、创建空白站点。
3、为网站准备素材。
第二课：1、创建框架网页。
2、保存框架网页。
第三课：设置网页过渡效果。
第四课：1、对网站进行检测。
2、利用个人Web服务器发布、测试网站第一课时规划与准备探究空间：可爱的中国、悠久的历史、灿烂的文化。
接下来，就让我们以“可爱的中国”为主题，从中国历史、地理、中国之最、中华民族等方面作为内容开始规划一个“可爱的中国”网站。
11、规划网站的结构仅供个人参考在开始建立网站之前，首先要确定网站的主题，然后根据主题确定这个网需要由多少个网页组成，以及这些网页之间的链接方式。
当我们确定了“可爱的中国”网站的主题后，经过分析，决定用5个网页来表现这个主题，如下图所示。
主页中国历史中国地理中国之最中华民族图3-1.1我们把上面的这个图称为网站结构图。
从这个图中可以看出，可爱的中国”网站的结构分为2层。
在制作网站之前画出结构图，不但可以帮助我们规划网站结构，使网站层次分明、条理清楚，还可以确定各个网页的内容，方便大家思考各网页之间的链接方式。
Frontpage2003网页制作
<html> <head> <title> 这是网页的标题 </title> </head> <body> 这是网页的主体部分信息 </body>
</html>
12.02.2021
实用文档
3.2.2 HTML的常用标记和属性
本节待续
23
办公自动化简明教程
实例（浏览结果）
3.2.2 HTML的常用标记和属性
12.02.2021
实用文档
本节待续
7
办公自动化简明教程
URL 的格式
3.1.1 WWW浏览
一个完整的URL如下： 协议名称://主机的IP地址|主机的域名/路径/文件标识
12.02.2021
实用文档
本节待续
8
办公自动化简明教程
3.1.1 WWW浏览
在地址栏输入：/
12.02.2021
实用文档
本节待续
32
办公自动化简明教程
实例（浏览结果）
3.2.2 HTML的常用标记和属性
12.02.2021
实用文档
本节待续
33
办公自动化简明教程
5. <font>标记
3.2.2 HTML的常用标记和属性
在HTML语言中，<font>标记被用来说明文本显示的各种特征 （大小、字体、色彩等）。
12.02.2021
实用文档
本节待续
25
办公自动化简明教程
实例（源代码）
3.2.2 HTML的常用标记和属性
<html> <head> <title> body标记的属性 </title> </head> <body bgcolor=”#00ff00” text=”#0000ff”> 绿底蓝字 </body>
第5章 网页设计初步-FrontPage 2003
第5章 网页设计初步－FrontPage 2003因特网已成为目前最主要的电子信息发布媒体，无论是政府、公司、企业、还是个人都纷纷建立自己的网站来发布和收集信息。
不仅如此、越来越多的公司、企业和政府还将自己的商务、政务活动放到网站上，从而使得网站又成为信息处理的新平台。
一、案例说明本例描述：本例通过一个个人网站的建立过程来简要介绍利用FrontPage 2003建立网页的基本方法和常用功能，使得学习者对网页的设计过程有个初步的了解。
本例知识点： 站点的建立、表格及其表格布局、插入图片、背景音乐、超级链接、电子邮件链接、图片热区链接、字幕制作、站点发布 二、方法指导1．熟悉Microsoft FrontPage 2003界面① 启动FrontPage 2003，图5.1所示的为FrontPage 2003的操作界面。
图5.1 操作界面2．新建站点创建一个名为“花样年华”站点，保存在“D :\my web \hynh ”操作方法：① 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网站”中的“由一个网页组成的网站”，打开如图5.2所示的“网站模板”对话框。
② 在“指定新站点的位置”处输入“D:\my web \hynh ”，双击“空白站点”图标，“花样年华”站点创建完毕。
菜单栏格式工具栏 标题栏 常用工具栏编辑区 网页显示方式任务窗口③ FrontPage 2003自动创建了“_ private ”和“images ”两个文件夹。
④ 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网页”中的“空白网页”，创建一个名为“index.htm ”的网页(新建的网页默认名称为“new_page_1.htm ”，可以在保存时改为“index.htm ”)。
⑤ 单击“视图”菜单中的“文件夹”命令，可以发现右边窗口中增加了一个标题为“index.htm ”的主页图标，如图5.3所示。
Frontpage2003网页制作讲义——网站创建篇
Frontpage2003网页制作讲义网站的创建篇一、准备工作1、构思：确定网站的主题，定好网站栏目。
2、资料：根据栏目结构，收集资料，制作图片、动画等素材。
3、重命名：将资料素材文件以英文字母或数字的形式重命名。
（说明：网站中的所有文件及文件夹都不可以用汉字命名，否则，会出现链接错误。
）4、归类：根据栏目结构，创建每一层栏目相应的文件夹，并将素材归类到相应的文件夹中。
（说明：在本例中，已经建立好文件夹，并将素材归类了。
）二、网站的创建1、创建一个空白站点：打开FrontPage2003，执行“文件”→“新建”命令，在右边的任务窗格中，选择“新建网站”栏下的“其他网站模板”，在弹出的“网站模板”对话框中选择“空白站点”，在右边的“指定新站点的位置”中单击“浏览”按钮，选择创建好的“首页的文件夹（如：webs），单击“确定”按钮。
2、在“导航”视图下建立网站的栏目结构①单击窗口下方“视图”工具栏中的“导航”，切换到导航视图。
接着单击工具栏中的“新建网页”按钮，建立网站的首页，即index.htm。
然后将“主页”重命名为“中国自然保护区”。
②在“中国自然保护区”图标上单击右键，选择“新建”→“网页”命令，分别建立它的4个栏目网页，分别将它们重命名为“法律法规”、“珍稀动物”、“珍稀植物”、“生态旅游”。
③在“珍稀动物”图标上单击右键，选择“新建”→“网页”命令，分别建立它的3个子栏目网页，分别将它们重命名为“兽类”、“爬行类”、“鸟类”、“两栖类”。
④在“珍稀植物”图标上单击右键，选择“添加已有的网页”命令，分别选择“珍稀植物”（文件夹：zxzw）下的3个子栏目网页，添加到导航中。
（说明：此步操作只是为了讲解“添加已有的网页”的作用，在实践中更多地采用第③步的方法。
）3、在“文件夹”视图下给各个网页重命名：单击“视图”工具栏中的“文件夹”，切换到文件夹视图，可以看到在导航视图中创建的网页都出现在右边的文件夹webs下，而且名称都用“new_page_”和数字表示（如：new_page_1.htm），这样不利于网站的管理，因此，我们必须把这些网页重命名为它们对应的网页名称（如：“new_page_1.htm”重命名为“flfg.htm”），注意这里同样不能用中文汉字命名。
FrontPage网页设计教学教案
FrontPage网页设计教学教案学生的起点行为：熟悉电脑之基本操作，例如启动电脑、开启与关闭档案，使用滑鼠等。
熟悉FrontPage2003软体的基本操作，如启动软体，开启与关闭档案，拖曳与按点滑鼠两下等。
了解PhotoImpact11工具列与属性工具列的位置，并已会存档与使用文字输入工具及百宝箱的基本操作。
贰、发展活动教师讲解一、建立资料夹按「我的电脑／（Ｃ：）／按右键／新増／资料夹」，输入：班级-座号姓名二、开启网站1.执行FrontPage程式：按「开始／程式集／ Microsoft Office／Microsoft FrontPage」2.开启网站：按「档案／开启网站」3.指定网站资料夹：「C:／个人资料夹」4.随即在左侧出现其网站(Web)架构图，称为「资料夹清单」（若不小心关闭，可按「检视／资料夹清单」开启）三、建立空白网页1.按「档案／开新档案」，右边出现「开新档案」窗格2.点选「其它网页范本」3.(或按工具列「建立新的网页／网页」)4.点选「框架页」标签，再点选「横幅和目录」後按「确定」5.出现框架，点选三个「新增网页」钮；表示新增三个空白网页6.将三个空白网页分别存档：按工具列「储存档案」钮，储存位置：「C:／个人资料夹」上面存、左边存、右边存7.最後将首页以为档名存入四、套用布景主题1.按「格式／布景主题／选取布景主题／套用为预设的布景主题」按「是」五、制作网页1.制作横幅元件执行PhotoImpact程式：点选「我的工作区／完整功整」按「是／正确」按「网路／元件设计师」：点选「横幅」样式，按「下一步」，设定「色彩」及「标题／文字」，输入如：「三信家商资处科二年13组10号周杰伦」，勾取「文字改变时，同时改变形状」按「汇出／作为个别物件」，按「储存」，储存於：「C:／个人资料夹／images」，输入档名：「title」，存档类型：「GIF」2.插入横幅元件回FrontPage画面，打开images资料夹，将拖曳至网页中，点选图，按右键／显示图片工具列，按「设定透明色彩」，点选横幅背景，设为透明六、制作网页1.制作按钮按「插入／Web元件／互动式按钮／完成」，点选「按钮」标签，再点选「按钮样式」，输入文字：「自我介绍」点选「字型」标签，再设定「原始字型色彩」、「停留时字型色彩」、「按下时字型色彩」点选「图像」标签，圈选「将按钮制成GIF图像并使用透明背景」2.复制按钮点选「自我介绍」按钮，按复制＋贴上复制四个，利用「按右键／按钮属性」，分别更改四个按钮文字为：「成长历程、好站连结、相片艺廊、与我联络」七、制作网页1.插入跑马灯：按「插入／Web元件／跑马灯／完成」，输入欢迎文字2.输入网站名称：按「插入／图片／文字艺术师」，帮自己的网站取超炫名字3.插入自制GIF动画八、按钮超连结设定1.按「新增页面」，新增、、、并输入标题，按储存2.点选「自我介绍」按钮，「按右键／超连结」，点选「」网页，目标框架：点选「右边」3.同上方法，成长历程（）、好站连结（）、相片艺廊（）4.点选「与我联络」按钮，「按右键／超连结」，点选「电子邮件地址」，输入E-Mail信箱，如」学生实作1.教师依步骤带领学生实作练习，并做行间巡视，了解学生的学习状况并解答问答。
《网页设计与制作》教案
一、教案基本信息教案名称：《网页设计与制作》教案适用课程：网页设计与制作课时安排：共20课时，每课时45分钟教学目标：1. 了解网页设计的基本概念和流程；2. 掌握HTML、CSS和JavaScript的基本语法和应用；3. 能够独立设计和制作简单的网页。
教学方法：1. 讲授与实践相结合；2. 案例分析；3. 小组讨论与协作。
教学内容：1. 网页设计基本概念与流程；2. HTML基本语法及应用；3. CSS基本语法及应用；4. JavaScript基本语法及应用；5. 网页设计与制作实践。
二、第一章：网页设计基本概念与流程课时安排：2课时教学内容：1. 网页设计基本概念；2. 网页设计流程；3. 网页设计原则与技巧。
教学方法：1. 讲授与实践相结合，通过案例分析让学生了解网页设计的基本概念和流程；2. 小组讨论，让学生分享对网页设计原则与技巧的理解。
教学活动：1. 引入案例：分析优秀网页设计案例，引导学生了解网页设计的基本概念；2. 讲解网页设计流程，让学生掌握从需求分析到设计制作的过程；3. 小组讨论：学生分组讨论网页设计原则与技巧，分享心得体会。
作业与评估：1. 课后作业：要求学生总结本节课所学的网页设计基本概念和流程；2. 课堂表现：观察学生在讨论中的参与程度和理解程度。
三、第二章：HTML基本语法及应用课时安排：4课时教学内容：1. HTML基本语法；2. 常用HTML标签及属性；3. HTML页面结构。
教学方法：1. 讲授与实践相结合，通过案例让学生掌握HTML基本语法和常用标签；2. 小组讨论，让学生分析实际案例中的HTML代码。
教学活动：1. 讲解HTML基本语法，让学生了解HTML代码的构成；2. 演示常用HTML标签及属性，让学生通过实践掌握其应用；3. 案例分析：学生分组分析实际案例中的HTML代码，理解其结构。
作业与评估：1. 课后作业：要求学生编写一个简单的HTML页面，运用所学标签和属性；2. 课堂表现：观察学生在讨论和实践中对HTML基本语法的掌握程度。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。
本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。
二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。
（一）知识目标：1.熟悉网页制作的基本元素；2.掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4.掌握常见的网页布局方法，学会使用CSS美化网页；5.掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。
7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。
（二）职业能力培养目标1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。
（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。
（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。
三、重点、难点章节及内容1.重点章节：1.2 网页、网站相关术语简介1.6 网站建设的基本流程2.3 Dreamweaver CS6的工作环境3.2 创建本地站点3.4 使用站点3.5 网页设计中的规范4.1 网页文件的基本操作4.3 插入文本4.4 插入水平线4.5 插入其他基本元素4.6 创建列表5.1 超级链接概述5.2 创建超级链接5.3 使用dw制作各种超级链接6.1 插入图像6.2 图像的HTML标签6.3 插入图像对象6.4 创建图像对象7.1 表格概述7.2 使用dwcs6创建表格7.3 表格的基本操作7.4在表格中添加内容8.1在网页中插入Div8.2 使用AP Div排版8.3 操纵AP Div8.4 设置AP Div的属性8.5 AP Div与表格的相互转换8.6 AP Div的行为9.2 DWcs6k中框架的基本事件9.3 浮动框架10.2 创建表单10.3 插入表单对象11.1 JavaScript11.2 行为12.1 插入媒体的使用12.2 音频12.3 视频文件13.1 CSS简介13.2 CSS的结构和规则13.3 CSS样式面版13.4 CSS样式的建立14.1 使用库项目14.2 模板15.1 测试网站15.2 发布网站15.3 管理站点和高级设置2.难点章节：3.2 创建本地站点3.4 使用站点4.4 插入水平线4.5 插入其他基本元素4.6 创建列表5.2 创建超级链接5.3 使用DW制作各种超级链接6.2 图像的HTML标签7.3 表格的基本操作7.4在表格中添加内容8.1在网页中插入Div8.2 使用AP Div排版8.3 操纵AP Div8.4 设置AP Div的属性8.5 AP Div与表格的相互转换8.6 AP Div的行为9.2 DWcs6中框架的基本事件9.3 浮动框架10.3 插入表单对象11.1 JavaScript11.2 行为13.3 CSS样式面版13.4 CSS样式的建立14.1 使用库项目14.2 模板15.1 测试网站15.2 发布网站15.3 管理站点和高级设置四、实践环节和内容总体设计（一）主要环节安排对于本课程的重点知识，主要采用操作演示、案例说明和任务驱动法来展开教学。
FrontPage网页制作教案(18课时)
FrontPage网页制作教案（18课时）第一节网页制作基础知识教学目标：1、了解网站、网页、主页和HTML的基本概念2、了解常见的网页制作工具3、掌握Frontpage的启动和退出教学手段：教师讲解与学生演示相结合教学过程：一．讲课：一、网页及其组成通过浏览器在WWW上所看到的每一幅画面都是一个网页（Web Page）。
网页是全球广域网上的基本文档，用HTML语言编写。
网页中所的元素主要有文字、图片、声音、动画、影像以及链接等，通过这些元素的有机组合，就形成了包含各种信息的网页。
其中，文字是网页中最常用的元素；图片可以给人以生动直观的视觉印象，适当运用图片，可以美化网页；链接的设计，可以使我们进行选择性的浏览；随着动态HTML技术的发展，人们在网页中加入声音、动画等多媒体信息，使网页更加丰富多彩。
二、常用的网页制作工具最初，人们利用HTML语言在文本编辑器中制作网页。
HTML语言是超文本标记语言（Hypertext Markup Language）的缩写，用来描述网页的结构，但不能直观的描述网页在浏览器中的效果。
因此，只有熟练掌握HTML语言的专业人员才能用它制作网页。
后来出现了一些网页制作工具（如CDIDA软件），降低了对HTML语言的要求，但是要实现某些功能，还必须输入相应的HTML代码。
FrontPage系列软件的问世，才将人们从HTML代码中解放出来。
用FrontPage软件制作网页就象在文字处理软件中编排多媒体文档一样，具有“所见即所得”的特性，而真正描述网页结构的HTML代码，则由FrontPage在幕后自动生成。
这样，大家都可以方便地制作自己的网页。
目前，使用较多的网页制作软件有：FrontPage、Flash、Dreamweaver等。
三、FrontPage2000的启动和退出1．启动方法：单击“开始”按钮，拖动鼠标指针依次指向“程序（P）”“Microsoft FrontPage”，并单击，即可启动FrontPage2000。
用FrontPage2003创建站点网页设计与制作教程第3版教学ppt课件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
2. 设置网页背景 单击“网页属性”对话框中的格式选项卡，在图7-21所示的对话框中可以设置更 加生动的背景。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
(2) 拆分单元格 在图7-10所示的对话框中选择“拆分成行”或“拆分成列”。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
(3) 设置单元格的格式和属性
在“单元格格式”任务窗格单击 “单元格属性和边框”项后，窗 格中显示图7-11所示的选项。
3. 向网页中添加Flash动画
当鼠标变成十字箭头样式时按下左键拖动将其移到适当的 位置，如图7-27所示。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
在弹出的快捷菜单中执行“Flash影片属性”命令，打开图7-28 所示的对话框，选择“透明”复选框后单击【确定】按钮，它 在浏览器中显示出来的效果如图7-29所示。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
其中，“水平对齐方式”和“垂直对齐方式”用来设置文字在单元 格中的对齐方式；“行跨距”和“列跨距”用来设置单元格纵向扩 展的行数或横向扩展的列数，如图7-19所示。
FrontPage 2003教 学 大 纲
FrontPage 2003教学大纲第一课基础知识一、如何学习FrontPage 2003？FrontPage 2003主要用于网页的编辑和网站的管理。
学习方法：由整体到具体有秩序的学习。
二、网站、网页的概念网站相当于一本书，网页相当于书中的每一页；也就是说，网站相当于一个房间，网页相当于房间中的每一件物品。
制作网站的流程：A、网站→网页（即整体→部分）B、网页→网站（即部分→整体）三、启动与关闭A、启动方法：1、双击桌面平台2、单击开始→程序→Microsoft Office→FrontPage 20033、双击桌面网页文档B、关闭方法：1、单击文件→退出2、单击标题栏中的关闭按钮3、双击标题栏中的图标4、ALT+F4四、界面介绍1、标题栏2、菜单栏3、工具栏4、new_page_1.htm（网页名）5、编辑区6、视图切换栏7、状态栏8、任务窗格（最右边）五、界面操作A、界面操作主要是对工具栏的操作，工具栏的布局主要有两种格式：1、悬浮格式2、嵌入格式B、工具栏的打开与关闭：1、单击视图→工具栏2、右击工具空白处六、视图的操作A、视图模式分为四种：1、设计2、拆分3、代码4、预览B、进行互联网预览按F12七、网站规划A、网站的风格：1、华丽2、平淡B、网站的结构：1、上→中→下2、上→中3、上→左→右→下4、垂直拆分5、横幅和目录6、脚注7、目录8、页脚9、水平拆分 10、嵌套式层次结构 11、自顶向下的层次结构C、网站的配色八、色彩搭配1、红色：热情2、橙色：时尚3、蓝色：宁静4、绿色：清新5、紫色：神秘6、黑色：深成7、灰色：高雅8、白色：明快九、设计草图十、总结第二课网站一、制作网站的流程操作流程A、主题：1、企业网站 2、个人网站B、风格：1、华丽 2、平淡C、规划：1、整体→部分 2、部分→整体D、配色：E、素材：F、版面G、编辑：H、测试：I、上传：二、网站元素级别网站可以包含一个或多个网页网页里面包含的元素：文字、表格、图片、动画、视频等。
初中信息技术《FrontPage2003制作简单的网页》表格式教案
《制作演示文稿》，不当之处还请大家批评指正，综合各方面的知识我将从以下几个方面进行阐述一、把握大纲，说教材教学内容：本节是省编教材初中第二册（下）第五章第二节的内容，是根据《我国特有的珍稀动物》这个主题创意，规划好演示文稿之后，利用powerpoint 软件，将搜集到的各种媒体素材插入到演示文稿的幻灯片中，并设置文字、图片等对象的大小、位置，完成演示文稿的初稿制作。
教材的地位和作用：本节是围绕演示文稿的制作展开的，是对前一节演示文稿的规划和筹备工作的应用，对幻灯片内容的具体充实，同时也为后面的修饰奠定了基础。
课时安排：1课时本节课的重点：幻灯片版式的选择、文本的添加和图片的插入。
确定的依据是因为使用幻灯片版式可以方便、快捷的确定素材的位置，还可以保证幻灯片布局的均衡。
文本的添加和图片的插入都是幻灯片制作中不可缺少的元素，他们放置的位置和编辑后的效果都直接影响到制作幻灯片的成功与否，，所以我将它们定为本节课的重点。
本节课的难点：幻灯片中素材的布局，插入素材后要考虑布局的均衡。
确定的依据是当想制作出有特色的演示文稿，一般不使用固定的幻灯片版式，需要自己设计，而制作幻灯片需要的素材一般比较多，如何将他们合理布局也比较复杂。
初二年级的学生对于幻灯片的整体规划和合理运用的能力有限，往往使幻灯片的布局不均衡，结果造成整体效果杂乱无章。
所以我将它定为本节课的难点。
二、凸显主体，说学情◆知识和能力方面：经过前面word的学习，学生已经熟悉对文字和图片的编辑，这节课的知识对学生来说比较容易上手，但是学生之间存在一定的差异，所以在教学中我适当地采取分层教学，对于基础较好的学生我将放手让他们自学，而对于能力较弱的学生，让他们在同学和老师的引导、示范讲解下完成任务。
生理和心理方面：初二的学生对于制作演示文稿的兴趣比较浓厚，但是青少年好动，注意力容易分散，所以在教学中我一方面运用直观生动的形象，引发学生的兴趣，使他们的注意力始终集中在课堂上；另一方面要创造条件和机会，让学生发表见解，发挥学生学习的主动性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《Frontpage2003网页设计与制作》教案
2009141119 郭飞
一、教学目标
1. 知识与技能目标：
(1) 了解网页制作过程，初步学会如何分割网页版面；
(2) 掌握对网页中素材的简单处理方法，如插入图片、艺术字、文本框；对图片进行超链接设置。
2. 能力目标：
(1) 学习一种逆向思维方式，对版面进行设计能力，并充分利用背景图片、背景音乐及字幕的设置；
(2) 通过对演示的网页的分析与小组合作锻炼学生交流与表达，增强学生的分析能力、动手实践能力；
(3) 学会将素材有效地组织在一起，以表达综合信息的能力。
3. 情感、态度、价值观：
鼓励学生大胆构思，学生交流过程中学会尊敬他人，客观评价他人观点，同时认识到网页所展示的内容要积极向上。
二、教学重、难点
教学重点：
1.利用Frontpage2003对设计的网页进行插入文本（包括艺术字、文本框的运用）；
2.插入图片以及图片的超链接制作。
教学难点：
1.利用网页分割设计原理，结合自己的主题，规划网页的版面；
2.插入表格并对表格进行设置；
3.设置背景图片、背景音乐、字幕。
三、教学步骤
1.插入艺术字、文本框：
“插入”——>“图片”——>“艺术字”
“插入”——>“文本框”
2.插入图片并设置超链接：
“插入”——>“图片”——>“来自文件”——>“完成”——>选中——>单击鼠标右键“超链接”
3.设置背景图片、背景音乐及字幕：
网页的任意位置单击鼠标右键——>“网页属性”——>“背景音乐浏览”——>“确定”
网页的任意位置单击鼠标右键——>“网页属性”——>“格式”——>“背景图片”——>“浏览”——>“确定”
“插入”——>“Web组件”——>“字幕”
4.设置表格属性及单元格属性：
选中——>单击右键“表格属性/单元格属性”——>“确定”
四、教学过程
基于对前面的网页制作页眉页脚设置掌握后，要进一步讲解对版面的分割、文字图片插入技术的知识点。
为了有利于小组间互相交流，每小组学生坐在一起，后期学生完成作品时教师起引导辅助作用，一步步引导学生完成本课的目标。