网页设计与制作——DreamweaverMX2004邓宁4章节.pptVIP

项目四 网页的基本操作 项目提要 网页是网站的基本组成元素，因此要建立一个网站，第一步就是创建和编辑网页。对于网页的基本操作包括网页的创建、保存及属性设置，在网页中插入文本、图像、Flash动画、背景音乐等常见对象以及对象属性的设置。 学习目标 熟练掌握网页的创建、打开、命名和保存； 熟练掌握网页的布局设计和页面的属性设置； 熟练掌握在网页中添加文本、列表、图像、鼠标经过图像、水平线、日期和时 间、Flash、声音等网页对象及其属性设置的方法。 任务一 新建网页 任务一 新建网页 2．创建基于模板的文档 3．保存文档 任务二 页面布局及属性设置 操作一 页面属性设置 操作一 页面属性设置 操作一 页面属性设置 操作一 页面属性设置 操作一 页面属性设置 操作一 页面属性设置 操作二 页面的布局设计 任务二 在网页中插入文本 操作一 插入文本 1．直接添加文本 2．导入文本 （1）Word文档的导入 （2）Excel文档的导入 （3）表格式数据的导入 操作一 插入文本 操作二 文本格式化 操作二 文本格式化 操作二 文本格式化 操作三 在文本中插入特殊字符 任务三 创建文字列表 操作二 创建有序列表 操作三 创建嵌套列表 任务四 使用图像 操作一 插入图像 1．图像的格式 图像文件的格式有很多种，但通常应用于网页中的图像文件只有GIF、JPEG（JPG）及PNG三种，大多数浏览器都支持过三种文件格式的图像。 （1）GIF格式 GIF是Graphics Interchange Format（图形交换格式）的简称，主要用于存储非连续色调图像或色调比较单一的图像。它采用删除图像信息中冗余信息的方式对图像进行压缩，因而是一种无损压缩。这种格式的图形文件最多使用256种颜色，具有体积小，下载速度快等优点，在网页制作常用于制作导航条、按钮、图标等网页元素。 （2）JPEG（JPG）格式 JPEG是Joint Photographic Experts Group（联合图像专家组）的简称，主要用于存储照片或连续色调的图像。它采用有选择地删除原图像中人眼不易察觉的部分来压缩文件大小，是一种有损压缩。JPEG图像可支持多达16M颜色，因而常用于显示网页中对图片色彩和清晰度要求较高的地方，是目前互联网中最受欢迎的图像格式。 （3）PNG格式 PNG是Portable Network Graphic（可移植网络图像）的简称，它同时具有GIF格式图像和JPEG格式图像的优点，它既可以采用无损压缩的算法，也可以采用有损压缩的算法来压缩图像，从而进一步减少文件的大小。而且PNG格式的图像支持多种颜色的显示，因而是未来互联网中颇具发展前景的一种图像格式。 操作一 插入图像 操作二 设置图像属性 操作二 设置图像属性 操作二 设置图像属性 操作二 设置图像属性 操作二 设置图像属性 操作二 设置图像属性 任务五 在页面中插入鼠标经过图像 在浏览网页的过程中，有时会遇到这样的情况：当鼠标移动到某一图像的上方时，该图像自动切换到另一幅图像；而当鼠标移出图像时，该图像又恢复原貌。这种效果的图像就是所谓的鼠标经过图像。 操作一 编辑图像 为取得好的鼠标经过图像的效果，用户可先利用图像编辑工具，如PhotoShop或FireworksMX2004等软件，将两张图片处理成大小一致的图像。 操作二 插入鼠标经过图像 任务六 在网页中插入其他网页元素 操作一 插入水平线 1．添加水平线 在文档中添加水平线的操作步骤如下： （1）将光标移到要添加水平线的位置。 （2）选择菜单 “插入→HTML →水平线命令，或将插入工具栏切换到“HTML”选项，然后再单击按钮。 操作二 插入日期和时间 操作三 插入Flash对象 操作三 插入Flash对象 操作三 插入Flash对象 操作四 添加声音 项目拓展 用布局视图设计页面 项目小结 本项目主要介绍网页的新建、保存、命名、打开的方法，页面的布局及属性设置，在页面中插入文本、文字列表、图像、水平线、日期、Flash动画及声音等网页元素的方法和技巧，这些方法和技巧都是通过多做多练多思考才能够熟练掌握。 （1）在当前文档中将光标置于要插入日期对象的位置。 （2）选择菜单 “插入→日期”命令，或将插入工具栏切换到“常用”工具栏选项，然后单击工具栏上的按钮，打开如图4-75所示的“插入日期”对话框。 “插入日期”对话框 1．插入Flash动画 选择菜单 “插入→媒体→Flash” 命令，或单击“常用”插入工具栏上的“Flash”按钮，打开“选择文件