第1讲 动态网页设计技术概述
《动态网页技术》PPT课件
JavaScript脚本可放在HTML文件中的任意位置，在浏览器读到后就会解释执行。
JavaScript中区分大小写
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript脚本中的数据类型
JavaScript中可使用六种类型的数据，分别是:字符串、数值数据、对象 、布尔值（true、false）、空( null) 和 未定的数据类型。
通常将执行Applet的浏览器称为Applet容器，在Java 2软件开发工 具包1.4.1版中也包含一个用于测试的Applet容器，这就是 appletviewer。目前，有的Web浏览器不能直接支持Applet，如IE 浏览器，必须安装相应的Applet插件才能支持；真正支持Applet的 浏览器是Netscape7，可从 /ns/browsers/download.jsp站点下载。
§3 动态网页技术 §3.2 客户端脚本
3.2.1 JavaScript脚本与实例
JavaScript几个实例
例4：改变窗口状态行内容的动态网页
<html> <head> <script language="JavaScript"> <!-- Hide var scrtxt="怎么样! 很酷吧! "; var lentxt=scrtxt.length; var width=100; var pos=1-width;
第3章 动态网页技术
§3 动态网页技术 §3.1 动态网页的含义
动态网页与静态网页的特征比较
静态网页
内容固定不变，不随客户访问要求的改变而改变； 页面文件预先储存在Web服务器上； 通过超链接来访问其它的网页； 可含有动画的内容
动态网页设计(ASP)概述精品PPT课件
HTML 文档
根据用户请求的文 件（1.asp），执行 程序，并将执行结 果生成标准HTML 文档
动态网页程序设计
4、ASP的特点：
❖ 与HTML融合在一起； ❖ ASP是一种服务器端指令，应用程序无需编译，部署在WEB服务器端执行。 服务器将执行结果转换为HTML文件，传送给浏览器。 ASP的源程序不传到浏 览器，避免源程序被剽窃 ； ❖ ASP采用B/S结构，服务器端需要搭建支持ASP的WEB服务器，对客户端无 要求，客户端界面统一为浏览器，几乎支持任何一种浏览器； ❖ ASP采用面向对象的编程方法，提供了几种内置对象，每个对象有各自的属 性、方法、集合，设计人员根据需要调用。
开发技术大致可分为静态和动态两种。
浏览器
HTTP
LAN/WAN
WWW服务器
HTMN/WAN 服务器
WWW服务器
概述
动态网页程序设计
一、ASP简介： 早期Internet的Web网页只是静态的图文（HTML）组合，浏览者 只能在网页上阅读信息，无法进行信息查询、电子商务、论坛发言、数据库管
引言
动态网页程序设计
一、WWW的概念： 1、WWW简介：是一种开放式的超文本应用，用户可以通过它查找和检索
Internet上的资源。（最主要的Internet 2、采用的协议：HTTP（建立通信—发出请求—给出响应—结束通信）
3、WWW的结构：B/S，每次信息交换都要涉及到客户端和服务器端两个层面。
例：编写ASP应用程序，返回当前日期及星期。
<% @ language=vbscript %>
<html><body> 今天为<% response.write(date()) %>
动态网站设计概述
动态网站设计概述【摘要】：动态网站是满足多样化需求的必然趋势，本文以下内容将对动态网站设计进行论述和探讨，以供参考。
【关键词】：动态；网站；设计；概述1、前言在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，它在人们的政治、经济、生活、娱乐等各个方面发挥着重要的作用，因此网站建设在Internet应用上的地位越来越重要。
本文是基于平台的动态娱乐网站的设计和实现，该网站主要由新闻发布、音频服务、用户登录注册、娱乐论坛和后台管理五大模块组成，实现了一般娱乐网站应具有的基本功能，同时也考虑了网站的安全性。
2、网站概要设计2.1、网站结构设计根据网站开发的目的以及上面获得的需求分析，将网站的内容划分为以下几个方面：1) 新闻发布模块。
新闻分成多种类别，以标题或者图片的形式显示，按照更新时间的降序进行排序。
所有用户可以浏览本站的娱乐新闻，并根据自己的需要对新闻进行搜索。
2) 音频服务模块。
用户可以享受网站提供的歌曲下载、歌曲在线播放等服务。
3) 用户登录注册模块。
用户通过注册，可以成为网站的合法用户，并享受网站提供的特别服务。
4) 娱乐论坛模块。
娱乐论坛是网站提供给用户的一个信息交流平台。
只有注册用户才可使用。
5) 后台管理模块。
后台管理是为管理员提供了一个方便操作数据库的平台。
管理员可以对用户、新闻、音频文件以及论坛文章信息进行管理。
2.2 网站布局设计网页是网站构成的基本元素，网页的精彩与否，除了色彩的搭配、文字的变化、图片的处理等这些不可忽略的因素外，还有一个非常重要的因素——网页的布局。
通常有三种网页布局技术：层叠样式表、表格、框架。
2.3 网站视觉设计2.3.1 网站风格设计网站风格是一个抽象的概念，是指站点的整体形象给浏览者的综合感受。
这个“整体形象”包括网站的CI、版面布局、浏览方式、视觉效果等。
风格是独特的，是站点不同于其它网站的地方，通过网站的外表、内容、文字以及交流，可以概括出一个站点的个性。
第三章_第一讲_动态网页技术
<html> <head> <title>一个使用到if条件语句的Javascript示例</title> </head> <body> <script type="text/javascript"> var vText = "What's up?"; var vLen = vText.length; if (vLen < 100) { document.write("<p> 该字符串长度小于100。</p>"); } </script> </body> </html>
可含有动画的内容
动态网页
内容随客户访问要求的改变而改变； 内容的生成可在客户端完成（通过客户端脚本、Applet、JavaScript），也可在服务器端完成（通 过服务器端脚本，如JSP、ASP、PHP）; 能与用户进行交互，根据不同客户请求来生成不同的页面内容； 是连接商务表达层和商务逻辑层的桥梁； 也可含有动画的内容
JavaScript脚本可放在HTML文件中的任意位置，在
浏览器读到后就会解释执行。 JavaScript中区分大小写（***HTML不区分）
<html> <head> <script language="JavaScript"> <!-document.writeln("JavaScript脚本示例！"); //--> </script> </head> <body> 程序中使用了JavaScript语句， 语句中使用了document.writenln函数 </body> </html>
动态网页基础知识
动态网页与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。
一、动态网页概念动态网页是指应用程序在接收浏览器的请求而更改网页内容的网页，而不是在网页上加入Java，JavaScript等脚本来实现的动态效果或Flash动画，虽然这些动画实现了网页的“动”，但其本质还是静态的，因为它没有随着浏览器的请求而跟着变化。
动态网页是与静态网页相对应的，一般以.asp、.isp、.php、.per、.cgi等形式为后缀。
动态网页可以是纯文字内容的，也可以是包含各种动画的内容，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。
从网站浏览器的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。
二、动态网页特征动态网页技术有自身的特征和优势，简单来说有以下几点：动态网页是以数据库技术为基础，因此能够大大降低网站维护的工作量了；采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等多种功能的集成，实现与Web服务器进行交互；动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；可以实现与HTML以外的文件进行交互；可缩短查询时间，提高浏览效率。
三、动态网页技术1、动态网页技术简介及特点早期的动态网页主要采用CGI（公共网关接口）技术，可以使用VB、Delphi或C++等程序编写CGI程序。
但是由于CGI技术编程困难、效率低下、修改复杂等缺陷已经逐渐被新技术所取代。
这些新技术主要指ASP、PHP和JSP技术在动态网页开发中的应用。
PHP、ASP和JSP都是一个进程处理多个请求的，无论多少人在线，都只有一个进程，执行效率相比于CGI要高得多。
动态网页技术
动态网页技术动态网页与静态网页相对而言的，所谓“动态”，并不是指在网页中添加一些动感元素（如GIF图片、Flash等）。
动态网页技术具有很好的交互性、自动更新等，无须手动更新网页内容，会根据添加的内容自动生成新的页面。
下面我们来介绍一下，目前经常使用的一些制作动态网页的开发语言。
1 ASP技术ASP（Active Server Page，意“动态服务器页面”）是微软公司开发的代替CGI 脚本程序的一种应用，它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。
ASP网页文件，以.asp为扩展名，现在常用于各种动态网站中。
从ASP诞生到现在已经15年的历史了，ASP发生了重大的变化，直到现在的。
早期，制作一个简单的动态页面需要编写大量的C语句代码才能完成，这样对于开发的难度比较大。
而ASP诞生之后，通过VBScript简单脚本语言，实现嵌入在HTML网页中的代码，使设计动态网页设计变成一件轻松的事情。
ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。
ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。
利用ASP可以向网页中添加交互式内容。
与HTML相比，ASP网页具有以下特点：●可以实现突破静态网页的一些功能限制，实现动态网页技术；●ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试；●服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上；●ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。
●ASP可以使用服务器端ActiveX组件来执行各种各样的任务，如存取数据库、发送Email或访问文件系统等。
●由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，很难看到ASP所编写的源代码，可防止ASP程序代码被窃取。
●方便连接ACCESS与SQL数据库。
2 PHP技术PHP（Hypertext Preprocessor，即超级文本预处理语言）是一种HTML内嵌式的语言，与ASP非常相似。
动态网页制作简介
动态网页制作简介冯永曜黄山村夫动态HTML（即 DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。
国内网络界也掀起了一股学习动态HTML的热潮。
所谓动态网页就是采用动态HTML 制作出来的具有动态效果的网页。
有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。
实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、Document Object Model（文件目标模块）、Layers和 Cascading Style Sheets（CSS）等。
那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。
比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。
这就是说，HTML中能够做的一切在网页下载后还能够做。
动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。
比较常用的技术有：（l）脚本编程语言（Javascript， VBScript）（2）文件目标模块（DOM）（3）层叠样式表（CSS）（4）动态图层（layers）Netscape Communicator 4．0以上版本和 Microsoft Internet Explorer（IE） 4．0以上版本，都宣称支持这种最新的动态HTML功能。
但实际上，他们所支持的动态HTML 内容并不完全相同。
IE 4.0所支持的动态 HTML包括以下几部分：（1）层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。
在网页下载完毕后，可动态地改变页面元素的CSS属性。
（2）动态内容（ Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。
动态网页制作
动态网页制作什么是动态网页？动态网页是相对于静态网页而言的。
静态网页是指页面内容在被访问时固定不变的网页，而动态网页则是指在被访问时可以根据用户的需求和数据的变化来动态地生成内容的网页。
动态网页可以实现用户交互、数据处理和更新等功能，为用户提供更加丰富、个性化的网页体验。
动态网页制作的基本原理动态网页制作主要涉及前端开发和后端开发两个方面。
前端开发主要负责界面设计、用户交互和页面效果的实现，而后端开发则是负责处理数据请求和业务逻辑的实现。
前端开发HTMLHTML是网页的基础语言，用于定义网页的结构和内容。
在动态网页制作中，HTML通常用于定义页面的布局和基本结构。
CSSCSS用于为网页添加样式和布局，可以对HTML元素进行样式设置和排版。
通过CSS，可以实现网页的美化和页面效果的实现。
JavaScriptJavaScript是一种脚本语言，用于实现网页的动态交互和逻辑控制。
通过JavaScript，可以修改页面内容、响应用户操作、发送数据请求等。
后端开发服务器端语言服务器端语言主要用于处理数据请求和业务逻辑的实现。
常见的服务器端语言有PHP、Python、Java等。
服务器端语言可以访问数据库、处理表单数据、生成动态内容等。
数据库数据库用于存储和管理网站的数据。
在动态网页制作中，常见的数据库有MySQL、SQLite等。
通过数据库，可以实现数据的存储、查询和更新等操作。
动态网页制作的流程动态网页制作的流程通常包括需求分析、界面设计、前端开发、后端开发和测试等步骤。
1.需求分析：需求分析是明确制作动态网页的目标和功能需求。
通过与客户或用户的沟通，了解他们的需求和期望，并根据需求确定网页的功能和交互方式。
2.界面设计：界面设计是将需求转化为可视化的网页界面。
根据需求分析的结果，设计网页的布局、样式和交互方式。
3.前端开发：前端开发是实现网页界面和交互效果的过程。
根据界面设计的结果，使用HTML、CSS和JavaScript等技术进行网页开发，实现页面的布局、样式和交互。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
动态网页：
•动态网页是指在接到用户访问请求后，动态生成的页面，页面 内容会随着访问时间和访问者发生变化。动态网页一般是在服务 器端运行的程序、网页。动态网页的内容只有当用户请求时服务 器才返回一个完整的网页。动态网页的URL后缀通常为.asp .jsp .php等。 •动态网页以数据库技术为基础，可以大大降低网站维护的工作 量。 •采用动态网页技术的网站可以实现更多的功能，如用户注册、 用户登录、搜索查询、用户管理、订单管理等。
协议名 主机名 端口号 项目名称 网页名称
32
修改端口号
• 8080是Tomcat服务器的默认端号口 • 修改Tomcat服务器的conf目录下的主配置文件server.xml可 以更改端口号. 搜索“8080”，找到以下内容：
<Connector port="8080" maxHttpHeaderSize="8192" maxThreads="150" minSpareThreads="25" maxSpareThreads="75" enableLookups="false" redirectPort="8443" acceptCount="100" connectionTimeout="20000" disableUploadTimeout="true" />
3
2课时 2课时 2课时 2课时 4课时 2课时 4课时 4课时 2课时
考核要求
• 平时成绩：20%，作业、出勤 • 实验课程：20%，实验内容和实验报告完成情况 • 期末考查：60%
4 / 23
第1讲 动态网页设计技术概述
5
本讲知识点介绍
• • • • • • 什么是JSP JSP的开发工具 JSP运行环境搭建 JSP运行原理 编辑测试JSP文件 修改配置文件，设置端口号和虚拟目录
• 改为80，则访问时可不加端口号，例如 http://127.0.0.1/example1_1.jsp
33
设置虚拟目录
• • 修改Tomcat服务器安装目录下conf目录中的 server.xml文件来设置虚拟目录。 注意区分大小写
<Context path="/moon" docBase="C:/redsun" debug="0" reloadable="true"> </Context>
• •
PATH=%JAVA_HOME%\bin CLASSPATH=%JAVA_HOME%\lib
14
2、Tomcat服务器的安装与配置
• Tomcat是一个免费的开源JSP引擎，也称作Tomcat服务器。 可以登录 /tomcat免费下 载apache-tomcat-6.0.13.zip文件（解压后即可使用） • apache-tomcat-6.0.13.exe ，双击后按“安装向导”安装后 使用。 • 安装了JSP引擎的计算机——一个支持JSP的Web服务器，负 责运行JSP文件，并将运行结果返回给用户.
15
Tomcat的目录结构:
图1.2 Tomcat引擎目录结构
16
3、安装MyEclipse
1、安装MyEclipse 2、在MyEclipse中配置Tomcat服务器
点击右侧下拉箭头，配置服务器
17
选中“Enable”
选择所安装Tomcat 的根目录
选择Tomcat 6.x
18
如上配置后，此处可以启动所配 置的Tomcat
针对该Web应用的配 置文件
27
WEB-INF目录存放java源程 序文件、jar包、 web应用配置文件；
5、新建JSP网页
• 鼠标右击WebRoot或其子目录，在右键菜单中依次 选择New->JSP(Advanced Templates)
28
• 在创建窗口中，选择文件的保存路径，指定文件名， 点击Finish结束
19
Tomcat的测试和配置
• 测试Tomcat安装是否成功
打开浏览器，在地址栏中输入http://localhost:8080或 http://127.0.0.1:8080，然后回车，看到Tomcat的欢迎页面， 说明Tomcat安装成功
20
4、新建Web项目
• 1、File——New——Web Project
6
教学目标
• • • • 了解什么是动态网页 了解常用的动态网页设计技术 了解JSP运行原理 掌握JSP运行环境的安装和配置
7
网页的分类
静态网页： •静态网页是指网页的内容是固定的，不会根据浏览者 的需求而改变。静态网页一般使用HTML语言进行编写 ，通常.htm .html等文件为后缀。 •网页内容不会发生变化，除非网页设计者修改网页内 容。不能实现和浏览网页的用户之间的交互。信息流向 是单向的，即从服务器到浏览器，服务器不能根据用户 的选择调整返回给用户的内容。 •在静态网页上，也可以出现各种动态效果，例如GIF 动画、FLASH、滚动字幕等，这些动态效果是视觉上 的，不是内容上的动态。
9
什么是动态网页
10
什么是JSP
• JSP（Java Server Pages）是基于Java 语言的一 种Web应用开发技术，利用这一技术可以建立安 全、跨平台的先进动态网站。 • 其它动态网页技术
（1）ASP 即Active Server Pages，微软开发的一种类似 HTML、Script（脚本）与CGI（公用网关接口）的结 合体。目前发展为技术。 （2）PHP 即Hypertext Preprocessor（超文本预处理 器），是一种被广泛应用的开放源代码的多用途脚本语 言。
36
JSP运行原理图
web 服务器 JSP 页面 2 产生 Servelt 源代码 4 3 经编译的 Servelt 图 1-2 . JSP 主要执行过程
1 浏 览 器
37
JSP运行原理图
• 浏览器端与服务器端采用请求/响应模式进行交互
2
解释执行 HTML文件 发送请求 IE
IE
客户端的请求信息
– 现象与影响：无法正常访问jsp文件 – 处理方法：启动Tomcat
– 现象：修改前能正常运行jsp文件，修改后无法运行。 – 影响：无法启动Tomcat – 处理方法：重新修改sever.xml文档并重启
39
其他JSP环境配置方案简介
1.JDK+Apache+Tomcat方案 配置比较复杂，但是能让Apache和Tomcat完美整合，提升 整体性能，实现强大的功能 2. JDK+Apache+Resin方案 Apache+Resin这对组合可谓“黄金搭档” ，具备商业软 件的要求 。 3. JDK+IIS+Tomcat方案 如果已经习惯了使用IIS，那么可以尝试这种配置 。 4. 使用商业的Servlet/JSP引擎，如Weblogic、 WebSphere等。
%> <P>1到100的偶数之和是：<%=sum %> </FONT></BODY><HTML>
}
if(i%2==0) sum=sum+i;
30
• 点击window，选择preferences，更改字体大小
31
6、运行JSP页面
• 运行JSP页面
• http://localhost:8080/Myapp/ex22
23
24
• 项目部署到 Tomcat
以开放目录方式和以打包方式
部署的位置
25
• 在工程部署窗口 中，如果部署成 功，部署项前面 会显示对号。 • 可以使用界面中 的Remove按钮删 除部署，使用 Redeploy重新部 署 • 如果部署成功， 点击OK
26
• 一个标准Java Web应用，不同类型的文件资源有 web工程的名称，该工程部署时， 严格的存放规则
动态网页设计
胡晓静 计算机与信息工程学院
1
课程目标定位
• • • • 课程类别：网络工程专业选修课 学时：理论24学时，实验16学时 考核方式：考查 先修课程：面向对象程序设计（Java）、数据库原理 与应用 • 后续课程：软件工程、JavaEE企业应用
2 / 23
学习内容
• JSP概述 • JSP预备知识 • JSP页面与JSP标记 • Tag文件与Tag标记 • JSP内置对象 • JSP中的文件操作 • JSP中使用数据库 • JSP与Javabean • Java Servlet基础 总共24课时
40
JSP开发平台及数据库的安装和配置
• 数据库的选择
– 目前应用比较多的数据库有MS SQL Server 2000、MySQL、Oracle 9i、 DB2、Sybase、Informix、MS Access等。
• SQL Server 的安装
–
• MySQL 的安装及管理
29
example1-1.jsp
<%@ page contentType="text/html;charset=GB2312" %> <HTML> <BODY BGCOLOR=yellow><FONT Size=3> <P>这是一个简单的JSP页面 <% int i, sum=0; for(i=1;i<=100;i++) {
11
JSP程序的开发工具
• 最基本的开发工具：notepad+jdk+tomcat