《网页制作初步》PPT课件

《《网页制作初步》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章网页制作初步本章学习目标通过理论学习，了解网站制作前的准备，其中包括素材准备和站点结构的规划；了解网页中图像的分类及其特点；理解站点和链接的概念其中包括URL、绝对路径和相对路径的概念。通过实例分析，掌握站点的建立及站点参数的设置方法、编辑站点的方法；熟练掌握网页文件的新建和保存方法；掌握文本和特殊字符的输入方法，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法；掌握设置网页属性的方法，了解网页文件头中各项内容的含义。熟练掌握在网页中添加图像及相关属性的设置方法、学会创建图像热点区域；熟练掌握在网页中设

2、置超级链接的方法，学会站点链接资源的管理方法；掌握在网页中插入Flash元素的基本方法及相关属性的设置。本章设计任务构建一个以介绍厦门为主题的简单个人网站2．1创建和管理站点2．1．1建立站点前的准备工作1．规划站点结构（1）将站点内容分门别类，即将相关页面放置在同一文件夹内。（2）单独放置图像、声音或其他多媒体文件。即将所有图像、声音或其他多媒体文件放在独立的文件夹内。（3）对本地站点和远程站点使用相同的结构，在创建并测试完站点后，将所有文件都上传到远程站点，使本地结构完整地复制到远程站点上。2．1创建和管理站点2．准备

3、网页素材2．1．2创建和管理站点1．创建站点①在本地计算机上建立站点目录结构。②启动DreamweaverMX2004。③单击菜单“站点”/“站点管理”，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的下拉菜单中单击“站点”项，将打开站点定义对话框（如图2-6所示）。2．1创建和管理站点④在站点定义对话框中，设置“站点名称”项和“本地根文件夹”项，如果需要指定默认图像文件夹，则设置“默认图像文件夹”项，勾选“自动刷新本地文件列表”项和“启用缓存”项。⑤单击确定按钮，回到“管理站点”对话框，单击“完成”按钮关闭该对话框

4、。完成站点创建操作。2．实例3．管理站点（1）编辑修改站点（2）删除站点（3）复制站点2．1创建和管理站点4．管理站点文件（1）创建文件（2）重命名文件（3）移动和复制文件（4）删除文件2．2网页的新建、保存和编辑2．2．1新建、打开和保存网页新建网页打开网页保存网页2．2．2设置页面属性打开“页面属性”对话框的方法主要有以下四种：（1）单击菜单“修改”/“页面属性”。（2）使用快捷键Ctrl+J。2．2网页的新建、保存和编辑（3）在“文档”窗口下面的属性面板中，单击“页面属性”按钮。（4）在“文档”窗口的空白处右击鼠标，

5、在弹出的快捷菜单中选择“页面属性”项。2．2．3使用标签选择器2．2．4实例（1）新建网页（2）设置页面属性（3）保存网页2．3文字的应用2．3．1在网页中编辑文字1．输入文字2．插入特殊字符3．编辑文字2．3．2设置文字格式1．字体格式的设置2．文字颜色的设置3．文字样式的设置4．文字列表的设置5．其他设置6．设置段落格式2．3文字的应用2．3．3实例（1）设置页面属性（2）输入并编辑文字（3）设置文字格式2．4插入水平线和日期2．4．1插入水平线2．4．2插入日期2．4．3实例2．5图像的应用网页中的图形图像主要起到以

6、下三个方面的作用：（1）美化网页。（2）对事物作图形化说明。（3）作为网页动态效果的载体。2．5图像的应用2．5．1常用Web图像格式1．GIF图像专门为Web图像而设计的图像格式最多只能表现256种颜色图像文件较小文件扩展名为.gif支持透明属性支持动画GIF图像常用于网页中的小图标、符号、动画标题等2．5图像的应用2．JPEG图像一种有损压缩的图像格式压缩比可以达到非常高文件变得非常小文件扩展名为.jpg支持24位真彩色2．5图像的应用3．PNG图像是MacromediaFireworks默认的图形文件格式只有在4.0

7、及其以上版本的浏览器才能被正确识别同时支持真彩色和透明属性可以导出GIF动画2．5．2在网页中插入图像1．插入图像的操作方法有以下四种：（1）利用菜单操作（2）使用“插入”工具栏操作（3）使用“资源”面板操作（4）使用快捷键操作2．5图像的应用2．设置图像属性3．实例（1）使用菜单插入图像文件xiamen.gif（2）使用“插入”工具栏插入图像文件ditu.gif（3）使用快捷键插入图像文件npt.gif（4）插入图像文件gulangyu.gif2．5．3插入图象占位符1．插入图像占位符图2-27“图像占位符”对话框2．5

8、图像的应用2．替换图像占位符2．5．4插入鼠标经过图像1．插入鼠标经过图像图2-28“插入鼠标经过图像”对话框2．5图像的应用2．实例（1）新建网页并设置页面属性（2）输入文字和水平线（3）插入图像占位符（4）插入鼠标经过图像（5）保存网页2．5．5插入FireworksHTML文件1．插入Firewo