第02章 网页中的文字和图像.ppt

第2章 网页中的文字和图像 2.1 网页中的文字 2.2 网页中的图像 2.3 图像的编排 2.4 设置页面属性 2.1.1 应用文字 1．直接输入文字 2．粘贴剪贴板中的文字 3．导入Word文档 4．插入特殊字符 2.1 网页中的文字 2.1.2 课堂实例——设置文本格式 1．关于设置文本格式 默认情况下，Dreamweaver使用层叠样式表（CSS）设置文本格式。CSS使Web设计人员和开发人员能更好地控制网页设计。当使用 Dreamweaver的格式设置命令设置文本格式和对齐文本时，CSS规则将嵌入到当前文档中。 如果愿意，可以使用HTML标签在网页中设置文本格式和对齐方式。若要使用HTML标签而不是CSS，则必须更改Dreamweaver的默认文本格式设置首选参数。 2.1 网页中的文字 2．设置文本字体 2.1 网页中的文字 3．设置文字大小 2.1 网页中的文字 4．设置文本颜色 2.1 网页中的文字 2.1.3 课堂实例——设置段落格式 1．对齐文本 2.1 网页中的文字 2．段落间距和换行标签 2.1 网页中的文字 按Enter键换行以后，其实就是一个新段落的开始。切换到代码视图，可以观察到多了一对p/p标签。按Shift+Enter组合键进行分段，可以看到两个段落之间间距很小，切换到代码视图，可以观察到这次操作系统自动生成了一个br/标签。 3．文本缩进 2.1 网页中的文字 进入“属性”面板，单击“文本缩进”按钮 ，在设计视图中可以看到文本缩进的效果。切换到代码视图，可以观察到定义文本缩进的标签是一对blockquote/blockquote标签。“属性”面板中还提供了一个“文本凸出”按钮 ，单击这个按钮可以恢复已经缩进的文本到原来的格式。 2.1.4 课堂实例——设置文字标题 HTML的标题标签主要用来快速设置文本标题的格式，典型的形式是h1/h1，它用来设置第一级标题，h2/h2设置第二级标题，以此类推。 1．在代码视图直接定义标题标签 2．在属性面板中设置标题 2.1 网页中的文字 2.1.5 使用段落列表 1．编号列表 2.1 网页中的文字 编号列表又称为有序列表，使用ol/ol标签创建编号列表。具体使用方法如下： ol li列表项目一/li li列表项目二/li li列表项目三/li li列表项目四/li /ol 2.1.5 使用段落列表 2．项目列表 2.1 网页中的文字 项目列表使用ul/ul标签创建项目列表。具体使用方法如下： ? ul li列表项目一/li li列表项目二/li li列表项目三/li /ul 2.1.6 设置段落样式 使用“属性”面板设置文本格式时，Dreamweaver将跟踪操作者为每个文本元素指定的格式设置属性，并使用如下命名约定为每个元素指定一个标识：Style1、Style2、Style3、Stylen。如果为两个或更多文本元素指定相同的格式属性，Dreamweaver将使用相同的标识标记这些元素，从而减少了不必要的样式名称。这些被Dreamweaver自动跟踪所创建的标识都会显示在“属性”面板的“样式”列表框中。 2.1 网页中的文字 2.2.1 网页中常见的图像格式 GIF格式是由CompuServe公司开发的与设备无关的图像存储标准，也是Web上使用最早、应用最广泛的图像格式，GIF是通过减少组成图像每个像素的储存位数和LZH压缩存储技术来减少图像文件的大小。GIF格式最多只能是256色的图像，它的特点有：图像文件短小，下载速度快，低颜色数时比JPEG装载得更快，可用许多具有同样大小的图像文件组成动画。在GIF图像中可指定透明区域，使图像具有非同一般的显示效果。 JPEG格式是在目前互联网中最受欢迎的图像格式，JPEG可支持多达16M颜色，它能展现十分丰富生动的图像，还能压缩。但压缩方式是以损失图像质量为代价，压缩比越高，图像质量损失越大，图像文件也就越小。 PNG格式是最近使用量逐渐增多的图像格式，它具备GIF和JPEG的双重优点。与GIF相比，它可以相对提高10%～30%的压缩率，也可以利用Alpha通道，保存部分图像。另外，PNG格式支持24位真彩色。 2.2 网页中的图像 2.2.2 在网页中使用图像 1．插入图像 2.2 网页中的图像 网页中的图像是用img标签定义的，可以切换到代码视图查看相关的代码： img src=../images/diannao3.png alt=最新电脑产品 width=159 height=141 / 在新建网页文档时，应该先指定文件名并保存之后再继续操作。如果在未保存网页文档的