2024年2月29日发(作者：)

网页设计与制作课程教案

教师姓名

所在系

授课专业

课程代码

总 学 时 学分

教材名称

授课时间

授课题目

第一周 2个学时 共90分钟

网页设计概述

教学目的与要求：1 、对网站及网页有一定的认识，激发学生学习网页设计的兴趣

2 、掌握网页的规划栏目

3 、掌握网页版面设计和色彩搭配

教学基本内容：

1 、网页设计的基本流程

2 、网站的规划

教学重点和难点：【教学重点】

1 、网页设计的基本流程

2 、网页的版面设计

3 、网页的色彩搭配

【教学难点】

1 、网页的版面设计

2 、网页的色彩搭配

教学过程：向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：讲解网页设计的基本流程。

第二步：讲解规划网站栏目。

第三步：讲解和演示版面设计。

第四步：讲解和演示网页的色彩搭配。

第五步：讲解和演示网页中的图像，字体和网页中的动画与广告。

第六步：学生分析网页版面局面的方法，教师实施指导。

第七步：课程小结。

第八步：学生完成课程作业。

思考题、讨论题、作业：

1 、了解一个网站的基本元素

2 、练习构思一个网站域名和标志

3 、设计一个网站的框架结构

教学后记：

授课时间

授课题目

教学目的与要求：

第二周 2个学时 共90分钟

建立一个网站

1 、熟练掌握建站流程

2 、掌握网站的定位

3 、掌握网站风格的设计

4 、熟练掌握在网页中添加各元素

教学基本内容：

1 、建站流程

2 、在网页中添加文字等元素

教学重点和难点：

【教学重点】

1 、建站流程

2 、网站的定位

3 、熟练掌握在网页中添加文字等元素

【教学难点】

1 、网站的定位

2 、网站风格的设计

教学过程：

向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：讲解建站的流程。

第二步：讲解市场调查与分析。

第三步：讲解建站内容。

第四步：讲解功能框架。

第五步：讲解界面设计。

第六步：演示站点框图。

第七步：演示网站截图。

第八步：讲解并演示在网页中添加元素。

第九步：学生完成课程作业。

思考题、讨论题、作业：

1. 观摩公司的一个真实网站规划过程

2. 理解开发团队的脚色组成

3. 理解规划过程规范化的重要性

4. 初步理解团队协作

参考资料（含参考书、文献等）同上

教学后记：

授课时间

授课题目

教学目的与要求：

第三周2个课时 共90分钟

HTML表格与单元格标记的使用

1 、掌握表格的插入

2 、掌握单元格的相关操作

3 、用表格布局制作一个网页

4 、表格嵌套与叠加

教学基本内容：

1 、演示并讲解用表格布局制作的网页

2 、插入表格

3 、单元格的相关操作

4 、表格嵌套与叠加

教学重点和难点：

【教学重点】

1 、表格的插入

2 、单元格的相关操作

【教学难点】

1 、表格的插入

2 、单元格的相关操作

3 、用表格布局制作一个网页

教学过程：

向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：演示并讲解用表格布局制作的网页。

第二步：分步演示并讲解、制作网页。

第三步：学生分析并制作网页，教师实施指导。

第四步：课程小结。

第五步：学生完成课程作业。

思考题、讨论题、作业：

第一步：演示并分析网页中的相关效果。

第二步：分步讲解并完成网页中效果的实现。

第三步：分组讨论并修改网页。

参考资料（含参考书、文献等）同上

教学后记：

授课时间

第四周2个课时 共90分钟

授课题目 使用 HTML语言制作框架页面

教学目的与要求：

1 、掌握框架的基本结构

2 、掌握框架的各种属性

3 、掌握框架结构之间的链接

教学基本内容：

1 、演示并讲解用框架制作的网页

2 、框架的基本结构

3 、框架的各种属性

4 、框架结构之间的链接

教学重点和难点：

【教学重点】

1 、框架的各种属性

2 、框架结构之间的链接

【教学难点】

1 、框架的各种属性

2 、框架结构之间的链接

教学过程：

向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：演示并讲解用框架制作的网页。

第二步：分步演示并讲解、制作网页。

第三步：学生分析并制作网页，教师实施指导。

第四步：课程小结。

第五步：学生完成课程作业。

思考题、讨论题、作业：

1 、掌握框架的基本结构

2 、掌握框架的各种属性

3 、熟练掌握框架结构之间的链接

参考资料（含参考书、文献等）同上

教学后记：

授课时间

授课题目

教学目的与要求：

1 、掌握表单标志

2 、掌握输入标志

教学基本内容：

第五周2个课时

在 HTML中表单的设计与制作

1 、演示并讲解注册网页

2 、表单标志

3 、输入标志

教学重点和难点：

【教学重点】

1 、掌握输入标志

2 、掌握表单的应用

【教学难点】

1 、掌握表单元素的各项属性

2 、能独立制作完成常见的各种表单页面

教学过程：

向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：演示并讲解注册网页。

第二步：分步演示并讲解、制作表单元素。

第三步：分析并制作网页。

第四步：课程小结。

第五步：学生完成课程作业。

思考题、讨论题、作业：

第一步：演示并分析网页中的相关效果。

第二步：分步讲解并完成网页中效果的实现。

第三步：分组讨论并修改网页。

参考资料（含参考书、文献等）同上

教学后记：

授课时间

授课题目

第六周 2个课时

CSS样式标记

教学目的与要求：

1 、掌握 CSS 的基本概念

2 、掌握 CSS 样式定义

3 、掌握 CSS 常用属性与值

教学基本内容：

1 、演示并讲解 CSS 的应用

2 、 CSS 的基本概念

3 、 CSS 的特点

4 、 CSS 样式定义

5 、 CSS 常用属性与值

教学重点和难点：

【教学重点】

1 、掌握 CSS 样式定义

2 、掌握 CSS 常用属性与值

【教学难点】

1 、掌握 CSS 样式定义

2 、 CSS 常用属性与值

3 、能独立完成 CSS 样式的应用

教学过程：

向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。

第一步：演示并讲解用 CSS 样式制作的网页。

第二步：分步演示并讲解 CSS 样式的基本概念。

第三步：讲解并分析 CSS 常用属性与值。

第四步：结合 CSS 样式的使用制作网页

第四步：课程小结。

第五步：学生完成课程作业。

思考题、讨论题、作业：

第一步：演示并讲解用 CSS 样式制作的网页。

第二步：分步演示并讲解 CSS 样式的基本概念。

第三步：讲解并分析 CSS 的知识点。

第四步：结合 CSS 样式的使用制作网页

第四步：课程小结。

参考资料（含参考书、文献等）同上

教学后记：