网页设计全部课件.ppt
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页设计全部课件.ppt
1、由文字链接到别处： 格式：<a href=“链接地址”>文字</a>
如： <a href=“Http://www.gxuБайду номын сангаас”>广西 民族大学</a>
2、由图片链接到别处： 格式：<a href= “链接地址” ><img src=“图片存放
位置"></a>
1.2 Dreamweaver 8的操作界面
(8)保存网页，并按F12预览即可看到效果。
1.4.3 网站框架和站点文件夹
建立站内文 件夹框架。 新建立的站 点可以进行 文件夹的移 动、修改和 删除。
Dreamweaver的文字插入
网页各元素的设计
1、文字：直接输入，通过属性设置其大小、颜 色、字体、加粗等。（与Word类似）
如果字体列表中没有想要的字体，则需添加，方 法：单击“字体”—“编辑字体列表”—在 “可用字体”中将需要的字体添加到右边的 “选择字体”框中，单击确定，再次单击 “字体”，选择刚添加进来的字体即可。
(5)选择网页的存储位置为“D:\ Myweb+学号”，单击“下一 步”。
(6)在“如何连接远程服务器”中选择“无”，单击“下一步”— “完成”，即可在右边的文件管理器中看见Web1站点。
(7)右键单击“站点—Web1“，选择”新建”—文件，即可建立网 站的第一个网页文件，通常命名为index.html，并作为主页。
1.4.2 建立Dreamweaver 8本地站点
新建站点 ：
(1)在D盘新建一个文件夹“Myweb+学号”作为站点文件夹。
(2)在文件夹“Myweb+学号”中再创建Images文件夹作为存放图 片的地方。
《网页设计》完整课件网页设计
•《网页设计》完整课件网页设计
创建本地站点
■ 创建本地站点的方法：
■单1、击第一此步处必须编先辑在本母地版计算标机题的磁样
盘上建立一个文件夹。（作为本地
站点的根文件夹）式
■ 提示：为了方便以后管理站点上的文件， 先在本单地击文此件处夹编中辑创母建版几副个标目题录样：式htm、 img、 others，分别存放网页设计中用到 的资源及网页文件。
•《网页设计》完整课件网页设计
➢ 在“http地址”文本框中，输入已完成的Web 站点将使用的URL。
➢ 对于“启用缓存”选项，指定是否创建本地 缓存以提高链接和站点管理任务的速度，这 是DreamweaverMX 提供的很好的资源，要 选中。 在本地计算机上设计网页，本地站点的信息 设置已经足够了，远程站点的信息以后设置。
三、 对象面板（“插入”栏）
对象面板的作用就是在光标的后面加入不同的对 象，如表格、图像、图层等。它包含用于将各种 类型的“对象”插入到文档中的按钮。
对象面板共分12项，分别是：常用、布局、文本、 表格、框架、表单、模板、字符、媒体、文件头、 脚本、应用程序。
对象面板是在网页中创建各种类型元素的重要工 具，使用对象面板时，只要单击对象按钮到页面 编辑窗口就可以插入对象了。根据插入的对象不 同，Dreamweaver会弹出相应的对话框，让用户 对插入的对象做进一步的设置。
•《网页设计》完整课件网页设计
可以修 改工作 区的风
格
参数选择对话框•《网页设计》完整课件网页设计
2、在“参数选择”对话框中的左侧的 “分类”列表中选择“常规”类。 3、单击“更改工作区”按钮。 4、选择一种工作区布局，然后单击“确 定”按钮。此时系统会出现一条警告信 息，通知您重新启动Dreamweaver后将出 现新的布局。 5、退出Dreamweaver MX，并重新启动 它，就换了一种工作界面。
创建本地站点
■ 创建本地站点的方法：
■单1、击第一此步处必须编先辑在本母地版计算标机题的磁样
盘上建立一个文件夹。（作为本地
站点的根文件夹）式
■ 提示：为了方便以后管理站点上的文件， 先在本单地击文此件处夹编中辑创母建版几副个标目题录样：式htm、 img、 others，分别存放网页设计中用到 的资源及网页文件。
•《网页设计》完整课件网页设计
➢ 在“http地址”文本框中，输入已完成的Web 站点将使用的URL。
➢ 对于“启用缓存”选项，指定是否创建本地 缓存以提高链接和站点管理任务的速度，这 是DreamweaverMX 提供的很好的资源，要 选中。 在本地计算机上设计网页，本地站点的信息 设置已经足够了，远程站点的信息以后设置。
三、 对象面板（“插入”栏）
对象面板的作用就是在光标的后面加入不同的对 象，如表格、图像、图层等。它包含用于将各种 类型的“对象”插入到文档中的按钮。
对象面板共分12项，分别是：常用、布局、文本、 表格、框架、表单、模板、字符、媒体、文件头、 脚本、应用程序。
对象面板是在网页中创建各种类型元素的重要工 具，使用对象面板时，只要单击对象按钮到页面 编辑窗口就可以插入对象了。根据插入的对象不 同，Dreamweaver会弹出相应的对话框，让用户 对插入的对象做进一步的设置。
•《网页设计》完整课件网页设计
可以修 改工作 区的风
格
参数选择对话框•《网页设计》完整课件网页设计
2、在“参数选择”对话框中的左侧的 “分类”列表中选择“常规”类。 3、单击“更改工作区”按钮。 4、选择一种工作区布局，然后单击“确 定”按钮。此时系统会出现一条警告信 息，通知您重新启动Dreamweaver后将出 现新的布局。 5、退出Dreamweaver MX，并重新启动 它，就换了一种工作界面。
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
《网页设计课件PPT》
T》！本课程将介绍网页设计的基础知识、工具 软件、HTML语言、CSS样式表、JavaScript脚本语言，以及网页布局设计原 则。快来加入我们吧！
基础知识
本节介绍网页设计的基础知识，包括网页设计的定义和发展历程。了解这些 基础知识将帮助您更好地理解网页设计的重要性和影响。
图片和颜色的运用技巧
图片和颜色是网页设计中的重要元素，能够吸引用户的注意力并传达信息。 在本节中，我们将分享一些图片和颜色的运用技巧，帮助您创建视觉上吸引 人的网页设计。
网导航设计与实现
一个清晰且易于使用的网站导航对于提供良好的用户体验至关重要。在本节中，我们将介绍一些网站导 航设计的原则以及使用HTML和CSS实现网站导航的方法。
网站安全问题与解决方案
网站安全问题是网页设计中需要重视和解决的一个方面。在本节中，我们将 介绍一些常见的网站安全问题和相应的解决方案，以保护网站和用户的信息 安全。
网页布局设计原则
一个好的网页布局设计能够提升用户体验和视觉效果。本节将介绍一些网页 布局设计原则，包括对齐、比例、重复和对比等，帮助您创建出吸引人的网 页设计。
整站规划与页面设计风格
一个成功的网站需要良好的整站规划和一致的页面设计风格。本节将讲解如 何规划整个网站的结构，并选择合适的页面设计风格以增加用户体验和品牌 形象。
工具软件介绍
在本节中，我们将介绍一些常用的网页设计工具软件，如Adobe Photoshop、Adobe Illustrator和 Sketch等。这些工具软件能够帮助您创建精美的网页设计作品。
HTML语言的基础语法
学习HTML语言的基础语法对于网页设计至关重要。本节将详细讲解HTML标 签、元素和属性的使用方法，以及如何创建基本的网页结构。
基础知识
本节介绍网页设计的基础知识，包括网页设计的定义和发展历程。了解这些 基础知识将帮助您更好地理解网页设计的重要性和影响。
图片和颜色的运用技巧
图片和颜色是网页设计中的重要元素，能够吸引用户的注意力并传达信息。 在本节中，我们将分享一些图片和颜色的运用技巧，帮助您创建视觉上吸引 人的网页设计。
网导航设计与实现
一个清晰且易于使用的网站导航对于提供良好的用户体验至关重要。在本节中，我们将介绍一些网站导 航设计的原则以及使用HTML和CSS实现网站导航的方法。
网站安全问题与解决方案
网站安全问题是网页设计中需要重视和解决的一个方面。在本节中，我们将 介绍一些常见的网站安全问题和相应的解决方案，以保护网站和用户的信息 安全。
网页布局设计原则
一个好的网页布局设计能够提升用户体验和视觉效果。本节将介绍一些网页 布局设计原则，包括对齐、比例、重复和对比等，帮助您创建出吸引人的网 页设计。
整站规划与页面设计风格
一个成功的网站需要良好的整站规划和一致的页面设计风格。本节将讲解如 何规划整个网站的结构，并选择合适的页面设计风格以增加用户体验和品牌 形象。
工具软件介绍
在本节中，我们将介绍一些常用的网页设计工具软件，如Adobe Photoshop、Adobe Illustrator和 Sketch等。这些工具软件能够帮助您创建精美的网页设计作品。
HTML语言的基础语法
学习HTML语言的基础语法对于网页设计至关重要。本节将详细讲解HTML标 签、元素和属性的使用方法，以及如何创建基本的网页结构。
网页制作ppt课件
➢ 页面的布局 ➢ 页面属性的设置
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
网页设计课件-第1章
尺寸属性
包括宽度和高度等。
CSS常见布局
浮动布局
使用float属性使元素浮动到一 侧，其他文本和内联元素将围 绕它流动。
Flexbox
弹性盒子模型是一种现代的布 局模式，可以轻松地设计复杂 的布局结构。
块级元素和行内元素
块级元素占据其父元素的整个 宽度，行内元素不会打断文本 流。
定位
使用position属性可以将元素 定位在相对于其正常位置或相 对于其父元素的位置。
链接到CSS样式表
(<link rel="stylesheet"
href="styles.css">) 等。
HTML常见标签
<h1>-<h6>
标题标签，`<h1>` 表示最高级别的标题，`<h6>` 表示 最低级别的标题。
<p>
段落标签。
<a>
链接标签，用于创建超链接。
<img>
图像标签，用于插入图像。
通过类属性选择要应用样式的 元素。
ID选择器
通过ID属性选择一个特定的 元素。
属性选择器
根据元素的属性选择要应用样 式的元素。
CSS样式属性
文本属性
包括文本对齐方式、 缩进、装饰等。
边框属性
包括边框样式、宽 度和颜色等。
字体属性
包括字体类型、大 小、颜色、行高等。
颜色和背景属性
包括背景颜色、背 景图像等。
常见的HTML元素包括段落 (`<p>`)、标题 (`<h1>`-`<h6>`)、链接 (`<a>`<tr>`、 `<td>`)、表单 (`<form>`、`<input>`、`<button>`) 等。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
属性面板
浮动面板组
1.2.1 标题栏
有起始标记和结尾标记。元素的起始标记叫做起始链 接签(start tag)，元素结束标记叫做结尾链接签(end tag)，在起始链接签和结尾链接签中间的部分是元素 体。 每一个元素都有名称和可选择的属性，元素的名
称和属性都在起始链接签内标明。 如：<title>标题
</title>
一般来讲，html的元素有下列三种表示方法，即HTML语句行 有如下的形式：
1.2.1 标题栏 1.2.2 菜单栏 1.2.3 插入栏面板 1.2.4 编辑窗口 1.2.5 文档工具栏 1.2.6 状态栏 1.2.7 属性面板 1.2.8 辅助设计工具
1.2 Dreamweaver 8的操作界面
插插入入栏面板栏 文档工具栏 菜单栏 文档编辑窗口 标题栏
状态栏
◎<html>和</html> 表示文件的开始与结束，被放置在整个文件的开始与结束
之处。
◎<head>和</head> 用来标示文件头。在这组标记里我们可以加入<title>和
</title>这组标记。
◎<title>和</title> 用来指定浏览器窗口的标题。
◎<body>和</body>
在这组标记里我们可以加入文件内容。另，我们可以利用 <body>做一些设定：
网页制作
2019/12/21
主讲教师：李永胜 ——数计学院
Tel: 13768272980 E-mail: lyshlh@
课程与上机安排
总课时：20学时，5周，4节/周 其中：2节理论课，2节上机课 课程性质：通识选修课 考核方式：考查，笔试，开卷（一般都能通过），安排在第五
网页的基本知识
1、以学校网站和涂鸦轩网站为例说明网站的基本构成。 2、网页制作常用知识简介。 (1)HTML语言的知识：它是网页设计的主要语言，构成了
网页的基本框架。 (2)Dreamweaver软件：网页制作中构造框架的主要软件。 (3)Flash软件：动画制作软件。 (4)FireWorks软件：动态图片的制作软件。
</body>
三、 构成网页的基本元素
1、分段元素与分行元素 html的分段完全依赖于分段元素<P>。回车
不能形成分段，而分行则用<br> 2、居中链接签<center>…</center> 3、字体大小、颜色： <font size=字号 color=颜色>文字</font> 4、横线：hr 线长和线宽用<hr size=n width=n>指定，width是指线长，
课程考试通知
考试形式：开卷，笔试 时间：4月24日（下周日）下午2:30~5:00。 地点：逸夫楼604、703、704 注意： 1、2:30~3:00为机器调试和拷贝课件时间，正式考试时间是：
3:00~5:00，请大家互相转告。 2、大家把试卷写完后，可以在以下两个时间段交卷： （1）下周二上午十点到十点半拿到逸夫楼707交卷。 （2）下周三上午十点到十点半拿到逸夫楼602交卷。
1、由文字链接到别处： 格式：<a href=“链接地址”>文字</a>
如： <a href=“”>广西 民族大学</a>
2、由图片链接到别处： 格式：<a href= “链接地址” ><img src=“图片存放
位置"></a>
1.2 Dreamweaver 8的操作界面
1)<元素名>文件或超文本<／元素名> <title>标题</title>
2)<元素名 属性名＝“属性值…>文本成超文本<／元素名 >
<body bgcolor=yellow> 背景颜色 </body>
3)<元素名> <P>
一个html文件应具有下面最基Байду номын сангаас的 结构：
一般来说，一个html文件应具有下面最基本的结构： <html> <head> <title>标题</title> </head> <body> 文件内容 </body> </html>
次课进行，地点：逸夫楼7、8楼。 教材： 自编，即上课所使用的课件。 推荐教材：甘登岱 编著 《网页制作三剑客Dreamweaver 8
/Firewprks 8/flash 8(第五版)》附光盘一张 北京：机械工 业出版社 2006年10月第1版 价格32元 当当网（ 买书可以打折，价格 23.9元）
【设定背景颜色】： 其设定方法为<body bgcolor=颜色名称>。 范例： <body bgcolor=yellow> 现在的背景颜色是黄色哦！ </body>
【设定背景图片】： 其设定方法为<body background=“背景图片路径”> 范例： <body background=“bg02.bmp”> 看看背景图案是否不一样了！注意：仅支持BMP跟gif格式的 图片，且图片bg02.bmp必须跟网页在同一个路径下。
size 指线宽，单位是象素 5、空格的表示方法：直接写 。 6、插入图片： <img src=“图片路径”></img>
四、 超文本链接
超文本链接指针是html最吸引人们优点之一。 使用超文本链接指针可以使顺序存放的文件具 有一定程度上随机访问的能力，这更加符合人 类的思维方式。人的思维是跳跃的、交叉的， 而每一个链接指针正好代表了作者或者读者的 思维跳跃。因而组织得好的链接指针不仅能使 读者跳过他不感兴趣的章节(比如一些枯燥的 数据)，而且有助于更好地理解作者的意图。
补充知识：HTML语言基础知识
用记事本编辑网页的方法：
1.创建一个记事本. 2.在记事本中输入HTML语句. 3.将记事本另存为.htm文件.(在保存类 型中选择“所有文件“)
二、Html文件简介
html文件是标准的ASCII文件，它看起来象是加入了 许多被称为链接签(tag)的特殊字符串的普遍文本文件。 从结构上讲，html文件由元素(element)组成，组成 html文件的元素有许多种，用于组织文件的内容和指 导文件的输出格式。绝大多数元素是“容器”， 即它