网页制作的教学设计

第一篇：网页制作的教学设计

《网页制作表单的设计》教学设计

表单的设计网页制作课程

15电商

4、5班2课时

一、【教学目标】

学会使用表单中文本域、图片域、单选按钮、复选框、跳转菜单、文本区域等的应用

二、【教学重点与难点】：

重点：文本域、跳转菜单，单选按钮的应用 难点：单选按钮的应用，跳转菜单的制作

三、【教学方法】

讨论法、讲授法、演示法、练习法

五、【教学过程】

一、 认识表单

表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。

二、 生成表单

1、表单的创建与表单字段的添加

“插入”—“表单”—“选择需要的表单类型”

2、表单向导

“文件”—“新建”—“网页”--“常规”——“表单网页向导”

三、 表单内容编辑

1、文本域——账号和密码的输入

3、图片域——制作提交按钮

4、单选按钮——性别选项设计

5、复选框——兴趣爱好设置

6、按钮 (“验证有效性按钮” 登录)

7、跳转菜单菜单——密保问题的设置

8、文本区域——留言框的制作

四、学生练习制作表单

制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、留言框、收货地址、兴趣爱好、提交按钮、重填按钮

六、【课程小结】

七、【作业】

完成课堂示范案例，校园网站的注册和登录页面设计

第二篇：网页的制作教学设计

网页的制作

一、教学题目：网页的制作

二、教学目标：

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识FRONTPAGE的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

三、教学重点：

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

四、教学难点：

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程：

教师活动：

1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

浏览新浪网站，浏览的第一个页面称为什么？（主页）

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为：index.htm,主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用Frontpage建立站点，制作一个主页。 先来研究一下没有发布的网站,打开教师做的网站 问：同学们看到了什么？（文件夹） 总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。请学生浏览教师课件，了解学习任务。

2、新建站点

FrontPage的启动 问：与word比较，有什么不同？（增加了视图区，编辑区有三个窗口） 总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面。

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式。

预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。 Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

任务1：学生根据导学课件，在d:建立自己站点 请一位学生示范如何建立站点,教师总结。 问：在文件夹列表中看到了什么？

分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中。

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

根据导学软件，学生完成任务2：设计主页、保存主页与图片

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到“普通”窗口下编辑 主页的保存中存在问题：

单击“文件”---“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

六、小结：

展示学生作品，教师与学生共同评价 请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

第三篇：以DIV+CSS为核心技术的《网页制作》教学设计与

实践

摘要：DIV+CSS是目前最流行的网页制作技术，但学习起来枯燥，不宜熟练掌握。为了提高教学质量，提升学习效果，进而使学生由浅入深、循序渐进地掌握这门技术，本论文通过教学方法的选用、知识点、技能点实践环节的设计和考核方式的设计等方面的探索，经过教学实践，总结出一些经验。

关键词：DIV+CSS教学设计

中图分类号：G642.0 文献标志码：A 文章编号：1674-9324(2015)30-0117-02

引言：

网页设计课程是一门实践技能很强、技术手段不断更新的技能课，随着网络技术的飞速发展，在XHTML网站设计标准中，已不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。最直接的特点就是，代码冗余小，网页打开速度快。结构和表现分离了，只需改变css就可改变网页的风格，而内容不变，这样维护和升级的成本降低了。对于初学者，常常被枯燥的代码和编写语言搞得焦头烂额，要收到显著的教学效果，教学方法尤其显得重要。

一、教学方法设计

教学方法是一门课程的教学中，教师为了完成既定的教学任务，实现教学目标，而在教学过程中运用的教学方式和手段。面对课程知识点和实操强的特点，可突出以下几种教学方式。

强调记笔记。记笔记有助于对学习内容的理解。记笔记的过程也是一个积极思考的过程，可调动眼、耳、脑、手一齐活动，促进了对课堂讲授内容的理解。尤其越是逻辑性强的课程越需要一个良好的学习习惯，而这正是高职学生所欠缺的。因此，面对这种特点的学生，教学方法中一定要注重有意识让学生建立良好的学习习惯。从第一节课就开始提出记笔记的明确要求，并纳入到平时作业成绩考核中，让学生不得不先重视起来。不定期地在课上练习和课后作业中引入笔记的内容，让学生明显意识到课上记了笔记，平时注重积累，做练习就会提高效率，事半功倍，否则，按时完成作业都相对费劲。有一个现象叫“飞轮效应”.为了使静止的飞轮转动起来，一开始我们必须使很大的力气，一圈一圈反复地推，每转一圈都很费力，但是每一圈的努力都不会白费，飞轮会转动得越来越快.达到某一临界点后，便无须再费更大的力气，飞轮依旧会不停地快速转动。因此，培养学生好的学习习惯也是一样，开始教师和学生可能都会很累，但只要坚持不懈，学生就会逐渐养成稳定良好的学习习惯，看上去很累的学习就会变得自然轻松。老师也会越教越轻松。

