任务11 完整项目：制作学院网站

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

三、添加左侧部分css效果（25分钟）（带领同学一起操作）四、右侧部分制作（15分钟）分析右侧结构五、添加右侧css效果（20分钟）（带领同学一起操作）右侧采用灵活的弹性高度。=3\*ROMANIII.课堂小结：（5分钟）学校网站列表页与首页的风格一致，这样做可以提升网站的辨识度，提高网站制作效率。我们为右侧列表设置了弹性高度，如果内容高度不确定时，采用弹性高度更具灵活性。作业：完成主页的新闻页主体部分结构以及样式设置。第11、12学时（制作网站详情页）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.导入新课：（5分钟）详情页在网站中有着非常重要的地位，要有清晰简明的详情页文案、吸引人的页面。在电商网站中好的产品详情页具有提高商品转化率的作用。今天我们制作学院网站新闻详情页、视频宣传页，并为网站各页面添加脚本。=2\*ROMANII.重难点内容讲授及练习：（80分钟）页面结构制作（带领同学一起操作）将newsList.html页面复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，添加右侧HTML和CSS代码。二、制作视频宣传页1.视频标记<video>在HTML5中，video标记用于定义播放视频文件的标准。它支持以下三种视频格式：MP4,WebM,和Ogg。语法格式：<videosrc=“视频文件路径”controls="controls"></video>src：设置视频文件的路径；controls：为视频提供播放控件。示例通过controls="controls"添加播放控制条，我们可以随时播放和暂停视频，调整声音，缩放窗口，选择播放位置等一系列操作。增加自动播放和循环播放功能自动播放，播放完成自动循环播放视频还可以在<video>和</video>之间添加文本，用于在不支持video标记的浏览器中显示。Video的其他常用属性可以自行查表学习。2.音频标记<audio>在HTML5中，audio标记用于定义播放音频文件的标准，它支持以下三种音频格式WAV、MP3、Ogg。语法格式：<audiosrc=“音频文件路径”controls="controls"></audio>同video标记一样，src属性用于设置音频文件的路径，controls属性用于为音频提供播放控件。示例：可以在网页中听音频，并用控制条控制音频播放。audio常用其他属性（表）和video基本类似。3.制作视频宣传页将newsDetail.html页面复制一份，改名为video.html，添加HTML和CSS代码。（带领同学一起操作）=3\*ROMANIII.课堂小结：（5分钟）Video标记Audio标记作业：完成详情页面。凡事预则立,不预则废。网页效果图设计是网站项目开发中非常重要的一环，是通过技术手段来设计网页的视觉效果。效果图的好坏，直接影响到整个网站的质量。通过设计网页效果图，网页设计师可以把对网站的理解通过图像的方式表现出来，然后让客户直观地进行审核，客户也可以通过对效果图的审核，提出自己的意见和建议，让设计师进行修改。最终实现一个能够让双方都满意的设计效果。沟通在网站设计过程中同样发挥重要作用。按照从上到下的顺序，把主页划分为页首、导航、滚动文本、主体部分、友情链接、页脚。主体部分划分为五行。每一块内容单独来做，把复杂的问题分割，简单化，逐项突破。今天我以学校为骄傲,明天学校以我为自豪。爱校