2023年网页制作教学课件（精选多篇）.docx

《2023年网页制作教学课件（精选多篇）.docx》由会员分享，可在线阅读，更多相关《2023年网页制作教学课件（精选多篇）.docx（118页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、2023年网页制作教学课件（精选多篇） 推荐第1篇：用FrontPage制作网页课件教程 用FrontPage制作网页教程 【教学目标】了解用FrontPage制作课件的优势与不足，学会用FrontPage制作网页型课件。 【重点难点】重点是如何在FrontPage插入多媒体素材，难点是课件交互性的实现和网页源代码的应用。 【教学策略】教师实例演示，学生上机操作，教师辅导和点评。 【媒体选择】主要采用FrontPage示范课件和实际操作讲解相结合，并辅以文字教材 、网上学习资源和教学光盘。 【教学内容】 一、FrontPage 基本操作 1.启动 FrontPage ： 双击桌面上的 Fron

2、tPage 快捷方式图标； 开始程序 Microsoft FrontPage ；右击一个扩展名为 htm 或 html 网页文件，选“编辑”。 2.打开或隐藏视图栏、文件夹列表和网页文档 a.点“视图 视图栏”打开或隐藏视图栏。点“视图 文件夹列表”打开或隐藏文件夹列表。 b.右击 扩展名为 htm 或 html 网页文件（ 如 index.htm ） ，选“编辑”，系统默认用 FrontPage 打开网页。 c.点“文件 打开”或点 常用工具栏中的“打开”按钮， 从本地磁盘或网络驱动器中打开网页文档，从任意 Web 网站打开网页，打开最近打开过的网页文档。 3.在 FrontPage 编辑器

3、中预览网页 a.点普通视图按钮，观察刚才打开的 index.htm 网页。 b.点 HTML 视图按钮，观察 index.htm 网页。 c.点预览视图按钮，观察 index.htm 网页。 4.FrontPage 视图方式： 网页视图，文件夹视图，报表视图，导航视图，超级链接接视图，任务视图。 5.保存网页： 点“文件 保存（另存为）”或点 常用工具栏中的“保存”按钮，将新建的网页或从万维网上打开的网页保存到本地磁盘，把自己喜欢的网页作为模板保存。 6.关闭网页： 点“文件 关闭”或文档窗口 中的“ X ”按钮，关闭当前网页。 二、网页课件制作实例 1.创建站点 （ 1 ）在本地硬盘（如 D

4、 盘）建一个文件夹 , 用英文或汉语拼音命名 , 如 myweb, 打开它。 （ 2 ）启动 Microsoft FrontPage 。 （ 3 ）点“文件 新建 站点” , 选择“空站点”图标，再在“指定新站点的位置”栏中输入新建的站点文件夹（ D:myweb ），或通过单击“浏览”按钮来指定。点“确定”后片刻，编辑区出现一个空站点。 2.建立框架网页 （ 1 ）点“文件 新建网页”，选框架网页”选项卡 , 双击“横幅和目录”。编辑区被划分为上框架、左 框架和 右 框架 3 个区域。 （ 2 ）点上框架区中的“新建网页”按钮 , 切换到上框架网页编辑状态 , 点“插入 组件 字幕” , 在“

5、字幕文字”栏中输入网页课件的标题 , 选“交替”表现方式和“连续”选项 , 确定。根据需要插入图片、gif 动画或 Flash 动画。 （ 3 ）点左框架区中的“新建网页”按钮 , 切换到左框架网页编辑状态 , 输入表示课件目录的文本，如“情境导入”、“新课”、“课堂练习”、“知识扩展”、“课堂小结”、“网上学习资源”、“课外探究”等（或插入相应的图片）。 （ 4 ）点右框架区中的“新建网页”按钮 , 切换到右框架网页编辑状态 , 输入前言文本，插入与课件主题相关的图片或动画。该页相当于课件的封面、前言或首页。 （ 5 ） 点常用工具栏上的“保存”按钮，将弹出保存框架网页的对话框（共 4 个）

