《网页美工》教学大纲
湖南应用技术学院
网页美工课程
教
学
大
纲
信息工程学院
《网页美工》教 学（实 验） 大 纲
课程代码： 开课学期：2017 学年上学期
适用专业：计算机应用、网络技术 学 时：108
编写教师：黄丽霞 学 分： 4
审 核：黄丽霞 、刘秋喜
第一部分 说 明
一、课程的性质、作用
本课程为计算机科学与专业的专业选修课程。它综合性强、实用性强，通过学习平面构成，色彩搭配，字体设计、排版与布局，网络动画，形象设计，广告传媒等多个方面的理论知识并结合实例进行设计，加深对网页设计的理解，不断提高学生的艺术修养和技能水平。
二、课程的任务与基本要求
以PhotoshopCS5和DreamweaverCS5为平台，在讲解网页的平面构成和色彩搭配的基础上，按照“以应用为目的，以任务为驱动”的方法，通过丰富的案例引导读者全面掌握采用Photoshop CS5美化设计网页元素和采用Dreamweaver CS5设计网页的技巧。全书共分12个项目，主要包括网页平面构成、网页色彩搭配、网页字体设计、网页排版布局设计、网页Logo设计、网页Banner设计、网页导航条设计、网页按钮设计、网页栏目框设计、Dreamweaver设计网页、网页特效设计和企业网设计。
三、教学方法建议
项目法、任务驱动法
二、本课程与其它课程的关系
基础应用型
三、本课程与专业核心技术、能力培养的关系及作用
通过课堂讲授与设计实践，通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另外通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。了解当下网页设计的发展趋势，运用形式美的基本原理探讨网页设计方法和规律。通过本课程的系统学习，培养学生的图形设计能力和创造性思维能力，且能够运用现代设计方法独立进行设计创作
第二部分 本 文
一、基本内容与学时分配
108课时
二、技术能力培养目标、措施、步骤
|
周次 |
学时 |
教 学 内 容 |
作业 |
|
1 |
6 |
理论 网页平面构成：点、线、面的相关知识 实践 项目1：制作网页banner，项目2：制作简单网页 |
实训：圣诞节店铺大促销 |
|
2 |
6 |
理论 网页色彩搭配：色彩搭配基本原理，色彩在网页中的应用 实践 项目1：调整网页色彩，项目2：制作女性美容网站首页 |
实训：分季节调节索材图，呈现不同效果 |
|
3 |
6 |
理论 网页字体设计：网页字体设计原则，常见字体的网页特效 实践 项目1：字体设计，项目2：字体特效设置 |
实训：为“网页美工设计”网设置Logo |
|
4 |
6 |
理论 网页排版布局设计：网页布局的常识、形式、原则及技巧 实践 项目1：网页排版布局，项目2：网页排版技术实战 |
实训：设置“天晴外贸服饰店”网页界面 |
|
5 |
6 |
理论 网页Logo设计：Logo的表现形式与设计原则、制作方法 实践 项目1：制作心港俱乐部Logo，项目2：制作工作七彩创意工作室Logo2 |
实训：制作个人网站Logo |
|
6 |
6 |
理论 网页Banner设计：Banner的设计技巧，设计方法 实践 项目1：制作“淘淘乐”点餐网Logo 项目2：制作旅游网站Banner |
实训：制作个人网站的Banner |
|
7 |
6 |
实践 项目1：制作电饭煲站的Banner 项目2：制作常德美食网的Banner 项目3：制作常德旅游网的Banner
|
|
|
8 |
6 |
理论 网页导航条设计：导航条的表现形式，设计原则及方法 实践 项目1：制作安哥建公司网站导航条，项目2：制作音乐网站导航条 |
实训：制作个人网站导航条 |
|
9 |
6 |
理论 网页按钮设计：按扭的基本常识及设计原则，制作方法 实践 项目1：制作水晶按钮 项目2：制作3D按钮 |
实训：设计一款心形水晶按钮 |
|
10 |
6 |
理论 网页栏目框设计：网页栏目框的基本常识，网页栏目框的设计与制作方法 实践 项目3：制作图文结合按钮，项目1：制作木质栏目框 |
|
|
11 |
6 |
理论 网页栏目框的设计技巧 实践 项目1：制作购物网站栏目框，项目2：制作某幼儿园网站通知公告栏目框 |
实训：制作个人网站栏目框 |
|
12 |
6 |
理论 Dreamweaver设计网页：使用CSS+DIV网页布局 实践 项目1：搭建网站首页DIV（“乐游”旅游网） |
|
|
13 |
6 |
理论 Dreamweaver设计网页：利用CSS对页面文字、图片、超链接进行美化 实践 项目2：完善网站首页设计（“乐游”旅游网） |
实训：设置幼儿园主页 |
|
14 |
6 |
理论 网页特效设计：动态二级菜单的制作，添加“添加收藏” 实践 项目1：制作动态二级菜单，项目2：添加“加入收藏”功能 |
|
|
15 |
6 |
理论 企业网业设计：页面层切换技术，PS切片 实践 项目1：制作层切换，项目2：PS切片 |
|
|
16 |
6 |
理论 CSS+DIV布局，使用CSS美化网页 实践 项目3：搭建首页布局，项目4：制作页面内容 总复习：复习本课程各章节理论要点 |
总复习 |
|
17 |
6 |
理论：期末作品设计：PS美工设计 实践：PS融入SEO优化的网站首页、栏目页美工设计 |
期末作品设计1 |
|
18 |
6 |
理论：期末作品设计：网页设计 实践：PS切片整理、网站布局，CSS设置 |
期末作品设计2 |
|
19 |
6 |
复习：复习本课程各章节实践要点 期末作品项目汇报 |
期末作品汇报 |
|
20 |
6 |
上机考试 |
上机考试 |
第一部分：色彩原理
课题1：网页平面构成
主要了解网页及其界面，掌握网页界面设计与平面构成的表现形式，掌握平面构成的设计原则，学会平面构成在网页界面设计中的应用方法。
课题2：网页色彩搭配原理
主要掌握巩固并掌握网页色彩的基本知识，掌握网页色彩心理，网页色彩搭配中的技巧，色彩在网页中的应用技巧。
第二部分：美工设计
课题1：网页字体设计、网页排版布局设计、网页Logo设计、网页Banner设计、网页导航条设计。
主要了解网页字体以及字体的编排，掌握网页字体的设计原则，掌握不同风格的字体在不同页面中的应用，学会常见字体的特效设计。了解网页排版布局的基本常识，掌握网页排版布局的形式，掌握网页排版布局遵循的原则，初步掌握网页布局版式设计。了解Logo的功能及国际规范，了解Logo的表现形式及设计原则，掌握设计制作网页Logo的方法。了解Banner的功能及标准尺寸，了解Banner的设计技巧，掌握设计制作网页Banner的方法。
课题2：网页导航设计、网页按钮设计、网页栏目框设计。
主要了解网页导航条的作用及表现形式，了解网页导航条的设计原则，掌握设计制作网页的导航条的方法，熟练掌握钢笔工具的使用，熟练掌握渐变工具的使用，熟练画笔工具相关属性的设置。了解按钮的基本常识和设计原则，掌握按钮的制作方法，熟练应用图层样式。了解栏目框的基本常识，掌握栏目框的制作方法，熟练滤镜的使用。
第三部分：网站代码与美工设计
课题1：网站页面综合设计
掌握新建站点和新建文件的方法，掌握新建DIV的方法，掌握利用CSS样式来定义DIV样式的方法，了解DIV的嵌套原理，掌握DIV的各项属性。在网页中插入标题、CSS对H1标签的美化，利用CSS类样式美化文字，在网页中插入图片，为图片添加超级链接，用CSS美化图片链接。
三、课程实验
（一）实验仪器设备、主要技术指标及配置要求
|
仪器设备名称 |
主要技术指标（或型号规格） |
配套数 |
备注 |
|
互联网连网机房 |
连接internet均可，网速要求2M以上。 |
一个独立机房 |
|
|
计算机 |
|
55台 |
|
（二）实验项目一览表
|
序 号 |
实验名称 |
内容提要 |
实验 要求 |
实验 类型 |
实验时数 |
每组 人数 |
所在实验室名称 |
备注 |
|
1 |
实训1 |
圣诞节店铺大促销 |
必做 |
验证 |
2 |
1 |
东校区202 |
|
|
2 |
实训2 |
分季节调节索材图，呈现不同效果 |
选做 |
验证 |
2 |
2-3 |
|
|
|
3 |
实训3 |
为“网页美工设计”网设置Logo |
选做 |
验证 |
2 |
1 |
|
|
|
4 |
实训4 |
设置“天晴外贸服饰店”网页界面 |
选做 |
验证 |
2 |
1 |
|
|
|
5 |
实训5 |
制作个人网站Logo |
必做 |
验证 |
2 |
2-3 |
|
|
|
6 |
实训6 |
制作个人网站的Banner |
必做 |
验证 |
2 |
2-3 |
|
|
|
7 |
实训7 |
制作个人网站导航条 |
必做 |
验证 |
2 |
2-3 |
|
|
|
8 |
实训8 |
设计一款心形水晶按钮 |
必做 |
验证 |
2 |
2-3 |
|
|
|
9 |
实训9 |
制作个人网站栏目框 |
必做 |
验证 |
2 |
1 |
|
|
|
10 |
实训10 |
设置幼儿园主页 |
必做 |
验证 |
2 |
2 |
|
|
|
11 |
实训11 |
制作团队网站 |
必做 |
验证 |
2 |
2 |
|
|
|
12 |
实训12 |
PPT进行团队网站汇报 |
必做 |
验证 |
2 |
2 |
|
（三）综合性、设计性、研究创新性实验介绍
实验1 幼儿园首页设计（设计性）
1、实验目的
掌握网页平面构成的基本设计原则，网页设计的平面搭配技巧，如何运用点、线、面等相关知识制作简单网页。
2、实验内容与基本要求
（一）、幼儿园大讲堂网站首页设计，要求通过点、面的搭配完成设计作品。
（二）、圣诞节店铺大促销，通过课后拓展，通过对比与调和原则完成作品设计。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验2 网页界面布局设计（设计性）
1、实验目的
掌握网页界面的排版设计，了解到布局在网页中的功能性，视觉设计影响，如何提炼自己对设计思维个性化表达。
2、实验内容与基本要求
（一）、厨师网、化妆品网站首页布局修改与设计，通过设计进行网站主题、色调搭配、字体调整来修整网站页面。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验3 设置网站Logo（设计性）
1、实验目的
掌握LOGO的设计表现形式及设计原则，要求学会进行网页LOGO的设计方法。
2、实验内容与基本要求
（一）、星港俱乐部、七彩工作室的LOGO设计，初步了解LOGO设计的基本方法，LOGO的基本分类与国际标准是怎样的？
（二）、设计信息工程学院LOGO，根据信息工程学院网站进行两款LOGO设计。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验4 网页banner设计（设计性）
1、实验目的
掌握网页banner设计的基本技巧，熟知网页banner的功能性与尺寸标准，掌握网页banner的设计方法。
2、实验内容与基本要求
（一）、旅游网站的banner设计，如何在多色调网站中进行banner的展示与搭配。
（二）、电饭煲网站的banner设计，在设计过程中，灵活运用路径工具进行设计变换，创造新的图形设计，完成作品。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验5 网页导航条设计（设计性）
1、实验目的
掌握网页导航设计的基本原则，网页导航条的基本形式及设计方法。
2、实验内容与基本要求
（一）、建材网站导航设计，在导航中注意色调与网页主题的搭配，导航按钮设计风格可以创新化设计。
（二）、音乐网站导航设计，在导航中如何用欢快色调搭配。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验6 网页栏目按钮设计 （设计性）
1、实验目的
掌握网页设计中，各类栏目按钮搭配与设计，公告栏，快速导航栏等栏目风格设计，一般会采用什么样的按钮类型？
2、实验内容与基本要求
（一）、网页水晶按钮设计，掌握如何通过PS设计完成网页水晶按钮制作，体验水晶按钮与哪些类别网页风格搭配？
（二）、3D按钮设计，网页中在哪些风格设计中选择3D按钮设计，掌握按扭设计标准与方法。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验7 网页栏目框设计 （设计性）
1、实验目的
掌握网页设计中，各类栏目框的设计风格，网页中栏目框与网站风格、色调、字体等搭配，了解栏目框设计的一般规则。
2、实验内容与基本要求
（一）、网页公告栏目中的设计，掌握针对不同风格、类型网站的公告栏如何进行设计？
（二）、学院新闻公告栏设计，要求与网站整体风格搭配统一。
3、主要仪器设备材料
连接互联网的计算机，PS软件
实验8 Dreamweaver设计网页（设计性）
1、实验目的
掌握网站PSD设计源文件的切片操作，如何通过Dreamweaver设计进行网页的CSS样式设计，DIV页面布局，如何将美工转换到网页。
2、实验内容与基本要求
（一）、完成“乐游”旅游网的美工切片，掌握对整个网页界面的切片技巧。
（二）、完成“乐游”旅游网网页的CSS与DIV基本设计。
3、主要仪器设备材料
连接互联网的计算机，PS软件
四、习题与作业
X X X
五、课程考核形式与成绩评定
X X X
第三部分 附 录
一、教学参考书
教 材：《网页美工设计实训》，赵殊、范萍，高等教育出版社，
参考书目： 1、《平面创意设计指南系列：网页美工》，张志勇等编著，化学工业出版社， 2.《网页制作与网站设计》，阳西述等编著，武汉大学出版社， 3.《美工与创意—网页设计艺术》，徐延章等编著，科学出版社， 4.《网页风格构成》，（韩）崔美善著，电子工业出版社 5、《网页设计与配色》，曹金明、程超等编著，红旗出版社， 6、《网页版式设计指南》，张旭生等编著，国防工业出版社， 7、《版式设计原理》，（日）佐佐木刚士，中国青年出版社，
说明：①纯理论课程删除“第二部分本文”中的“课程实验”部分。并重新编标题号。
纯实验课程删除“第二部分本文”中的“基本内容与学时分配”部分。并重新编标题号。
有实验的课程“三性”实验比例合格课程达30%以上、优质课程达50%以上、精品课程达70%以上。
④大纲审核人为教研（实验）室主任和一名具有副高以上职称的教师。
。
