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

教案名称

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

计划学时

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.添加logo

6.设计导航条

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