6、。注意框架网页的命 名要与框架一一对应起来，即 top.htm 对应上 框架 网页 ， left_frame.htm 对应左 框架 网页， right_frame.htm 对应右 框架网页， index.htm 对应整个 框架 。 3.建立内容网页 右击“文件夹”窗格空白处 , 选“新建网页” , 命名为“ daoru.htm ”。双击它，在右边的编辑区制作完成“导入”网页。点 常用工具栏上的 “保存”按钮。 用同样的方法创建“新课”网页 xinke.htm 、“课堂练习”网页 ktlx.htm 、“知识扩展”网页 zskz.htm 、“课堂小结”网页 ktxj.htm 、“网上学习资源”网页

7、 wsxxzy.htm 、“课外探究”网页 kwtj.htm 。 4.制作超链接 双击“文件夹”窗格中的 index.htm （ 主页） , 在 左 框架网页目录区选中表示 “情境导入”的文本或图片，右击它，选“超链接”，在弹出的“插入超链接”对话框中选中 daoru.htm, 确认目标框架的默认值为 main ，点“确定”。用同样的方法将“新课”与 xinke.htm 、“课堂练习”与 ktlx.htm 、“知识扩展”与 zskz.htm 、“课堂小结”与 ktxj.htm 、“网上学习资源”与 wsxxzy.htm 、“课外探究”与 kwtj.htm 建立超链接关系。 点“预览”按钮，点左

8、框架网页目录区的超链接，看它所对应的网页是否在右框架区正确地显示。 5 完善课堂练习网页 双击“文件夹”列表中的 ktlx.htm ，在右 框架区 输入练习题（例如一道有 A 、B 、C 、D 四个选项的多项选择题）。 右击“文件夹”窗格空白处 , 选“新建网页” , 命名为“ right.htm ”，该评价网页存放回答正确的反馈信息。双击它，点“插入 图片 来自文件” , 点“从计算机上选择一个图片文件”按钮 , 选中合适的 gif 动画文件 , 确定。弹出“保存嵌入式图片”对话框，点“改变文件夹” , 选“ images ”文件夹 ( 默认存放站点图片的文件夹 ) ，点“确定”。在插入的

9、gif 动画右侧输入表示鼓励、赞赏的文本（如“您真行！”、“您真聪明！”）。点“保存”按钮。用同样的方法制作“ wrong.htm ”，该评价网页存放回答错误的反馈信息。 回到课堂练习网页 , 依次将 A 、B 、C 、D 四个选项链接到评价网页 , 目标框架设“新建窗口”，即在新窗口中打开评价网页。保存后预览。 推荐第2篇：网页设计与课件制作大赛方案 第七届“科技之光”文化节之“课件制作与网页设计 大赛“方案 主办方：玉林师范学院物理科学与工程技术学院团委学生会 一、活动名称： 第七届“科技之光”文化节之“课件制作与网页设计大赛” 二、参赛对象： 物理科学与工程技术学院全体学生 三、参赛项目

10、： A.课件制作B.网页设计 四、活动宗旨： 为了拓展我院学生素质教育的空间，增强校园文化活动的科技含量，促进学生人文素质和科学素质的有效融合，进一步提高学生的动手实践能力和创新能力，我院决定于4月份举办物理学院第七届“课件制作与网页设计”大赛。 五、活动时间地点安排： 1、报名时间：4月2日（开始）4月12日（截止） 2、作品收集时间：4月12日（开始）至4月23日（截止） 3、演示评比时间：4月27日（星期五）晚上7：30 4、演示地点：待定 六、报名和上交作品方式： 有意参赛者请到各班班长处报名，班长登记好本班参赛者名 单（附联系方式和参赛项目）后，并于4月12日之前将名单发 到网络部邮

11、箱，参赛选手请于4月23日前把作品发到网络部邮 箱（wlxywlb2023）。 七、参赛要求： 1、作品要求主题鲜明突出，结构布局合理，设计风格独特，创意新 颖，浏览方便，交互性强，页面美观且具有艺术品位 2、网页作品内容可选班级、个人网页（每个作品要求5个页面以上） 3、网页应有较好的浏览兼容性，适应IE 6.0以上浏览器浏览 4、合理地运用课件制作或网页设计的各种技术 5、使用工具软件不限，可以使用powerpoint、Dreamweaver、 Photoshop、Frontpage、Flash、fireworks、Authorware等软件 6、参赛作品必须享有自主知识产权，每个作品应附

12、带一份该作品的 简介word文档 7、作品可以是个人的，也可以是多人一组，但每组不得超过3人 八、评比方式及奖项设置： 方式：1）初赛：由评委组老师通过投票方式依次选出10份优秀作品， 每个项目各五份 2）决赛：4月27日晚7：30分现场演示评比，最后以得分高 低的顺序评出奖次 奖项：1）设一等奖2名（组），二等奖4名（组），三等奖4名（组），优胜奖若干名 2）获奖者均由物理学院颁发荣誉证书以及物质奖励 物理科学与工程技术学院团委学生会 2023年04月02日 推荐第3篇：用FrontPage制作网页课件教程汇总 用FrontPage制作网页课件 【教学目标】了解用FrontPage制作课件的

13、优势与不足，学会用FrontPage制作网页型课件。 【重点难点】重点是如何在FrontPage插入多媒体素材，难点是课件交互性的实现和网页源代码的应用。 【教学策略】教师实例演示，学生上机操作，教师辅导和点评。 【媒体选择】主要采用FrontPage示范课件和实际操作讲解相结合，并辅以文字教材 、网上学习资源和教学光盘。 【教学内容】 现在越来越多的课件是用网页制作工具来制作，并结合数据库、ASP 等技术来加强课件的交互性。网页形式的课件可以集成丰富的多媒体信息，具有交互性强、制作简易、体积小、便于在网络上发布、传播和更新等优点，适合于个别化学习、课堂教学和网络教学。 网页课件的开发工具软件

14、有很多，包括： 语言编程如 HTML 、D HTML 、ASP 、JSP 、PHP 、JAVA 、JavaScript 、VBScritp 、VRML 等。 所见即所得的可视化编辑工具，如 FrontPage 、Dreamweaver 、Flash 、Authorware 、PowerPoint 、CourseBuilder 等。 对于一般都有繁重教学任务在身的学科教师来说，没有太多的精力去学习复杂的编程语言。 可视化网页编辑工具由于源代码自动生成，使教师可以有更多的精力关注内容的表达和教学设计。 用 FrontPage 编制的网页课件有较易操作的界面（与上网浏览网页完全相同），一门课程或一堂

15、课的脉络结构（知识结构）可以在主页上用菜单（树形菜单或弹出菜单）或导航条的形式清楚地表明，可以列出教学目的、内容、重点难点、引言、概念性质、例题、练习、小结、作业等等，甚至操作注意事项。 FrontPage 被公认为最好的入门级的网页编辑工具。 一、FrontPage 基本操作 1.启动 FrontPage ： 双击桌面上的 FrontPage 快捷方式图标； 开始程序 Microsoft FrontPage ；右击一个扩展名为 htm 或 html 网页文件，选“编辑”。 2.打开或隐藏视图栏、文件夹列表和网页文档 a.点“视图 视图栏”打开或隐藏视图栏。点“视图 文件夹列表”打开或隐藏文件

16、夹列表。 b.右击 扩展名为 htm 或 html 网页文件（ 如 index.htm ） ，选“编辑”，系统默认用 FrontPage 打开网页。 1 c.点“文件 打开”或点 常用工具栏中的“打开”按钮， 从本地磁盘或网络驱动器中打开网页文档，从任意 Web 网站打开网页，打开最近打开过的网页文档。 3.在 FrontPage 编辑器中预览网页 a.点普通视图按钮，观察刚才打开的 index.htm 网页。 b.点 HTML 视图按钮，观察 index.htm 网页。 c.点预览视图按钮，观察 index.htm 网页。 4.FrontPage 视图方式： 网页视图，文件夹视图，报表视图，

17、导航视图，超级链接接视图，任务视图。 5.保存网页： 点“文件 保存（另存为）”或点 常用工具栏中的“保存”按钮，将新建的网页或从万维网上打开的网页保存到本地磁盘，把自己喜欢的网页作为模板保存。 6.关闭网页： 点“文件 关闭”或文档窗口 中的“ X ”按钮，关闭当前网页。 二、设计网页课件的框架结构 三、在网页中插入表格、图像、背景、剪贴画、声音、视频 和动画等多媒体对象 1.插入表格 插入 到网页上的文本、图片、音频、视频、动画等元素，往往看起来显得不够整齐，为了使网页更美观，我们利用表格来控制复杂的网页布局，即 用 表格来定位 网页元素 。 (1) 点“表格 插入 表格”，输入行数、列数

