1、静态网页基本操作静态网页基本操作本章主要内容n学会设置页属性学会设置页属性n熟悉插入网页基本元素熟悉插入网页基本元素n掌握设置文本、图像、链接的属性掌握设置文本、图像、链接的属性n了解插入文件头标签了解插入文件头标签n学会使用媒体学会使用媒体设置页面属性1.概述概述打开“页面属性”对话框的方法：n“修改/页面属性”（快捷键CTRL+J）n单击属性面板中的“页面属性”按钮2.设置外观设置外观设置页面属性“外观外观”具体设置如下：具体设置如下：n页面字体：用于设置文字的字体，如宋体、黑体等n大小：用于设置网页中文本的字号n文本颜色：用于设置网页中文本的颜色n背景颜色：用于设置网页背景的颜色n背景图
2、像：指网页可以用图片作背景，单击“浏览”按钮，在弹出的“选择图像”对话框中选择一个图像作为网页的背景图n重复：指网页背景图以什么样的重复方式显示，如横向显示、纵向显示等n左边距、右边距、上边距、下边距：指定页面四周边距的大小注：这些值仅适用于Microsoft Internet Explorer，而Netscape Navigator忽略这些值，要确保在任何一个浏览器中都不出现边距，请将四个值都设置为“0”设置页面属性3.设置链接设置链接设置页面属性设置链接的参数如下：设置链接的参数如下：n链接字体：设置页面的超链接文本的字体n大小：设置超链接文本的字号的大小n链接颜色；设置页面中超链接的颜色
3、n交换图像链接：设置页面里变换图像后的超链接的颜色n已访问链接：设置页面中访问过的超链接的颜色n活动链接：设置网页里激活的超链接的颜色n下划线样式：用于设置超链接的下划线，如显示下划线或隐藏下划线设置页面属性4.设置标题设置标题设置与页面标题有关的属性，该对话框设置相对简单，只要求设置标题的字体、字号和颜色。设置页面属性5.设置标题与编码设置标题与编码设置页面属性具体参数设置如下：具体参数设置如下：n标题：指定在“文档”窗口和浏览器窗口的标题栏中出现的内容n文档类型（DTD）：指定文档类型定义n编码：指定文档中字符所用的编码。文档编码在文档头的meta标签内指定，它告诉浏览器和Dreamwea
4、ver 应如何对文档进行解码以及使用哪些字体来显示解码的文件nUnicode标准化表单：仅在选择UTF-8作为文档编码时启用。有四种Unicode标准，最重要的是标准化表C，因为它是用于万维网的字符模型的最常用表单n包括Unicode签名（BOM）：可在文档中包括字节顺序标记（BOM）。BOM是位于文本文件开头的24个字节，可将文件标识为Unicode,若是这样，还标识后面字节的字节顺序。由于UTF8没有字节序，因此可以先择添加UTF8.设置页面属性6.设置跟踪图像设置跟踪图像 跟踪图像是指在网页设计时作为参考的图像。该图像只供参考，当文档在浏览器中显示时并不出现。通过点击“浏览”按钮，可以选
5、择相应的跟踪图像；拖动滑块可以指定图像的透明度，透明度越高图像显示得越明显。使用文本1.概述概述 文本是网页设计最常用的的元素，文本的操作包括文本的插入和文本属性的设置等。注：一个中文字符占2个字节2.插入文本插入文本插入文本有三种方法：(1).直接在文档窗口中输入文本直接在文档窗口中输入文本n Enter:分段换行 Shit+Enter:换行nDreamweaver默认情况下不允许输入连续的空格，若需要输入多个空格，可执行菜单命令“编辑/首选参数”，在打开的“首选参数”面板里将“允许多个连续的空格”选项选中即可，或者将输入法设置为全角状态。注：在全角状态下输入的空格，浏览器的支持效果不好，有
6、时会出现“？”号形式出现报错信息，建议设计者不要在此状态下输入空格。使用文本(2).粘贴其他文本粘贴其他文本n将光标定位到需要插入文本的位置n“编辑/粘贴”（ctrl+v）或者单击标准工具栏上的粘贴按钮(3).导入导入Word或或Excel文档文档导入文档的方法：“文件/导入/word文档”“格式化”选项：是指将选中的Word文档以什么样的格式导入到当前文档里，其下拉列表包括四个选项：n仅文本：插入无格式文本。若原始文本带格式，所有格式将被删除n带结构的文本：插入文本并保留结构，但不保留基本格式设置 结构：段落、列表、表格 基本格式：加粗、倾斜n带结构的文本及基本格式：插入结构化并带简单的HT
7、ML格式的文本。n带结构的文本及全部格式：插入文本并保留所有结构、HTML格式设置和CSS样式使用文本3.设置文本属性设置文本属性选中文本，打开属性面板，即可对选中的文本进行属性设置具体设置如下：n格式：设置所选文本的段落样式 n字体：文本应用所选字体组合n大小：设置字体的字号n文本颜色 ：设置所选文本的颜色。单击颜色框选择网页安全色，或在相邻的文本域中输入十六进制数值n粗体 ：将文本加粗n斜体 ：将文本倾斜 n左对齐（）、居中对齐()、右对齐（）、两端对齐（）：将选 中的文本应用各自的对齐方式使用文本链接；创建所选文本的超文本链接项目列表（）、编号列表（）：创建所选文本的项目列表和编号列表。
8、若未选择文本，则启动一个新的项目列表或编号列表缩进（）、凸出（）：应用或删除blockqutote标签缩进或删除所选文本的缩进。在列表中，创建一个嵌套列表，而删除缩进则取消嵌套列表。使使 用用 图图 像像1.Web页面中常用的三种图片格式页面中常用的三种图片格式(1).GIF 图形交换格式图形交换格式 GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、徽标或其他有统一色彩和色调的图像。另外，还可用作动画图片。(2).JPEG 联合图像专家组标准联合图像专家组标准 JPEG文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含
9、数百万种颜色。随着JPEG文件品质的提高，通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。(3).PNG 可移植网络图形可移植网络图形PNG文件格式是一种替代GIF格式的无专利权限的格式，它包括对索引颜色、灰度、真彩色图像以及alpha通道透明的支持。PNG是Macromedia Fireworks 固有的文件格式，PNG文件可保留所有原始层、矢量、颜色和效使使 用用 图图 像像果信息（如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png 文件扩展名才能被Dreamweaver识别PNG文件。2.插入图像插入图像插入图片的方法：(1).在“插入”菜单栏中
10、单击插入图像按钮(2).插入/图像（Ctrl+Alt+I）“图像标签辅助功能属性”对话框中的设置值：n替代文本：设置图像标签Alt属性值，对当前图像进行说明n详细说明：指定一个网页来加以更详细的说明，其设置的是图像标签Longdesc属性值3.设置图像属性值设置图像属性值n宽和高：以像素为单位指定图像的宽度与高度。注：若设置的“高”和“宽”的值与图像的实际宽和高不相符，则图像在浏览器中可能不会正确显示使使 用用 图图 像像目标：打开链接窗口的形式对齐：指对齐同一行上的图像与文本 参数选项：默认值：与基线对齐基线和底部：将文本（或同一段落中的其他元素）的基线与选定对象的底部对齐。顶端：将图像的顶
11、端与当前行中最高项（图像与文本）的顶端对齐居中：将图像的中部与当前行的基线对齐文本上方：将图像的顶端与当前文本的中最高字符的顶端对齐绝对居中：将图像的中部与当前行中文本的中部对齐绝对底部：将图像的底部与文本行的底部对齐左对齐：将所选图像放置在左边，文本在图像的右侧换行右对齐：将所选 图像放置在右边，文本在图像的左边换行使使 用用 图图 像像使使 用用 图图 像像地图名称和热点名称：允许标注和创建客户端图像地图垂直边距和水平边距：沿图像的边缘添加边距（以像素为单位）垂直边距：沿图像的顶部和底部添加边距水平边距：沿图像的左侧和右侧添加边距边框：以像素为单位的图像边框的宽度，默认为无边框编辑：启动在
12、“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像，默认值为Fireworks，其中包含优化、裁剪、重新取样、亮度和对比度、锐化。使使 用用 图图 像像3.编辑图像编辑图像(1).优化图像打开优化面板的方法：n点击“优化（）”按钮n命令/在Fireworks中优化图像注:n若在本地机安装Fireworks软件，Dreamweaver会自动打开fireworks优化面板，但不打开Fireworks软件n优化图像是一个不可逆的过程，一亘更更新后，将无法撤消(2).裁剪图像裁剪图像就是可让用户修剪图像的大小，从所选图像中删除不需要的区域使使 用用 图图 像像(3).图像重新取样重新取样就是让用
13、户对已调整图像大小后确认，提高图片在新的大小和形状下的品质。(4).调整图像的亮度与对比度亮度与对比度：通过调整图像的高亮显示、阴影和中间色调来修正过暗或过亮的图像。(5).图像锐化锐化：通过增加图像中的边缘的对比度来调整图像的焦点，使图像更加清晰。使使 用用 图图 像像4.插入图像插入图像(1).概述 Dreamweaver 8中插入图像对象包含四个部分内容：图像占位符、鼠标经过图像、导航条、Fireworks HTML(2).图像占位符 图像占位符是在准备好将最终图形添加到web页面之前使用的图形注：名称必须以字母开头，并且只能包含字母和数字(3).鼠标经过图像 鼠标经过图像是指在浏览器里
14、查看并使用鼠标指针移过它时发生变化的效果，使用该效果必须具有两幅图像：主图像与次图像。鼠标经过图像中的两个图像应大小相等，若这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的属性。使使 用用 图图 像像(4).导航条 导航条由图像或图像组组成，这些图像的显示内容随用户操作而变化。导航条分为“插入导航条”和“修改导航条”，通常为在站点上的页面和文件之间移动提供一条简捷的途径。使用“插入导航条”命令之前，须首先为各个导航项目的显示状态创建一组图像，可将导航条项目视为按钮，因为单击它时，导航条项目将用户带到其他页面。n主窗口：在同一个窗口中打开图片n插入：在文档中
15、是垂直插入还是水平插入导航项目n修改/导航条：打开“修改导航条”窗口，在该窗口中可以对已插入的导航条进行可编辑性修改注：每个页面只能插入一个导航条使使 用用 图图 像像5.Fireworks HTML Dreamweavers允许用户将Fireworks生成的HTML代码随关联的图像、切片和Javascript一起插入到文档中。这一插入功能使用户可以方便地在Fireworksk 创建设计元素，然后将这些元素纳入现有的Dreamweaver文档中。插入文件头标签1.概述概述 文件头标签是包含在网页中的“”和“”标签之间，是不可见的，其主要包括：meta、关键字、说明、刷新、基础和链接等。2.插入
16、插入META META标签是描述有关当前页面的信息，如：字符编码、作者、版权信息或关键字等，它是一个非常重要的元素，除了当前网页信息外，也可以用于向服务器提代信息。3.插入关键字插入关键字 在网页中加入关键字，可以供某些搜索引擎装置使用，它们会利用该关键字为用户的网站做索引，当别人用关键字搜索网站时，若用户的网页包含关键字，就可以被列出。插入文件头标签4.插入说明插入说明 插入说明是对一个网页概况的介绍，这些信息可能会出现在搜索引擎装置结果中，因此需要根据网页的实际情况来设计，尽量避免与网页内容不相关“描述”。另外，最好每个网页有自己相应的描述，而不是整个网站都采用同样描述内容。5.插入刷新插
17、入刷新 使用刷新功能可以指定浏览器在一定的时间后自动刷新当前页面，或者跳转到其他页面。6.插入基础插入基础 插入“基础”可以设置页面中所有文档相对路径的基础URL。其中：“href”是基础URL插入文件头标签7.插入链接插入链接 插入“链接”可以定义当前文档与其他文件之间的关系nHref:链接文件的URLnID:为链接指定一个唯一标识符n标题：对链接的描述nRel:指定当前文档与Href文本框中的文档之间的关系nRev:指定当前文档与Href文本框中的文档之间的相反关系使用超级链接1.概述概述 超级链接是指站点内不同网页之间、站点之间的链接关系，它不仅使站点内的网页成为有机的整体，还使不同站点
18、之间建立了联系，超级链接可以定义在文字中，也可定义在图片上，甚至图片的某个局部位置上。2.路径路径 路径通常有三种：绝对路径、文档相对路径、站点根目录相对路径(1).绝对路径 绝对路径提供所链接文档的完整URL，而且包括所使用的协议，对于web页通常使用注：n当链接到其他服务器上的文档，必须使用绝对路径n不建议使用绝对路径，因为一旦将此站点移动到其他域，则所有本地绝对路径都将断开使用超级链接(2).文档相对路径文档相对路径 文档相对路径指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略掉对于当前文档和所链接的文档都相同的绝对URL部分，只提供不同的路径部分(3).站点根目录相对路
19、径站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。若在处理使用多个服务器的大型web站点，或者使用承载有多个不同站点的服务器，则可能需要使用这些类型的路径。站点根目录相对路径是以一个正斜杠开头，该正斜杠表示站点根文件夹。使用超级链接2.超级链接的语法超级链接的语法语法结构如下：其中：URL是指链接的文件的路径3.创建超级链接创建超级链接(1).概述概述 根据链接的对象内容不同，超级链接又分为文本链接、电子邮件链接、图像或热区链接、下载链接、空链接、脚本链接和锚点链接(2)创建文本链接创建文本链接创建方法：n“插入/超级链接”或点击“插入”工具栏的超级链接按钮n在属性面板
20、里的“链接”选项里输入要链接的文件使用超级链接“目标”选项如下：n_blank：将链接的文件载入一个未命名的新浏览器窗口中n_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中；若包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。n_self：将链接的文件载入该链接所在的同一框架窗口中。此目标是默认的，所通常不要指定它。n_top：将链接的文件载入整个浏览器窗口中，因而会删除所有框架使用超级链接4.创建图像超链接创建图像超链接(1).概述概述图像也可以作为超级链接，它又分为图像链接和热区链接。热区：在一张图片上实现多个局部区域指向不同的网页链接(2).图像链接图像链接
21、(3).图像热区链接图像热区链接n圆形工具（）：创建一个圆形热点n矩形工具（）：创建一个矩形热点n多边形工具（）：创建一个不规则形状的执点5.创建下链接创建下链接使用超级链接6.创建电子邮件链接创建电子邮件链接创建电子邮件的方法：n插入/电子邮件链接n打开属性面板，在“链接”文本框键入“mailto：”，后面跟电子邮件地址注：在冒号和电子邮件地址之间不能键入任何空格7.创建锚点链接创建锚点链接(1).概述概述当一个网页的主题或文字较多时，可以在网页内建立多标记点，将超链接指定到这些标记上，能够浏览者快速找到要阅读的内容。我们将这些标记称为锚点。(2).创建方法创建方法创建命名锚记创建到该命名锚
22、记的链接使用超级链接注：锚记名称只能包含小写ASCII字母和数字，且不能以数字开头，不能有空格，并区分大小写若要链接到同一文件夹内其他文档中的名为“bottom”锚记，可键入filename.html#bottom8.空链接空链接空链接：不会跳转到新的URL地址9.创建脚本链接创建脚本链接脚本链接是指执行Javascript代码或调用Javascript函数创建方法：在属性面板中的“链接”文本框里键入“javascript:”，后面跟一些 JavaScript代码或函数调用在网页中插入其他元素1.插入特殊字符插入特殊字符插入方法：n插入/HTML/特殊字体n将“插入”工具切换到“文本”类型，在
23、该类别下选择“字符”下拉菜单中的字符命令2.插入日期插入日期插入方法：n插入/日期n单击“插入”工具栏上的“日期”按钮3.插入水平线插入水平线n插入/HTML/水平线n在“插入”工具栏将类别切换到“HTML”状态下，点击插入“水平线”按钮注：在“属性”面板中可设置水平线的宽和高、对齐方式、阴影等使 用 媒 体1.插入插入Flash动画动画(1).概述概述 Flash集声音、图像和动画等内容于一体，又加之其使用了优化的算法将多媒体数据进行压缩，使文件变得很小，更加适合于在网上传播。(2).插入插入Flash动画的方法动画的方法 方法：插入/媒体/Flash2.插入插入Flash对象对象(1).概
24、述概述 Flash对象包括：Flash按钮和Flash文本。(2).插入插入Flash按钮按钮 Flash按钮对象是基于Flash模板可更新的按钮，用户可以自定义Flash按钮对象，并添加文本、背景色以及其他文件的链接。使 用 媒 体插入方法：插入/媒体/Flash按钮(3).插入插入Flash文本文本在Dreamweaver中可以插入只包含文本的Flash动画，从而创建小型Flash动画插入方法：插入/媒体/Flash文本3.插入音频插入音频(1).概述概述网络上流行的音乐格式：MP3、WAV、MIDI(2).在网页中加入音频在网页中加入音频(3).在网页中嵌入音频文件在网页中嵌入音频文件
25、插入/媒体/插件使 用 媒 体(4).在网页中加入背景音乐在网页中加入背景音乐 在代码窗口里找到“body”标签，在其后键入如下代码：标签“bgsound”有三个属性：nsrc：设定背景音乐路径nautostart：设置背景音乐是否自动播放nloop：设置背景音乐播放次数注：该标签只有在IE中支持，而在其他浏览器不支持。使 用 媒 体4.插入插入ActiveX控件控件(1).概述概述 ActiveX控件是可以充当浏览器的可重复使用的组件，它犹如缩小的应用程序,能产生和浏览插件一样的效果。ActiveX控件在Windows系统中的IE里运行，但不能在Macintosh系统上或Netscape Navigator中运行。Dreamweaver 中的ActiveX对象允许用户在网页访问者的浏览器中为ActiveX控件设置属性和参数(2).插入ActiveX控件插入方法：插入/媒体/ActiveX
