池州学院计算机教育网站

《网页设计与制作》教学大纲

一、课程简介

   《网页设计与制作》课程是计算机应用技术、电子商务等专业的一门核心课程，也是其他计算机专业的普及型课程，它涵盖了HTML设计、JavaScript脚本编程语言、Dreamweaver、Fireworks等相关知识，全面介绍WEB站点设计的基本操作技术和使用技巧。
    通过本课程的学习，使学生掌握HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性，能设计出多窗口网页、动态网页；能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识，能实现网页的交互和特殊效果；能维护、管理和设计WEB应用程序；能独立设计小型WEB站点。
   本课程共分为三个部分：HTML/JavaScript部分、 Dreamweaver MX部分和Fireworks MX部分。
   第一部分，HTML语言和JavaScript脚本语言，主要讲授HTML和JavaScript的语法和应用，主要内容有：网页设计的基本知识、网页的创建及其基本结构、段落和文字、超级链接和列表、图像和表格、表单、框架和多媒体；JavaScript基本数据结构、JavaScript程序构成、JavaScript语言基于对象的特性、创建新对象、使用内部对象系统、对象输入／输出、Web页面信息的交互等。
   第二部分，Dreamweaver MX网页设计，主要讲授Dreamweaver MX的操作使用，主要内容有规划和设置站点、设置文档、插入图像、使用HTML样式和CSS样式、使用表格、层及时间轴与行为的技术应用等。
   第三部分，Fireworks MX网页设计，主要讲授Fireworks MX工作环境、更改画布和使用位图等内容，通过实例介绍Fireworks MX的应用。
   本教学大纲是针对高职高专计算机应用技术专业编写，也适应于其他相关专业。

二、课程教学目的

   通过本课程的学习，让学生能够掌握静态网页的制作工具的使用以及HTML标记语言的运用，并掌握JavaScript脚本语言编程的基本方法与技巧。熟练掌握Fireworks工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技能，能独立设计小型WEB站点。

三、课程教学要求

（一）知识要求：
1． 了解WEB站点的工作原理；
2． 了解Internet、WWW、HTTP、HTML的定义，概念和作用；
3． 理解服务器、客户端、浏览器的概念和作用；
4． 理解HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用；
5． 理解表格、表单的作用；
6． 理解JavaScript中对象的定义，及含义；
7． 理解JavaScript中事件的概念；
8． 理解JavaScript中属性与方法的概念；
9． 了解面向对象程序设计思想；
10．理解Dreamweaver应用软件中菜单项的功能；
11．理解Fireworks应用软件中菜单项的功能；
（二）能力要求：
1． 学会熟练运用Dreamweaver和Fireworks应用软件；
2． 熟练掌握使用绝对和相对URL，创建超链接，图像链接；
3． 学会运用HTML语言中的标记；
4． 熟练掌握设置颜色、文本格式和列表；
5． 掌握在网页中添加CSS的方法;
6． 掌握在网页中嵌入图像、声音、多媒体信息的方法；
7． 熟练掌握表格的使用方法，学会利用表格设布局网页；
8． 掌握框架制作网页的方法，会使用框架设计网页；
9． 掌握制作表单的方法，会利用表单建立交互式页面；
10．掌握JavaScript语言的语法；
11．掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；
12．学会修改JavaScript代码，实现不同的特效网页效果；
13．学会使用JavaScript语言实现网页特效;
（三）素质要求：
1． 具有勤奋学习的态度，严谨求实、创新的工作作风；
2． 具有良好的心理素质和职业道德素质；
3． 具有高度责任心和良好的团队合作精神；
4． 具有一定的科学思维方式和判断分析问题的能力；
5． 具有较强的网页设计创意思维、艺术设计素质。

四、 基本内容与教学要求

第一部分 HTML/JavaScript部分

内容一 网页设计基础
【教学内容】
1．网页的基本要素；
2．网页制作与美化工具；
3．网页制作的基本步骤；
【教学重点】各类工具的功能，网页制作的基本步骤；
【教学难点】网页制作的基本步骤。
【教学要求】了解与网页的相关基本知识和相关术语。
【实验内容】无
【教学时数】2 学时

内容二 HTML网页的创建及其基本结构
【教学内容】
1．网页的创建过程：编辑、保存、预览、发布；
2．HTML文件的基本结构：标记概念及格式、标记属性、文档的基本结构及其标记的使用；
【教学重点】网页创建过程、HTML文档的结构及其基本标记
【教学难点】标记的格式及其属性的设置
【教学要求】学会使用基本标记和格式标记设计简单的网页
【实验内容】制作“个人简介”的简单网页，掌握HTML文档的结构及基本标记的使用。
【教学时数】2 学时