18、（如 3 列 5 行），插入一个规则表格， 设置表格的属性。 (2) 用“表格”工具栏上的 按钮或“表格”菜单上的“插入行或列”命令来增加 表格的 行或列。 (3) 用“表格”工具栏上的按钮删除一个单元或多个单元，删除一行、多行或一列、多列，删除整个表格，表格删除后立即按“常用工具栏”中的“撤消”按钮或按“ Ctrl+Z ”恢复表格；选择单元格或单元格中的内容用鼠标把选择的内容拖到新位置进行移动；按住 CTRL 键，再用鼠标把选择的内容拖到新位置进行复制。 (4)选中需要拆分的单元，单击“表格”工具栏上的按钮或使用“表格”工具栏上的“笔”拆分单元格；选中需要合并的单元，单击“表格”工具栏上的按

19、钮或单击“表格”工具栏上的( 擦除 ) 按钮合并单元格。经过处理， 3 列 5 行的表格 变成 1 列 4 行。 2.插入图像和背景图象 2 将鼠标定位到要插入图片的位置（如某个单元格内），单击“常用工具栏”上的“插入图片”按钮，从已建站点的图片文件夹中 选择 合适 的图片，点击“确定”。也可以 在“图片”对话框中点击“插入一个计算机中的图片”按钮， FrontPage 编辑器将打开“选择文件”对话框，从本地磁盘中指定一个图像文件。 右击网页空白处，选“ 网页属性 ”快捷命令，单击“ 网页属性 ”对话框的“背景”选项卡，先选中“背景图片”复选框，选择合适的图像作为背景图插入网页，点击“确定”按

20、钮。 3.插入剪贴画 点“插入”“图片”“剪贴画”命令，选择一幅剪贴画，单击“插入”按钮，或直接双击剪贴画。 4.插入声音或视频剪辑 选择“插入”“高级”“插件”命令，打开“插件属性”对话框，单击“浏览”按钮，打开“选择插件数据源”对话框，从站点文件夹或本地计算机上指定要播放的声音或视频文件。调整网页中插件图标到合适的尺寸。 5.修改图像属性 右击网页中的图像，选“图片属性”命令，在“常规”选项方式下指定图像的格式（例如 jpg 和质量 75 ）；在“文本”框内简单地描述图像；单击“外观”选项卡，指定图像无边框即边框线宽度为 0 ，指定图像与相邻的文字或图像之间的水平间隔和纵向间隔，要改变图像

21、的大小，首先选中“大小”框内的“指定大小”复选框，然后分别指定图像的宽度和高度。熟悉“图片”工具栏：创建自动缩略图；调整图像的黑白对比度和亮度；给图像加上斜面边界；把彩色图像变成黑白图像；把图像翻转；修正图像；裁剪图像；淡化图像；把图像恢复原样；在 GIF 格式的图像上写文字；使 GIF 图像透明等。 6.插入水平线美化网页 网页水平线用于把网页分隔成几个部分。新建或打开网页文档，把插入点移到要插入水平线的地方，单击“插入”菜单上的“水平线”命令。要把水平线插入在下一行，就把插入点定在行尾。在水平线上单击鼠标右键，在弹出的菜单中选择“水平线属性”命令，也可直接双击该水平线，设置水平线的宽度 、

22、水平线的对齐方式和水平线的颜色。 四、在课件网页中使用书签和超级链接接 1.书签的作用 书签用于在长网页内部快速跳转和定位。 2.创建书签 网页 从 Web 网页上复制一篇比较长的文本，粘贴（选择性粘贴：无格式文本）到新建网页中。 3 选择要标记的位置，单击“插入”菜单中的“书签”命令。 FrontPage 编辑器将显示“书签”对话框。在“书签”框中键入书签名称（最好用西文命名），书签名称应具有较好的描述性，然后单击“添加”按钮。可看到标签小旗出现在期望定位的位置上。用同样的方法创建其它书签。 在网页顶端创建系列提纲（目录）文本，选中其中一个，右击文本，选“超链接”，在“链接到”栏中点“本文档

