【网页设计和制作】课程教学实施大纲

1、网页设计与制作课程实施性教学大纲课程性质和任务本课程的目的是通过对HTML、VBScript编程技术、Dreamweaver 8、ASP动态页面设计的学习，掌握综合应用网页设计的各种技能，培养学生的自我学习和动手能力，真正能使用所学的知识进行建设。课程培养目标【教学目标】熟练掌握Web站点的基本概念；熟练掌握HTML文档结构和各种标记的使用；掌握VBScript 编程技术和ASP技术；掌握Dreamweaver 8页面设计方法和常用的表单对象。【能力目标】熟练掌握利用HTML标记进行页面设计的方法和技巧；熟练掌握利用VBScript、ASP进行动态页面设计的方法和技巧；熟练掌握利用Dreamw

2、eaver 8进行页面设计与布局的方法和技巧。养成良好的网页设计与制作习惯。养成良好的自主自学能力。【思想教育目标】培养学生科学、严谨的态度。培养学生理论联系实际的学习能力。培养学生全面发展的学习能力。培养学生的社会责任感。培养学生的良好的职业道德和敬业精神。课程教学要求在接受大学计算机基础知识教育的基础上，从使用角度进一步掌握计算机的基本知识，并了解当前有关计算机的新知识和新热点，以及当前的流行软件。掌握制作网页的基础知识。掌握网页的核心技术HTML语言，涉及了HTML语言文档的基本结构，逐一介绍了HTML语言中的格式、表格、框架结构、表单、图象标记处理以及移动文字等容。了解支持实现客户端动

3、态页面(DHTML)的DOM(文档对象模型)、CSS(层叠样式表)和SCRIPT(脚本程序语言)技术及DHTML页面的设计。掌握专业网页设计工具Dreameweaver软件的使用及用它进行页面制作。熟悉综合开发的全过程。在教学过程中，应特别重视培养学生利用计算机知识进行自学的能力和探索、创新的精神。课程重点与难点网页设计与制作课程的重点有网页的布局、网页中文本和图像的处理、超级与导航栏、HTML语言、使用CSS样式美化网页、网页设计。本课程的难点有网页中图像的处理、动画的制作、VBScript技术的应用、的规划与组织、网页中特效制作。课程的重点、难点及解决方法的具体说明如下表所示：类别知识点解

4、决办法重点网页的布局 网页中文本和图像的处理 经典网页赏析，形成深刻印象 分析多种网页布局的特点、导航栏的特点 真实案例教学与实践 HTML语言 使用CSS样式美化网页 通过真实案例分析HTML和CSS，先进行操作，然后分析代码 任务型教学，先提出问题，然后分析解决方法，观察其实际效果，最后分析HTML代码的变化 网页设计 先分析具体实例，形成感性认识，然后总结一般规律，运用一般规律指导网页设计。 难点网页中图像的处理 动画的制作 开设选修课程图形图像处理与动画制作技术，为学习网页设计提供保障。 VBScript技术的应用 网页中特效制作 通过分析目前中常用的特效，了解特效的制作技术。 通过观

5、察常见特效的效果及制作方法，了解JavaScript技术的应用，激发学生对JavaScript技术的兴趣。 的规划与组织 以实例分析的规划与组织方法。 让学生自己动手进行的规划与组织。 教学方法任务驱动教学方法：让学生在一个个典型“任务”驱动下，引导帮助学生完成一系列“任务”，把知识的学习和知识的应用有机地融合在一起，让学生达到融会贯通、以点带面的效果。项目教学法：在课堂教学中把理论与实践有机地结合起来，使学生积极参与到教学过程中变被动为主动，有效地调动学生学习的积极性。实践教学法：本课程实践很强，学生只听不练根本达不到学习该课程的目的，根据课时安排以及要掌握基本知识，设置实验项目，培养学生动

6、手能力。问题讨论与小组协作：要求学生以35人为小组单位，在课外完成需要落实的理论与实践知识，通过问题讨论与小组协作学习，使每位同学都能达到应达到的能力目标。教学参考书目京文等编著.网页设计与制作.高等教育（）：2007京文.网页设计与制作实训与考试指导.高等教育（）：2007明日科技编著.ASP开发技术大全.人民邮电（）：2007梁芳、莉莉主编.网页设计与制作（第2版）. 清华大学（）：2011桦、利娟主编.网页设计与制作实用教程. 清华大学（）：2011国庆主编.网页设计与制作. 清华大学（）：2013教学基本容网页设计基础知识【教学目标】了解：的有关名词，如：WWW服务器、Web节点、网页

