web大作业实验报告(共12页).doc
精选优质文档-倾情为你奉上宁波大红鹰学院信息工程学院网站设计说明书网页名称： VG裸钻网站主页设计专业名称： 计算机科学与技术班级名称： 计科2班姓 名： 分享学 号： 完成时间： 2011-6-15 专心-专注-专业网站设计说明书一、网站规划设计说明1、结构设计页面结构相对来说比较简单，采用上中(左、右)下的结构。上面放了banner，banner的下面是导航条，中间的左边是商品的分类和介绍主要分为了四块，从上到下依次排列公司的最新产品的信息：戒指、吊坠、配链、耳钉等主要产品的相关介绍；右边分为五块：也是上到下依次排列，第一个盒子设了顾客可以自己搜索自己想要的产品；第二到第五个盒子分别放了新款产品，新品推荐，热销产品，特价商品的精美图片。最下面是footer，设置关于该网页的相关搜索以及版权信息。2、内容规划(该网站的首页一般是一个静态的页面)n 页面头部：页面头部包含VG裸钻的LOGO设计以及它最近的一些关于产品的消息；n 栏目导航：设置了鼠标经过时文字的效果单击可以进入其它各内容页面；n 具体内容：这是一家钻石的网站首页的设计,本页的具体内容包括公司的最新产品的信息的分类介绍分为：戒指、吊坠、配链、耳钉等主要产品，并且提供了一些相关照片，能让浏览者快速查询找到自己想要找到的信息以及之前的所有产品的信息。n 版权声明：版权声明写在页脚，设置关于该网页的相关搜索以及版权信 息 图表 1页脚3、LOGO设计这个网站的LOGO是该品牌的LOGO，我是以图片的形式将其切片。该LOGO主要利用了白色，是两个舞动的字母VG体现了产品的华丽和柔美，生动和逼真的设计图样，体现了其产品的精美，为产品加分吸引更多的顾客。4、技术方案该网页主要用到了css+div的网页布局方式，主要是用Dreamweaver来完成网页的代码的编写和测试，LOGO的设计是采用Photoshop软件的技术，用Fireworks来完成一些图片的切片工作，用IE和Firefox对网页的效果进行测试，最后用Photoshop制作网页的效果图。在编写代码的过程中还用到了JavaScript的语言。二、网站色彩说明1、网站主色调该网站的主色彩是绿色和淡蓝色，网页文字为淡蓝色，导航色为淡绿色导航文字为白色如下图所示：图表 2 网站主色调绿色是一种非常具有亲和力的颜色，它代表的是自然、生命、活力与健康，是使用比较广泛的颜色之一。蓝色和白色的运用使得整个网页显得很舒服和平和，同时背景色显得产品的图片更加的鲜艳、漂亮。2、网页链接色表格 1 网页文字表格 2导航文字颜色三、HTML页面结构图图表 3 整个网页结构四、页面DIV结构代码<div id="container"><div id="globallink"></div> <div id="parameter"> <div id="fenlei"></div> <div id="lstatistics"> </div> <div id="lhotblog"> </div> <div id="lrecent"></div> <div id="lapply"></div> </div> <div id="mainsupport"> <div id="logoin"></div> <div id="demo"><div id="indemo"><div id="demo1"></div><div id="demo2"></div> </div></div> <div id="recommend"></div> <div id="new"></div> <div id="tips"></div> </div> <div id="footer"></div> </div>五、CSS代码及注释1. JS代码<script><!-var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee()if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelsetab.scrollLeft+;var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() clearInterval(MyMar);tab.onmouseout=function() MyMar=setInterval(Marquee,speed);-></script>2. css代码及代码</div><style type="text/css">* padding:0px; margin:0px;bodybackground-color:#ebf7ff;font-size:12px;margin: 0px;padding:0px;text-align:center;#container/* 宽度固定且居中的版式 */position:relative;margin:1px auto 0px auto;width:850px;text-align:left;#globallinkwidth:800px;height:200px;margin:0px;background-image:url(img/banner.jpg);/* banner图片 */background-repeat:no-repeat;font-size:18px;padding-bottom:25px;#globallink ullist-style-type:none;position:absolute;/* 绝对定位 */display:inline;width:800px; top:200px;padding:0px; margin:0px;background-color:#00FFFF;#globallink lifloat:left; /* 左浮动 */text-align:center;padding-top:10px;#globallink ul li#onewidth:100px;#globallink ul li#twowidth:150px;#globallink a:link, #globallink a:visitedcolor:#FFFFFF;text-decoration:none;#globallink a:hovercolor:#;text-decoration:none;#parameterposition:relative;margin:10px 0px 0 0px;float:left;font-size:12px;width:200px;padding-right:10px;color:#FF99CC;#parameter divborder:2px solid #00FFFF;#parameter brclear:both;display:none;#parameter h3 spandisplay:none;#parameter h3height:30px; width:90px;padding:0px; margin:0px;#parameter a:linkcolor:#2a788e;text-decoration:none;#parameter a:visitedcolor:#FF99CC;text-decoration:none;#parameter a:hovercolor:#FF99CC;text-decoration:none;#lstatistics span a,#lhotblog span a, #lrecent span a, #lapply span afloat:left;text-align:left;padding-top:5px;padding-right:5px;margin-bottom:5px;#fenlei height:25px; left:1px;top:2px; #fenlei h3background:url(img/6.jpg) no-repeat; /* 用背景图片代替标题 */ position:absolute; left:1px;top:2px; #lstatistics h3background:url(img/1.jpg) no-repeat;#lhotblog h3background:url(img/2.jpg) no-repeat;#lrecent h3background:url(img/3.jpg) no-repeat;#lapply h3background:url(img/4.jpg) no-repeat;#lstatistics, #lhotblog, #lrecent, #lapplyposition:relative;clear:both;#lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ullist-style-type:none; /* 统一不显示项目符号 */padding:10px 0px 0px 0px;margin:0px;#lstatistics li border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg) no-repeat 7px 4px;#lhotblog li border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg) no-repeat 7px 4px;/* 背景小图片作为项目符号 */#lrecent li, #lapply li border-bottom:1px dashed #CCCCCC;text-align:left;padding-left:30px;font-size:14px;line-height:25px;background:url(img/5.jpg) no-repeat 7px 6px;#mainsupportwidth:590px;float:left;position:relative;font-size:12px;margin:0px;#mainsupport divborder:1px solid #00FFFF;#mainsupport h3 spandisplay:none;#mainsupport h3 width:230px;height:31px;#mainsupport li a:linkcolor:#2a788e;font-size:12px;text-decoration:none;#mainsupport li a:visitedcolor:#;font-size:12px;text-decoration:none;#mainsupport li a:hovercolor:#FF99CC;font-size:12px;text-decoration:none;formpadding:0px;margin:0px;inputmargin:0px;#logoinclear:both;margin-bottom:2px;position:absolute;left:0px;top:260px;height:30px;width:588px;background-color:#d1ebff;top:10px;#logoin ul#permargin:0px;padding-left:0px;padding-top:3px;list-style-type:none;text-align:left;#logoin ul#per lifloat:left;line-height:23px;padding-left:15px;padding-top:3px;margin:0px;#logoin #per inputbackground-color:#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:15px;padding:0px;#logoin #per1 input.textinput1,#logoin #per2 input.textinput2background-color:#FFFFFF;border:1px solid #226c81;color:#226c81;font-size:12px;height:14px;padding:0px;width:110px;#logoin br.br2display:none;clear:both;#recommend br,#new br,#tips brdisplay:block;clear:both;margin:0px;padding:0px;#recommend ul,#new ul,#tips ullist-style:none;margin:0px;#recommend ul li,#new ul li,#tips ul lipadding-left:20px;text-align:center;float:left;width:170px;#recommend ul li img,#new ul li img,#tips ul li imgborder:4px solid #ccc;margin:5px 0px 3px 0px;padding:0px;#recommend ul li a:link,#recommend ul li a:visited,#new ul li a:link,#new ul li a:visited,#tips ul li a:link,#tips ul li a:visitedcolor:;text-decoration:none;#recommend ul li a:hover,#new ul li a:hover,#tips ul li a:hovercolor:#;text-decoration:underline;#demo1 h3height:32px; width:590px;padding:0px; margin:0px;#mainsupport #recommend h3background:url(img/02.jpg) no-repeat;#mainsupport #new h3background:url(img/03.jpg) no-repeat;#mainsupport #tips h3background:url(img/04.jpg) no-repeat; #recommend, #new,#tipsposition:relative;#footerwidth:800px;clear:both;/* 不受浮动影响 */font-size:12px;text-align:center;color:#226c81;padding-bottom:20px;margin:0px;padding-top:20px;background-color:#ebf7ff;#footer pmargin:0px;padding-top:10px;background-color:#ebf7ff;#footer a:linkcolor:#;font-size:12px;text-decoration:none;#footer a:visitedcolor:#;font-size:12px;text-decoration:none;#footer a:hovercolor:#;font-size:12px;text-decoration:none;#demo background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 590px;#demo img border: 3px solid #F2F2F2;#indemo border: 1px dashed #CCC;float: left;width: 800%;#demo1 float: left;#demo2 float: left;六、页面测试结果(要求：页面在FF及IE6.0以上任一版本下测试结果，贴图完成)1、IE8.0下测试结果2、FF下测试结果七、心得体会(要求：必须要有内容，可以是学习总结，可以是体会，可以是技术知识总结，也可以是经验总结等,不少于500字)第一次做蓝色经典的时候老师带着我们一起做，给了我们网页文字材料和切好的图片并教我们如何处理盒子与盒子之间的位置，带着我们做css。这些过程当中我感觉自己好像跟上了老师的步伐，但是在真的准备最后的大作业时才发现这是一个大工程（不过或许是因为自己第一次做）。从构思要做什么类型的网站，找相关的图片材料和文字材料，设定网页的container的长和宽，构思将网页的布局将其怎样分割，大致确定好后开始找适合整个网页的背景色调，设定每个盒子的大小，切割找的图片的大小使其适合整个网页的布局，接着开始编写代码。或许因为自己不是很熟练感觉做的时候自己做做改改这样重复了好几遍，感觉好麻烦。可是当网页最终的效果出来的时候我感觉好有成就感，这是第一张真正意义上的自己设计的、自己找资料的、自己编写的网页。在做的过程当中，遇到的主要问题是盒子的布局问题，因为我的整个盒子的结构是：上、中（左、右）下的结构在布局时没有计算好图片结合文字后的尺寸的大小，导致出现了盒子被挤到下面的现象，因此每张图片我都做了两次以上的切片，使得整个过程有点麻烦。还有就是一些标签记得不是很清楚导致在做的过程当中出先了看不到效果，又花了好些时间子在找错误单词上。做这次期末大作业，感觉自己还不是很熟练，频频出错浪费了很多时间，但值得欣慰的是我还是顺利的完成了我的第一张自己设计的网页，感觉还不错！
