资源简介

教案名称 任务十一 完整项目：制作学院网站 计划学时 8学时
知识目标 学习网站规划步骤了解效果图设计原则掌握效果图设计步骤能够对效果图进行切片掌握主页、列表页、详情页搭建方法掌握CSS样式
思政目标 引导学生做好职业规划，在课程学习中树立职业理想。认识沟通的重要性。引导学生学会把复杂的问题简单化，逐个解决引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习
教学重点 网站规划、效果图设计
教学难点 效果图设计
教学模式 教学做一体化线上+线下混合教学
教学活动及主要环节 思政元素切入点
第1、2学时 （网站规划、效果图设计）课前发布任务：观看学台相关学习视频。做课前测试题。I.导入新课：（5分钟）本学期我们学习了网页的基础知识，做了简单网站。有了一定的知识积累后，同学们是不是跃跃欲试要做真正的网站了？本任务我们通过制作学院网站一起来学习网站的开发流程。从规划网站开始，设计网页效果图，制作网站，并为网站添加动态效果，让网站效果更加绚丽。本次课学习网站规划，并设计学院网站主页效果图。（让同学们在学台观看视频，提前预习。）II.重难点内容讲授：（80分钟） 网站规划（15分钟）网站需求分析未来信息学院网站的主要功能2．网站的风格定位3．规划草图4．项目计划一般网站开发流程二、效果图设计原则（5分钟）（以学院网站为例进行分析介绍）先背景，后前景，先上后下，先左后右。三、效果图设计步骤（50分钟）（讲解部分难点，课下发给学生们配套电子教材及对应视频进行课下自学，课下将效果图设计好）1.新建画布2.添加参考线3.制作背景4.填充图案5.添加logo6.设计导航条7.添加滚动文本8.图片切换区9.学校要闻区10.通知公告区11.系部动态12.链接13.视频宣传14.友情链接15页脚16.保存文件效果图切片导出网页（10分钟）（讲解用法及注意事项，简单演示，为学会配备操作视频，课下进行切片操作）选择“切片工具”，根据需要进行切片。几个注意事项：将预期的切片设计好，再进行切片；尽量放大图片进行切片；在网页中使用的切片图片，重新进行命名，以便在制作网站时使用。III.课堂小结：（5分钟）网站规划步骤效果图设计原则效果图设计步骤效果图切片导出网页 作业：完成效果图设计及对效果图进行切片操作第3、4学时（制作网站主页）课前发布任务：观看学台任务书及相关学习视频。做课前测试题。I.导入新课：（5分钟）上节课给大家留下了制作学院官网的设计图的任务，并将制作好的效果图进行切片操作。这节课我们根据制作好的效果图制作学院官网主页。II.重难点内容讲授：（80分钟）一、主页结构分析（10分钟）把整个页面分成这样几大块：页首、导航、滚动文本、主体部分、友情链接和页脚。主体部分可分为五行。 二、准备工作（10分钟）1.新建项目，项目名称为chapter11，将素材中提供的images文件夹拷贝到chapter1文件夹下。2.新建网页index.html。3.在chapter11中新建目录“css”，在CSS上当中新建样式表文件index.css，书写通用样式。4.将网页文件及样式表文件建立链接。三、制作index.html页面（60分钟）（讲解部分难点，学生通过教材和学习通配套视频进行练习。）1.制作网页的banner部分2.制作网页导航条部分 将之前完成的导航代码复制修改即可。3.制作滚动文字部分4.制作主体部分5行在前面的模块中我们已经完成了导航条和新闻块，只需将对应的代码稍作修改并移植到主页中即可。5.友情链接6.页脚III.课堂小结： （5分钟） 创建项目创建主页，搭建主页结构，添加页面各元素作业：根据教材和学习通视频完成网站主页。第5、6学时（制作新闻列表页）课前发布任务：观看学台相关学习视频。做课前测试题。I.导入新课：（5分钟）网站新闻内容较多时，不能全部在首页显示，可以建立新闻列表页展示近期新闻，方便用户查阅。新闻列表页要简洁，让用户很快了解自己想访问哪些内容。II.重难点内容讲授：（80分钟） 分析页面结构（5分钟）新闻列表页主体部分与主页不同，其它部分相同，将主页复制一份，改名为newsList.html。在css目录中再新建一个样式表文件，名称为list.css，将index.css和list.css都链接到newsList.html页面中。左侧部分制作（15分钟）（带领同学们一起操作）分析基本页面结构：
三、添加左侧部分css效果（25分钟）（带领同学一起操作）四、右侧部分制作（15分钟）分析右侧结构五、添加右侧css效果（20分钟）（带领同学一起操作）右侧采用灵活的弹性高度。III.课堂小结： （5分钟） 学校网站列表页与首页的风格一致，这样做可以提升网站的辨识度，提高网站制作效率。我们为右侧列表设置了弹性高度，如果内容高度不确定时，采用弹性高度更具灵活性。作业：完成主页的新闻页主体部分结构以及样式设置。第7、8学时（制作网站详情页、添加脚本）课前发布任务：观看学台相关学习视频。做课前测试题。I.导入新课：（5分钟）详情页在网站中有着非常重要的地位，要有清晰简明的详情页文案、吸引人的页面。在电商网站中好的产品详情页具有提高商品转化率的作用。今天我们制作学院网站新闻详情页、视频宣传页，并为网站各页面添加脚本。页面结构制作（30分钟）（带领同学一起操作）将newsList.html页面复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，添加右侧HTML和CSS代码。二、制作视频宣传页（30分钟）1.视频标记

展开更多......

收起↑