制作网页登录页面-【经典教育教学资料】

2024年2月4日发(作者：)

课题 实现登录页面布局

（1）了解网页登录页面的元素。

课时 1

教学目标

（2)能利用PHOTOSＨＯP制作登录页面所需的图像。

（3）能利用Ｄreamｗeaｖer cｓ5实现登录页面的布局。

(4)会使用属性面板并进行相应修改。

重点

难点

掌握创建站点、插入表格、插入图像、保存、预览等基本操作

登录页面的布局，单元格属性的设置

教学

重难点

课前准备

教师准备 PＰT课件,案例，上机环境

学生准备 熟悉Ｄreaｍweaver cs5的界面,会进行站点的操作

教学过程设计

第一环节

创设情景

导入课题

展示电商网站“京东”登录页面。

任务１：请学生观看登录页面,回答它包含了哪些主要元素?

:(1)账号输人框:用于采集用户账号信息。

(２)密码输人框:用于采集用户的密码信息。

（3）登录按钮:用于将账号和密码信息提交到服务器。

(4)其他登录方式：用户登录网站的其他选择。

(5)忘记密码:用户用于获取密码的途径。

(6)立即注册:新用户注册会员的途径。

第二环节

任务2:用PＨOＴOSHOＰ制作登录页面所需的图像

新课教学

如果无法完成的同学，就利用老师准备的素材做任务３

1 / 8

任务３:实现登录页面的布局

