网页设计作品设计说明

湖南软件职业学院《网页设计》期末作品设计说明书
课程名称：网页设计期末作品设计说明书
设计题目：某律师团队专业法律服务网
专业班级：
学生姓名：
指导教师：
起止日期：
某律师团队专业法律服务网网站制作说明
一、网站开发目的和功能简介
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。

门户网站越来越称为律师行业进行…………（略）
二、网站的总体设计
2.1网站名称：某律师团队专业法律服务网
2.2网站栏目划分：
根据本网站的目的和功能规划网站内容，包括如下信息：
（1）关于我们：介绍相关律师信息，事务所信息，收费标准…………（略）
（2）法律服务：…………（略）
（3）法律文书：…………（略）
（4）律师手记：…………（略）
（5）经典案例：…………（略）
（6）在线服务：…………（略）
具休如下图示：
2.3网站导航应用于所有页面提高网站的操作友好性。

2.4网站的风格与色彩选择：页面以浅绿色为背景，黑白灰三色为主体。

浅绿色体现了本律师事务所的活力，字体用黑、白、灰色给人一种清析、稳重的感觉。

所有页面色调统一，布局相似。

2.5网站目录结构设计合理：不同素材采用不同学文件夹分开存放。

如声音放在sound 文件夹、图片放在images文件夹，照片放在photos、FLASH动画放在flash文件夹、样式表文件放在CSS文件夹中、作业成果图放在works等。

三、网站的总体设计
3.1 LOGO设计
Logo应体现律师行业庄重、严谨的形象。

本LOGO以暗绿色为背景，金黄色为前景，…………（略）
3.2首页的制作过程
版面分栏结构，即页头、导航栏、FLASH展示、相关内容、版权（如下图）
整个页面分为四部分，第一部分是LOGO 、BANNER 及导航栏，主要是…………（略）；；第二部分是动态FLASH 新闻，其中…………（略）；第三部分是版权声明…………（略）；第四部分是版权信息，…………（略）。

采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。

具体首页布局如下图所示。

LOGO 及BANNER 导航
动态FLASH 新闻
业务介绍
法律咨询 律师简介 网站动态
版权信息
3.3列表页制作
3.4内容页制作
3.5后台登陆页制作3.6后台管理页制作
四、CSS样式表制作
#main_container{
width:950px;
height:auto;
margin:auto;
background:url(images/main_bg.gif) no-repeat top center #f0f0d8;
}
#center_content{
width:895px;
margin:auto;
}
#header{
width:895px;
height:130px;
margin:auto;
}
#middle_box{
width:895px;
height:278px;
clear:both;
margin:auto;
background:url(images/middle_bg.jpg) no-repeat center;
}
#footer{
width:895px;
height:48px;
margin:auto;
color:#508aa1;
border-top:1px #b2bbbb dashed;
}
·五、设计技术总结
为了使我们的网站更加实用、内容丰富，我们在网站里用了很多的技术，包括flash fireworks photoshop 等图片处理和动画，运用dreamweaver中相关知识制作各种特效比如图层运用、时间轴运用等，本网站中还运用知识点运用swishmax 和fireworks 相结合制作出banner.还包括javascript等动态脚本语言。

5.1在素材收集和处理上本人花费了大量时间处理网站动画、真实照片收集、个人信息。

如应用PHOTOSHOP对相片进行整体处理。

利用SWFText制作了广告动画。

5.2文字滚动效果，代码如下：
<marquee direction="up" Scrollamount="1"
Scrolldelay="5"onMouseOver="this.stop()"onmouseout="this.start()">内容</marquee>
5.3设为首页,其代码如下所示：
<ahref="#"onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('')">设为首页</a>
5.4收藏本站,其代码如下所示：
<ahref="#"onclick="window.external.addFavorite('','title')">收藏本站</a>
5.5 为页面增加状态栏运动文字的效果，其代码如下所示：
<SCRIPT language="JavaScript">
var pos=50;
function scrollit(seed)
{
var msg="欢迎观看蔡秀萍的个人网站";//状态条显示的文字
var out = " ";
if (seed > pos)
{ seed--;
cmd="scrollit("+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);
}
else
{ if (-seed < msg.length)
{ out+=msg.substring(-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 http-equiv="page-enter" content="RevealTrans(Duration=4, Transition=2)">
<meta http-equiv="page-exit" content="RevealTrans(Duration=7, Transition=27)">
六、作品设计心得
本次网站主要是运用本学期学过的知识来布局应用、制作动画效果，通过本次的网站设计，运用了本学期所学到的知识这样不仅复习了本学期学过的一些知识，同时也加深所学知识的内容，这次的网页制作使我学会了很多，有关怎么收集资料，怎样用最快的方法收集资料，怎样收集有效的资料，怎样整理资料，…………（略）。