web大作业实验报告Word格式文档下载.docx
《web大作业实验报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《web大作业实验报告Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。
第二到第五个盒子分别放了新款产品，新品推荐，热销产品，特价商品的精美图片。
最下面是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、网页链接色
表格1网页文字
表格2导航文字颜色
三、HTML页面结构图
图表3整个网页结构
四、页面DIV结构代码
<
divid="
container"
>
globallink"
/div>
<
parameter"
<
fenlei"
lstatistics"
<
lhotblog"
<
lrecent"
<
lapply"
mainsupport"
logoin"
demo"
indemo"
demo1"
demo2"
recommend"
new"
tips"
footer"
五、CSS代码及注释
1.JS代码
script>
!
--
varspeed=10;
vartab=（"
）;
vartab1=（"
vartab2=（"
=;
functionMarquee（）{
ifMyMar=setInterval（Marquee,speed）;
=function（）{clearInterval（MyMar）};
=function（）{MyMar=setInterval（Marquee,speed）};
-->
/script>
2.css代码及代码
styletype="
text/css"
*{padding:
0px;
margin:
}
body{background-color:
#ebf7ff;
font-size:
12px;
0px;
padding:
text-align:
center;
#container{/*宽度固定且居中的版式*/
position:
relative;
1pxauto0pxauto;
width:
850px;
left;
#globallink{width:
800px;
height:
200px;
background-image:
url（img/;
/*banner图片*/
background-repeat:
no-repeat;
18px;
padding-bottom:
25px;
#globallinkul{
list-style-type:
none;
position:
absolute;
/*绝对定位*/
display:
inline;
top:
background-color:
#00FFFF;
#globallinkli{
float:
/*左浮动*/
padding-top:
10px;
#globallinkulli#one{width:
100px;
#globallinkulli#two{width:
150px;
#globallinka:
link,#globallinka:
visited{
color:
#FFFFFF;
text-decoration:
hover{
#000000;
#parameter{
10px0px00px;
padding-right:
#FF99CC;
#parameterdiv{
border:
1pxsolid#00FFFF;
#parameterbr{
clear:
both;
#parameterh3span{
#parameterh3{
30px;
90px;
#parametera:
link{
#2a788e;
#lstatisticsspana,#lhotblogspana,#lrecentspana,#lapplyspana{
5px;
margin-bottom:
#fenlei{height:
left:
1px;
top:
2px;
}
#fenleih3{background:
url（img/no-repeat;
/*用背景图片代替标题*/
}
#lstatisticsh3{
background:
#lhotblogh3{
#lrecenth3{
#lapplyh3{
#lstatistics,#lhotblog,#lrecent,#lapply{
#lstatisticsul,#lhotblogul,#lrecentul,#lapplyul{
list-style-type:
/*统一不显示项目符号*/
10px0px0px0px;
#lstatisticsli{
border-bottom:
1pxdashed#CCCCCC;
padding-left:
14px;
line-height:
url（img/no-repeat7px4px;
#lhotblogli{
}/*背景小图片作为项目符号*/
#lrecentli,#lapplyli{
url（img/no-repeat7px6px;
#mainsupport{
width:
590px;
#mainsupportdiv{
#mainsupporth3span{
#mainsupporth3{width:
230px;
height:
31px;
#mainsupportlia:
#227086;
form{
input{
#logoin{
260px;
588px;
#d1ebff;
#logoinul#per{
3px;
#logoinul#perli{
23px;
15px;
#logoin#perinput{
1pxsolid#226c81;
#226c81;
#logoin#per1,#logoin#per2{
110px;
#logoin{
#recommendbr,#newbr,#tipsbr{
display:
block;
clear:
margin:
padding:
#recommendul,#newul,#tipsul{
list-style:
:
#recommendulli,#newulli,#tipsulli{
padding-left:
20px;
text-align:
float:
170px;
#recommendulliimg,#newulliimg,#tipsulliimg{
border:
4pxsolid#ccc;
5px0px3px0px;
#recommendullia:
link,#recommendullia:
visited,#newullia:
link,#newullia:
visited,#tipsullia:
link,#tipsullia:
color:
666666;
text-decoration:
hover,#newullia:
hover,,#tipsullia:
underline;
#demo1h3{
32px;
#mainsupport#recommendh3{
#mainsupport#newh3{
#mainsupport#tipsh3{
#recommend,#new,#tips{
#footer{
/*不受浮动影响*/
#footerp{
#footera:
#006480;
#demo{
background:
#FFF;
overflow:
hidden;
1pxdashed#CCC;
590px;
#demoimg{
1pxsolid#F2F2F2;
#indemo{
left;
800%;
#demo1{float:
#demo2{float:
六、页面测试结果
（要求：
页面在FF及以上任一版本下测试结果，贴图完成）
1、下测试结果
2、FF下测试结果
七、心得体会
必须要有内容，可以是学习总结，可以是体会，可以是技术知识总结，也可以是经验总结等,不少于500字）
第一次做蓝色经典的时候老师带着我们一起做，给了我们网页文字材料和切好的图片并教我们如何处理盒子与盒子之间的位置，带着我们做css。
这些过程当中我感觉自己好像跟上了老师的步伐，但是在真的准备最后的大作业时才发现这是一个大工程（不过或许是因为自己第一次做）。
从构思要做什么类型的网站，找相关的图片材料和文字材料，设定网页的container的长和宽，构思将网页的布局将其怎样分割，大致确定好后开始找适合整个网页的背景色调，设定每个盒子的大小，切割找的图片的大小使其适合整个网页的布局，接着开始编写代码。
或许因为自己不是很熟练感觉做的时候自己做做改改这样重复了好几遍，感觉好麻烦。
可是当网页最终的效果出来的时候我感觉好有成就感，这是第一张真正意义上的自己设计的、自己找资料的、自己编写的网页。
在做的过程当中，遇到的主要问题是盒子的布局问题，因为我的整个盒子的结构是：
上、中（左、右）下的结构在布局时没有计算好图片结合文字后的尺寸的大小，导致出现了盒子被挤到下面的现象，因此每张图片我都做了两次以上的切片，使得整个过程有点麻烦。
还有就是一些标签记得不是很清楚导致在做的过程当中出先了看不到效果，又花了好些时间子在找错误单词上。
做这次期末大作业，感觉自己还不是很熟练，频频出错浪费了很多时间，但值得欣慰的是我还是顺利的完成了我的第一张自己设计的网页，感觉还不错！
升级会员 