《网页制作》教案

1、课程名称网页制作课时1序号1授课班级日期授课方式讲授课题网页设计概述任课老师目的要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴 趣。重点难点网页设计中的假设干术语。理解网页设计中的假设干术语。主要内容L 1 WWW 和 URL1. 1. 1 Web的起源Web是World Wide Web的简称，一般也称之为WWW或3W1. 1.2 Web的特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S （客户机/服务器）工作模式在浏览器和服务器之间应用 （Hyper Text Transfer Protocol, 超文本传输协议）作为网络应用层通信协议1.3 U

2、RLURL的完整格式协议:主机名或IP地址：端口号/路径名/文件名IE5的使用Web浏览器是浏览Internet资源的客户端软件在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、 Mosaic 等. 1 IE5的界面.2 IE5的使用网页中所使用的技术. 3. 1 HTML语言和XML语言1、HTML语言0HTML只使用SGML中很小一局部标记0HTML 语言（Hyper Text Markup Language 超文本标记语言）0HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编 辑，常用的网页制作软件如FrontPa

3、ge、Dreamweaver等实际上是 自动生成HTML源代码的工具2、XML语言XML （extensible Markup Language）.3.2动态网页很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。 2.7.6内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的 意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键 是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内 嵌表格代替。框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在 框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的

4、工具，熟练掌握表单中元素的标志和属性，是设计表 单网页关键。课程名称网页制作课时1序号5授课班级日期授课方式讲授课题HTML标志综合运用案例任课老师目的要求使学生能够书写简单的HTML网页。重点难点使用所学的HTML标志书写网页。HTML的综合运用。主要内容【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著铁道出版社。【新课内容】1、用记事本书写HTML网页。2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。【课后小结】HTML是目前制作网页时必须

5、掌握的一种语言，学好HTML语言是为以后对网 页设计这门课程更深入的学习打下扎实的基础。课程名称网页制作课时1序号6授课班级日期授课方式讲授课题Dreamweaver中简单WEB站点建立与管理任课老师目的要求使学生掌握网页制作工具Dreamweaver的基本操作方式。重点难点网页制作工具Dreamweaver的界面和基本基本操作。 掌握一个新的开发工具。主要内容Dreamweaver 概述Dreamweaver 的工作界面Dreamweaver4 的基本操作1、直接建立新网页“文件”- “新建” (Ctrl+N)2、翻开已有的网页“文件”一“翻开”3、保存编辑过的网页“文件”一“保存”，直接保

6、存“文件” i另存为，换名保存4、预览正在编辑的网页”文件,，一“在预览器中预览”5、设置网页属性修改一“页面设置”(1)标题(2)背景图像(3)背景色(4)文字颜色(5)超级链接颜色(6)左边界上边界(7)文件编码方式(8)网页蓝图6、导入Word文件“文件”一“导入,，一“导入 Word HTML”用Dreamweaver创立和管理站点1、创立本地站点“站点”一“新建站点”2、管理站点“站点”f “定义站点”3、上传和下载文件【课后小结】Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB 站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是

7、刚接触网页 设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和 强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的 网页设计有很大的帮助。课程名称网页制作课时1序号7授课班级日期授课方式讲授课题Dreamweaver中静态网页设计任课老师目的要求使学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、 架等的编辑。表格以及框重点难点通过对工具软件Dreamweaver的操作，制作出完整的静态页面。 了解静态网页的含义3.2在页面中加入文字和图像321文字的添加和处理(1)文字属性面板的使用3.2.2插入和优化图像(1)准备图

8、像把网页中所用到的图像文件预先拷贝到站点文件夹中(2)插入图像(3)设置图像属性(4)创立图像地图3.3超级链接的运用主要内容3.3.1插入超级链接(1)直接在属性面板的链接项填入链接的地址。(2)在属性面板单击浏览文件按钮翻开浏览窗口来选择链接的网页。(3)利用指向文件图标创立链接。3.3.2超级链接的运用(1)链接其他网站在链接栏填写URL选择目标网页显示的窗口。_blank、parent、_self _top(2)链接其他文件输入网页文件名外使用属性面板上的指向文件图标，创立内部链接(3)链接 E-mail直接在链接栏填写E-mail地址。利用对象面板插入E-mail(4)锚点链接建立锚