内容三 HTML的段落和文字标记标记
【教学内容】
1．标题文字标记；
2．段落标记；
3．文字标记：字体、字型、字号、颜色；
4．特殊符号元素标记的使用；
5．上下标标记；
【教学重点】文本标记的使用
【教学难点】属性参数的灵活选择。
【教学要求】掌握文档排版标记的使用，熟练使用及其属性设置、特殊符号的应用。初步了解网页的排版。
【实验内容】对“个人简介”的网页进行美化，掌握字体、字型、字号、颜色的设置，并掌握简单的排版。
【教学时数】2 学时

内容四 HTML超级链接和列表标记
【教学内容】
1．超级链接标记及属性；
2．属性target的不同取值及对应的含义；
3．邮件链接与书签链接的实现；
4．普通列表、有序表、无序表标记的使用；
【教学重点】超级链的使用、有序无序列表标记的使用；
【教学难点】相对链接与绝对连接的区别、正确的书写格式；
【教学要求】学会在网页中熟练使用超级链接，合理使用列表；
【实验内容】
1．制作显示网页效果及显示网页代码的网页，并实现相互链接。
2．制作如下效果的网页,并实现连接。
【教学时数】2 学时

内容五 HTML的图片与表格标记
【教学内容】
1．图片标记与配合使用的属性；
2．表格标记的含义；
3．单元格合并属性colspan与rowspan的使用；
4．利用表格进行网页的布局;
【教学重点】表格的制作及属性的设置
【教学难点】表格的属性设置
【教学要求】熟练掌握图片标记及相关属性的使用、能用表格标记制作表格；初步利用表格对网页布局
【实验内容】
1．制作个人像册
2．制作课表表格；
3．制作立体式表格。
注意：表格、单元格背景颜色的设置；
【教学时数】2 学时

内容六 HTML表单标记和多媒体标记
【教学内容】
1．表单标记、表单中单行文本、密码域、单选按钮、提交与取消按钮设计；
2．表单网页中复选框、多行文本框、下拉列表的设计
3．跑马灯效果标记的使用;
4．标记的使用；
5．背景音乐标记的使用；
【教学重点】表单标记及其使用
【教学难点】表及参数的含义
【教学要求】学会使用表单的基本元素标记及属性，学会使用表格和表单结合布局网页。
【实验内容】
1．制作一个含有表单的网页。
要求表单中含有：单行、多行文本框；单选、多选按钮；下拉菜单。
2．在网页中加入背景音乐、移动文字。
【教学时数】2 学时

内容七 HTML框架标记
【教学内容】
1．框架标记及属性;
2．标记常用属性及应用；
3．浮动框架标记及应用；
【教学重点】框架及浮动窗口标记的语法及使用
【教学难点】target参数的设置、连接的控制。
【教学要求】学会使用框架标记及属性设计框架网页
【实验内容】
1．制作对本课程简介的框架网页，实现将指定的网页显示在指定的窗口。
2．制作含有浮动窗口的网页。
【教学时数】2 学时

内容八 JavaScript简介
【教学内容】
1．JavaScript语句的结构；
2．HTML中JavaScript语句的插入方式；
3．输入、输出语句的使用；
4．JavaScript变量、表达式、运算符
【教学重点】输入、输出语句及使用。
【教学难点】输入、输出语句的使用。
【教学要求】 掌握在HTML中插入JavaScript语句的方法，熟练使用窗口方法window.alert( )、prompt（），文档方法document.write（）， 使用JavaScript的变量及运算符、表达式设计简单的JavaScript网页。
【实验内容】制作实现1到任意数累加和的网页。
【教学时数】2 学时

内容九 JavaScript的程序构成
【教学内容】
1．程序控制流程：分支程序结构、多分支程序结构、for 、while循环程序结构；
2．JavaScript中函数的定义；
3．事件驱动及事件处理；
【教学重点】语句结构，函数的定义，事件驱动。
【教学难点】函数的应用，事件驱动及应用。
【教学要求】 掌握JavaScript中分支与循环结构程序的设计，掌握浏览器事件、鼠标事件、键盘事件的响应处理方式。
【实验内容】
1．在网页中出现分时问候；
2．编程实现猴子吃桃问题。
猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个。第二天早上有将剩下的桃子吃掉一半，又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天早上想再吃时，就只剩一个桃子了。求第一天共摘多少个桃子？
【教学时数】2 学时

内容十 JavaScript内置对象
【教学内容】
1．基于对象的语句及使用：with 语句、this 关键词、new运算符、For …in…语句；
2．对象的创建；
3．对象的属性及方法的使用；
4．常用内部对象：串对象、日期及时间对象
5．窗 体（form）对象与交互性
【教学重点】基于对象的语句及使用，对象的属性及方法的使用，串对象、日期及时间对象的应用。
【教学难点】对象的建立，与窗体对象的交互。
【教学要求】
1．使用Date()对象的getHour()、 getMInutes()、 getSeconds()方法；
2．setTimeout()的使用；
3．设计分时显示不同信息的网页；
【实验内容】
1．状态栏中实现跑马灯的文字；
2．在网页中实现时钟
3．实现对表单的检测
【教学时数】2 学时