鼓励原则。美国作家马克?吐温说过：“一句好听的赞辞能使我不吃不喝活上三个月。”这句话夸张地描述了表扬的魅力所在。有时，一个赞许的目光能使人鼓起勇气，信心百倍。对于这个观点，在多年的教学生涯中，相信许多老师都受益匪浅。当前，DIV+CSS已经成为制作网页的一种技术潮流和趋势，学习者也必须不断提高自己的技能来适应这种变化。各种XHTML标签和CSS属性在实际的操作中，往往问题层出不穷，令学生头疼不已，如果在这个时候，不及时加以鼓励，就会导致教学效果半途而废。因此，一定要在学生面对问题时，主动与其一起思考，提出解决该问题的关键点，让学生自己尝试，而不是直接告诉答案，教学效果不言而喻。学生会认为是自己经过艰苦思考而最终战胜了困难，自信心增强，也就有了继续学习下去的动力。

循序渐进。面对高职学生，想要取得好的教学效果，循序渐进的教学方法必不可少。在课堂教学中，不要放过任何一个看上去非常简单的问题，有些小问题往往不简单，可以延伸出许多知识点，只有熟练掌握学会举一反三才能更加自如地运用该门技术。要选定一个难易度适中的网站，既不能太难模仿，使学生产生畏难抵触心理，又不能太简单，而达不到巩固教学内容的目的。学生在“模仿”课环节，对指定的网站首页和其他主要网页进行模仿还原，该网站的各类素材可以直接使用，对于页面在尺寸、色彩、外观上也可以相同。对于这种特定的、明确的任务，学生往往会表现出极大的热情。

对比较学法。制作一个简单的网页，尤其运用以前的TABLE布局技术，上手很快，容易实现，大部分初学者一旦学习了表格布局技术，就很容易依赖，而不愿意去尝试DIV+CSS技术了。面对这种问题，就要适时运用对比教学法，例如通过制作一个“简单相册”的小例子，让学生分别运用TABLE技术和DIV+CSS技术制作，完成之后，让学生观察代码有何不同。可以明显看出，table时代，一个页面表格嵌套10个以上是非常普遍的事情，从而页面代码冗长，杂乱无章。然后紧接着提出迅速更新页面的风格，让学生继续尝试完成。通过实践，学生就可以清晰得出结论，DIV+CSS技术的优势，内容和形式分离，更新页面风格，只需要改动CSS文件就像换件衣服一样简单容易。DIV+CSS技术制作“简单相册”代码如下：

简单相册

div，body，img，ul，li，p，a{ margin：0;padding：0}

.base{ margin：0 auto;width：530px}

ul{ list-style-type：none;width：530px}

li{ float：left;margin：0 5px;}

img{ width：150px;height：100px;border：1px solid #CCCCCC}

p{ font："宋体";font-size：9px;text-align：center}

h1{ font-size：24px;text-align：center}

风景相册

风景图片1

风景图片2

风景图片3

风景图片4

风景图片5

风景图片6

风景图片7

风景图片8

风景图片9

第四篇：简单的网页制作教程-设计一个个人网站

题目：设计一个个人网站

一、要求：

1.使用Dreamweave网页工具制作一个个人网站;

2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计)，网页之间用超链接相连。

3.网页中要有图片和文字内容，用表格进行页面布局; 4.添加至少两种行为，并为首页添加背景音乐。

5. 在网站中设计一个表单页面。

6. 首页必须包含页面标题，动态按钮导航栏。

首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图

做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。

选择站点——新建站点。

我们建的文件夹就是站点根文件夹。 新建站点后得到这样一个界面

点选高级，得到界面

站点名称与我们建文件夹得名字相同，zs填进去就可以了 本地根文件夹就是我们新建的那个文件夹zs， http地址为http://localhost/zs

接下来选择左侧栏里远程信息

点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹

接下来点选左面菜单里的测试服务器，

点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。

下面看老师的第一条要求，是要至少四个网页，那我们就做四个

单击新建，然后单击

接下来，选择

然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者

1、

2、

3、4，当然一个网站默认的索引首页名为index，这里也用index，

单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.html，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。

站点中已经有了四个文件。

接下来，我们开始编辑index.html。

单击index.html，显示为当前页面。

单击拆分，

然后我们看这个个网页就叫张三之家了，同样的方法给其他三个网页改名字。 A网页标题

，这个就是网页名字，我们以张三为例，这

，这样老师的第六条我们就完成一半

B网页标题

C网页标题

