网页制作步骤
- 格式：doc
- 大小：49.50 KB
- 文档页数：5
应用div/css技术制作网页并结合层、行为
与时间轴制作特效
一、网页主题、设计风格、配色方案的定位
网页以奶茶为主题，意在显示显示生活中人们对物质生活以及美的事物的追求。
整个网页以温馨，可爱的粉色为基调，和奶茶的作用以及含义相同。
网页中运用啦图片和文字，以展现奶茶的特征，达到一目了然的效果。
二、 Div/css技术的设计与实现
1、布局结构图
2、Css的设计与实现
此网页利用top标签引出网页的主题
#top {
font-size: large;
font-style: oblique;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
text-decoration: blink;
background-color: c4172a;
height: 20px;
width: 275px;
margin-top: 40px;
margin-left: 480px;
float: left;
}
利用zdaohang标签制作导航条利用#zdaohang {
font-size: large;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #000000;
text-decoration: blink;
height: 20px;
width: 550px;
margin-top: 20px;
margin-left: 200px;
float: left;
}
xiushi标签使整个网页更加美观
#xiushi {
font-size: large;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #994042;
text-decoration: blink;
height: 20px;
width: 500px;
margin-top: 40px;
margin-left:300px;
float: left;
}
利用kuang的标签实现网页的内容呈现.kuang1 {
height: 220px;
width: 530px;
margin-top: 120px;
margin-left: 400px;
float: left;
}
.kuang2 {
height: 190px;
width: 410px;
margin-top: 50px;
margin-left: 570px;
float: left;
}
最后利用Ap div实现页脚区
在kuang标签中嵌套其他标签，以达到预期的效果。
<body
onload="MM_preloadImages('pic/3.jpg');MM_timelinePlay('Timeline1')"> <div class="content">
<div id="apDiv3" style="left: -3px; top: 3px;"> </div>
<div id="top"> </div>
<div id="zdaohang"></div>
<div id="xiushi"> </div>
<div class="kuang1">
<div id="daohang1"> </div>
<div id="kuangl"></div>
<div id="kuangr"></div>
</div>
<div class="kuang2">
<div id="kuangt"> </div>
<div id="kuangb">
</div>
</div>
<div id="apDiv4" onmousemove="MM_effectSlide(this, 1000, '100%', '30%', true)"> </div>
<div id="apDiv1">
<div> </div>
</div>
</div>
</body>
三、网页特效的应用
1、层的应用
利用AP div 实现了时间轴的效果，使图片在网页中以动态呈现。
而且在行为的设置中也用到了Ap div，因为时间轴和行为均是利用层才能
实现。
2、行为的应用
网页的右侧，在层中放入图片，然后在对层加行为效果：滑动。
设置其效果为鼠标经过时向上滑动。
3、时间轴特效的应用
网页的左侧，在层中放入图片，然后在对层加时间轴效果，使图片在网页中曲线滑动。
四、实验总结：
通过这次实验，使我学会了怎样利用CSS布局，这种方法使网页明了，简单。
但在整个网页的制作过程中也遇到了一些问题，例如：1.刚开始没弄明白AP div和div的区别，以至于走了很多弯路。
而且在此网页中只用了时间轴和行为特效，对特效了解很少。
2.有时候新建了css，但是在运用过程中会变形，到达不了预期的位置。
3.整个网页在不加页脚区时可以预览，但在用来css以后就无法预览，提示是为了计算机安全，至现在这个问题还未解决。
在以后的学习中，我会更加努力，尽力做出更好的作品。
