网页课程设计说明书（共12篇）
一、设计理念
本网站定位 本身是用于展示个人作品的一个平台页面系统。在展示之余也有推销网站 建设之功效....页面主要以 深红色调风格为主,站点分为有 首页简介、关于我的作品、经典作品展示、与我联系方式等 各个方面子页面.本站页面主要展示的是本人在暑假实习公司开发的一些 作品...整体页面使用到了 CSS 层样式技术。
二、设计流程
网站主要以自己喜爱的东西而制作，并根据,相应要求 到网上寻找相应的 图片素材 以及 应用到 PS 图片设计结束.最后 应用 HTML 网站设计技术 使用 DIV+CSS 进行页面布局的定位设计.三、使用的工具与技术
网页制作工具 : Dreamweaver CS5 多媒体设计制作工具:Photoshop 应用到的设计技术： HTML、CSS.四、网站设计说明
网站名称: 梦幻部落-作品展示厅 整体形象设计包括标准字、Logo、标准色彩、广告语等.首页作为网站的形象页，作为网站的欢迎页面，引入的元素大致有网站名称、LOGO、形象图片、宣传文字、栏目导航等要素,是彰显网站整体风格的重要页面, 并结合 FLASH 动画来展示.网站形象页的设计突出..展示为主题，通过文字、形象、图片的巧妙烘托，令页面富有 层次感，达到赏心悦目的效果。
五、页面结构布局
(1)、首页布局、网站 Logo 幻灯片展示切换 页面链接 站点介绍 页面介绍 在线联系方式 页面底部
(2)、站长个人简介页面、网站 Logo 幻灯片展示切换 页面链接 个人简介 内容 更多链接 页面底部
(3)、作品展示页面、网站 Logo 幻灯片展示切换 页面链接 作品展示 栏 页面底部
1.1 课程的性质
《网页前端技术》是高等职业院校计算机网络专业的一门专业核心课程, 是使学生掌握使用HTML语言和Dreamweaver设计网站, 使用Java Script添加网页动态效果, 使学生掌握网站的开发技能, 是实践性很强且面向实际应用的重要专业课。通过学习《网页前端技术》, 能够提高学生职业技能和素质, 为适应职业岗位和继续学习打下一定的基础。
1.2 课程的作用
本课程的教学目标是使学生能运用所学的网页编程知识, 根据实际问题进行静态网页的创建与维护、Java Script动态网页的编写, 使学生具有HTML静态网页设计与制作的基本能力。
2 课程设计的理念和思路
2.1 课程设计理念
《网页前端技术》课程的实施以工作过程导向为主体, 理论实践结合特征突出。是以学生最终就业为目的的教学过程、着重培养学生的网页设计与制作能力, 强调学生的学中做与在制作网页中的学习创新能力, 实现了理论实践一体化教学目标。
在《网页前端技术》的课程建设中, 以培养学生综合技能为导向, 按照项目案例的实施过程, 给学生设计从简单到复杂、从容易到困难的网页设计案例, 按照循序渐进的学习情景来展开, 教学过程以项目实施的过程为主导, 注重学生网页设计的能力培养。
2.2 课程建设思路
《网页前端技术》的课程建设思路注重专业领域的技术要求, 强调对学生网页设计与美化职业的岗位任职要求, 围绕着学生在网页制作与设计中容易出现的问题, 展开课程体系和教学内容的设计。
《网页前端技术》的课程建设原则:突出学生的实际运用能力, 同时, 以项目任务为载体, 以学生的个性训练和能力培养为主体。
《网页前端技术》的课程建设过程:首先, 针对市场工作岗位的需求, 分析出网站与网页设计人员的工作任务, 进性归纳总结出适合学生的具体项目任务, 然后设计出适合学生的基于工作过程的学习任务和情境。
3 课程设计
3.1 课程目标设计
(1) 能力目标。使学生能熟练运用HTML中的文字、链接、列表、表格、表单和图像;掌握Dreamweaver进行网站的制作与设计操作技能;掌握Javascript脚本编程语言的基本语法知识, 设计出绚丽的网页动态效果, 开发出富有创意的个性网站。
(2) 知识目标。能够了解网站的工作原理;了解WWW和HTTP协议, 掌握HTML和CSS的基本概念和作用;掌握Dreamweaver应用软件的使用功能;掌握表格、表单设计网页的方法;掌握添加网页动态效果的方法。
3.2 课程内容设计
(1) 知识模块划分。对现有知识点进行了解析与重构, 划分出彼此之间联系紧密的HTML网页技术、Css网站布局与样式、Javascript动态行为、网页制作综合实例四大知识模块。
(2) 教学内容设计。教学内容分为四大知识模块:
1) HTML网页技术基础知识。对应的能力目标有:能够独立安装Dreamweaver软件, 能够掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架的作用, 能够运用html编写简单的页面。
2) CSS网站布局与样式。对应的能力目标有:能够掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法;能够利用CSS美化网页, 给用户更好的网页体验。
3) Javascript动态行为。对应的能力目标有:能够掌握Javascript的核心语法。能掌握在HTML语言代码中嵌入Java Script代码的方法, 能看懂Java Script特效网页源代码;能够按网页设计技术要求修改和调试Java Script代码;能够使用Java Script语言实现网页特效。
4) 网页制作综合实例。通过HTML、CSS和Java Script的学习, 以及课程中设计到的小案例和项目的制作, 让学生自主创新, 独立制作完成一个门户网站的综合案例。
3.3 教学方法设计
(1) 项目导向法.本课程的教学内容是以学生的网页制作与设计的开发流程为依据展开的。利用计算机技术中的动画视频等先进技术进行教学。
(2) 分组教学.在网页制作与设计的教学中, 每个项目都是以学生实际的网页设计效果为考核目标的, 实践性都比较强, 学习难度较大。在教学中, 采用分组教学的方法, 可以让同学之间遇到问题能够互相探讨, 相互帮助协作完成任务, 进而激发学生学习的自信心和学习兴趣, 增强学生的创新意识, 设计出更具特色的个性网站。
3.4 考核方法设计
学期总评成绩采用百分制, 着重考核学生运用知识解决实际问题的能力。其中, 平时成绩占30%, 项目案例完成情况占30%, 期末项目作品占40%。
4 结束语
通过本课程的学习, 不仅可加强学生对理论知识的感性认识、加深对网站开发的理解, 而且能培养学生的实践技能, 提高网站开发与设计的实践动手能力。另外, 通过项目教学方法的渗入, 使学生在整个项目的进行过程中可以自主的学习, 自己找可以承担的学习任务来完成, 同时也学会了发现问题和解决问题的方法, 发挥了个人的最大能力, 提高自身的创新能力。
参考文献
关键词：网页设计与制作；案例教学；教学方法
网页设计课程是一门综合性很强的课程，既需要技术作为支持，同时也需要美感。为了提高课堂教学质量，在教学实践中从教学内容、教学方法、实训几方面进行了探讨与实践，在这里谈一谈自己的一些体会。
一、明确教学目的，把握教学内容
基础学习很重要，要打好网页设计的基础。学完网页设计这门课程，学生最基本的是要掌握至少一门的网页编辑软件并制作出简单的页面。就此，老师来安排自己的教学。
1.掌握一门好的网页制作工具
我认为，目前最好的网页制作工具是Dreamweaver，Dreamw-eaver一直以来作为可视网页编辑工作的标准，它在代码编辑和应用程序开发方面的功能比较强大。同时，制作网页中的动画素材可以选择Flash，处理和制作网页中的图片可以选择Fireworks，这三个软件具有良好的嵌入性，被称为“网页三剑客”。
2.要求学生能够利用Dreamweaver设计各种网页，开发一定规模的网站
授课时以Dreamweaver为主线，讲授网页设计、HTML语言、CSS、Javascript语言及动态网页设计的基础知识。
（1）重视对HTML的教学，HTML可以说是网页的灵魂，网页的最基本构成是HTML标记符。熟练掌握了HTML语言，可以很轻松地修改网站的网页结构，而且对SEO网站优化很有用处，另外，无论是PHP、ASP、NET、JSP等网站编程语言，都要用到HTML。所以说学习HTML是我们学习制作动态网页的基础。
（2）掌握CSS的基本使用。CSS就是一种叫做样式表的技术，也有人称之为层叠样式表。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，可以轻松地控制页面的布局。
（3）掌握Javascript脚本语言应用基础。Javascript语言简单，但功能强大，具体有几点功能：
①制作网页特效
②提升使用性能
③窗口动态操作
④摆脱现实环境的束缚
所以，学生掌握Javascript脚本语言对网页制作有很大的帮助。
二、把握好课堂，多采用实例教学
1.教学，首先要把握好课堂
一次课，45分钟的理论教学是枯燥和沉闷的，因此首先要在多媒体教学课件上下工夫。课堂教学的灵魂是多媒体教学课件，它不只是文字与图像的组合，还融合了音频、视频和动画信息等各种元素，使课堂变得更加生动和精彩，这样可以大大提高学生的学习兴趣。
2.用实例作为课堂切入点
要想让课堂生动活跃，就要充分调动学生的学习积极性。为此，我们需要找到学生感兴趣的内容作为切入点。网页设计是一门实践性很强的课程，教师可以用实例作为课堂切入点。课堂上可以先演示实例，让学生看到实际效果，引起学生学习兴趣，然后以实例引出具体知识点，将知识点融入具体实例中。比如，在表格布局和内嵌框架的教学模块中，我们采用任务驱动教学内容如下：
演示案例：制作一个介绍作家的站点，包含6个页面，主页为内嵌框架页，其余页面为“作者生平”“作品简介”“文学评论”等等。页面导航放置在表格左下位置，框架内放置目录中超链接的内容。
基本要求：在此案例中，再添加“经典文章”和“关于我们”两个内容，资料在网络中获取，适当设置网页的背景以及文本属性，使页面美观大方。
较高要求：用此站点结构制作一个介绍自己的个人站点，要求至少包括6个页面以上，主页用内嵌框架结构，站点中导航清晰，布局合理，美观大方。
三、强化阶段实训，培养学生的动手能力
实训教学是教学过程中的重要环节。网页设计课程实训内容的选择要真正做到以技能培养为目标。在实训过程中，学生可以自行查阅资料，根据自己的兴趣设计网站，独立完成。也可以分组完成，鼓励学生以团队协作的方式完成某一个网站项目，锻炼学生的团队协作能力。
四、其他方式
要想让学生学习掌握网页设计课程，单靠课堂教学还是不够的，可以在校园内举办一些网页设计的比赛，通过比赛，既可以更大地提高他们对此课程的积极性，也可让学生找到差距，激励他们努力，不断提高网页设计水平。
五、结束语
在教学过程中，从学生感兴趣的角度出发，对课堂理论教学、实例教学和课程实训等方面进行探讨和改革，能使学生从被动学习转变为主动学习，提高其实践操作技能，拓展其知识面。在未来的社会中，网页在生活中所起的作用将越来越重要，对这门课程的教学要求也越来越高，教师的教学要适应科技的发展，要有改革进取的精神，培养能真正适应社会的人才。
参考文献：
［1］韩陵宜.中职学校《网页制作》课程教学的探讨.电脑知识与技术，2005.
［2］张丽香.高校《网页设计》课程教学探讨.大众科技，2006（5）.
［3］周霞.网站设计与网页制作教程.冶金工业出版社，2004.
岗位职责：
1、负责公司网站网页设计制作;网站广告设计;
任职要求：
1、精通CSS+DIV,能熟练使用Photoshop、DreamWeaver、Fireworks等流行设计软件;熟练把握网站宣传的各元素和要件，有扎实的美术功底、良好的`创意思维和理解能力;
2、有做过大站经历或者行业门户网站的优先;
3、熟悉网站开发流程，有网页设计经验，具有二年以上网站美术设计和网页用户界面设计经验者优先;
4、善于沟通，有很强的责任心和团队精神;
为了保证课程设计质量，特制定本规范。
设计说明书要求按统一格式打印，其版面要求：A4纸，页边距：上2cm，下2cm，左 2.5cm、右 2cm；字体：正文宋体、小四号；行距：固定值 20；页码：底部居中。
一份完整的设计说明书应包括以下几个方面：
一、封面（包括题目、院系、学生班级、设计组号、学生组员姓名、指导 教师姓名等）(见附 1)。
二、目录
居中打印目录二字，（四号黑体，段后 1 行），字间空一字符；章、节、小 节及其开始页码（字体均为小四号宋体）。节向右缩进两个字符，小节及以后标 题均向右缩进四个字符。目录中应包含正文及其后面部分的条目。目录的最后一 项是无序号的“参考文献资料”。
三、正文
正文应该包括以下几个主要部分：
1、网站的主题说明；
2、网站的总体规划与网站的结构框图；
3、各级网页设计说明（网站配色、导航设计、各级网页风格统一）；
4、典型网页的设计过程、步骤与样例；
5、资料来源。
（二）课程设计报告编写基本要求
1、各小组由小组长统一组织协调并独立完成课程设计报告；
2、课程设计报告书写规范、文字通顺、图表清晰、数据完整、结论明确；
3、课程设计报告后附参考文献；
正文部分的格式:
段落及层次要求： 每节标题以四号黑体左起打印（段前段后各0.5行），节下为小节，以小四号黑体左起打印（段前段后各 0.5 行）。换行后以小四号宋体打印正文。
四、参考文献：
另起一页，居中打印参考文献四字（四号黑体，段前段后1行）
网页设计说明书
设计课题：度假村网站
组长：冯倩
组员：班级：10信息（2）班
院系：经信学院
学期：2011-9——2011-12
指导老师：刘志兰
最终提交：《网站策划报告》一份及独立制作网站一个
使用所学知识独立制作一个网站，网站的主题可以是文学、音乐、影视、自我介绍（求职）、家乡介绍等。
1．作业基本要求
（1）站点目录层次分明，管理有序，无多余的文件
和文件夹，不能将内容都放在站点根目录下，不要使用中文，为每种类型文件都建立一个独立的目录。（例如images、css、swf、MP3、flv文件夹用于存放图象、样式、flash动画、音频文件及flash视频,目录的层次不能没有，但必须尽量少，以便于管理。）首页命名应为index.html或default.html，其它文件命名不使用中文及带空格的文件名。
（2）网页数为8页以上（网页数量不足扣分，缺少2
张以上视为无效作业）
（3）传站点压缩文件，压缩文件命名方式：学号+姓名）
（4）主页必须包含内容要求： a)
b)主页上有flash按钮、鼠标经过图像或跳转菜单，跳转菜单中有如下链接 主页上最少有5个栏目（一级页面）的导航链接，首页用表格进行页面布局（其它页面必须使用表格或DIV、层）
(5)内页内容类型相近的要使用模板，此项目加分10%
(6)正确合理的使用CSS文件设置文字、图片、页面的样式，正确合理使用ID、类、标签、复合选择器，此项目加分10%
(7)网站内容结构不少于三层
2.创意加分：
在完成标准要求的前提下，对作业有独创性及设计美观的作业跟据情况给予加分。方法如下：
（1）思想性、科学性
主题明确，内容积极、健康向上，文字内容通顺，无错别字
（2）创造性
素材获取及其加工属原创、主题表达形式新颖，构思独特、巧妙，具有想象力和个性表现力，内容、结构设计合理
（3）技术性
选用制作工具和制作技巧恰当，导航和链接准确、页面浏览速度快
（4）艺术性
1 设计目标
动态网页课程设计演示平台总体设计目标是,开设基于Serv-U FTP的互不干扰的学生作业空间,每个空间拥有独立的次级域名和独立的IIS(Internet Information Server)WEB虚拟主机,支持SQL Server 2005数据库服务器。从而,学生拥有自己的IIS虚拟主机和次级域名,通过分配的帐号和密码,具有独立自主的文件管理、数据库支持、允许静态和动态网页运行的功能;教师也能浏览学生课程实验、查看学生空间上的作业源代码。
2 技术实现
根据设计目标,必须拥有至少1台物理服务器,1个合法IP地址,注册1个域名[2]。例如,笔者的服务器是Dell Power Edge R905,具有4个4核CPU和64G内存;安装操作系统为Windows Server 2003,并且安装IIS 6.0和.net Frame Work 2.0,数据库系统为SQL Server 2005,应用Serv-U FTP 6.4为FTP服务器软件。
考虑到学生用户数量庞大,笔者建立数据库SVU并设置ODBC连接,以便Serv-U管理用户和空间[3]。
2.1 注册域名
通过学校网络中心,申请服务器IP为“210.38.208.168”,注册域名“pc.hstc.cn”和泛域名“*.pc.hstc.cn”,网站名称为“韩山师范学院计算机基础教学网”。
域名注册DNS正向查找数据文件摘录如下:
;说明:pc表示计算机基础教学网主机,支持泛域名解析
域名注册DNS反向查找数据文件摘录如下:
;说明:反向查找pc次级域名均指向IP地址168
泛域名解析利用通配符“*”(星号)来做次级域名以实现所有的次级域名均指向同一IP地址,最大的用途是可以实现域名支持无限的次级域名,实际应用非常广泛。
2.2 规划用户信息
用户信息包括帐号、姓名、密码、文件存放路径、课程名称、虚拟主机域名、数据库名称等[4]。为方便处理数据和编写代码,我们规定,学生帐号为学号,初始密码为出生日期,文件存放路径层次为:课程名称→班号→学号,虚拟主机域名为“[学号].dhd.pc.hstc cn”,数据库实例名称为“dhd[学号]”。例如,某学生学号为“2010112131”作为学生的帐号,其出生日期为“19910414”作为初始密码,所在自然班为“20101121”,“dhd”代表课程名称“动态网页设计”,文件存放路径为“H:20121动态网页设计luxc201011212010112131”,该路径也是虚拟主机路径,虚拟主机域名为“2010112131.dhd.pc.hstc.cn”,数据库实例名称“dhd2010112131”。
图1为学生作业文件存放路径,与以上介绍不同的是,我们加上了学期和教师代号[5]。
2.3 编程导入学生用户
学生名单来源于教务系统的数据,主要有学号、姓名、班号、出生日期等项目,导入到表ftp_users中,该表主要字段意义如下表所示。
操作该表还可实现分配用户空间限额和设置权限等操作。
由于Serv-U对用户密码采用MD5加密方法[6],我们必须了解其加密过程。假设学号为“2010112131”的学生出生日期为“19910414”,加密过程是:产生两位随机的从“a”-“z”的字母,例如“pc”,将“pc”放到密码的前面,也就是“pc19910414”,再将其用MD5加密,也就是“A900BFA17CBBFB4BBF378BCE97580AAC”,再把“pc”加到“pc19910414”的MD5值的前面,也就是Serv-U最终的密码“pc A900BFA17CBBFB4BBF378BCE97580AAC”。因此,导入数据前必须先对出生日期按照Serv-U的加密过程生成学生密码串。加密代码(C#)如下:
protected string md5_pass(string pwd)//定义一个加密的函数,加密结果返回
图2为批量建立的学生用户。
2.4 建立虚拟主机
虚拟主机是使用特殊的软件技术,把一台物理主机虚拟成多台具有完整Internet服务功能的Internet主机。每台虚拟主机具有独立的域名,提供互不干扰的Internet服务。WWW虚拟主机有三种工作方式:基于端口、基于IP、基于主机头。其中基于主机头的虚拟主机有特别的优点,物理服务器绑定一个IP地址,通过DNS设置,不同主机名解析到同一IP地址,WWW服务器根据用户浏览器请求的主机头名决定哪个虚拟主机提供服务[7]。这种方式理论上可以给无限多个虚拟域名提供服务,因而适合大量学生用户使用的情况。
基于IIS的虚拟主机的控制和管理,在.Net中需要使用ADSI来设置IIS元数据,从而操作IIS,必须引入命名空间System.Directory Service。IIS元数据(Metabase)采用层次结构,每一个节点称之Key,而每个Key可以包含一或多个值,这些值就是属性(properties)。IIS元数据中的Key与IIS中的元素是相对应的,因此元数据中的属性值的设定会影响IIS中的设置。
建立基于IIS的WWW虚拟主机的函数如下:
图3为批量建立的基于IIS的WWW虚拟站点和虚拟域名。
2.5 建立数据库
利用SQL Server 2005强大的T-SQL语言和系统内置的存储过程,构造相应的SQL语句,让SQL Server执行,就可以批量建立数据库。以下为建库例子:
CREATE DATABASE[dhd2010112131]ON(NAME=N'2010112131_Data',FILENAME=N'D:DBdhd2010112131.mdf',SIZE=3,FILEGROWTH=10%)LOG ON(NAME=N'dhd2010112131_Log',FILENAME=N'D:DBdhd2010112131_log.ldf',SIZE=1,FILE-
GROWTH=10%)—创建数据库2010112131的数据文件和日志文件
GO
EXEC master..sp_addlogin'2010112131','19910414','dhd2010112131',null—新增数据库帐户2010112131,密码为生日。
GO
USE[dhd2010112131]
EXEC sp_adduser'2010112131','2010112131','db_owner'—授予帐户2010112131对数据库dhd2010112131所有者权限
图4为批量建立的数据库。
3 应用效果
笔者讲授的“动态网页设计”应用该平台3年多以来,给学生的课程设计演示带来了极大的便利,收到了良好的效果。图5为一些学生课程设计作业界面,注意到域名格式为“学号.dhd.pc.hstc.cn”。
摘要：应用泛域名解析和基于主机头的虚拟主机技术,设计和实现了以SQL Server为后台数据库,以Serv-U FTP为FTP服务器,以IIS(Internet Information System)为WEB服务器的“动态网页”课程设计演示平台。学生使用该平台拥有自己的次级域名和虚拟主机空间,可演示本课程的设计效果。
关键词：动态网页课程,课程设计,演示平台,泛域名,虚拟主机
参考文献
[1]王晔.利用Serv-U数据管理,实现网页自主发布[J].实验室研究与探索,2007(4):87-88.
[2]Icech.虚拟域名的配置和设计方法[EB/OL].(2008-05-24).http://www.weste.net.
[3]姜良华,麦范金.Serv-U FTP服务器大批量帐号管理[J].计算机与现代化,2005(11):65-66.
[4]刘新向,孟庆超.SERV-U的FTP服务器在教学中的应用[J].计算机与信息技术,2005(8):77-78.
[5]陆锡聪.快速提供批量虚拟空间服务的一种方法[J].计算机与现代化,2006(6):118-121.
[6]张绍兰,邢国波.对MD5的改进及其安全性分析[J].计算机应用,2009(4):947-949.
【关键词】计算机 中职学校 网页设计与制作 教学设计
中等职业学校培养目标是把学生培养成与我国社会主义现代化建设要求相适应，具有综合职业能力，在生产、服务一线工作的高素质劳动者和技能型人才。本文以《网页设计与制作》这门课程为例，浅谈有关这门课程的教学设计。
一、教材分析
我校目前使用的教材是人民邮电出版社出版的《Dreamweaver CS3 网页制作基础教程》。该教材主要采用项目教学法，通过大量精心编排的项目由浅入深、循序渐进地介绍网页制作的基础知识，章末还安排了习题，以帮助学生在课后及时巩固所学内容。
教材中采用的网页制作软件是Dreamweaver CS3。对于初学者来说，Dreamweaver 比较容易入门，具体表现在两个方面：一是静态页面的编排，这和Microsoft等可视化办公软件是类似的；二是交互式网页的制作，利用Dreamweaver可以比较容易地制作出交互式网页，且很容易链接到Access、SQL Sever等数据库。
二、学情分析
我的授课对象是职校计算机专业二年级的学生。
（一）思想观念方面：中专学生一般由基础薄弱、学习态度不端正的弱势群体组成，他们很少得到赏识，缺乏自信。
（二）现有知识水平方面：通过一年级的基础课程和部分专业课的学习，学生对计算机操作有了一定的了解和掌握，但对于学生刚接触一门新开设的专业课程，还是很陌生的，需要由浅入深逐步引导学生入门。
（三）专业能力需求方面：大部分学生毕业以后都直接走向社会的工作岗位，他们更需要坚实的专业能力和职业素养。
三、教学目标
（一）知识与技能：1.能熟练地建立站点，创建和设置文档。2.能在网页中使用图像和媒体，设置超级链接。3.能使用表格、框架和AP Div布局页面。4.能创建表单页面和使用行为。5.能使用库和模板制作网页。6.能使用时间轴制作动画。7.能使用CSS样式控制网页外观。8.能配置动态网站的运行环境。
（二）过程与方法：1.通过课堂教学过程中的观察对比、实践演练等形式，培养学生分析问题和解决问题的能力。2.采用任务驱动的方法，养成主动进行学习的习惯。3.采用项目教学法，培养学生的团队合作精神。
（三）情感态度与价值观：1.通过学生自主解决问题的过程，体会成就感，树立自信心，为自主学习、主动学习奠定基础。2.通过小组协作、任务驱动等形式，渗透团队合作精神及研究探索知识的意识。
四、教学重点难点
重点：学生能够熟练地使用Dreamweaver 这个软件来进行网页设计与制作。
难点：熟悉网站制作流程、分析网页的布局结构、网页色彩的搭配原理。
五、设计思想
（一）项目教学。为培养学生自主学习的能力，让学生成为课堂的主体，本门课程采用了项目教学法。在课堂中，教师只是 起组织、引导的作用。教师先提项目要求，然后学生进行分析、讨论，同时教师可以通过随机点名提问或者举手自荐的方法来总结学生遇到的问题，然后有针对性地进行理论知识和实际操作的讲解。
（二）任务驱动：1.创设情境，引出任务。首先使用与课程相关的动画短片、音乐、视频、图片等素材来创设情境，引出任务，然后提出任务的要求，目的是提供学生动手、动脑、参与的机会，明确任务。2.思考讨论，分析任务。通过思考、分析、讨论和教师的引导下，将任务细分为若干个小层次，逐个解决。这有利于提高学生的分析能力、思考能力。3.实施任务，完成任务。在思考、分析任务后接下来就是任务的实施阶段。在这个阶段，学生作为课堂的主体，通过自主探究、小组讨论等方式来分析问题和解决问题。而教师就扮演组织引导的角色，在课堂中巡回观察、指点学生更好、更快地完成任务。
六、考核方式的设计
《网页设计与制作》是一门实践性强的专业技能课程。为适应该课程培养学生自主学习能力、知识应用能力以及创新性专业人才的目标需要，在教学过程中，教师应重视理论与实践相结合，注重培养学生运用理论进行观察、分析和解决问题的能力。
为了能准确反映出课堂的教学效果，《网页设计与制作》课程主要以“项目考核制”为主，即学生个人独立完成项目作为该课程的一种考核方式。《网页设计与制作》课程的总评成绩应包括平时成绩、实训课成绩、项目考核成绩以及展示作品成绩。
对于一个整体项目，应从以下几方面进行评价：主页面的设计风格、子页面的制作、网页中的链接、页面布局方式以及整体效果。要求整体风格统一且有特色，主页面、子页布局完善且合理，文件夹组织有序、标准，文件命名正确、符合行业标准。评分时，教师应结合平时实训的操作情况以及展示作品时其他学生的评价给出一个综合分数。
总之，教无定法，贵在得法。以项目为载体、以任务为驱动的教学方法对中职学校的学生来说是一种能调动其学习积极性的行之有效的方法，能充分发挥教师的主导作用和学生的能动作用。学生在进行项目设计时，能充分发挥自己的想象，展示自己的设计思路，从而更主动地参与到教学活动中来，促使学生为完成项目而进行多渠道的自主学习，以扩大学生的知识面，实现个性化、层次化和弹性教学，提高学生解决问题和综合应用知识的能力，培养学生的创新意识，实现学生与工作岗位间的零距离接触，为以后走向社会打下了坚实的基础。
参考文献：
[1]黄世吉，梁元超，常春英.Dreamweaver 网页制作案例教程.北京：航空工业出版社，2010.
[2]杨帆，严耀伟，王方.网页设计与制作教程.北京：人民邮电出版社，2011
1.在动手制作网页之前，必须认真做好网的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。
2.制作网页页，收集好所需的文字资料、图像资料、FLASH动画和网页特效。
3.课程设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保
量地完成实训任务。要求独立完成规定的课程设计内容，不得弄虚作假，不准抄袭或复制他人的网页及其他内容。
4.设计过程中既要虚心接受老师的指导，又要充分发挥主观能动性，独立思考，努力钻研，勤于实践，勇于创新。
5.小组成员之间，既要分工明确，又要密切合作，培养良好的互助、协作精神。
6.课程设计期间，严格遵守学校的规章制度，不得迟到、早退、旷课。
7.实训环境为WINDOWS2000及以上版本的操作系统，网页制作软件为
DREAMWEAVER8，根据需要可以运用FIREWORKS8处理图像，运用FLASH8制作动画。
8.所创建的网站至少包含八个页面，分为三层，第一层为首页，第二层为四个二级子页，第三层为三个内容页。（10分）
1)对各个页面的具体要求如下：
2)用自己的名字作为站点根目录，有字幕滚动效果。（10分）
3)在站点主页标题为自己的名字、院系、专业、班级、学号，主页名称要求为index.htm。
（10分）
4)首页采用表格进行布局，必须包含导航栏，首页中，包含自己处理过的一张图片，最好
是自己的照片或自己信息的图片。（10分）
5)四个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页。每个二层、三层主页都应设返回主页的链按钮或热区，以便浏览者返回主页。（10分）
6)三个内容页分别为层布局的网页、运用JAVASCRIPT制作特效的网页、运用行为制作
特效的网页。（10分）
7)各个页面根据需要插入合适的图像和FLASH动画，首页要注插入背景音乐。（10分）
8)各个页面之间要求内容充实，布局合理，颜色搭配协调，美观大方。（10分）
9)各页面之间导航清晰，链接准确无误。（10分）
10)网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽
量做到字母数量少，见名知意，容易理解。（10分）
一、改革原因
《网页设计》课程是电子商务专业的专业技术课，开设这门课的目的是让学生通过这门课的学习，能够掌握网站设计方面的相关技能，熟练操作DREAMWEAVER、FLASH、FIREWORKS这三种软件。因此本门课的讲授和上机学时基本以1：1的比例展开，通过大量的上机练习来提高学生的操作水平。但一直以来这门课都是采取闭卷考试方式对学生进行考核，学生为了能顺利通过期末考试或取得高分，就不得不花大量时间去背诵网站设计的一些基本概念、操作步骤等等，从而使得本课程的讲授和考试有些脱节。为了使每堂课无论是讲授还是上机都收到良好的效果，从根本上提高学生的实际操作水平，特提出此考试改革办法。
二、改变考试方法的目的1.培养学生创新思维能力
2.培训学生实际操作能力
三、新考试方法的优点
1.能更好地促进素质教育的发展，新的考试方法能解决传统考试中存在的一些消极因素，以提高学生的学习热情，转换学习态度，掌握正确的学习方法为目的。
2.能更好地遵循教育教学规律和保证人才培养质量的原则，通过改革考试内容、考试方法，加强创新教育，建立良好的学风，保证人才培养质量。
3.能更好地与教学内容、教学方法改革相协调，巩固在教学内容、教学方法改革方面已经取得的成果，并对进一步深化改革起到促进作用。
4.新的考试方法要有良好的可操作性，考试内容科学合理，考试方式便于组织实施，具有实践意义，考试改革要保证教学秩序的稳定。
四、考核评分标准
总成绩计算方法：
总成绩 = 实践成绩×80%+平时成绩×20%
五、考试流程
1.组织学生到实验室，每人一台电脑，监考教师把预先准备好的网页设计题目放在服务器上并设置共享，学生通过访问服务
器来查看本次上机考试的题目，作完以后保存并上传至服务器。
2.任课教师在服务器上进行批改，根据评分标准给定成绩。
3.把本次考试所有学生做的网页分班级刻录光盘保存。
六、意外情况处理办法
关键词：技工院校 网页设计 建设
网页设计课程是技工院校一门实践性很强的专业基础课。随着计算机在各领域应用的不断扩大，网页设计的研究与实际应用也显得越来越重要。不少用人企业不再单纯满足于技校毕业生简单的打字、表格制作等技能的掌握，而越来越注重网页设计与制作等具有一定深度与难度技能的熟练运用。
为此，笔者学院计算机教研室在很早就将网页设计课程作为计算机课程教学改革的重点，通过课程体系的重新构建，网页设计课程更加贴近学生的实际学情，也更加贴近市场、企业的需求，从而达到了预期的教学目的，也收到了良好的教学效果。
一、课程建设的目的
技工院校的专业教学有其自身的特殊性与指向性。从目前社会与企业的实际需求出发，网页设计课程建设的目的应以培养应用型人才为主。应充分考虑技工院校学生的学习基础和学习特点，简单介绍HTML语言、CSS样式、javascript语言。还要全面介绍与网页设计制作有关的知识，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解，并使学生具有解决一般网页制作问题的能力。
在学时、实训条件允许的条件下，逐步培养学生掌握运用DreamweaveCS6网页制作软件制作网页的方法；掌握运用FireworksCS6、PhotoshopCS6图像处理软件进行网页中图形制作版式设计及切片的应用；掌握运用FlashCS6动画制作软件设计网页中动画的方法；掌握将这四个软件互相配合，完成网页设计与制作任务的方法，为今后从事网页设计与制作工作打下基础。
二、课程建设的意义
1.适应职教改革的需要
职业教育的大发展对技工院校的专业课程体系建设提出了许多新理念、新要求。因此，技工院校的计算机专业教学改革也势在必行。
2.调动学生的学习兴趣
技工院校的学生普遍学习基础薄弱，对专业学习缺乏必需的理论、实践储备，这就导致其学习困难。在整个学习过程中，随着学习兴趣的丧失，学习效果也在逐步下降。而打破传统的网页设计课程的教学模式，就可以有效地调动学生的学习积极性，从而提升整体教学效果。
3.有利于学生的职业能力的发展
网页设计课程体系的建设方向是理实一体化，让学生在学中做、在做中学，真正掌握今后就业所必需的关键能力，从而为整个职业生涯奠定坚实基础。
三、课程建设的内容
1.课程重点
掌握网页制作三剑客Dreamweaver、Fireworks、flash及photoshop在网页设计过程中的应用，使学生具备网站策划、网页设计与制作、效果图设计与制作等方面的技能。提高学生分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。
通过学习，使学生熟练掌握运用Dreamweaver网页制作软件制作网页，掌握运用Fireworks、Photoshop图形图像处理软件进行网页中图形图像的设计与制作，掌握运用flash动画制作软件设计网页中动画的方法。
2.课程难点
在教学过程中根据学生将来的就业需要，将教学难点设置为理解HTML语言各种文本格式、字符格式、段落设置、列表、标记的作用；理解CSS样式表中属性单位的作用和意义；理解javascript语言脚本程序的工作方式；深入理解超级链接、图形图像各种功能和应用；深入理解表格、APDiv、框架、表单的作用；深入理解模板、库、行为和脚本的高级应用。
理解网站测试的目的和测试方法；深入理解切片和热点的涵义和应用；深入理解动画的组成时间轴、场景、帧的涵义及各种动画的制作；理解使用图像设计软件进行版式设计的方法。
3.能力培养要求
从技工院校学生的实际学情出发，在能力培养方面要有针对性地突出关键能力的培养，而不再是过去简单的实际操作。因此要培养学生了解HTML语言的基本内涵、理解基本标记的用法；掌握在网页中添加CSS样式的方法；熟练使用CSS设置网页格式和列表的格式；熟练掌握网页中文本的输入、特殊字符的插入及字符格式的设置方法；掌握在网页中嵌入图像和多媒体的方法；熟练掌握使用绝对和相对URL，创建文本超链接，图像热点的方法；熟练掌握使用表格、框架、APDiv布局页面的方法；掌握创建表单的方法；掌握模板的创建和库项目的使用方法；理解行为和脚本的用法；掌握FireworksCS6基本操作及其在网页制作中的应用；掌握FlashCS6基本操作及简单动画的制作；掌握PhotoshopCS6基本操作及在网页设计中的应用。
总之，网页设计课程的特点是实践性强，教学过程中教师要重视知识的归纳总结，注重发挥实训教学在整个课程体系中的重要作用，以增加感性认识，便于学生理解掌握。
1 网页设计课程体系结构建设
1.1 教学方案建设
近五年来,我系教师在学院领导带领下,在进行了计算机应用技术产业行业分析和计算机应用技术职业能力分析的基础上,参照兄弟院校专业设置,进行了教学方案改革,结合我院实际制定了09级计算机应用技术教学方案。其中包含网页设计课程的设置,从课程建设初期的单一模式完善为结合岗位职业能力而建成的课程群。
为确保计算机应用技术专业课程设置的必要性和科学性,我们首先从专业层面上对企业进行调研和岗位分析,力求对课程设置的必要性进行详细分析与充分论证;以职业能力为核心从行动领域到学习领域进行关联和转换,并依据岗位工作过程及教育教学理论,对学习领域之间的关系进行组织,力求形成面向企业需求、关注学生能力的课程体系。具体过程如图1所示:
网站建设与管理维护能力是计算机应用技术专业的关键职业能力之一,并且毕业生一部分从事网站建设与维护方面的工作,因此本课程的就业岗位定位于网站建设岗位群,培养能在各企事业单位从事利用计算机系统及网络熟练进行网站建设与管理维护、中小型信息系统开发等工作以及网络建设与管理维护等工作,具有良好的职业道德、熟练的专业技能和可持续发展的计算机应用技术领域的高等技术应用性技能型人才。网页设计课程群如图2所示:
1.2 网页设计课程开发思路与步骤
《网页设计》学习领域课程内容选择以就业为导向、以实践专家研讨会形成的典型工作任务和工作内容等成果为依托体现职业性原则,通过显性或隐性学习情境体现实践性原则,学生完成的作品多元化体现开放性原则,从而达到培养专业能力、专业素养和综合能力的目标。课程开发思路与步骤如图3所示:
以真实工作项目为依据,对该课程进行功能分解,分解为五大部分、十一个模块、八个情景单元,同时提取工作任务,下面又细化为若干个子任务,分析工作任务所涉及的相关知识,设计一系列能力要求不断提升的学习任务,以学习任务为教学单元组织课程教学。配合开发流程训练设计以学生为主、教师指导的教学过程,培养学生自主学习能力。
《网页设计》学习领域课程的教学内容是通过学习情境来反映的[2]。本课程选择了基本能涵盖真实工作情景的八个学习情景,并选择了本课程八个典型网页和网站作为教学内容。这些网页都来自真实的网站,经过对网页的教学化处理,它们都较好的体现了学习内容的工学结合特征,使学生在有限的学习时间内,得到具有代表性网页设计与制作能力的培养,较好地满足工作岗位需要。典型网页确定后,教学内容就根据从设计到制作这一工作过程,从色彩搭配、网页布局、页面设计、页面制作等知识和技能来组织教学。教学内容选取依据职业性原则、实践性原则和开放性原则。
在教学方案的支撑下同时进行一系列的教学相关文件重新编制、修正和完善。其中包括教学大纲(教学标准)的制定,实训大纲和实训指导书、教案(电子教案和纸质教案)的修正和完善,以及考核模式的改革与创新。
1.3 课程整体解决方案
《网页设计》课程采用教学实施:
(1)教、学、练、做四位一体化;
(2)课程结构模块化;
(3)任务驱动教学方法;
(4)“形成性”考核模式;
(5)立体化教学资源;
(6)实践训练层次化等全方位立体化解决方案,为教师教、学生学、“学教一体”提供了有效保障。
1.4 教材建设
根据IT行业、市场人才的职业要求与标准,以及高职学生的特点,在对项目任务教学法进行调研的基础上,本课程组教师以工程项目教学为主线,基于多年课程改革与建设积累,整理历年讲稿,重新整合编排网页设计课程内容,以课程教学模块为章节、以8个完整的网站为脚本、划分出若干个项目案例为编写内容,重新编写了《Dreamweaver CS3网页设计案例教程》,于2009年9月由机械工业出版社出版,并于2010年荣获内蒙古自治区“第三届自治区哲学社会科学优秀成果政府奖三等奖”。教材结构安排如下,以其中一个模块为例:
2 教学模式与教学方法建设
经过多年的教学摸索,创建了三段——六步——一综合开放案例的“361”式教学模式。
2.1“三段一体”的学习过程
课程教学与考核实施分为前期、中期、后期三个阶段,形成了学生由浅入深、案例由小到大、逐步提高的过程。
2.2“六步法”课程教学环节
课程教学全部在多媒体网络机房进行,“教、学、练、做”完全融合。整个教学过程分为“总任务的导入>逐个完成由模仿型总任务切分而成的子任务,与此同步逐步完成开放型任务。每个情境由提出任务>任务分析>确定实施方案>任务实施>在任务实施过程中的检查与指导>完成任务后的评价及拓展训练等环节构成,如下图4所示。首先由教师承前启后,提出相应的模仿型子任务;然后带领学生就任务要点、完成任务所需要掌握的知识和技能进行分析,明确完成任务的思路;在任务实施过程中,教师做相应的示范,学生边学边做,完成任务。教师通过巡回指导,了解学生学习情况和任务完成进度和质量,帮助学生解决问题,也鼓励学生之间相互协作;完成任务后,教师对完成任务情况进行评价和总结。接着就可以继续实施模仿任务,这样由浅入深、不断提高。
2.3“一”综合开放案例
在课程末尾,学生根据所学知识和模仿制作案例的基础上,充分发挥学生的主观能动性,自主选题、自主设计开发制作开放性综合案例。深化课程改革,课程教学工作过程项目化、模块化,实现了现代教育技术下的多媒体教学,课堂教学采用项目教学法、实践教学采用任务驱动型教学法,整个教学贯穿启发式教学方法、实际案例教学法、头脑风暴法、角色替换、小组讨论等多种有效的教学方法。同时主要将任务驱动法应用于课程的现场教学之中,构建了“教、学、练、做”有机结合的模块化课程教学实施方式[3]。
在教学环节上,知识讲解与实践教学围绕8个网页和网站展开,知识点的讲解、设计技术的分析突出“模块式”的特点,各个模块重点突出、要点清晰,相互之间的关系明确。将经典赏析教学、课堂知识讲解与操作演示、课堂操作练习、实际项目操作、各类网页设计比赛、技术服务全部贯穿于教学之中,构成一个理论与实践相结合、课堂教学与课外学习相结合、教学项目与实际项目相结合、学研结合的全新的现代教学链,形成培养学生创新性和应用性的网页设计课程教学体系。
所有的教学资源可在学生机和教师机和ftp文件服务器上下载,“立体化”的配套资源是“层次化”实践性环节得以实施的重要保证,学生在训练网页制作技能时,可以模仿或借鉴现有的优秀网页的风格、布置和颜色搭配,也可以直接利用现有网页模板制作网页,可以根据需要选择合适的图片和动画,采用恰当特效。这样实现了网络资源共享,优势互补。
3 考核评价模式建设
改革本课程的课程成绩考评,采取“基于过程控制的形成性考核”方式,将过程考核贯穿于整个教学过程,并采取有效的过程控制。将课程教学及考核分为平时、阶段和综合三部分。同时采用“阶段循环考试法”,也就是学生进行考核后,如学生对本人完成任务情况不满意允许进一步完善,可以重新考核的“阶段循环考试法”,打破了一考定终身的状况[4]。
本课程为考试课。教学评价应以学生为中心,通过考核正确、科学评判学生知识的掌握和能力的提高程度,同时在评价过程中注重挖掘学生的潜能。将课程考核分为平时、阶段和综合三部分。
平时考核依据完成模仿任务的质量。学生在教师引导下完成模仿任务情况能准确地反映出学生基本知识、技能掌握情况。每完成一个子任务,提交到FTP,教师给每一个学生恰如其分的评价,并记录为平时成绩。考核后,如学生对本人完成任务情况不满意,允许进一步完善,重新考核。平时考核与巡回指导同步进行,当场完成。
阶段考核依据完成开放任务质量,兼顾原有水平。完成和模仿任务同时进行的开放任务的质量,较好地反映了学生自主学习、协作学习、知识综合运用、拓展创新的能力。将该任务分为若干阶段,学生完成每一阶段任务后都要提交阶段性作品和制作说明,由教师根据每阶段考核要求进行评价,同时兼顾原有水平。
综合评价主要根据学生的出勤率、学习态度、学习纪律、协作能力等进行。
(1)总评成绩=平时成绩40%+考试成绩60%,考试成绩为阶段考核成绩(含期末终结性考试成绩)。
(2)平时成绩包括:平时成绩由学习态度、出勤率、实践报告成绩、最终任务实践成绩和拓展项目组成。
其中最终任务实践成绩,含N个任务,Ti表示第i个任务成绩。
(3)阶段考核成绩依据完成阶段任务的质量进行考核,成绩是由学生三次阶段项目作品组成:阶段测试一(15分)、阶段测试二(15分)、综合开放案例(期末)(30分)。
《网页设计》的课程考核评价模式见表1:
4 总结
课程建设的过程是发现不足,不断完善的过程,并在教学中加以改进的过程。以上教学建设与实践是课程组教师多年的教学经验积累,实践证明:这些改革使教学效果得到了改善,激发了学生的学习兴趣,学生的实践操作能力明显得到提高。
参考文献
[1]李勇,刘承军.哈工大电机学课程的发展历史和专业课设置[J].现代教育技术,2008,(z1):73-74.
[2]何山,王雪飞,黄嵩.紧缺专业“电机学”课程教学建设探讨[J].电气电子教学学报,2010(12):17-18.
[3]范君.《路由交换部署与实施》课程教学建设分析[J].电脑与信息技术,2010(12):81-83.
【网页课程设计说明书】推荐阅读：
网页制作课程设计定07-22
网页制作设计报告07-04
网页设计培训方案07-09
校园网页设计大赛策划05-31
dw网页设计论文05-31
网页设计分析报告06-02
网页设计中文简历写作06-26
静态网页设计知识点06-22
网页设计的选择题07-18
