山东大学web技术课程教学ppt2
合集下载
《web应用开发》PPT课件
ServletContext接口
• Servlet context： • 存储在Servlet context中的信息,同一应用中的 servlet/JSP/JavaBean都可以访问。 • 通过ServletConfig对象上的getServletContext()方 法可获得servlet上下文对象 • ServletContext接口常用方法：
背景知识
• 常用的Web服务器
– IIS – Tomcat
• 通常的动态网页技术
– – – – – – CGI (Common GateWay Interface) API常用的有(NSAPI,ISAPI) ASP（Active Server Page) PHP（Personal Home Page) JSP（Java Server Page） Servlet
HttpServlet类中的方法
• javax.servlet.http.HttpServlet
public void doGet(HttpServletRequest req,HttpServletResponse res)
doGet() 方法处理客户端作出的 GET 请求。 public void doPost(HttpServletRequest req,HttpServletResponse res) doPost() 方法处理客户端作出的 POST 请求。 public void init() 初始化代码可写在此方法中 public void service() 客户端有请求过来,服务器会调用service()方法, service()方法根据请 求来决定调用doGet还是doPost方法 public void destory() 删除实例时会调用,释放资源的代码可写在此方法中
《Web服务》课件
游戏开发领域
多人游戏、在线竞技、虚拟现实 等。
总结
1 Web服务的概念及其应用
通过定义和描述的方式，开发人员可以创建可通过互联网进行远程访问的应用程序功能。
2 Web服务的安全性和优缺点
Web服务需要关注数据安全、身份验证等方面的问题，并且在性能和网络通信延迟方面存 在一些挑战。
3 Web服务的发展趋势
2 Web服务安全机制
使用HTTPS协议、身份认证、访问控制、消息加密等技术来保障安全。
Web服务的优点和缺点
Web服务的优点
可重用性、互操作性、易于扩展和维护。
Web服务的缺点
性能开销、网络通信延迟、安全性挑战。
Web服务应用实例
金融领域
银行系统、金融交易、数据分析 等。
电子商务领域
在线购物、物流管理、支付系统 等。
Web服务 PPT课件
Web服务 PPT课件介绍了Web服务的概念、基本原则、组成要素、调用方法、 开发步骤、安全问题、优缺点以及应用实例。
什么是Web服务？
通过定义和描述的方式，开发人员可以创建可通过互联网进行远程访问的应 用程序功能。
Web服务的基本原则
1 互操作性
不同平台和技术之间的互通性和兼容性。
随着技术的不断发展，Web服务将更加智能化、自动化，为各行各业提供更多创新的解决 方案。
参考资料
1 Web Services，W3C
官方网站
2 Web Services，IBM
官方网站
3 Web Services，
Microsoft官方网站
UDDI
Universal Description, Discovery, and Integration，用 于注册和查找Web服务。
《JavaWeb课件-完整版》
《JavaWeb课件-完整版》
课程简介
1 课程目标
了解JavaWeb的基本概念与 应用场景。
2 课程内容概述
介绍JavaWeb开发环境搭建 和常用技术。
3 学习要求
具备Java编程基础和Web开发基础知识。
JavaWeb简介
1 JavaWeb的定义
2 JavaWeb的优势
JavaWeb指的是使用Java 技术进行Web开发的方式。
3 项目部署和运行
将项目部署到Tomcat服务器并进行测试运行。
JavaWeb的主要技术
1 JSP技术
Java Server Pages，用于动态生成HTML页面。
2 Servlet技术
Java Servlet，用于处理客户端请求和生成响应数据。
3 JSTL技术
JSP Standard Tag Library，简化JSP页面中的逻辑操作。
具备跨平台性、安全性和 可扩展性等优点。
3 JavaWeb的应用领域
广泛应用于企业级Web应 用和电子商务系统等领域。
JavaWeb开发环境搭建
1 开发工具选择
选择适合自己开发需求的集成开发环境 （IDE）。
2 安装和配置JDK
下载JDK并设置环境变量，确保能够正常编 译和运行Java程序。
3 安装和配置Tomcat
下载Tomcat并进行相关设置，用于部署和运 行JavaWeb应用。
4 开发环境测试
验证开发环境配置的正确性和可Hale Waihona Puke 性。JavaWeb项目结构
1 Web项目的组成部分
2 搭建项目基本结构
HTML、CSS、JavaScript、 Servlet、JSP等组成一个完 整的Web项目。
课程简介
1 课程目标
了解JavaWeb的基本概念与 应用场景。
2 课程内容概述
介绍JavaWeb开发环境搭建 和常用技术。
3 学习要求
具备Java编程基础和Web开发基础知识。
JavaWeb简介
1 JavaWeb的定义
2 JavaWeb的优势
JavaWeb指的是使用Java 技术进行Web开发的方式。
3 项目部署和运行
将项目部署到Tomcat服务器并进行测试运行。
JavaWeb的主要技术
1 JSP技术
Java Server Pages，用于动态生成HTML页面。
2 Servlet技术
Java Servlet，用于处理客户端请求和生成响应数据。
3 JSTL技术
JSP Standard Tag Library，简化JSP页面中的逻辑操作。
具备跨平台性、安全性和 可扩展性等优点。
3 JavaWeb的应用领域
广泛应用于企业级Web应 用和电子商务系统等领域。
JavaWeb开发环境搭建
1 开发工具选择
选择适合自己开发需求的集成开发环境 （IDE）。
2 安装和配置JDK
下载JDK并设置环境变量，确保能够正常编 译和运行Java程序。
3 安装和配置Tomcat
下载Tomcat并进行相关设置，用于部署和运 行JavaWeb应用。
4 开发环境测试
验证开发环境配置的正确性和可Hale Waihona Puke 性。JavaWeb项目结构
1 Web项目的组成部分
2 搭建项目基本结构
HTML、CSS、JavaScript、 Servlet、JSP等组成一个完 整的Web项目。
第1章Web开发相关技术精品PPT课件
课堂实践2
课堂练习题
1．Web服务是
。
2．IIS的全称为
。
3．什么是网络数据库技术？
2020/10/29 A S P . N E T 2 . 0 程 序 设 计 案 例 教 程
任务3--ASP/PHP /JSP与简介
任务目标 了解各种Web技术，理解各种技术的特点， 明白各种技术的区别。
2020/10/29 A S P . N E T 2 . 0题
1．举例说明什么是静态网页？静态网页有哪些特点？
2．可以与用户相互交互的是
网页。
3．举例说明静态网页与动态网页有什么区别？
4．打开浏览器，在地址栏中输入，进入网易公司126的免费邮箱页面，
任务1--静态网页与动态网页
静态网页的定义
静态网页是指没有后台数据库、不含程序、不可交互的网页。你编写 网页时选择的内容是什么它显示的就是什么，不会有任何改变。静态 网页更新起来比较麻烦，适用于一般更新较少的展示型网站。
静态网页的特点
静态网页没有数据库的支持，在网站制作和维护方面工作量较大， 因此当网站信息量很大时完全依靠静态网页制作方式比较困难； 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静 态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实 实在在保存在服务器上的文件，每个网页都是一个独立的文件； 静态网页每个网页都有一个固定的URL，且网页URL 以.htm、.html、.shtml等常见形式为后缀； 静态网页的内容相对稳定，因此容易被搜索引擎检索； 静态网页的交互性较差，在功能方面有较大的限制。
Script（脚本）与CGI（公用网关接口）的结合体，它没有提供自己专 门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应 用程序
第一章Web技术基础精品PPT课件
高等教育“十一五”国家级规划教材 计算机技术基础
第 1 章 Web技术基础 Part B
使用Apache和Tomcat
计算机网络原理、技术及应用
1.7 使用Apache和Tomcat
Apache与Tomcat
Apache和Tomcat的关系 Apache的安装和配置 Tomcat服务与Servlet/JSP规范 Java运行环境的安装和配置 Tomcat的安装和配置 建立并部署Web应用 使用虚拟目录
操作：
在默认情况下，Java的安 装目录为c:\ Program Files\java\jdk1.6.0_12。 为了下一步环境变量设置 的方便，通常需要修改默 认安装目录。单击“更改…” 按钮，修改Java安装目录， 例如，直接安装在 C:\Java目录下，即： C:\Java\jdk1.6.0_12\
Srevlet/JSP容器，为基于Java的服务器脚本程序提供编译和运 行环境
内置Apache的HTTP服务，对于静态页面的处理速度远不如 Apache
配置选择
Tomcat可单独使用，构建Web服务器。 为了提高Web系统的整体性能 ，应安装Apache服务器器。
计算机网络原理、技术及应用
计算机网络原理、技术及应用
Tomcat,JSP和Java的关系
Tomcat是当前使用最为广泛的Servlet/JSP应用 服务器，是servlet和jsp容器
JSP是HTML和Java程序的综合文档 运行JSP页面需要Java虚拟机
计算机网络原理、技术及应用
Java运行环境
Java运行环境的构成
单击“完成”按钮， 结束Java的安装过 程。此时，在系统 盘中将看到安装 Java所创建的文件
第 1 章 Web技术基础 Part B
使用Apache和Tomcat
计算机网络原理、技术及应用
1.7 使用Apache和Tomcat
Apache与Tomcat
Apache和Tomcat的关系 Apache的安装和配置 Tomcat服务与Servlet/JSP规范 Java运行环境的安装和配置 Tomcat的安装和配置 建立并部署Web应用 使用虚拟目录
操作：
在默认情况下，Java的安 装目录为c:\ Program Files\java\jdk1.6.0_12。 为了下一步环境变量设置 的方便，通常需要修改默 认安装目录。单击“更改…” 按钮，修改Java安装目录， 例如，直接安装在 C:\Java目录下，即： C:\Java\jdk1.6.0_12\
Srevlet/JSP容器，为基于Java的服务器脚本程序提供编译和运 行环境
内置Apache的HTTP服务，对于静态页面的处理速度远不如 Apache
配置选择
Tomcat可单独使用，构建Web服务器。 为了提高Web系统的整体性能 ，应安装Apache服务器器。
计算机网络原理、技术及应用
计算机网络原理、技术及应用
Tomcat,JSP和Java的关系
Tomcat是当前使用最为广泛的Servlet/JSP应用 服务器，是servlet和jsp容器
JSP是HTML和Java程序的综合文档 运行JSP页面需要Java虚拟机
计算机网络原理、技术及应用
Java运行环境
Java运行环境的构成
单击“完成”按钮， 结束Java的安装过 程。此时，在系统 盘中将看到安装 Java所创建的文件
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前端技术》教学ppt课件 11HTML5网络通讯与多线程
HTML5 网络通信与多线程
1
学习导图
11.1 WebSocket
3
11.1.1 WebSocket协议概述
n在传统的TCP/IP网络编程中，可以使用socket接口建立网络连接，实现 客户端和服务器之间的数据传输。
n在Web开发环境下，浏览器与服务器之间主要以HTTP协议进行连接，由 HTTP客户端发起一个请求，创建一个到服务器指定端口(默认是80端口) 的TCP连接。 HTTP服务器则在那个端口监听客户端的请求，一旦收到请 求，服务器会向客户端返回一个状态，比如"HTTP/1.1 200 OK"，以及 返回的内容，如请求的文件、错误消息、或者其它信息。
11.3.1 Web Worker对象
n检测浏览器对Worker的支持情况。
n在 外 部 JavaScript中 创 建 worker线 程 ， 命 名 为 workerTest. js， 子 线 程 监 听 message事件，当收到主线程发来的数据时，调用postMessage方法向主 线程发送信息。
responseType属性用于指定服务器端返回的数据类型，属性值包括text、 arraybuffer、 blob、json或document，默认取值text。 response属性 则根据responseType属性值返回对应的服务端响应数据。 n在传送数据时，新版XMLHttpRequest对象还提供了progress事件，用来 返回进度信息。
11.3 Web Worker
19
11.3.1 Web Worker对象
nJavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程 上完成，一次只能做一件事。
nWeb Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创 建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时， Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务， 再把结果返回给主线程。 这样一些计算密集型或高延迟的任务， 被Worker 线程负担了，主线程(通常负责 UI 交互)就会很流畅，不会被阻塞或拖慢。
1
学习导图
11.1 WebSocket
3
11.1.1 WebSocket协议概述
n在传统的TCP/IP网络编程中，可以使用socket接口建立网络连接，实现 客户端和服务器之间的数据传输。
n在Web开发环境下，浏览器与服务器之间主要以HTTP协议进行连接，由 HTTP客户端发起一个请求，创建一个到服务器指定端口(默认是80端口) 的TCP连接。 HTTP服务器则在那个端口监听客户端的请求，一旦收到请 求，服务器会向客户端返回一个状态，比如"HTTP/1.1 200 OK"，以及 返回的内容，如请求的文件、错误消息、或者其它信息。
11.3.1 Web Worker对象
n检测浏览器对Worker的支持情况。
n在 外 部 JavaScript中 创 建 worker线 程 ， 命 名 为 workerTest. js， 子 线 程 监 听 message事件，当收到主线程发来的数据时，调用postMessage方法向主 线程发送信息。
responseType属性用于指定服务器端返回的数据类型，属性值包括text、 arraybuffer、 blob、json或document，默认取值text。 response属性 则根据responseType属性值返回对应的服务端响应数据。 n在传送数据时，新版XMLHttpRequest对象还提供了progress事件，用来 返回进度信息。
11.3 Web Worker
19
11.3.1 Web Worker对象
nJavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程 上完成，一次只能做一件事。
nWeb Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创 建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时， Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务， 再把结果返回给主线程。 这样一些计算密集型或高延迟的任务， 被Worker 线程负担了，主线程(通常负责 UI 交互)就会很流畅，不会被阻塞或拖慢。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
山东大学计算机科学与技术学院
6
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
4.站点结构：描述站点在服务器上的目录保存方式； 一个站点对应一个文件夹。文件夹和文 件名一定要“望名知义”,站点结构中的 目录和文件名是大小写敏感的。
山东大学计算机科学与技术学院
7
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航- ebay的Email确认函
返回
山东大学计算机科学与技术学院
17
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
浏览器导航
图2.10 浏览器导航
山东大学计算机科学与技术学院
18
历史纪录
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站徽标和名称要放到主页的左上方
返回
山东大学计算机科学与技术学院
32
END
山东大学计算机科学与技术学院
10
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站导航
返回
山东大学计算机科学与技术学院
11
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航- ebay
山东大学计算机科学与技术学院
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
山东大学计算机科学与技术学院
19
收藏夹
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
返回
山东大学计算机科学与技术学院
20
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
24
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
25
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
山东大学计算机科学与技术学院
28
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
其他导航元素
返回
山东大学计算机科学与技术学院
29
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站3次点击规则
在获取信息主要入口点(不一定是从主页开始算
览器导航、站点地图、搜索引擎以及其他引导导航等共同组成，引 导浏览客户从互联网的Web网站中快速、准确地获取信息。 网站信息体系：站点不遵守线性模型，它有分支，根据每一个分支 支持的内容形成不同的深度，这个信息结构称为网站信息体系。 网站导航：串接网站页面的核心链条。 被引导的导航：引领浏览客户按照步骤完成浏览任务。 浏览器导航：地址栏、收藏夹、历史纪录 站点地图：网站信息体系的结构图形表示，显示信息体系中最重要 的层次和站点的不同部分是如何互相联系的，站点地图也称为网站 地图。 搜索引擎：打开互联网信息海洋宝库的一把金钥匙，解决了在信息 海洋中“迷航”的问题。 其他导航：颜色 、图像、超链接颜色 、导航指示符号 。
起)通过导航应该点击不超过3次就可以找到所
需要的信息。
如果过多点击才能获得信息，就会使浏览客户
容易迷失方向和不知所措。
返回
山东大学计算机科学与技术学院
30
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
独特导航
返回
山东大学计算机科学与技术学院
31
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 导航与Web设计
山东大学计算机科学与技术学院
《网站规划与网页设计》
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
概 述
导航的重要性 导航基本概念 导航的分级体系 导航的不同类型 站点结构与导航 Web导航设计原则
山东大学计算机科学与技术学院
4
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.导航基本概念-续
山东大学计算机科学与技术学院
5
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.导航体系
导航体系：由网站导航(主要导航、次要导航)、被引导的导航、浏
山东大学计算机科学与技术学院
8
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 小结
导航的重要性
导航概念以及分级体系
导航的不同类型
站点结构与导航的关系
导航元素：标题、颜色、图像、路标
符号、网站地图
网站导航设计原则
山东大学计算机科学与技术学院
山东大学计算机科学与技术学院
2
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
1.导航的重要性：
导航并非必须，但是导航是获得网站信息最快
捷、最清晰、最易理解的一种方式。 导航能使“游客”知道应该到哪里去畅游，导 航是路线图、是路标。 提供信息的分类以及信息分类之间的切换 。 导航不仅仅是一些超链接，而且是客户一看导 航就知道他需要的信息在那里，导航应该是一 个网站信息的总体分类。 推荐重要的浏览信息：导航可以为浏览客户推 荐网站最重要和具有特色的信息。 导航设计的成功是网站设计成功的关键。
谷歌搜索网站：Larry Page 和 Sergey Brin，该00年1月创立于北京中关村，是全球最大的中文 搜索引擎。
雅虎搜索网站 北京大学天网搜索网站 搜索引擎还有：360综合搜索 (/so/index.html)、 360搜索(/)、必应 bing搜索 (/?scope=web)、有 道youdao搜索 (/)、即刻jike 搜索(/)等。 返回
站点地图
山东大学计算机科学与技术学院
21
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
22
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
23
《网站规划与网页设计》
12
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-注册
山东大学计算机科学与技术学院
13
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-登录电子商务交易平台
山东大学计算机科学与技术学院
14
《网站规划与网页设计》
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
5.Web导航设计原则
导航应遵循“3次点击规则 ” 站点并不需要选择独特的导航方式，特例除外 站点结构清晰和逻辑性强 导航系统是手段不是目的 借鉴成功导航 导航系统应该包含多种导航 ：主要导航、次要导航、站 点地图、热点链接和站内搜索等。 导航外观会对用户产生影响 导航名称要规范和大众化：导航名称要规范、大众化，如 首页、下载。 导航名称命名既要有吸引力又要简明扼要和准确 最新通知和新闻需要有提示 当前导航条提示 网站徽标和名称要放到主页的左上方
山东大学计算机科学与技术学院
3
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.导航基本概念
导航：是一个网站信息的总体分类，提供信息
分类间切换，是信息分类汇总目录的超链接集 合。导航一般可以分为主要导航、次要导航和 被引导的导航等。 主要导航：可以从站点的各类层次栏目的网页 上进行访问，是对整个网站信息的分类划分， 主要导航栏一般应以相同样式在相同位置出现 于所有页面中 次要导航：在指定的某类层次栏目的网页内进 行访问，它是对某一个栏目的信息分类划分， 次要导航栏应以相同样式在相同位置出现于所 有该类的页面中。
9
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 思考问题
2-2 什么是主要导航和次要导航？
2-3 导航体系都主要含有哪些导航？
2-6 站点地图的基本概念是什么？为什么在一个较为复杂
的网站需要创建站点地图？
2-8 什么是站点结构？说明站点结构的重要性。 2-9 什么是导航体系？ 2-10 导航应该遵守哪些主要的导航原则？
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-选择购买物品
山东大学计算机科学与技术学院
15
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-确认所购物品以及付款方式
山东大学计算机科学与技术学院
16
《网站规划与网页设计》
6
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
4.站点结构：描述站点在服务器上的目录保存方式； 一个站点对应一个文件夹。文件夹和文 件名一定要“望名知义”,站点结构中的 目录和文件名是大小写敏感的。
山东大学计算机科学与技术学院
7
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航- ebay的Email确认函
返回
山东大学计算机科学与技术学院
17
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
浏览器导航
图2.10 浏览器导航
山东大学计算机科学与技术学院
18
历史纪录
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站徽标和名称要放到主页的左上方
返回
山东大学计算机科学与技术学院
32
END
山东大学计算机科学与技术学院
10
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站导航
返回
山东大学计算机科学与技术学院
11
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航- ebay
山东大学计算机科学与技术学院
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
山东大学计算机科学与技术学院
19
收藏夹
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
返回
山东大学计算机科学与技术学院
20
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
24
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
25
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
山东大学计算机科学与技术学院
28
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
其他导航元素
返回
山东大学计算机科学与技术学院
29
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
网站3次点击规则
在获取信息主要入口点(不一定是从主页开始算
览器导航、站点地图、搜索引擎以及其他引导导航等共同组成，引 导浏览客户从互联网的Web网站中快速、准确地获取信息。 网站信息体系：站点不遵守线性模型，它有分支，根据每一个分支 支持的内容形成不同的深度，这个信息结构称为网站信息体系。 网站导航：串接网站页面的核心链条。 被引导的导航：引领浏览客户按照步骤完成浏览任务。 浏览器导航：地址栏、收藏夹、历史纪录 站点地图：网站信息体系的结构图形表示，显示信息体系中最重要 的层次和站点的不同部分是如何互相联系的，站点地图也称为网站 地图。 搜索引擎：打开互联网信息海洋宝库的一把金钥匙，解决了在信息 海洋中“迷航”的问题。 其他导航：颜色 、图像、超链接颜色 、导航指示符号 。
起)通过导航应该点击不超过3次就可以找到所
需要的信息。
如果过多点击才能获得信息，就会使浏览客户
容易迷失方向和不知所措。
返回
山东大学计算机科学与技术学院
30
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
独特导航
返回
山东大学计算机科学与技术学院
31
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 导航与Web设计
山东大学计算机科学与技术学院
《网站规划与网页设计》
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
概 述
导航的重要性 导航基本概念 导航的分级体系 导航的不同类型 站点结构与导航 Web导航设计原则
山东大学计算机科学与技术学院
4
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.导航基本概念-续
山东大学计算机科学与技术学院
5
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
3.导航体系
导航体系：由网站导航(主要导航、次要导航)、被引导的导航、浏
山东大学计算机科学与技术学院
8
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 小结
导航的重要性
导航概念以及分级体系
导航的不同类型
站点结构与导航的关系
导航元素：标题、颜色、图像、路标
符号、网站地图
网站导航设计原则
山东大学计算机科学与技术学院
山东大学计算机科学与技术学院
2
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
1.导航的重要性：
导航并非必须，但是导航是获得网站信息最快
捷、最清晰、最易理解的一种方式。 导航能使“游客”知道应该到哪里去畅游，导 航是路线图、是路标。 提供信息的分类以及信息分类之间的切换 。 导航不仅仅是一些超链接，而且是客户一看导 航就知道他需要的信息在那里，导航应该是一 个网站信息的总体分类。 推荐重要的浏览信息：导航可以为浏览客户推 荐网站最重要和具有特色的信息。 导航设计的成功是网站设计成功的关键。
谷歌搜索网站：Larry Page 和 Sergey Brin，该00年1月创立于北京中关村，是全球最大的中文 搜索引擎。
雅虎搜索网站 北京大学天网搜索网站 搜索引擎还有：360综合搜索 (/so/index.html)、 360搜索(/)、必应 bing搜索 (/?scope=web)、有 道youdao搜索 (/)、即刻jike 搜索(/)等。 返回
站点地图
山东大学计算机科学与技术学院
21
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
22
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
站点地图
山东大学计算机科学与技术学院
23
《网站规划与网页设计》
12
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-注册
山东大学计算机科学与技术学院
13
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-登录电子商务交易平台
山东大学计算机科学与技术学院
14
《网站规划与网页设计》
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
5.Web导航设计原则
导航应遵循“3次点击规则 ” 站点并不需要选择独特的导航方式，特例除外 站点结构清晰和逻辑性强 导航系统是手段不是目的 借鉴成功导航 导航系统应该包含多种导航 ：主要导航、次要导航、站 点地图、热点链接和站内搜索等。 导航外观会对用户产生影响 导航名称要规范和大众化：导航名称要规范、大众化，如 首页、下载。 导航名称命名既要有吸引力又要简明扼要和准确 最新通知和新闻需要有提示 当前导航条提示 网站徽标和名称要放到主页的左上方
山东大学计算机科学与技术学院
3
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
2.导航基本概念
导航：是一个网站信息的总体分类，提供信息
分类间切换，是信息分类汇总目录的超链接集 合。导航一般可以分为主要导航、次要导航和 被引导的导航等。 主要导航：可以从站点的各类层次栏目的网页 上进行访问，是对整个网站信息的分类划分， 主要导航栏一般应以相同样式在相同位置出现 于所有页面中 次要导航：在指定的某类层次栏目的网页内进 行访问，它是对某一个栏目的信息分类划分， 次要导航栏应以相同样式在相同位置出现于所 有该类的页面中。
9
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
第2章 思考问题
2-2 什么是主要导航和次要导航？
2-3 导航体系都主要含有哪些导航？
2-6 站点地图的基本概念是什么？为什么在一个较为复杂
的网站需要创建站点地图？
2-8 什么是站点结构？说明站点结构的重要性。 2-9 什么是导航体系？ 2-10 导航应该遵守哪些主要的导航原则？
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-选择购买物品
山东大学计算机科学与技术学院
15
《网站规划与网页设计》
普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材
被引导的导航-确认所购物品以及付款方式
山东大学计算机科学与技术学院
16
《网站规划与网页设计》