高职院校《网页设计与制作》课程教学设计
浅析高职院校《网页设计与制作》课程教学设计
摘要：高职院校《网页设计与制作》课程要从教学目标、课程内容、考核方式等方面进行合理的设计，并运用以项目为载体、以任务驱动为教学方法调动学生学习的积极性，充分发挥教师的引导作用和学生的能动作用。
关键词：高职院校；计算机专业；《网页设计与制作》；教学设计
中图分类号：g642
文献标识码：a
文章编号：1009-0118（2013）03-0159-02
一、高职院校《网页设计与制作》课程的学习目标
高职院校《网页设计与制作》课程旨在培养计算机网页前台设计工作人员，并为学生学习动态网页的制作打下基础。因此，高职院校《网页设计与制作》课程应以行业需求确定专业培养目标，以职业能力为目标实施教学活动，以学生为中心组织教学过程，以灵活的教学方法和考核方法评价教学效果，并突出能力和应用目标。
学习完本课程后，学生能较为熟练地运用html语言基本知识；利用dreamweaver软件进行网站的创建、网页的布局、网页的编辑等；能够对企业建站项目进行策划、建设、维护和管理，能独立设计各类网站，并且通过学习可以获得从事网页编辑、网站策划、网络美工创作、动漫设计、信息编辑、网络广告设计等工作的相应技能。
二、高职院校《网页设计与制作》课程教学设计的思路 高职院校《网页设计与制作》课程的教学设计遵循“3+2”原则，“3”指的是：（1）以学生为主体培养学生的职业能力目标；（2）项目任务为载体训练职业岗位能力；（3）理论与实践相结合的课程设计。“2”指的是：（1）某些课程教学内容（如德育、外语内容等）必须“渗透”到全校所有课程中去，而不能依赖集中上课的形式；（2）对于职业能力中的“核心能力”，如自学能力、与人交流能力、与人合作能力、解决问题能力、信息处理能力、创新能力、数字应用能力、外语应用能力等，也必须要“渗透”到所有课程中去，而不能仅依赖集中讲授等方式。
从《网页设计与制作》课程以往的教学情况来看，学生在学习完这门课程后虽能掌握基本的理论知识，但在实际应用中，作品的利用率不高，一方面表现在网页的内容定位上，另一方面则表现在网页色彩的使用上。为此，教师在进行教学设计时，应以一个实际的项目为载体，将这一整体项目分解成若干小任务，以每一个小项目为一个学习任务，并贯穿在教学中。当每一个小项目完成后，一个知识点随之掌握，最终让学生学会运用所学的本课程知识进行网页的整合。
在课程编排上，教师应首先给学生讲解《网页设计与制作》课程的学习思路和需要完成的项目要求及目标，接着让学生学习如何使用dreamweaver软件搭建所需的网页框架，并利用相关网页设计软件制作网页中所用的图形图像和动画，然后回到dream-weaver软件的学习中完成网页的链接和美化，最终实现整个网页的制作。 课程实施时，教师应首先向学生展示已经完成的项目案例激发学生渴求知识的积极性，让学生去感受这些网页的风格，接着应介绍本次项目网页制作的要求，确定该主网页的基本框架、内容，子网页的框架、内容以及色彩要求，然后再让学生学习网页制作的具体内容。网页制作的具体内容主要包括三部分，第一是使用dreamweaver软件搭建主页框架和插入网页元素，该知识点学习完成后，要求学生能够搭建出主网页和各子网页的框架，并留出网页元素的空间；第二可以学习能够实现效果的内容；最后利用网页设计与制作的辅助软件对整个网页所需的动态图片、lo-go、导航等进行合理的设计以达到一定的协调性。学习完这三部分后，每一个子网页就已成形，但各网页之间还没有相互链接，然后再回来学习使用dreamweaver软件将各网页链接起来，形成完整的网页，适当的也可以利用div+css对整个网页再次优化。
三、高职院校《网页设计与制作》课程教学设计的内容
（一）教学目标的设计
教师可以将《网页设计与制作》课程分为三大模块：运用dre-amweaver软件搭建网页；运用辅助软件对网页中所需的素材进行设计和处理；网页美化，并分别确定以下三大目标：
1、能力目标
这一目标主要有：能够组织和管理网页文件和文件夹；能进行网页布局；能够在网页中插入各种超链接将整个网站链接起来；能插入网页元素；能用fireworks制作和处理网页中所需的图形图像；能用fireworks设计制作网页中的主题文字；能用fire-works制作网页中所需的线条及边框；能够制作网页动画；能够制作网站logo；能用fireworks与flash软件美化、修饰网页。
2、知识目标
这一目标主要有：掌握dreamweaver的工作环境、菜单、工具栏的使用方法；掌握新建网站的方法、文档的保存方法；掌握网页的编辑技术；掌握网页超链接的插入和编辑技术；掌握表格、布局表格、单元格、框架、层的辅助定位工具操作；掌握文本、图片、动画、视频的插入、编辑、格式设置的方法；掌握利用fireworks制作网页中所需图像的操作方法及图像格式转换技术；掌握利用fire-works设计处理网页中的文字；掌握利用fireworks制作网页中所需的线条及边框；掌握绘图工具绘制图形的方法；掌握flash基本动画的制作；掌握引导动画的制作；掌握遮罩动画的制作。
3、素质目标
这一目标主要有：培养学生的敬业精神、团队协作精神；自主学习能力；沟通能力、感悟能力；表达能力、知识应用能力；获取知识能力、自我发展能力、创新能力；责任感、效率观念。
（二）课程内容的设计
教师根据划分的模块可以将整个项目分为四个子项目，每个子项目又分为若干个子任务，以项目案例任务的形式进行教学：搭建网页，处理网页中的图形图像，制作logo及广告动画，美化、修饰、集成网页。每个子项目对应的子任务如下： 1、搭建网页
组织和管理网页文件和文件夹；进行网页布局；超链接的制作和编辑；网页元素的插入和编辑。
2、处理网页中的图形图像
制作和处理网页中所需的图形图像；设计制作网页中的主题文字；制作网页中所需的线条及边框。
3、制作logo及广告动画
制作网页动画；制作网站logo。
4、美化、修饰、集成网页
利用css+div进行网页美化、修饰；作品展示、评析。
（三）第一次课的设计
1、引入课程，说明课程安排，介绍授课目标和考核要求
（1）优秀网站展示
教师可展示一些国内外著名公司的网站、上一届学生的优秀网页以及与本次项目相关的网站，以引起学生学习的兴趣，然后再引入本课程的学习内容。
（2）介绍本课程的课程安排和学习目标
教师应让学生明白，本课程是计算机专业的核心技术课，dre-amweaver、fireworks、flash软件是网页制作常用的编辑软件，这三个软件在《网页设计与制作》课程中具有重要的作用。《网页设计与制作》课程是集理论性与实践性为一体的学科，分别介绍以上三种软件在网页设计中所担任的角色和任务，明确dreamweaver是进行网页框架搭建、页面布局、各种网页元素的组合、网页之间链接的软件。
（3）考核要求说明
本课程的考核分为四部分：一是平时的学习态度、考勤（20%）；二是每小组成员完成各子项目的情况（20%）；三是整体项目的完成情况（20%）；四是进行分组形式的答辩（40%）。
2、根据学生以往对软件的掌握，让学生自主进行尝试性练习
这一步主要是让学生从浓厚的学习兴趣状态过渡到对知识的渴求阶段，为新课的学习打下良好的基础。学生在进行尝试性练习时会发现很多问题，如软件不能启动、无法使用工具等。面对这些问题，学生感觉无从下手，这时他们就会产生学习相关知识的渴望。
3、讲授新课
教师在总结学生完成子任务或者在做子任务中遇到的问题，引入新知识点，逐步介绍dreamweaver软件环境、窗口界面、工具的使用等。
4、学生再次进行实践性练习
在这一步中，学生针对教师的讲解进行正确的练习，并在练习过程中进行知识点的总结。
（四）考核方式的设计
《网页设计与制作》是一门计算机专业的必修课程。为适应该课程培养创新性专业人才的目标需要，在教学过程中，教师应重视理论与实践相结合，注重培养学生运用理论进行观察、分析和解决问题的能力。
为了能准确反映出课堂的教学效果，《网页设计与制作》课程的考核将着重测试学生运用理论解决实际问题的能力。《网页设计与制作》课程的学期总评成绩应以项目答辩、团队协作为主，平时考核为辅的教育教学考核办法来进行。
对于一个整体项目，应从以下几方面进行评价：主页面的设计风格、子页面的制作、网页中的链接和整体效果。要求整体风格统一、主网页及二级页面的布局完善；要求布局合理、美观，文件夹组织有序、标准，文件命名正确、符合行业标准，按要求编辑网页元素和制作网页导航，导航清晰，有一定动态效果。评分时，教师应结合项目答辩的情况、学生平时的操作情况以及作品展示时其他同学的评价给出一个综合分数。
总之，教无定法，重在得法。以项目为载体、以任务为驱动的教学方法对高职院校的学生来说是一种能调动其学习积极性的行之有效的方法，能充分发挥教师的主导作用和学生的能动作用。学生在进行项目设计时，想象的空间大，操作更加灵活，能充分发挥自己的想象，展示自己的思路，从而更主动地参与到教学活动中来，促使学生为完成项目而进行多渠道的自主学习，以扩大学生的知识面，实现个性化、分层次和弹性教学，提高学生解决问题和综合应用知识的能力，培养学生的创新意识，实现学生与工作岗位间的零距离接触，为提高计算机专业学生良性就业打下坚实的基础。
高职《网页设计与制作》的课程设计
第１０卷第２期 ２０１０年６月 柳＇ｋｌ４职业技术学院学报 ＪＯＵＲＮＡＬ ＯＦ ＬＩＵＺＨＯＵ ＶＯＣＡＴＩＯＮＡＬ＆ＴＥＣＨＮＩＣＡＬ ＣＯＬＬＥＧＥ Ｖｏ１．１０ ＮＯ．２ Ｊｕｎ．２０１０
［高教课程研究］
高职《网页设计与制作》的课程设计
胡雪梅．胡建荣
（广东纺织职业技术学院 信息工程系，广东 佛山 ５２８０００）
摘要：通过对网页设计员和网站管理员的职业岗位能力分析，设计了课程的整体教学方案，并介
绍了课程内容及目标、能力训练项目的设计以及教学评价方式。
关键词：网页设计；网页制作；教学设计；能力项目；考核方式
中图分类号：ＴＰ３９３，Ｇ７１２ 文献标志码：Ａ 文章编号：１６７１～１０８４（２０１０）０２—００７８—０３
《网页设计与制作》是高职计算机网络专
业的职业核心能力课程，是网站建设的基础课
程之一．学生对该课程内容的掌握程度不仅会
影响到后续课程｛Ｗｅｂ程序设计》的学习，更
关系到以后能否成为一个合格的网页设计员和
网站管理员。笔者根据自己的教学经验，通过 对网页设计员和网站管理员的职业岗位能力分
析，结合《网页设计与制作》课程的特点，设
计了课程的整体教学方案。
一、课程定位
《网页设计与制作》是计算机网络专业的 职业核心能力课程，主要培养学生掌握网页设
计的基本知识．具备静态网页设计的能力．掌
握测试和发布网站的方法．掌握网站设计的全
过程，并能熟练地制作出有专业水准的静态网
站，同时能够解决一些网页设计中出现的问题，
为学生今后进一步学习网页编程、从事网站建 设、网站维护和管理工作奠定基础。通过对职
业岗位的分析，高职计算机网络专业《网页设
计与制作》课程的职业岗位指向：网页设计员
和网站维护和管理员。
二、课程整体教学方案
本课程的设计依据网页设计员和网站管理
员应具备的职业能力确定教学内容，以职业实
践为主线、以项目课程为主体、以任务驱动进
行教学、以职业要求进行考核评价。
《网页设计与制作》教学设计
《网页设计与制作》教学方案
课题 在网页中创建超链接 授课教师 张红宁
授课班级 计二（4） 课时安排 1课时 授课时间 2020-9-23
教
学
目
标 知识目标 1.了解超链接的概念。
2.掌握超链接的类型和创建方法。
3.理解超链接的状态。
能力目标 1.会创建超链接
2.会判断超链接的访问状态
教学重、难点 超链接的创建
教学思路 三步走：第一步看一看：从观看超链接对新知产生兴趣；第二步识一识：从讲解新知到初步认识理解；第三步练一练：从动手操作到知识内化。达到层层加深理解和识记的效果。
教
回顾1. 检查听课人数，回顾上节课的教学内容；
2. 演示从网站主页到子页的操作，引出超
学
过
程 导入 链接。
讲
授
新
知 任务一：了解超链接（详）
→什么是超链接
所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
→超链接分类型
内部链接：这种链接的目标点是同个网站中的其他网页（文档），称为内部链接。
外部链接：这种链接的目标点是不同站点或本站点以个的网页（文档），称为外部链接。
空链接：指没有指定目标文件的链接，单击空链接不会打开任何文件。
电子邮件链接：链接到一个电子邮件地址。
教法：演示讲解
学法：观摩认识
任务二：创建超链接（详）
1.到网站内页面的超链接——内部链接（网站内部页面之间创建相互链接关系）
步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件，也可以用快捷方式创建。 看一看
识一识
练一练 步骤2从“目标”下拉菜单中，选择文档的打开位置。
-self:会在当前网页所在的窗口或框架打开（默认方式）
-blank：每个链接会创建一个新的窗口
-new:会在同一个刚创建的窗口中打开
-top:会在完整的浏览器窗口中打开
网页设计与制作教案-0101
项目化实战教程
《网页设计与制作》
项目单元教学设计
编号： 0101
学 校：
专 业：
项目单元：
赏析典型网站
授课教师：
《网页设计与制作》教学设计 编号： 0101
项目名称 计算机系部网站建设 任课教师 任课班级
项目单元 赏析典型网站 章节 第一章 课时 4 名称
（ 1）了解优秀网站的布局结构知识目标 （ 2）了解优秀网站的色彩搭配
（ 3）对网页的组成元素有一定的了解
（ 1）能针对优秀网站的布局结构及色彩搭配进行分析
教学目标技能目标
（ 2）具备自我收集资料进行分析、归纳整理的能力
明确课程要学什么，学完该课程自己能做什么，引导学生对该课程产生
情感态度
浓厚的兴趣，有动力学好该门课程。
（ 1）了解网页制作相关概念
教学内容 （ 2）熟悉网站开发流程
（ 3）欣赏并分析典型网站
重点 欣赏典型网站并分析典型网站，明确本门课程最终实现目标。
教学重点
和难点
难点 在掌握网站设计基本概念的基础上具备赏析和分析网站的能力。
教学方法 教学方法：项目展示法，把知识点融入到项目中讲解。
和策略 教学策略：通过典型项目展示，在项目中引导学生掌握该课程相关知识点。
秉承“授人以鱼不如授人以渔”的总体教学理念。
通过项目展示， 引导学生掌握知识点的同时， 掌握该门课程的学习方法，并积极、 主动的通过网络去自我汲取课程相关知识，开阔知识面。
教学设计
思路
1
教学实施
步骤
项
目
单
元
导
入
教师活动
宏观导入课程：
1、 专业课程体系简介
2、 本课程与其它课程之间的关系
3、 本课程对应的社会职位：网页设计师
展示最新社会招聘网页设计师信息
网页设计师发展现状数据统计资料
网页设计师发展趋势数据预测资料
4、 要想成为网页设计师需要具备的综合素质
以提问的方式引入本单元， 把学生的思维聚合到本门课程上来，并活跃气氛。
《网页设计》(省设)课程教学实施方案(大专)
225632221.doc
第 1 页 共 3 页 《网页设计》(省设)课程教学实施方案（大专）
第一部分 大纲说明
一、 课程的性质和任务
《网络信息制作与发布》课程是新闻专业新开设的一门专业课程。学生在学习本课程之前应当具有计算机网络和计算机操作的预备知识和能力。
本课程的任务是学习DreamWeaver MX的基本使用，所包含的主要内容有：
1、 站点的创建
2、 页面设置
（1） 标题
（2） 背景图及颜色
（3） 字体颜色
（4） 留白设置
3、 文字编辑
（1） 字体设定
（2） 字号设定
（3） 文字颜色设定
（4） 文字的样式
（5） 文字的对齐
（6） 加入项目列表和编号列表
（7） 切换段落
4、 图片的运用
5、 超链接的运用
（1） 文字超链接
（2） 图片超链接
（3） E-mail超链接
（4） 锚点超链接
（5） 图像映像图
（6） Download下载设置
（7） 自动换页
6、 表格的运用
（1） 表格属性
（2） 单元格属性
7、 表单的应用
（1） 文本框
（2） 单选框
（3） 下拉菜单
（4） 列表框
（5） 多选框
（6） 文本域
（7） 提交按钮 225632221.doc
第 2 页 共 3 页 8、 框架
9、 网页的层
（1） 建立图层
（2） 选取图层
（3） 移动图层
（4） 图层的重叠
（5） 嵌套图层
（6） 隐藏图层
（7） 同时编辑多个
10、 时间轴及动画
（1） 图层动画
（2） 记录动画路径
（3） 立体环绕动画
11、 行为
（1） 弹出警告窗
（2） 鼠标划过的图层显示与隐藏
（3） 弹出浏览窗
（4） 制作滑动菜单
（5） 制作可拖动图层
12、 多媒体元素的插入（简要介绍）
13、 CSS样式（简要介绍）
学习完本课程后，学生应该能够具有创建一个小型的个人网站，并将其发布到Internet上运行的能力。
二、 课程的特点和教学基本要求
高职《网页设计与制作》课程教学设计与实现
龙源期刊网
高职《网页设计与制作》课程教学设计与实现
作者：王聪
来源：《中国科技纵横》2012年第08期
摘要：《网站设计与制作》是一门实践性很强的职业技能课程，对于高职高专学生教学过程中怎样把本门课程要学习的知识和技能与本课程相对应的岗位知识和技能要求相对应，并在课程教学过程中使学生熟悉岗位工作过程是课程教学设计的重点。该文对基于工作过程培养模式，强调知识的实用性，突出网站设计制作、网站推广和网络编辑等行业岗位实用能力培养，以岗位能力选择相关知识点、技能点，形成理论与实践、知识与技能相统一的课程模式进行了探索。
关键词：网页设计与制作 基于工作过程 教学设计
《网页设计与制作》是高职高专计算机类专业的职业技能课程，根据课程所对应的职业岗位网站设计制作、网站推广和网络编辑等岗位所需的职业能力要求，分析出课程能力目标为网站的规划、网页效果图的设计与制作、网站的设计、网页动画的设计、网页脚本代码等专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
1、设计思路
本课程的设计秉着“以职业岗位工作过程为主线”、“以职业能力培养为课程核心”、“以实际项目为导向”等先进的教学理念。使用基于工作过程培养模式，强调知识的实用性。突出网站设计制作、网站推广和网络编辑等行业岗位实用能力培养，以岗位能力选择相关知识点、技能点，形成理论与实践、知识与技能相统一的课程模式。在课程内容组织和实施中突破传统学科教材的“三段式”课程设置模式和知识传授过程，将知识点的讲授贯穿于一个完整的综合性网站的设计与制作，通过情景、过程、类比、模拟等教学模式提高学生的知识、技能等综合能力。
2、课程任务及目标
通过课程的学习培养学生网站设计制作、网站推广和网络编辑等方面的岗位职业能力，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，养成良好的职业道德，为后续课程综合实训和顶龙源期刊网
大学网页设计与制作教案
课程名称： 网页设计与制作
授课教师： [教师姓名]
授课班级： [班级名称]
授课时间： [具体时间]
课时安排： 2课时
教学目标：
1. 知识目标：
- 了解网页设计的基本概念、原则和流程。
- 掌握HTML、CSS和JavaScript的基本语法和常用标签。
- 熟悉网页布局技术，如Flexbox和Grid。
- 学习使用常用的网页设计工具，如Dreamweaver、HBuilder等。
2. 能力目标：
- 能够独立设计和制作简单的网页。
- 能够运用所学知识解决实际网页设计问题。
- 培养团队协作能力和创新思维。
3. 素质目标：
- 培养学生对网页设计的兴趣和审美能力。
- 增强学生的动手实践能力和解决问题的能力。
- 培养学生的创新意识和终身学习的能力。
教学内容：
第一课时
1. 导入：
- 通过展示一些优秀的网页设计作品，激发学生的学习兴趣。 - 简要介绍网页设计的发展历程和现状。
2. 网页设计的基本概念：
- 介绍网页设计的定义、原则和流程。
- 讲解网页设计的基本要素，如色彩、字体、布局等。
3. HTML基础：
- 介绍HTML的基本语法和常用标签。
- 讲解HTML文档结构、头部信息、段落、链接、图片等标签的使用。
4. CSS基础：
- 介绍CSS的基本语法和常用属性。
- 讲解CSS选择器、字体、颜色、布局等属性的使用。
第二课时
1. JavaScript基础：
- 介绍JavaScript的基本语法和常用语句。
- 讲解JavaScript的变量、数据类型、运算符、函数等概念。
2. 网页布局技术：
- 介绍Flexbox和Grid布局技术。
- 讲解如何使用这些技术实现响应式网页设计。
3. 网页设计工具：
- 介绍Dreamweaver、HBuilder等网页设计工具。
《网页制作与设计》课程设计
《网页设计与制作》课程设计
一、课程设置
（一）课程的基本信息
本课程授课的对象主要为电子商务专业和平面设计的学生。
教学时数现安排是：理实一体课46学时、实训一周。
（二）课程定位
在电子商务和平面设计专业中，网页设计与制作课程主要培养学生的专业基本能力，它为专业核心能力—Web程序设计提供基础。
（三）课程目标
1．知识教学目标
(1)掌握网页制作相关基础知识；
(2)掌握网站创建的流程以及网站基本架构的设计与创建方法；
(3)掌握Dreamweaver的基本使用方法，包括如何插入各类网页元素并进行编辑、利用各种工具布局页面等；
(4)掌握与图像处理软件相结合设计网站的方法。
2．能力培养目标
(1)能合理规划站点并能利用网页制作软件Dreamweaver建立网站。
(2)掌握构建简单的动态网页的基本技术。
3．专业思想教育目标 （1）文明、法制意识：网站内容应积极健康向上，不做违法的事；
（2）合作精神：能够与他人进行合作，具有协调工作能力和组织管理能力；
（3）较强的自我知识及技术更新能力：快速跟踪网页制作的新技术及市场应用动态。
二、课程设计
（一）理念与思路
1．以工作过程为导向，整个网站贯穿整个教学
本课程将完整的静态网站页面设计作为教学内容，从网站的需求分析、设计规划、系统设计、系统实现再到系统测试及发布，将这些内容贯穿到教学的不同环节，让学生以最接近工作实际的方式开展静态网站设计，真正掌握实际工作所需的能力，真正做到学以致用。课程教学围绕整个真实网站展开，各个教学单元采用“任务驱动、行动导向”教学方法，网页制作技能训练在真实工作环境中实施，突出职业能力和综合素质的培养。课程结束后，学生能掌握静态网站设计的全部过程，为以后的工作奠定坚实的基础。
2．与相关认证结合，突出学生的职业能力考核
根据企业岗位技能需求，本课程引进全国计算机信息高新技术—网页制作员级考证。通过考试检验学生的职业能力和水平，为学生以后的求职就业提供了有力证据。
网页制作与制作(教学设计)
《网页设计与制作》教学设计
一、课程性质、目的和任务
《网页设计与制作》是计算机网络专业及其计算机相关专业的一门重要的专业必修课，是计算机网络技术专业的专业核心课程。授课对象为计算机网络及计算机相关专业的专科学生。通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言和JavaScript程序，掌握运用Dreamweaver网页制作软件制作网页、运用Photoshop图像处理软件进行网页中图形制作和运用Flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、教学基本要求
知识要求
熟练掌握运用Dreamweaver网页制作软件制作网页、运用Photoshop图像处理软件进行网页中图形制作和运用Flash动画制作软件设计网页中动画的方法，进而掌握将这三个软件互相配合，完成网页设计与制作任务的方法。
能力要求
具备网页设计、图形设计、动画设计的基本能力，能独立设计一个内容完整、图文并茂、技术运用得当的网站；具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等科技文件的基本能力；培养分析问题、解决问题的能力；培养协作、交流的能力，培养创新能力和团队意识。
三、教学内容及要求
单元一：网站开发基础
1）课程教学内容：
• 网站开发概述
• 网站开发流程
• 常用网页设计软件
• HTML入门
2）教学重点、难点：
了解网页系统的起源和发展；了解常用的网页制作软件；初步理解HTML。
通过经典网站赏析激发课程学习兴趣。
单元二：Dreamweaver网页制作基础
1）课程教学内容：
• Dreamweaver CS6的工作环境
• 建立本地站点
• 在Dreamweaver中制作第一个网页
网页设计与制作教案
网页设计与制作教案
第一章：网页设计基础
1.1 教学目标
了解网页设计的基本概念和原则
掌握网页设计的基本要素，如布局、色彩、字体等
学习使用网页设计工具，如Photoshop、Illustrator等
1.2 教学内容
网页设计的定义和作用
网页设计的原则和要素
网页设计工具的使用方法
1.3 教学活动
引入网页设计的概念和作用，让学生了解网页设计的重要性
讲解网页设计的原则和要素，结合实际案例进行分析
演示网页设计工具的使用方法，让学生进行实际操作练习
1.4 教学评估
学生完成一份简单的网页设计草图，展示对网页设计原则和要素的理解
学生操作网页设计工具，展示对工具使用方法的掌握
第二章：HTML与CSS基础
2.1 教学目标
了解HTML和CSS的基本概念和作用
掌握HTML和CSS的基本语法和常用标签
学习使用CSS样式表美化网页 2.2 教学内容
HTML和CSS的定义和作用
HTML的基本语法和常用标签
CSS样式表的语法和使用方法
2.3 教学活动
引入HTML和CSS的概念和作用，让学生了解网页结构和美化的基础
讲解HTML的基本语法和常用标签，结合实际案例进行分析
讲解CSS样式表的语法和使用方法，结合实际案例进行分析
2.4 教学评估
学生完成一份简单的HTML页面，展示对HTML标签的理解和运用
学生完成一份简单的CSS样式表，展示对CSS样式的理解和运用
第三章：网页布局与排版
3.1 教学目标
了解网页布局和排版的基本概念和原则
掌握使用CSS进行网页布局和排版的方法
学习使用响应式设计技术，使网页适应不同设备尺寸
3.2 教学内容
网页布局和排版的原则和要素
使用CSS进行布局和排版的方法
响应式设计技术的基本概念和实现方法
3.3 教学活动
引入网页布局和排版的概念和原则，让学生了解网页布局和排版的重要性 讲解使用CSS进行布局和排版的方法，结合实际案例进行分析
《网页设计与制作》课程教学方案设计
科技信息
《网页设计与制作》课程教学方案设计
广东商学院华商学院信息工程系 周秋怡
［摘要］网页设计与制作是一门立足于企业实际的网页制作技术开设的计算机专业基础课，实践性强，因此实验环节的设计至关重
要。本文根据课程的特点和作者多年与企业合作经验和教学实践，设计了一套网页设计与制作课程教学设计方案，该方案包括课堂
教学演示、课后作业、自测实验和综合实验一系列实验项目的详细设计。实践证明，通过几个环节的反复训练，学生能较好地掌握网
页设计与制作的技巧，取得了不错的效果。
［关键词］网页设计与制作Ｄｒｅａｍｗｅａｖｅｒ教学设计
１．前言 随着计算机、通信技术和网络技术的发展，网站建设成为了越来越
多的企事业单位和个人宣传和推广自身形象的重要平台，因而对网页
设计师的需求也日益增加。本着课程设计与社会需求接轨的理念，网
页设计与制作成为了很多高等院校计算机及相关专业的主要课程之
一。Ｄｒｅａｍｗｅａｖｅｒ是目前业界最流行的网页制作与网站开发工具 ，因 而本课程主要介绍使用Ｄｒｅａｍｗｅａｖｅｒ ＣＳ５进行网页设计与制作的方
法。如何通过本门课程的学习，使学生能够迅速、准确地掌握网页制作 的方法与技巧，能创作出符合现代企业要求的，具有专业化水平的网
站，成为任课教师不断探究的问题。通过实验环节的训练，在掌握网页 设计基本技能的基础上，实际制作综合复杂的网页，让学生在学习的过
程中，发现问题，并通过实践解决问题，这样既可以培养学生的学习能
力，又可以熟悉网页制作技术和初步掌握网站建设的技术，努力实现与
就业岗位的“零对接”。
２．Ｄｒｅａｍｗｅａｖｅｒ网页设计与制作课程教学任务 Ｄｒｅａｍｗｅａｖｅｒ ＣＳ５是一门操作性很强的计算机专业基础课程。教
学任务是通过课程的学习，使学生具备网页设计与制作、网站规划与维 护的实践技能，并在实践过程中逐步掌握网页设计的基本思想和方
法。主要介绍利用Ｄｒｅａｍｗｅａｖｅｒ开发工具进行网页设计，涵盖了 Ｄｒｅａｍｗｅａｖｅｒ ＣＳ５的基本知识、ＨＴＭＬ基础、ＣＳＳ基础、创建页面布局、使