9、点：“隐藏” 一 “插入命令锚点” 一填入锚点的名称 建立锚点链接:在链接栏中输入符号和锚点名称。表格的应用表格的创立A.创立表格(1)使用菜单“插入” 一 “表格”。(2)单击对象面板上的子菜单中插入表格按钮。(3)按 CTRL+ALT+T 组合键。格元素(1)选取整个表格(2)选择行和列(3)选择单元格表格属性的设置1、表格整体属性设置2、行列和单元格属性设置在网页中创立表单A创立表单“插入” 一 “表单”使用菜单“窗口”调出“对象”面板，“表单” 一“插入”B添加表单元素(1)添加文本域“插入” 一 “表单对象” 一 “文本域”设置TextField,字符宽度，最多字符，类型(2)添加选

10、择域在表单中插入单项选择按钮。“插入” 一 “表单对象” 一 “单项选择按钮”在表单中插入复选按键。“插入”一“表单对象”一“复选钮”(3)添加列表和下拉式菜单(4)添加按钮(5)添加文件域【课后小结】了解静态网页的含义，利用Dreamweaver MX 2004的强大功能制作出各色各样 的页面，为以后的学习打下坚实的基础。课程名称网页制作课时1序号8授课班级日期授课方式讲授课题Dreamweaver中动态网页设计任课老师目的要求使学生掌握利用Dreamweaver作出简单的动态页面。重点难点理解动态页面的含义以及数据库的使用。 了解动态网页的含义。主要内容【教学参考】1、网页设计与制作杨尚森

11、曲宏山贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版 社。【新课内容】1、初识数据库与ASP2、建立数据库3、在Dreamweaver MX 2004中连接数据库4、绑定数据库5、显示记录6、添加记录7、修改记录8、删除记录课程名称网页制作课时1序号9授课班级日期授课方式讲授课题Dreamweaver综合性网页设计案例任课老师目的要求使学生掌握利用Dreamweaver作出简单的动态站点。重点难点动态站点的

12、制作流程。数据库的创立、连接与显示。主要内容【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著中国青年出版 社。【新课内容】1、制定网站设计方案。2、建立数据库。3、在 Dreamweaver MX 2004 中创立站点。4、在Dreamweaver MX 2004中连接数据库。5、发表、编辑、删除留言局部制作。6、管理留言课程名称网页制作课时1序号10授课班级日期授课方式讲授课题V

13、BScript 概述任课老师目的要求使学生对VBScript有个初步的了解。重点难点什么是VBScripto如何在HTML页面中添加VBScript代码。主要内容VBScript语言简介什么是 VBScriptVBScript是一种基于对象和事件驱动并具有平安性能的脚本语言。 具有以下儿个基本特点：(1)是一种脚本编写语言(2)是基于对象的语言(3)简单性(4)平安性(5)动态性(6)跨平台性VBScript程序运行和编辑环境运行:在任何安装IE或Navigator浏览器的计算机上编辑：可以用任何文本文件编辑器(如Notepad、WordPad WPS、DOS的EDIT命令等)进行编辑，也可以

14、用网页制作工具编辑把VBScript代码嵌入HTML文档把VBScript代码嵌入HTML文档SCRIPT Language =VBScript”, document, write(这是紫星的电脑世界) alert(这是紫星的电脑世界”);课程名称网页制作课时1序号11授课班级日期授课方式讲授课题VBScript的基本元素与输入输出任课老师目的要求使学生对VBScript这种开发语言的基本语法有个初步认识。重点难点VBScript的基本元素与输入输出。对VBScript的数据类型、常量、变量、运算符建立起基本概念。主要内容4.2 .基本数据类型数值(整数和实数)字符串型(用“号或括起来的字符或

15、数值)布尔型(使用True或False表示)空值VBScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明基本数据类型1、常量(1)整型常量可以使用十六进制、八进制和十进制表示。(2)实型常量由整数局部加小数局部表示，如12.32、193.98。使用科学或标准方法表示： 5E7、4e5 等。(3)布尔值只有两种状态：True或Falseo(4)字符型常量使用单引号”或双引号括起来的一个或几个字符。(5)空值(null)(6)特殊字符(以反斜杠()开头的字符串)2、变量变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。

16、 (1)变量的命名A、必须是一个有效的变量，即变量以字母开头，中间可以出现数字如testK text2等。除下划线“，作为连字符外，变量名称不能有空格、+、一、， 或其它符号。B、不能使用JavaScript中的保存字作为变量。(2)变量的类型(3)变量的声明及其作用域使用var关键字对变量作声明有全局变量和局部变量多媒体技术的应用Web服务器端程序1.4制作网页的基本方法1制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法1.4.2制作网页时要注意的问题1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同局部。3、对重点段落要强调

