图4-5选择缩放的类型
(3)选择文件存储位置→单击“批次”按钮→单击“完成”按钮完成对图片的处理（如图4-6）
http://www.paopaocha.com 泡泡茶网 www.htydj.com 11
图4-6选择图片缩放后的存储位置
4.4 首页制作
天下体育网站主要内容是有关体育新闻方面的，我从网上下载了一些内容，加上自己对界面的设计，使得整个页面都使用同一种色彩，当然对于色彩这一块，也是参照了各种参考资料进行设计，既要做的不华丽又要显得自然、大方得体。在这次网页设计中，用到了一些图片处理的工具，Fireworks处理了一些背景图片，使得图片与我的页面的背景符合，现在重点谈谈我的首页的制作过程。
网站主页主要采用静、动相结合的方式，即静态的主画面和动态的Flash图片想结合，体现体育网站新闻分类明显，首页被我划分为顶部，Banner（Logo以及图片）、导航、主体、底部等几大模块。网站首页结构如图4-7所示：
图 4-7 网站首页结构图
http://www.paopaocha.com 泡泡茶网 www.htydj.com 12
4.4.1导航条及Logo效果制作
对于整个网站，主要采用Div布局，在布局中，把它当做容器，在里面放入文本、图片等，Div标记中可以嵌套Div标记，而且没有层数的限制。运用网页设计好的模板，然后在顶部和底部之间插入Div层作为编辑区域。下面就具体来看看导航的相关代码： Html文档部分代码：
与上面html文档匹配的部分外部CSS代码： .top ul{ margin-left:auto; margin-right:auto; width:980px; height:80px; display:block; } .top ul li{ width:70px; height:30px; display:block; float:left; margin-top:60px; list-style:none; http://www.paopaocha.com 泡泡茶网 www.htydj.com 13
font-size:14px; font-weight:bold; margin-right:5px; line-height:2.3; text-align:center; background-image:url(../images/filter_hover.png); }
.top ul li a{ display:block; text-decoration:none; color:#666666; }
.top ul li.clickColor{ text-decoration:none; background-image:url(../images/dh_1.jpg); }
.top ul li a:hover{ color:#FFFFFF; }
.top ul li a.sel{ color:#FFFFFF; }
.top ul li a.out{ color:#666666; }
.top ul li:hover{ background-image:url(../images/dh_1.jpg); }
效果如下图 4-8所示
图 4-8导航条及Logo效果
4.4.2 Banner效果制作
Banner制作很简单，在html中写一个div用来放Banner图片，再在css中设置这个div
的大小及属性。 Banner部分html代码：
4.4.3 首页图片轮播特效
图片轮播技术采用JQuery+div+css完成，此模块结构为左边显示图片，右边显示4张缩
略图，鼠标每移动一直缩略图，左边则会显示大图，图片下面并有文字描述，缩略图每隔3秒自动切换到下一张。方法，宽度为330px，高度230px，用float：left属性处理了4幅图上下排列的效果。 具体html代码如下
北京时间11月3日，英超一场焦点战，曼联主场2比1阿森纳，范佩西埃弗拉破门，卡索拉扳回一球。
北京时间11月3日，在2012年中国杯世界花样滑冰大奖赛上，庞清/佟健组合获得双人滑金牌！
北京时间11月4日，巴萨主场3-1击败塞尔塔，比利亚贡献传射，阿德里亚诺和阿尔巴也有进球。
http://www.paopaocha.com 泡泡茶网 www.htydj.com 15