(1)创建站点(yｍzz０1），新建并保存文件(iｎdｅｘ)。

网页需要保存在站点中。打开“文件”菜单,选择“保存”命令,或按快捷键〈Ctrl〉+〈S〉,将弹出“另存为”对话框,选择保存的位置并输入保存文件名，单击“保存”按钮即可将网页保存。

注意：文件名通常使用小写英文字母,不使用空格、特殊符号，不要使用中文。文件命名尽量以四种方式命名：汉语拼音、汉语拼音缩写、英文或英文缩写,以方便通过文件名直观地了解页面内容。

(2）插人表格。设置表格为行-列,宽 ４２４(像素)边框１（像素）,表格居中对齐。如图右图所示。100%,表格居中对齐,如下图所示

。(3)嵌套表格。在当前表格中插人一个新的表格， 设置表格为9行1列、宽

2 / 8

（4)插人图像。依次从1至9行插人图像“0.ｊpg、、ｇ 、３．ｊｐｇ、4.ｊpｇ、5.ｊpｇ、6．jpｇ、7.jｐg、８．jpｇ、9.ｊpｇ。(其中第3行、第八行不插图像)如右图所示。

3 / 8

(5)、保存网页

(6)预览。按Ｆ1２键，预览用户登录页面,如图2- 26所示。

任务２ 修改单元格属性

单击“单元格”,选择“属性”面板,找到“单元格”的各种属性,就可以设置它的对齐方式。第三环节

课堂练习

巩固练习后展示学生作品。

第四环节 本课学习了网页登录页面的元素，用Dｒeamweａvｅr ｃs5实现登录页面课堂小结 的布局、保存、预览等各种基本操作，并学习了单元格属性的设置方法。

对于这堂课的学习，如果要学生要自己完成一个网页文件的创建、保课后反思

存、预览等各种基本操作，并学习了网页属性的设置方法的过程，在课堂上的时间是远远不够的。因此课堂教学需要延伸到课堂以外,学生才由足够的空间和时间去思考,去计划,去体验。

解决问题的策略

教学内容:苏教版教材五年级上册第94-９5页例1和练一练,第９７页练习十七第1-3题。

教学目标：

1.使学生经历用列举的策略解决简单的实际问题的过程，能通过有序地列举不重复、不遗漏找到符合要求的所有答案。

2.使学生在解决简单实际问题的过程中,感受“一一列举”的特点和价值，进一步发展思维的条理性和严密性。

3.使学生进一步积累解决问题的经验，增强解决问题的信心。

教学重点:认识、掌握解决问题“一一列举”的策略。

教学难点：掌握有序列举和列举结果的筛选。

教学准备:

1.教学课件

2.学生活动单

３.自我介绍,已学过的解决问题策略的复习,长方形周长的复习,长和宽是相对的,例题解题方法的渗透

4.课堂纪律与氛围的要求

4 / 8

教学过程:

一、复习导入

(课前板书课题：解决问题的策略）

(课件白屏）

师:同学们,今天我们一起学习——?

师:解决问题，我们之前已经接触过哪些策略?

生回答。

(出示PPT）

师:是的，分析理解题意,可以从条件想起，也可以从问题想起,寻找解题思路，可以画图、列表等等。那么，今天又有什么新的策略等待着我们去探究呢?

师：请看大屏幕——

（出示ＰPT）

二、教学例一

（一)审题

师：谁来读一读条件？

师：根据条件,你得到了哪些数学信息?

生:这是一个长方形;它的周长是22米;长和宽应该是整数;

师：一起读一读问题。

师:从问题中，你又想到了什么？

生:围的方法不止一种；要找到最大的一种围法；

（二）解题

师:要解决这道题目,你有什么好办法?

能不能用之前学过的策略，来解决今天的新问题呢?

生：列表

师：完全可以！还有其他方法吗?

生：画图

师:画图比较直观形象,你想怎么画？能举个例子吗？

为什么长是?宽必须是？

哦,谢谢你,帮我们把思路打开了!谁还能像他一样再举个例子?

师：好的，拿起笔，在草稿本上简单地画一画，每人画三种情况。

（生画图,师巡视,寻找能按顺序画图的作品）

情况一：有学生按照顺序画图

师:老师随机抽取了两位同学的作品，大家一起来欣赏。他们画的对吗？从数学的角度观察,你觉得哪个更好一些?好在哪里？

（相机板书：有序，美感，严密，不重复不遗漏)

情况二:无学生按照顺序画图

师：老师随机抽取了一位同学的作品，大家一起来欣赏。怎么样?

老师也画了三种情况,请大家帮我检查对不对。谢谢同学们的鼓励。有没有发现,老师的思考和大家有什么不同的地方?

你觉得哪个更好?好在哪里?

5 / 8

(相机板书:有序，美感，严密，不重复不遗漏)

师：你能像这位同学／老师一样，有顺序地接着画，把所有情况都找出来，然后完成表格一吗？嗯，很有信心，我欣赏你们，开始吧!

(生完成表格)

师:表格一填好了吗?谁来说一说这后面怎么填?怎么围面积最大?像他一样找到答案的请举手!

(三）反思

１.反思一

师:像刚才这样，把所有可能的答案一个一个列举出来,从而解决问题的策略,我们就叫它——?一起读!

解决这道题目为什么要用一一列举的策略呢?(因为答案比较多，要找到最大的方法，需要一一列举)

这道题目,我们根据什么来列举的?从宽是几开始想起的？（根据周长是22,长和宽的和是1１来列举的；从宽是１开始列举)

看来,列举最重要的是什么？（有序，因为有序,所有严密，才能做到不重复不遗漏，而且排列有美感)

2.反思二

师:回顾刚才解决问题的过程，除了运用了一一列举的策略，还运用了哪些策略？

是的,每一种策略并不是单独存在的,在解决同一个问题的时候,往往会把多种策略综合运用。

３.反思三

师：观察我们列举出来的这些图形的长、宽、面积的变化，你还有什么发现？长越来越?宽越来越?也就是说，长和宽越来越接近，这个长方形也就越来越像？这个时候，面积也就越来越？借助于图形，我们能看得更清楚，当然,它有一个前提条件——周长始终不变，一起读!

4．师生总结

师：通过刚才的学习,你有什么收获?是呀，一道简单的题目，让我们明白了什么是一一列举,明白了列举最重要的是有顺序,明白了解决问题可以多种策略综合运用,还从列举中找到了长方形面积变大的规律。收获真大!我们班同学真的善于动脑筋！给自己鼓鼓掌吧!

师：王大叔还想围的更大,他想到了什么好办法？

三、变式教学

（一）审题

（出示PＰT)

师：这一题和上一题有什么区别?(刚才22是四条边的总长，现在22是三条边的总长)

这三条边分别是几条长几条宽?(1长2宽)

