《第3章网页的编辑.ppt》由会员分享，可在线阅读，更多相关《第3章网页的编辑.ppt（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第三章第三章 网页的编辑网页的编辑 3.1 字体与段落的设置 在网页上浏览时，可以发现：任何一个网页，不论优秀，还是平庸，都含有两个要素，即文字和图片。其中文字是一个网页最基本的要素， 掌握文字字体与段落的设置方法 ，非常重要。第三章第三章 网页的编辑网页的编辑 3.1.1 字体与字号-行间距 用键盘操作换行有两种方法：按Enter键或按Enter+Shift组合键。按Enter键，换行的行距较大。一般换行使用Enter+Shift组合键，这样换行才是正常行距。 行间距：使用使用Enter键的效果键的效果 使用使用Enter+Shift组合键的效果组合键的效果 第三章第三章 网页的编辑网页的编
2、辑 3.1.1 字体与字号-添加字体 由于Dreamweaver提供的默认字体中没有中文字体，所以在设置字体之前，应该先将中文字体添加到“属性面板” 字体下拉列表框中。 在“属性面板”中，单击“字体”框，在下拉菜单中选择“编辑字体列表” 。在弹出的对话框中，选中“可用字体”栏中的中文字体，单击“选定”按钮，字体出现在“选择的字体”栏中。单击“确定”，字体被加入。 第三章第三章 网页的编辑网页的编辑 3.1.1 字体与字号-设置字体和字号 选择文字，然后，在“属性面板”中单击“字体”框，在下拉列表中选择“楷体GB_2312”，将字体设为楷体；单击“字号”框，在下拉列表中选择“3”，将字体设为3号
3、字。 文字字号的下拉选框有无、1、2、3、4、5、6、7、+1、+2、+3、+4、+5、+6、+7、-1、-2、-3、-4、-5、-6、-7等选项。无表示使用浏览器默认字号（一般为3），单独的数字表示字号，数字前有+号和-号表示相对于默认字号的字号大小。例如，5表示5号字，+3表示默认字号大小加上3，-2表示默认字号大小减去2。 第三章第三章 网页的编辑网页的编辑 3.1.2 文字的对齐方式 选中整个表格，将属性面板中的“填充”值更改为10，这样各个单元格间的距离更改为10像素；将“间距”值更改为10，这样表格中的文字与表格框线的距离变成10像素。 选中单元格, 这时属性面板显示的是单元格设置
4、的内容。单击“对齐”框在弹出的下拉菜单内中选择“居中对齐”，单元格中文字在单元格中居中显示。 第三章第三章 网页的编辑网页的编辑 3.1.3 文字的风格与颜色 选中文字，在属性面板中单击“颜色”按钮，打开颜色板，选择褐色，将文字设为褐色。单击“加粗”，将文字设为加粗。 第三章第三章 网页的编辑网页的编辑 3.1.4 段首缩进 在文章的首行，要空两个格，在Dreamweaver中，不能象Word一样拖动首行缩进按钮，也不能连续按空格。要实现在段首空两个格，应该切换到代码编辑区，在段首文字前输入代码 （注意不要漏掉；）。 单击“查看”菜单。在下拉菜单中选择“代码和设计”命令。 在HTML
5、代码编辑区域中，找到要段落缩进的文字，在文字前插入 ；。然后在文本编辑区单击鼠标，可以看到实际效果。注意由于一个汉字占两个字节，所以默认情况下要插入4个标记。 第三章第三章 网页的编辑网页的编辑 3.2 美化网页 美化页面最简单直接的方法就是在网页上添加图片。除了文字，图片是网页中最重要的构成元素。有了图片可以使网页内容更生动，同时可以表达一些文字不好表达的内容，使网页内容的表达更直观，更一目了然。 设置了背景色和背景图片，可以给网页穿上漂亮的外衣，使网页不再单调。人们说一个网页漂亮，通常就是指网页上的图片漂亮。 第三章第三章 网页的编辑网页的编辑 3.2.1 插入水平线 在网页中插入
6、一条水平线，将网页底端的文字与正文分开。这样可以使网页段落分明。 将光标移动合适位置，单击插入面板的“水平线”按钮，网页上自动插入一条水平线。 当用鼠标选取水平线时，窗口下面的属性面板显示水平线的相关内容，在该面板中可以修改水平线的宽度和高度。 第三章第三章 网页的编辑网页的编辑 3.2.2 插入图片-图片格式 因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。 JPG/JPEG GIF 色彩 真彩色 16色、256色 特殊功能 无 透明背景、动画 压缩是否有损失 有损压缩 无损压缩 适合情景 颜色丰富，有连续的色调，一般表现真实的事物 颜色有限，主要以漫画图案或线条为主。一般表现
7、建筑结构图或手绘图。 第三章第三章 网页的编辑网页的编辑 3.2.2 插入图片 确定光标的位置，单击对象面板上的 “图像”按钮，弹出“选择图像源”对话框， 单击查找范围，在下拉菜单中，选择位置，找到图片。单击“确认”，将图片插入网页。 由于图片在网站以外，所以，Dreamweaver弹出一个对话框，提示是否将图片保存到网站中。单击“是”。完成操作。 第三章第三章 网页的编辑网页的编辑 3.2.3 设置图片 单击图片，图片被一个黑框框住，同时出现三个小的实心黑框。鼠标指针指向实心黑框，当鼠标指针变成双向箭头时，拖动鼠标，更改图片的大小。 在单击图片时，属性面板同时被打开。在“替代”框中输入文字。
8、这样，当鼠标在浏览器中移动到该图片上时，会显示替代文字；特别地，由于网络慢等原因，图片不能正常下载时，图片区域会显示替代文字，从而不会影响到网页的整体效果。 第三章第三章 网页的编辑网页的编辑 3.2.4 添加网页背景 要使网页漂亮起来，设置页面属性必不可少。用鼠标单击菜单栏上的“修改”，在下拉菜单中单击“页面属性”，打开“页面属性”对话框。在“页面属性”对话框中，单击背景图像框右边的“浏览”，找到存放图像的文件夹，选中图片，单击“确定”，完成操作。 第三章第三章 网页的编辑网页的编辑 3.2.5 设置表格背景 拖动鼠标选中所有单元格，单击“属性”面板上背景颜色后面的“颜色”块，在弹出的调色板中选择一种颜色，单元格背景颜色被改变。