网页制作-网站设计说明

宁波大红鹰学院信息工程学院课程设计报告项目名称：宁波市保险行业协会项目组长：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结构代码(包括主页和各内容页，注意三与四是一一对应的关系)行业协会主页divid=containerdivid=top/divdivid=navi/divdivid=contentdivid=left/divdivid=right1/divdivid=right2/divdivid=right3/div/divdivid=footer/div/div内容页divid=containerdivid=top/divdivid=navi/divdivid=contentdivid=left/divdivid=middle/divdivid=right/div/divdivid=footer/div/div公众页divid=containerdivid=top/divdivid=contentdivid=left/divdivid=middle/divdivid=right/divdivid=left1/divdivid=right1/div/divdivid=footer/div/div保险页：divid=containerdivid=contentdivid=left/divdivid=right/div/divdivid=footer/div/div五、代码及注释行业保险主页：JS代码：SCRIPTlanguage=JavaScript//morejavascriptfrom!--varpltsPop=null;varpltsoffsetX=10;//弹出窗口位于鼠标左侧或者右侧的距离；3-12合适varpltsoffsetY=15;//弹出窗口位于鼠标下方的距离；3-12合适varpltsPopbg=#FFFFEE;//背景色varpltsPopfg=#111111;//前景色varpltsTitle=;document.write('divid=pltsTipLayerstyle=display:none;position:absolute;z-index:10001/div');functionpltsinits(){document.onmouseover=plts;document.onmousemove=moveToMouseLoc;}functionplts(){varo=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='';varMsg=pltsPop.replace(/\n/g,br);Msg=Msg.replace(/\0x13/g,br);varre=/\{(.[^\{]*)\}/ig;if(!re.test(Msg))pltsTitle=fontcolor=#ffffff提示/font;else{re=/\{(.[^\{]*)\}(.*)/ig;pltsTitle=Msg.replace(re,$1)+;re=/\{(.[^\{]*)\}/ig;Msg=Msg.replace(re,);Msg=Msg.replace(br,);}//varattr=(document.location.toString().toLowerCase().indexOf(list.asp)0?nowrap:);varcontent='tablestyle=FILTER:alpha(opacity=100)shadow(color=#bbbbbb,direction=135);id=toolTipTalbeborder=0trtdwidth=100%tableclass=tableBorder7cellspacing=1cellpadding=0style=width:100%'+'trid=pltsPoptopthheight=18valign=bottomclass=th1bpid=topleftalign=leftfontcolor=#ffffff↖/font'+pltsTitle+'/ppid=toprightalign=rightstyle=display:none'+pltsTitle+'fontcolor=#ffffff↗/font/b/th/tr'+'trtd+attr+class=tablebody7style=padding-left:14px;padding-right:14px;padding-top:6px;padding-bottom:6px;line-height:135%;background-color:#FFF;'+Msg+'/td/tr'+'trid=pltsPopbotstyle=display:nonethheight=18valign=bottomclass=th1bpid=botleftalign=leftfontcolor=#ffffff↙/font'+pltsTitle+'/ppid=botrightalign=rightstyle=display:none'+pltsTitle+'fontcolor=#ffffff↘/font/b/th/tr'+'/table/td/tr/table';pltsTipLayer.innerHTML=content;toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);moveToMouseLoc();returntrue;}else{pltsTipLayer.innerHTML='';pltsTipLayer.style.display='none';returntrue;}}css代码：.w1{MARGIN-LEFT:auto;WIDTH:1002px;MARGIN-RIGHT:auto}.navi{BACKGROUND-IMAGE:url(../images_new/navi_bg.jpg);HEIGHT:32px}.naviUL{MARGIN-LEFT:15px}.naviLI{FONT-WEIGHT:bold;FONT-SIZE:14px;FLOAT:left;WIDTH:106px;LINE-HEIGHT:32px;TEXT-ALIGN:center}.navi_li1{BACKGROUND-POSITION:10px10px;BACKGROUND-IMAGE:url(../images_new/ico_001.jpg);BACKGROUND-REPEAT:no-repeat}.navi_li2{BACKGROUND-POSITION:center3px;BACKGROUND-IMAGE:url(../images_new/navi