23、中的位置”，在书签列表中选中合适的书签，确定。用同样的方法给其它的提纲（目录）文本建立超链接。保存网页，在 IE 中预览。 3.超级链接 使用超级链接，不仅可使站内的网页成为一个有机整体，还可使不同的站点之间建立联系。例如，在制作“网上学习资源”网页时，需要给所列出的大量的网上学习资源的标题文字设置超链接，以便访问者通过点击网页上的标题文字打开相对应的学习资源。首先选中标题目文字，然后单击标准工具栏上的“超级链接”按钮，在弹出的“创建超链接”对话框中指定超级链接所对应的网页，或在 URL 文本框中填入网页的地址即可。 4创建图像热点作为超级链接接 新建或打开包含有复杂图片（如地图或大型仪器图片

24、）的网页。练习创建图像热点作为超级链接接。例如，在世界地图片上的“国家地区”区域处创建一个热点，指定它跳转到“按国家地区查询”的主页上。方法是：首先单击图像，编辑器将显示“图片”工具栏，选择“图片”工具栏上的“图片”按钮，把光标移到图像上，光标将变成笔状，按住鼠标左键在图像上画出热点。释放鼠标后， FrontPage 编辑器自动打开“创建超级链接”对话框，在此指定该热点要跳转的目标网页或网址。制作好后在 IE 浏览器中预览。 5.改变超级链接的外观 选择某文字超级链接，单击“格式”菜单上的“背景”命令，打开“网页属性”对话框的“背景”选项。把该超级链接的颜色改为另一种更醒目的颜色，预览一下，看

25、超级链接文字是否发生变化。试着用不同的颜色表示未访问过的超级链接 (Hyperlink) 、访问过的超级链接 (Visited Hyperlink) 和将要访问的超级链接 (Active Hyperlink) 。看看改变超级链接的外观的效果。 6.编辑超级链接属性 右击超级链接，选“超级链接属性”，FrontPage编辑器将打开，在URL框内键入新的网页文件名或网址。观察改变后的效果。 7.取消超级链接 右击超级链接，选“取消超级链接”命令。 五、插入活动元素 - 让课件网页活起来 1.制作悬停按钮 4 定位插入点，单击“插入” / “组件” / “悬停按钮”，打开“悬停按钮”对话框。把动态按

26、钮默认标签“按钮文本”，改成所需的按钮文字，单击“字体”按钮，在打开的“字体”（字体）对话框里设置您所需标签的字体。要为动态按钮创建超级链接，可直接在“链接到”框内键入要跳转的 URL ，也可单击“浏览”按钮，从当前打开的网站、WWW 、本地磁盘中指定跳转目标。可重新指定按钮的前景颜色，不过如果按钮显示的是图像，前景颜色无效。当用户把鼠标移到动态按钮上时，按钮的颜色将自动发生变化，这是动态按钮最大的特色，至于颜色是怎样变化的，可通过“效果”和“效果颜色”框设定。还可改变按钮的宽度和高度（以像素为单位）。动态按钮还有一些高级用法，单击“自定义”按钮，在“自定义”对话框可设置播放声音或音乐和在动态

27、按钮上显示图像等。 2.制作横幅广告 定位插入点后，单击“插入” / “组件” / “横幅广告管理器”命令，打开“横幅广告管理器”对话框。单击“添加”按钮从图片目录下分别获取图片序列（例如 01.gif 04.gif ），设置宽度、高度、渐变效果、显示每幅图片时间。要为横幅广告创建一个超级链接，只需在“链接”框内键入跳转目标的 URL ，或者单击“浏览”按钮定位跳转目标。 3.制作字幕 定位插入点后，单击“插入” / “组件” / “字幕”命令，打开“字幕属性”对话框。在“文本”框内键入要显示的字幕内容，设定文字游动“方向”、“速度”、“表现方式”、“文本对齐方式”等选项。在“表现方式”框内，