改好名字之后，一一保存，这个不多说了，接下来操作index.html。

显示首页为当前编辑页面。

首先为index.html页面添加背景音乐。

大家在代码视图里找到

，这个是什么意思就不解释了，我也不知道，就是这个了，在后面输入代码，

然看见这张图片上，

我光标指在哪里了吧，单击空格键，这个时候注意输入法要为美式键盘字母格式，只要不是汉字就行，得到一个菜单，单击src选中，然后单击enter建，这个时候紧跟着src会出现一个浏览，单击浏览，然后出现对话框，选择一首音乐，然后单击确定，

会继续弹出一个对话框点击是，保存到自己建好的文件夹里面，注意这里不能用汉字做音乐名字，必须改成字母或者数字

我是以beyond的歌为例，名字改为by，点击保存背景音乐就添加好了。 大家可以看一下，在站点目录下，已经有了这首歌曲。

接下来开始设计页面布局 这里用表格布局， 这个栏叫设计栏，由于大家都不会代码，所以我们主要在这个栏里操作，

下面大家点击常用里面的表格，就是下面这张图片

中的这个图标

得到对话框如图所示数据： 单击确定，得到如下界面

这个插入的表格式可以自动调整大小的，大家可以自己试一下，接下来用这些表格布局，给大家看两个图标， 这个图标就像是excel中那个合并和拆分单元格是一个意思，左边那个代表合并单元格，右面那个代表拆分单元格，excel大家都会把，就和那个布局差不错，我做一个简单的布局，为了方便，我把这个表格缩小，

这个布局很简单，第二行全部合并，第三行第二三列合并，大家可以根据自己的需要进行拆分合并，还可以在表格里面再次插入表格。

宽度和高度的设置时在代码里找到，之后把它变成

height=””>，其中align表示表格位置，height表示表格高度，大家可以根据自己的需要来填数字，默认是以像素为单位的。

接下来制作导航，这是老师第六条中的第二个要求， 注意我在这里给了两种方法，大家可以先看一下，再决定选择哪种

我没看懂什么叫动态按钮导航条，不知道是让这个字动呢，还是让这个字动呢?如果大家嫌麻烦，就直接输入汉字，结果就是下面这样的

如果要文字居中显示可以将这四个框同时选中，然后居中

在水平栏里面选择

以后所有的文字格式都可以在这里面选，但是首先要选中自己所要操作的文字。

创建链接，选中首页两个字，然后单击右键——创建链接，选择index.html，然后以同样的方法，给其他三个栏里的文字做链接，创建链接的文字会有下划线，同时改变颜色

如果大家不嫌麻烦，教大家用flash做一个动态的按钮导航，

把光标放在第一行第一个栏里，然后

这个常用栏里的flash按钮，单击后面那个小三角，选择flash按钮。 得到对话框

我们可以看到这个按钮的样式是可以自己选择的，大家随意选择一款自己喜欢的按钮，

然后在按钮文本栏里，填入首页两个字，字体设置随意，然后链接

这个栏里填入index.html，注意这里的链接就是超级链接，当你点击这个按钮的时候，它就会显示主页，我们设置后面三个按钮的时候，一定要记得，当你文本栏里填入个人简介字的时候，那你的链接就要指向简介那个页面，我们这里就是a.html。其他像什么背景色之类的随意，

然后单击确定。这样第一个按钮就做好了，接下来我们自己做剩下的三个按钮，注意链接问题，大家做好后，可以看到自己站点内多了四个swf格式的文件，这四个就是按钮，

保存的时候，有一个文件问是否要保存，一定要点击是，不然flash不运行了。

大家可以回到自己的文件夹里，打开首页，测试一下，是不是单击这四个按钮会指向自己所设置的网页，

然后我们给第二行设置背景颜色，以有弹出颜色选框，大家随意选择自己喜欢的颜色

单击背景颜色后面那个方框，可

接下来，完成老师的第五个要求，制作表单，这个把光标指向第三行第一个栏

选在表单选项中的。也就是第一个按钮，这时得到界面

我们把光标指向红线里面，输入“用户名：”然后点击表单选项中的第二个按钮弹出对话框，选择确定，得到界面

同样方法换行输入密码

再次换行，单击表单选项中的按钮项输入两个按钮，

然后选中第一个按钮，得到以下属性

将值后面栏里的文字改为登录，同样方法，把第二个按钮的值改为注册，

。

接下来插入文字和图片，在现在的第二行第二列里操作

把光标指向第三行第二列，选择常用栏

选择这个栏里的图像按钮，弹出对话框，这时大家选择自己电脑里的一张图片，单击确定后弹出对话框，问是否保存在站点根目录下，单击确定，这时候需要注意的是，图片名字不能有汉字，图像标签和辅助属性那一栏不用管，单击确定即可。

