《网页设计》教学大纲_2011秋.doc

网页设计教学设计1 课程的基本描述课程名称：网页设计英文名称：Web Page Design课程性质：学科基础课（选修）适用专业：软件工程专业总 学 时：32学时理论学时：12学时实验学时：20学时课程设计：学 分：1学分开课学期：20112012年度第1学期参考教材徐国平，武 装. 网页设计与制作教程.第三版. 高等教育出版社, 2008前导课程：后续课程：动态网页设计2 教学定位2.1 能力培养目标本课程主要培养学生以下两个方面的能力：1、 认知和理解需求的能力认知和理解网站开发技术，并能够应用其进行网站静态页面的开发工作。2、 网站的设计能力 能够综合运用所学的软件进行网站系统的设计。2.2 课程的主要特点网页设计为本专业的有关网络程序设计的较基础内容，是一门应用性很强的学科。主要讲解使用Dreamweaver软件进行网站设计，同时了解开发过程中所用到的其他技术理论，并将它们应用到实际工程当中，使用所学的方法进行静态网站页面的开发。2.3 教学定位通过本课程的学习，除了使学生掌握开发一个完整的网站设计的技术，精通Dreamweaver软件的应用。并通过实践应用将所学的技术和软件过程的基本原理和软件开发方法融会贯通，主要致力于培养学生综合运用所学的相关理论知识进行网站页面开发的能力。3 知识点与学时分配3.1网页设计技术概述与快速入门主要讲授网页设计技术的产生和发展，页面的运行方式，常用的网页设计技术，以及他们之间的区别。（学时：1学时；掌握程度：了解；重要程度：核心）了解 Dreamweaver CS3界面，和基本的控件的含义和使用方法，建立一个站点并对站点的基本属性进行设定，通过Dreamweaver CS3建立一个新的页面，并在其中快速的插入基本网页元素文字和图像，并对其属性进行设定。（学时：1学时；掌握程度：运用；重要程度：核心）3.2 HTML标记语言 了解HTML语言格式及语法。使用HTML标记语言编写网页（文字图片的设定、列表、表格、表单等）。了解各种排版标记语言和它们之间的关系。(学时：2学时；掌握程度：运用；重要程度：核心)3.3 网页的布局主要讲解通过Dreamweaver CS3对网页进行布局的方法，有四种布局的方法，通过表格对网页进行布局、通过布局表格对网页进行布局、通过框架对网页进行布局、通过层对网页进行布局。讲解布局时候的属性设定以及注意事项。(学时：2学时；掌握程度：运用；重要程度：核心)3.4网页的整体规划和表单的使用 主要讲解Dreamweaver CS3对网页的整体规划方法HTML样式的设定和CSS样式的设定方法，属性的设定和注意事项。讲解在网页中插入表单的方法，通过表单实现客户端与服务器端交互的界面。(学时：2学时；掌握程度：运用；重要程度：核心)3.5行为与组件的应用 Dreamweaver CS3提供了一种称为Behavior（行为）的方法，帮助用户构建页面中的交互行为。主要讲解建立网页行为的方法和应用的时候的注意事项，学会通过事件触发程序执行的手段，来实现一些网页的客户端动态效果。(学时：2学时；掌握程度：运用；重要程度：核心)3.6 Photoshop 和 Flash图片格式jpeg及动画格式swf的介绍。引入网页美化软件photoshop CS3 和flash CS3。主要讲解如何使用photoshop来编辑图片、切图、贴图和制图，特效字的制作以及使用flash制作动画。目的：了解 Photoshop和Flash的基本使用。(学时：2学时；掌握程度：了解；重要程度：一般)3.7其它学时 实验(学时：20学时)4 讲授提示及方法 4.1网页设计技术概述与快速入门重点：网页的运行方式，了解Dreamweaver CS3界面，掌握建立站点和页面的方法。难点：让学生了解网页运行方式讲授提示与方法：强调网页的运行方式。讲解Dreamweaver CS3界面以及界面上主要按钮的使用。使用Dreamweaver CS3配置一个静态网页站点，建立一个新的网页页面，在页面中添加文字和图片，并且进行相应属性的设定。 4.2 HTML标记语言重点：使用HTML代码进行网页编程，在网页中插入图片、表格等，使用HTML代码建立网页的框架结构。难点：使用HTML代码建立网页的框架结构。 讲授提示与方法：通过幻灯讲授HTML标记语言的编程方法，使用实例显示编程的网页效果。4.3网页的布局 重点：使用Dreamweaver CS3进行页面元素的排版和布局，四种布局方法使用和注意事项。图层的使用方法，和时间轴的使用。 难点：图层的使用，使用时间轴实现简单的网页动画 讲授提示与方法：通过幻灯讲授时间轴的使用方法，并且使用Dreamweaver CS3进行四种布局设定及建立一个拼图游戏来熟悉时间轴的使用。实例显示编程的网页效果。 4.4网页的整体规划和表单的使用重点：通过HTML和CSS样式对网页进行整体的规划和排版，对其属性进行统一的设定。应用表单可以完成客户端和服务器端的交互，讲解如何使用Dreamweaver CS3进行表单的设计和表单元素的添加与属性的设定。 难点：CSS样式的设定 讲授提示与方法：通过幻灯讲授CSS样式和HTML样式的设定方法和使用Dreamweaver CS3添加表单的方法，使用实例显示编程的网页效果。 4.5行为与组件的应用重点：行为和组件可以使网页设计人员不用编程也能实现一些程序动作，重点讲解在网页中插入行为和组件，通过一些事件触发让网页实现一些客户端的效果 难点：行为的添加以及事件的选择。 讲授提示与方法：首先讲解各种行为的作用以及设定方法，然后通过实例加深印象，达到真正的掌握。 4.6 Photoshop和Flash的应用重点：介绍图片格式，了解Photoshop和Flash软件的使用方法。难点：编辑图片，桢的概念。 讲授提示与方法：讲解Photoshop和Flash的软件界面，通过实例讲解图片的剪切、拼接、缩放、效果编辑过程，以及动画的制作过程。5实验设计由于本课程实践性较强，因此习题和实验主要在机器上完成，为此设立了以下几个实验：序号实验名称学时1实验一 通过Dreamweaver CS3建立站点建立页面22实验二 熟悉HTML语言的使用23实验三 Dreamweaver CS3中网页的布局方法24实验四 Dreamweaver CS3中CSS样式的设定和表单的插入 25实验五 Dreamweaver CS3中行为和组件的使用26实验六 PS和Flash的使用 27实验七 建立一个主题鲜明个人网站68机动2 通过实验的设定，使得学生能够更好地理解讲述的知识要点并将他们实际的应用到网站设计过程中，加强学生对知识点的理解和消化。并且能够掌握其中的难点和重点。更增强了学生的动手和实践能力。6 考核与成绩记载考核的方式及成绩的评定。学生成绩构成：平时成绩（20%）、实验成绩（1