《网页设计与制作》课程标准

2024年1月25日发(作者：)

营销型网站建设实训

课程标准

课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分

一、课程定位

1. 课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。

围绕电子商务专业的培养目标，该课程的定位为：

.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。

.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。

.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。

2. 课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。

通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。

知识目标：

•熟悉和掌握静态网页设计与制作的基本知识；

•掌握Web国际标准基础知识；

•了解和熟悉HTML语言；

•掌握静态网页设计与制作的知识；

•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；

•坚持手写代码，形成良好的代码规范编写习惯。

能力目标：

•具备信息收集、处理、准备、加工的能力；

•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；

•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。

素质目标：

•按时守信的诚实作风；

•乐观向上的敬业精神；

•沟通协作的团队意识；•知识获取和应用的自主学习能力；

•探索实践的创新能力；

•手写HTML代码的能力；

•正确使用手册的能力。

3. 前导后续课程衔接《网页设计与制作》课程作为电子商务专业的一门专业基础课，是面向“网站维护”职业岗位的学习领域课程，也是满足职业岗位任职要求的基本能力课程，侧重于学习基于W3C网页设计标准的静态网页的设计与制作、HTML语言、CSS样式等相关知识。

本课程的前置课程是网络营销基础、办公技能与应用、Ph。toshop图像处理、网站策划，其后续课程是“网站优化类”课程。可以解决中对网站前台界面的设计和制作需求。二、课程设计

1. 课程设计理念

（1）课程设计体现动手实践能力

同类课程大都围绕网页设计与制作软件（如：Dreamweaver）的功能使用展开教学。为使学生毕业后能满足实际工作岗位的需求，课程教学必须要教会学生熟悉Web标准，掌握DIV+CSS网页布局方法，使用网站建设的流行技术，坚持手写代码，形成良好的代码规范编写习惯，制作符合Web标准的静态网站，为后续“Web系统开发技术类”课程的学习打下良好的基础。由此，形成了课程设计的雏形。

本课程倡导“开放式学习、实践中学习、自主学习、按需学习”的学习观念，本课程的教学资源全部可在网上浏览和下载，任何学习者（Anyone）在任何时候（Anytime）、任何地方（Anywhere）都能获取知识、训练技能，保证学习者按需学习和自主学习。

注重与企业合作，按照“职业岗位一岗位需求能力一确立教学项目”的项目导向式的运行机制来组织教学，以突出专业课程的职业性、实践性和开放性……

⑵课程教学贯穿职业能力和素质培养

在进行课程设计时，通过将理论知识和实践技能整合，将专业能力培养和职业素质培养整合，将工作过程与学生认知规律整合，使课程教学贯穿职业能力和素质培养。通过创设真实的情境获得职业内容和工作环境的感性认识；学以致用，通过融“教、学、做”一体的教学活动、通过实施以学生为中心的教学，通过提高教师的教学驾驭能力和发挥榜样作用，切实提高人才培养质量。

（3）课程实施通过真实任务驱动在具体教学过程中，以真实项目导向，真实任务引领，并以任务驱动来完成整个教学过程。在任务中涵盖教学的基本要求和从事实际工作所需要的知识和技能，并留有自主学习和拓展提高的空间。让学生介入完成实际工作任务，让已有知识和技能作为完成下一步任务的基础，让完成任务的过程成为一个愉悦的过程，让学生在完成任务后取得明确的成果，让自主获取新的成果成为进一步激发学习热情的动力。

2. 课程设计思路围绕“将工作任务转化为真实项目导向、任务引领、并以任务驱动进行教学的课程”的思路进行课程设计。

（1）工作任务分析

“用户界面设计（UI）”职业岗位的核心工作任务是：网页设计与制作，即：网站前端设计。

其具体的工作为：按照客户的要求进行网站规划和网页设计，综合运用网页编辑软件、图像处理软件（或Fireworks）设计和制作网页，应用DIV+CSS网页布局设计方法，完成基于Web国际标准的静态网站策划、分析、设计、布局、测试的工作，并解决'Web系统开发技术类”课程中对网站前台界面的设计和制作需求。坚持手写代码，形成良好的代码规范编写习惯，也为今后胜任小型动态网站建设、大型网站的规划与建设工作打好基础。

