《6.网站开发技术_JZ.ppt》由会员分享，可在线阅读，更多相关《6.网站开发技术_JZ.ppt（56页珍藏版）》请在知学网上搜索。
1、网站开发技术主要内容HTML 4.0CSS 2.0JavaScript 1.5XML 1.0动态网站开发简介WWW与浏览器World Wide WebBrowser:1)Microsoft Internet Explorer2)Netscape Navigator3)Others:Mozilla Opera 网页制作的W3C规范http:/www.w3.orgThe World Wide Web Consortium(W3C)HTML 4.01(HyperText Markup Language)超文本标记语言CSS2(Cascading Style Sheets)层次样式单JavaScrip
2、t/VBScript/JScriptMathML,XML,XHTML 制作网页的工具制作页面Microsoft FrontPage 2000/XPMacromedia Dreamweaver MXNotepad,Ultraedit,处理图片、多媒体等Adobe PhotoshopMacromedia Flash MX HTML HTML的标题 HTML 文件的正文写在这里.文件扩展名为：.htm或.htmlHTML与标记HTML 4.0中标记的大小写不敏感对换行，跳格(tab)，多于一个的空格均忽略，属性值外的引号可省略。块标记&空标记块标记：被标记内容空标记：文字布局(TEXT STYLE)
3、标记 段段(Paragraph)：换行：换行：标题字体标题字体(Header)：.#=1,2,3,4,5,6文字的对齐文字的对齐(Alignment)：.#=left,center,right.字体(FONT)标记字体大小字体大小 .#=1,2,3,4,5,6,7 or+#,-#=1,2,3,4,5,6,7物理字体物理字体(Physical Style)：,逻辑字体逻辑字体(Logical Style)：,字体颜色：字体颜色：.#=rrggbb 16 进制数码，或是进制数码，或是rgb(rrr,ggg,bbb)，或是预定义色彩（或是预定义色彩（16个个:Black,Olive,Teal,Red
4、,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua)客户端字体客户端字体(Font Face)：.#=宋体、宋体、黑体黑体、楷楷体体_ _GB2312GB2312、仿宋仿宋_ _GB2312GB2312 链接链接(Link)基本语法基本语法 .锚：跳转到页面的另外一个地方锚：跳转到页面的另外一个地方.锚：跳转到另一个页面的某个地方锚：跳转到另一个页面的某个地方.标尺线：标尺线：#=left,right 列表列表 无序列表无序列表.有序列表有序列表.定制表中的标记定制表中的标记#=disk,circl
5、e,square定制有序列表表中的序号定制有序列表表中的序号#=A,a,I,i,1定制有序列表表中的序号的起始值定制有序列表表中的序号的起始值#=number预格式化文本预格式化文本(Preformatted Text)：.块引用块引用(Blockquote)：.图像(IMAGE)标记链入图象的基本语法链入图象的基本语法#=图象的图象的 URL#=在浏览器尚未完全读入图象时，在图在浏览器尚未完全读入图象时，在图象位置显示的文字。象位置显示的文字。边框：边框：#=value图像(IMAGE)标记(cont)图象和文字的对齐：图象和文字的对齐：#=top,middle,bottom图象在页面中的对
6、齐图象在页面中的对齐/布局布局(Floating Image)：#=left,center,right#=value表格(TABLE)标记表格的基本语法：表格的基本语法：.-定义表格定义表格-定义表行定义表行-定义表头定义表头-定义表元定义表元(表格的具体数据表格的具体数据)跨多行、多列的表元跨多行、多列的表元(Table Span)colspan=#,rowspan=#表格(TABLE)标记(cont)色彩：表元的背景色彩和背景图象色彩：表元的背景色彩和背景图象 表格边框的色彩表格边框的色彩 表格的主要用途：表格的主要用途：1)以二维表的形式显示数据以二维表的形式显示数据2)页面元素定位页面
7、元素定位!表单(FORM)标记表单的基本语法：表单的基本语法：.表单中提供给用户的输入形式：表单中提供给用户的输入形式：*=text,password,checkbox,radio,image,hidden,submit,reset表单(FORM)标记(cont)文字输入和密码输入：文字输入和密码输入：text,password 复选框复选框(Checkbox)：单选框单选框(RadioButton)：表单(FORM)标记(cont)列表框列表框(Selectable Menu)：.文本区域：文本区域：.页面(PAGE)标记背景色彩和文字色彩：背景色彩和文字色彩：背景图象：背景图象：页面空白页
8、面空白(Margin)：左边左边 上方上方 多窗口页面-帧(Frames).只出现在不支持只出现在不支持 FRAMES 的浏的浏览器中览器中,浮动窗口浮动窗口(Floating Frame)：.各窗口间相互操作各窗口间相互操作(Frame Target)窗口标识窗口标识(Frame Name)特殊的特殊的 4 类操作类操作(很有用很有用)新窗口新窗口 本窗口本窗口 父窗口父窗口 整个浏览器整个浏览器Frame 的外观的外观(Appearance)各窗口边框的设置各窗口边框的设置#=yes,no/1,0各窗口间空白区域的设置各窗口间空白区域的设置#=空白区空白区域的大小域的大小边框色彩边框色彩
9、页面空白页面空白(Margin)卷滚条设置卷滚条设置#=yes,no,autoCSS(Cascading Style Sheets)将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。n只通过修改一个文件就改变页数不定的网页的外观和格式。n在所有浏览器和平台之间的兼容性。n更少的编码、更少的页数和更快的下载速度。一个例子在最初的和 标签之间插入以下代码：将样式加到网页中将样式加到网页中1.将样式表植入HTML文件中。2.将一个外部样式表链接到HTML文件上。3.将一个外部样式表输入到HTML文件中。import url(company.css);（可以同其它方法结合使用）4.将样式表加
10、入到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 所有和之内的文字都以红色显示。串接顺序 1.1.Inline stylesInline styles（行内样式）2.2.Embedded stylesEmbedded styles（植入样式）3.3.Linked stylesLinked styles（链接样
11、式）4.4.Imported stylesImported styles（输入样式）5.5.Default browser stylesDefault browser styles（缺省浏览器样式）如果样式表规则同HTML标签冲突时，应该优先执行样式表规则，但CSS样式字体样式字体样式font-family font-style font-variant font-family font-style font-variant font-weight font-size fontfont-weight font-size font文字样式文字样式 letter-spacing text-deco
12、ration letter-spacing text-decoration Vertical-align text-transform text-Vertical-align text-transform text-align text-indent line-heightalign text-indent line-heightCSS样式(cont)列表式项目列表式项目 list-style-type list-style-image list-list-style-type list-style-image list-style-position list-style style-posi
13、tion list-style 颜色样式颜色样式 color background-color color background-color 背景样式背景样式 background-image background-repeat background-image background-repeat background-attachment background-background-attachment background-position background position background CSS样式(cont)版面配置样式版面配置样式 位置配置样式位置配置样式 positio
14、n top left Z-index position top left Z-index visibility height widthvisibility height width新增样式新增样式 display OVERFLOWdisplay OVERFLOWCSSCSS标记常常用在新增的两个标记常常用在新增的两个HTMLHTML块标记块标记中中：什么是JavaScript？JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而
15、可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。如何在HTML中嵌入JavaScript？/JavaScript Appears here.alert(这是第一个JavaScript例子!);基本数据类型基本数据类型基本数据类型：基本数据类型：1.数值（整数和实数）数值（整数和实数）2.字符串型（用字符串型（用“”号或号或括起来的字符或括起来的字符或数值）数值）3.布尔型（使布尔型（使True或或False表示）表示）4.空值。空值。在在JavaScript的基本类型中的数据可以是常的基本类型中的数据可以是常量，也可以变量。变量可以用命令量，也可以变量。变量可以用命
16、令var作声明作声明，也可以不作声明，而在使用时再根据数据，也可以不作声明，而在使用时再根据数据的类型来确其变量的类型。的类型来确其变量的类型。JavaScript语法程序控制流:if-else,for,whileJavaScript函数定义Function 函数名（参数,变元）函数体;.Return 表达式;事件驱动及事件处理1.单击事件onClick2.改变事件onChange3.选中事件onSelect4.获得焦点事件onFocus5.失去焦点onBlur6.载入文件onLoad7.卸载文件onUnload基于对象的JavaScript语言JavaScript中的对象是由属性(prope
17、rties)和方法(methods)两个基本的元素的构成的。引用对象的途径：引用对象的途径：1.1.引用引用JavaScriptJavaScript内部对象；内部对象；2.2.由浏览器环境中提供；由浏览器环境中提供；3.3.创建新对象。创建新对象。内部对象：在JavaScript提供了string（字符串）、math（数值计算）和Date（日期）三种对象和其它一些相关的方法。浏览器的内部对象系统 浏览器对象(Navigator)提供有关浏览器的信息窗口对象(Windows)Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。位置对象(Location)Loca
18、tion对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。浏览器的内部对象系统（续）历史对象(History)History对象提供了与历史清单有关的信息。文档对象(Document)document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。窗口及输入输出创建一个新窗口open()方法创建具有OK按钮的对话框的alert()方法创建具有OK和Cancel按钮的对话框的confirm()方法创建具有输入信息的对话框的prompt()方法document文档对象在document中主要有：links,anchor,form等三个
19、最重要的对象文档对象中有attribute属性 文档对象的基本元素：（）窗体属性（）锚属性：anchors（）链接属性：links网页制作注意事项制作网页要注意兼容性。客户端可能差别很大：不同的操作系统、浏览器、屏幕分辨率、字体支持等。保持文件名大小写一致，避免使用中文做为文件名和目录名。所有文件和资源要放在一个目录下。需要起始页面。为网页减肥，减少流量，提高响应时间。网页的风格宜素雅、最忌乱。XML(Extensible Markup Language)XML起源于SGML(Standard Generalized Markup Language)。XML是平台及软件无关的。XML提供了一个
20、简化的结构。XML将数据的内容与显示分离，XML侧重于数据的“内容”，而不是数据的“样子”。XML的数据是供人和机器都可以阅读的。XML versus SGML and HTMLHTML是面向显示的。SGML非常的复杂。XML是不同介质之间数据交换的标准。XHTML与MathML均是XML的具体应用例子。静态页面与动态网站静态页面，指的是内容预先设置固定的页面。所使用的技术：HTML,CSS,JavaScript/VBScript/JScript静态并不是说页面上没有动画或特效。动态网站指的是网页的内容在运行时动态生成的技术。例如：新闻、邮箱等。主要包括：CGI，ASP，PHP，JSP/Ser
21、vlet等。使用什么样的动态网站技术？传统的方式：CGI（Common Gateway Interface），使用C、Perl等语言。Windows NT Family With IIS+ASP+SQL ServerLinux/NT+PHP+MySQLJava/JSP/Servlet+大型关系型数据库Active Server Pages(ASP)基于微软的Windows操作系统和IIS网络信息服务器。易学易上手，使用VBScript作为内置的脚本语言。可扩展性差，安全性不强，不方便迁移到其它平台。一般与微软的数据库配合使用。如Access、SQL Server等。适合小型应用。ASP优点1.
22、使 用 VBScript、JScript 等 脚 本 语 言，结 合 HTML 代 码，即 可 快 速 地 完 成 网 站 的 应 用 程 序。2.无 须 compile 编 译，容 易 编 写，可 在 服 务 器 端 直 接 执 行。3.使 用 普 通 的 文 本 编 辑 器，如 Windows 的 记 事 本，即 可 进 行 编 辑 设 计。4.与 浏 览 器 无 关(Browser Independence)ASP 本 身 并 不 是 一 种 脚 本 语 言，它 只 是 提 供 了 一 种 使 镶 嵌 在 HTML 页 面 中 的 脚 本 程 序 得 以 运 行 的 环 境。ASP 程
23、序 其 实 是 以 扩 展 名 为.asp 的 纯 文 本 形 式 存 在 于 WEB 服 务 器 上 的，ASP 程 序 中 可 以 包 含 纯 文 本、HTML 标 记 以 及 脚 本 命 令。ASP工作方式请求回应示意图WEB ServerClient Browser请求HTML、ASP页面返回静态HTML文档将ASP解释执行，结果为HTML显示HTMLScriptASP的内建对象RequestResponse(Cookie)ApplicationSessionServer其它对象，如ADO、FileSystemObject等JSP优点1.使 用 Java 语 言，结 合 HTML 代 码，即 可 快 速 地 完 成 网 站 的 应 用 程 序。2.容 易 编 写，可 在 服 务 器 端 直 接 执 行。3.使 用 普 通 的 文 本 编 辑 器，如 Windows 的 记 事 本，即 可 进 行 编 辑 设 计。4.与 浏 览 器 无 关(Browser Independence)JSP工作方式请求回应示意图WEB ServerClient Browser请求HTML、JSP页面返回静态HTML文档将JSP编译执行，结果为HTML显示HTMLScript