17、显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的 流程及了解相应开发工具，为设计网页做准备。4.2.表达式和运算符1、表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等.2、运算符(1)双目运算符和单目运算符双目运算符：操作数1运算符操作数2如 50+40、“This”+“that”等。单目运算符只需一个操作数，其运算符可在前或后。(2)算术运算符(3)比拟运算符(4)逻辑运算符3、注释符/,在本行中所有在“/”符号之后的字符将

18、被解释器忽略。/*/,在/*和*/之间的所有字符(可持续多行)将被解释器忽略。【课后小结】本节介绍了 VBScript的基本元素，包括VBScript的数据类型、常量、变量和运 算符，并且初步提到了 VBScript的输入输出基本语句，为下节课的内容作好准 备。课程名称网页制作课时1序号12授课班级日期授课方式讲授课题VBScript的条件语句、循环语句和过程任课老师目的要求使学生基本掌握对VBScript的基本语句语法格式和过程。重点难点VBScript的基本语句语法格式。VBScript的基本语句语法格式和过程过于概念化抽象化，学生掌握有难度。主要内容4.3 VBScript基本语句431

19、控制程序流程1、if条件语句if（表达式）语句段1;else 语句段2;）2、for循环语句for（初始化；条件；增量）3、while 循环while （条件）语句集；4、break 和 continue 语句break语句使得循环从for或while中跳出continue使得跳过循环内剩余的语句而进入下一次循环4.3.2函数函数可以封装那些在程序中可能要屡次用到的模块,并可作为事件驱动的结果而 调用的程序。从而实现一个函数与事件驱动相关联。事件可以是页面调入、单击、 表单送出等。课程名称网页制作课时1序号13授课班级日期授课方式讲授课题VBScript文档对象模型任课老师目的要求使学生掌握对

20、VBScript文档对象模型的理解和运用。重点难点什么是VBScript的文档对象模型。VBScript文档对象模型的灵活运用。主要内容4.4基于对象的VBScript语言对象的基础知识.对象的基本结构.引用对象的途径.有关对象操作语句for.in 语句用于对对象的所有属性进行操作的控制循环，它将一个对象的所有 属性反复赋值给一个变量，而不是使用计数器来实现。此语句无需知道对象 中属性的个数即可进行操作。with 语句说明要引用的对象，在该语句体内，任何对变量的引用被认为是这个对象的 属性的引用，这种方法可节省一些代码，防止引用混乱。使用形式为with objectthis关键词new运算符.

21、对象属性的引用(1 )使用点(.)运算符(2)通过对象的下标实现引用(3)通过属性名称字符串的形式实现引用对象的方法的引用静态对象，在引用该对象的属性或方法时不需要为它创立实例；动态对象，在引用它的对象属性或方法时必须为它创立一个实例。4.4.2常用对象的属性和方法字符串对象stringstring对象的属性该对象只有一个属性lengthString对象的方法锚点，anchor()有关字符显示的控制方法。Big, ItalicsO, bold(), blink(), small (), fixed(), fontsize(size)字体颜色方法。fontcolor(color)字符串大小写转换

22、。toLowerCase(), toUpperCase()字符搜索 o indexOfcharactor,fromIndex返回字符串的一局部字符串。ubstring(start,end)算术函数的math对象日期及时间对象date4.4.3 VBScript中的系统函数1、eval (字符串表达式)，返回字符串表达式中的值。如 test=eval(”8+9+5/2”)，返回的 test 值为 195 而不是字符串8+9+5/2”。2、unEscape (string),返回字符串 ASCII 码。3、escape(character),返回字符的编码。4、parseFloat(floustr

23、ing),返回实数。5、parselnt(numbestring ,radix),返回不同进制的数。radix是数的进制, numbestring是字符串数。创立新对象VBScript 中的数组4.5使用内部对象系统451浏览器中的对象1、文档对象的作用把文档中的链接、表单、标签等基本元素包装起来，提供给编程人员使用。2、文档对象中的属性alinkcolorlinkcolorvlinkColorbgcolorfgcolorLastModifiedLocationtitle3、 Document对象中的对象LinksAnchorsForms这三个对象分别组成各自的数组，网页中每个对象的数目包含在

