巧用 firework 工具以及 CSS 制作网页动态图片框作者：潘彪摘要：本文介绍了如何使用 dreamweaver 的 CSS 样式表以及 firework 软件来制作一个精美的动态图片框，当鼠标经过图片时图片边框发生相应的变化的方法，通过一个实例来讲述具体制作方法，总结此方法的优缺点 关键词：firework 8.0 dreamweaver 8.0、CSS、网页动态图片框、超级链接1、引言：随着日新月异的网络的发展，一个公司，一个企业如何能够通过网页来宣传的产品，树立自己的形象，制作一个美观而有创意的页面越来越起到了至关重要的作用了，随着现在对网页技术的要求越来越高，一个网站除了有个漂亮吸引人的主页之外，让您的图片链接产生一个很好的动画效果往往能够吸引用户的眼球本文通过一个实例来讲解制作一个漂亮的动态图片链接的制作方法2、效果功能介绍：我们经常在大型网站上看到的常见动态图片链接如下图 1 所示：图 1功能通常如下：当鼠标经过图片链接时，相应的图片背景框会变颜色3、制作步骤：下面我们通过一个具体的实例来讲解这种效果的制作过程：3.1 背景图片文件的制作与准备：第一步：打开 firework 软件；新建一个长度为 150 像素，高度为 150像素的空白文件，背景随意颜色。
第二步：通过圆形矩形工具画一个与背景画布大小差不多的圆形矩形（可以为其他形状），边缘羽化 5 像素；然后上面再盖一个实边的矩形，填充颜色白色结果如图 2 所示，在文件菜单中选择导出图像导出图形为 1.gif图片格式；图 2 图 3第三步，使用相同的方法制作蓝色背景图片，导出如图 3 所示的图片，命名为 2.gif3.2 通过 dreamweaver 的 CSS 样式来制作动态图片链接：第一步：打开 dreamweaver8.0 软件，新建一个网页文件，在文件中插入一张图片，通过 dreamweaver 自带的 CSS 样式给图片设置 CSS 样式，设置图片的高度和宽度，注意高度与宽度要比背景图片一定要小，以及边框；具体代码如下：img {height: 90px;width: 120px;border: thin solid #CC3366;}第二步：给每张图片做链接，每张图片都链接到自己的图像上，属性面板操作如图 4 所示：图 4第三步: 通过 dreamweaver 自带的 CSS 样式给图片链接 a 设置 CSS 样式，设置 a 链接的背景图片，填充选项以及边距，一边预览一边修改填充属性，使得图片刚好在背景图片框的中央位置如图 5 所示：具体代码为：a{background-image: url(1.gif);float: left;padding-top: 35px;padding-right: 20px;padding-bottom: 35px;padding-left: 20px;background-repeat: no-repeat;margin: 10px;}图 5 图 6第四步：设置鼠标经过的高级 CSS 属性，a:hover,设置背景图片为蓝色背景框；具体代码为：a:hover {background-image: url(2.gif);background-repeat: no-repeat;}预览，大功告成。
4、总结：本文结合了一个实例来讲解制作一个精美的动态图片框的方法，背景的制作主要是通过 firework 软件的圆形矩形以及羽化效果来实现，网页动态链接效果是通过设置链接 CSS 属性以及鼠标经过的 CSS 属性设置实现的，其中最关键的是 CSS 属性中的背景属性的设置以及填充属性的设置参考文献】1、《网页设计与制作:Dreamweaver CS3+Firework》出版社：清华大学出版社出版日期：2009 年 10 月 第一版2、《精通 CSS+DIV 网页样式与布局》作者：曾顺出版社：人民邮电出版社出版日期：2007 年 8 月 第一版【作者简介】第一作者：湖南水利水电职业技术学院经济管理系潘彪老师；专业方向：网页制作详细地址：湖南省长沙县远大二路湖南水利水电职业技术学院经济管理系潘彪老师收邮政编码：410131：13974832414。