巧用网页制作工具制作动态图片链接.docVIP

巧用firework工具以及CSS制作网页动态图片框 作者：潘彪 摘要：本文介绍了如何使用dreamweaver的CSS样式表以及firework软件来制作一个精美的动态图片框，当鼠标经过图片时图片边框发生相应的变化的方法，通过一个实例来讲述具体制作方法，总结此方法的优缺点。 关键词：firework 8.0 dreamweaver 8.0、CSS、网页动态图片框、超级链接。 引言： 随着日新月异的网络的发展，一个公司，一个企业如何能够通过网页来宣传的产品，树立自己的形象，制作一个美观而有创意的页面越来越起到了至关重要的作用了，随着现在对网页技术的要求越来越高，一个网站除了有个漂亮吸引人的主页之外，让您的图片链接产生一个很好的动画效果往往能够吸引用户的眼球。本文通过一个实例来讲解制作一个漂亮的动态图片链接的制作方法。 效果功能介绍： 我们经常在大型网站上看到的常见动态图片链接如下图1所示： 图1 功能通常如下：当鼠标经过图片链接时，相应的图片背景框会变颜色。 制作步骤： 下面我们通过一个具体的实例来讲解这种效果的制作过程： 3.1 背景图片文件的制作与准备： 第一步：打开firework软件；新建一个长度为150像素，高度为150 像素的空白文件，背景随意颜色。 第二步：通过圆形矩形工具画一个与背景画布大小差不多的圆形矩形（可以为其他形状），边缘羽化5像素；然后上面再盖一个实边的矩形，填充颜色白色结果如图2所示，在文件菜单中选择导出图像导出图形为1.gif图片格式； 图2 图3 第三步，使用相同的方法制作蓝色背景图片，导出如图3所示的图片，命名为2.gif。 3.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; } 预览，大功告成。 总结： 本文结合了一个实例来讲解制作一个精美的动态图片框的方法，背景的制作主要是通过firework软件的圆形矩形以及羽化效果来实现，网页动态链接效果是通过设置链接CSS属性以及鼠标经过的CSS属性设置实现的，其中最关键的是CSS属性中的背景属性的设置以及填充属性的设置。 【参考文献】 1、《网页设计与制作:Dreamweaver CS3+Firewor出版社：清华大学出版社 出版日期：2009年10月出版社：出版社 出版日期：200年月