第二部分 DreamweaverMX部分

内容十一 站点的资源管理
【教学内容】
1．站点资源的合理组织；
2．站点的创建；
3．上传站点；
【教学重点】与网站相关的概念，网站的主题定位，网站的目录结构，网站的链接结构，网站布局，发布站点。
【教学难点】网站的整体风格，创意设计，发布网站。
【教学要求】通过对网页设计基础知识的介绍，了解建立网站之前的一些准备工作以及与网站有关的一些概念，建立网站的过程，能从网站得网站的整体进行规划，定位网站的主体和风格，构建网站的目录框架和链接框架，会发布网页。
【实验内容】了解建站的准备工作，掌握基本概念，完成申请主页的申请任务，为以后制作的网页，做好随时发布的准备。
【教学时数】2 学时

内容十二 Dreamweaver 基础
【教学内容】
1．Dreamweaver的工作界面：文档窗口、对象面板、属性面板、启动面板、设定页面标尺及网格；
2. 建立Dreamweaver站点：建立本地站点、文件管理；
3．基本的页面元素：文字的编辑、图像、水平线、标题；
4．超链接：文件的路径、文字链接、图像链接、锚链接、邮件链接、无址链接、 下载链接、导航链接、站点内文件的链接
5．页面属性【教学重点】创建本地站点，在页面上使用简单的页面元素，利用属性面板设置对象的属性值，文件路径的表示方法，多种链接方式的综合使用。
【教学难点】图形属性的设定，文件的路径，多种链接方式的设置方法。
【教学要求】建立本地站点并管理站点，制作简单的静态网页，使用对象面板在网页中插入文字、水平线、图像、Flash文件等简单的元素，熟练使用属性面板设置对象的属性，多种超链接的设置方法，利用网页属性设置页面的属性值。
【实验内容】
1．建立本地站点，题材自选。主页上要求有导航栏，文字、图像以及站点的广告图像（用鼠标经过图像来制作）。
2．主页下创建三个子页，要求子页上面有内容列表、水平线，日期、Flash文件，并利用属性页面设置这些对象的属性。
3．用多种超链接方式完成站点地图的创建。
4．利用页面属性对话框设置页面的背景颜色或背景图像，并更改超链接的颜色和样式。
【教学时数】2 学时

内容十三 文本样式
【教学内容】
1． 改变文本属性
2．HTML样式：创建HTML样式、应用HTML样式、删除HTML样式
3．使用CSS样式：创建新的CSS样式、样式的类型、编辑样式、样式对话框中参数的设定、滤镜
【教学重点】样式的创建，熟练掌握CSS样式属性内容的设置方法，学会应用CSS滤镜对文字和图像做出特殊效果。
【教学难点】CSS样式属性内容中各种参数的意义，滤镜参数意义，滤镜的综合使用。
【教学要求】学会如何创建HTML和CSS样式表，如何在文档中应用样式表，如何管理样式表。
【实验内容】
1．新建CSS样式，使用CSS选择器设置连接文字样式。
2．利用Blur滤镜之作模糊文字。
3．利用DropShadow滤镜制作影印文字。
4．利用Alpha滤镜制作具有跑马灯效果的文字。
5．利用FlipH滤镜和FlipV滤镜完成图像的水平饭庄与垂直翻转。
【教学时数】2 学时

内容十四 表格、框架和表单
【教学内容】
1．表格：创建表格、选择表格、设置表格属性、设置单元格属性、在表格中输入内容、表格的格式化和排序、表格应用综合实例、网页相册
2．框架：创建框架、框架及框架组的属性、框架内的链接设置、框架网页实例
3．表单：创建表单、向表单中添加对象、表单属性的设置及与后台程序的链接
4．布局表格：绘制布局表格、绘制嵌套布局表格、布局表格的属性、绘制布局单元格与布局单元格属性、布局表格实例
【教学重点】创建表格，设置表格及单元格的属性；创建和保存框架结构的网页，要求框架的链接；制作表单。
【教学难点】设置表格及单元格的属性，框架的创建与保存，表单元素的使用，了解表单的提交处理
【教学要求】使用表格进行数据的设定，文字及图像的定位；学习表格及单元格属性的设置；利用框架来划分网页，完成框架页面中导航栏与内容的链接；利用表单进行网站信息的收集。
【实验内容】
1．下载一览表（插入表格并进行表格属性的设置，格式化表格）。
2．顾客的预约服务（表单控件的综合使用，其中把［确定］按钮的动作设置为油箱的超链接）。
3．“宠物商店”（制作框架网页，并在框架网页中设置超链接）。当用户单击左侧的动物图标时，在右侧就会看见该种动物的图像库。
【教学时数】2 学时

