网页设计课程标准汇编Word格式文档下载.docx
《网页设计课程标准汇编Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计课程标准汇编Word格式文档下载.docx（34页珍藏版）》请在冰豆网上搜索。
3．课程编码：
4．学时：
108
5．适用专业：
计算机、网络、移动通信等相关专业。
1.1课程的性质与作用
1.课程的性质
网页设计课程是高职计算机、网络、移动通信等相关专业重点建设的核心课程之一，是学生职业教育的核心课程。
通过本课程的学习，使学生了解网页设计、网站项目创建实施的流程及方法，具备网页设计、网站建设与维护的基本能力，为今后学生到相应的职业岗位工作打下基础。
计算机、网络、电子商务等相关专业是为适应市场经济发展需要，培养能在政府、企业、企事业单位从事算机系统维护、网络维护、网页设计、网站建设管理维护、中小型信息系统开发等工作的高技能人才、让学生具有良好的职业道德、熟练的专业技能和可持续发展的计算机应用技术领域的高级应用型人才。
本课程是一门既包含理论知识又包含实践性、技能都相对较强的课程。
2．课程作用
本课程相关的典型工作岗位是：
前端（网站策划师、网页美工）、后台（网站开发工程师），对其进行典型工作任务与职业能力分析后，归纳提炼出岗位核心能力为“网站建设”，再按照各个典型工作任务的先后顺序设置支撑的项目课程群。
《网站建设》的先行课程为《图像处理photoshop》，《HTML，CSS，DIV》和《Dreamweaver网页设计》《flash》《T1基础能力美术，图案,色彩基础》《网站建设实训》等，详细的可见下表，它们是支撑“网站建设”核心能力的基础课程。
基础能力
扩展能力
高级能力
T1:
网页设计师
HTML，CSS，DIV
PHP（或ASP，JSP）等动态网站开发工具基础能力
HTML+div+css
Dreamweaver
快速建站模板工具
Ajax等最新技术
FireWork
FireWork
网页效果图制作
PhotoShop基础
一定的语言表达、沟通能力
图形图像处理
Flash
网站商业广告宣传动画制作能力
广告宣传动画flash图片制作
T2:
网页美工
T1基础能力
美术，图案,色彩基础
熟练掌握PhotoShop
Logomaker软件应用
标志设计
网站标志设计制作
T3:
网站建设
IIS（服务器配置）
数据库设计能力
项目网站建设，美化
数据库（SQL或ACCESS）使用能力
动态网站开发工具高级能力
T5：
网站分析和设计
T3全部能力
软件工程分析能力
策划、分析能力
网站需求分析能力
理解领域业务的能力
语言表达、沟通能力
通过网站项目开发的教学，使学生掌握网站开发的过程及网页的设计制作方法和步骤，该课程主要内容有网站规划与网页设计、静态网页制作、CSS规则的应用、网站测试发布与维护的知识和技能，为后续课程的学习提供网页设计与制作的理论基础和技能支持。
本课程无论对培养学生的创新思维、协作精神、正确的设计理念和方法、信息处理能力、解决问题能力、自我学习能力、高级能力，还是对培养网页、网站制作的实践操作技能、满足职业岗位需求以及对后继课程的学习，都具有十分重要的作用。
1.2课程的基本理念
1．突出学生职业能力的培养
本课程以建设企业网站项目为载体，以网站项目的建设与维护工程流程为主线，通过项目全面学习网站建设与维护的相关知识和技能，及步骤方法，使学生对真实的建设网站项目的流程有一个较全面的认识，形成职业岗位所需的基本能力，为今后从事相关职业岗位作前期准备。
2．以学生主体，从实践中锻炼学生能力
本课程在实施过程中，按工作流程将项目分解为具体的工作任务，教学中实施任务驱动，同时，引导学生组建项目团队，以学生为主体，团队在教师的启发、提示下自主地开展学习，学生根据任务，通过团队讨论，主动查阅资料，养成独立策划、分析问题和解决问题的能力。
3．尊重个体差异，注重过程评价
本课程在教学实施过程中，倡导学生自主学习，鼓励多元思维方式，并将其表达出来，尊重个体差异，发挥不同类型学生的长处，建立由形成性评价和总结性评价相结合的评价体系，教学过程中以形成性评价为主，注重学生学习的积极和自信心，总结性评价注重评价学生做成事的能力。
1.3课程标准的设计思路
在课程标准的设计过程中以网页设计基础为必须掌握知识，以实训企业网页设计项目的完整创建过程对各环节知识、技能进行知识巩固和运用，围绕预设能力目标，对学习目标、学习任务、能力要求、教学内容、活动设计和教学建议等都均参照人才培养方案。
1.4教学方法
在教学网页设计基础中主要采用案例、讲解、实做的方式来进行，通过理论、案例的讲解和演示，让学生能够清楚到实践的操作，掌握本课程的相关知识。
图表表示如下
案例教学法：
教学过程中。
老师举例子讲解一个网站创建的过程和方法，其它相关类网站的创建就可以用第一个网站建设中的一些方法去完成。
讨论式教学：
注重课堂教学整体设计，通过引入问题，如建设网站的市场分析，可以组织学生通过讨论寻找答案，让学生参与交流、分享自己的看法，并进行总结和归纳。
通过讨论，学生真正做到了积极参与课堂学习。
分析问题、解决问题的能力，又加强了理论知识在实际的应用。
还有其它的一些方法如讲授法、任务驱动法等，再此就不多说。
二、课程目标
2.1课程的总体目标
通过本课程的学习，使学生掌握网页设计的整个工作流程和方法，能够使用网页三剑客及其它相关软件完成网站前端相关工作（如网页效果图制作、网页布局、用代码生成网页等），在教学过程中，通过团队开发，形成基本的职业道德规范和职业素养，及团队合作精神。
三、内容标准
第一章HTML网页基础
教学内容
一、［教学目的和要求］
1、目的：
1）掌握HTML文件编写方法；
2）使用浏览器浏览HTML源文件；
3）了解html基本概念
2、要求：
掌握常用的浏览器打开网页方法（IE、火狐、360浏览器、谷歌浏览器等），掌握网页设计的一些基本概念；
二、［教学重点与难点］
重点：
网页设计相关概念
难点：
网页设计相关属性
三、[教学方法与手段]
讲授、案例演示、实际操作、作业
通过理论讲授的方式让学生了解本章的理论的内容
四、[内容部分]
1、经典网页欣赏
1）
蓝色代表海洋，宇宙，大海。
是一种博大的颜色。
此网页采用主色为蓝色。
代表了一种博大的精神。
也代表了本公司的科技领域强项。
不同的蓝色的转换给人一种轻松的感觉。
网页右边加以黄色区域来烘托出产品的外形，以及独特。
网页整体简单明了。
正是这种公司所需要的。
2）
网页是一则汽车的网页，和传统汽车网页一样采用黑色的背景，凸显出一种高贵，科技的感觉。
文章的文字部分采用高明度灰色，体现了主题。
汽车轮子处的火，表现了激情，兴奋。
使主题更加生化一步。
给人庄重稳重的同时，不失激情活跃的一面。
2、网页设计相关概念
1）统一资源定位器（绝对路径、相对路径）
2）超链接
3）网站、静态网页、动态网页、主页、网页三剑客
4）Html语言概念
5）常见的浏览器
6）Html语言的基本结构及语法
五、[作业]
1）使用浏览器打开网页源代码；
2）写出html超文本标记语言的主体结构；
第二章文字与段落标记
1）掌握网页中文字编排、美化方法；
2）掌握网页中图像插入的方法
1）掌握标题标记
2）掌握文本基本标记、文本格式化标记
3）掌握段落标记、水平线标记
掌握文本基本标记、文本格式化标记
单、双标记的区分
讲授法、案例演示、讨论法
1、设置段落的标记
段落标记是一个双标记，每个标记对表示一个段落；
语法格式：
<
p>
这里表示段落<
/p>
2、换行标记
换行标记是单标记，即不会成对出现，是在尖括号中加一个<
/br>
的单标记；
………….<
3、给代码添加注释
添加注释是不会再网页中显示的
!
——注释——>
4、粗体和斜体
1）粗体标记，是一对双标记，起到强调的作用
b>
标题文字<
/b>
2）斜体标记语气较弱
i>
表示斜体标记<
/i>
5、下划线与删除线标记
为了使部分文字特别显示，可以使用下划线或者删除线标记,也是一对双标记；
<
u>
下划线的<
/u>
s>
删除线的<
/s>
6、上标和下标
双标记
sup>
上标<
/sup>
sub>
下标<
/sub>
H2o;
H2so4;
a2+b2=c2
7、文字标记：
是一个双标记
语法格式：
fontcolor=”颜色值”>
文字<
/font>
8、标题标记对齐属性
h1-h6（h1:
表示文字标题最大—h6表示文字标题最小）
对齐属性：
align（left、center、right）
如：
h1align=“center”>
标题居中<
/h1>
9、文本标记的属性
1）字体属性face
如<
fontface=“需要的字体”>
云南城市建设职业学院<
2）设置字体大小属性：
size
fontsize=“值”>
绝对值：
1-7
相对值：
-4—4的整数，字体相对于3号放大和缩小字号
注意：
属性与属性之间用空格隔开
3）字体的颜色属性:
color
如<
fontcolor=“颜色值”>
可以用英文单词或者二进制代码
10、粗体标记：
b与strong
需要加粗的文字<
strong>
/strong>
标记是可以嵌套的
11、斜体的标记
1）i、em、cite
需要变为斜体的文字<
em>
/em>
cite>
/cite>
12、大字号和小字号标记
）big和small
语法格式
big>
需要加大的文字＜／big＞
ｓｍａｌｌ>
需要加大的文字＜／ｓｍａｌｌ＞
加大：
在原来定义的字体大小基础上加大一个级别；
变小：
在原来定义的字体大小基础上变小一个级别；
１３、不自动换行的标记
1）nobr
nobr>
不换行的文字<
/nobr>
14、水平线标记
1）<
hr/>
水平线标记的属性：
width（宽度）、color（颜色）、s
升级会员 