网页设计作品设计说明必看请相互转告.doc

网页设计作品设计说明必看请相互转告

14
2020年4月19日
文档仅供参考，不当之处，请联系改正。
网页设计作业要求：
1、 团队完成，每个团队限5人以下。
成员分数
设计优秀
设计良好
完成
组长1人
95
90
85
主要完成2人
90
85
80
协同完成2人
85
80
75
设计优秀的必须有原创内容。应付了事的只能算完成。
2、 设计完成分工情况：
组长：班级姓名学号 完成的主要工作
主要参加者：班级姓名学号 完成的主要工作
协同完成者：班级姓名学号 完成的主要工作

作业说明书一份，参考下面的一个文档。学生名单在群共享，大家能够自由组合。在11月底前完成网页设计作业。另外一份书面作业开卷考试内容请注意通知。
文档内容控制在15页之内，包括网站设计说明，截图，及部分css代码。动态的内容不要求，就是网页布局就能够了。
实际设计的网页必须在十个以上，包括主页，列表页，内容页。必须是使用CSS样式表来控制网页的外观。群共享里有一本书[变幻之美-DivCSS网页布局揭秘-案例实战篇].(金峰).扫描版，还有源代码能够下载学习下。讲解的很细致，值得看看。

XX学院
《网页设计》期末作品设计说明书

课程名称： 网页设计期末作品设计说明书
设计题目： 某律师团队专业法律服务网
组 长： 姓名（班级）
联系方式： QQ ，手机
主要参加者： 姓名
协同完成者： 姓名
起止日期： 11月3日~11月30日

某律师团队专业法律服务网网站制作说明
一、网站开发目的和功能简介
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。门户网站越来越称为律师行业进行…………（略）

二、网站的总体设计
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展示、相关内容、版权（如下图）
版权信息
网站动态
律师简介
法律咨询
业务介绍
动态FLASH新闻
导航
LOGO及BANNER

整个页面分为四部分，第一部分是LOGO、BANNER及导航栏，主要是…………（略）；；第二部分是动态FLASH 新闻，其中…………（略）；第三部分是版权声明…………（略）；第四部分是版权信息，…………（略）。采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。
具体首页布局如下图所示。

3.3列表页制作

3.4内容页制作

3.5后台登陆页制作

3.6后台管理页制作

四、CSS样式表制作（主页，列表页，内容页的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)">