7、、主页（Homepage）、浏览器(Browser)、超级、http（hypertext transmission protocol）、URL(Uniform Resource Locator)、html（hypertext markup language）语言等；常用的网页设计工具。掌握：设计的基本思路；【教学重点与难点】常用的网页编辑器【教学容】Internet基础 Internet概述 WWW与网页 设计的基本思路 网页设计常用工具 网页制作工具 网页美化工具 【思考与实践】简述WWW的工作原理。什么是网页与？简述建设的基本思路。HTML语言【教学目标】了解：HTML语言的发展情况；掌握

8、：HTML的基本概念、文档的基本结构，以及HTML文档结构标记、段落标记、字符标记、标记、图像标记、列表标记、表格标记等HTML的常用标记及相关属性；熟练应用HTML标记语言对利用网页设计工具软件设计出的网页进行修改和优化，从而实现对网页精确的控制。【教学重点与难点】表格、表单、框架和CCS样式【教学容】HTML基础 基本概念 HTML文档的基本结构 文本格式标记 标题标记 换行标记 段落标记 字体标记 字形标记 字符样式标记 水平线标记预定义标记 特殊字符的插入 列表标记 有序列表标记 无序列表标记 多媒体元素标记 插入图像标记 插入多媒体文件标记 插入背景音乐标记 插入滚动字幕标记 超标记

9、 创建站点 创建站点间 创建锚 创建等其他 表格标记 常用属性 常用属性 常用属性 常用属性 常用属性 表单标记 创建表单 输入型表单控件 文本域表单控件 下拉列表框表单控件 框架标记 框架集 框架 CSS样式 认识CSS CSS语法 CSS的使用 案例解析 设计思路 案例结构 页面解析 【思考与实践】试按照要求编写program.htm文件，实现下面的表格。页面功能要求：“课程表”采用3号标题，居中显示；表格的宽度为345，高度为139，边框宽度为1；“课号”、“课程名”、“学分”采用5号标题，居中显示；“网络原理”和“网页设计与制作”课程的详细说明文件分别为该网页所在目录的net.htm和

10、web.htm，需要为表中的课程名设置相应的超，单击后以一个新窗口打开相应的说明页；其他属性自行定义。按下图所示完成考生文件夹下的program.htm，设计一个用户注册信息表。页面功能要求：“用户注册”采用3号标题，居中显示；整个表单采用一个两列的表格进行布局，其中第一列占窗口的20%；输入的密码和密码验证不能以明文显示；性别默认是“男”；用户名和电子文本框文字大小是40；学历可从下拉列表“硕士以上”、“大学本科”、“大专以下”三者中选择其一，默认值为“硕士以上”；最后的两个命令按钮分别实现“登录”和“全部重写”的功能；表单采用“post”方式向服务器当前目的“userlogin.asp”提

11、交数据；表单各域的名称可以自己定义。Dreamweaver 8网页设计【教学目标】了解：Dreamweaver 8基本概念，WWW服务器的设置，Dreamweaver 8的几种视图方式及切换方法，会预览网页；Dreamweaver 8时间轴的概念、时间轴中各元素的功能及时间轴的常用操作方法等。掌握：网页文档中添加文本和文本的格式化方法、插入日期和时间、插入水平线、设置网页的属性、插入图像、为页面背景添加图像、图像属性的设置、图像与文本的混合排版、设置图像的位置和边框、添加导航条等方法；表格和单元格的属性设置，会用表格组织网页的总体布局；使用布局视图规划页面的总体布局；超和超路径的基本概念；建立

12、超的操作方法，学会建立文本超；插入表单以及表单元素的方法；CSS样式表的基本概念，会使用CSS样式面板；【教学重点与难点】页面布局与设计【教学容】Dreamweaver 8简介 Dreamweaver 8操作界面 标题栏 菜单栏 工具栏 网页编辑窗口 状态栏 面板工具 站点的建立与管理 建立站点 管理站点 页面设计 页面属性设置 文本编辑 图像操作及应用 表格的使用 超 使用多媒体 层的使用 框架 样式表的创建与使用 库与模板 表单及其应用 行为与时间轴 案例解析 设计思路 案例结构 页面解析 【思考与实践】阅读以下代码，说明该页面文件的运行结果。课程表课程表星期一星期二星期三语文数学英语化学

