《网页制作与发布》课程教学大纲

1、网页制作与发布课程教学大纲适用专业：高职高专类非计算机专业学时：72学时（4学时周）课程类型(理论+实践)课(B类)课程性质：职业技能课课程编号：30101100执笔人：蔡贵荣审定人：雷全智第一部分大纲说明一、课程的性质和任务网页制作与发布是高职高专类许多非计算机专业的一门重要的专业必修课，是电子商务专业的一门职业技能课程，它涵盖了HTML设计、JavaScript脚本编程语言、Dreamweaver、Fireworks等相关知识，全面介绍Web站点设计的基本操作技术和使用技巧。通过本课程的学习，使学生掌握HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性，

2、能设计出多窗口网页、动态网页；能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能熟练掌握JavaScript脚本编程语言的基本语法知识，能实现网页的交互和特殊效果；能维护、管理和设计Web应用程序；能独立设计小型Web站点。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。二、课程教学的基本要求知识要求：1. 了解Web站点的工作原理；2. 了解Internet、WWW、HTTP、HTML的定义，概念和作用；3. 理解服务器、客户端、浏览器的概念和作用；4. 理解HTML语言中的各种文本格式、字符格式、段落设置、列

3、表、表单、框架、多媒体标记的作用；5. 理解表格、表单的作用；6. 理解JavaScript中对象的定义，及含义；7. 理解JavaScript中事件的概念；8. 理解JavaScript中属性与方法的概念；9. 了解面向对象程序设计思想；10. 理解Dreamweaver应用软件中菜单项的功能；11. 理解Fireworks应用软件中菜单项的功能。能力要求：1. 学会熟练运用Dreamweaver和Fireworks应用软件；2. 熟练掌握使用绝对和相对URL，创建超链接，图像链接；3. 学会运用HTML语言中的标记；4. 熟练掌握设置颜色、文本格式和列表；5. 掌握在网页中添加CSS的方法

4、6. 掌握在网页中嵌入图像、声音、多媒体信息的方法；7. 熟练掌握表格的使用方法，学会利用表格设布局网页；8. 掌握框架制作网页的方法，会使用框架设计网页；9. 掌握制作表单的方法，会利用表单建立交互式页面；10. 掌握JavaScript语言的语法；11. 掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；12. 学会修改JavaScript代码，实现不同的特效网页效果；13. 学会使用JavaScript语言实现网页特效。素质要求：1. 具有勤奋学习的态度，严谨求实、创新的工作作风；2. 具有良好的心理素质和职业道德素质；3. 具有高度责

5、任心和良好的团队合作精神；4. 具有一定的科学思维方式和判断分析问题的能力；5. 具有较强的网页设计创意思维、艺术设计素质。三、课程的教学建议坚持“理论够用、重在实践”的原则，注重培养学生网页设计的实际能力。教学中根据具体情况可对部分内容作适当筛选、组合。第二部分教学设计一、学时分配总学时数为72学时，4学分。序号教学内容学时安排理论试验1第一章 网页设计制作概述222第二章 网页版面设计基础443第三章 网页结构语言XHTML664第四章 网页表现语言CSS445第五章 网页行为语言JavaScript666第六章 用Dreamweaver 8创建网站667第七章 用FrontPage 20

6、03创建站点228第八章 快速创建Web站点229第九章 发布和维护Web站点22期末总复习22合计363672二、教学条件带有投影仪的多媒体网络机房，并全要配备Pentium以上PC，局域网可用；并安装好Windows XP/2003，MS Office 2003，Dreamweaver 8，Fireworks 8，Flash 8等软件。三、考核方式本课程考核采用形成性考核方式，即课程考试成绩由学习期间的各项成绩组成，即平时考核成绩20%+期末考核成绩80%。其中平时考核成绩强调学生的课堂出勤、学习纪律和作业、试验及课程设计等完成情况；期末考核采用开卷上机操作的方式。四、教材及参考书教材：网

7、页设计与制作教程，刘瑞新等编著，机械工业出版社参考书：Dreamweaver 8基础与实例精讲，腾飞科技编著，人民邮电出版社Dreamweaver+ASP.NET动态网站设计与典型实例，彭为等编著，清华大学出版社第三部分教学内容与要求内容一：网页设计基础【教学内容】1网页的基本要素2网页制作与美化工具3网页制作的基本步骤【教学重点】各类工具的功能，网页制作的基本步骤【教学难点】网页制作的基本步骤【教学要求】了解与网页的相关基本知识和相关术语内容二：HTML网页的创建及其基本结构【教学内容】1网页的创建过程：编辑、保存、预览、发布2HTML文件的基本结构：标记概念及格式、标记属性、文档的基本结构

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

