网页设计与制作作品展示(5篇)

篇一：网页设计与制作作品展示篇二：网页设计与制作作品展示篇三：网页设计与制作作品展示篇四：网页设计与制作作品展示篇五：网页设计与制作作品展示

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　PS网页设计与制作（主页）

　　一、教材分析

　　设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。

　　二、学情分析

　　认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。

　　知识技能水平：

　　在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。

　　三、教学目标

　　（一）、知识与技能

　　1.

　　了解主页大小，掌握设置主页大小的方法。

　　2.

　　掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。

　　3.

　　了解导航栏的样式及位置，掌握矩形的绘制调整方法。

　　（二）、过程与方法

　　1.

　　通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。

　　2.

　　培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。

　　（三）、情感态度与价值观

　　提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。

　　四、教学重点1/11传播优秀Word版文档，希望对您有帮助，可双击去除！

　　主页大小设定、标题和图片的大小及位置、导航栏制作

　　五、教学难点

　　主页中各对象的大小及位置

　　六、教学方法

　　任务驱动、分层教学、同伴互助

　　七、教学准备

　　极域多媒体网络教室、Photoshopcs5、学案

　　八、教学过程

　　教学教学活动

　　阶段

　　1.

　　展示范例，吸引学生的注意力，调动学习的积极性

　　观看放映

　　聆听老师

　　观察素材文件

　　并进入创设情境

　　创

　　设情境

　　2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？

　　3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。

　　复习旧1.

　　启动PHOTOSHOP，向学生展示

　　2.

　　对比说明，网页设计时使用到哪些功能

　　观看放映

　　参与互动

　　思考并回答

　　PS强大的图片文字与处理功能，学生在七下学习过，展示同个年龄段同学的作品，可以吸引学生的注意力，也更贴近学生的生活，引起更多的共鸣，尽快进入学习氛围。

　　选择PS制作网页，拓宽学生的知识学生活动

　　设计意图

　　思考并发表自己的看法

　　面，提升PS的操作技能。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　知

　　通过师生互动，帮助学生复习一些跟图片文字相关的操作。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　3.

　　小结：

　　图片——拖动至新建文档

　　文字——文本工具

　　导航——形状

　　在复习了PHOTOSHOP的一些基本操作后，接下来，我们要开始正式设计主页了。在前一次课中，大家已选好图片素材，并初步加工，怎么用在网页中呢？

　　师：引导学生尝试启动软件，开始新构建新知（图片）

　　师：主页新建完成后，第二步要添加背景图片，那么，如何将上周保存过的图片添加进来呢？邀请学生上台演示。

　　师：XX同学演示得非常好，首先，打开文件，使用移动工具，将图片拖动到文档中。当然，我们可以根据自己的构想，调整图片的大小及位置。

　　建文档

　　(1).登录FTP，下载前一首先引出学生的疑课保存上交的图片素材

　　虑，启发学生展开(2).启动PHOTOSHOP，参考学案，尝试新建文档

　　(3).同伴互动，落实新建文档时的各项参数：800*60背景色透明或其它

　　(4)

　　.学生使用教师机面向全班展示操作过程，并做相应的讲解。教师思考。

　　信息技术课堂更多的希望学生通过尝试探索发现问题，进一步尝试探索寻求解决问题的办法，从而提高解决问题的能力。

　　通过学生演示+讲解的方式，更加直观地让全班同学了适当点评及补充说明。

　　解之前课上保存的(5)

　　课堂操作时间，学生图片如何运用到网页中。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　操作，同伴互助，教师巡视。如果有困难，先自行尝试探究，再向同伴寻求帮助，如果实解决不了，可向老师寻求帮助。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　师：现在我们需要给网页添加标题，(1)

　　.学生观看放映，对那么，你觉得网页的标题有什么特点？

　　照范例及个人经验，思考

　　(2)

　　.学生回答问题,表达个人的看法（2-3人）

　　构建新知（标题）

　　师：教师小结标题特点：醒目，颜色、大小或者字体与网页中的其他文本不一致，位置根据整体页面布局而定

　　师：有请一位同学给大家演示如何制作网页的标题

　　教师通过设问的方式引导学生讲解有关文字的操作。

　　教师板书：

　　文本：字体：字体库中的或自行下载

　　(3)

　　.学生使用教师机面向全班，演示如何在文档中添加文字，以及更改文字的形状、大小、颜色。通过修改图层的混合选项，使文字呈现出更多丰富的样式。

