《动态网页制作与编程1基础知识.ppt》由会员分享,可在线阅读,更多相关《动态网页制作与编程1基础知识.ppt(66页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、动态网页制作与编程动态网页制作与编程孟宇龙孟宇龙孟宇龙孟宇龙哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院哈尔滨工程大学计算机科学与技术学院课程概况目标:能较熟练地使用Dreamweaver+ASP进行动态网页设计24学时:14+102本次课程主要内容相关基础知识相关基础知识什么是网页和网站什么是网页和网站网页的分类网页的分类 网页中的常用术语网页中的常用术语 网页设计的相关知识网页设计的相关知识服务器、网页与客户端浏览器的关系服务器、网页与客户端浏览器的关系 B/S结构动态网页开发平台和工具IIS ASP,JSPASP,JSP Drea
2、mweaverDreamweaver DBDB一个简单的例子一个简单的例子3什么是网页网页是由HTML(超级文本标识语言)或者其他语言编写的,通过IE浏览器编译后供用户获取信息的页面,它又称为Web页,其中可包含文字、图像、表格、动画和超级链接等各种网页元素。4什么是网站 网站就是一个或多个网页的集合。从广义上讲,网站就是当网页发布到Internet上以后,能通过浏览器在Internet上访问的页面。门户网站职能网站专业网站个人网站 5网页的分类 按所处位置分类 按表现形式分类 6按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类。7按表现形式分类 按网页的表现形式可将网页分为
3、静态网页和动态网页。8Web常用术语常用术语 URL(Uniform Resource Locator):即统一资源定位器,是一种唯一标识Internet上计算机、目录和文件的位置的命名规则。它由资源类型、存放资源的主机地址和端口以及资源目录和文件名构成。具体如下:资源类型表示信息传输的协议,如http、ftp等。主机地址即为提供资源的主机IP地址或域名地址。端口表示某一服务器在该主机上所使用的TCP端口。目录表示提供服务的信息资源所在的目录。文件名由基本文件名和扩展名两部分构成。例如:例如:http:/:80/study/default.html资源类型资源类型 主机地址主机地址 端口端口
4、目录目录 文件名文件名9Web常用术语(续上)常用术语(续上)HTTP(Hypertext Transfer Protocol):):超文本传输协议,是Internet上访问WWW信息资源的一种协议,用来传输多媒体信息。HTML(HyperText Markup language):):超文本标记语言,是一种描述文档结构的语言,而不能描述实际的表现形式。HTML语言使用描述性的标记符(称为标签)来指明文档的不同内容。10WEB服务器技术Microsoft IIS 5.0(6.0)PWSAPACHE思考问题:1.如何来选择使用?2.一台服务器中如果安装两种WEB服务器软件时应注意什么?11网页设
5、计的相关知识 设计网页的原则 网页设计的一般步骤 网页制作的常用工具 12设计网页的原则整体规划 鲜明的主题善用图像醒目的导航及时更新易记的网站名称通用网页动画适量 13网页设计的一般步骤 规划网站收集整理资源配置站点创建页面测试站点发布站点 维护、更新站点14网页制作的常用工具 网页设计软件:Dreamweaver图像处理软件:Fireworks或Photoshop。动画制作软件:Flash。15静态网页和动态网页这里说的动态网页,与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系,动态网页也可以是纯文字内容的,也可以是包含各种动画的内容,这些只是网页具体内容的表现形式,无论网页
6、是否具有动态效果,采用动态网站技术生成的网页都称为动态网页。从网站浏览者的角度来看,无论是动态网页还是静态网页,都可以展示基本的文字和图片信息,但从网站开发、管理、维护的角度来看就有很大的差别。16静态网页和动态网页-续上静态网页使用语言:HTML(超文本标记语言)动态网页使用语言:HTMLASP 或 HTML PHP 或 HTMLJSP 等 程序是否在服务器端运行,是重要标志在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页 17动态网页特征(1)动态网页一般以数据库技术为基础,可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功
7、能,如用户注册、用户登录、在线调查、用户管理等;(3)动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页。18 万维网万维网(WWW)(WWW)是一种主从式的分布式计算机结是一种主从式的分布式计算机结构,由网络中无数的网站与浏览器组成。网站通构,由网络中无数的网站与浏览器组成。网站通过存储和解析网页内容提供各种客户端浏览器过存储和解析网页内容提供各种客户端浏览器(如如Internet Explorer)Internet Explorer)的网页浏览服务。的网页浏览服务。网站服务器软件会在完成对某一个网页内容网站服务器软件会在完成对某一个网页内容的解析工
8、作后,将解析的结构回馈给网络中要求的解析工作后,将解析的结构回馈给网络中要求访问该网页的浏览器。下图中所示的关系,描述访问该网页的浏览器。下图中所示的关系,描述了服务器、网页和浏览器之间的部分关联了服务器、网页和浏览器之间的部分关联。服务器、网页与客户端浏览器的关系 19B/S结构(Browser/Server)B/S结构下,用户工作界面是通过浏览器来实现结构下,用户工作界面是通过浏览器来实现,极少部分事务逻辑在前端极少部分事务逻辑在前端(Browser)实现实现,主要事主要事务逻辑在服务器端务逻辑在服务器端(Server)实现实现,server端访问数端访问数据库据库,形成所谓三层结构形成所
9、谓三层结构 20动态网页开发平台与工具-IISIIS(Internet Information Server)是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。最初是Windows NT版本的可选包,随后内置在Windows 2000、Windows XP Professional和Windows Server 2003一起发行,在Windows XP Home版本上并没有IIS。是在Server上建立Internet服务器的基本组件 IIS支持与语言无关的脚本编写和组件21ASPASP(Active Server Pages)活动服务器页面。是微软公司开发的一种服
10、务器端脚本编写环境,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。可以用来创建和运行动态网页或Web应用程序 ASP的网页文件的格式是.asp 特点:功能强大、简单易学(适合初学者 _)它只能在Windows平台下使用,但是也可以通过增加控件而在Linux下使用,目前使用最多的是ASP.NET。22JSP JSP(Java Server Pages)是由Sun公司倡导、许多公司参与并一起建立的一种动态网页技术标准,其为创建动态的Web应用提供了一个独特的开发环境。23ASP最大的好处是除了可以包含HTML标记外,还可以直接访问数据库,并可以通过ASP的组件和对象技术,使用可无限
11、扩充的ActiveX控件进行动态网页的开发。ASP与JSP的比较24由于微软市场政策的原因,ASP在使用上有一定的局限性ASP只能运行在微软的操作系统平台下,其工作环境只能是微软的IIS和PWS(Pesoner Web Server,个人Web服务),同时,ActiveX控件也对于操作平台有所依赖,因此,这种方案对于跨平台的服务不能提供良好支持。ASP与JSP的比较25相对来说,SUN推出的JSP(Java Server Pages,Java服务页)解决了这一问题,它具有更好的跨平台支持。JSP可以支持超过85%以上的操作系统,除了Windows外,它还支持Linux、UNIX等,JSP被认为
12、是当前最有前途的动态网站技术。ASP与JSP的比较26与ASP由微软独自开发不同,JSP是由SUN公司所倡导,众多公司参与,一起建立的一种动态网页技术标准。由于它是基于Java技术的动态网页解决方案,具有良好的可伸缩性,并且与Java Enterptise API紧密结合,因此在网络数据库应用开发方面有得天独厚的优势。ASP与JSP的比较27IIS与ASPIIS是网页发布的服务平台ASP是一种网页编程语言ASP编写的网页程序放置于WEB服务器上,该服务器需要配置IIS才可以将ASP网页发布出去以供其它浏览器(IE)进行浏览28Dreamweaver Dreamweaver 是美国Macrome
13、dia公司开发的集网页制作和管理网站于一身的网页制作软件。Dreamweaver 8是Dreamweaver 系列产品的较新版本。29Dreamweaver30ASP与DWASP是网页的一种编程语言,一般来说,任何文本编辑器工具都可作为ASP的开发工具,只要编写完毕后存成后缀为.asp的文件即可。对于初学者而言,最简单最好使用的就是系统自带的记事本程序。当然,要想开发一些大型的Web应用程序,最好还是使用一些专门的开发工具,如Microsoft Visual InterDev以及Dreamweaver 等。网上也提供一些很好用的ASP开发小工具,如UltraEdit等DW是一个功能强大的网页编
14、写工具31数据库基础知识 数据库概念 常用数据库 Access SQL Sever My SQL Oracle 创建常用数据库开发环境 32数据库概念 数据库是相互关联的数据的集合,对这些数据进行处理的软件系统就叫数据库管理系统。数据库管理系统功能十分强大,不仅能对数据进行编辑或数字运算,还能对数据进行搜索、筛选、提取等管理。数据库和数据库管理系统的结合就称为数据库系统。33Access Access是Microsoft公司开发的一款入门级的数据库管理系统,广泛应用于大量网站中。它具有简便易用、消耗资源少、支持SQL指令最齐全的优点,因此使用Access作为网站的数据库系统是很多网页设计者的首
15、选,尤其是初级用户。34SQL Sever SQL Server也是Microsoft公司推出的数据库管理和开发软件,一般用于管理大中型数据库。SQL Server是网站后台数据库的首选,它具有使用方便和良好的可扩展性等诸多优点,特别是它支持各种处理系统,包括便携式系统和多处理器系统,这一点只有Oracle和其他一些昂贵的数据库才具有。在创建大型的网络数据库时,SQL Sever是相当不错的选择。35Oracle Oracle是主导的大型关系型数据库,它不仅支持多平台,还具有无范式要求、采用标准的SQL结构化查询语言。适合制造业管理信息系统和财务应用系统。36简单总结网站网页设计和编写网页的工
16、具、语言B/S结构数据库37一个简单的例子配置环境编写程序发布网页38运行环境及安装如果只是用HTML设计网页,并不需要特殊的环境,直接在浏览器上浏览即可。而用ASP设计的网页是在服务器端运行的,因此必须配置相应的运行环境。ASP的运行环境可以选择如下安装:的运行环境可以选择如下安装:如果是在Windows 95/98平台上运行ASP文件,需要安装个人Web服务器PWS。如果是在Windows 2000/XP/7平台上运行ASP文件,由于其已内置了IIS 5.0以上版本,故只需添加其IIS组件即可。下面以下面以Win XP为例,介绍如何添加为例,介绍如何添加IIS 5.0组件。组件。39运行环
17、境及安装运行环境及安装(续上)(续上)具体安装步骤如下:具体安装步骤如下:选择“开始设置控制面板”命令,在“控制面板”窗口中,双击“添加或删除程序”图标,出现如图所示的窗口。40运行环境及安装(续上)运行环境及安装(续上)双击“添加/删除Windows组件”图标,打开“Windows组件向导”对话框,如图所示。41运行环境及安装运行环境及安装(续上)(续上)选中“组件”列表框中的“Internet信息服务(IIS)”复选框。并根据需要选择其他组件,然后单击“详细信息”按钮,打开如图所示的对话框。在IIS的子组件列表中选择所需组件,选择完毕后单击“确定”按钮,返回“Windows组件向导”对话框
18、。42运行环境及安装运行环境及安装(续上)(续上)单击“下一步”按钮,此时安装程序要求插入光盘来读取需要的文件,当放入Windows 2000光盘(此时我们使用安装文件)后,单击“确定”按钮,此刻安装程序开始复制文件并进行配置IIS,如图所示。43运行环境及安装运行环境及安装(续上)(续上)文件复制完成后,出现如图所示的对话框。单击“完成”按钮即可。44运行环境及安装运行环境及安装(续上)(续上)当IIS安装完成后,单击鼠标右键“我的电脑”选择“管理”,打开“计算机管理”对话框,找到“Internet信息服务”选项中的“默认Web站点”,如图所示,该服务已经启动,此时只需在IE浏览器地址栏中输
19、入“http:/localhost”,即可看到如右图所示的画面。45创建虚拟目录创建虚拟目录当Web服务器启动后,只要将ASP文件放在其默认主目录“C:Inetpubwwwroot”下即可运行。但为了调试方便,往往需创建一个虚拟目录。所谓虚拟目录,就是在URL地址中使用的目录名称,或称之为URL映射,其可以与物理目录相同,也可以不同。46创建虚拟目录创建虚拟目录下面以下面以Windows XP为例介绍如何创建虚拟目录。为例介绍如何创建虚拟目录。具体操作步骤如下:具体操作步骤如下:首先,在计算机上创建一个文件夹,比如D:ASPWEB。其次,打开“Internet信息服务”对话框(方法见上)。47
20、创建虚拟目录创建虚拟目录(续上)(续上)选中“默认Web站点”,单击右键,选择“新建虚拟目录”,出现如图所示安装向导对话框。48创建虚拟目录创建虚拟目录(续上)(续上)在向导过程中,依次输入相应内容:别名“MYASPWEB”、目录“D:ASPWEB”以及权限“至少包含读取和运行脚本”后,单击“完成”按钮即可,此时如图所示。49创建虚拟目录创建虚拟目录(续上)(续上)选中“MYASPWEB”,单击右键,选择“属性”,出现如图所示对话框,可以对虚拟目录重新设置。50创建虚拟目录创建虚拟目录(续上)(续上)单击“文档”选项,可以添加新的默认文档,如index.htm或index.asp,并可以调整其
21、先后顺序,如图所示。至此,虚拟目录就创建完成了,以后课程中所有的例至此,虚拟目录就创建完成了,以后课程中所有的例子,只要存放在该目录下即可进行调试运行。子,只要存放在该目录下即可进行调试运行。51一个简单的例子 选择“开始程序附件记事本”命令,以启动记事本程序。在记事本程序窗口中,输入以下内容:从“文件”菜单中选择“保存”命令,将弹出“另存为”对话框,选择一个保存位置,如前面设置的名为MYASPWEB虚拟目录下的chapter1子文件夹,并将文件类型改为“所有文件”,同时在“文件名”框中输入“exam1.asp”,单击“保存”按钮。52一个简单的例子 打开IE,在地址栏中输入“http:/lo
22、calhost/MYASPWEB/chapter1/exam1.asp”,程序运行结果如图所示。53ASP文件的基本构成和约定文件的基本构成和约定1.基本构成基本构成 从上述这个简单的ASP程序中,经分析发现,通常由以下3个部分构成:普通的HTML文件,即一般的Web页面内容放在内的Script脚本语言代码,由服务器端运行。放在 内的Script脚本语言代码,由客户端直接运行。54ASP文件的基本构成和约定文件的基本构成和约定2.约定 在ASP中,默认语言是VBScript,若要使用其他的脚本语言,可以采用以下方法切换:或或%Language=JavaScript%3.在ASP中,VBScript脚本语言中的用户界面函数(如InputBox和MsgBox)只能在客户端 使用,而不能服务器端中使用。在在ASP中,中,VBScript脚本语言不区分大小写,而脚本语言不区分大小写,而JavaScript则区分大小写。则区分大小写。55在DW 中设置ASP服务器站点在完成上述ASP本地计算机环境构建的工作后,下面介绍在DW中配置用于ASP开发的站点环境,以及利用DW进行站点管理的必要知识。56续上57续上58续上59续上60续上61续上62续上63续上64续上65本次课程总结相关知识B/S结构IIS,ASP,Dreamweaver一个简单的例子 66