教学项目三 网页中图片的处理及链接的实现
网页设计与制作课程标准课程性质与任务课程教学目标三
《网页设计与制作》课程标准一、课程性质与任务网页设计与制作课程是电子商务专业商务网站维护方向的一门专业课程。
旨在于培养学生具备从事网页设计与制作的基本职业能力，为下一步网站的建设学习打好基础，使学生达到网页设计制作人员的基本职业能力要求。
二、课程教学目标通过任务引领和项目活动等形式，使学生能熟练制作简单网页，能熟练创建本地站点并能对网页进行各种超链接，能制作网页动画，掌握网页设计与制作技巧，具备网页设计与制作的基本职业能力，能基本胜任网页制作工作，为学生专业化方向的发展奠定基础。
职业能力目标：1.能够熟练制作简单网页的能力；2.能够创建本地站点并能对网页进行各种超链接的能力；3.能够对网页进行具有创意的美化的能力；4.能够制作有创意的网页动画的能力；5.能够掌握网页设计与制作的相关技巧的能力；6.能够根据企业需要制作商务网页的能力；7.能够跟踪和学习网页设计与制作的新知识和新技术的能力。
8.具有开放分享、开拓进取、勇于创新、吃苦耐劳、不屈不挠的精神。
三、参考学时108学时。
四、课程学分6学分。
五、课程内容和要求六、教学建议（一）教学方法教师必须重视现代教学理论的学习，不断地更新观念，深刻领会和探究任务引领型的项目活动形式的教学方式。
1.项目教学法在教师的指导下由学生亲自处理一个项目的全过程，让学生全部或部分独立组织、安排学习行为，解决在处理项目中遇到的困难。
加强网页制作技术与各课程的整合的研究，充分运用项目教学法，探索在数字化学习环境下的新型的教学模式，为学生提供自主发展的时间和空间，努力培养学生的创新精神和实践能力，自觉地成为学生学习的引导者和促进者。
2.任务驱动法在教学活动中，教师应当围绕特定的教学项目，设计出具体的、可操作的任务，以任务组织教学，在任务的履行过程中，以参与、体验、互动、交流、合作的学习方式，充分发挥学习者自身的认知能力，调动他们已有的知识与经验，在实践中感知、认识、应用所学知识，在“做”中学，“用”中学，不断提高学生的动手实践能力。
《网页制作中图像的应用》说课PPT
插入图像、图像显示方式的控制、图像的编 辑、图像的描摹和图像的使用原则
教学分析
Teaching Analysis
内容分析
图像显示方式的控制
03
常用图像的文件类型
01
04
创建及编辑图片库
02
在网页中插入图像
图像的应用
教学分析
Teaching Analysis
学情分析
优点
班级女生较多，上课纪律较好 学生对于所见即所得的网页制作非常感兴趣，
班级优化大师
常用图像文件类型有哪
1
些、各自有怎样不同的特
点？
回答问题
向网页中插入图片、设置
2
图片显示方式
操作演示
教学过程
Teaching Process
课前准备 课堂实施 课后拓展
协作探索
蒙太奇布局 显示幻灯片布局 垂直和水平版布局
图片大小不一
图片太少
➢ 移动图片位置 ➢ 设置缩略图大小
突出教学重点
情感态度 价值观
3
对实验过程中遇 到的问题能主动 思考，积极寻求 解决办法；
感受到在网页中 应用图像的乐 趣。
教学分析
Teaching Analysis
教学重点
✓ 预习任务一：了解常用图像文件类型 ✓ 预习任务二：向网页中插入图片并设
置图片属性
➢ 预习任务三：创建及编辑图片库
教学分析
Teaching Analysis
网页制作中图像的应用
目 录 CONTENTS
教学分析
2
教学过程
4
Teaching Analysis
Teaching Process
1
教学策略
《Photoshop》课程说课
蒙版与通道 掌握蒙版与通道的使用
技能内容及要求 学会制定软件的布局 找到图像的主要突出点
参考学 时
2
4
学会简单修改图片
6
掌握魔棒、套索、选框等工具 的运用
12
熟练地判断图像的图层使用情 况
18
掌握蒙版的使用、了解通道的 作用
12
文字设计
图像处理 4 软件的创
作性
矢量绘图
熟悉文字的使用
掌握各种字体的布局风格
了解智能对象和智能滤镜 了解使用图像处理软件制作图案的方法
掌握图像处理软件的使用
技能内容及要求 学会制定软件的布局 找到图像的主要突出点 学会简单修改图片 掌握魔棒、套索、选框等工具的运用 熟练地判断图像的图层使用情况 掌握蒙版的使用、了解通道的作用 掌握各种字体的布局风格
熟练使用矢量图与位图
能够使用各种蒙版
（2）通道和滤镜。 （3）培养学生的素质能力。
3.教学内容的组织与安排
序号 1
模块
课程内容 教学单元/项目
了解图像以及图像 与PHOTOSHOP有个约会
处理软件
图像修饰基础工作流程
2
图像处理软件的初 级使用
图像的润饰和修复
创建选区
3
图像处理软件的中 级知识
4
图像处理软件的创 作性
图层基础 蒙版与通道
六、教学评价
1、校外同行评价：南宁市布兰卡摄影协会理事长陈田，对本课程的评价：广西理工 职业技术学校开设的《Photoshop图像处理》课程，是一门侧重于实际应用性的课程， 该课程在教学中实现了理论与实践的有机融合，体现了能力培养的特色，该课程改变 传统的教学方法，以大量的真实案例为实例进行教学，以真实的设计项目作为实践教
Dreamweaver CC教案
《Dreamweaver网页设计与制作》项目一创建站点
《Dreamweaver网页设计与制作》项目二制作简单的文字页面
《Dreamweaver网页设计与制作》项目三制作图像页面
《Dreamweaver网页设计与制作》项目四使用表格布局网页
《Dreamweaver网页设计与制作》项目五运用CSS样式美化网页
《Dreamweaver网页设计与制作》项目六制作图像页面
《Dreamweaver网页设计与制作》项目七制作图像页面
《Dreamweaver网页设计与制作》项目八设置页面中的超链接
《Dreamweaver网页设计与制作》项目九使用框架布局页面
《Dreamweaver网页设计与制作》项目十使用浮动框架布局页面
《Dreamweaver网页设计与制作》项目十一 AP Div在网页中的应用
《Dreamweaver网页设计与制作》项目十二使用模板提高网页制作效率
《Dreamweaver网页设计与制作》项目十三库项目在网页中的应用
《Dreamweaver网页设计与制作》项目十四使用行为和JavaScript为网页添加特效。
《在网页中插入图片》教案
教案背景：《在网页中插入图片》是配合我区信息技术课题《学案引导下信息技术高效互动课堂的构建》开的一堂研讨课。
本课以学案引导为教学手段，引导学生自主学习在网页中插入图片的方法。
本课在调查了解学生现有能力的基础上，充分尊重学生个体差异、以学定教，采用任务驱动、自主探究，同伴互助的学习方式打造有效的课堂教学氛围。
教学课题：《在网页中插入图片》教材分析：网页制作是《小学生学电脑》（凤凰出版传媒集团江苏科学技术出版社）第十一册的内容，是在学生学习了网络基本知识、WORD之后的一个内容。
本课是学生在初步学习FrontPage软件，会制作文字个人主页的基础上，学习用插入图片的方法来美化网页，培养学生的美感和团结互助，共同进步的人文精神。
教学方法：学案引导，学生自主学习把WORD软件的相关操作与FRONTPAGE联系起来，通过学生熟悉的WORD学习FRONTPAGE，达到的学习效果还不错。
为了激发学生对网页制作的兴趣，这节课由两张的视觉对比引入，让学生知道我们每个人都可以做出这样精美的网页。
课堂上我们所归纳出的网页中插入图片的方法是来自于学生的探索。
这节课中在学生掌握了一些网页制作的方法后，我占用大量的时间给学生打造了一个自由创作的空间，在我准备的资源中除了有给学生自主学习的学习助手外，还有针对“苏州园林”的素材，每个园林的介绍对应着图片和文字内容，以帮助孩子利用学案和准备好的素材进行自主学习。
《在网页中插入图片》学习助手班级：姓名：学习帮助一：在FRONTPAGE中插入图片的方法和我们以前学过的在WORD中插入图片的方法相似，试试“插入”菜单，看看下面有什么选项。
试一试在“苏州园林”网页中为“拙政园”配上一张合适的图片。
“插入”——“图片”——“来自文件”学习帮助二：插入的图片太大，我们应该怎么操作呢？想想在WORD中是怎么操作的。
把“拙政园”的插图调整到合适的大小。
通过缩放来调整图片大小。
学习帮助二：图片的位置不对，我们在WORD中是怎么操作的，还用这样的方法操作可行吗？请你试一试，为“拙政园”的插图设置居中、左对齐和右对齐的位置，看看哪种方式比较合适。
《网店运营推广》课程标准
《网店运营推广》课程标准一、课程性质与任务本课程是三年制电子商务专业的一门专业大类平台课程。
课程整体设计方案以系统性、实用性和项目化为主要方向，服务国内电商人才需求，培养学生掌握网络开店的必备理论知识、基本流程和经营管理实践操作能力。
二、课程教学目标本课程的教学目标是使学生能够掌握网上操作的基本理论和业务操作等方面的重要内容，培养学生从事个人网店经营的创业能力，使学生具备能够独立操作商业交易活动的能力。
本课程从网店的供应商选择开始，学生需要自行确定经营的产品种类并制定价格，并能够独立建立起具备商业交易能力的网上店铺并进行风格设计装饰，对所发布商品进行美化，就网店交易进行谈判与订单处理，备货发货和客户/供应商管理，售后服务以及如何进行店铺和商品推广。
（一）知识目标1.具备网上谈判与签约知识；2.具备销售与推广知识；3.具备网页设计与制作知识；4.具备订单履行知识；5.具备网络支付与结算知识；6.具备物流配送知识；7.具备客户服务与管理知识。
（二）能力目标1.商业经营运作能力；2.获取新知识和技能的能力；3.培养学生善于总结与应用实践经验的能力；4.独立学习能力。
（三）素质目标1.培养学生的沟通能力及团队协作精神；2.培养学生分析问题、解决问题的能力；3.培养学生勇于创新、敬业乐业的工作作风；4.培养学生吃苦耐劳和强烈的社会责任感；5.培养学生初步的管理能力和信息处理能力。
三、学时72学时四、课程学分4学分五、课程内容和要求六、教学建议（一）教学方法本课程建议采用混合式教学模式，综合运用自主学习法、课堂讲授法、案例分析法、分组任务法、模拟实战法等教学方法，优化教学过程，提高教学质量和效率。
（1）自主学习法线上学习采用自主学习法，搭建课程平台，将网店经营与管理课程资源网络化，方便学生自主学习。
学习资源包括教学课件、视频资源、动画资源、混合媒体资源、网络链接资源、文本资源等。
学生在线自主学习基本知识点，并进行在线自测。
网页制作基础教程-第4章 图片与视频
4.1.1 图片的基本知识
第
因特网上应用最广泛的图片格式有两种：GIF 文件和JPEG文件。
JPG/JPEG 色彩 特殊功能 压缩是否有损失 真彩色 无 有损压缩 颜色丰富，有连 续的色调，一般 表现真实的事物 GIF 16色、256色 透明背景、动画 无损压缩 颜色有限，主要以 漫画图案或线条为 主。一般表现建筑 结构图或手绘图。
4 4 4 4
适合情景
4.1.2 插入图片
第
单击菜单栏上的 “插入” ，打开“插入”菜单 ；再单击“插入”菜单的“图片”，在“图片 ”的下一级菜单中选择“来自文件” 。在 “图 片”对话框中，选中图片文件，单击 “确定” 将其插入网页，
4 4 4 4
4.1.3 调整图片
第 4 4 4 4
1、改变图片的大 小 首先，用鼠标单 击图片，在图片 的四周会出现8个 黑色的小方块。 然后，将鼠标移 至小方块处，当 鼠标指针变成双 向箭头时，按住 鼠标左键拖动， 将图片调整到合 适的大小。
4 4 4 4
4.4.3 插入设置流媒体1
第
单击鼠标，确定光标的位置。单击“插入”菜 单，在其下拉菜单中选择“Web组件”命令，打 开“插入Web组件”对话框。 在“插入Web组件”对话框中，选择左边的“ 高级控件”，然后在右边的窗口中选择 “ActiveX控件”，最后单击“下一步”按钮 。 在默认的情况下，“插入Web组件”对话框中 没有“Windows Media Player”控件，单击“自 定义”按钮，打开“自定义ActiveX控件”对话 框。 在“自定义ActiveX控件”对话框中找到 “Windows Media Player”选项，单击鼠标，在 其前面的方格中打上勾，单击“确定”。
4.4 插入与设置视频
课程设计目的web网页
课程设计目的web网页一、教学目标本课程旨在让学生掌握Web网页的基本知识，包括HTML、CSS和JavaScript 等，培养学生创建和设计网页的能力。
具体目标如下：1.知识目标：学生能理解并掌握HTML的基本结构、标签及其属性，了解CSS的布局和样式设置，掌握JavaScript的基本语法和功能。
2.技能目标：学生能独立创建一个简单的网页，包括页面结构、样式设计和交互功能。
3.情感态度价值观目标：通过完成网页设计项目，学生能体会到编程的乐趣，培养自主学习和解决问题的能力，提高信息素养。
二、教学内容本课程的教学内容主要包括HTML、CSS和JavaScript三个部分。
1.HTML：介绍网页的基本结构，包括标题、段落、列表、链接、图片等标签的使用。
2.CSS：讲解如何设置网页的布局和样式，包括盒模型、浮动、定位、间距、字体等。
3.JavaScript：教授基本语法、函数、事件处理和DOM操作，实现网页的交互功能。
三、教学方法本课程采用讲授法、案例分析法和实验法相结合的教学方法。
1.讲授法：讲解基本概念、语法和技巧。
2.案例分析法：分析优秀网页案例，引导学生学会欣赏和分析网页设计。
3.实验法：学生动手实践，完成网页设计项目，培养实际操作能力。
四、教学资源1.教材：选用权威、实用的教材，如《HTML+CSS+JavaScript网页设计》。
2.参考书：提供丰富的参考书籍，方便学生深入学习。
3.多媒体资料：制作精美的课件，增加课堂的趣味性。
4.实验设备：提供充足的计算机和网络资源，确保学生实践需求。
5.在线资源：推荐优秀的学习和教程，方便学生课后自主学习。
五、教学评估为了全面、公正地评估学生在Web网页课程中的学习成果，我们将采用多种评估方式：1.平时表现：通过课堂参与、提问、讨论等方式评估学生的积极性与参与度。
2.作业：布置练习和项目任务，评估学生对知识的掌握和应用能力。
3.考试成绩：通过期末考试，评估学生对课程知识的全面理解和运用。
网页设计课程标准
网页设计课程标准一、课程管理信息课程名称：网页设计课程代码：XX2BC03教学单位：制定时间：编写负责人：审定负责人：二、课程基本信息课程学分：8 课程学时：136 授课对象：计算机应用三、课程简介（一）课程的性质《网页设计》是计算机网络专业的核心课程，也是计算机应用专业最基本、最综合的能力训练课程。
它主要教授制作网页的基础知识，是一门实践性很强的课程。
该课程的核心内容，就是在准备了相关素材的条件下，能够完整的制作出精美的、符合要求的网页，从而增强学生制作网页的能力，提高学生在激烈竞争的市场环境以技能求生存、求发展的能力。
本课程主要培养企业需要的具有专业网页制作理论基础和网页制作实践能力的高素质劳动者。
在教学中要向学生介绍网页制作的知识体系与制作方法。
让学生具备制作网页的劳动技能，从而使学生在职业过程中能顺利、符合要求地制作出相关要求的精美网页。
中等职业教育以育人为根本，以就业为导向，以产学研结合为途径，以服务地方经济为宗旨，培养高素质劳动者。
根据调查，目前企业吸纳计算机专业学生的岗位主要包括：工商企业、酒店、房地产、旅游等部门从事信息管理、管理信息系统的操作、信息系统的维护、信息安全保障、计算机文秘等。
而《网页设计》是所有这些计算机类岗位群任职的理论指导和操作指南。
课程学习具有综合性，其课程内容涉及多个岗位不同的工作任务.《网页设计》课程内容以网页制作为主线，从收集素材、制作主页、美化主页到网站的建设，涉及网站维护、网站建设等岗位的不同工作任务。
课程学习具有发展性（长远性），其能力培养不仅着眼于首岗要求，同时还着眼于岗位晋升的要求.课程教学不仅满足网页制作、网站建设、网站维护这些工作任务所需要的知识和技能，同时还进一步考虑晋升所需要的网页制作和网站建设知识的学习和能力的培养。
（二）课程的作用计算机应用专业是培养计算机操作和开发人才，从对岗位的工作任务和职业能力分析中可以看出，本门课程使学生能够理解和应用网页的美术设计理念与制作技法。
网页制作与设计教案
网页制作与设计教案一、教学目标1、让学生了解网页制作与设计的基本概念和流程。
2、帮助学生掌握网页设计的常用工具和技术。
3、培养学生的创意和审美能力，能够设计出具有吸引力的网页。
4、提高学生的团队合作和沟通能力，通过项目实践完成网页制作。
二、教学重难点1、重点HTML 和 CSS 的基本语法和应用。
网页布局的设计原则和方法。
色彩搭配和图像运用在网页设计中的技巧。
2、难点JavaScript 脚本语言的初步应用。
响应式网页设计的实现。
解决网页兼容性问题。
三、教学方法1、讲授法通过讲解理论知识，让学生对网页制作与设计有系统的认识。
2、实践法安排学生进行实际的网页制作项目，提高他们的动手能力。
3、案例分析法展示优秀的网页案例，分析其设计思路和技术实现，启发学生的创意。
4、小组讨论法组织学生进行小组讨论，共同解决问题，培养团队合作精神。
四、教学过程1、课程导入（约 15 分钟）展示一些精美的网页，引导学生观察并思考网页的组成元素和设计特点。
提问学生对网页制作的了解和兴趣，激发学生的学习热情。
2、知识讲解（约 45 分钟）介绍网页制作与设计的基本概念，包括网页的定义、类型、作用等。
讲解 HTML 的基本标签和结构，如`＜html>｀、｀＜head>｀、｀＜body>｀等，以及常用的文本标签、链接标签、图像标签等。
介绍 CSS 的作用和语法，包括选择器、样式属性等，通过实例演示如何使用 CSS 美化网页。
3、实践操作（约 60 分钟）学生根据所学知识，动手创建一个简单的网页，包括设置网页标题、添加文本内容、插入图片和链接等。
教师巡视指导，及时解决学生在操作过程中遇到的问题。
4、网页布局设计（约 45 分钟）讲解网页布局的常见方式，如流式布局、固定布局、响应式布局等。
介绍使用 CSS 进行布局的方法，如浮动布局、定位布局等。
学生尝试使用不同的布局方式设计网页布局。
5、色彩与图像运用（约 45 分钟）讲解色彩搭配的基本原则和方法，以及在网页设计中的应用。
小学信息技术《在网页中插入图片》教学反思
小学信息技术《在网页中插入图片》教学反思引言在小学信息技术教育中，学生们学习了如何在网页中插入图片的方法。
本文旨在对这一教学内容进行反思和总结，以进一步提高教学效果。
背景在当今数字化时代，网络无处不在，网络技术也越来越成为生活学习的一部分。
小学信息技术的教学内容应该与时俱进，使学生们能够熟练地运用网络技术解决问题，丰富自己的学习经验。
在这样的背景下，教授学生如何在网页中插入图片成为了小学信息技术教学的重要环节。
教学目标在教授学生如何在网页中插入图片的过程中，我制定了以下教学目标：1.学生能够理解网页中插入图片的基本原理和作用；2.学生能够通过HTML代码实现在网页中插入图片的操作；3.学生能够通过Markdown文本格式实现在网页中插入图片的操作。
教学方法为了使学生能够更好地理解和掌握在网页中插入图片的方法，我采用了以下教学方法：1.讲解法：我首先向学生介绍了在网页中插入图片的基本原理和作用，让学生明确插入图片的必要性和好处。
2.示范法：我为学生演示了如何通过HTML代码实现在网页中插入图片的操作。
我使用了一个简单的网页编辑器，逐步向学生展示了插入图片的具体步骤，包括设置图片路径、调整图片大小及位置等。
3.实践法：在示范之后，我让学生们跟着我的指导，亲自实践编写一个简单的网页，并在其中插入图片。
我向学生提供了一些图片资源和参考代码，以帮助他们更好地理解和运用所学知识。
4.讨论法：在实践环节结束之后，我组织了一个小组讨论，让学生们分享他们的学习心得和遇到的问题。
通过互动交流，学生们不仅能够加深对知识点的理解，还能够帮助他们彼此解决问题。
教学反思在教学过程中，我发现了一些问题，以及一些改进的方向。
首先，尽管我采用了多种教学方法来帮助学生理解和掌握插入图片的方法，但仍有一部分学生对HTML代码的编写和运用感到困难。
这可能与他们的年龄和经验有关，因此，在教学过程中，我可以多给予他们一些较为简单的代码示例，让他们逐步掌握。
中职网页设计与制作(中国工信出版集团)教案：图像的插入与编辑、多媒体元素
中等专业学校2022-2023-2教案
教学内容
URL：可在文本框中输入一个FLV文件的URL地址，或单击“浏览”按钮，从弹出的对话框中选择FLV文件。
宽度和高度：设置视频的宽度和高度。
自动播放：如果选中该复选框，则在浏览网页时自动播放视频。
自动重新播放：如果选中该复选框，则视频将循环播放。
（3）单击“确定”按钮，即可在文档中插入一个FLV 文件。
3.插入音频文件
（1）要在网页中插入音频，可采用以下步骤：
①将光标定位到要插入音频文件的位置
在“插入”面板的“HTML”类别中的“插件”。
选择菜单“插入→HTML→插件”命令。
②在打开的“选择文件”对话框中选择要插入的音频文件。
③可以在属性面板中设置其属性。
（2）给网页添加背景音乐
选择音频插件占位符，在属性面板中单击“参数”按钮，打开“参数”对话框，如图2-106所示，在“参数”框中输入“hidden”,并设定值为“true”（或直接在属性面
板中将其宽度和高度的值设为0），单击加号按钮，在新出现的行中输入“autostart”，并设定值为“true”，单击“确定”按钮。
【巩固练习】
提问基础概念，学生回答。
【课堂小结】
师生共同总结本节知识点。
【作业布置】
完成同步练习。
板书设计
2.7 图像的插入与编辑
2.8 多媒体元素
1.插入鼠标经过图像
2.插入动画、视频、音频
教后札记。
4.3《网页制作—超链接设置》教学案
4.3《网页制作—超链接设置》
【教材分析】
本节教学内容选自广东教育出版社选修3《网络技术应用》中的第四章第三节网页制作中的插入超链接。
超链接是网页制作中相当重要的一个知识点，也是学业水平考试的考点，要求每位学生都要掌握，它可以实现网站中各个网页之间的相互连接，把网页构成整体。
【学情分析】
高一年级的学生已经拥有相当水平的计算机操作能力了，这一章的学习要求每个学生都完成一个网站作品，自己确定主题，确定风格，确定版面样式，选择素材进行网页制作，经过几节课的学习探究很多同学都完成了网站中的几个网页制作，并且也掌握了网页制作的基本知识点，他们都迫切希望能通过链接把网页构成一个整体，相互之间能够实现访问。
【教学目标】
1、知识与技能：掌握超链接的创建方法以及编辑超链接
2、过程与方法：通过学生自主学习和合作探究，学会创建超链接，编辑超链接
3、情感态度价值观：通过师生的相互交流和学生之间的协作学习，体验探究问题和学习的乐趣
【教学重点】
超链接的创建及编辑
【教学难点】
创建电子邮件超链接
【教学方法】
激发兴趣，任务驱动，自主探究
【教学准备】
多媒体网络教室，教学课件，导学案
【教学过程】。
网页设计与制作)实验2文本操作与图像操作
ABCD
学会了使用图像编辑软件 进行基本的图像处理，如 裁剪、调整大小、添加水 印等。
增强了团队合作和沟通能 力，通过小组讨论和分享， 共同完成了实验任务。
本实验的不足与改进
在HTML和CSS文本操作中 ，对于高级样式的应用还不 够熟练，需要进一步练习和
实践。
1
在图像处理方面，对于一些 高级技巧和工具的应用还不 够了解，需要深入学习和探
索。
在网页布局和排版中，还需 提高对用户体验的关注度， 以设计出更符合用户需求的 网页。
需要加强团队合作和沟通能 力的培养，提高小组协作效 率。
下一步的计划
深入学习HTML和CSS的高级 应用，提高网页设计的水平。
学习更多的网页布局和排版 原则，提高网页设计的美观 度和用户体验。
探索更多的图像处理技巧和 工具，提高图像处理能力。
网页设计与制作实验2： 文本操作与图像操作
目录
Contents
• 实验介绍 • 文本操作 • 图像操作 • 实例展示 • 实验总结
01 实验介绍
实验目的
01
掌握HTML和CSS的基本语法和标签，能够编写简单 的网页。
02
学会使用文本和图像元素在网页中添加内容，并对 其进行样式设置。
03
理解网页布局和排版的原理，能够实现简单的网页 布局。
03 图像操作
图像插入与调整
插入图像
在网页编辑器中，选择插入图像功能，上传 本地图片或使用在线图片链接。
图像位置调整
使用定位属性，如"float"或"position"，来 控制图像在页面上的位置。
调整图像大小
通过调整图像的宽度和高度属性，改变图像 的尺寸。
网店开设项目三任务2教案 《搭建店铺页面框架》
《搭建店铺页面框架》教案教法学法教学方法：任务驱动法，模拟情境教学法1.任务驱动法采用任务导学案的形式，把任务由浅入深，由抽象到形象进行展开，实现“理实一体”的教学理念。
2.模拟情境教学法学生在设计店铺布局时，利用实际店铺的模块图进行布局操作，让学生能够比较直观的感受到布局后的实际效果，提高学生的职业素养能力。
学习方法：自主探究法学生通过微课学习，对店铺页面进行情境模拟布局设计实践，提升了学生自主学习能力，也进一步提升了他们的主动性和创造性能力。
教学准备教师准备：微课视频、任务导学案、模拟布局操作课件等。
学生准备：开通淘宝子账号。
教学环境：多媒体电子教室。
教学用具：多媒体电脑，电子白板，电子教室网络版。
教学素材：实际店铺模块图片素材。
教学过程设计思路教学设计思路：从每周每班两节课的学情出发，本次课从复习旧知开始，利用微课视频和授课课件生动的展开新知讲解和新技能的实践操作，同时完成新知的知识巩固检测任务，结合授课过程中每个阶段的互动和点评，对课堂效果进行实时评价，力求课堂教与学的效果最大化。
教学实施过程：第一步：在线测试，巩固旧知。
利用问卷星对上一节内容进行测验，评价旧知教学效果。
第二步：微课辅助，讲解新知。
微课展现、讲解店铺布局理论知识和演示布局操作过程。
第三步：微课指引，在线实践。
根据微课内容指导，完成书本76页活动实践，并用子账号登录在淘宝后台进行实践。
第四步：H5引入，模拟创作。
利用H5网页课件在线完成形象化的店铺布局和拓展实践任务，通过模拟情境实践方式突破学习难点。
第五步：随堂测试，巩固新知。
在线完成随堂测试，巩固课堂所学内容，提高课堂效率。
第六步：分析评价，总结效果。
对学生的作品、测验结果等信息进行分析评价，总结学生课堂学习效果。
教学展现设计电子白屏：教学课件展示教师机屏幕：展示和点评学生作品任务导学案班级：姓名：1．登录，完成在线测试复习。
2．集体观看微课，回答问题。
3．“任务一”：利用子账号登录，结合微课视频和书本79页“知识链接”，完成店铺首页布局，并截图。
《图像编码》教学设计
《图像编码》教学设计作者：夏燕萍来源：《中国信息技术教育》2020年第10期● 学科核心素养①了解图像数字化的基本原理，理解图像的采样、量化和编码过程;认识像素、图像尺寸、颜色深度等基本概念，能够根据位图图像的特征计算位图文件大小。
（信息意识、计算思维）②了解图像的常见格式，并能根据需要对图像进行简单的加工处理，形象直观地表达观点和思想。
（数字化学习与创新、信息社会责任）● 课程标准要求①在具体感知数据与信息的基础上，描述数据与信息的特征，知道数据编码的基本方式。
②针对具体学习任务，体验数字化学习过程，感受利用数字化工具和资源的优势。
● 学业要求能够描述数据与信息的特征，知道数据编码的基本方式，掌握数字化学习的方法，能够根据需要选用合适的数字化工具开展学习。
● 教材分析笔者采用的是人教-中图版教材，第一章的项目为“体质数据促健康”，要求学生学习数据与信息的相关知识和原理，理解并掌握信息数字化的作用和技能，能在本章学习结束时用多媒体作品呈现项目学习成果。
本章第1.2.3节《数据编码》详细介绍了各种数据编码，主要分成字符编码、声音编码、图像与视频编码、数据压缩四个部分。
图像和视频的数字化过程与声音数字化原理类似，但有其特别之处。
由于教材详细地阐述了声音数字化的过程，所以对图像与视频的数字化就不再赘述，因而需要教师在教学中适当加以补充。
另外，图像文件的不同类型意味着不同的压缩编码，也为后面的数据压缩做了铺垫。
本课是《图像与视频编码》的第一课时，主要讲解图像数字化的过程和原理，通过学习活动加深学生对图像编码的理解，并能初步掌握图像处理的常用方法和技能。
因此，在图像加工处理环节，教师安排的学习活动是为“体质健康”项目设计封面或招贴画，这样既能达成技能教学的目标，又能为本章项目的顺利完成做好铺垫。
● 教学对象分析图像是高一学生喜闻乐见的媒体格式，但他们对图像的数字化原理可能一知半解。
关于图像的加工处理，他们可能熟悉一些简单的手机应用软件，但对计算机上的常用编辑软件却不太熟悉。
网页中插入图片教学设计
课件、网站相关素材、多媒体课室
教学程序
时间
教学活动
教师活动（内容、策略）
学生活动（内容、形式）
教学意图
一、课堂导入
15分钟
课前复习：
1.复习旧知（插入特殊符号、设置文本格式与编辑文本），导入新课（插入项目符号、插入时间与水平线）
2、展示一些含有图片的精美网页，提出问题如何在网页里插入和编辑图片，美化网页？
听教师讲解
参考书本运用相关知识自主操作探究，完成拓展任务
学生自主练习测试知识的掌握程度
教师小结
在本活动中我们制作了站点的分页，为插入分页中的图像设置大小、边框和文字提示。
学生演示操作思考并理解
知识系列的形成
五、
课堂小结
10分钟
（1）插入图像的几种方法
（2）设置图像属性的方法
学生边听老师的总结边操作相关的知识
教学课题和内容
为网页添加图像
教学日期
3周3
课时数
2
课的类型
综合性
教学目标
⑴掌握使用插入栏插入图像。
⑵掌握使用菜单栏插入图像。
⑶掌握使用Ctrl+Alt+I组合键插入图像。
⑷掌握使用文件面板插入图像。
⑸掌握编辑图像的方法。
教学重点难点
⑴插入图像的各种方法。
⑵图像的编辑操作。
教学方法
讲授法、操作练习法任务驱法
请同学回答和解决问题
学生思考问题，并尝试解决问题
请同学上台演示解决问题
学生遇到问题，讨论解决方法
激情导入
激发学生的学习兴趣
引导学生思考本节课的问题
明确课堂的学习目标
3
20分钟
教师打开网页，边操作演示边讲解以下理论知识：