（2）工作任务设计

在网页设计与制作课程学习领域中贯穿两个平行的项目：一个是模仿项目：北京大学网站设计与制作；一个是拓展项目：绿色食品网站设计与制作；模仿型项目来源于北京大学网站，这是一个真实的项目，也是一个学生感兴趣的项目。以模仿型项目作为教学载体，教学的基本要求和完成实际工作所要求的基本知识、技能都融入在该项目中。根据网页设计和网站建设的实际工作流程，将该项目分成若干子任务，学生依据任务样本，在教师的示范引导下通过模仿而逐个完成子任务，最后完成项目，获取学习成果。

与完成该模仿型项目相平行，以拓展项目作为提高。教师只给出原则性要求，网站内容依据学生个人爱好自由确定，技术的运用在满足原则要求的前提下由学生创意发挥，实现知识的拓展和能力的进一步提高。在主讲教师和企业兼职教师的共同指导下，组织学生参与实际项目开发，全面锻炼学生的综合素质和职业能力。

创建的网站包括3个页面，分为两层，第一层为首页，第二层为1个列表页和1个详情页。

教学内容完全根据真实任务来确定。网页只有链接成网站才有其存在的意义，所以网页设计与制作实际上就是网站设计与制作。

（3）教学模式设计该课程采用“项目导向、任务驱动、理实一体”的教学模式。

课程教学全部在多媒体网络机房进行，整个教学过程分为“项目的导入〉逐个完成由模仿项目切分而成的子任务，与此同步逐步完成拓展型项目>最后完成两个项目（获取学习成果）”的过程，辅以课余参与实际项目的开发，给学生提供进一步锻炼与提高的机会。

（4）评价考核模式设计课程考核是检验课程教学效果、学生知识技能掌握程度的有效手段，本课程在设计考核

方式时应遵循学生主动性原则、合作学习原则、体验成功原则、注重过程原则，对网页设计与制作课程的考核方式进行全方面、多角度的设计。

本课程主要采取“平时考核+阶段考核+综合评价”综合性的考核方式。该课程实行“以完成模仿项目质量为基础，以完成拓展项目质量为重点，兼顾质量、学习态度、学习纪律、协作能力等，全方位、多角度”的考核评价模式。

将课程考核分为：平时、阶段和综合三部分。

平时考核依据完成模仿项目的质量。学生在教师引导下完成模仿项目情况能准确地反映

出学生基本知识、技能掌握情况。每完成一个子任务，教师选用请学生自评、学生间互评、教师评价的方式给每一个学生恰如其分的评价，并记录为平时成绩。考核后，如学生对本人完成项目情况不满意，允许进一步完善，重新考核。平时考核与巡回指导同步进行，当场完成。

阶段考核依据完成拓展项目质量，兼顾原有水平。完成和模仿项目同时进行的拓展项目的质量，较好地反映了学生自主学习、协作学习、知识综合运用、拓展创新的能力。将该项目分为若干阶段，学生完成每一阶段任务后都要撰写制作说明，然后提交阶段性作品和制作说明，由教师根据每阶段考核要求进行评价，同时兼顾原有水平。

综合评价主要根据学生的完成模仿项目、拓展项目、出勤率、学习态度、学习纪律、协作能力等进行。

具体考核内容与分数比值如表下所示：

考核类型

平时考核

阶段考核

综合评价

评价主体

任课教师、学生

任课教师、学生

任课教师、学生

考核内容

完成模仿项目质量

完成拓展项目质量，兼顾原有水平

出勤率、学习态度、学习纪律、协作能力、考证和实战等

比例

30%

40%

30%

（5）职业能力培养模式设计

根据职业能力和职业素质目标，确定职业能力培养和课程教学中相应学习情境、教学活

