第1章(2) 网页设计与制作基础
网页设计与制作第一章网页制作基础1
Linking Language)。
2019/10/24
29
1.22 静态网页和动态网页
静态网页指基本上全部使用 HTML语言制作的网页，页面的 内容是固定不变的。
2019/10/24
动态网页（DynamicHTML， DHTML）利用JavaScript，CSS (层叠样式表) 及其它类似的语言如 VBScript等与HTML进行有机的结 合来使静态的HTML网页变成动态。
2019/10/24
</BODY>
24
</HTML>
（1）版本信息 版本信息位于HTML网页文件的第一行
（2）HTML文件标记 大部分网页文件都是以<HTML>标记开始的，在文件
的结尾处又以</HTML>结束
（3）头部信息 HEAD标记之间是HTML文档的头部，用来标明当前文档
的有关信息
在HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。
2019/10/24
Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。
Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
27
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
网页设计与制作
第1章 网页制作基础
南海学院计算机系制作
第1章 网页制作基础
Web和浏览器
Web
Web的特点和结构
Web 最 大 的 特 点 是 使 用 了 超 文 本 （Hypertext）
WWW采用C/S（客户机/服务器）工作模式
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
第一至三章网页设计与制作基础
第一至三章网页设计与制作基础第一章1.什么是网络协议，内容主要包括？网络协议是一系列通信规则的总称，主要包括：1.用户数据与控制信息的结构和格式；2.需要发出的控制信息以及相应要完成的操作与响应；3.对事件实现顺序的详细说明等三部分内容。
2.网络中存在着多种级别的协议。
总的来说可以分为？1、硬件协议：定义了硬件设备如何运作以及如何协同工作。
2、软件协议：程序之间的通信是通过软件协议完成的。
第二章一、在网站设计时还需要考虑以下基本原则：1.网页内容要便于阅读；2.站点内容要精、专和及时更新；3.注重色彩搭配；4.考虑带宽；5.要适当考虑不同游览器、不同分辨率的情况；6.提供交互性；7.简单即为美。
二、整个站点设计大体分为八个部分？1、初始商讨；2、构思；3、综合内容；4、页面布局和导航；5、图形制作；6、内容流程；7、测试；8、验收交付；三、有关商业网站的风格特征？1.公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小；2.可以采用主题图形、产品广告来突出公司形象与风格。
3.主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小；4.不要把主要栏目和次要栏目都显示在同一个页面上；5.商业网站一般都有固定的栏目页面，如：Support，service，About us等；6.必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。
四、非商业组织的网站风格？1.强调页面的主色调；2.主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼；3.超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎；4.信息看板很重要，因为非商业组织的网站更新不如商业网站频繁，始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的访问兴趣。
五、个人网站的基本风格？1.主题图形式：最显著的标志是主页有一个醒目的图形，该图形很大程度上反映了网页作者希望自己的网页具有的一种意境。
网页设计与制作- 第01章_网页设计概述
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。
第1章网页设计与制作基础
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
网页设计与制作基础知识
网页设计与网站建设第1章网页制作基础知识本章内容1.1 基本概念☐计算机网络是Internet的基础，是多台计算机通过特定的连接方式构成的一个计算机的集合体。
☐网络是现代社会传播信息的重要途径，而网页又是这一途径中最为重要的手段。
可以说，在上网冲浪已经成为一种时尚的今天，网页已经成为人们与外界沟通的重要桥梁。
1.1.1 什么是Internet☐Internet，即英特网的英文表示，是最著名的广域网。
☐全世界的计算机相互连接而形成一个整个地球规模的计算机网络，这个全地球规模的计算机网络就是Internet。
☐在Internet中的任意一台计算机都可以从Internet上的其它计算机中来获得信息。
Internet的历史它起源与1969年，是由美国国防部设立的名为APPANET的军用网络。
1982年，美军方从APPANET 撤出，主要用于学术机构的连接，科学家可以分享数据今天Internet，以千万计的用户使用的全球性网络，没有人或机构拥有或全面控制。
Internet在我国的发展现状从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，从此，中国Internet发生了飞速的发展。
截至2009年底，我国网民人数达到了3.84亿，即每四人中就有一人是网民。
另外网站数、IP地址等也迅速增长，分别达到251万和2.3亿。
从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。
Internet的接入方式PSTN接入（电话拨号）ISDN接入（综合业务数据网）DDN专线接入（数字数据网）DSL接入（宽带技术）分为对称的DSL和非对称的DSLInternet基本服务功能WWW服务WWW（World Wide Web，可译为“万维网”），是一个基于超级文本的信息查询工具。
WWW是在Internet的基础上，由各计算机节点上的WWW软件和超级文本格式的信息文件组成的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用背景图案时， 使用背景图案时，如果图案小于浏览器窗口的 大小， 大小，则浏览器会自动象铺地板砖一样平铺背景图 例如，以下代码显示了设置背景图案的效果， 案。例如，以下代码显示了设置背景图案的效果， 所示。 如图 1-9 所示。 <HTML> <HEAD> <TITLE>背景图案示例 背景图案示例 </TITLE></HEAD> <BODY background="background.jpg"> 背景图案示例 </BODY> </HTML>
图 1-4 浏览器解释 HTML 标记符示意
HTML 中的超文本功能，也就是超链接功 中的超文本功能， 使网页之间可以链接起来。 能，使网页之间可以链接起来。网页与网页的链 接构成了网站， 接构成了网站，而网站与网站的链接就构成了多 姿多彩的 WWW。 。 HTML 由国际组织 W3C（万维网联盟）制 （万维网联盟） 定和维护， 是目前支持最好的标准（ 定和维护，HTML 3.2 是目前支持最好的标准（ 几乎所有浏览器都支持），但 HTML 4.0 也已逐 几乎所有浏览器都支持），但 ）， 步普及。 步普及。最新的标准是 HTML 4.01，它对 ， HTML 4.0 作了一些小的修正。对于基本的标记 作了一些小的修正。 基本一致，在本书中不作区分， 符，3.2 与 4.0 基本一致，在本书中不作区分， 为基础的。 但本书中的主要内容是以 4.0 为基础的。
图 1-2 网页的源文件
这些文本其实就是网页的本质—— HT Markup Language，超文 （ ， 本标记语言）是表示网页的一种规范（ 本标记语言）是表示网页的一种规范（ 或者说是一 种标准） 它通过标记符定义了网页内容的显示。 种标准 ） ，它通过标记符定义了网页内容的显示 。 例如，用 <table> 标记符可以在网页上定义一个表 例如， 格。 说明：超文本是相对普通文本而言的， 说明 ： 超文本是相对普通文本而言的， 与普通文 本按顺序定位不同， 本按顺序定位不同， 超文本最典型的特点就是文本 中包含指向其他位置的链接， 中包含指向其他位置的链接， 通过这些链接使文档 组织成了网状结构，如图 1-3 所示（这实际上也是 组织成了网状结构， 所示（ WWW 信息组织的基本原理）。例如，我们可以把 信息组织的基本原理） 例如， 常规意义上的书本理解为普通文本， 常规意义上的书本理解为普通文本， 而把由超链接 组织起来的电子文档理解为超文本。 组织起来的电子文档理解为超文本。
图 1-3 超文本示意图
文档中， 在 HTML 文档中，通过使用标记符可以告诉浏 览器如何显示网页， 即确定内容的显示格式。 览器如何显示网页 ， 即确定内容的显示格式 。 浏览 文件， 器按顺序读取 HTML 文件 ， 然后根据内容周围的 HTML 标记符解释和显示各种内容。例如，如果为 标记符解释和显示各种内容。例如， 标记符， 某段内容添加 <H1></H1> 标记符，则浏览器会以比 一般文字大的粗体字显示该段内容， 所示。 一般文字大的粗体字显示该段内容， 如图 1-4 所示。
图 1-1 上网冲浪的基本工作原理
1.1.1.3 网站与主页
1.1.2 HTML 的工作原理 如果在浏览器中任意打开一个网页， 如果在浏览器中任意打开一个网页，然后在窗 口中空白位置单击鼠标右键，选择“查看源文件” 口中空白位置单击鼠标右键，选择“查看源文件” 命令（或者选择“查看”菜单中的“源文件” 命令（或者选择“查看”菜单中的“源文件”命令 ），则系统会启动“记事本”，其中包含一些文本 ），则系统会启动“记事本” 则系统会启动 信息， 所示。 信息，如图 1-2 所示。
1.2.1 标记符基础 1.2.1.1 基本的 HTML 语法 1.2.1.2 标记符的属性 1.2.2 Web 页的基本结构 1.2.2.1 HTML标记 标记 1.2.2.2 首部标记
1．TITLE 标记符 ． 在首部标记符中，最基本、 在首部标记符中，最基本、 最常用的标记符 是标题标记符 <TITLE> 和 </TITLE>，用于定义 ， 网页的标题。 网页的标题 。 网页标题可被浏览器用作书签和收 藏清单。当网页在浏览器中显示时， 藏清单 。 当网页在浏览器中显示时 ， 网页标题将 在浏览器窗口的标题栏中显示。 在浏览器窗口的标题栏中显示。 例如， 例如，以下 HTML 代码在浏览器中的显示如 所示。 图 1-6 所示。
Cyan； Magenta。 注：Aqua 也称 Cyan；Fuchsia 也称 Magenta。
1.2.3.2 设置页面背景图像 单纯使用一种颜色作为背景显然有些单调， 单纯使用一种颜色作为背景显然有些单调 ， 网页设计者也可选择特定图案作为页面的背景— 网页设计者也可选择特定图案作为页面的背景 —使用 BODY 标记符的 background 属性即可。 属性即可。 使用 HTML语句为： 语句为： 语句为 <BODY background = "网页背景图案的地址 网页背景图案的地址"> 网页背景图案的地址
1.2.2.3 正文标记符 正文标记符 <BODY> 和 </BODY> 包含 Web 页 的具体内容， 包括文字、 图形、 的具体内容 ， 包括文字 、 图形 、 超链接以及其他各 对象。 种 HTML 对象。 如果没有其他标记符修饰， 如果没有其他标记符修饰 ， 正文标记符中的文 字将以无格式的形式显示（ 字将以无格式的形式显示 （ 如果浏览器窗口显示不 则自动换行） 下，则自动换行）。 例如， 例如，以下 HTML 代码在浏览器中的显示如图 1-8 所示。 所示。
背景图片
设置为背景时的效果
图 1-9 背景图案示例
注意：如果要使以上代码正确工作， 注意 ： 如果要使以上代码正确工作 ， 必须在 文件。 网页所在目录包含 background.jpg 文件。 用户也可以同时设置网页的背景图案和背景 在这种情况下， 色 ， 在这种情况下 ， 只有在浏览器不能显示图像 时才显示背景色。 例如， 时才显示背景色 。 例如 ， 如果用户将浏览器设置 为不显示图像（选择“工具”菜单中的“ 为不显示图像（选择“工具”菜单中的“Internet 选项” 命令， 然后选择“ 高级” 选项卡， 选项 ” 命令 ， 然后选择 “ 高级 ” 选项卡 ， 在 “ 多 媒体” 下设置） 媒体 ” 下设置 ） ， 那么给网页设置的背景图案将 不显示，而是显示背景颜色。 不显示，而是显示背景颜色。 1.2.3.3 设置背景图像水印效果 1.2.3.4 设置文字和超链接的颜色
如果需要了解 HTML 的更详细 情 况 ， 请 访 问 W3C 的 官 方 网 站 ： （ 如图 1-5 所示 ） ， 所示） （ 可以从该网站中获得最新的 HTML 规 范。
图 1-5 W3C 的官方网站
1.2 创建 Web 页
表 1-1
色彩名 Aqua（水蓝色） Black（黑色） Blue（蓝色） Fuchsia（樱桃色） Gray（灰色） Green（绿色） Lime（石灰色） Maroon（褐红色）
16 种标准颜色
十六进制值 #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 色彩名 Navy（藏青色） Olive（茶青色） Purple（紫色） Red（红色） Silver（银色） Teal（茶色） White（白色） Yellow（黄色） 十六进制值 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00
<HTML> <HEAD> <TITLE> 网 页 标 题 </TITLE> </HEAD> <BODY> 正 文 ， 正文 ， 正文 ， 正 文， 正文，正文，正文， 正文，正文，正文， 正文， 正文，正文 </BODY> </HTML>
图 1-8 BODY 标记符中的正文
注意：空格、 注意：空格、回车这些格式控制在显示时都不 起作用，如要使它们起作用， 起作用，如要使它们起作用，应使用预格式化标记 符 <PRE> 和 </PRE> 将需要采用原始格式的内容 包含起来。 包含起来。
第1章(2) HTML基础 HTML基础
1.1
什么是HTML 什么是
1.2 创建 Web 页 1.3 发布 Web 页
1.1
什么是HTML 什么是
1.1.1 Web 页的基本概念 1.1.1.1 Internet 与 WWW 1.1.1.2 WWW 与浏览器 当我们在网上冲浪时， 当我们在网上冲浪时，基本工作过程如图 1-1 所 示。
说明： 说明：HTTP 是 HyperText Transfer Protocol（ （ 超文本传输协议）的缩写， 超文本传输协议）的缩写，它是 Internet 上最常用 的协议之一。 的协议之一。 例如： 例如：<META http-equiv="Content-ScriptType" content="text/javascript"> 设置客户端行内程 序的语言是 JavaScript；<META http； equiv="Content-Style-Type" content="text/css"> 设 置行内样式的样式语言为 CSS。 。 META 标记符的一个常用功能是设置自动转址 功能，即使浏览器自动从一个地址跳转到另一个地 功能， 如下所示。 址，如下所示。
1.2.3 设置页面属性 1.2.3.1 设置页面背景颜色 在 <BODY> 标记符中使用 bgcolor 属 性可以为网页设置背景颜色。例如， 性可以为网页设置背景颜色。例如，如果想 为网页设置黑色背景，应使用以下HTML语句： 为网页设置黑色背景，应使用以下HTML语句： HTML语句 <BODY bgcolor="black"> 在指定背景颜色时， 在指定背景颜色时，有 16 种标准颜色 可供选择， 所示。 可供选择，如表 1-1 所示。