山东大学web技术课程教学ppt3
合集下载
Web概述本章主要内容精品PPT课件
1.2 Web工作原理
静态网页与动态网页： 1. 静态网页仅仅使用HTML语言编写； 2. 动态网页需要使用脚本语言编写，根据网页内容依赖于数据库的内容。
1.3 Web服务
Web服务定义： • W3C（国际标准化组织）定义 • Microsoft定义 • IBM定义 • UDDI规范中定义
定义内容详见PP7-12。
1.3 Web服务
Web服务
UDDI Web服务&WSDL
SOAP、XML HTTP、HTTPS、SMTP、FTP
图1-2 Web服务的多层构成
服务发现层 服务描述层 基于XML的消息层 网络层
1.3 Web服务
UUID等于的四种基本结构： • 商业实体（Business entiy）：描述商业信息，如名称和类
器； 4. 如果URL指向脚本语言文本*（或HTML文档中嵌入有脚本语言文本），
则Web服务器运行脚本语言的程序（一般是解释执行脚本程序），将 其输出结果送浏览器； 5. URL也可以执行其他的脚本语言程序，例如：VRML和Ruby等等。
* 常用的脚本语言有PHP、ASP、和每一个人，既是信息 的接收者，也是信息的传播者，大家通过相互协作 来完成各自的任务和实现各自的目的。
分享精神指接入互联网的每一个人，将各自拥 有的信息分享在互联网上，使得任何人都可以使用。
1.1 Web概念
Web的五要素： •URL •HTTP •HTML •Web浏览器 •Web服务器
第1 章Web概述
Web应用举例（续）： •Social networking service（SNS，社会化网络服务） •Online shopping（在线购物） •Web search engine（搜索引擎） •Internet governance（网络政务） •Browse game（页游，网页游戏） •Webcam（网络摄像） •Electronic business（e-business，电子商务）
web开发培训精品PPT课件
Web开发技术培训
Hale Waihona Puke 总体介绍J2EEJ2EE
Java
Java是一种简单的，面向对象的，分布式 的，解释型的，健壮安全的，结构中立的，可 移植的，性能优异、多线程的动态语言。
Java平台由Java虚拟机（Java Virtual Machine）和Java 应用编程接口（Application Programming Interface、简称API）构成。Java 应用编程接口为Java应用提供了一个独立于操 作系统的标准接口，可分为基本部分和扩展部 分。在硬件或操作系统平台上安装一个Java平 台之后，Java应用程序就可运行。
Micro Edition(微缩版) J2ME 包含J2SE中一 部分类，用于消费类电子产品的软件开发。比 如：呼机、智能卡、手机、PDA、机顶盒。
J2EE
J2EE
J2EE至少划分为3层，分别为表现层、业务逻 辑层和持久层。
表现层（Presentation Layer）：实现显示功能， 一般使用B/S结构来完成，也可用专门远程客户端 来实现。框架技术：Struts等。
Java语言写的源程序通过Java编译器，编译成与平 台无关的‘字节码程序’(.class文件，也就是0，1二进 制程序)，然后在OS之上的Java解释器中解释执行。
JVM是java的核心和基础，在java编译器和os平台之
间的虚拟处理器。J它2是E一E 种利用软件方法实现的抽象的
计算机基于下层的操作系统和硬件平台，可以在上面执 行java的字节码程序。
JVM
JVM是Java Virtual Machine（Java虚拟机）的 缩写，在实际的计算机上通过软件模拟来实现。 JVM有自己想象中的硬件，如处理器、堆栈、寄
Hale Waihona Puke 总体介绍J2EEJ2EE
Java
Java是一种简单的，面向对象的，分布式 的，解释型的，健壮安全的，结构中立的，可 移植的，性能优异、多线程的动态语言。
Java平台由Java虚拟机（Java Virtual Machine）和Java 应用编程接口（Application Programming Interface、简称API）构成。Java 应用编程接口为Java应用提供了一个独立于操 作系统的标准接口，可分为基本部分和扩展部 分。在硬件或操作系统平台上安装一个Java平 台之后，Java应用程序就可运行。
Micro Edition(微缩版) J2ME 包含J2SE中一 部分类，用于消费类电子产品的软件开发。比 如：呼机、智能卡、手机、PDA、机顶盒。
J2EE
J2EE
J2EE至少划分为3层，分别为表现层、业务逻 辑层和持久层。
表现层（Presentation Layer）：实现显示功能， 一般使用B/S结构来完成，也可用专门远程客户端 来实现。框架技术：Struts等。
Java语言写的源程序通过Java编译器，编译成与平 台无关的‘字节码程序’(.class文件，也就是0，1二进 制程序)，然后在OS之上的Java解释器中解释执行。
JVM是java的核心和基础，在java编译器和os平台之
间的虚拟处理器。J它2是E一E 种利用软件方法实现的抽象的
计算机基于下层的操作系统和硬件平台，可以在上面执 行java的字节码程序。
JVM
JVM是Java Virtual Machine（Java虚拟机）的 缩写，在实际的计算机上通过软件模拟来实现。 JVM有自己想象中的硬件，如处理器、堆栈、寄
第1章Web技术ok-PPT精品文档
理解Ｗｅｂ
Web应用开发
1）Web是Internet提供的一种服务。 2）Web是一个巨大的信息宝库。 3）Web上的信息彼此关联。 4）Web上的信息保存在Web站点中。 5）Web简单易用。
7
什么是Web服务器？
Web应用开发
Web服务器又称WWW服务器、网站服务器、站点服 务器，就是将本地的信息用超文本（Hypertext）组织， 为用户在Internet上搜索和浏览信息提供服务。从本 质上来说Web服务器实际上就是一个软件系统。一台 计算机可以充当多个Web服务器，为提高用户的访问 效率，一般情况下一台计算机只充当一个Web服务器； 为提供大量用户的访问，多台计算机可以形成集群， 只提供一个Web服务。平常，我们将只充当一个Web 服务器的一台计算机就叫做Web服务器。
Web服务器
Web应用开发
负责处理客户端的HTTP请求并与主机 上的操作系统通信。
负责为用户提供所需要的网页，并对客 户端浏览器发来的请求作出响应。
Web应用开发
浏览器/服务器的工作过程
用户启动浏览器，并在浏览器中指定一个URL， 浏览器便向该URL所指向的Web服务器发出请求
Web服务器接到浏览器的请求后，把URL转换成 页面所在服务器上的文件路径名
HTTP Web服务器
Web浏览器
Web应用开发
Web浏览器浏览器是用来解释Web页面并完 成相应转换和显示的程序。 Web浏览器最基本的功能：
➢ 解释HTML文档； ➢ 运行并显示Java、ActiveX以及脚本语言等编
程语言创建的应用、程序、动画等；
1994年Netscape Navigator推出。 Microsoft从1995年开始推出Web浏览器：Internet Explorer。
01 Web基础
• 端口（Ports）、套接字（socket）=IP+port
• 下载（Download）：下载是指通过Internet将文件从FTP服 务器传输到本地计算机的过程。 • 上传（Upload）：上传是指通过Internet将文件从本地计 算机传输到FTP服务器的过程。 • 存储片（Cookie）：Cookie是Web服务器传送到浏览器端 2018/10/5 的数据流，用于存储服务器端的数据以及运行的中间结果， 以数据文件的形式存储在客户机的硬盘中。
2018/10/5
1.2 Web概述
1 Web是什么 2 超文本、HTML、XML与Web页 3 浏览器 4Web服务器及工作机理
2018/10/5
Web是什么
•
Internet
网络互连、
服务器: -www -ftp 客户
•
WWW
2018/10/5
– –
Web服务器、
浏览器
超文本、HTML、XML与Web页
2018/10/5
1.1 Internet与万维网
•回首20世纪，通信、计算机、网络的发展极大的推进了人类社会的发展， 20世纪无疑是一个数字世纪。
•第一台电子计算机“爱尼亚克”（ENIAC）
1946年，在美国宾夕法尼亚大学莫尔电子工程学院诞生，这使得计算实现 了自动化，带来了数字信息时代的第一缕曙光。
1.4 Web中的服务 1.5 Web的新进展
语义Web 2018/10/5 Web Service技术
讲稿
今天，互联网已经成为使用最广泛的传播媒体，它正 在改变着人们的工作、生活和娱乐方式。人们利用 Internet发布消息、搜索信息、进行商务活动；利用 Internet人们可以收发电子邮件、浏览网页、网上交 流、视频点播、玩网络游戏…。 Internet就像空气一样正在渗入到我们生活的每一个角 落…互联网已经成为国民经济和社会信息化的主要 部分。 对互联网的认识直接影响着人们的工作和生活，对于 IT专业人员，Web开发已经成为目前重要的开发内 容…
web前端技术整理精品PPT课件
各浏览器CSS hack兼容表：
标注了各个浏览器之间的兼容不同的地方。 /*ie8 and below*/ body { color: red; /* all browsers, of course */ color : green\9; /* IE8 and below */ }
XHTML：可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），是一种 置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上 讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而 XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26 日成为W3C的推荐标准。
HTML：（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是 目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML 命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等 。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需 的信息，而主体则包含所要说明的计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象， 只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML 是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性，XHTML是一种为适 应XML而重新改造的HTML。
2.图形软件核心是层的概念 动画除了层还有时间帧概念
位图矢量图区别
实例说明部分
Photoshop flash 应用
web基础学习课件..
知名端口
范围从0到1023，这些端口号一般固定分配给一些知名的公共服务。 21端口--FTP服务 25端口--SMTP服务 80端口--HTTP服务 135端口-RPC（远程过程调用）服务等
动态端口
2018/10/8
范围从1024到65535
14
1.4 Web相关技术(1)
优点
具有良好的开放性，利用单一的访问点，用户可以在任何地点 使用系统；用户可以跨平台以相同的浏览器界面访问系统；因 为在客户端只需要安装浏览器，基本上取消了客户端的维护工 作，有效的减少了整个系统的运行和维护成本。 跨越了局域网的限制，将应用分步到互联网
2018/10/8 6
1.2.2 Web的工作原理
单机运行与集中式计算模式 客户/服务器（C/S）计算模式 浏览器/服务器（B/S）计算模式
2018/10/8
16
单机运行与集中式计算模式
集中式计算
计算所需要的数据和程序都是集中在一台计算机上进行的，称为集 中式计算， 20世纪60、70年代 随着网络的发展，这种集中式计算往往形成一种由大型机和多个与 之相连的终端组成的网络结构，形成主机－终端计算机网络
JDK的构成
运行环境（即JRE）
核心API 集成API 用户界面API 发布技术 Java虚拟机(JVM)
开发环境（即JDK)
Java程序的编译器（即javac） 抽象窗口工具包AWT（Abstract Windowing Toolkit ），其他库不完整
2018/10/8 21
不足
它必须在客户端安装大量的应用程序（客户端软件），开发成本较高， 移植困难，用户界面风格不统一，使用繁杂，不利于推广使用，维护复 杂，升级麻烦，信息内容和形式单一，新技术不能轻易应用 用户必须在局域网中，对90年代蓬勃发展的互联网新技术不能适应
精品PPT课件--Web技术概述61页PPT
❖ 知识就是财富 ❖ 丰富你的人生
71、既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德 72、家庭成为快乐的种子在外也不致成为障碍物但在旅行之际却是夜间的伴侣。——西塞罗 73、坚持意志伟大的事业需要始终不渝的精神。——伏尔泰 74、路漫漫其修道远，吾将上下而求索。——屈原 75、内外相应，言行相称。——韩非
精品PPT课件--Web技术概述
41、俯仰终宇宙，不乐复何如。 42、夏日长抱饥，寒夜无被眠。 43、不戚戚于贫贱，不汲汲于富贵。 44、欲言无予和，挥杯劝孤影。 45、盛年不重来，一日难再晨。及时 当勉励 ，岁月 不待人 。
谢
71、既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德 72、家庭成为快乐的种子在外也不致成为障碍物但在旅行之际却是夜间的伴侣。——西塞罗 73、坚持意志伟大的事业需要始终不渝的精神。——伏尔泰 74、路漫漫其修道远，吾将上下而求索。——屈原 75、内外相应，言行相称。——韩非
精品PPT课件--Web技术概述
41、俯仰终宇宙，不乐复何如。 42、夏日长抱饥，寒夜无被眠。 43、不戚戚于贫贱，不汲汲于富贵。 44、欲言无予和，挥杯劝孤影。 45、盛年不重来，一日难再晨。及时 当勉励 ，岁月 不待人 。
谢
《Web程序设计》课件
HTML链接
HTML链接用于在网页中创 建超链接，指向其他网页或
资源。
链接由`<a>`标签定义，通 过`href`属性指定链接的目
标地址。
链接可以是外部链接（指向 其他网站的地址），也可以 是内部链接（指向同一网站
内的页面）。
链接可以使用相对路径或绝 对路径来指定目标地址。
01
02
03
04
05
03
HTML表单
HTML表单用于收集用户输入的数据，如 文本框、单选框、复选框、下拉列表等 。
表单元素包括`<form>`标签、输入元素 （如`<input>`）、选择元素（如 `<select>`和`<option>`）等。
表单数据可以通过POST或GET方法发送 到服务器进行处理。
表单在Web应用程序中有着广泛的应用 ，如在线调查、在线注册等。
于Web开发。
02
它最初被设计用于给网页添 加交互性，但现在已经广泛 用于构建复杂的单页应用和
后端服务器端开发。
03
JavaScript是ECMAScript标 准的一门实现，最新的
ECMAScript标准是ES2023 。
JavaScript语法
01
JavaScript语法基于ECMAScript规范，由关键字、
04
属性选择器
属性选择器用于选择具有特定 属性或属性值的元素。例如， `[target="_blank"]`选择器将 选择所有具有“target”属性 且值为“_blank”的元素。
CSS样式属性
01
字体属性
02
字体属性用于设置文本的字体 、大小、粗细、行高等。例如 ，`font-family`用于设置字体， `font-size`用于设置字体大小， `font-weight`用于设置字体粗 细等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
于展现窗口即可。 图像尽量避免使用高分辨率的真彩照片 使用Web标准调色板，避免抖动 尽可能使用纯色，混合颜色会加大文件 在网页中勿滥用图像 Internet和Intranet的图像区别 切割大幅图像
山东大学计算机科学与技术学院
5
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
图像(图片)颜色要与网站色系协调一致
返回
山东大学计算机科学与技术学院
17
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站-图形尺寸尽可能小
返回
山东大学计算机科学与技术学院
18
《网站规划与网页设计》
山东大学计算机科学与技术学院
13
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
7.图像其他文件格式
.bmp：Microsoft，支持高达 24 位的图像，无损格式无压
缩图形文件，占用磁盘空间过大，是不适用于 Web页的。 .tif：是Mac中广泛使用的图像格式，它由Aldus和微软联合 开发，最初是出于跨平台存储扫描图像的需要而设计的。 .PSD：Adobe公司的Photoshop的专用格式，包含图层、通道 、遮罩等多种设计的样稿，便于修改上一次的设计。可轻易 转化为其他格式。 .swf：Flash制作矢量动画的后缀。可以边下载边观看，因 此特别适合网络传输。高清晰度的画质和小巧的体积，网上 动画的事实标准。 .SVG：目前最火热的图像文件格式，可缩放的矢量图形。它 是基于XML，由W3C联盟进行开发的。可用任何文字处理工具 打开SVG图像，通过改变部分代码来使图像具有互交功能， 并可以随时插入到HTML中通过浏览器来观看。
Adobe Illustrator CS6 Adobe Flash CS6 CorelDRAW Graphics Suite X6
山东大学计算机科学与技术学院
12
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
6.Web图像标准文件格式：GIF、JPEG和PNG
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
分辨率为72ppi和300ppi的图像
返回
山东大学计算机科学与技术学院
21
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
/hexh.html
返回
山东大学计算机科学与技术学院
.gif：与平台无关的文件格式，限于256色，是一个无
损压缩格式(推荐使用)，GIF 压缩格式可以“渐显” 。Gif98a动画gif图像文件。透明GIF。 .jpg,.jpeg：联合图像专家组,24位色，有损压缩。缺 点：无法控制24位色与256色调色板的映射。JPEG2000 采用新的子波压缩技术，减少压缩损失，同时支持有损 和无损压缩。JPEG支持渐进式隔行扫描 .png：PNG支持24位图像并产生无锯齿状边缘的背景透 明度，PNG 保留灰度和RGB图像中的透明度。PNG是目 前保证最不失真的格式，它汲取了GIF和JPG二者的优 点。PNG是采用无损压缩方式来减少文件的大小，显示 速度很快，同样支持透明图像。缺点是不支持动画应用 效果。Fireworks默认格式是PNG。
山东大学计算机科学与技术学院
6
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.数字图像的基本概念 – 续1
显示器分辨率：显示图像的精度，分辨率越高，
显示的图像越清晰，图像文字越小。最常用的标 准显示器的分辨率是800×600 (屏幕宽×屏幕高 )。640*480，800*600，1024*768，1280*1024。 图像分辨率：以每英寸的像素数(PPI)来衡量， 分辨率越高，在每英寸上看见得细节就越清楚， 图像越精细，质量越好，数据量也越大。例如图 像分辨率为500PPI，就是每英寸有500个像素。 显示器设备分辨率：显示器上每单位长度显示的 像素或点的数量，通常以点/英寸 (dpi) 来表示 。大多数新显示器的分辨率大约为 96 dpi，而 较早的 Mac OS 显示器的分辨率为 72 dpi。
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第3章 思考问题
3-3 图像在网站设计中的一般原则如何？
3-6 请解释颜色抖动的原因如何？
3-11 GIF、JPEG和PNG的区别是什么？
3-16 Web图形与一般图形有何区别？
end
山东大学计算机科学与技术学院
16
《网站规划与网页设计》
山东大学计算机科学与技术学院
14
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第3章 小结
Web图形的重要性
Web图像图形概念
Web图像常用规则
Web常用图形格式
Web图形常用工具
Web图形的优化
山东大学计算机科学与技术学院
15
《网站规划与网页设计》
山东大学计算机科学与技术学院
8
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.数字图像的基本概念 – 续3
抖动：是在图像调色板和系统调色板之间调和，
图像调色板上的颜色被和系统调色板上匹配的颜 色所替代，如果系统不能找到匹配的颜色，它会 使用它认为合适的颜色，这就可能导致异常的颜 色组合！为了防止抖动的发生，图像应该使用 Web安全颜色调色板上的颜色。 Web安全的颜色调色板：浏览器仅保证了216种颜 色，每一个浏览器最多可以显示256种颜色，操 作系统使用其中的40种专属颜色，因此Web图像 只可以使用剩余的216种颜色，所有其他的颜色 都要抖动，即用这216种相近的颜色所取代。
22
山东大学计算机科学与技术学院
7
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.数字图像的基本概念 – 续2
打印机分辨率：所有激光打印机(包括照排机)产
生的每英寸的油墨点数 (dpi)。多数桌面激光打 印机的分辨率为 600 dpi，而照排机的分辨率为 1200 dpi 或更高。喷墨打印机产生的是极小的 墨粒，而不是实际的点；但大多数喷墨打印机的 分辨率均约为 300 到 720 dpi。 调色板：在一个窗口可以显示256种颜色，每一 副图像都具有独立的256个调色板，显示时更换 调色板便可满足各幅图像的颜色要求。系统在系 统调色板中保存着256种颜色。
1.网站图像的重要性 – 续
山东大学计算机科学与技术学院
4
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.Web图像设计原则
网站徽标应适宜大小放在主页左上方
网站标题应放在主页徽标的右边 网站图像与网站色系协调一致
图像的文件尺寸应该要足够小，图像大小适
山东大学计算机科学与技术学院
2
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
1.网站图像的重要性：不同于一般图像
网站的徽标、网站艺术体名称、导航、按钮、新
闻照片和页面修饰等，无一能离开图像。
网页中的文字信息分为两种：一种为HTML的纯文
本，另一种为图像中的文字信息。
山东大学计算机科学与技术学院
9
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.数字图像的基本概念 – 续4
图像压缩：是指以较少的比特有损或无损地表示
原来的像素矩阵的技术。 Web图像大小一般应该为几K字节到几十K字节， 不应该太大。
山东大学计算机科学与技术学院
图像除了给我们视觉冲击效果外，还为网站主体
表达了寓意。
图像要求：爽心悦目、简洁、贴现网站的本质。 图像重点考虑的问题：文件大小、下载速度、禁
止滥用图形、协调。
Intranet面向功能；Internet面向展示。
山东大学计算机科学与技术学院
3
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第3章 图形与Web设计
山东大学计算机科学与技术学院
《网站规划与网页设计》
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
概 述
网站图像的重要性 Web图像设计原则 数字图像基本概念 位图和向量图像 Web图像文件格式
10
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
4.位图图像
位图：位图图像(栅格图像)使用颜色网格(像素）来表现图
像。每个像素都有自己特定的位置和颜色值，显示速度比 矢量图形快。 PNG、JPEG、GIF格式都是位图。 如果增加图像的尺寸，文件的大小就会增加。 当放大查看时，位图由一系列的小方块表示，每一个方块 使用同一种颜色。 在处理位图像时，所编辑的是像素，而不是对象或形状。 缺点：原始文件尺寸大，适用于照片阴影等。 位图处理工具： Adobe Photoshop CS6 Adobe Fireworks CS6 Microsoft 画图 Corel Paint Shop Pro X Corel Painter IX