web大作业实验报告

宁波大红鹰学院信息工程学院网站设计说明书网页名称：VG裸钻网站主页设计专业名称：计算机科学与技术班级名称：计科2班姓名：分享学号：1011050207完成时间：2011-6-15第1页网站设计说明书一、网站规划设计说明1、结构设计页面结构相对来说比较简单，采用上中(左、右)下的结构。上面放了banner，banner的下面是导航条，中间的左边是商品的分类和介绍主要分为了四块，从上到下依次排列公司的最新产品的信息：戒指、吊坠、配链、耳钉等主要产品的相关介绍；右边分为五块：也是上到下依次排列，第一个盒子设了顾客可以自己搜索自己想要的产品；第二到第五个盒子分别放了新款产品，新品推荐，热销产品，特价商品的精美图片。最下面是footer，设置关于该网页的相关搜索以及版权信息。2、内容规划(该网站的首页一般是一个静态的页面)页面头部：页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产品的消息；栏目导航：设置了鼠标经过时文字的效果单击可以进入其它各内容页面；具体内容：这是一家钻石的网站首页的设计,本页的具体内容包括公司的最新产品的信息的分类介绍分为：戒指、吊坠、配链、耳钉等主要产品，并且提供了一些相关照片，能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。版权声明：版权声明写在页脚，设置关于该网页的相关搜索以及版权信息图表1页脚3、LOGO设计这个网站的LOGO是该品牌的LOGO，我是以图片的形式将其切片。该LOGO主要利用了白色，是两个舞动的字母VG体现了产品的华丽和柔美，生动和逼真的设计图样，体现了其产品的精美，为产品加分吸引更多的顾客。4、技术方案该网页主要用到了css+div的网页布局方式，主要是用Dreamweaver来完成网页的代码的编写和测试，LOGO的设计是采用Photoshop软件的技术，用Fireworks来完成一些图片的切片工作，用IE和Firefox对网页的效果进行测试，最后用Photoshop制作网页的效果图。在编写代码的过程中还用到了JavaScript的语言。二、网站色彩说明1、网站主色调该网站的主色彩是绿色和淡蓝色，，网页文字为淡蓝色，导航色为淡绿色导航文字为白色如下图所示：第2页图表2网站主色调绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，是使用比较广泛的颜色之一。蓝色和白色的运用使得整个网页显得很舒服和平和，同时背景色显得产品的图片更加的鲜艳、漂亮。2、网页链接色表格1网页文字表格2导航文字颜色三、HTML页面结构图图表3整个网页结构第3页四、页面DIV结构代码divid=containerdivid=globallink/divdivid=parameterdivid=fenlei/divdivid=lstatistics/divdivid=lhotblog/divdivid=lrecent/divdivid=lapply/div/divdivid=mainsupportdivid=logoin/divdivid=demodivid=indemodivid=demo1/divdivid=demo2/div/div/divdivid=recommend/divdivid=new/divdivid=tips/div/divdivid=footer/div/div五、CSS代码及注释1.JS代码script!--varspeed=10;vartab=document.getElementById(demo);vartab1=document.getElementById(demo1);vartab2=document.getElementById(demo2);tab2.innerHTML=tab1.innerHTML;functionMarquee(){if(tab2.offsetWidth-tab.scrollLeft=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}{varMyMar=setInterval(Marquee,speed);tab.onmouseover=function(){clearInterval(MyMar)};tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)};--第4页/script2.css代码及代码/divstyletype=text/css*{padding:0px;margin:0px;}body{background-color:#ebf7ff;font-size:12px;margin:0px;padding:0px;text-align:center;}#container{/*宽度固定且居中的版式*/position:relative;margin:1pxauto0pxauto;width:850px;text-align:left;}#globallink{width:800px;height:200px;margin:0px;background-image:url(img/banner.jpg);/*banner图片*/background-repeat:no-repeat;font-size:18px;padding-bottom:25px;}#globallinkul{list-style-type:none;position:absolute;/*绝对定位*/display:inline;width:800px;top:200px;padding:0px;margin:0px;background-color:#00FFFF;}#globallinkli{float:left;/*左浮动*/text-align:center;padding-top:10px;}#globallinkulli#one{width:100px;}#globallinkulli#two{width:150px;}#globallinka:link,#globallinka:visited{color:#FFFFFF;text-decoration:none;}#globallinka:hover{color:#000000;text-decoration:none;}#parameter{第5页position:relative;margin:10px0px00px;float:left;font-size:12px;width:200px;padding-right:10px;color:#FF99CC;}#parameterdiv{border:2pxsolid#00FFFF;}#parameterbr{clear:both;display:none;}#parameterh3span{display:none;}#parameterh3{height:30px;width:90px;padding:0px;margin:0px;}#parametera:link{color:#2a788e;text-decoration:none;}#parametera:visited{color:#FF99CC;text-decoration:none;}#parametera:hover{color:#FF99CC;text-decoration:none;}#lstatisticsspana,#lhotblogspana,#lrecentspana,#lapplyspana{float:left;text-align:left;padding-top:5px;padding-right:5px;margin-bottom:5px;}#fenlei{height:25px;left:1px;top:2px;}#fenleih3{background:url(img/6.jpg)no-repeat;/*用背景图片代替标题*/position:absolute;left:1px;top:2px;}#lstatisticsh3{background:url(img/1.jpg)no-repeat;}#lhotblogh3{background:url(img/2.jpg)no-repeat;}第6页#lrecenth3{background:url(img/3.jpg)no-repeat;}#lapplyh3{background:url(img/4.jpg)no-repeat;}#lstatistics,#lhotblog,#lrecent,#lapply{position:relative;clear:both;}#lstatisticsul,#lhotblogul,#lrecentul,#lapplyul{list-style-type:none;/*统一不显示项目符号*/padding:10px0px0px0px;margin:0px;}#lstatisticsli{border-bottom:1pxdashed#CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg)no-repeat7px4px;}#lhotblogli{border-bottom:1pxdashed#CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg)no-repeat7px4px;}/*背景小图片作为项目符号*/#lrecentli,#lapplyli{border-bottom:1pxdashed#CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg)no-repeat7px6px;}#mainsupport{width:590px;float:left;position:relative;font-size:12px;margin:0px;}#mainsupportdiv{border:1pxsolid#00FFFF;}#mainsupporth3span{display:none;}#mainsupporth3{width:230px;height:31px;}#mainsupportlia:link{第7页color:#2a788e;font-size:12px;text-decoration:none;}#mainsupportlia:visited{color:#227086;font-size:12px;text-decoration:none;}#mainsupportlia:hover{color:#FF99CC;font-size:12px;text-decoration:none;}form{padding:0px;margin:0px;}input{margin:0px;}#logoin{clear:both;margin-bottom:2px;position:absolute;left:0px;top:260px;height:30px;width:588px;background-color:#d1ebff;top:10px;}#logoinul#per{margin:0px;padding-left:0px;padding-top:3px;list-style-type:none;text