3.4　综合案例——制作旅游网页

下面以制作旅游网页效果为例，进行网页的编辑与设计操作，例如在网页中制作文本项目符号、制作网页图片展示、制作网页水平线的效果等，希望读者熟练掌握。

3.4.1　制作文本项目符号

在编辑网页文本时，为了表明文本的结构层次，可以为文本添加适当的项目列表与编号列表来表明文本的顺序，项目列表与编号列表是以段落为单位的，一般出现在层次小标题的开头位置，用于突出该层次小标题。

素材文件　　光盘\素材\第3章\3.4.1\index.html

效果文件　　光盘\效果\第3章\3.4.1\index.html

视频文件　　光盘\视频\第3章\3.4.1　制作文本项目符号.mp4

步骤01　单击“文件”|“打开”命令，打开一个网页文档，如图3-57所示。

步骤02　在网页文档中，选择需要添加项目列表的文本内容，如图3-58所示。

步骤03　在文本内容上右击，在弹出的快捷菜单中选择“列表”|“项目列表”命令，如图3-59所示。

步骤04　执行操作后，即可为所选文本添加项目列表，效果如图3-60所示。

3.4.2　制作网页图片展示

在Dreamweaver CS6中，可以根据需要在网页中插入图片素材，使网页画面内容更加丰富、精彩，吸引人们的眼球。

素材文件　　光盘\素材\第3章\3.4.2\index.html

效果文件　　光盘\效果\第3章\3.4.2\index.html

视频文件　　光盘\视频\第3章\3.4.2　制作网页图片展示.mp4

步骤01　在3.4.1节的基础上，将光标定位于需要插入图片的位置，如图3-61所示。

步骤02　单击“插入”|“图像”命令，如图3-62所示。

步骤03　弹出“选择图像源文件”对话框，选择需要插入的图像，如图3-63所示。

步骤04　单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，单击“取消”按钮，即可将图片插入到网页文档中，适当调整图片的大小，效果如图3-64所示。

3.4.3　制作网页水平线效果

下面介绍在Dreamweaver CS6中，添加网页水平线的操作方法。

素材文件　　光盘\素材\第3章\3.4.3\index.html

效果文件　　光盘\效果\第3章\3.4.3\index.html

视频文件　　光盘\视频\第3章\3.4.3　制作网页水平线效果.mp4

步骤01　在3.4.2节的基础上，在网页文档中选择最上方的图片对象，如图3-65所示。

步骤02　在“插入”面板中选择“水平线”选项，如图3-66所示。

步骤03　执行操作后，即可在网页中添加水平线效果，如图3-67所示。

步骤04　按【F12】键保存网页，在打开的IE浏览器中可查看制作的旅游网站，效果如图3-68所示。