28、可指定字幕游动的方式，默认是“滚动条”，如果选“幻灯片”，表示当第一个字符而不是最后一个字符触及左边界时就停止游动，如果选“交替”，表示像钟摆那样在左右边界内摆来摆去。可任意设置字幕的宽度和高度，字幕的宽度和高度既可以按像素的绝对值给出，也可以按 Web 浏览器窗口的百分比给出。默认情况下，字幕周而复始，不停地游动，周而复始。您可让字幕只游动若干次，方法是，不选中“连续”复选框，然后在“次数”框内选择要游动的次数。此外，还可给整个字幕加上“背景颜色”。 4 、插入 Flash 动画 方法一：“插入”“ Web 组件”“高级控件”“插件” （ 1 ）将鼠标定位到要插入 Flash 动画 的位置，

29、单击菜单命令“插入”“ Web 组件”，在“插入 Web 组件”对话框中“组件类型”列表框中选“高级控件”，再在右边点选“插件”，单击“完成”按钮。 （ 2 ）单击“插件属性”对话框中的“浏览”按钮，打开“选择插件数据源”对话框，选择要插入的 swf 课件，单击“打开”按钮。 （ 3 ）返回“插件属性”对话框，设置合适的“高度”、“宽度”等项，单击“确定”按钮。双击插入到网页中的插件，或右击，选“插件属性”，均可打开“插件属性”对话框，进行修改。 方法二：“插入”“ Web 组件”“高级控件”“ ActiveX 控件” （ 1 ）用插件的方法播放 .swf 课件，操作简单、实用，但如果要对 .

30、swf 课件进行更 5 多的控制，应在“插入 Web 组件”对话框中点选“ ActiveX 控件”，单击“下一步”， 打开“插入 ActiveX 控件”对话框，在控件列表框中查看是否有 “ Shockwave Flash Object ”，如果有，点选它，单击“完成”按钮。如果没有，则点击“自定义”按钮，打开“自定义 ActiveX 控件列表”对话框，勾选“ Shockwave Flash Object ”控件，单击“确定”按钮，返回“插入 Web 组件”对话框，点选新增加的“ Shockwave Flash Object ”，单击“完成”按钮。 （ 2 ）这时网页中会出现一块白色矩形区域。用

31、鼠标双击它，在弹出的“ ActiveX 控件属性”窗口中有三个选项卡，选“ Flash 属性”，设置好各选项。图中各选项的含义是： 影片 URL ：输入或粘贴要插入的 Flash 动画的链接地址； 品质：默认为“ High ”（高质量播放），推荐选择“ Best ”（最优播放）； 比例：推荐选择“ Show All ”（完全显示）； 播放：务必勾选； 循环：是否勾选该项取决于 Flash 动画的内容，通常要勾选该项； 显示菜单：通常勾选该项； 窗口模式：默认为 Window ，通常无须更改； 其它选项如“嵌入影片”、“设计字体”、“排列”、“背景颜色”通常按默认设置即可。 六、在 课件中巧用框

32、架 1 创建框架网页 使用“文件”菜单上的“新建”，在“新建”对话框上单击“ 框架 ”选项，选择“横幅和目录”模板，单击“确定”按钮。 2 把制作好的三个独立网页，指定到左 框架 、右 框架 和上 框架 单击上面框架网页的“设置初始网页”按钮，弹出“创建超级链接”对话框，在站点目录中选中上网页（ top.htm ），“确定”。按同法把左网页（ left_frame.htm ）和右网页（ right_frame.htm ）分别指定到左 框架 和右 框架上 。 3 框架的基本操作 单击一个框架内的任意地方，该框架就被选中，成为当前活动的框架。该框架中的网页也就成为当前活动的网页。把光标移到框架与框

33、架之间的分隔线上，等光标改变形状后单击，可以选择所有的框架。 4 改变框架的尺寸 6 把光标移到框架的边框上，等光标改变形状后拖动边框，直到框架拖拉成最适合各网页框架大小。 5 修改框架的属性 选择某框架，在框架上单击鼠标右键，在弹出的菜单中选择“框架属性”命令，在“选项”框内，选中“可在浏览器中调整大小”复选框，指定“显示滚动条”为“从不显示”。单击“框架网页”按钮，在“网页属性”对话框，选中“显示边框”复选框。单击“确定”按钮 2 次，完成设置。 6 保存框架网页 点常用工具栏上的“保存”按钮，将弹出保存框架网页的对话框（共 4 个）。注意框架网页的命名要与框架一一对应起来，即 top.h

