巧用firework工具以及CSS制作网页动态图片框.docVIP

巧用firework工具以及CSS制作网页动态图片框 　　摘要:该文介绍了如何使用dreamweaver的CSS样式表以及firework软件来制作一个精美的动态图片框,当鼠标经过图片时图片边框发生相应的变化的方法,通过一个实例来讲述具体制作方法,总结此方法的优缺点。 　　关键词:firework 8.0 dreamweaver 8.0;CSS;网页动态图片框;超级链接 　　中图分类号:TP311文献标识码:A文章编号:1009-3044(2010)17-4774-02 　　 　　随着日新月异的网络的发展,一个公司,一个企业如何能够通过网页来宣传的产品,树立自己的形象,制作一个美观而有创意的页面越来越起到了至关重要的作用了,随着现在对网页技术的要求越来越高,一个网站除了有个漂亮吸引人的主页之外,让您的图片链接产生一个很好的动画效果往往能够吸引用户的眼球。本文通过一个实例来讲解制作一个漂亮的动态图片链接的制作方法。 　　1 效果功能介绍 　　我们经常在大型网站上看到的常见动态图片链接如图1所示。 　　功能通常如下:当鼠标经过图片链接时,相应的图片背景框会变颜色。 　　2 制作步骤 　　下面我们通过一个具体的实例来讲解这种效果的制作过程: 　　2.1 背景图片文件的制作与准备 　　第一步:打开firework软件;新建一个长度为150像素,高度为150像素的空白文件,背景随意颜色。 　　第二步:通过圆形矩形工具画一个与背景画布大小差不多的圆形矩形(可以为其他形状),边缘羽化5像素;然后上面再盖一个实边的矩形,填充颜色白色结果如图2所示,在文件菜单中选择导出图像导出图形为1.gif图片格式; 　　第三步,使用相同的方法制作蓝色背景图片,导出如图3所示的图片,命名为2.gif。 　　2.2 通过dreamweaver的CSS样式来制作动态图片链接 　　第一步:打开dreamweaver8.0软件,新建一个网页文件,在文件中插入一张图片,通过dreamweaver自带的CSS样式给图片设置CSS样式,设置图片的高度和宽度,注意高度与宽度要比背景图片一定要小,以及边框;具体代码如下: 　　img { 　　 height: 90px; 　　 width: 120px; 　　 border: thin solid #CC3366; 　　} 　　第二步:给每张图片做链接,每张图片都链接到自己的图像上,属性面板操作如图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; 　　} 　　第四步:设置鼠标经过的高级CSS属性,a:hover,设置背景图片为蓝色背景框图片;具体代码为: 　　a:hover { 　　 background-image: url(2.gif); 　　background-repeat: no-repeat; 　　} 　　预览,大功告成。 　　3 总结 　　本文结合了一个实例来讲解制作一个精美的动态图片框的方法,背景的制作主要是通过firework软件的圆形矩形以及羽化效果来实现,网页动态链接效果是通过设置链接CSS属性以及鼠标经过的CSS属性设置实现的,其中最关键的是CSS属性中的背景属性的设置以及填充属性的设置。 　　参考文献: 　　[1] 网页设计与制作:Dreamweaver CS3+Firework[M].北京:清华大学出版社,2009. 　　[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2007. 4