动一一对应，贯穿于课程教学始终。

职业能力培养和教学活动对应如下

完成模仿型教学任务过程

完成拓展型教学任务过程

参与企业实际项目开发

作品展示

考勤制度、教学规范

教师在教学活动中榜样作用

学会探索、学会学习、学会传承

自主学习、开拓创新、团队协作能力、查阅资料的能力

团队协作能力、完成实际工作的能力、学习能力

口头表达、归纳总结能力

责任心、时间掌控能力

做一个真诚、有追求、有人责任心、知识丰富、技能娴熟的“人”

撰写网站规划书和设计说明 撰写简单科技文档的能力

三、课程内容与要求

根据Web前台技术行业网页美工、网页设计与制作职业岗位的要求，应具备较好的网页布局与美化、网页设计与制作能力，本课程的教学以项目为载体。

课程教学采用“理论实践一体化”教学模式，理论教学内容与实践教学内容融为一体根据网页美工、网页设计与制作岗位的能力要求，兼顾学生的认知规律，重构了课程结构将本课程的教学内容分解为10个单元，形成了以项目为载体的课程结构。

教学单元设计如下表所示。

序号

1

单元名称

网页赏析、创建站点与浏览网页

网站项目开发环境搭建

学时

4

4

2

3

4

5

图文混排网页的制作

表格与表格布局网页的制作

包含flash元素和超级链接的网页制作

表单网页的制作

CSS布局与网页美化

网站首页的设计与制作

网站列表页的设计与制作

网站详情页的设计与制作

合计

4

4

4

6

7

8

8

12

8

8

64

8

9

10

网页设计与制作课程的项目课程结构与学时分配如下表所示：

单元名编号 称

1.

教学内容

站点的创建与管理 1.

主要教学知识点

站点的创建与管理

教学目标

1. 学会创建本地站点和管理本地站点

参考学时

术语与网页2.

2. 认识网页、网站和浏览2. 网页的相关概念、熟悉Dreamweaver的工作界面

器窗口的基本组成

网页赏析、创建1

站点与浏览网页

的主要构成元素

3. 熟悉浏览器窗口的基本组成和网页的基本组成Dreamweaver的界面布局与工元素

3. 认识网页的基本组成元3.

素和网页的布局结构

4. 了解制作网页的常用软件

5. 了解网页的相关概念和术语

作环境

4. 了解网站与网页的相关概念

5•认识网页的基本布局结构

6.了解一些制作网页、处理图像、制作动画的工具

7•能分析优秀网页的布局结构、颜色搭配、视觉效果等

1. 了解手册的使用

2. 编辑器(Sublime

1. 手册的使用

1. 熟悉手册的基本界面，能灵活使用手册查询相关内容和自我学习

2. 熟悉编辑器(SublimeText)的工作界面

3. 熟悉Html的文档结构

4. 能定义Html的文件信息

5. 能熟练地使用创建好的HTML骨架

6. 了解网页文件头内容的设置方法

7. 掌握谷歌浏览器审查元素的方法

1.站点的创建与管理

1•文件面板的使用

1. 掌握对网页文档的基本操作

2. 掌握设置网页整体属性的操作方法

3•掌握在网页中输入文字、编辑文本、设置文本4

4

4

2. 编辑器的使用

3. HTML的文档结构

网站项2

目开发环境搭建

Text)的工作界面

3. 熟悉HTML文档结构

4. 创建HTML骨架

5. 使用谷歌浏览器审查元素

4. 创建HTML骨架

5. 谷歌浏览器审查元素方法

2•在网页中进行页面控制

2. 站点的创建与管理

图文混3

排网页的制作

3. 制作文本网页

4. 制作图文混排的网页

3. 创建项目列表和编号列表

4•插入特殊字符、水平线、日期属性、设置项目列表、输入空格、文本换行的操对象

5. 在页面中插入图像

作方法

4•掌握在网页中插入特殊字符、插入水平线和插入日期的操作方法

6. 设置图像属性

5•掌握在网页中插入图像、鼠标经过图像的方法