34、tm 对应上 框架， 左网页 left_frame.htm 对应左 框架， 右网页 right_frame.htm 对应右 框架， index.htm 对应整个 框架 。 七、网页课件制作实例 1.创建站点 （ 1 ）在本地硬盘（如 D 盘）建一个文件夹 , 用英文或汉语拼音命名 , 如 myweb, 打开它。 （ 2 ）启动 Microsoft FrontPage 。 （ 3 ）点“文件 新建 站点” , 选择“空站点”图标，再在“指定新站点的位置”栏中输入新建的站点文件夹（ D:myweb ），或通过单击“浏览”按钮来指定。点“确定”后片刻，编辑区出现一个空站点。 2.建立框架网页 （ 1

35、 ）点“文件 新建网页”，选框架网页”选项卡 , 双击“横幅和目录”。编辑区被划分为上框架、左 框架和 右 框架 3 个区域。 （ 2 ）点上框架区中的“新建网页”按钮 , 切换到上框架网页编辑状态 , 点“插入 组件 字幕” , 在“字幕文字”栏中输入网页课件的标题 , 选“交替”表现方式和“连续”选项 , 确定。根据需要插入图片、gif 动画或 Flash 动画。 （ 3 ）点左框架区中的“新建网页”按钮 , 切换到左框架网页编辑状态 , 输入表示课件目录的文本，如“情境导入”、“新课”、“课堂练习”、“知识扩展”、“课堂小结”、“网上学习资源”、“课外探究”等（或插入相应的图片）。 （

36、4 ）点右框架区中的“新建网页”按钮 , 切换到右框架网页编辑状态 , 输入前言文本，插入与课件主题相关的图片或动画。该页相当于课件的封面、前言或首页。 （ 5 ） 点常用工具栏上的“保存”按钮，将弹出保存框架网页的对话框（共 4 个）。注意 7 框架网页的命 名要与框架一一对应起来，即 top.htm 对应上 框架 网页 ， left_frame.htm 对应左 框架 网页， right_frame.htm 对应右 框架网页， index.htm 对应整个 框架 。 3.建立内容网页 右击“文件夹”窗格空白处 , 选“新建网页” , 命名为“ daoru.htm ”。双击它，在右边的编辑区制

37、作完成“导入”网页。点 常用工具栏上的 “保存”按钮。 用同样的方法创建“新课”网页 xinke.htm 、“课堂练习”网页 ktlx.htm 、“知识扩展”网页 zskz.htm 、“课堂小结”网页 ktxj.htm 、“网上学习资源”网页 wsxxzy.htm 、“课外探究”网页 kwtj.htm 。 4.制作超链接 双击“文件夹”窗格中的 index.htm （ 主页） , 在 左 框架网页目录区选中表示 “情境导入”的文本或图片，右击它，选“超链接”，在弹出的“插入超链接”对话框中选中 daoru.htm, 确认目标框架的默认值为 main ，点“确定”。用同样的方法将“新课”与 xi

38、nke.htm 、“课堂练习”与 ktlx.htm 、“知识扩展”与 zskz.htm 、“课堂小结”与 ktxj.htm 、“网上学习资源”与 wsxxzy.htm 、“课外探究”与 kwtj.htm 建立超链接关系。 点“预览”按钮，点左框架网页目录区的超链接，看它所对应的网页是否在右框架区正确地显示。 5 完善课堂练习网页 双击“文件夹”列表中的 ktlx.htm ，在右 框架区 输入练习题（例如一道有 A 、B 、C 、D 四个选项的多项选择题）。 右击“文件夹”窗格空白处 , 选“新建网页” , 命名为“ right.htm ”，该评价网页存放回答正确的反馈信息。双击它，点“插入 图

39、片 来自文件” , 点“从计算机上选择一个图片文件”按钮 , 选中合适的 gif 动画文件 , 确定。弹出“保存嵌入式图片”对话框，点“改变文件夹” , 选“ images ”文件夹 ( 默认存放站点图片的文件夹 ) ，点“确定”。在插入的 gif 动画右侧输入表示鼓励、赞赏的文本（如“您真行！”、“您真聪明！”）。点“保存”按钮。用同样的方法制作“ wrong.htm ”，该评价网页存放回答错误的反馈信息。 回到课堂练习网页 , 依次将 A 、B 、C 、D 四个选项链接到评价网页 , 目标框架设为“新建窗口”，即在新窗口中打开评价网页。保存后预览。 推荐第4篇：网页制作教学设计 网页制作教

