《Dreamweaver网页设计与网站开发》第三章.ppt

Companyname主讲：Dreamweaver网页设计与网站开发第三章添加网页元素第一节网页文本一、输入各种文本（一）输入文本第一种是直接输入法（见图3-1）。第二种方法是复制粘贴法：首先在其他窗口中选取一些文本，按【Ctrl】+【C】快捷键复制文本，然后将光标定位到Dreamweaver窗口中要插入文本的地方，按【Ctrl】+【V】快捷键，将其粘贴到指定位置。第三种方法是导入已有的Word文档，将其做成网页：在Dreamweaver中，将光标定位到要导入文本的地方，执行【文件】→【导入】→【Word文档】命令，选择要导入的Word文档，这时导入的文本的格式与Word中的相同（见图3-2）。第一节网页文本无论是输入、插入还是导入文本，【属性】检查器中的选项均为文本的基本属性（见图3-3）。利用【属性】检查器，用户可以方便地修改选中文本的各种属性。相关按钮旳功能如表3-1所示。第一节网页文本在【属性】检查器中，用户可以方便地设置选中文本的基本属性，主要包括【粗体】和【斜体】两个项目。单击【粗体】按钮即可将文本加粗；而单击【斜体】按钮可以使文本倾斜（见图3-4）。【格式】下拉列表中的选项用来为选中的文本添加格式化效果。选中文本后单击【属性】检查器【格式】下的三角按钮，选择列表中的某个选项，即可为选中文本添加效果（见图3-5）。第一节网页文本（二）插入特殊符号（见图3-6）注意：如果在下拉列表中没有要插入的字符，可以单击【其他字符】按钮，弹出的对话框中包括了更多的特殊符号。其中，【字符】下拉菜单中各个按钮的名称及作用人如表3-2所示。第一节网页文本（三）插入水平线水平线可以分隔页面内容，使页面元素相互分开。要想在页面中插入水平线，只需执行【插入】→【HTML】→【水平线】命令即可。这时【属性】检查器会显示水平线的具体参数（见图3-7）。其中【属性】检查器中各参数的含义如表3-3所示。在【属性】检查器中，用户可以分别设置水平线的【宽】与【高】，以及【对齐】项的参数（见图3-8）。注意：将水平线的【宽】与【高】选项的参数值相反设置，能够得到垂直的分隔线。第一节创建本地站点二、创建段落与列表（一）创建文本段落（见图3-9）（二）创建项目符号创建项目列表有两种方法：一种是直接创建项目列表，方法是单击【文本】选项卡中的【项目列表】按钮，在光标所在位置插入项目列表默认图标，输入文本后按【Enter】键出现第二个项目列表图标。以此类推，要想结束项目列表的创建，只要连续两次按【Enter】键即可（见图3-10）。创建项目列表的另一种方法是，在文档中选中文字段落后，单击【插入】面板的【文本】选项卡中的【项目列表】按钮（见图3-11）。第二节网页图像一、网页中常见的图像格式（一）GIF格式图像GIF（GraphicsInterchangeFormat）可译为“图像交换格式”，是一种无损压缩图像的格式。它可使文件大小最小化，且支持动画格式，能在一个图像文件中包含多帧图像页，使浏览者在浏览器中浏览时可看到动感图像效果。网上小一点的动画一般都是GIF格式的图像。GIF只支持8位颜色（256种色），不能用于储存真彩色的图像文件，适合显示色调不连续或有大面积单一颜色的图像，如导航条、按钮、图标等。通常情况下，GIF图像的压缩算法是有版权的。（二）JPEG格式图像JPG/JPEG（JointPhotographicExpertsGroup）可译为“联合图像专家组”，是一种压缩格式的图像。JPEG文件能使图像在品质和文件大小之间达到较好的平衡，损失原图像中不易为人眼察觉的内容，从而获得较小的文件尺寸，使图像下载快捷。JPG/JPEG格式支持24位真彩色，是普遍用于显示摄像图片和其他连续色调图像的高级格式。若网站对图像颜色要求较高，则设计师应采用这种类型的图像。目前各类浏览器都支持JPEG图像格式，因为JPEG格式的文件尺寸较小，下载速度快。（三）PNG格式图像PNG（PortableNetworkGraphic）可译为“便携网络图像”，是一种格式非常灵活的图像，用以在WWW上无损压缩和显示图像。Fireworks制作的图像默认为PNG格式，生成的文件比较小。PNG图像支持多种颜色数目，从8位、16位、24位到32位均可。可替代GIF格式，支持索引色、灰度、真彩色图像及透明背景。对商业网站而言，使用PNG格式的图像比较安全，因为没有版权问题。第二节网页图像二、在网页中插入图像第二节网页图像三、使用图像占位符（