9、，并掌握简单的排版内容四：HTML超级链接和列表标记【教学内容】1超级链接标记及属性2属性target的不同取值及对应的含义3邮件链接与书签链接的实现4普通列表、有序表、无序表标记的使用【教学重点】超级链的使用、有序无序列表标记的使用【教学难点】相对链接与绝对连接的区别、正确的书写格式【教学要求】学会在网页中熟练使用超级链接，合理使用列表【实验内容】1制作显示网页效果及显示网页代码的网页，并实现相互链接2制作如下效果的网页,并实现连接内容五：HTML的图片与表格标记【教学内容】1图片标记与配合使用的属性2表格标记的含义3单元格合并属性colspan与rowspan的使用4利用表格进行网页的布局

10、【教学重点】表格的制作及属性的设置【教学难点】表格的属性设置【教学要求】熟练掌握图片标记及相关属性的使用、能用表格标记制作表格；初步利用表格对网页布局【实验内容】1制作个人像册2制作课表表格3制作立体式表格注意：表格、单元格背景颜色的设置内容六：HTML表单标记和多媒体标记【教学内容】1表单标记、表单中单行文本、密码域、单选按钮、提交与取消按钮设计2表单网页中复选框、多行文本框、下拉列表的设计3跑马灯效果标记的使用4标记的使用5背景音乐标记的使用【教学重点】表单标记及其使用【教学难点】表及参数的含义【教学要求】学会使用表单的基本元素标记及属性，学会使用表格和表单结合布局网页【实验内容】1制作一

11、个含有表单的网页要求表单中含有：单行、多行文本框；单选、多选按钮；下拉菜单2在网页中加入背景音乐、移动文字内容七：HTML框架标记【教学内容】1框架标记及属性2标记常用属性及应用3浮动框架标记及应用【教学重点】框架及浮动窗口标记的语法及使用【教学难点】target参数的设置、连接的控制【教学要求】学会使用框架标记及属性设计框架网页【实验内容】1制作对本课程简介的框架网页，实现将指定的网页显示在指定的窗口2制作含有浮动窗口的网页内容八：JavaScript简介【教学内容】1JavaScript语句的结构2HTML中JavaScript语句的插入方式3输入、输出语句的使用4JavaScript变量

12、、表达式、运算符【教学重点】输入、输出语句及使用【教学难点】输入、输出语句的使用【教学要求】掌握在HTML中插入JavaScript语句的方法，熟练使用窗口方法window.alert()、prompt()()，使用JavaScript的变量及运算符、表达式设计简单的JavaScript网页【实验内容】制作实现1到任意数累加和的网页内容九：JavaScript的程序构成【教学内容】1程序控制流程：分支程序结构、多分支程序结构、for、while循环程序结构2JavaScript中函数的定义3事件驱动及事件处理【教学重点】语句结构，函数的定义，事件驱动【教学难点】函数的应用，事件驱动及应用【教学

13、要求】掌握JavaScript中分支与循环结构程序的设计，掌握浏览器事件、鼠标事件、键盘事件的响应处理方式【实验内容】1在网页中出现分时问候2编程实现猴子吃桃问题内容十：JavaScript内置对象【教学内容】1基于对象的语句及使用：with语句、this关键词、new运算符、forin语句2对象的创建3对象的属性及方法的使用4常用内部对象：串对象、日期及时间对象5窗体（form）对象与交互性【教学重点】基于对象的语句及使用，对象的属性及方法的使用，串对象、日期及时间对象的应用【教学难点】对象的建立，与窗体对象的交互【教学要求】1使用Date()对象的getHour()、getMInutes(

14、)、getSeconds()方法2setTimeout()的使用3设计分时显示不同信息的网页【实验内容】1状态栏中实现跑马灯的文字2在网页中实现时钟3实现对表单的检测内容十一：站点的资源管理【教学内容】1站点资源的合理组织2站点的创建3上传站点【教学重点】与网站相关的概念，网站的主题定位，网站的目录结构，网站的链接结构，网站布局，发布站点【教学难点】网站的整体风格，创意设计，发布网站【教学要求】通过对网页设计基础知识的介绍，了解建立网站之前的一些准备工作以及与网站有关的一些概念，建立网站的过程，能从网站得网站的整体进行规划，定位网站的主体和风格，构建网站的目录框架和链接框架，会发布网页【实验内