你能用今天学的一一列举解决这个问题吗？

借鉴刚才的解题经验，我们可以从宽是几想起?（宽是1）

那，长是？(20)怎么算的?

接下去想，宽是?长是?

好的,请继续这样有序的思考，并填写表格二。

(二）解题

（学生完成，教师巡导）

6 / 8

师：列举了几种情况?面积最大的是?有没有更大的?赶紧,在小组里交流交流。

（出示PPT）

师：我们一起来研究。当宽是8的时候,长是6，这时候，宽比长还要长，有的同学就不继续列举了,其实,长和宽是相对的，宽可以比长长,长可以比宽短,而且，这个图形和前面已经列举的图形重复了吗？对的，没有重复,我们还要继续列举。快,继续加油！

（学生修改)

师：现在列举了几种情况,面积最大的是？

(三）反思

师：这道题列举的依据是什么?(三条边相加是2２）

观察列举的结果,你有什么新的发现?(宽每+1,长就—2,因为有两条宽一条长；不是长和宽越接近面积越大,因为周长改变了;面积先逐渐增加到60，再逐渐减少)

比较这道题和上一题，它们有什么不同的地方？(围四条边,围三条边；没有墙，有墙;周长不同；面积变化的规律不同)同样是长方形,面积变化的规律为什么不同？(周长不变，周长变化）又有什么相同的地方?(都用了一一列举的方法；都是有序思考;都是从宽是1开始想起）

师：是呀，看来列举的作用真大,如果不列举，我们有可能受第一题的干扰，一列举,我们才有了新的发现。

师：现在,对列举策略是不是更有感觉了?其实呀,我们对一一列举并不陌生，之前的学习就曾经遇到过,请看大屏幕——

四、形成体系

(出示PPＴ）

1.一年级。10可以分成几和几?我们可以从几开始想起?

２．二年级。2、3、5三张卡片可以组成多少个不同的三位数？我们怎么有序思考?先确定百位上是2,可以写出２35和25３,然后确定……

3.三年级。可以把12个正方形拼成一排,然后拼成两排……

4.四年级。小明和小刚同时抛一个硬币，如果朝上的面相同,就算小明赢,如果朝上的面不同，就算小刚赢,这个规则公平吗?我们可以把硬币朝上的情况一一列举,发现小明赢的可能有两种(全部正面或者全部反面)，小刚赢的可能也是两种(第一个正面第二个反面或者第一个反面第二个正面),说明游戏是公平的。

师：这些题目,有印象吗？在解答的时候有什么共同点？

五、拓展延伸

师：花圃围好了,王大叔开始考虑种花了,他遇到什么问题了？

（出示PＰＴ：王大叔准备购买兰花苗和菊花苗回来栽种。花木市场有兰花苗３种,菊花苗4种。王大叔选一种兰花苗和一种菊花苗，一共有多少种不同的搭配？（先列举,再回答）)

（兰花苗：春兰、蕙兰、建兰,菊花苗有：黄帝菊、乒乓菊、粉毛菊、银叶菊）

师：请用一一列举的策略完成表格三。友情提醒:你有简洁的列举方法吗?

(学生完成，教师巡导）

(出示ＰPT）

师：是这个答案吗?一共多少种搭配?

除了用列举找到１２种方法，你有其他方法吗？

生1：连线

7 / 8

师:怎么连?你能列个算式吗？

生2：列式

这个算式表示什么意思?

哦，春兰有几种搭配?同样的,蕙兰、建兰也都是？所以可以列式?(演示)

有同学是这样表示的,你能明白他的意思吗?这样表示有什么好处?

生：省时，简洁，很有数学味!

师:如果再增加１种兰花,现在一共有几种方法?增加一种菊花呢？如果继续增加，你还能列式快速找到答案吗？

师：看,列举确实是个好方法，通过列举找到规律,就可以列算式来解决问题啦!

六、全课总结

师:不知不觉,这节课就要结束了，你学到了什么?

关于一一列举,其实还有很多的类型，有待于我们在今后的学习中进一步探究。

七、作业布置

书本9７页练习十七１-3题。

8 / 8