《网页制作初步》PPT课件.ppt

第第2章章 网页制作初步网页制作初步本章学习目标 通过理论学习，了解网站制作前的准备，其中包括素材准备和站点结构的规划；了解网页中图像的分类及其特点；理解站点和链接的概念其中包括URL、绝对路径和相对路径的概念。通过实例分析，掌握站点的建立及站点参数的设置方法、编辑站点的方法；熟练掌握网页文件的新建和保存方法；掌握文本和特殊字符的输入方法，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法；掌握设置网页属性的方法，了解网页文件头中各项内容的含义。熟练掌握在网页中添加图像及相关属性的设置方法、学会创建图像热点区域；熟练掌握在网页中设置超级链接的方法，学会站点链接资源的管理方法；掌握在网页中插入Flash元素的基本方法及相关属性的设置。本章设计任务 构建一个以介绍厦门为主题的简单个人网站 21 创建和管理站点211 建立站点前的准备工作1规划站点结构（1）将站点内容分门别类，即将相关页面放置在同一文件夹内。（2）单独放置图像、声音或其他多媒体文件。即将所有图像、声音或其他多媒体文件放在独立的文件夹内。（3）对本地站点和远程站点使用相同的结构，在创建并测试完站点后，将所有文件都上传到远程站点，使本地结构完整地复制到远程站点上。21 创建和管理站点2准备网页素材212 创建和管理站点1创建站点 在本地计算机上建立站点目录结构。启动Dreamweaver MX 2004。单击菜单“站点”/“站点管理”，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的下拉菜单中单击“站点”项，将打开站点定义对话框（如图2-6所示）。21 创建和管理站点 在站点定义对话框中，设置“站点名称”项和“本地根文件夹”项，如果需要指定默认图像文件夹，则设置“默认图像文件夹”项，勾选“自动刷新本地文件列表”项和“启用缓存”项。单击确定按钮，回到“管理站点”对话框，单击“完成”按钮关闭该对话框。完成站点创建操作。2实例3管理站点（1）编辑修改站点（2）删除站点（3）复制站点21 创建和管理站点4管理站点文件（1）创建文件（2）重命名文件（3）移动和复制文件（4）删除文件22 网页的新建、保存和编辑221 新建、打开和保存网页新建网页打开网页保存网页222 设置页面属性打开“页面属性”对话框的方法主要有以下四种：（1）单击菜单“修改”/“页面属性”。（2）使用快捷键Ctrl+J。22 网页的新建、保存和编辑（3）在“文档”窗口下面的属性面板中，单击“页面属性”按钮。（4）在“文档”窗口的空白处右击鼠标，在弹出的快捷菜单中选择“页面属性”项。223 使用标签选择器224 实例（1）新建网页（2）设置页面属性（3）保存网页23 文字的应用231 在网页中编辑文字1输入文字2插入特殊字符3编辑文字232 设置文字格式1字体格式的设置2文字颜色的设置3文字样式的设置4文字列表的设置5其他设置6设置段落格式23 文字的应用233 实例（1）设置页面属性（2）输入并编辑文字（3）设置文字格式24 插入水平线和日期241 插入水平线242 插入日期243 实例25 图像的应用网页中的图形图像主要起到以下三个方面的作用：（1）美化网页。（2）对事物作图形化说明。（3）作为网页动态效果的载体。25 图像的应用251 常用Web图像格式1GIF图像专门为Web图像而设计的图像格式 最多只能表现256种颜色 图像文件较小 文件扩展名为.gif 支持透明属性 支持动画 GIF图像常用于网页中的小图标、符号、动画标题等 25 图像的应用2JPEG图像一种有损压缩的图像格式 压缩比可以达到非常高文件变得非常小 文件扩展名为.jpg 支持24位真彩色 25 图像的应用3PNG图像是Macromedia Fireworks默认的图形文件格式 只有在及其以上版本的浏览器才能被正确识别 同时支持真彩色和透明属性 可以导出GIF动画 252 在网页中插入图像1插入图像的操作方法有以下四种：（1）利用菜单操作（2）使用“插入”工具栏操作（3）使用“资源”面板操作（4）使用快捷键操作 25 图像的应用2设置图像属性3实例（1）使用菜单插入图像文件xiamen.gif（2）使用“插入”工具栏插入图像文件ditu.gif（3）使用快捷键插入图像文件npt.gif（4）插入图像文件gulangyu.gif253 插入图象占位符1插入图像占位符图2-27“图像占位符”对话框25 图像的应用2替换图像占位符254 插入鼠标经过图像1插入鼠标经过图像图2-28“插入鼠标经过图像”对话框25 图像的应用2实例（1）新建网页并设置页面属性（2）输入文字和水平线（3）插入图像占位符（4）插入鼠标经过图像（5）保存网页255 插入Fireworks HTML文件1插入Fireworks HTML2实例26 创建超级链接261 理解超级链接1超级链接的分类（1）文档链接（2）书签链接（3）电子邮件链接（4）空链接（5）脚本链接 2理解文件路径绝对路径 与站点根文件夹相对的路径 与网页文档相对的路径 26 创建超级链接262 创建页面链接1创建超级链接（1）使用“插入”菜单或“插入”面板创建超级链接（2）使用“属性”面板创建（或修改）链接（3）使用“指向文件”图标直接指向要链接的文件 2实例（1）通过“页面属性”设置超级链接的样式（2）为gaikuang.htm创建超级链接（3）为gly.htm创建超级链接26 创建超级链接263 创建锚记链接1创建锚记链接2实例264 创建电子邮件链接1创建电子邮件链接（1）通过“插入”工具栏或“插入”菜单创建电子邮件链接（2）通过“属性”面板创建或修改电子邮件链接 2实例26 创建超级链接265 创建图像热区链接1创建图像热区链接2实例图2-39 图像热区厦门博物馆日光岩27 插入多媒体对象271 插入和设置Flash动画文件格式及扩展名扩展名为.fla的Flash源文件格式 扩展名为.swf的Flash动画文件格式 扩展名为.swt的Flash Generator模板文件格式 1插入Flash动画2设置Flash动画属性27 插入多媒体对象272 插入Flash按钮插入Flash按钮的操作步骤:将光标定位在需要插入Flash按钮的位置。单击菜单“插入”/“媒体”/“Flash按钮”。在打开的“插入Flash按钮”对话框中进行相应设置(见下页图所示)。单击“确定”按钮，将Flash按钮插入到网页中的指定位置。27 插入多媒体对象图2-41“插入Flash按钮”对话框27 插入多媒体对象273 插入Flash文本对象在网页中插入Flash文本对象的操作步骤如下：将光标定位在需要插入Flash文本对象的位置。单击菜单“插入”/“媒体”/“Flash文本”。在打开的“插入Flash文本”对话框中进行相应的设置（如下页图所示）。单击“确定”按钮，在网页中的指定位置插入Flash文本对象。27 插入多媒体对象图2-42“插入Flash文本”对话框27 插入多媒体对象274 在网页中插入声音目前常见的声音格式（1）.midi或.mid格式（2）.mp3格式（3）.ra、.ram、.rpm或RealAudio格式1嵌入声音文件2设置网页背景音乐275 实例本章学习内容总结创建和管理站点网页的新建、保存和编辑文字的应用插入水平线和日期图像的应用创建超级链接插入多媒体对象