15、容】了解建站的准备工作，掌握基本概念，完成申请主页的申请任务，为以后制作的网页，做好随时发布的准备内容十二：Dreamweaver基础【教学内容】1Dreamweaver的工作界面：文档窗口、对象面板、属性面板、启动面板、设定页面标尺及网格2建立Dreamweaver站点：建立本地站点、文件管理3基本的页面元素：文字的编辑、图像、水平线、标题4超链接：文件的路径、文字链接、图像链接、锚链接、邮件链接、无址链接、下载链接、导航链接、站点内文件的链接5页面属性【教学重点】创建本地站点，在页面上使用简单的页面元素，利用属性面板设置对象的属性值，文件路径的表示方法，多种链接方式的综合使用【教学难点】图

16、形属性的设定，文件的路径，多种链接方式的设置方法【教学要求】建立本地站点并管理站点，制作简单的静态网页，使用对象面板在网页中插入文字、水平线、图像、Flash文件等简单的元素，熟练使用属性面板设置对象的属性，多种超链接的设置方法，利用网页属性设置页面的属性值【实验内容】1建立本地站点，题材自选。主页上要求有导航栏，文字、图像以及站点的广告图像（用鼠标经过图像来制作）2主页下创建三个子页，要求子页上面有内容列表、水平线，日期、Flash文件，并利用属性页面设置这些对象的属性3用多种超链接方式完成站点地图的创建4利用页面属性对话框设置页面的背景颜色或背景图像，并更改超链接的颜色和样式内容十三：文本

17、样式【教学内容】1改变文本属性2HTML样式：创建HTML样式、应用HTML样式、删除HTML样式3使用CSS样式：创建新的CSS样式、样式的类型、编辑样式、样式对话框中参数的设定、滤镜【教学重点】样式的创建，熟练掌握CSS样式属性内容的设置方法，学会应用CSS滤镜对文字和图像做出特殊效果【教学难点】CSS样式属性内容中各种参数的意义，滤镜参数意义，滤镜的综合使用【教学要求】学会如何创建HTML和CSS样式表，如何在文档中应用样式表，如何管理样式表【实验内容】1新建CSS样式，使用CSS选择器设置连接文字样式2利用Blur滤镜之作模糊文字3利用DropShadow滤镜制作影印文字4利用Alph

18、a滤镜制作具有跑马灯效果的文字5利用FlipH滤镜和FlipV滤镜完成图像的水平饭庄与垂直翻转内容十四：表格、框架和表单【教学内容】1表格：创建表格、选择表格、设置表格属性、设置单元格属性、在表格中输入内容、表格的格式化和排序、表格应用综合实例、网页相册2框架：创建框架、框架及框架组的属性、框架内的链接设置、框架网页实例3表单：创建表单、向表单中添加对象、表单属性的设置及与后台程序的链接4布局表格：绘制布局表格、绘制嵌套布局表格、布局表格的属性、绘制布局单元格与布局单元格属性、布局表格实例【教学重点】创建表格，设置表格及单元格的属性；创建和保存框架结构的网页，要求框架的链接；制作表单【教学难点

19、】设置表格及单元格的属性，框架的创建与保存，表单元素的使用，了解表单的提交处理【教学要求】使用表格进行数据的设定，文字及图像的定位；学习表格及单元格属性的设置；利用框架来划分网页，完成框架页面中导航栏与内容的链接；利用表单进行网站信息的收集【实验内容】1下载一览表（插入表格并进行表格属性的设置，格式化表格）2顾客的预约服务（表单控件的综合使用，其中把确定按钮的动作设置为油箱的超链接）3“宠物商店”（制作框架网页，并在框架网页中设置超链接）。当用户单击左侧的动物图标时，在右侧就会看见该种动物的图像库内容十五：层【教学内容】1层的创建：创建新层、创建嵌套层、层属性、2层的基本操作：层的移动、调整层

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

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