网页设计作品设计说明

1、湖南软件职业学院网页设计期末作品设计说明书课程名称： 网页设计期末作品设计说明书 设计题目： 某律师团队专业法律服务网 专业班级： 学生姓名： 指导老师： 起止日期： 10 / 11某律师团队专业法律服务网网站制作说明一、网站开发目的和功能简介随着网络技术的发展和互联网的普及，网站建设和网页制作越来越来成为各行各业以及个人宣扬自己的有利工具。门户网站越来越称为律师行业进行（略）二、网站的总体设计2.1网站名称：某律师团队专业法律服务网2.2网站栏目划分：依据本网站的目的和功能规划网站内容，包括如下信息：（1）关于我们：介绍相关律师信息，事务所信息，收费标准（略）（2）法律服务：（略）（3）法律

2、文书：（略）（4）律师手记：（略）（5）经典案例：（略）（6）在线服务：（略）具休如下图示：首 页关于我们法律服务法律文书律师手记经典案例在线服务律师介绍律所介绍收费标准教您打官司请律师指南法律救济刑法专栏公司法专栏婚姻法专栏民商法专栏 服务特色经典案例案例详解在线询问办案进度房产发专栏学问产权专栏2.3网站导航应用于全部页面提高网站的操作友好性。2.4网站的风格和色调选择：页面以浅绿色为背景，黑白灰三色为主体。浅绿色体现了本律师事务所的活力，字体用黑、白、灰色给人一种清析、稳重的感觉。全部页面色调统一，布局相像。2.5网站书目结构设计合理：不同素材采纳不同学文件夹分开存放。如声音放在soun

3、d文件夹、图片放在images文件夹，照片放在photos、FLASH动画放在flash文件夹、样式表文件放在CSS文件夹中、作业成果图放在works等。三、网站的总体设计3.1 LOGO设计Logo应体现律师行业庄重、严谨的形象。本LOGO以暗绿色为背景，金黄色为前景，（略）3.2首页的制作过程版面分栏结构，即页头、导航栏、FLASH展示、相关内容、版权（如下图）版权信息网站动态律师简介法律询问业务介绍动态FLASH新闻导航LOGO及BANNER整个页面分为四部分，第一部分是LOGO、BANNER及导航栏，主要是（略）；其次部分是动态FLASH 新闻，其中（略）；第三部分是版权声明（略）；第

4、四部分是版权信息，（略）。采纳这种布局，主要是给阅读者一种简洁、清楚、明白的感觉，使网站整齐划一。详细首页布局如下图所示。3.3列表页制作3.4内容页制作3.5后台登陆页制作3.6后台管理页制作四、CSS样式表制作#main_containerwidth:950px;height:auto;margin:auto;background:url(images/main_bg.gif) no-repeat top center #f0f0d8;#center_contentwidth:895px;margin:auto;#headerwidth:895px;height:130px;margin:

5、auto;#middle_boxwidth:895px;height:278px;clear:both;margin:auto;background:url(images/middle_bg.jpg) no-repeat center;#footerwidth:895px;height:48px;margin:auto;color:#508aa1;border-top:1px #b2bbbb dashed;·五、设计技术总结为了使我们的网站更加好用、内容丰富，我们在网站里用了许多的技术，包括flash fireworks photoshop 等图片处理和动画，运用dreamweave

6、r中相关学问制作各种特效比如图层运用、时间轴运用等，本网站中还运用学问点运用swishmax 和fireworks 相结合制作出banner.还包括javascript等动态脚本语言。5.1在素材收集和处理上本人花费了大量时间处理网站动画、真实照片收集、个人信息。如应用PHOTOSHOP对相片进行整体处理。利用SWFText制作了广告动画。5.2文字滚动效果，代码如下：<marquee direction="up" Scrollamount="1" Scrolldelay="5"onMouseOver="this.st

7、op()"onmouseout="this.start()">内容</marquee>5.3设为首页,其代码如下所示：<ahref="#"onclick="this.style.behavior='url(#default#homepage)'this.setHomePage(' :/ cai ')">设为首页</a>5.4保藏本站,其代码如下所示：<ahref="#"onclick="window.external

8、.addFavorite(' :/zhenbing.xinwen365 ','title')">保藏本站</a>5.5 为页面增加状态栏运动文字的效果，其代码如下所示：<SCRIPT language="JavaScript">var pos=50;function scrollit(seed) var msg="欢迎观看蔡秀萍的个人网站"/状态条显示的文字var out = " "if (seed > pos) seed-;cmd="scroll

9、it("+seed+")"window.setTimeout(cmd,100);else if (seed <= pos && seed > 0) for (i=0 ; i < seed ; i+) out+=" "out+=msg;seed-;window.status=out;cmd="scrollit("+seed+")"window.setTimeout(cmd,100);elseif (-seed < msg.length) out+=msg.substr

10、ing(-seed,msg.length);seed-;window.status=out;cmd="scrollit("+seed+")"window.setTimeout(cmd,100);else window.status=" "window.setTimeout("scrollit(pos)",100);scrollit(50);</SCRIPT>5.6为网友添加时间代码，使其在页面的头部显示现在的时间日期。5.7为相册添加特效，使其自行从左自右运动，当鼠标移动到相册下的小照片的时候，照片会自动放大，并显示在图层中。5.8为网叶添加切换特效，其代码如下：<meta -equiv="page-enter" content="RevealTrans(Duration=4, Transition=2)"><meta -equiv="page-exit" content="RevealTrans(Duration=7, Tran