第一篇：七年级信息技术《第四章 最近网络世界 第四课时 网页制作》教案[最终版]
第四章 最近网络世界 第四课时 网页制作
掌握建立网站与建立网页的方法 难点、关键：
建站点的位置
页面文件与图片的保存
教学方法：
演示、任务驱动 教学过程：
一、引入
同学们都很喜欢上网，平常上网我们所说的“西祠”、“新浪”等都是什么？ 概念:
通常我们在WWW上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇文章.网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书.制作网页的软件有很多，如FrontPage, Dreamwaver, Flash, Firework等 从今天开始学习如何用FrontPage制作网页
二、讲授新课
启动FRONTPAGE “开始”-“程序”-“Microsoft FrontPage” 认识工作环境
标题栏 菜单栏 工具栏 视图窗口6种视图模式 页面视图下3个选项卡 文件夹列表
视图窗口中的6个按钮代表6种不同的工作模式，网页模式下可编辑、制作网页，另外5种模式可以管理网站的结构及链接情况。
网页模式下，编辑区下方有3个选项卡，在选项卡上单击即可作相应的切换。其中“普通”窗口是一个“所见即所得”的环境，可以插入文字、图片、表格、加入特效等；“HTML”窗口直接提供编辑HTML源代码；“预览”窗口可以快速观看所编辑的网页在浏览器中显示的效果。
1、网站的建立：（教师演示）
打开FrontPage→文件→新建→站点→一个网页的站点→指定新站点的位置(如 D:ZS)→确定
*说明: ①站点建成之后FrontPage窗口界面会变成二块,自动打开站点文件夹.② “d:”为建立站点的位置。“ZS”为网站名称。
③可以切换到桌面,到目标盘去查看刚建成的站点,体验它与文件夹的区别.④通过关闭站点后再重新打开,体验它与文件夹的区别.完成课堂任务一（学生练习）
建立只有一个主页的站点，站点位置d:aaa，其中aaa为网站名称。
切换到桌面,到目标盘去查看刚建成的站点,体验它与文件夹的区别.关闭站点后再重新打开,体验它与文件夹的区别.2、设计主页：（教师演示）
双击index.htm,打开主页（请学生注意出现在编辑区上方的文件名，第一次打开时，文件名为newpage1，要设计站点中的主页必须打开index文件或把newpage1以index命名存盘），并选择在普通窗口下。
1、键入主页的主题（如：我的宠物、动物世界、卡通画廊等）
2、插入水平线
在“插入”菜单中选择“水平线”并单击。双击水平线可设置水平线属性。
3、插入图片
从剪贴画添加图片
在“插入”菜单中选择“图片”、“剪贴画”并单击。从文件添加图片
在“插入”菜单中选择 “图片”、“来自文件”并单击，选择“从计算机上选择文件”，浏览您要的图片并且选择该文件。
3、网页的保存
单击工具栏上的“保存文件”按扭
或在“文件”菜单上选择“保存文件”。
网页中有图片时会跳出如下对话框，最好选择“改变文件夹”，把图片保存在“images"文件夹中。
4、浏览网页效果
可以单击“预览”选项卡，在预览模式下浏览网页效果。
也可以选择“文件”菜单中的“在浏览器中预览”浏览网页效果。
完成课堂任务二（学生练习）
设计主页（要求有主题，有网站的简单介绍，并且包含文字、图片、水平线)
素材在“网上邻居”--“JS”--“素材”文件夹中。
保存主页、图片（必须保存在images文件夹中）并浏览
将建好的站点文件夹以自己的名字上传到教师机
方法：打开浏览器
在地址栏输入FTP://g1?@192.168.103.61
用户名 g1?
密码 g1?
注：？代表班级号
课堂任务二完成的较快的同学继续尝试做提高任务
1、尝试美化网页
(1)修饰文字与水平线
(2)插入背景图片
素材在“网上邻居”--“JS”--“素材”文件夹中。
(3)插入背景音乐
(4)插入滚动字幕
2、保存结果，并预览效果（在预览窗口或浏览器中进行）
三、展示部分学生作品
四、小结本次课内容
启动FrontPage，建一个自己的站点，设计一个主页
教后记：启动FrontPage，设计主页学生很容易做到，建站点的位置和文件的保存依然是学生所面临的难点，主要原因是学生搞不清站点的位置的意义和文件必须保存到站点内部的意义。
第二篇：网页制作教案四课时
网页欣赏
学习目标
知识目标：了解网页是由哪些内容组成的； 能力目标：了解网页的简单结构； 情感目标：培养学生的审美观念。本节重点：网页的概念 难点 网页的结构 学习过程
一、导入新课
精彩的网络世界吸引着无数人的眼球，对我们同学来说，它也被笼上了神秘的面纱。有些同学也想在互联网上建立自己的空间，但又觉得这是非常高深的事情，其实这一切并不是那么难。互联网上有非常多的信息，这些信息的载体就是网页。那么从这节课开始，我们学习如何制作网页。
二、学习新知 1.教学练技能
教师首先用网络广播的形式展示几个网页的图片，以此吸引学生的注意力，并注意每个网页的各自特点。
首先，我们来欣赏几个网页，在欣赏的同时，我们应该注意以下这些网页基本上都是由哪些元素组成的。
2.学习“学知识”
（1）打开浏览器，输入网址，让学生自己浏览；（2）学生上机练习。请同学们带着下面几个问题浏览网页，以小组为单位进行讨论，教师巡视。
（1）观察开的网页，看看上面都有哪些元素。（2）这些元素在网页中是怎样布置的？这样的结构有什么特点？ 这节课我们浏览了一些精彩的网页，也了解了网页的基本组成元素和网页的简单结构，同学们是不是想制作自己的网页呢？从下节课开始，我们将学习如何制作网页。
三、学生练习
四、教师总结
首先用网络广播的形式展示几个网页的图片，以此吸引学生的注意力，并注意每个网页的各自特点。
网页制作
学习目标
1、理解网页与网站的概念
2、掌握建立网站与建立网页的方法
3、掌握页面文件与图片的保存 学习重点
掌握建立网站与建立网页的方法 学习难点
1．建站点的位置 2．页面文件与图片的保存
课时安排：3课时 学习过程
第1课时
一、导入新课
师：上节课已经讲了信息集成（也就是网站建设）的一般过程包括四个阶段，现在请同学们回顾一下。
生：学生作答。
师：同学们平时都有喜欢上网，那大家知道网站与网页的区别吗？
概念：
网页：通常我们在WWW上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇文章.网站：网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书.下面我们来学习如何用Dreamweaver这个软件制作网页。
二、新课讲述
在制作个人网站之前，应先确定网站的主题。2008奥运会即将来临，这是中国政治，经济等综合国力提升到另一台阶的盛事，我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”，资料（包括文字、图片、动画）等我已经为大家收集好，内容分类，网站的结构也规划好了，利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设。
（一）启动Dreamweaver，认识其工作界面
“开始”-“程序”-“Macromedia Dreamweaver 8” Dreamweaver工作界面包括：菜单栏 插入栏 编辑窗口 属性面板 浮动面板组
1．菜单栏（包括10个菜单项）符号所表示的含意
黑色命令：表示该命令当前是可用的
灰色命令：表示该命令当前是不可用的，需要满足一定的条件后才能使用。
带有复选标记√的命令：表示该命令是一种可选择命令，若前面出现√标记，表示该命令正在使用；若没有√标记时，表示该命令没有被使用。
带有三角形▼的命令：表示在该命令下还有下一级子菜单命令。
带有省略号的…的命令：表示选择命令后会弹出一个相关的对话框。
带有快捷键号的命令：表示该命令有一个快捷键，当按下该快捷键时，即可执行该命令。2．插入栏
单击常用▼按钮，在弹出的下拉菜单中可以选择要插入的网页元素的类型
3．编辑窗口 包括：项目选择标签，文档工具栏，水平标尺，垂直标尺，编辑区域，状态栏，垂直扩展按钮和水平扩展按钮。
文档工具栏：代码按钮，拆分按钮，设计按钮，检查错误按钮，预览调试网页按钮，刷新设计视图按钮，用于隐藏文件内容，标尺，网格和辅助线按钮。
4．属性面板
用于查看各更改当前选择对象的各种属性。
（二）新建站点
为了有效地发挥Dreamweaver对网页的组织管理功能，通常在制作具体的网页之前，应先创建一个新站点，然后根据网站的具体结构制作网页。
[例1-1] 在D盘中建立一个名为“xinxiaoyun”的新站点。
操作步骤：
① 单击“开始”按钮，将指针依次指向“程序（P）”“Macromedia Dreamweaver 8”，并单击，即可启动Dreamweaver 8。
② 入Dreamweaver 8工作界面后，单击“站点”/“弹出站点管理”命令，弹出“管理站点”对话框。
③ 单击“新建（N）”按钮，在弹出的下拉菜单中选择“站点（W）”命令。
④ 弹出站点定义对话框，在“你打算为你的站点起什么名字”的文本框中输入站点的名称，如“心系奥运”。⑤ 单击“下一步”按钮，在弹出的对话框中选取中“否，我不想使用服务器技术”。
⑥ 单击“下一步”在弹出的对话框中选取择开发过程中如何使用文件，这里选中“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将把文件存储在计算机上的什么位置”文本框中输入本地站点的位置“D：”。
⑦ 单击“下一步”，在弹出的对话框中的“您 如何连接远程服务器”下拉表框中先择“无”。
⑧ 单击“下一步”，在弹出的对话框中单击“完成”。⑨ 弹出“管理站点”对话框，在其左侧列表框中将显示名为“xinxiaoyun”的站点，单击“完成”，完成本地站点的建设。
Dreamweaver将自动在指定位置建立一个站点，首先建立 “D： xinxiaoyun”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：“_private”和“Images”（存放图形文件），其余文件夹被隐藏起来。
第2课时
（三）新建网页
[例1-2] 在“xinxiaoyun”网站中建立第一个网页取名为“index.html”，设置背景色为：蓝色，字体为：黑色，并作相应文件的插入，完成后保存。（两种方法）1． 新建网页 操作步骤：方法一
① 选择“文件”/“新建”命令，弹出“新建文档”对话框，② 在“类别”列表框中选择需要创建的网页类别，如选择“基本页”选项，此时右侧的列表中将显示基示页网页的类型。
③ 在“基本页”列表框中选择所需创建军的网页类型后，单击“创建”按钮即可新建军指定类型的空白网页。
④ 再把网页另存为相应的站点下。2.网页的保存
单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框。
在“文件名（N）”列表框中输入“index”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，Dreamweaver还会继续询问是否保存这些嵌入的文件。此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。
3． 设置背景 设置网页属性：
新建一个网页之后，一般还需要设置网页的属性，选择“修改”/“页面属性”命令弹出“页面属性”对话框，在“分类”列表框中有“外观”“链接”“标题”“标题/编码”和“跟踪图象”5个选项。对页面进行相应的处理。
大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。另外，背景图案越小，网页的下载速度就越快。
设置背景的操作步骤：
① 单击“修改”命令，出现“页面属性”对话框，且“背景”标签已被打开。
② 单击“浏览（B）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。
页面制作完成，可以单击“预览”标签，观察一下效果。方法二：
在站的文件夹下直接创建，再做相应的设置。
4． 利用表格布局页面（布局表格和普通表格）操作步骤：
①“插入”/“表格”或者在常用插入栏中的“插入表格”按钮
②在表格对话框中设置插入表格的行数，列数，表格宽度，边框粗细，单元格边距等，③单击“确定”按钮完成表格的创建
（如果要边框显示就设置边框的值，如果不要，就将其设置为0）
5． 文字编辑
文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在Word中一样直接输入文字，进行编辑和排版，操作步骤：
① 选定标题“心系奥运”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。
② 选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。
6.插入图片 操作步骤：
①将插入点移到要插入图片的位置，“插入（I）”菜单中的“图像（I）”命令，打开“图像源文件”对话框，如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。
② 拖动图片到页面左侧适当位置。
第3课时
7．插入动画
在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。
插入动画的类型有多种，介绍三种：插入FLASH动画，FLASH按钮和FLASH文本 插入FLASH动画操作步骤：
①依次单击“插入（I）” 菜单中的“媒体”/“FLASH”命令，打开“选择文件”对话框，从“选择文件”对话框中选择所需动画“xx.swf”，单击“确定”按钮，插入动画。
② 拖动动画到标题下方适当位置。
③ 选择插入网页中的FLASH动画，此时单击“属性”面板中的“播放”按钮，就可以预浏动画。
插入FLASH按钮操作步骤：
① 依次单击“插入（I）” 菜单中的“媒体”/“FLASH按钮”命令，② 在“样式”列表框中选择按钮的样式，其效果显示在“范例“栏中，③ 设置按钮上的显示的文字 ④ 设置链接 ⑤ 设置打开方式为-blank ⑥ “另存为“文本框中输入FLASH按钮存放的路径 ⑦ 按“确定”按钮完成按钮的插入。
⑧ 在属性面板中可以设置相关的属性，如宽，高，文件名和对起方式等。
插入FLASH按钮操作步骤：
① 依次单击“插入（I）” 菜单中的“媒体”/“FLASH文本”命令，② 设置文字相关属性 ③ 设置链接
④ “另存为“文本框中输入FLASH文本名。⑤ 按“确定”按钮完成按钮的插入。
⑥ 在属性面板中设置相关的属性后，单击“确定”，这样当将鼠标移到文本时，文本颜色就会发生变化
8．插入背景音乐 操作步骤：
a.“插入”/“标签”命令弹出标签选择器的对话框 b.在左侧树型列表框中选择“标签选择器”/“HTML标签”/“页元素”命令，然后在右侧的列表框中选择bgsound选项，c.单击“插入（I）”按钮，弹出“标签选择器-bgsound” d.单击“源”文本框后的“浏览”按钮，选择要播放的音乐文件，e.在“循环”下拉菜表框中输入要播放的次数，也可以选择“无限”一直播放。
f.单击“确定”完成设置，关闭所有的对话窗口。8.设置超链接（文本，图形）①选择要设置超链接的文本
②在“属性”面板中“链接”下拉列表框后的选择 ③选择要链接的目标文件，按“确定”
④设置“目标”下拉列表框中选择超链接的打开方式。（blank Self,present,top），图形的与文本的一样方法。
如果还有比较多的时间可以找一下特效代码演示给学生看，并且告诉他们怎样使用这些特效代码。比如：走马灯效果
三、课时要求
第1课时要求学生把所建的站点以学号+姓名命名交到FTP上，检查建站点的情况，第2，3课时要求完善第一节课的页站。
四、巩固练习
建一个自己的站点，设计一个主页，学生自命主题。
第三篇：高中信息技术《网页制作初步》教案
高中信息技术《网页制作初步》教案
www.xiexiebang.com 教材分析
教学内容：高中信息技术第五章第二节《网页的制作》。
教学重点：网页文字处理、插入图片、动画、水平线以及设置背景的方法。
教学难点：通过网站自主学习，让学生自己建立网页。
学生分析
本课对象是高一学生，学生通过前面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.xiexiebang.com
第四篇：FrontPage网页制作教案(18课时)
FrontPage网页制作教案（18课时）
学期教学计划
一、教材简析
本学期使用的计算机教材是江苏科学技术出版社出版的初中信息技术教科书。同时，由于配合高中阶段选修网络课程，增加部分网络知识。
本教材主要内容如下：１、网络基础知识２、网页的建立３、网页图片的处理４、网页框架的设计５、网页表格的制作６、网页表单的制作７、创建超链接８、动态网页的制作９、网站的建立
二、学情评价
１、学生学习网络和网页制作的兴趣浓厚，热情较高 ２、学生的计算机基础知识掌握不够牢 ３、学生运用电脑的能力较差 ４、部分学生上机行为不够规范
５、有些学生键盘操作不熟练，用一只手操作键盘现象较严重
二、目的要求
１、提高学生学习计算机网络知识的兴趣，注重动手能力 ２、规范学生上机行为，养成良好的习惯
３、掌握基本的网络知识和网上获取信息的能力 ４、对学生适时进行爱国主义教育
５、成绩指标：平均分80，及格率98％，高分率80％
三、教学措施
１、认真钻研，精心备课２、仔细讲授３、耐心辅导４、严格要求学生
四、教学进度
序次 课题：（内容）课时 周次
序次 课题：（内容）课时 周次 1
机房常规教育和课程安排
练习、实践
１ 10 2
网络基础知识，制作工具
动态网页制作
１ 11 3
网页的建立、网页属性设置
网站建立
１ 12 4
网页图片的处理
设置单元格式
１ 13 5
练习、实践
开始
网页框架的设计
分组做网站 7
网页表格的制作
网页表单的制作
创建超链接
第一节
网页制作基础知识
教学目标：
1、了解网站、网页、主页和HTML的基本概念
2、了解常见的网页制作工具
3、掌握Frontpage的启动和退出
教学手段：教师讲解与学生演示相结合
教学过程： 一．讲课：
一、网页及其组成
通过浏览器在www.xiexiebang.come.htm。
操作步骤： 1． 文字编辑 2． 插入图片
插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种，但最常用的是GIF和JPG格式的图片，因为这两种图片的文件长度较小，有利于提高网页的浏览速度。所以，插入其他格式的图片后，在页面存储时，系统会自动将图片格式转换成GIF或JPG格式。
3． 插入动画
在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。
操作步骤：
（1）依次单击“插入（I）” 菜单中的“图片（P）”、“来自文件（F）„”命令，打开“图片”对话框，单击“浏览”按钮，打开“图片”对话框，单击“浏览”按钮，从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。
（2）拖动动画到标题下方适当位置即可。
4． 插入水平线
水平线是贯穿网页宽度的细灰条，用来分隔文本成加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。
调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。5． 设置背景
（1）单击“格式（O）”菜单中的“背景（K）„”命令，出现“页面属性”对话框，且“背景”标签已被打开。
（2）单击“浏览（B）„”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。
页面制作完成，可以单击“预览”标签，观察一下效果。
三、网页的保存 单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框.在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图5-11所示。
此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。练习：
1． 在设计网页过程中，定义字体时要注意哪些问题？
2． 为什么在网页中通常都使用GIF或JPG格式的图片文件？ 设置网页的背景时，可不可以使用较大的图片？有什么缺点？
制作“自我简介”
制作“自我简介”
一、教学目标
1、让学生熟悉FrontPage 2000的界面。
2、学会制作网页标题。
3、学会在网页中插入美丽的图片。
4、学会在FrontPage 2000中使用表格。
二、重、难点使用表格
三、教学方法演示法、讲授法、实践操作法、比较讨论法
四、教学类型新授课
五、教学过程
[导入]前面大家了解因特网的神奇世界，畅游了丰富多彩的网站，欣赏了精美华丽的网页。看到这么多漂亮的网页，同学们是否也想自己在网上建立一个自己的“家园”？现在我们将学习如何利用FrontPage 2000在因特网上安一个自己的“家”。
在因特网上安“家”的一般步骤大致可分为网站规划、网页制作和上传发布三个阶段。本章创建的整个网站主要由“自我简介”、“成长之路”、“兴趣特长”和“网上交流”等网页构成。
[讲授]创建网上家园，首先应将自己的有关情况展示出来，让来访者对自己有一个大概的了解。这里，先来看一个同学制作好的“自我简介”网页。
这个网页包含有图片、表格和相关文字等，下面学着制作这个网页。每个网页都有一个标题，让来访者一目了然。在“自我简介”网页中用“自我简介”几个文字来作为这个网页的标题。
[演示]
1、单击屏幕左下角的“开始”按钮，在“开始”菜单中选择“程序”→“Microsoft FrontPage”菜单命令，进入FrontPage 窗口。
2、在网页编辑工作区输入文字“自我简介”，单击“格式”工具栏上“居中”按钮，将文字居中。
3、选中文字“自我简介”，通过“格式”工具栏的“字体”下拉列表，选择“楷体_GB2312”。
4、在“格式”工具栏选择“字号”为“24磅”，“颜色”为“粉红色”
5、单击“常用”工具栏上的“保存”按钮，弹出 “另存为”对话框。
6、在“文件名”中输入文件名“简介”后，单击“保存”按钮，保存网页。[实践操作]
1、使用“格式”→“字体”菜单命令也可以方便地设置字体。启动FrontPage，在编辑工作区中输入文字“兴趣爱好”，使用菜单命令改变字体。
2、单击“HTML”标签，观察编辑工作区的变化。[提醒]在网页设计中，对于非Windows自带的字体尽量少用，以免造成别人浏览此网页时无法显示这种字体，影响网页整体效果。
[讲授]
1、FrontPage启动后，会自动打开一个新的空白网页窗口。FrontPage窗口与前面所学的Word窗口类似，由标题栏、菜单栏、工具栏、编辑区和状态栏组成。
2、网页文件实际上是一个按HTML语言规则编写的文本文件。我们看到的网页是浏览器对HTML文件进行逐条解释，再显示出来的结果。
HTML是英文Hyper Text Markup Language的缩写，意为“超文本标记语言”。这种语言用“<>”来标记网页中对象的格式和有关参数。网页中除了文字保存在HTML文件中外，其他对象（如声音、图象、动画等）在HTML文件中只是保存了相应的标识和有关参数，真正是内容还在这些对象的文件中。因此，这些对象的文件如果被删除或改变了位置，就不能在浏览器中正确显示出来。
[讨论]如果在两个文字之间增加了一个空格后，间距又显得太大，此时应怎样调整才能得到合适的间距呢？
[实践操作]启动FrontPage，分别建立主题为“兴趣特长”和“成长之路”的两个网页，并保存为xingqu.htm和chengzhang.htm [讲述]你在因特网上漫游时，精彩生动的图片会使人流连忘返。在自己的网页上添加美丽的图片，一定也会增加吸引力。
[演示]
1、打开网页jianjie.htm，选择“插入”→“换行符”菜单命令，弹出 “换行符属性”对话框，选择“普通换行符”，单击“确定”按钮，将光标下移一行。
3、单击“常用”工具栏上的“插入文件中的图片”按钮，弹出 “图片”对话框。
4、单击“剪贴画”按钮，弹出“剪贴画库”窗口，在“比喻”类别中找到剪贴画图片，将此图片插入到网页中。
5、调整图片的大小，并居中放置。
插入图片[讲授]
1、使用回车键换行时，行距较大，而采用普通换行符来换行，行距为0。
2、FrontPage中可以插入的图片文件格式很多，如GIF、JPEG、PNG和BMP等。其中BMP格式的图片是未经过压缩的，文件较大，一般很少使用；而GIF、JPEG、PNG格式的图片都是压缩过的，文件较小，便于在网页中浏览和下载，所以经常使用。[实践操作]
1、在已建立的网页“成长之路”中，选择“插入”→“图片”菜单命令，加入合适的图片，并调整图片的位置和大小。
2、在已建立的“兴趣特长”网页中，使用“常用”工具栏上的“插入文件中的图片”按钮，加入合适的图片，并调整图片的位置和大小。
3、选择“格式”→“背景”菜单命令在网页中加入背景图片
以图片为背景的网页[讲解]在FrontPage中使用表格，可以整齐地排列文本，有效地组织数据，使整个网页看起来简洁清晰。我们下面来使用表格制作出自我情况介绍。
网页中的“自我简历表” [演示]
1、单击“常用”工具栏上的“插入表格”按钮，制作出一个6行2列的表格。
2、在第一行第二列中，单击鼠标右键，在弹出的快捷菜单中，选择“拆分单元格”命令，弹出 “拆分单元格”对话框。
3、选取“拆分为列”选项，在“列数”框中输入3，单击“确定”按钮，将此单元格分为三列。
4、输入表格中相应的文字。
5、按住Ctrl键，单击表格的第一列和第三列，选中此两列，在“格式”工具栏上设置“字体”为“黑体”，“字号”为“4（14）磅”，“字型”为“粗体”。
6、选中第二列和第四列，设置“字体”为“楷体”，“字号”为“4（14）磅”。
7、选中表格的 所有行，单击“格式”工具栏上的“居中”按钮，将文字居中。
8、选中第二行、第四行、和第六行，单击“格式”工具栏上的“突出显示颜色”按钮，选择突出显示颜色为“浅绿色”。
9、选中整个表格，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”菜单命令，弹出 “表格属性”对话框。
10、选择边框颜色为“粉红色”，单击“确定”按钮，制作出 “自我简历表”。[试一试]删除表格的某一行、某一列或整个表格。[小技巧]
1、选中表格的多行、多列或多个单元格时要按住Ctrl键不放，再选取所需的行、列或单元格。
2、选中整个表格的方法：在表格的最左或最右边双击鼠标左键，当所有单元格反色显示时表示该表格被选中。[学生阅读并实践] 表格的编辑方法 用表格来安排版面 [实践操作]
1、在自己所建的xingqu.htm网页中使用表格展示自己的兴趣爱好。在chengzhang.htm网页中加入能反映自己成长过程的图片。
2、建立一个2行6列的表格，在表格中插入图片和表格。
3、将本节中所制作的主题文字、图片和表格进行混排。
[总结]
本小节我们学习了制作几个简单的文字网页，进一步熟悉了文字的设置。学会在网页中插入图片，并能利用插入的表格更方便地实现图文混排的设计，使网页看起来简洁利落。同学们对表格的使用需要进一步加强练习。
第五篇：网页制作教案
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................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>......，强调文字，通常用斜体。
< 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 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |