第3章静态网页基本操作.ppt

《第3章静态网页基本操作.ppt》由会员分享，可在线阅读，更多相关《第3章静态网页基本操作.ppt（39页珍藏版）》请在三一文库上搜索。

1、静态网页基本操作,本章主要内容,学会设置页属性 熟悉插入网页基本元素 掌握设置文本、图像、链接的属性 了解插入文件头标签 学会使用媒体,设置页面属性,1.概述 打开“页面属性”对话框的方法： “修改/页面属性”（快捷键CTRL+J） 单击属性面板中的“页面属性”按钮 2.设置外观,设置页面属性,“外观”具体设置如下： 页面字体：用于设置文字的字体，如宋体、黑体等 大小：用于设置网页中文本的字号 文本颜色：用于设置网页中文本的颜色 背景颜色：用于设置网页背景的颜色 背景图像：指网页可以用图片作背景，单击“浏览”按钮，在弹出的“选择图 像”对话框中选择一个图像作为网页的背景图 重复：指网页背景图以

2、什么样的重复方式显示，如横向显示、纵向显示等 左边距、右边距、上边距、下边距：指定页面四周边距的大小 注：这些值仅适用于Microsoft Internet Explorer ，而Netscape Navigator忽略 这些值，要确保在任何一个浏览器中都不出现边距，请将四个值都设置为“0”,设置页面属性,3.设置链接,设置页面属性,设置链接的参数如下： 链接字体：设置页面的超链接文本的字体 大小：设置超链接文本的字号的大小 链接颜色；设置页面中超链接的颜色 交换图像链接：设置页面里变换图像后的超链接的颜色 已访问链接：设置页面中访问过的超链接的颜色 活动链接：设置网页里激活的超链接的颜色 下

3、划线样式：用于设置超链接的下划线，如显示下划线或隐藏下划线,设置页面属性,4.设置标题 设置与页面标题有关的属性，该对话框设置相对简单，只要求设置标题的字 体、字号和颜色。,设置页面属性,5.设置标题与编码,设置页面属性,具体参数设置如下： 标题：指定在“文档”窗口和浏览器窗口的标题栏中出现的内容 文档类型（DTD）：指定文档类型定义 编码：指定文档中字符所用的编码。文档编码在文档头的meta标签内指定 ，它告诉浏览器和Dreamweaver 应如何对文档进行解码以及使用哪些字体来 显示解码的文件 Unicode标准化表单：仅在选择UTF-8作为文档编码时启用。有四种 Unicode标准，最重

4、要的是标准化表C，因为它是用于万维网的字符模型的最 常用表单 包括Unicode签名（BOM）：可在文档中包括字节顺序标记（BOM）。 BOM是位于文本文件开头的24个字节，可将文件标识为Unicode ,若是这样 ，还标识后面字节的字节顺序。由于UTF8没有字节序，因此可以先择添加 UTF8.,设置页面属性,6.设置跟踪图像 跟踪图像是指在网页设计时作为参考的图像。该图像只供参考，当文档在 浏览器中显示时并不出现。通过点击“浏览”按钮，可以选择相应的跟踪图 像；拖动滑块可以指定图像的透明度，透明度越高图像显示得越明显。,使用文本,1.概述 文本是网页设计最常用的的元素，文本的操作包括文本的插

5、入和文本属性 的设置等。 注：一个中文字符占2个字节 2.插入文本 插入文本有三种方法： (1).直接在文档窗口中输入文本 Enter:分段换行 Shit+Enter:换行 Dreamweaver默认情况下不允许输入连续的空格，若需要输入多个空格， 可执行菜单命令“编辑/首选参数”，在打开的“首选参数”面板里将“允许多个连 续的空格”选项选中即可，或者将输入法设置为全角状态。 注：在全角状态下输入的空格，浏览器的支持效果不好，有时会出现“？”号 形式出现报错信息，建议设计者不要在此状态下输入空格。,使用文本,(2).粘贴其他文本 将光标定位到需要插入文本的位置 “编辑/粘贴”（ctrl+v）或

6、者单击标准工具栏上的粘贴按钮 (3).导入Word或Excel文档 导入文档的方法： “文件/导入/word文档” “格式化”选项：是指将选中的Word文档以什么样的格式导入到当前文档里， 其下拉列表包括四个选项： 仅文本：插入无格式文本。若原始文本带格式，所有格式将被删除 带结构的文本：插入文本并保留结构，但不保留基本格式设置 结构：段落、列表、表格 基本格式：加粗、倾斜 带结构的文本及基本格式：插入结构化并带简单的HTML格式的文本。 带结构的文本及全部格式：插入文本并保留所有结构、HTML格式设置和CSS 样式,使用文本,3.设置文本属性 选中文本，打开属性面板，即可对选中的文本进行属性

7、设置 具体设置如下： 格式：设置所选文本的段落样式 字体：文本应用所选字体组合 大小：设置字体的字号 文本颜色 ：设置所选文本的颜色。单击颜色框选择网页安全色，或在 相邻的文本域中输入十六进制数值 粗体 ：将文本加粗 斜体 ： 将文本倾斜 左对齐（ ）、居中对齐( ) 、右对齐（ ）、两端对齐（ ）：将 选 中的文本应用各自的对齐方式,使用文本,链接；创建所选文本的超文本链接 项目列表（ ）、编号列表（ ）：创建所选文本的项目列表和编号列 表。若未选择文本，则启动一个新的项目列表或编号列表 缩进（ ）、凸出（ ）：应用或删除blockqutote标签缩进或删除所选 文本的缩进。在列表中，创建一

8、个嵌套列表，而删除缩进则取消嵌套列表。,使 用 图 像,1.Web页面中常用的三种图片格式 (1).GIF 图形交换格式 GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一 颜色的图像，如导航条、按钮、图标、徽标或其他有统一色彩和色调的图 像。另外，还可用作动画图片。 (2).JPEG 联合图像专家组标准 JPEG文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文 件可以包含数百万种颜色。随着JPEG文件品质的提高，通常可以通过压缩 JPEG文件在图像品质和文件大小之间达到良好的平衡。 (3).PNG 可移植网络图形 PNG文件格式是一种替代GIF格式的无专利权限

9、的格式，它包括对索引颜色 、灰度、真彩色图像以及alpha通道透明的支持。PNG是Macromedia Fireworks 固有的文件格式，PNG文件可保留所有原始层、矢量、颜色和效,使 用 图 像,果信息（如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必 须具有.png 文件扩展名才能被Dreamweaver识别PNG文件。 2.插入图像 插入图片的方法： (1). 在“插入”菜单栏中单击插入图像按钮 (2). 插入/图像（Ctrl+Alt+I） “图像标签辅助功能属性”对话框中的设置值： 替代文本：设置图像标签Alt属性值，对当前图像进行说明 详细说明：指定一个网页来加以更详细的

10、说明，其设置的是图像标签 Longdesc属性值 3.设置图像属性值 宽和高：以像素为单位指定图像的宽度与高度。 注：若设置的“高”和“宽” 的值与图像的实际宽和高不相符，则图像在浏览器中 可能不会正确显示,使 用 图 像,目标：打开链接窗口的形式 对齐：指对齐同一行上的图像与文本 参数选项： 默认值：与基线对齐 基线和底部：将文本（或同一段落中的其他元素）的基线与选定对象的底部对齐。 顶端：将图像的顶端与当前行中最高项（图像与文本）的顶端对齐 居中：将图像的中部与当前行的基线对齐 文本上方：将图像的顶端与当前文本的中最高字符的顶端对齐 绝对居中：将图像的中部与当前行中文本的中部对齐 绝对底部

11、：将图像的底部与文本行的底部对齐 左对齐：将所选图像放置在左边，文本在图像的右侧换行 右对齐：将所选 图像放置在右边，文本在图像的左边换行,使 用 图 像,使 用 图 像,地图名称和热点名称：允许标注和创建客户端图像地图 垂直边距和水平边距：沿图像的边缘添加边距（以像素为单位） 垂直边距：沿图像的顶部和底部添加边距 水平边距：沿图像的左侧和右侧添加边距 边框：以像素为单位的图像边框的宽度，默认为无边框 编辑：启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图 像，默认值为Fireworks ，其中包含优化、裁剪、重新取样、亮度和对比度、 锐化。,使 用 图 像,3.编辑图像 (1).

12、优化图像 打开优化面板的方法： 点击“优化（ ）”按钮 命令/在Fireworks中优化图像 注: 若在本地机安装Fireworks软件，Dreamweaver会自动打开fireworks优 化面板，但不打开Fireworks软件 优化图像是一个不可逆的过程，一亘更更新后，将无法撤消 (2).裁剪图像 裁剪图像就是可让用户修剪图像的大小，从所选图像中删除不需要的区域,使 用 图 像,(3).图像重新取样 重新取样就是让用户对已调整图像大小后确认，提高图片在新的大小和形状 下的品质。 (4).调整图像的亮度与对比度 亮度与对比度：通过调整图像的高亮显示、阴影和中间色调来修正过暗或过 亮的图像。

13、(5).图像锐化 锐化：通过增加图像中的边缘的对比度来调整图像的焦点，使图像更加清 晰。,使 用 图 像,4.插入图像 (1).概述 Dreamweaver 8中插入图像对象包含四个部分内容：图像占位符、鼠标经过 图像、导航条、Fireworks HTML (2).图像占位符 图像占位符是在准备好将最终图形添加到web页面之前使用的图形 注：名称必须以字母开头，并且只能包含字母和数字 (3).鼠标经过图像 鼠标经过图像是指在浏览器里查看并使用鼠标指针移过它时发生变化的效果 ，使用该效果必须具有两幅图像：主图像与次图像。鼠标经过图像中的两个 图像应大小相等，若这两个图像大小不同，Dreamwea

14、ver将自动调整第二个 图像的大小以匹配第一个图像的属性。,使 用 图 像,(4).导航条 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导 航条分为“插入导航条”和“修改导航条”，通常为在站点上的页面和文件之间移 动提供一条简捷的途径。 使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图 像，可将导航条项目视为按钮，因为单击它时，导航条项目将用户带到其他 页面。 主窗口：在同一个窗口中打开图片 插入：在文档中是垂直插入还是水平插入导航项目 修改/导航条：打开“修改导航条”窗口，在该窗口中可以对已插入的导航条进行可编辑性修改 注：每个页面只能插入一个导航条,使

15、 用 图 像,5.Fireworks HTML Dreamweavers允许用户将Fireworks生成的HTML代码随关联的图像、切 片和Javascript一起插入到文档中。这一插入功能使用户可以方便地在 Fireworksk 创建设计元素，然后将这些元素纳入现有的Dreamweaver文档 中。,插入文件头标签,1.概述 文件头标签是包含在网页中的“”和“”标签之间，是不可见的 ，其主要包括：meta、关键字、说明、刷新、基础和链接等。 2.插入META META标签是描述有关当前页面的信息，如：字符编码、作者、版权信息或 关键字等，它是一个非常重要的元素，除了当前网页信息外，也可以用于

16、向 服务器提代信息。 3.插入关键字 在网页中加入关键字，可以供某些搜索引擎装置使用，它们会利用该关键字 为用户的网站做索引，当别人用关键字搜索网站时，若用户的网页包含关键 字，就可以被列出。,插入文件头标签,4.插入说明 插入说明是对一个网页概况的介绍，这些信息可能会出现在搜索引擎装置 结果中，因此需要根据网页的实际情况来设计，尽量避免与网页内容不相关 “描述”。另外，最好每个网页有自己相应的描述，而不是整个网站都采用同样 描述内容。 5.插入刷新 使用刷新功能可以指定浏览器在一定的时间后自动刷新当前页面，或者跳 转到其他页面。 6.插入基础 插入“基础”可以设置页面中所有文档相对路径的基础

17、URL。 其中：“href”是基础URL,插入文件头标签,7.插入链接 插入“链接”可以定义当前文档与其他文件之间的关系 Href:链接文件的URL ID: 为链接指定一个唯一标识符 标题：对链接的描述 Rel:指定当前文档与Href文本框中的文档之间的关系 Rev:指定当前文档与Href文本框中的文档之间的相反关系,使用超级链接,1.概述 超级链接是指站点内不同网页之间、站点之间的链接关系，它不仅使站点 内的网页成为有机的整体，还使不同站点之间建立了联系，超级链接可以定 义在文字中，也可定义在图片上，甚至图片的某个局部位置上。 2.路径 路径通常有三种：绝对路径、文档相对路径、站点根目录相对

18、路径 (1).绝对路径 绝对路径提供所链接文档的完整URL，而且包括所使用的协议，对于web页 通常使用http:/ 注： 当链接到其他服务器上的文档，必须使用绝对路径 不建议使用绝对路径，因为一旦将此站点移动到其他域，则所有本地绝 对路径都将断开,使用超级链接,(2).文档相对路径 文档相对路径指定从当前文档到所链接的文档的路径。文档相对路径的基本 思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，只提供 不同的路径部分 (3).站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。若在处理使用多 个服务器的大型web站点，或者使用承载有多个不同站点的服务器，则

19、可能 需要使用这些类型的路径。 站点根目录相对路径是以一个正斜杠开头，该正斜杠表示站点根文件夹。,使用超级链接,2.超级链接的语法 语法结构如下： 其中：URL是指链接的文件的路径 3.创建超级链接 (1).概述 根据链接的对象内容不同，超级链接又分为文本链接、电子邮件链接、图像 或热区链接、下载链接、空链接、脚本链接和锚点链接 (2)创建文本链接 创建方法： “插入/超级链接”或点击“插入”工具栏的超级链接按钮 在属性面板里的“链接”选项里输入要链接的文件,使用超级链接,“目标”选项如下： _blank：将链接的文件载入一个未命名的新浏览器窗口中 _parent：将链接的文件载入含有该链接的

20、框架的父框架集或父窗口中；若 包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。 _self：将链接的文件载入该链接所在的同一框架窗口中。此目标是默认的 ，所通常不要指定它。 _top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架,使用超级链接,4.创建图像超链接 (1).概述 图像也可以作为超级链接，它又分为图像链接和热区链接。 热区：在一张图片上实现多个局部区域指向不同的网页链接 (2).图像链接 (3).图像热区链接 圆形工具（）：创建一个圆形热点 矩形工具（）：创建一个矩形热点 多边形工具（）：创建一个不规则形状的执点 5.创建下链接,使用超级链接,6.创建电子邮件链

21、接 创建电子邮件的方法： 插入/电子邮件链接 打开属性面板，在“链接”文本框键入“mailto：”，后面跟电子邮件地址 注：在冒号和电子邮件地址之间不能键入任何空格 7.创建锚点链接 (1).概述 当一个网页的主题或文字较多时，可以在网页内建立多标记点，将超链接指 定到这些标记上，能够浏览者快速找到要阅读的内容。我们将这些标记称为 锚点。 (2).创建方法 创建命名锚记 创建到该命名锚记的链接,使用超级链接,注： 锚记名称只能包含小写ASCII字母和数字，且不能以数字开头，不能有空 格，并区分大小写 若要链接到同一文件夹内其他文档中的名为“bottom”锚记，可键入filename. .htm

22、l#bottom 8.空链接 空链接：不会跳转到新的URL地址 9.创建脚本链接 脚本链接是指执行Javascript代码或调用Javascript函数 创建方法： 在属性面板中的“链接”文本框里键入“javascript:”，后面跟一些 JavaScript代 码或函数调用,在网页中插入其他元素,1.插入特殊字符 插入方法： 插入/HTML/特殊字体 将“插入”工具切换到“文本”类型，在该类别下选择“字符”下拉菜单中的字符 命令 2.插入日期 插入方法： 插入/日期 单击“插入”工具栏上的“日期”按钮 3.插入水平线 插入/HTML/水平线 在“插入”工具栏将类别切换到“HTML”状态下，点

23、击插入“水平线”按钮 注：在“属性”面板中可设置水平线的宽和高、对齐方式、阴影等,使 用 媒 体,1.插入Flash动画 (1).概述 Flash集声音、图像和动画等内容于一体，又加之其使用了优化的算法将多 媒体数据进行压缩，使文件变得很小，更加适合于在网上传播。 (2).插入Flash动画的方法 方法： 插入/媒体/Flash 2.插入Flash对象 (1).概述 Flash对象包括：Flash按钮和Flash文本。 (2).插入Flash按钮 Flash按钮对象是基于Flash模板可更新的按钮，用户可以自定义Flash按钮 对象，并添加文本、背景色以及其他文件的链接。,使 用 媒 体,插入

24、方法： 插入/媒体/Flash按钮 (3).插入Flash文本 在Dreamweaver中可以插入只包含文本的Flash动画，从而创建小型Flash动画 插入方法： 插入/媒体/Flash文本 3.插入音频 (1).概述 网络上流行的音乐格式：MP3、WAV、MIDI (2).在网页中加入音频 (3).在网页中嵌入音频文件 插入/媒体/插件,使 用 媒 体,(4).在网页中加入背景音乐 在代码窗口里找到“body”标签，在其后键入如下代码： 标签“bgsound”有三个属性： src：设定背景音乐路径 autostart：设置背景音乐是否自动播放 loop：设置背景音乐播放次数 注：该标签只有在IE中支持，而在其他浏览器不支持。,使 用 媒 体,4.插入ActiveX控件 (1).概述 ActiveX控件是可以充当浏览器的可重复使用的组件，它犹如缩小的应用程序, 能产生和浏览插件一样的效果。ActiveX控件在Windows系统中的IE里运行， 但不能在Macintosh系统上或Netscape Navigator中运行。Dreamweaver 中的 ActiveX对象允许用户在网页访问者的浏览器中为ActiveX控件设置属性和参数 (2).插入ActiveX控件 插入方法： 插入/媒体/ActiveX,