内容十五 层
【教学内容】
1．层的创建：创建新层、创建嵌套层、层属性、
2．层的基本操作：层的移动、调整层的大小、层的对齐、排列层、层面板、层与表格的相互转换
3．层的应用：拖动层、层的显示与隐藏
【教学重点】层的显示与隐藏，层的显示顺序，层与表格的相互转化，通过行为面板设定与层有关的行为。
【教学难点】层的准确定位，层的显示与隐藏属性的利用，利用层的拖动制作具有动态效果的网页，层与表格的相互转化。
【教学要求】学会层的建立，利用层面板设置层的显示／隐藏属性，Z值的大小与层的显示的关系，如何快速的对齐层，层与表格的相互转化，通过添加与层有关的行为来实现网页的动态效果。
【实验内容】
1．制作动态说明。当鼠标指向图片时，出现动态的说明效果（通过层的显示与隐藏来实现）。
2．制作拼图效果的游戏。
【教学时数】2 学时

内容十六 行为与时间轴
【教学内容】
1．行为：行为的面板、应用行为
2．时间轴：时间轴面板、层的移动、应用时间轴交换图像、添加时间轴行为
【教学重点】行为面板的使用方法，基本的行为操作，如何使用Dreamweaver自带的行为，如何利用时间轴创建沿路径运动的动画，在时间轴中改变对象的属性，将行为、时间轴和层的结合在一起来制作动态交互网页。
【教学难点】使用Dreamweaver自带的行为，利用时间轴创建动画，把时间轴、行为和层结合在一起创建动态交互网页
【教学要求】利用行为和时间轴制作的网页看起来很生动活泼。通过本章的学习，学会将行为、时间轴和层结合在一起来制作具有动态交互效果的网页。
【实验内容】
1．进站公告（当网页加载时，弹出关于站点更新的最新消息）。
2．请记住我们（网页加载时，在状态栏上显示公司的地址及联系方式）。
3．蝴蝶飞花（打开网页时，会看到一只蝴蝶慢慢的飞到一朵花的上面）。
4．动态的导航条（利用图像来制作动态的导航菜单，当鼠标指向图像时，会显示另一幅图像，当单击图像时，会连接到指定的页面上）。
5．当单击上部框架内的链接文字是，左右两部分框架中的内容会同时改变）。6.当网页加载时，会听到背景音乐。
【教学时数】2 学时

第三部分 Fireworks MX部分

内容十七 Fireworks MX基本工具的使用及操作
【教学内容】
1．Fireworks MX的工作界面
2．输入与编辑文本
3．矢量图形的绘制与编辑
4．位图图像的操作
【教学重点】面板工具的使用，文字输入与编辑，矢量图的绘制，位图的操作。
【教学难点】矢量图的绘制。
【教学要求】通过教学，使学生掌握文本的输入与对文本的各种编辑方法，矢量图形的绘制与编辑，位图图像的绘制与编辑方法。
【实验内容】
1．制作美术文字
2．对图片进行美化，并嵌入文字
【教学时数】2 学时

内容十八 FireworksMX动画制作
【教学内容】
1．使用层
2．使用帧
3．使用动画元件
4．动画制作
5．动画的控制
6．创建与编辑切片
7．导出切片
【教学重点】动画的制作，切片及导出切片
【教学难点】动画的控制
【教学要求】通过教学，使学生掌握帧的概念、帧的创建方法以及帧的编辑，洋葱皮技术及其应用，动画元件的概念和创建动画元件的方法。掌握动画的制作方法，使用帧面板和洋葱皮制作动画，使用补间法制作动画，使用动画元件制作动画，动画的控制方法。使学生掌握切片的概念，切片的各种创建和编辑方法。能够熟练的导出切片图像。
【实验内容】
1．制作拼图游戏的网页
2．制作文字动画
【教学时数】2 学时

内容十九 创建按钮和弹出菜单
【教学内容】
1．创建按钮
2．编辑和导出按钮
3．创建导航栏
4．创建弹出式菜单
5．导出弹出式菜单
【教学重点】创建按钮，制作弹出式菜单
【教学难点】弹出式菜单的制作方法
【教学要求】通过教学，使学生掌握使用“按钮编辑器”创建按钮的方法，并能够对创建的按钮进行编辑和导出，能够熟练的创建在网页中使用的导航栏。掌握实用弹出菜单编辑器创建弹出菜单，并能够熟练的导出弹出菜单。
【实验内容】
1．制作网页中的菜单按钮
2．制作弹出式菜单
【教学时数】2 学时