《网页设计与制作》 第三章 文档的基本操作
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2．链接
在链接设置中，可以对链接的字体、大小进行设置，还 可以对链接的样式进行设置。比如链接文字是否加下划 线及链接文字在各种状态下的颜色等。如图3.7所示。
7
第3章 文档的基本操作
3.1 文档的基本操作
3．标题
在标题设置中，可以对文档中的各种标题进行字体、
大小、颜色的默认定义，方便在文档中直接使用，达 到样式统一的目的。如图3.8所示。
在文档窗口底部状态栏的左侧有标签选择区，显示环 绕当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。单击 <body>可以选择文档的整个正文。使用标签选择区是 选择标签的首选方法，它可以确保准确地选择标签。
3.1.7 文档中的代码操作
11
第3章 文档的基本操作
若要选择调色板以外的颜色，单击“颜色选择器”右 上角的 按钮可以弹出“系统颜色拾取器”，“系统 颜色拾取器”不局限于网页安全色。
3.1.6 选择“文档”窗口中的元素
10 若要在设计视图中选择文字、图片等第元3章素文，档通的常基可本以操作
3.1 文档的基本操作
单击元素或鼠标拖动选取元素。如果元素被隐藏了， 可以选择主菜单的【查看】|【可视化助理】中的相关 选项将其显示。有些元素(例如层)的左上角有标记，选 择此标记则选择了该元素。
4．标题/编码
在“标题/编码”设置中，可以对页面的标题进行设置 (即HTML代码中的<title>标记内容)，同时可以对文档 的类型和文档中使用文字编码进行定义。如图3.9所示。
5．跟踪图像
在跟踪图像设置中，可以为页面提供一个设计的参考 图像。同页面的背景图像不同，这个图像只在设计时
3.1.3 预览和调试页面
文档编辑完成后或编辑过程中，可以使用文档工具栏中 的“在浏览器中预览和调试”按钮 (或按F12键)进行 预览，以查看所编辑文档在浏览器中的实际显示效果。
Dreamweaver会自动用指定的浏览器将当前文档打开 进行预览。如果预览前文档做过改动且未保存，系统将 会提示保存文档，然后进行预览调试。
3
第3章 文档的基本操作
3.1 文档的基本操作
Байду номын сангаас
注意，在为文件和文件夹命名时，只能用英文字母和 数字，不能使用中文、空格和其它字符。如果使用了 除英文字母和数字之外的其它字符，在上传到服务器 上时，很多服务器会更改这些字符，而导致与这些文 件的链接中断。
在【文件】菜单中还有一些和“保存”相关的命令(如 图3.4所示)，用户可根据需要选择使用。
3.1 文档的基本操作
在代码视图中(图3.12)，可以直接在文档窗口中编辑 代码。代码视图的左侧为编码工具栏，应用该工具栏 可以很方便地进行标签折叠或展开、寻找标签的父标 签、添加注释等操作，这些操作在编辑HTML代码行 数较多的文档时尤为重要。视图的左侧还有HTML语 句的行号，方便在HTML语句出现错误时进行错误定 位。
③ 在“文件”面板中右击，在弹出菜单中选择【新建 文件】，出现新文件“untitled.html”，将其改为自己 需要的文件名，然后双击打开它。
2
第3章 文档的基本操作
3.1 文档的基本操作
建立文档后出现如图3.2所示的文档窗口，在此窗口中 就可以进行网页的编辑操作了。
编辑完成以后，选择【文件】|【保存】将文件存储到 磁盘上。对于还未命名的文档，会弹出如图3.3所示的 对话框，用户要在此对话框中为文件命名并选择保存 位置。保存以后文档仍然处于打开状态，需选择主菜 单中的【文件】|【关闭】命令，将文档关闭，如果多 个文档需要关闭，可选择主菜单中的【文件】|【全部 关闭】。
8
第3章 文档的基本操作
3.1 文档的基本操作
显示，方便用户利用此图像进行相关文字、图片的定位。 在进行浏览时此图像不显示。如图3.10所示。
3.1.5 网页中的颜色
在Dreamweaver中，很多操作都涉及到颜色的设置。在 颜色设置时，点击按钮可以打开“颜色选择器”(如图 3.11所示)，在颜色选择器中可以直接选择需要的颜色。 也可以在颜色文本框中直接输入需要的颜色。在HTML 中，颜色可以表示成颜色英文名称，也可以表示成RGB 的十六进制值，如#FF0000代表红色。
在“颜色选择器”中，单击面板右上角的 按钮可以
9
弹出
第3章 文档的基本操作
3.1 文档的基本操作
颜色的不同调色板，其中“立方色(默认)”和“连续色 调”调色板中的所有颜色都是网页安全色，其他调色 板中的颜色不全是网页安全色。网络安全色是指以256 色模式运行时，无论在Windows还是Macintosh系统， 浏览器都显示相同的颜色。测试显示仅有212种网页安 全色。
3.1.2 打开文档
打开已经存在的文档也有三种方式：可以通过文件面
板找到该文档，双击打开它；也可以选择主菜单中的 【文件】|【打开】，在弹出的对话框中找到该文件打
4
第3章 文档的基本操作
3.1 文档的基本操作
开它；还可以在起始页对话框中选择【打开最近项目】 |【打开】，在弹出的对话框中找到该文件并打开它。
第3章 文档的基本操作
1
第3章 文档的基本操作
3.1 文档的基本操作
3.1.1 文档的建立和保存
如图3.1所示，在Dreamweaver中，建立文档有如下 三种方式：
① 在Dreamweaver的起始页对话框中选择“创建新项 目”下的相应项目，静态网页一般选择“HTML”；
② 选择主菜单【文件】|【新建】，在弹出的对话框 中选择相应的项目；
5
第3章 文档的基本操作
3.1 文档的基本操作
3.1.4 设置页面属性
设置页面属性即设置整个页面的外观等属性。可以通过 以下三种方式打开“页面属性”设置对话框。
① 在文档窗口下方的属性面板中，点击“页面属性” 按钮(参见图3.5)；图3.5 页面属性按钮
② 在文档窗口(“设计”视图)中单击右键，在弹出菜单 中选择【页面属性】命令；
③ 选择主菜单【修改】|【页面属性】命令。
在页面属性设置对话框中，可以对页面的外观、链接、
标题、标题/编码、跟踪图像等进行设置。
6
第3章 文档的基本操作
3.1 文档的基本操作
1．外观
外观设置中，可以对页面默认的字体及字的大小、颜色， 整个网页的背景色、背景图像以及图像是否重复使用进 行设置，还可以对页面和浏览器之间的距离进行设置。 如图3.6所示。
在链接设置中，可以对链接的字体、大小进行设置，还 可以对链接的样式进行设置。比如链接文字是否加下划 线及链接文字在各种状态下的颜色等。如图3.7所示。
7
第3章 文档的基本操作
3.1 文档的基本操作
3．标题
在标题设置中，可以对文档中的各种标题进行字体、
大小、颜色的默认定义，方便在文档中直接使用，达 到样式统一的目的。如图3.8所示。
在文档窗口底部状态栏的左侧有标签选择区，显示环 绕当前选定内容的标签的层次结构。单击该层次结构 中的任何标签可以选择该标签及其全部内容。单击 <body>可以选择文档的整个正文。使用标签选择区是 选择标签的首选方法，它可以确保准确地选择标签。
3.1.7 文档中的代码操作
11
第3章 文档的基本操作
若要选择调色板以外的颜色，单击“颜色选择器”右 上角的 按钮可以弹出“系统颜色拾取器”，“系统 颜色拾取器”不局限于网页安全色。
3.1.6 选择“文档”窗口中的元素
10 若要在设计视图中选择文字、图片等第元3章素文，档通的常基可本以操作
3.1 文档的基本操作
单击元素或鼠标拖动选取元素。如果元素被隐藏了， 可以选择主菜单的【查看】|【可视化助理】中的相关 选项将其显示。有些元素(例如层)的左上角有标记，选 择此标记则选择了该元素。
4．标题/编码
在“标题/编码”设置中，可以对页面的标题进行设置 (即HTML代码中的<title>标记内容)，同时可以对文档 的类型和文档中使用文字编码进行定义。如图3.9所示。
5．跟踪图像
在跟踪图像设置中，可以为页面提供一个设计的参考 图像。同页面的背景图像不同，这个图像只在设计时
3.1.3 预览和调试页面
文档编辑完成后或编辑过程中，可以使用文档工具栏中 的“在浏览器中预览和调试”按钮 (或按F12键)进行 预览，以查看所编辑文档在浏览器中的实际显示效果。
Dreamweaver会自动用指定的浏览器将当前文档打开 进行预览。如果预览前文档做过改动且未保存，系统将 会提示保存文档，然后进行预览调试。
3
第3章 文档的基本操作
3.1 文档的基本操作
Байду номын сангаас
注意，在为文件和文件夹命名时，只能用英文字母和 数字，不能使用中文、空格和其它字符。如果使用了 除英文字母和数字之外的其它字符，在上传到服务器 上时，很多服务器会更改这些字符，而导致与这些文 件的链接中断。
在【文件】菜单中还有一些和“保存”相关的命令(如 图3.4所示)，用户可根据需要选择使用。
3.1 文档的基本操作
在代码视图中(图3.12)，可以直接在文档窗口中编辑 代码。代码视图的左侧为编码工具栏，应用该工具栏 可以很方便地进行标签折叠或展开、寻找标签的父标 签、添加注释等操作，这些操作在编辑HTML代码行 数较多的文档时尤为重要。视图的左侧还有HTML语 句的行号，方便在HTML语句出现错误时进行错误定 位。
③ 在“文件”面板中右击，在弹出菜单中选择【新建 文件】，出现新文件“untitled.html”，将其改为自己 需要的文件名，然后双击打开它。
2
第3章 文档的基本操作
3.1 文档的基本操作
建立文档后出现如图3.2所示的文档窗口，在此窗口中 就可以进行网页的编辑操作了。
编辑完成以后，选择【文件】|【保存】将文件存储到 磁盘上。对于还未命名的文档，会弹出如图3.3所示的 对话框，用户要在此对话框中为文件命名并选择保存 位置。保存以后文档仍然处于打开状态，需选择主菜 单中的【文件】|【关闭】命令，将文档关闭，如果多 个文档需要关闭，可选择主菜单中的【文件】|【全部 关闭】。
8
第3章 文档的基本操作
3.1 文档的基本操作
显示，方便用户利用此图像进行相关文字、图片的定位。 在进行浏览时此图像不显示。如图3.10所示。
3.1.5 网页中的颜色
在Dreamweaver中，很多操作都涉及到颜色的设置。在 颜色设置时，点击按钮可以打开“颜色选择器”(如图 3.11所示)，在颜色选择器中可以直接选择需要的颜色。 也可以在颜色文本框中直接输入需要的颜色。在HTML 中，颜色可以表示成颜色英文名称，也可以表示成RGB 的十六进制值，如#FF0000代表红色。
在“颜色选择器”中，单击面板右上角的 按钮可以
9
弹出
第3章 文档的基本操作
3.1 文档的基本操作
颜色的不同调色板，其中“立方色(默认)”和“连续色 调”调色板中的所有颜色都是网页安全色，其他调色 板中的颜色不全是网页安全色。网络安全色是指以256 色模式运行时，无论在Windows还是Macintosh系统， 浏览器都显示相同的颜色。测试显示仅有212种网页安 全色。
3.1.2 打开文档
打开已经存在的文档也有三种方式：可以通过文件面
板找到该文档，双击打开它；也可以选择主菜单中的 【文件】|【打开】，在弹出的对话框中找到该文件打
4
第3章 文档的基本操作
3.1 文档的基本操作
开它；还可以在起始页对话框中选择【打开最近项目】 |【打开】，在弹出的对话框中找到该文件并打开它。
第3章 文档的基本操作
1
第3章 文档的基本操作
3.1 文档的基本操作
3.1.1 文档的建立和保存
如图3.1所示，在Dreamweaver中，建立文档有如下 三种方式：
① 在Dreamweaver的起始页对话框中选择“创建新项 目”下的相应项目，静态网页一般选择“HTML”；
② 选择主菜单【文件】|【新建】，在弹出的对话框 中选择相应的项目；
5
第3章 文档的基本操作
3.1 文档的基本操作
3.1.4 设置页面属性
设置页面属性即设置整个页面的外观等属性。可以通过 以下三种方式打开“页面属性”设置对话框。
① 在文档窗口下方的属性面板中，点击“页面属性” 按钮(参见图3.5)；图3.5 页面属性按钮
② 在文档窗口(“设计”视图)中单击右键，在弹出菜单 中选择【页面属性】命令；
③ 选择主菜单【修改】|【页面属性】命令。
在页面属性设置对话框中，可以对页面的外观、链接、
标题、标题/编码、跟踪图像等进行设置。
6
第3章 文档的基本操作
3.1 文档的基本操作
1．外观
外观设置中，可以对页面默认的字体及字的大小、颜色， 整个网页的背景色、背景图像以及图像是否重复使用进 行设置，还可以对页面和浏览器之间的距离进行设置。 如图3.6所示。