24、属性length 中。4.5.2窗口元素的控制课程名称网页制作课时1序号14授课班级日期授课方式讲授课题ASP概述任课老师目的要求使学生掌握对“什么是ASP”有个基本的认识重点难点什么是ASP。又一个新的概念ASP要求学生掌握。主要内容ASP概述ASP 简介ASP的含义ASP (Active Server Pages,动态服务器网页)是一种基于服务器的编程技术， 它并不是一种脚本语言，它提供的只是一种服务器端的脚本环境。从某种意 义上说ASP是一种附加特性扩展了的HTML文件。ASP的特点纯文本文件设计方便与平台无关性较强的平安性扩充能力强访问数据库方便ASP的用途ASP可以实现计数器、留言本

25、、聊天室等应用程序。在网站中设计滚动显示的广告栏；从HTML的表单中接受信息并保存到数据库中；可以根据不同的访问时间显示不同的内容，以创立个性化的网页；在网页中添加计数器；根据用户的浏览器的版本和类型显示不同档次的内容；跟踪用户网站上的活动并存入日志文件。ASP的工作原理ASP工作的过程分为下面的几步：用户在浏览器的地址栏中输入要访问的主页地址并按回车键触发这个申 请。浏览器将ASP申请发送到含有IIS的Web服务器上。Web服务器接受这些申请并根据.asp的后缀意识到这是一个ASP文件。Web服务器从本地硬盘或内存读取适当的ASP文件，然后向特定的名为 ASP.DLL程序发送文件。Web服务

26、器将ASP文件从头到尾执行并根据命令要求生成标准的HTML 文件，并将生成的HTML文件传送给浏览器。 传送回来的HTML文件将被用户的浏览器所解释，并将其结果显示在用 户的浏览器上。课程名称网页制作课时1序号15授课班级日期授课方式讲授课题使用ASP对象任课老师目的要求使学生掌握对ASP对象的使用方法。重点难点什么是ASP的对象。每种对象的运用都不相同。主要内容5.2 ASP的内置对象Request 对象.利用form集合获取数据.利用QueryString集合获取数据.2.2 Response 对象.向浏览器输出数据(Response.write).文字打字效果.清除数据(Response

27、.Clear).使网页转向(Response.redirect).停止向浏览器输出数据(Response.end)Application 对象Session 对象Server 对象Server对象提供对服务器上的方法和属性进行的访问，最常用的方法是创立 ActiveX组件的实例。其他方法用于将URL或HTML编码成字符串,将虚 拟路径映射到物理路径以及设置脚本的超时限期。.向浏览器输出HTML代码的方法(Server.HTMLEncode).取得文件路径的方法(Server.MapPath).设置脚本运行时间课程名称网页制作课时2序号16授课班级日期授课方式讲授课题使用ASP组件任课老师目的要

28、求使学生掌握对ASP组件的使用方法。重点难点什么是ASP的组件。过多的组件使学生掌握起来需要花费很多精力和时间。主要内容5.3 ASP的内置组件文件访问组件1、文件操作组件.文件的处理3、对文件夹和驱动器进行操作广告轮播组件1 Ad Rotator组件的属性浏览器信息组件Browse Capabilities组件的主要属性Browse Capabilities组件的工作原理使用Browse Capabilities组件前必须先创立该组件实例。Set 实彳列 g=Server.CreateObject( MSWC.BrowserType )内容链接组件课程名称网页制作课时2序号17授课班级日期授

29、课方式讲授课题使用ADO对象任课老师目的要求使学生掌握对ADO对象的使用方法。重点难点什么是ADO对象。如何运用ADO访问数据库。主要内容5.5 ADO数据对象Connection 对象 Connection对象的方法Open方法Execute 方法Close方法BeginTrans 方法CommitTrans 方法RoolbackTrans 方法2、Connection对象的属性Recordset 对象1、Recordset对象的h法Open方法“)Close方法Move方法Update方法CancelUpdate 方法UpdateBatch 方法CancelBatch 方法AddNew方法

30、Delete方法Command 对象1 CreateParameter 方法2、Excute 方法3、Command对象所提供的属性包括ActiveConnection 属性、CommandText 属性、CommandType 属性、CommandTimeout 属性、Name 属性、State 属性以及 Prepared 属性课程名称网页制作课时1序号18授课班级日期授课方式讲授课题设计实例一一论坛任课老师目的要求使学生掌握ASP网站的制作方式及其流程。重点难点一个简单ASP网站的制作方式及其流程。要求学生综合运用所学过知识。主要内容【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著 电