13、物理逻辑阅读以下代码该，说明该页面文件的功能。考生，你好！欢迎光临本！建立本地站点，页面要求有导航栏、文字、图像以及站点的广告图像等（用鼠标经过图像来制作）在Dreamweaver建立表格，然后输入相关数据，使数据能够正常导出并且能够把其他数据导入到此表格中。VBScript脚本语言【教学目标】熟练掌握VBScript的语法规则、函数和三种基本结构；熟练掌握使用VBScript编写页面的方法；熟练掌握VBScript程序的事件处理；掌握文档对象的使用。【教学重点与难点】VBScript的数据类型，过程与函数及编程【教学容】VBScript概述 VBScript基本概念 在HTML网页中使用 V

14、BScript VBScript的数据类型 常量、变量与表达式 常量的定义 变量的声明与赋值 数组的定义 运算符与表达式 VBScript常用函数 数学函数 字符串处理函数 转换函数 日期时间函数 对话框函数 VBScript语句 条件语句 循环语句 VBScript过程与函数 Sub过程 Function函数 VBScript编程 Window对象 Document对象 案例实现 设计思路 案例结构 页面解析 【思考与实践】设计一个页面，提示输入N值，然后计算123N的值并显示。使用VBScript中的事件：页面中只显示一个“点击试一下”的按钮；当用户单击“点击试一下”的按钮后，弹出对话框，

15、显示“你成功了！”。编写一个页面，在状态栏中显示系统当前时间。编写一个求最大值的HTML页面，输入两个整数并求出较大者。利用Window对象的有关方法实现在状态栏显示滚动文本“欢迎光临！”。ASP动态网页设计【教学目标】理解ASP运行机制；熟练掌握ASP运行环境的搭建方式；熟练掌握ASP建对象的应用；熟练掌握利用ADO实现页面与数据库的连接；能够设计ASP动态页面。【教学重点与难点】利用ADO实现页面与数据库的连接及常用的ASP组件【教学容】ASP简介 ASP概述 ASP运行环境及工作原理 ASP文件的组成 ASP建对象 Request对象 Response对象 Server对象 Sessio

16、n对象 Application对象利用ADO访问数据库 SQL简介 ADO基本编程模型 Connection对象 Recordset对象 ASP组件技术 ASP置组件简介 常用第三方组件简介 案例解析 设计思路 案例结构 页面解析 【思考与实践】下面程序段执行完毕，页面上显示的容是什么？%Response.Write”Response.Write”Response.Write”%show.asp页面容包含如下脚本：如果在浏览器地址栏里输入这样的地址：show.asp?name=王丽&sex=女，则页面上会显示怎样的容？设计一个表单处理页面，文件名为test.asp。表单页面为exam1.htm

17、，运行该页面输入容并提交该网页后，会执行test.asp处理程序。test.asp的处理后，按如下格式输出信息：我的：性别：职业：exam1.htm网页代码如下：请填写个人信息：性别：男女职业：公务员教师金融从业者商人其他 设计一个页面，当用户第一次访问时，需要在线注册、性别等信息，然后把信息保存到Cookies中。当该用户再次访问时，则显示“某某，您好，您是第几次光临本”的欢迎信息。制作实例【教学目标】熟悉设计前期所需的准备工作；熟练掌握根据主题的需要来创建数据库；能够把握页面设计的主题要求，并了解制作完成后的测试与上传。【教学重点与难点】规划设计【教学容】规划设计 确定的主题和名称

18、 确定的CI形象 确定的栏目 确定的目录结构 确定的结构 的整体风格创意设计 首页的设计 在Dreamweaver中创建站点 计算机系设计实例 的规划设计 静态部分的实现 动态部分（留言板） 的实现的发布和维护 【思考与实践】建立一个db.mdb文件，其中有2个表employee和salary，分别存放员工信息和员工的薪水信息。Employee表至少包含EmployeeID（自动编号）、EmployeeName（文本）、EmployeeCation（文本）字段，salary表至少包含EmployeeID（数字）、CurrentSalary（数字）字段。两个表通过EmployeeID建立关系，并分别在两个表中输入一些数据。写两个页面，要求在第一个页面输入职工的编号，在第二个页面显示出该职工的编号、职称和薪水，并能通过页面上的返回第一个页面重新输入职工的编号进行查询。教学时数分配教学容学时分配合计讲课实验上机讨论/习题网页设计基础知识224HTML语言224Dreamweaver 8网页设计246VBScript脚本语言