第15章 制作精美的网页

第15章制作精美的网页随着多媒体技术的发展，多媒体在网络上得到了广泛的应用。无论是个人网站还是企业网站，图文并茂的网页能为网站增色不少。除此之外，还有各种各样的其他元素，如动画、声音等。图像或多媒体是对文本的解释和说明的加强。在文档的适当位置增加一些图像、Flash动画、音乐和JavaApplet等多媒体元素，不仅可以使文本更加容易阅读，而且使文档变得富有吸引力，让网页更加精彩。15.1在网页中插入图像图像是网页构成中最重要的元素之一。一个漂亮的网页通常是图文并茂的，精美的图像和精巧的按钮不但能使网页更加美观、形象和生动，而且会为网站增加生命力，同时也会加深用户对网站良好的印象。因此网页设计者要掌握好图像的使用方法。15.1.1插入图像在Dreamweaver中插入图像非常简单，具体操作步骤如下。（1）打开网页文档，将光标置于要插入图像的位置，如图15.1所示。（2）选择“插入”|“图像”命令，弹出“选择图像源文件”对话框，如图15.2所示。（3）在“选择图像源文件”对话框中选择相应的图像，单击“确定”按钮，即可在网页中插入图像，如图15.3所示。15.1.2图像的对齐方式如果仅仅插入了图像，而不设置图像的对齐方式，就会显得非常混乱。选中图像，选择“窗口”|“属性”命令打开“属性”面板，如图15.4所示。15.1.3图像的边距、边框和替换文字当进行图文混排时，为了防止它们之间的间距过于紧密，可以在属性面板中设定“垂直边距”和“水平边距”。其中，“垂直边距”是沿图片的顶部和底部添加边距，“水平边距”是沿图片的左边和右边添加边距。边框：设置图像的边框，以像素为单位。替换：图像的替换文字，当浏览器不能正确显示图像时，将显示替换文本。在属性面板中设置了图像的边距、边框和替换文字之后的效果如图15.8所示。15.1.4图像的其他属性选中图像文件后，在属性面板中会自动显示图像的属性，如图15.9所示。15.2编辑图像DreamweaverCS5提供了基本的图像编辑功能，这样无须使用外部的图像编辑程序（Photoshop或Fireworks）就可以方便地修改图像，可以在Dreamweaver中重新取样、裁剪、优化和锐化图像，还可以调整图像的亮度和对比度。15.2.1裁剪图像通过裁剪图像来减小图像区域是编辑图像中常用的一种方法。通常，可能需要裁剪图像以强调图像的主体，并删除图像中不需要的部分。裁剪图像的具体操作步骤如下：（1）打开网页文档，选中要裁剪的图像，如图15.10所示。（2）在“属性”面板中单击“裁剪”按钮，如图15.11所示。（3）图像周围出现8个控制点，通过拖动这些控制点可以改变裁剪区域的大小，如图15.12所示。（4）在边框线内双击，图像只保留了边框内的图像，其他区域被裁剪掉，效果如图15.13所示。15.2.2调整图像的亮度和对比度亮度和对比度调节工具用来修改图像中像素的亮度或对比度，从而修正过暗或过亮的图像。调整图像亮度和对比度的具体操作步骤如下。（1）打开网页文档，选中图像，在“属性”面板中单击“亮度和对比度”按钮，如图15.14所示。（2）打开“亮度/对比度”对话框，在对话框中拖动“亮度”和“对比度”滑块到合适位置，如图15.15所示。（3）调整完“亮度”和“对比度”后，单击“确定”按钮，调整后效果如图15.16所示。15.2.3锐化图像锐化图像能增加对象边缘的像素的对比度，从而达到增加图像的清晰度或锐度的效果。具体操作步如下。（1）选中图像，在“属性”面板中单击“锐化”按钮，打开“锐化”对话框，在对话框中拖动“锐化”滑块到合适的位置，如图15.17所示。（2）单击“确定”按钮，锐化后的效果如图15.18所示。15.2.4重新取样图像在“属性”面板中单击“重新取样”按钮，图像将恢复到原来的大小，如图15.19所示。15.3插入其他图像文件在网页中不仅仅可以插入图像，还可以插入图像占位符和鼠标经过图像等，下面将分别进行讲述。15.3.1插入图像占位符图像占位符是网页排版布局中经常用到的功能。有时候根据页面布局的需要，要在网页中插入一幅图片，这时候可以不插入图片，而是使用占位符来代替图片的位置。具体操作步骤如下。（1）打开网页文档，将光标置于要插入图像占位符的位置，如图15.20所示。（2）选择“插入”|“图像对象”|“图像占位符”命令，弹出“图像占位符”对话框，如图15.21所示。（3）在对话框的“名称”文本框中输入名称，将“宽度”设置为600，“高度”设置为80，颜色设置为“#999999”，如图15.22所示。（4）单击“确定”按钮，插入图像占位符，如图15.23所示。15.3.2插入鼠标经过图像在浏览器中查看页面时，当鼠标经过某些图像时图像会发生变化，这便是鼠标经过图像的效果。创建此效果需要提供原始图像和鼠标经过图像，当鼠标移动到图像上时就会显示鼠标经过图像，当鼠标移出图像范围时就会显示原始图像。具体操作步骤如下。（1）打开网页文档，将光标置于要插入鼠标经过图像的位置。（2）选择“插入”|“图像对象”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图15.24所示。（3）当单击“原始图像”文本框后面的“浏览”按钮时，弹出如图15.25所示的“原始图像”对话框，可在其中输入相应的文件，将文件添加到文本框中。同样可以选择“鼠标经过图像”。（4）单击“确定”按钮，即插入鼠标经过图像。（5）保存文档，按F12在浏览器中预览，鼠标没有经过图像时的效果如图15.26所示，鼠标经过图像时的效果如图15.27所示。15.4插入媒体对象结合使用Dreamweaver以及以动感、鲜活的表现深受用户喜爱的Flash，能制作出更具动感的页面。除了可以在Dreamweaver中方便地插入Flash之外，还可以插入其他媒体对象。15.4.1插入Flash对象Flash是在Flash软件中设计制作的。但在Dreamweaver中可以将已经制作好的Flash动画插入其中，插入Flash动画的具体操作步骤如下。（1）打开网页文档，将插入点放置在要插入Flash的位置，如图15.28所示。（2）选择“插入”|“媒体”|“SWF”命令，弹出“选择SWF”对话框。（3）在对话框中选择要插入的文件，单击“确定”按钮，即可在文档中插入Flash，如图15.29所示。（4）保存文档，按F12键预览效。15.4.2插入JavaAppletJava是用于制作基于因特网的可执行应用程序的语言，常常用于动画、网络游戏和聊天室等领域。而JavaApplet是就Java的源代码文件（.class）保存到服务器后，通过连接HTML和Java源代码文件运行的。在网页中插入JavaApplet程序的具体操作步骤如下。（1）打开网页文档，将插入点放置在要插入JavaApplet的位置，如图15.32所示。（2）选择“插入”|“媒体”|“Applet”命令，弹出“选择文件”对话框。（3）在对话框中选择要插入的文件，单击“确定”按钮，即可在文档中插入JavaApplet，如图15.33所示。（4）在“属性”面板中将“宽”设置为400，“高”设置为274，“对齐”设置为“居中”，如图15.34所示。（5）切换到拆分视图，在相应的位置输入以下代码，如图15.35所示。（6）保存文档，按F12键预览效果。15.4.3插入ActiveX控件我们也可以在页面中插入ActiveX控件。ActiveX控件是对浏览器功能的一种扩展，但是它只能在Windows系统上的IE浏览器上运行。ActiveX控件的作用和插件相应，可以在不发布浏览器新版本的情况下扩展浏览器的能力。将插入点置于网页中要插入ActiveX的位置处，选择“插入”|“媒体”|“ActiveX”命令，在页面中插入ActiveX，选中该ActiveX，打开“属性”面板，如图15.38所示。可在其中设置相关的属性。15.4.4插入Shockwave动画Shockwave是网页中交互式多媒体的业界水准。打开网页文档，将插入点置于网页中要插入Shockwave动画的位置处，选择“插入”|“媒体”|“Shockwave”命令，在页面中插入Shockwave，选中该Shockwave，打开“属性”面板，如图15.37所示。可在其中设置相关的属性。15.5本章小结在网页的合适的地方插入一些精美的图片，不仅能够使内容清晰易懂，而且使网页变得更具活力和吸引力。网页中除了能插入文本和图像，还能插入许多多媒体元素，如Flash动画、JavaApplet、ActiveX控件和Shockwave动画等。只有综合应用这些多媒体元素，才能创作出精美而又活力十足的网页。