接下来就是输入汉字了，我们在图片的后面先输入汉字，可以看到这样的显示，

上面还空了很大一块地方，似乎不太好，不符合图文混排的规矩，

大家单击图片选中，在属性栏里找到找到到对齐那一栏，在后面点选左对齐，

得到最终图文效果是这样的。

第四行还有四个栏，大家可以在里面表明作者时间、以及自己的邮箱、QQ等内容，这里我就不写了。

实际上做到这里，我们几乎完成了老师的所有要求了就差添加两种行为了后面还有三个网页没做呢，怎么办啊，后面三个网页大家还没做，教大家一个简单的方法， 大家把鼠标指向了。

这个栏的左边，在表格和边框之间，我们可以发现，鼠标斜向右首先单击鼠标左键，选中这个表格然后不要移动鼠标，同时单击右键，单击拷贝，然后这个表格就拷贝好了，打开其他三个页面，分别粘贴过去，图像属性描述不用管，取消，这样做的好处是它的好处非常多。

大家打开a.html，这个是个人简介，就是一个图文混排了，图文混排我们已经讲过了，更何况我们这个页面里已经有了图文混排了，大家可以换一张图片，换一些文字，做一些自我介绍什么的，都可以。，但是我们最好把那个表单删掉，哪个是表单就不用我说了吧，

就是这个了。删掉之后，选中第三行三个栏，合并就好了， 第二个页面就做好了，

接下来我们看第三个页面，b.html，这个页面是个人相册

这里我同样分两种方法给大家讲， 第一种方法很简单。就是插入几张图片，

现在第三行剩下三个空栏，每个栏里插入一张图片，景色也好，其他也罢，然后加上图片说明，一切搞定，这个我就不写了， 第二种方法还是用flash做相册，首先大家合并第三行三个栏。

并将光标指向第三行，

然后单击这个图片中的插入记录——媒体——图像查看器，之后得到这样的界面

注意这个是可以调节大小的，看你想要多大的相册了。 单击选中，

我们会发现右面多出这样一个界面flash元素

在其中找到

然后单击后面的img1那里， 会发现后面多出一支笔，单击那个笔，弹出对话框

单击减号，将img1三个删掉，然后再单击加号，会多出一个文件夹标志，单击文件夹标志，然后弹出对话框

在自己电脑里选择一张图片，将图片保存到站点根文件夹下，还是那个问题，名字中不能有汉字，添加好第一张图片之后界面如图

大家可以多添加几张图片，这样一个相册就做好了，单击确定。 接下来就剩下第四页了，就是写几行文字的事情了，

把表单和图文混排都删除，然后合并三个栏，然后添加一些文字，搞定了。 这四个页面都做好了，我们还有一项任务没有完成，那就是给页面添加两个行为

下面我们讲添加行为，

打开首页，单击图像选中，然后找到一下命令，

看到行为面板下那个醒目的加号了吗 单击加号——交换图像，弹出对话框

单击浏览，在自己电脑中找出一张图片，单击确定，存放到站点根目录下，

这样第一个行为就完成了，当我们鼠标滑过这张图片的时候，就会变为另一张图片。 下面添加第二个行为，我们将光标指向第二行蓝色背景哪一行，然后单击行为面板下的加号——弹出信息，得到对话框

写上你好，单击确定。这样在我们单击蓝色地带的时候，就会弹出你好信息框。

第五篇：框架网页的制作教案设计与反思

江苏省宜兴市和桥镇第二中学 吕超 邮编：214211 E-mail：lvchao012326@163.com

一、教学目标：

1、知识与技能：

(1)、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。

(2)、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。 (3)、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。

2、过程与方法：

(1)、能够区分框架结构属性设置与网页属性设置的不同点。 (2)、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

(1)、能够将表格与框架结构网页结合使用，在创作中体验乐趣。 (2)、培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

(1)、框架网页的作用和功能，框架的建立与属性设置。 (2)、框架中各个页面之间的关联，每个框中页面的设置方法。 (3)、框架网页的保存方法。

2、教学难点：

(1)、框架结构网页中框架属性与页面属性的设置方法。 (2)、理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

(1)、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页(学生回答：使用复制、粘贴快捷地制作)。

(2)、教师又提问：有没有更好的方法呢?相同的区域我们能否只做一遍呢?从而导入新课——框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

(1)、教师展示一个框架网页，引导学生理解框架网页的概念。 (2)、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。 (3)、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。

(4)、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。 (5)、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第2

28、229页的实践学习。 (6)、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。 (7)、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

(8)、教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。

3、展示作品、课堂小结

(1)、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

(2)、教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步学习网页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。