网页制作-网站设计说明.doc

宁波大红鹰学院信息工程学院课 程 设 计 报 告项目名称：宁波市保险行业协会项目组长：XX(页面设计)项目成员：XX (美工设计) XXX(交互设计)班级名称：专业名称：计算机科学与技术完成时间:2011-1-8信息工程学院制一、项目需求和背景近年来，我国保险行业得到了快速发展，为适应本行业业务的不断发展和营销员队伍日益壮大的需要，加强对业内营销员流动的统一管理，维护保险行业良好的经营秩序，搭建一个实时信息共享的保险营销员业内流动管理平台，所以建议宁波市保险行业协会是很有必要的，宁波市保险行业协会实现对保险营销员展业行为、奖惩情况、流动情况的全程监控，发现异常，可予以警告。形成公司内控、行业自律、政府监管和社会监督四方面的全方位监督管理。二、网站规划设计说明1、网站规划网站名称：宁波市保险行业协会网站主题：通过网站宣传，树立协会形象，提高企业知名度输入法网站语言：简体中文网站风格：以冷色调为主，给人以严谨负责的感觉，主题鲜明突出（对大众提供保险信息、对经营秩序进行维护、对保险营销员的统一管理），要点明确，以简单明确的语言和画面体现站点的主题，表现网站的个性和情趣，办出网站的特点。建站内容及特性“宁波市保险行业协会”，作为一个咨询、管理类的协会网站主要是突出它的中心标志性形象，运用现代流行理念和元素，表现了保险行业协会对经营秩序良好的维护、对营销员的良好管理。并做好各个栏目的导航，突出对大众提供保险信息、对经营秩序进行维护、对保险营销员的统一管理，尽职尽责，做全国优良的保险协会网站。（1）首页设计页头：准确无误的标识宁波保险行业协会站点和它的协会标志。页面：应是各大栏目导航，新闻资讯，业内动态，保险知识，保险案例，营销员查询，行业监管。 （2）导航设计宁波保险行业协会导航项目：新闻资讯行业动态财产保险人身保险其他保险保险中介业内动态行业动态财产保险保险知识主要介绍一些保险基本的知识和保险指南。保险案例主要讲一些保险的案例。行业监管主要以入司考核、政策法规这两个栏目组成。2、结构设计 网页布局图(1)首页图1 首页布局图(2)新闻资讯图2 新闻资讯布局图(3)行业协会监管图3 行业协会监管布局图 网站结构图图4 网站结构图3、CI形象设计Logo：一个绿色的圈圈，表示保险行业协会，负责维护保险秩序和营销员的管理的安全保证，给人以安全负责的感觉。NIA表示宁波保险行业协会的缩写。标题背景以蓝色的海洋、高速桥和高楼大厦作为背景，体现了时代的气息，表现出保险行业协会的高速稳定发展。4、网站色彩 (1)网站主色调该网站的主色彩是蓝色和白色，配以绿色和少量的红色，文字为黑/白，如下图所示：图5 配色采集蓝色是一种非常具有亲和力的颜色，它代表的是自然、自由与活力，是使用比较广泛的颜色之一。绿色和红色的使用，则使整个网站显示朝气蓬勃。(2)网页链接色表1 普通文字链接配色表(3)导航链接色5、技术方案表2 技术方案表序号网站组成使用技术效果说明11、网站所有文字页面2、静态图片3、表格HTML1、 出版在线的文档，其中包含了标题、文本、表格、等内容。 2、 通过超链接检索在线的信息。3、 为获取远程服务而设计表单，用于检索信息、定购产品等。 4、 在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。21、网站动态菜单2、动态图标JavaScript1、 实现在一个Web页面中链接多个对象2、 与Web客户交互作用，而可以开发客户端的应用程序等。31、轻常更新的网页2、动态数据如新闻中心，汽车展示ASP1、 是一种在WEB服务器端运行的脚本语言，程序代码安全保密 2、 此可以使用ActiveX控件继续扩充其功能 3、 可以轻松的存取各种数据库 适用与各种浏览器4网站内的动态按钮CSS使用CSS的技术，网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。51、 产品资料2、 新闻资料3、产品查询数据库1、 完善的客户数据资料处理2、 快速的资料查询能力3、未来电子商务的基础61、 主要动画2、动态图标Flash1、 以极富吸引力的动画吸引浏览者停留2、增强网站感染力三、HTML页面结构图(包括主页、内容页等，不同风格的版面都要给出结构图)行业协会主页内容页公众页保险四、页面DIV结构代码(包括主页和各内容页，注意三与四是一一对应的关系)行业协会主页 内容页 公众页 保险页： 五、代码及注释行业保险主页： JS代码：/more javascript from !-var pltsPop=null;var pltsoffsetX = 10; / 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适var pltsoffsetY = 15; / 弹出窗口位于鼠标下方的距离；3-12 合适var pltsPopbg=#FFFFEE; /背景色var pltsPopfg=#111111; /前景色var pltsTitle=;document.write();function pltsinits() document.onmouseover = plts; document.onmousemove = moveToMouseLoc;function plts() var o=event.srcElement; if(o.alt!=null & o.alt!=)o.dypop=o.alt;o.alt=; if(o.title!=null & o.title!=)o.dypop=o.title;o.title=; pltsPop=o.dypop; if(pltsPop!=null&pltsPop!=&typeof(pltsPop)!=undefined) pltsTipLayer.style.left=-1000; pltsTipLayer.style.display=; var Msg=pltsPop.replace(/n/g,); Msg=Msg.replace(/0x13/g,); var re=/(.*)/ig; if(!re.test(Msg)pltsTitle=提 示; else re=/(.*)(.*)/ig; pltsTitle=Msg.replace(re,$1)+ ; re=/(.*)/ig; Msg=Msg.replace(re,); Msg=Msg.replace(,); /var attr=(document.location.toString().toLowerCase().indexOf(list.asp)0?nowrap:); var content = + +pltsTitle+pltsTitle+ +Msg+ +pltsTitle+pltsTitle+ ; pltsTipLayer.innerHTML=content; toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2); moveToMouseLoc(); return true; else pltsTipLayer.innerHTML=; pltsTipLayer.style.display=none; return true; css代码：.w1 MARGIN-LEFT: auto; WIDTH: 1002px; MARGIN-RIGHT: auto.navi BACKGROUND-IMAGE: url(./images_new/navi_bg.jpg); HEIGHT: 32px.navi UL MARGIN-LEFT: 15px.navi LI FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; WIDTH: 106px; LINE-HEIGHT: 32px; TEXT-ALIGN: center.navi_li1 BACKGROUND-POSITION: 10px 10px; BACKGROUND-IMAGE: url(./images_new/ico_001.jpg); BACKGROUND-REPEAT: no-repeat.navi_li2 BACKGROUND-POSITION: center 3px; BACKGROUND-IMAGE: url(./images_new/navi_bg2.jpg); BACKGROUND-REPEAT: no-repeat.navi_li2 A:link COLOR: #a72c00; TEXT-DECORATION: none; outline: none.navi_li2 A:visited COLOR: #a72c00; TEXT-DECORATION: none; outline: none.navi_li2 A:hover COLOR: #a72c00; TEXT-DECORATION: none; outline: none.navi_li2 A:active COLOR: #a72c00; TEXT-DECORATION: none; outline: none.l_td BACKGROUND-POSITION: center 38px; BACKGROUND-IMAGE: url(./images_new/l_bg(1).jpg); OVERFLOW: auto; WIDTH: 252px; PADDING-TOP: 5px; BACKGROUND-REPEAT: no-repeat.l_td UL PADDING-TOP: 15px; HEIGHT: 370px公众页：*margin:0;padding:0;border:0;bodyfont-family:Verdana; font-size:12px; margin:0;padding:0; #containermargin:0 auto; padding:0 px;background:#FFFFFF;width:1000px;height:1150px;#topwidth:1000px;height:320px;background:url(images/top副本.jpg);#navwidth:670px;height:26px;float:left;margin-top:288px;margin-left:30px;#upwidth:1000px;height:500px;#leftwidth:500px;height:500px;float:left;#lunxianwidth:220px;height:180px;float:left;#newswidth:230px;height:180px;float:right;margin-top:5px;#midwidth:205px;height:500px;float:left;#rightwidth:275px;height:490px;float:right;margin-top:5px;background:url(images/协会公告.jpg);#bottomwidth:1000px;height:250px;#footerwidth:1000px;height:80px;background: url(images/footer.jpg);保险页：六、网站测试结果1、IE8.0下测试结果图7 IE8.0测试结果2、360.0下测试结果图8 360.0测试结果3、FF下测试结果图9 IE6.0测试结果七、项目计划及分工1、项目计划表电子商务网站设计 项目计划表项目组长: 周翔 班级: 08计科五 日期:2011-1-8进程第1次课(10.11.)第2次课(10.13.)第3次课(10.19.)第4次课(10.19.)第5次课(10.19.)第6次课(10.19.)负责人项目计划周翔总体方案林婉君效果图林婉君、陆微微公众页面林婉君保险页面周翔协会页面陆微微设计报告林、陆、周系统测试林婉君答辩2、分工完成情况 XX：项目计划，保险页面，实验报告。XXX：总体方案，效果图，公众界面，实验报告，系统测试。 XXX：效果图，协会页面，实验报告。八、总结这个网站是我们这学期最后一次完成的作品。对这类网站的制作感触颇深，看似一个很简单的网站，做起来却十分繁琐，但我们坚持每个流程都自己完成，在不断地错误和调试中总结经验。这次最大的收获是，学会了听取他人的建议和组员之间的相互合作。我们认为一个好的网站，不光光要使用大方，还要吸人眼球。这对整个页面的基本色调和风格就有很高的要求。我们做的是一个保险网站，我们想要呈现给大家严谨的感觉，所以主色调采用蓝色，较符合保险给我们带来的亲近的感觉。并且我们的页面结构简单明了，功能划分清晰。对于使用photoshop制作网页所需要的图片，我觉得只有亲自用过每个工具，才能区分它们功能的细微差别，达到图片的理想效果。而在DreamWeaver里编写程序也一样，像标识符添加在哪里，什么时候添加，效果都会不太一样。在网页功能的实现上，我实现了了字幕滚动和flash。广告轮显部分，我是参照在其他网站的广告轮显，它的特色是切换图片的时候样式会变。我们还添加了功能，以增加网站的功能模块。制作过程中，我