计算机网络技术与应用 11

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

</head>
<body>
<p>红色宋体文字</p> </body>
被链接文件与 HTML文件的关系
6.2 Dreamweaver网页开发
• 所见即所得网页代码编辑器
– 支持HTML、CSS、JavaScript
网页编辑框
网页元素
例：6-2
网页内容编辑
• 在DM中创建HTML页面“switch.html”，介绍交换机的主要类型
CSS定义方式-嵌入式
• 控制一个网页内具有相同样式的多个元素
<head> <style type=”text/css”> p { color: # FF0000; font-family:宋体; }
</style> </head> <body>
<p> 红色宋体文字 </p> </body>
CSS定义方式-外部链接式
第6章
Web应用开发技术
主要内容
• Web开发基础知识 • Dreamweaver网页开发 • JSP服务器端开发
6.1 Web开发基础
• Web应用—B/S架构
– 在客户端和服务器端进行数据处理和交换
客户端发送请求
客户端页面和代码
客户端
系统软件：Web服务器、应用服务器、数据库服务器
应用软件：网站程序或Web应用程序分为服务端和客户端
工具软件：Browser
Web应用工作机制
• 应用系统部署在服务器端
• 用户通过浏览器访问应用系统，使用应用
系统提供的2功. 返能回HTML页面或
根据动态代码将请求
1.使用浏览器发出访问请求
应用服务器
发给应用服务器
④③
② ⑤
Web服务器
①
Internet/ Intranet
⑥
3. 4. 数数据据服库服务器务请求交互
• ASP和ASP.NET开发技术
– ASP可用来创建动态交互式网页并建立强大的Web应用程序
– ASP.NET是.NET 框架中用于生成Web应用程序和Web 服务的技术平台
HTML标记语言
• 超文本标记语言 • Hyper Text Markup Language HTML
– 标记（tag）标识信息、显示样式 – 每个标记用“<>”标识 – 标记：名称和属性
– Bootstrap：基于HTML、CSS和JavaScript的前端开发框架
Web服务器端技术
• JSP开发技术
– 动态网页技术标准，在HTML页面中插入Java程序段（Scriptlet）和JSP标记
• PHP开发技术
– 通用开源脚本语言，它将程序嵌入到HTML文档中执行，实现动态页面
• Eclipse
– Java集成开发环境，选用
发布Web应用程序
• 创建学生课后练习网页“exer.html”
表单元素
按钮
6.3 JSP服务器端开发
• Web开发运行环境
– 包括JDK、Tomcat、Eclipse等
• JDK下载配置
– JAVA运行环境、虚拟机和开发工具 – 下载安装后，需进行“系统环境变量”配置
• Tomcat安装配置
– 开源的轻量级Web应用服务器 – 适合于中小型和并发访问量较轻的系统 – 安装后，需进行配置
例：6-3
网页样式编辑
• 美化例6-2中的“switch.html”页面
设置文字样式
设置页面属性，修改页边距
增加网页背景
表单元素
• 表单在网页负责数据采集
– 表单标签 – 表单域 – 表单按钮
• 表单只提供交互功能
– 数据采集提交服务器处理，还需要对应的服务端程序来实现
例：6-4
插入表单元素
<tr> <td>单元格内容</td>
</tr> </table> <p>段落内容文本</p>
<div style=”float:left”>左对齐的内容</div>
<img src=”图片地址”> <a href=”index.html”>首页</a> 
换行控制的标记
<form> 用户名:<br>
<input type="text" name="username"> </form>
CSS技术
• 层叠样式表CSS（Cascading Style Sheet）
– 将样式定义在单独的样式文件，实现显示内容和显示样式的分离
– 为网站提供通用外观
• CSS定义范围
– 大多数传统的文本属性，如字体、字形、字号、字距等；
5. 将处理结果返回Web服务器
5. 结果嵌入在 HTML页面中
返回用户
Web开发技术
• Web程序主要包括客户端和服务器端两部分 • 客户端程序（前端）
– 通过浏览器与用户交互，集中获取用户数据提交服务端处理
– 获得服务器端反馈后，通过文字、图表、动画等Hale Waihona Puke Baidu多种形式展示给用户
• 服务端程序（后端）
• 适用于控制多个具有相同样式的元素的网页
– 将样式保存在一个或多个单独的CSS文件中
– 创建style.css文件
p { color: red; font-family:宋体; }
• HTML文件内容
<head>
<link href=”style.css” type=”text/css” rel=”stylesheet”/>
– 负责根据用户请求处理应用逻辑，实现应用数据的存储、查询和封装等客户端任务
Web客户端技术
• 客户端任务
– 传递到客户端由浏览器解释和执行 – 展现从服务器端获取的信息内容
• 相关技术
– 基本展示：HTML语言、CSS等 – 动态展示：
• GIF图像、Flash • 脚本语言（Java Script）、HTML5
– 页边距、颜色、底图等排版属性 – 某些指定文本的格式 – 一次控制一篇或若干篇文档的格式
CSS定义方式-内联式
• 内联式适用于单独控制单个元素的样式
– <p style=color: #FF0000; font-family:宋体;”> 红色宋体文字 </p>
• 缺点
– 修改某些元素的样式时，需要对各个元素逐一修改
• 例：<title>一个简单的HTML文档</title>
例：6-1
标记
<title> <hx>
<table> <tr> <td>
<p> <div> <img> <a>  <br>
<form>
常用标记
实例
<title>一个简单的HTML文档</title> <h1>h1标题</h1> <h2>h2标题</h2> <table>