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