6. 掌握设置页面背景图像和图像属性的方法

7. 能创建与管理站点

8. 能进行页面控制

9. 能进行文本操作

10. 能在网页中进行图文混排

11. 熟悉HTML的基本结构

1. 在网页中插入表格

1. 插入表格

1•能正确地插入表格，合理地设置表格的属性

2. 能正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性

3. 掌握单元格的合并、拆分、插入和删除的操作方法

4. 能正确地设置表格中行和列的属性

5•能正确设置表格、单元格的背景图像和背景颜色

6.能正确地在表格中输入文字并定位

1. 在网页中插入Flash动1•创建外部链接

画或图像

2•创建内部链接

2. 在网页中创建多个超级包含

Flash元5

素和超级链接的网页制作

链接

3. 创建电子邮件链接

4. 创建锚点链接

5•创建图像热点链接

6. 创建文件下载链接

7. 创建空地址链接

8. 检查链接

9. 创建文字形式的导航栏

10. 实现滚动图片功能

1.能创建网页的内部链接和外部链接

2•能在图像中设置热点区域，并创建图像热点链接

3. 能创建命名锚记和到该命名锚记的链接

4. 能创建电子邮件链接

5•能更改链接颜色、设置链接的打开方式、设置空链接

6. 能测试链接的有效性

7. 能正确地插入Flash动画

8•进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性

9•掌握滚动图片的方法

10.掌握绝对路径和相对路径以及链接的类型

1.

表单网6

页的制作

域

2. 设置表单域的属性

3. 在表单域中插入表单控1. 创建美化页面元素的样1•创建美化页面元素的样式

式

7

2. 美化页面元素样式属性的设1. 能创建美化页面元素的样式

2. 能在使用DIV+CSS布局的网页中输入文字和插入各种页面元素

3. 能应用美化页面元素样式美化网页

8

在网页中插入表单1. 插入表单域 1. 能在网页中正确插入表单域

2. 能在表单域中正确插入各项表单控件

8

4

4

2. 设置表格和单元格属性

2. 设置表格属性

表格与4

表格布局网页的制作

3. 在表格中插入网页元素

3. 插入嵌套表格

4. 单元格属性设置

5. 在表格中插入网页元素

2. 插入表单控件

3. 设置表单域属性

CSS布局2. 输入文字和插入各种页置

与网页美化

面元素

3. 在页面各个区块中输入文字3. 应用美化页面元素样式或插入页面元素

美化网页

4. 应用美化页面元素样式美化网页

8

网站首 1.画出网站的整体结构， 1.网站开发基本流程 1.能应用CSS样式设计网站首页的主体布局结

12

页的设对每个网页进行规划

计与制2•使用DIV+CSS和表格联作

合布局网页

3. 设计与制作导航栏

4. 插入网页元素

2. 网站规划与组织

3. 网页设计基本原理与方法

4. 网页设计的规范

5. 网站各页面的布局结构设计

6. CSS样式的创建与属性设置

7. 导航栏的设计与制作

8. 插入网页元素

9. 超级链接的设置

构

2. 能应用CSS样式设计网站首页的局部布局结构

3. 能设计与制作导航栏

4. 会插入SWF动画

5. 会创建包含底部导航栏和版权信息的脚本文件

6•会设计用户登录表单

1.画出网站的整体结构，对每个网页进行规划

2•使用DIV+CSS和表格联网站列9

表页的设计与制作

合布局网页

3. 设计与制作导航栏

4. 插入网页元素

1. 网站开发基本流程

2. 网站规划与组织

3. 网页设计基本原理与方法

4. 网页设计的规范

5. 网站各页面的布局结构设计

6. CSS样式的创建与属性设置

7. 导航栏的设计与制作

8. 插入网页元素

9. 超级链接的设置

1. 能应用CSS样式设计网站列表页的主体布局结构

2. 能应用CSS样式设计网站列表页的局部布局结构

3. 能设计与制作导航栏

4. 会插入SWF动画

