6.网站开发技术.ppt

1、网站开发技术,主要内容,HTML 4.0 CSS 2.0 JavaScript 1.5 XML 1.0 动态网站开发简介,WWW与浏览器,World Wide Web Browser :1) Microsoft Internet Explorer2) Netscape Navigator3) Others: Mozilla Opera ,网页制作的W3C规范,The World Wide Web Consortium (W3C) HTML 4.01 ( HyperText Markup Language )超文本标记语言 CSS2 (Cascading Styl

2、e Sheets) 层次样式单 JavaScript / VBScript / JScript MathML , XML , XHTML ,制作网页的工具,制作页面 Microsoft FrontPage 2000/XP Macromedia Dreamweaver MX Notepad , Ultraedit , 处理图片、多媒体等 Adobe Photoshop Macromedia Flash MX ,HTML, HTML的标题 HTML 文件的正文写在这里. . 文件扩展名为：.htm或.html,HTML与标记,HTML 4.0中标记的大小写不敏感 对换行，跳格(tab)，多于一个的

3、空格均忽略，属性值外的引号可省略。 块标记 （可以同其它方法结合使用） 将样式表加入到HTML文件行中。,分类 P.first color: green P.second color: purple -firstsecond-.first color: green ,P B .vs. P,B,情景选择：P B color: red 只将所有之内加重显示的文字以红色显示，之外加重文字不会以红色显示。 P,B color: red 所有和之内的文字都以红色显示。,串接顺序,Inline styles （行内样式） Embedded styles （植入样式） Linked styles （链接样式

4、） Imported styles （输入样式） Default browser styles（缺省浏览器样式） 如果样式表规则同HTML标签冲突时，应该优先执行样式表规则，但,CSS样式,字体样式font-family font-style font-variant font-weight font-size font 文字样式 letter-spacing text-decoration Vertical-align text-transform text-align text-indent line-height,CSS样式(cont),列表式项目 list-style-type lis

5、t-style-image list-style-position list-style 颜色样式 color background-color 背景样式 background-image background-repeat background-attachment background-position background,CSS样式(cont),版面配置样式 位置配置样式 position top left Z-index visibility height width 新增样式 display OVERFLOW CSS标记常常用在新增的两个HTML块标记中： ,什么是JavaScri

6、pt？,JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。,如何在HTML中嵌入JavaScript？, / JavaScript Appears here. alert(这是第一个JavaScript例子!); ,基本数据类型,基本数据类型： 数值（整数和实数） 字符串型（用“”号或括起来的字符或数值） 布尔型（使True或False表示） 空值。 在

7、JavaScript的基本类型中的数据可以是常量，也可以变量。变量可以用命令var作声明 ，也可以不作声明，而在使用时再根据数据的类型来确其变量的类型。,JavaScript语法,程序控制流:if-else,for,while JavaScript函数定义 Function 函数名 （参数,变元） 函数体;. Return 表达式; ,事件驱动及事件处理,单击事件onClick 改变事件onChange 选中事件onSelect 获得焦点事件onFocus 失去焦点onBlur 载入文件onLoad 卸载文件onUnload,基于对象的JavaScript语言,JavaScript中的对象是由

8、属性(properties)和方法(methods)两个基本的元素的构成的。 引用对象的途径： 引用JavaScript内部对象； 由浏览器环境中提供； 创建新对象。 内部对象：在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。,浏览器的内部对象系统,浏览器对象(Navigator)提供有关浏览器的信息 窗口对象(Windows)Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。 位置对象(Location)Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对

9、象。,浏览器的内部对象系统（续）,历史对象(History)History对象提供了与历史清单有关的信息。 文档对象(Document) document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。,窗口及输入输出,创建一个新窗口open()方法 创建具有OK按钮的对话框的alert()方法 创建具有OK和Cancel按钮的对话框的confirm()方法 创建具有输入信息的对话框的prompt()方法,document文档对象,在document中主要有：links,anchor,form等三个最重要的对象 文档对象中有attribute属性 文

10、档对象的基本元素：（）窗体属性（）锚属性：anchors（）链接属性：links,网页制作注意事项,制作网页要注意兼容性。客户端可能差别很大：不同的操作系统、浏览器、屏幕分辨率、字体支持等。 保持文件名大小写一致，避免使用中文做为文件名和目录名。所有文件和资源要放在一个目录下。需要起始页面。 为网页减肥，减少流量，提高响应时间。 网页的风格宜素雅、最忌乱。,XML (Extensible Markup Language),XML起源于SGML(Standard Generalized Markup Language)。 XML是平台及软件无关的。 XML提供了一个简化的结构。 XML将数据的内

11、容与显示分离，XML侧重于数据的“内容”，而不是数据的“样子”。 XML的数据是供人和机器都可以阅读的。,XML versus SGML and HTML,HTML是面向显示的。 SGML非常的复杂。 XML是不同介质之间数据交换的标准。 XHTML与MathML均是XML的具体应用例子。,静态页面与动态网站,静态页面，指的是内容预先设置固定的页面。所使用的技术：HTML,CSS,JavaScript/VBScript/JScript静态并不是说页面上没有动画或特效。 动态网站指的是网页的内容在运行时动态生成的技术。例如：新闻、邮箱等。主要包括：CGI，ASP，PHP，JSP/Servlet等

12、。,使用什么样的动态网站技术？,传统的方式：CGI （Common Gateway Interface），使用C、Perl等语言。 Windows NT Family With IIS + ASP + SQL Server Linux/NT + PHP + MySQL Java/JSP/Servlet + 大型关系型数据库,Active Server Pages (ASP),基于微软的Windows操作系统和IIS网络信息服务器。 易学易上手，使用VBScript作为内置的脚本语言。 可扩展性差，安全性不强，不方便迁移到其它平台。 一般与微软的数据库配合使用。如Access、SQL Serve

13、r等。适合小型应用。,ASP优点,使 用 VBScript 、 JScript 等 脚 本 语 言， 结 合 HTML 代 码， 即 可 快 速 地 完 成 网 站 的 应 用 程 序。 无 须 compile 编 译， 容 易 编 写， 可 在 服 务 器 端 直 接 执 行。 使 用 普 通 的 文 本 编 辑 器， 如 Windows 的 记 事 本， 即 可 进 行 编 辑 设 计。 与 浏 览 器 无 关 (Browser Independence),ASP 本 身 并 不 是 一 种 脚 本 语 言， 它 只 是 提 供 了 一 种 使 镶 嵌 在 HTML 页 面 中 的 脚 本

14、 程 序 得 以 运 行 的 环 境。 ASP 程 序 其 实 是 以 扩 展 名 为 .asp 的 纯 文 本 形 式 存 在 于 WEB 服 务 器 上 的， ASP 程 序 中 可 以 包 含 纯 文 本、 HTML 标 记 以 及 脚 本 命 令。,ASP工作方式,请求回应示意图,WEB Server,Client Browser,请求HTML、ASP页面,返回静态HTML文档,将ASP解释执行，结果为HTML,显示HTML,Script,ASP的内建对象,Request Response (Cookie) Application Session Server 其它对象，如ADO、FileSystemObject等,JSP优点,使 用 Java 语 言， 结 合 HTML 代 码， 即 可 快 速 地 完 成 网 站 的 应 用