Dreamweaver学习HTML+DIV+CSS教学PPT第3章__网页主体Body
合集下载
第3章 使用Dreamweaver制作简单网页(ppt)
第3章 使用Dreamweaver制作简单网页
3.3.2 CSS的基本语法
+
3.3 初识CSS
CSS语言由两部分构成：选择符（selector），以及一条或多条声明，其中声明 由一个属性（property）和一个属性值（value）组成。
属性
值
属性
值
选择器
声明
声明
图3-29 CSS语法结构
第3章 使用Dreamweaver制作简单网页
11/26/2014
清华大学
第3章 使用Dreamweaver制作简单网页
+
3.4 CSS选择符
3.4.2 ID选择符与类选择符
1．ID选择符 ID选择符是以“#”开头，在一个XHTML文件中id具有唯一性是不可以 重复的。 2．类选择符 类选择符，通过直接引用元素中类属性的值而产生效果，这个应用前面 总是有一个句点“.”，这个句点用来标识一个类选择符，类名可以随 意命名。
+
3.2 创建站点
3.2.3 在文件面板中处理文件 2．站点内的基本操作 在“文件”面板中，可以方便地对站点内的文件执行复制、移动和删除等操作， 这里以示例的方式讲述操作方法。
第3章 使用Dreamweaver制作简单网页
+
3.2 创建站点
3.2.4 站点的管理 创建好本地站点后，必要时还需对站点进行多方面的管理，如打开站点、 复制站点、编辑站点、删除站点等。
3.3.3 盒模型
图3-32 页面效果
图3-33 修改代码后页面效果
第3章 使用Dreamweaver制作简单网页
+
3.3 初识CSS
3.3.4 如何将CSS文档应用到网页中 1．内联样式 内联样式的使用是直接在XHTML标签中加 入style参数，而style参数的内容就是CSS的 属性和值。
三章网页图文CSS样式ppt课件
3.4.4 应用CSS样式
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
《HTML与CSS》PPT课件
网络编程
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
Dreamweaver网页设计与制作教程
Dreamweaver网页设计与制作教程第一章：Dreamweaver的介绍与安装Dreamweaver是一款著名的网页设计与制作工具，由Adobe公司开发。
本章将介绍Dreamweaver的功能特点与优势，并提供详细的安装步骤和注意事项。
第二章：Dreamweaver的界面与工具栏在本章中，我们将深入了解Dreamweaver的界面布局，包括工具栏的功能和使用方法。
通过熟悉Dreamweaver的界面，可以提高工作效率。
第三章：网页设计基础知识本章将介绍网页设计的基础知识，包括HTML、CSS、JavaScript等的概念和用法。
了解这些基础知识对于进行网页设计和制作至关重要。
第四章：网页布局与设计在本章中，我们将学习如何在Dreamweaver中进行网页布局与设计。
包括DIV布局、响应式设计等常用技术和方法，以及一些设计原则和注意事项。
第五章：网页文本与图像处理网页中的文本和图像是网页设计中重要的元素。
本章将介绍如何在Dreamweaver中对文本和图像进行处理，如字体设置、锚点链接、图像优化等技巧。
第六章：网页导航与交互设计网页导航和交互设计是网页设计中至关重要的部分。
在本章中，我们将学习如何使用Dreamweaver创建导航菜单、表单、按钮等交互元素，提升用户体验。
第七章：网页动画与多媒体元素网页动画和多媒体元素可以增加网页的吸引力和互动性。
本章将介绍如何在Dreamweaver中使用HTML5和CSS3技术创建动画和嵌入多媒体元素。
第八章：网页调试与代码优化在网页设计和制作过程中，调试和代码优化是必不可少的环节。
本章将介绍Dreamweaver中的调试工具和一些常见的代码优化技巧，帮助提高网页的性能和稳定性。
第九章：网页发布与维护完成网页设计与制作后，下一步就是将网页发布到互联网上。
本章将介绍如何使用Dreamweaver将网页上传至服务器，并提供一些维护和更新网页的技巧。
第十章：常见问题与解决方法在使用Dreamweaver进行网页设计与制作的过程中，可能会遇到一些问题和困惑。
网页设计教程-第3章ppt课件
5
3.1.1 创建文档
在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也 可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。
1. 创建新文档 启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动
Dreamweaver 8，要创建空白文档，可以在菜单栏中选择【文件】|【新 建】命令，则会出现如图3.1所示的【新建文档】对话框。 该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档 格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框 中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览 新建文档的结构。 单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其 中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。
6
3.1.1 创建文档
图 3.1 【新建文档】对话框
7
3.1.1 创建文档
图 3.2 选择新建文档的模板
8
3.1.1 创建文档
图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分 别为：上框架、左框架和主框架。
在创建一个新文档后，如果打开HTML源代码检视器，实际上 Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次 开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的 【代码】按钮查看，源代码如图3.4所示。
教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、 设置文档属性、定义文档标题等多个方面，在设计网页时都是必须 考虑到的。Dreamweaver 8提供了强大的页面图像控制能力，能够 帮助用户创建专业的图文并茂的页面。本章将介绍如何利用 Dreamweaver 8创建文档，并在文档中添加和控制图像。能否掌握 好这些网页基本元素的制作，对制作网页至关重要。
3.1.1 创建文档
在Dreamweaver中，用户可以从一个空白的HTML页面创建新文档，也 可以从模板创建，还可以打开并修改其他应用程序创建的HTML文档。
1. 创建新文档 启动Dreamweaver 8后，就可直接创建一个空文档。如果已经启动
Dreamweaver 8，要创建空白文档，可以在菜单栏中选择【文件】|【新 建】命令，则会出现如图3.1所示的【新建文档】对话框。 该对话框中默认显示的是【常规】选项卡，可以在其中选择不同的文档 格式。在【类别】列表框中选择【框架集】选项，在【框架集】列表框 中选择【上方固定，左侧嵌套】选项，在右边的【预览】框中可以预览 新建文档的结构。 单击并打开该对话框的【模板】选项卡，对话框如图3.2所示。可以在其 中选择不同的模板，在右边的【预览】框中可以预览新建文档的结构。
6
3.1.1 创建文档
图 3.1 【新建文档】对话框
7
3.1.1 创建文档
图 3.2 选择新建文档的模板
8
3.1.1 创建文档
图3.3所示为新建的一个框架结构类型的空文档，其中包含3个框架，分 别为：上框架、左框架和主框架。
在创建一个新文档后，如果打开HTML源代码检视器，实际上 Dreamweaver已经为用户打开了一个名为“Default.htm”的模板，每次 开始新建网页时，Dreamweaver都会将它打开。单击文档编辑窗口上的 【代码】按钮查看，源代码如图3.4所示。
教学目标：文档操作是设计网页的基本操作，它包括打开和编辑文档、 设置文档属性、定义文档标题等多个方面，在设计网页时都是必须 考虑到的。Dreamweaver 8提供了强大的页面图像控制能力，能够 帮助用户创建专业的图文并茂的页面。本章将介绍如何利用 Dreamweaver 8创建文档，并在文档中添加和控制图像。能否掌握 好这些网页基本元素的制作，对制作网页至关重要。
Dreamweaver CC网页设计课件第3章
3.4
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.1 案例制作：2018世界杯四分之一决赛对阵表
4）选中表格，在属性面板中设“Align”为“居中对齐”。 5）切换到代码视图，将光标移到字符“<table”后面按空格键，在出现的属性下拉列表 中双击“bgcolor”属性。系统会自动添加背景颜色bgcolor属性，输入颜色值为#c9def3。
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.16
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.2 新知解析
3. 设定表格和单元格属性 （2）行列和单元格属性的设定 这里将行、列和单元格的属性放在一起，主要是 因为它们的属性面板的设置项目完全一样，差别只是应用属性的范围不同而已。 选择行、列或单元格后属性面板如图所示。面板分上下两部分，上面是选中区域 内文字属性设定项目，下面是选中的行、列或单元格属性的设定。
中这一项。
•
：可将单元格内的内容，尤其是文字内容作为标题显示，这时单元格
内的文字会以粗体显示。
3.18
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.2 新知解析
4. 编辑表格和单元格 （1）调整表格大小 选中表格后，利用属性面板设定表格的宽和高来改变大小。 或选中表格后，表格上会出现3个控制点。将鼠标置于控制点上，当出现调整图标 时，按下鼠标左键拖拽边框到想要的位置。 （2）更改列宽和行高 选定相应的行或列，通过属性面板设定行高或列宽值，从 而改变行高列宽。也可以用鼠标拖动列、行的边框来更改列宽或行高。 （3）添加行和列 将光标置于表格中的适当位置，单击菜单命令“修改”→“表 格”→“插入行”，则在当前行的上方插入一行。或单击菜单命令“修 改”→“表格”→“插入列”，则在当前列的左侧插入一列。
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.1 案例制作：2018世界杯四分之一决赛对阵表
4）选中表格，在属性面板中设“Align”为“居中对齐”。 5）切换到代码视图，将光标移到字符“<table”后面按空格键，在出现的属性下拉列表 中双击“bgcolor”属性。系统会自动添加背景颜色bgcolor属性，输入颜色值为#c9def3。
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.16
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.2 新知解析
3. 设定表格和单元格属性 （2）行列和单元格属性的设定 这里将行、列和单元格的属性放在一起，主要是 因为它们的属性面板的设置项目完全一样，差别只是应用属性的范围不同而已。 选择行、列或单元格后属性面板如图所示。面板分上下两部分，上面是选中区域 内文字属性设定项目，下面是选中的行、列或单元格属性的设定。
中这一项。
•
：可将单元格内的内容，尤其是文字内容作为标题显示，这时单元格
内的文字会以粗体显示。
3.18
第3章 使用表格布局页面
3.1 表格的建立和编辑
3.1.2 新知解析
4. 编辑表格和单元格 （1）调整表格大小 选中表格后，利用属性面板设定表格的宽和高来改变大小。 或选中表格后，表格上会出现3个控制点。将鼠标置于控制点上，当出现调整图标 时，按下鼠标左键拖拽边框到想要的位置。 （2）更改列宽和行高 选定相应的行或列，通过属性面板设定行高或列宽值，从 而改变行高列宽。也可以用鼠标拖动列、行的边框来更改列宽或行高。 （3）添加行和列 将光标置于表格中的适当位置，单击菜单命令“修改”→“表 格”→“插入行”，则在当前行的上方插入一行。或单击菜单命令“修 改”→“表格”→“插入列”，则在当前列的左侧插入一列。
Dreamweaver电子教案课件第3章
用户从某台远程计算机上拷贝文件到自己计算机上的过程，称作下载。
3.1.5 网页的设计和出版流程
对站点进行规划 创建站点的基本结构 具体的网页创作过程 将本地的站点同位于Internet服务器上的远端站点关联起来，然后定期更新
3.2 规划站点
规划站点结构
1．用文件夹来保存文档 2．使用合理的文件名称 3．合理分配文档中的资源 4．将本地站点和远端站点设置为同样的结构
第3章 构建本地站点
本章重点
本章将介绍站点的基本知识及构建本地站点的方法，内容包括：站点的 概念和功能；站点规划和网站制作流程；利用Dreamweaver 创建本地站点； 由已有文件生成站点；对站点的删除、修改、编辑和复制等操作；对站点内 文件和文件夹的删除、修改、编辑和复制等操作以及刷新本地站点的方法。
学习目的 通过本章的学习，您可以掌握：
本地站点和远端站点的概念和功能。 网站制作的流程。 创建本地站点和管理本地站点方法。
3.1 概述
3.1.1 Internet服务器和本地计算机
Internet服务器是网络上一种为客户端计算机提供各种Internet服务（包括WWW、FTP、 e-mail等）的高性能计算机，它在网络操作系统的控制下，将与其相连的硬盘、磁带、打印 机、Modem及各种专用通讯设备提供给网络上的客户站点共享，也能为网络用户提供集中 计算、信息发表及数据管理等服务。它的高性能主要体现在高速度的运算能力、长时间的 可靠运行、强大的外部数据吞吐能力等方面。
如果成功安装了Internet服务程序，就可以在本地计算机上创建真正的Internet环境， 充分对创作的站点进行测试，当然，这种测试是不需要真正连入Internet的。
3.1.4 上传和下载
上传和下载是在互联网上传输文件的专门术语。一般来说，用户把自己计算 机上的文件拷贝到远程计算机上的过程，称作上传；
3.1.5 网页的设计和出版流程
对站点进行规划 创建站点的基本结构 具体的网页创作过程 将本地的站点同位于Internet服务器上的远端站点关联起来，然后定期更新
3.2 规划站点
规划站点结构
1．用文件夹来保存文档 2．使用合理的文件名称 3．合理分配文档中的资源 4．将本地站点和远端站点设置为同样的结构
第3章 构建本地站点
本章重点
本章将介绍站点的基本知识及构建本地站点的方法，内容包括：站点的 概念和功能；站点规划和网站制作流程；利用Dreamweaver 创建本地站点； 由已有文件生成站点；对站点的删除、修改、编辑和复制等操作；对站点内 文件和文件夹的删除、修改、编辑和复制等操作以及刷新本地站点的方法。
学习目的 通过本章的学习，您可以掌握：
本地站点和远端站点的概念和功能。 网站制作的流程。 创建本地站点和管理本地站点方法。
3.1 概述
3.1.1 Internet服务器和本地计算机
Internet服务器是网络上一种为客户端计算机提供各种Internet服务（包括WWW、FTP、 e-mail等）的高性能计算机，它在网络操作系统的控制下，将与其相连的硬盘、磁带、打印 机、Modem及各种专用通讯设备提供给网络上的客户站点共享，也能为网络用户提供集中 计算、信息发表及数据管理等服务。它的高性能主要体现在高速度的运算能力、长时间的 可靠运行、强大的外部数据吞吐能力等方面。
如果成功安装了Internet服务程序，就可以在本地计算机上创建真正的Internet环境， 充分对创作的站点进行测试，当然，这种测试是不需要真正连入Internet的。
3.1.4 上传和下载
上传和下载是在互联网上传输文件的专门术语。一般来说，用户把自己计算 机上的文件拷贝到远程计算机上的过程，称作上传；
网页设计教程Dreamweaver电子课件第3章
3.7 插入Real视频
3.7 插入Real视频
3.7 插入Real视频
3.8 插入QuickTime电影
3.9 插入Java Applet
3.10 用CSS样式设定网页属性
3.10.1 “页面属性”对话框
3.10 用CSS样式设定网页属性
页面字体 大小 文本颜色 背景颜色 背景图像 页边距
3.3.8 列表
3.3 使 用 文 本
课堂练习3.3 修改无序列表的外观
3.3.8 列表
3.3 使 用 文 本
课堂练习3.4 修改有序列表的外观
3.3.8 列表
3.4 使 用 图 像
3.4.1 插入图像
3.4 使 用 图 像
1. 图像名称 2. 图像大小 3. 替代文本 4. 边框宽度 5. 对齐方式
3.1 网页的基本操作
课堂练习3.1 创建文件
3.1.2 新建模板文件
3.1 网页的基本操作
选择菜单命令“文件”|“保存”，此时将打开“另存为”对话框。
3.1.3 保存网页
3.1 网页的基本操作
保存文件后选择菜单命令“文件”|“退出”。
3.1.4 关闭文件
3.1 网页的基本操作
选择菜单命令“文件”|“打开”。
3.11.4 跟踪图像
3.3.6 换行
3.3 使 用 文 本
3.3.7 首行缩进
3.3 使 用 文 本
1. 创建无序列表
2. 创建有序列表
3. 转换列表类型 如果要将无序列表转换为有序列表，可以先选中所有列表 中的文字，然后单击“属性”面板上的“编号列表”按钮 。 如果要将有序列表转换为无序列表，可以在选中文字后单 击“项目列表”按钮 。
3.11 用HTML定义网页属性
Dreamweaver学习HTML+DIV+CSS教学PPT第3章__网页主体Body
安全在于心细，事故出在麻痹。20.12.1220.12.1200:12:3500:12:35December 12, 2020
踏实肯干，努力奋斗。2020年12月12 日上午1 2时12 分20.12. 1220.1 2.12
追求至善凭技术开拓市场，凭管理增 创效益 ，凭服 务树立 形象。2020年12月12日星期 六上午12时12分35秒00:12:3520.12.12
含超链接效果
3.2.2 更改超链接文字颜色
分别为已访问链接、活动链接和变化图像链接设置颜色值为#3300FF、 #00FF00和#006633。保存文档并按F12键进行预览，单击超链接后，效 果如图。
设置链接颜色效果图 激活链接效果
已访问链接效果 变化图像链接效果
3.3 设置页面边距
页面边距指网页中的内容与页面四边之间的距离。如果内容布满了 整个页面且没有一点空隙，那么网页会非常不美观。适当地设置页 面边距，会使页面看起来大方得体。
爱情，亲情，友情，让人无法割舍。20.12.122020年 12月12日星期 六12时 12分35秒20.12.12
谢谢大家！
科学，你是国力的灵魂；同时又是社 会发展 的标志 。上午12时12分35秒 上午12时12分00:12:3520.12.12
每天都是美好的一天，新的一天开启 。20.12.1220.12.1200:1200:12:3500:12:35Dec-20
相信命运，让自己成长，慢慢的长大 。2020年12月12日星 期六12时12分35秒Saturday, December 12, 2020
精益求精，追求卓越，因为相信而伟 大。2020年12月12日 星期六 上午12时12分35秒00:12:3520.12.12
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
不重复方式效果
横向重复效果
纵向重复效果
3.2 文字颜色
为网页内容加上色彩，可以更好地表达内容的主题。网页内容包含 链接文字和普通文字。本节将介绍如何设置文字的颜色。
3.2.1 设置文字默认颜色
在网页中，普通文字在【设计】视图中的默认颜色是黑 色，设置文字默认颜色的具体步骤如下：
默认颜色效果
设置默认颜色效果
3.1 网页背景
网页背景的适当设置，可以辅助突出主题，所以是网站 风格定位的一个重要元素。网页背景可以是单纯的颜色， 也可以是图片。下面介绍如何进行设置。
3.1.1 修改背景颜色
没有设置背景颜色的网页都是白底黑字，设置背景颜色可以使网页改变这 种单调枯燥的外观。设置背景颜色的具体步骤如下：
无背景效果图 【属性】面板
第3章 网页主体Body
在第1章中读者了解到网页主体的内容是网页呈现给 浏览者的信息，是网页的中心和重心所在。<body>标签 设置关系到网页的全局效果。例如，网页背景为网页增 添了一份色彩，链接文字颜色的正确设置为浏览者在浏 览过程中提供了许多的方便。本章将详细地介绍网页主 体<body>的标签设置及其源码。
安全在于心细，事故出在麻痹。20.10.1620.10.1607:53:1207:53:12October 16, 2020
踏实肯干，努力奋斗。2020年10月16日上午7时53分 20.10.1620.10.16
追求至善凭技术开拓市场，凭管理增 创效益 ，凭服 务树立 形象。2020年10月16日星期 五上午7时53分 12秒07:53:1220.10.16
前面讲解了如何设置网页背景颜色。虽然设置背景颜色为网页增添了不少 色彩，但是还略显单调。本小节将介绍如何设置背景图像，具体步骤如下：
【选择图像源文件】对话框
3.1.2 设置背景图像
单击【确定】按钮，完成背景图像设置，效果如图
设置背景图像效果
3.1.3 设置背景图片的重复方式
默认背景图像以重复方式布满整个页面。可以设置不同 的重复方式，具体步骤如下：
严格把控质量关，让生产更加有保障 。2020年10月 上午7时 53分20.10.1607:53Oc tober 16, 2020
作业标准记得牢，驾轻就熟除烦恼。2020年10月16日星期 五7时53分12秒 07:53:1216 October 2020
好的事情马上就会到来，一切都是最 好的安 排。上 午7时53分12秒 上午7时53分07:53:1220.10.16
3.3 设置页面边距
如果需要重新设置页面边距，如下：
默认边距效果
零边距效果
3.4 专家总结
通过本章的学习，掌握了背景颜色、背景图像、文字颜 色和页面边距的设置方法，这些是网页设计的基础知识。 虽然这些只是一些微小的地方，但是在设计的过程中不 能忽视，读者必须多加练习。
树立质量法制观念、提高全员质量意 识。20.10.1620.10.16Friday, October 16, 2020
3.1.1 修改背景颜色
单击【页面属性】按钮，弹出【页面属性】对话框 。单击【背景颜色】下
三角按钮，弹出调色板 。
【页面属性】对话框
调色板
3.1.1 修改背景颜色
单击【确定】按钮，完成背景颜色的设置
背景颜色效果
3.1.1 修改背景颜色
手动设置背景颜色的具体步骤如下：
【属性】面板
3.1.2 设置背景图像
人生得意须尽欢，莫使金樽空对月。07:53:1207:53:1207:5310/16/2020 7:53:12 AM
安全象只弓，不拉它就松，要想保安 全，常 把弓弦 绷。20.10.1607:53:1207:53Oc t-2016- Oct-20
加强交通建设管理，确保工程建设质 量。07:53:1207:53:1207:53Fri day, Octobe字有3种状态，分别是未访问、激活和已访问。为了方便 浏览者清楚哪些网页已经被浏览过，可以把超链接文字的3种状态 设置为不同的颜色，以示区分。在默认状态下，超链接未访问文字 的颜色和激活文字的颜色是蓝色，已访问文字的颜色是紫色。可以 通过设置改变超链接不同状态的颜色，以适合页面的统一。具体步 骤如下：
一马当先，全员举绩，梅开二度，业 绩保底 。20.10.1620.10.1607:5307:53:1207:53:12Oc t-20
牢记安全之责，善谋安全之策，力务 安全之 实。2020年10月16日 星期五7时53分 12秒Fr iday, October 16, 2020
相信相信得力量。20.10.162020年10月 16日星 期五7时53分12秒20.10.16
含超链接效果
3.2.2 更改超链接文字颜色
分别为已访问链接、活动链接和变化图像链接设置颜色值为#3300FF、 #00FF00和#006633。保存文档并按F12键进行预览，单击超链接后，效 果如图。
设置链接颜色效果图 激活链接效果
已访问链接效果 变化图像链接效果
3.3 设置页面边距
页面边距指网页中的内容与页面四边之间的距离。如果内容布满了 整个页面且没有一点空隙，那么网页会非常不美观。适当地设置页 面边距，会使页面看起来大方得体。
谢谢大家！