40、学设计 一.教材分析 网页制作是浙教版信息技术基础第六章第二节的内容，它以“北京故宫”网站为例，介绍了网页制作的一般步骤。本文设计了两个实践体验“设计制作网站主页”和“设置超链接”，而这恰好是制作网站最重要的两个环节。网页制作这一部分的内容不仅在会考还是高考都是一个专题模块，因此这部分知识在整本书中占有举足轻重的地位 二.学情分析 高中的学生只要在初中上过信息课，他们都曾接触过制作网页制作的简单操作，而且大部分都上过网，对网页的布局、设计和制作带来了方便。教材中采用的网页制作软件是FrontPage2000，由于FrontPage2000采用了与Word等其他Office软件相类似的图形操作界

41、面。在第三章，学生已经学过了Word字处理软件。因此，学生对FrontPage2000的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识的迁移对后续的学习非常有利。 三.教学目标 （一）知识与技能 1、FrontPage2000的启动 2、新建与保存网页 3、主页命名与设置网页标题 4、文字与图片的插入及属性的设置（如文字大小、字体、颜色等，图片大小、格式转换、环绕样式等） 5、表格的插入及边框粗细的设置 6、单元格的合并于拆分 7、超链接的制作 （二）过程与方法 1、通过简单网站的制作，认识网站的结构 2、通过网页的制作，掌握设计网页的一般步骤 3、欣赏别人的网站，

42、学会规划与设计网页的能力 （三）情感态度与价值观 1、通过自行制作的网站，体验创造的乐趣和成功的喜悦 2、通过欣赏和评价优秀的网站，激发学生创作欲望和学习兴趣 四.教学重点和难点 重点： 1、文字与图片的插入 2、表格的应用 3、超链接的设置 难点： 1、如何安排文字与图片的位置关系，使页面更和谐 2、如何拆分与合并单元格，使表格的布局更为合理 五.教法与学法指导 教法：任务驱动法 演示法 学法：小组合作法 探究法 六.教学准备 本节课的学习是在机房中进行的，除了需要连成局域网的机子外，还需带广播功能的软件，如极域软件等。教师准备一个优秀的网站及一些制作网站的素材 七.教学策略与总思路(或总环

43、节框架) 学生是学习的主体，应掌握学习的主动权。本节课的设计，以提升学生的自主探究能力以及分析问题、解决问题等能力为目标。本节课刚开始通过名人并且是制作优秀的个人网站展示，让学生分析网站中的元素，然后通过任务驱动的方式，让学生自主探究如何制作这些元素，接着通过小组合作的方式来制作他们喜爱的站，最后来交流和评价他们的作品。 八.教学过程 （一） 情景创设（2） 展示“姚明”的个人网站，学生不仅看到了他们的偶像，更重要的是被精美的网页所吸引。接着要求学生通过阅读课本，提问1：网页中所包含的元素有哪些？提问2：这些元素是如何制作的？ 【设计意图：通过欣赏“姚明”的个人网站，吸引学生们的注意力，激发他

44、们的学习兴趣。同时为引出下面的知识做好铺垫】 （二） 新课讲授（2） 1、文字的插入：复制粘贴 2、文字属性的设置：选中文字，再按要求在文字工具栏上选中相应的值 3、图片的插入：插入图片来自文件 4、图片格式的转换：右击图片图片属性常规类型 5、图片的环绕样式：右击图片图片属性常规样式格式定位 6、表格边框粗细的设置：右击表格表格属性边框粗细 7、单元格的合并与拆分：选中要合并的单元格或要拆分的单元格，再右击 8、超链接的对象：既可以是文字也可以是图片 9、常见超链接的类型：链接到网址链接到本地网页文件链接到电子邮件 【设计意图：这个环节老师只花2分钟的时间，点到即止，告诉学生碰到问题可以在操作提示中去寻找帮助（由于之前学生学过word，所以有些操作能力比较强的学生可以不借助于提示），并不做详细的操作演示。因为它包含在下面操作任务的提示中，目的在于培养学生自主探究能力】 （三） 实践体验 任务一：