课程类型：必修课
适用专业：视觉传达
总 学 时：
适宜开设学期：4
一、课程概述
本课程是视觉传达艺术设计专业数字媒体技术方向的一门专业核心课程。通过本课程的学习，要求学生掌握目前行业中网页设计的方法和流程，网页交互的形式，网页制作的方法。具备通过对客户需求的分析，从美学的角度的去完成网页的设计，同时通过本课程的学习，提高学生的操作技能，培养学生踏实认真、精益求精、团结合作、创新的精神，培养良好的职业道德。
1．本课程学习领域包含网站版面设计，网站制作和网站内容编排。通过对网站的用户需求分析、题材选择、设计元素、表现形式、优秀作品分析等使学生在认知并研究文字、图案、导航等平面设计语言，具备在各种形式的网页设计中灵活应用、整体把握的能力，培养学生的创意能力，并提高对网络元素设计在市场中定位的准确性。
2．本学习领域的学习情境设计是依据企业、商业、社会团体、文化机构等设计活动之需要而设计，围绕着企业典型工作任务设定若干个学习情境，通过社会实践与项目实训课题相结合的教学模式。
3．本课程需在《计算机应用》、《数码摄影与图象处理》等课程之后开设。此时学生已经具备一定的计算机基础知识和操作能力，能较快地掌握网页设计的各种知识，并运用所学知识做出具有特色的网站。
二、课程目标
1．专业能力
学生应熟练掌握网站设计与制作的相关方法和技术，包括网站LOGO设计、网页的Banner设计、网页的版面设计，网页设计中的文字图片色彩的运用、网页中HTML-DIV-CSS样式的语言运用。以适应现代多媒体行业发展要求及拓宽学生求职能力的需要。
2．方法能力
（1）具有较强的草稿绘制和平面设计编排能力。
（2）具有较强的自学能力及分析问题和解决问题的能力。
（3）具有较准确的市场分析、调研、信息获取及判断的能力。
（4）具有一定的就业与创业知识和主动寻找职业机会的能力。
3．职业素养
（1）具有良好的诚信品质、职业道德、审美、文化素质。
（2）具有较强的沟通社交能力和应变能力。
（3）具有较强的组织、协调能力，与团队和他人密切协作的能力。
三、学习情境划分与学时
（一）《网页艺术设计》学习情境划分与学时一览表
| 学习情境 | 学习内容 | 学时 | 备注 |
| 1、 情境一 网页设计制作基本概述 | 1、互联网、网页、网站、超级连接、HTML语言、FTP、HTTP等基础网络知识； 2、网站设计制作的常用工具与基本流程 3、HTML语言的一般规律 4、不同网站类型不同的设计与制作要求 | 8 | 理解网页设计制作原理、基本手段、流程与制作要求并 熟悉软件各个功能模块与主要菜单、窗口 创建简单的网站页面并进行链接 |
| 2、 情境二 网页设计制作基础操作 | 1．网站的整体结构规划 2．创建和管理本地站点 3．创建简单页面，设置页面属性 4．插入文字、图像、水平线等基本页面元素 5．网页中的各种超级连接 | 8 | |
| 3、 情境三 页面布局控制技术 | 1．表格技术及其应用 2．图层技术及其应用 3．框架技术及其应用 4．HTML-DIV-CSS网页控制 | 8 | 以优秀的实际运用案例为参照，掌握技巧与原理，积累经验 |
| 4、 情境四 网页界面元素设计 | 1.网站LOGO的设计 2.网站Banner的设计 3.网站Button的设计 4.网站导航的设计 5.网站ICON的设计 | 16 | |
| 5、 情境五 网页制作与网站的发布维护 | 1．CSS样式表的运用 2．表单的制作 3．模板与库的运用 4．photoshop中网页设计稿文件的切片与优化输出； 5．网页图形的优化技巧； 6．网站的测试、发布、推广与维护 | 8 | 进一步掌握专业网页设计制作中的相关功能与技巧；熟悉网站的发布、推广与维护 综合运用所学知识，完成一个真实可用的主题网站并上传发布 |
| 6、 情境六 主题网站的分析、设计与制作 | 主题网站的分析、设计与制作 | 16 |
（1）学习情景名称及设计
| 学习情境：情境一：网页设计制作基本概述 | 总学时 | 8 | ||||
| 学习目标 | 通过教学使学生使用软件理解网页设计制作原理、基本手段、流程与制作要求并熟悉软件各个功能模块与主要菜单、窗口等。 | |||||
| 学习任务 | 情境一 ：网页设计制作基本概述 | |||||
| 教学材料 工具与媒体 | 1、备课笔记 2、图形图像素材 3、多媒体教学设备 4、网络教学资源 5、其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1、有一定的造型能力和图形审美能力。 2、熟悉计算机基础知识和基本操作的能力。 3、熟悉文件，文件夹及文件路径的概念。 4、具备从网上搜索资料的能力。 5、有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 采用边讲边演示的方法品读与欣赏，通过案例让学生了解制作Dreamweaver网页设计的具体的流程和方法 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 1 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 1 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 1 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 | 讲授法 提问引导法 | 1 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 2 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 2 | |||
| 学习情境： 情境二 ：网页设计制作基础操作 | 总学时 | 8 | ||||
| 学习目标 | 通过教学使学生使用软件理解网页设计制作原理、基本手段、流程与制作要求、掌握网页中各种元素的操作方法和技巧。 | |||||
| 学习任务 | 情境二 ：网页设计制作基础操作 | |||||
| 教学材料 工具与媒体 | 1备课笔记 2图形图像素材 3多媒体教学设备 4网络教学资源 5其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1、有一定的造型能力和图形审美能力。 2、熟悉计算机基础知识和基本操作的能力。 3、熟悉文件，文件夹及文件路径的概念。 4、具备从网上搜索资料的能力。 5、有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 采用边讲边演示的方法品读与欣赏，通过案例让学生了解制作Dreamweaver网页设计的具体的流程和方法 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 1 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 1 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 1 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 | 讲授法 提问引导法 | 2 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 2 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 1 | |||
| 学习情境：情境三 页面布局控制技术 | 总学时 | 8 | ||||
| 学习目标 | 通过教学使学生使用软件工具进行相关的网页页面版式设计与布局控制及相关的脚本的使用。 | |||||
| 学习任务 | 情境三 页面布局控制技术 | |||||
| 教学材料 工具与媒体 | 1、备课笔记 2、图形图像素材 3、多媒体教学设备 4、网络教学资源 5、其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1、有一定的造型能力和图形审美能力。 2、熟悉计算机基础知识和基本操作的能力。 3、熟悉文件，文件夹及文件路径的概念。 4、具备从网上搜索资料的能力。 5、有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 采用边讲边演示的方法品读与欣赏，通过案例让学生了解基本的HTML语法及基本的页面布局方式。 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 1 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 1 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 1 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 学生完善设计稿，输出、装裱或PPT制作。 | 讲授法 提问引导法 | 2 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 2 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 1 | |||
| 学习情境：情境四 网页界面元素设计 | 总学时 | 16 | ||||
| 学习目标 | 通过教学使学生使用相关的软件工具进行网页相关的元素的设计与制作 | |||||
| 学习任务 | 情境四 网页界面元素设计 | |||||
| 教学材料 工具与媒体 | 1备课笔记 2图形图像素材 3多媒体教学设备 4网络教学资源 5其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1有一定的造型能力和图形审美能力。 2熟悉计算机基础知识和基本操作的能力。 3熟悉文件，文件夹及文件路径的概念。 4具备从网上搜索资料的能力。 5有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 采用边讲边演示的方法品读与欣赏，通过案例让学生了解网页界面元素的设计和制作过程 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 2 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 2 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 2 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 学生完善设计稿，输出、装裱或PPT制作。 | 讲授法 提问引导法 | 4 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 4 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 2 | |||
| 学习情境：情境五 网页制作与网站的发布维护 | 总学时 | 8 | ||||
| 学习目标 | 通过教学使学生使用软件进行设计图-页面的制作并完成站点的发布，使学生学会制作完整的网站。 | |||||
| 学习任务 | 情境五 网页制作与网站的发布维护 | |||||
| 教学材料 工具与媒体 | 1备课笔记 2图形图像素材 3多媒体教学设备 4网络教学资源 5其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1有一定的造型能力和图形审美能力。 2熟悉计算机基础知识和基本操作的能力。 3熟悉文件，文件夹及文件路径的概念。 4具备从网上搜索资料的能力。 5有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 通过教学使学生掌握使用软件进行设计图-页面的制作并了解站点的发布，维护。使学生学会制作完整的网站。 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 1 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 1 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 1 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 | 讲授法 提问引导法 | 2 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 2 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 1 | |||
| 学习情境: 情境六 主题网站的设计与制作 | 总学时 | 16 | ||||
| 学习目标 | 通过案例使学生使用Photoshop,Dreamweaver等软件工具完成相关主题网站的页面设计、制作并发布，了解整个网站的制作过程。 | |||||
| 学习任务 | 情境六 主题网站的设计与制作 | |||||
| 教学材料 工具与媒体 | 1备课笔记 2图形图像素材 3多媒体教学设备 4网络教学资源 5其他。。。 | |||||
| 学生知识与能力准备要求 | ||||||
| 1有一定的造型能力和图形审美能力。 2熟悉计算机基础知识和基本操作的能力。 3熟悉文件，文件夹及文件路径的概念。 4具备从网上搜索资料的能力。 5有一定的自主学习能力。 | ||||||
| 工作情境 描 述 | 通过案例使学生使用Photoshop,Dreamweaver等软件工具完成相关主题网站的页面设计、制作并发布，了解整个网站的制作过程。 | |||||
| 工作步骤 | 工作行为 | 教学方法建议 | 学时分配 | |||
| 资讯 | 教师将项目任务工作单下发到各团队，结合现代流行的设计理念，赏析设计过程。 学生查找相关资料，收集相关优秀网页设计作品，以备自己练习。 | 讲授法 演示法 案例法 多媒体教学法 | 2 | |||
| 计划 | 学生根据收集的资料进行艺术构思，拿出创意设计草案。 | 讲授法 启发引导法 多媒体案例法 | 2 | |||
| 决策 | 教师审核该创意设计草案，根据难易程度指导学生确定最终设计方案。 | 讲授法 启发引导法 | 2 | |||
| 实施 | 教师根据设计成稿，进行操作修改，完善最终设计方案。 | 讲授法 提问引导法 | 4 | |||
| 检查 | 学生以演示其设计完稿，回答同学与老师的提问。 | 多媒体演示 | 4 | |||
| 评估 | 教师点评学生设计作品，是评价该项目教学的绩效。 | 多媒体演示 | 2 | |||
本课程的学生学业评价结果建议采取：
（下表为配套参考格式）
表2 各学习情境的考核方式与考核标准
学习情境
| 编号 | 各情境考核点及比例 | 建议考核方式 | 考核知识点及知识要求 | 成绩比例 |
| 1 | 网页设计制作基本概述 | 教师评价、学生自评 | 能够了解DW软件的界面并熟悉制作网页的过程 | 10% |
| 2 | 网页设计制作基础操作 | 教师评价、学生自评 | 站点的建立及页面各常用元素属性的调整 | 10% |
| 3 | 页面布局控制技术 | 教师评价、学生自评 | 能够熟练的使用图层,表格和框架 | 10% |
4 | 网页界面元素设计 | 教师评价、学生自评 | 能够使用PS制作出与网页界面有关的元素 | 10% |
5 | 网页制作与网站的发布维护 | 教师评价、学生自评 | 使用CSS样式布局网页并发布 | 10% |
6 | 主题网站的分析、设计与制作 | 教师评价、学生自评 | 能够完成一个网站 | 50% |
2、考核方式可为教师评价、学生自评、互评或几种的组合。
表3为综合考核配套参考格式
| 建议考核方式 | 考核的主题（内容） | 考核的目标及要求 | 考核时间 （ 小时） |
| 考核 | 设计制作相关主题网站 |
1．教学资源
根据《网页艺术设计》课程项目教学的要求，必须具备以下：
校内企业合作实训基地
2．教学组织
A、专业理论与实训课程在实训基地中完成教学任务。
B、以设计团队来完成项目任务。
C、整个项目由指导老师负责。
3．师资要求
A、校内专业教师
B、校外专业教师
C、“双师型”教师
D、行业专家
由上述人员组成的教学团队
4．学习场地与设施要求
A、符合项目实训教学的“工作情境”的学习场地以及专业设备。
多媒体电脑教室，备有投影仪，教室电脑可供开放网络，并使学生拷贝作业案例及备份数据。
B、学材、课件与教学软件。
项目任务工作单、文字材料、图形图像材料、网络教学资源、图片素材、设计软件等。
六、其它说明下载本文