5. 会创建包含底部导航栏和版权信息的脚本文件

6•会设计用户登录表单

8

1•画出网站的整体结构，对每个网页进行规划

网站详10

情页的设计与制作

1. 网站开发基本流程

2. 网站规划与组织

1. 能应用CSS样式设计网站详情页的主体布局结构

2. 能应用CSS样式设计网站详情页的局部布局结构

3. 能设计与制作导航栏

4. 会插入SWF动画

5. 会创建包含底部导航栏和版权信息的脚本文件

6•会设计用户登录表单

64

8

2•使用DIV+CSS和表格联

3. 网页设计基本原理与方法

合布局网页

3•设计与制作导航栏

4•插入网页元素

4. 网页设计的规范

5. 网站各页面的布局结构设计

6. CSS样式的创建与属性设置

7. 导航栏的设计与制作

8. 插入网页元素

9. 超级链接的设置

合计

四、教学资源要求

1. 教材选取原则

教材选取遵循“适用、实用、够用”的原则。

（1）适用：教材要以网页制作技术为基础，符合网页设计与制作员的能力要求和本课程的培养目标。

（2）实用：教材的教学内容要注意基础性、启发性、应用性和拓展性的结合，符合高职计算机多媒体技术专业学生特点；教材应按实际工作案例组织编写内容，注意网页制作技术与美学艺术的结合，重在培养学生的创新思维和专业技能；教材应以真实项目为主线，按网站实际创建过程组织编写内容，强调理论与实践的结合，便于实现“教、学、做”三位一体的“理论实践一体化课堂”的教学模式。

（3）够用：教材的内容主要包括网页制作技术和网页制作的实际操作技能，不涉及太多、太深的理论知识。

2. 推荐教材

3. 参考的教学资料

4. 教学环境资源要求

（1）教师要求

执教教师应熟悉HTML、CSS、JavaScript等方面的理论知识，熟悉Dreamweaver网页制作工具，能够使用Dreamweaver等工具制作符合Web标准的网页，具有一定制作设计与制作工作经验，熟悉网站制作与设计流程，能跟踪最新的网页设计与制作技术，熟悉网页布局与美化技术、网页特效设计技术，能独立完成美工及DIV+CSS网页的静态页面布局。

（2）学习场地与实训设备要求该课程采用“项目导向，任务驱动，案例教学，理论实践一体化课堂”的教学模式开展教学。课程的“理论实践一体化”教学全过程要求全部安排在设施先进的多媒体实训室进行，以实现“教、学、做、评”合一，同时要求安装多媒体教学软件，方便下发教学任务和收集学生训练结果。

五、考核方式与标准

该课程的考核改变单一的终结性评价的方法，采用平时考核、阶段考核和综合评价考核

相结合，灵活多样的考核方式可以全面考核学生的学习效果。综合评价主要根据学生的出勤率、学习态度、学习纪律、协作能力等进行具体考核内容与分数比值如表下所示：

考核类型

平时考核

阶段考核

综合评价

评价主体 考核内容 比例

30%

40%

30%

任课教师、学生 完成模仿项目质量

任课教师、学生 完成拓展项目质量，兼顾原有水平

任课教师、学生

出勤率、学习态度、学习纪律、协作能力、考证和实战等

六、教学实施建议

在教学过程中，应立足于加强学生实际操作能力的培养，采用“教、学、做”教学，用实例来引导学生学习技能，并通过动手实训，让学生自己理解并归纳、掌握基本的编程知识与常识。整个教学过程突出精讲多练的模式，用大量的课内外实践来达到教学目的。老师应该在教学过程中树立以学生为中心的思想，教师是一个引导者，建议将学生分为若干小组，组织学生进行课堂分组讨论，启发学生通过动手实践以及对实践结果进行思考获取知识，避免灌输式教学，避免让学生背记大量的尚未理解的教条，指导学生通过动手来解决遇到的学习问题，教授学生如何去思考和解决遇到的问题。

建议使用手写代码的方式进行教学和学生练习。