　　(4)

　　.课堂操作时间，学生操作，同伴互助，教师巡视。如果有困难，先自行尝试探究，再向同伴寻求帮助，如果实解决不了，可向老师寻求帮助。

　　结合学生的个人经验，鼓励学生表达个人看法。不仅仅是通过教师给出的几张图片得出一个结论，更多是从学生的生活和个人体验出发。

　　大标题的制作也是本课的一个重点，设计的意图是学生通过对比尝试，找到更适合自己的网页，制作出更具个人特色的作品。采用分层教学，鼓励同学结合个人实际情况，下载安装新的字体，对于另外的基础较弱的学生的，则鼓励通过开关的改变，颜色调整和混合选项的应

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　用，制作出精彩的标题。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　形状：变形

　　立体：混合选项

　　大小：大于普通文字

　　教师鼓励基础较好的同学尝试探究任务一，自主上网搜索下载字体，并安装使用

　　师：导航是一个网页的重要组成部

　　(1)

　　.学生观看放映，观导航是本课的分层教学内容之一，学习效率较高的同学，可以自助尝试制作导航。

　　课上结合其余同学的作品，引导学生观察导航栏的特点，分析制作时的使用到的工具，及可能会用到的一些操作小技巧。教师重在引导。

　　分，位于页面顶端，或是侧边的区域，看范例中的导航制作

　　一般由一排水平或垂直的按钮组成，(2)

　　.学生结合自己的网起着网站内部页面链接的作用。在你的网页中，打算如何设计呢？

　　构

　　建教师小结导航栏的制作：

　　新位置：上边或侧边

　　知形状：矩形较适合

　　（大小：依整体页面及个人喜好而定

　　导形状与文字分开操作

　　航）

　　师：哪位同学能够演示下呢？

　　并做相应的讲解。教师适当点评及补充说明。

　　(4)

　　课堂操作时间，学生操作，同伴互助，教师巡视。

　　保存作业至桌面，格式为“学号姓归名.psd”，上传至教师机，以供教师纳查看操作情况。

　　总

　　结

　　上交作业。

　　(1).学生按要求保存并向全班展示操作过程，(3)

　　学生使用教师机面

　　页，发表看法。

　　本课的基础任务是新建文档，制作网页背景和大标题。拓展提升任务是下载安装字体制作新

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　颖的标题及导航栏的制作。教师根据学生上交的作业，做好记录，以便下一堂课开展教学。

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　教师课后查看作业，登录汇总，针对作业中出现的小问题，下一课时，展

　　开分析与讲解。

　　(2).学生跟随教师的板书，对本堂课的所学进行小结。

　　PS网页设计与制作

　　一、新建文档

　　二、标题

　　三、导航

　　板书

　　大小：800*600像素

　　网页标题：醒目

　　形状：可选矩形

　　背景色：透明

　　字体：字体库或下载

　　大小：自定

　　形状：变形

　　位置：上边或侧边

　　立体：混合选项

　　九、教学反思

　　本课是一节常态课，通过前期的课上接触结合上交的作业，发现本班学生的认知能力和操作水平存在不小的差异，大部分学生的学习的积极性有，但持续时间不长，在学习中遇到问题时，大部分学生愿意主动探究，探究成功后积极性倍增，探究失败后有挫败感，积极性大幅下降。在开展网页设计制作教学时，采用PS网页设计与制作。本课设计时考虑到了不同能力学生的学习情况，采用“分层教学”。课上通过展示作品，激起学生的学习兴趣，抛出问题，引出答案，进入本课的学习主题。课堂中任务驱动与分层教学相结合，很好地照顾到不同层次的学生。演示环节，由学生自愿和教师抽查相结合，整个课堂教学进展有序。课前预设的学习目标也较好地完成了。

　　本节课的不足之处在于，课堂整体学习效率受学生的完成情况影响较大，若学生花很多时间纠结在选哪个颜色更好看类似的问题上，不利于开展后面的教学，在今后的教学中，不妨向学生明确提出这一段的操作时间。更有效地开展每一课的教学。

　　教案信息表

　　作者姓名

　　作者单位

　　曹亚利

　　电子信箱

　　学段

　　八年级上

　　邮编

　　海宁市斜桥中学

　　传播优秀Word版文档，希望对您有帮助，可双击去除！

　　教案名称

　　适用教材

　　PS网页设计与制作

　　拓展课程

　　手机

　　课时

　　---精心整理，希望对您有所帮助