31、子工业出版社。2、WEB网站设计张锦祥主编 科学出版社。3、网页编程技术与实例谭浩强主编 人民邮电出版社。4、ASP数据库系统开发实例导航宣小平 但正刚 张文毅编著 人民邮电 出版社。【新课内容】1、论坛系统功能概述2、创立数据库3、查看主题4、发表主题5、保存主题6、回复主题7、保存回复课程名称网页制作课时1序号19授课班级日期授课方式讲授课题使学生进一步掌握ASP网站的制作。任课老师目的要求使学生进一步掌握ASP网站的制作。重点难点一个稍复杂ASP网站的制作方式及其流程。要求学生加深对动态网站的理解。主要内容【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著 电子工业出版社。2、WEB网

32、站设计张锦祥主编 科学出版社。3、网页编程技术与实例谭浩强主编人民邮电出版社。4、ASP数据库系统开发实例导航宣小平 但正刚 张文毅编著 人民邮电 出版社。【新课内容】1、成绩管理系统功能概述。2、创立数据库。3、用户验证。4、学生资料管理。5、课程设置管理。6、成绩数据管理。课程名称网页制作课时1序号2授课班级日期授课方式讲授课题HTML的基本标志与格式标志任课老师目的要求使学生标志对与格式标志对的使用。重点难点格式标志的使用。列表标志的使用。主要内容HTML文档的基本结构HTML 语法1、双标记语法：标记内容/标记2、单标记语法：v标记最常用的单标记是vBR3、标记属性语法标记属性1属性2

33、属性3 . 例子4、注释语句格式!-注释文字例子!-由这处开始是产品订购表格HTML文档的基本结构【课后小结】通过本次课的学习，要求能熟练掌握网页面的基本标志与格式标志，并能灵活运用列表，有序列表，无序列表标志及属性。课程名称网页制作课时1序号20授课班级日期授课方式讲授课题网站的设计、制作、发布和宣传任课老师目的要求使学生完全了解一个网站建设的全部过程。重点难点网站建设的基本流程和考前须知。 网站的创意设计。主要内容【教学参考】1、网页设计与制作杨尚森曲宏山贾文峰等著电子工业出版社。2、WEB网站设计张锦祥主编 科学出版社。【新课内容】1、网站的美化管理。2、网站的创意构思。3、网站的规划。

34、4、网站的整体设计和分工。5、网站的发布。6、网站的后期管理和维护。课程名称网页制作课时1序号3授课班级日期授课方式讲授课题HTML的文本、图片与超级链接标志任课老师目的要求*使学生了解标题元素，掌握字体，上下标,及特殊字符的标志。*使学生掌握图片标志，声音标志及相应的属性,学会利用标志在网页中插入 声音与图片。*使学生掌握超级链接标志的使用。重点难点字体、图片和超级链接标志的使用。网页中特殊符号的输入。理解特殊符号对应的标志。理解img标志中属性的意义。理解书签超级链接的意义。主要内容2.2插入文字划分段落格式 段落内容 插入标题文字格式标题内容v/H?字号属性设置基准字号：BASEFONT

35、 Size=数值网页内的其他文字，采用下面的格式来定义FONT Size=数值Size的有效范围是1 （最大）到7 （最小）。如果在Size的值前面带上“十”号 或“，号，那么表示相对于基础字体增大或减小假设干字号。颜色属性两种方式BODY text=#RRGGBB” 字符串 字体属性v/FONT文本修饰B,文字以粗体显示。1,文字显示为斜体。U,显示下划线。STRIKE,中心线贯穿文字。EM,强调文字，通常用斜体。,特别强调的文字，通常用黑体。,以等宽体显示西文字符。,使文字大小相对于前面的文字增大一级。,使文字大小相对于前面的文字减小一级。,使文字成为前一个字符的上标。,使文字成为前一个字符的下标。,使文字显示为闪烁效果。文本修饰预格式化文本使用预格式化标记不再忽略在此之间的空格、制表符与回车符等元素转义字符与特殊字符一般转义符都是以开始，以“；”结束，一个转义符之间不能有空格文本强制换行和不换行文本强制换行不换行插入水平线使用标记属性：Width, Size, Align, Noshade, color2211