11-1学院网站制作——效果图设计.docVIP

课程名称 WEB前端开发（1） 课次 30 任务、项目、课题名称 学院网站制作——效果图制作 课时 2学时 教学内容 效果图设计原则 效果图设计步骤 效果图切片导出网页 教学目标 了解效果图设计原则 掌握效果图设计步骤 能够对效果图进行切片 教学重点 效果图设计步骤 教学难点 对效果图进行切片 教学活动及主要环节 导入新课：（2分钟） 本学期我们对网页的基础知识进行了介绍，这节课我们一起来做具体的网站，并未网站添加动态效果，让网站效果更加绚丽。 （提前发放电子教材，在超星平台发放任务书，让同学们进行预习。） 新授： 效果图设计原则（5分钟） （以学院网站为例进行分析介绍） 先背景，后前景，先上后下，先左后右。 效果图设计步骤（30分钟） （讲解部分难点，课下发给学生们配套电子教材及对应视频进行课下自学，课下将效果图设计好） 1.新建画布 2.添加参考线 3.制作背景 4.填充图案 5.添加logo 6.设计导航条 7.添加滚动文本 8.图片切换区 9.学校要闻区 10.通知公告区 11.系部动态 12.链接 13.视频宣传 14.友情链接 15页脚 16.保存文件 效果图切片导出网页（15分钟） （讲解用法及注意事项，简单演示，为学会配备操作视频，课下进行切片操作） 选择“切片工具”，根据需要进行切片。 几个注意事项： 将预期的切片设计好，再进行切片； 尽量放大图片进行切片； 在网页中使用的切片图片，重新进行命名，以便在制作网站时使用。 总结：（3分钟） 效果图设计原则 效果图设计步骤 效果图切片导出网页 作业： 完成效果图设计及对效果图进行切片操作 预习： 超星系统发布任务书，实现主页部分页面结构以及样式设置。