互联网及应用II课程报告Word文件下载.docx
- 文档编号:18184306
- 上传时间:2022-12-14
- 格式:DOCX
- 页数:15
- 大小:5.35MB
互联网及应用II课程报告Word文件下载.docx
《互联网及应用II课程报告Word文件下载.docx》由会员分享,可在线阅读,更多相关《互联网及应用II课程报告Word文件下载.docx(15页珍藏版)》请在冰豆网上搜索。
width:
100%;
height:
onload=setInterval("
count()"
"
1000"
)>
center>
h1>
动漫集中营<
/h1>
br/>
fontid="
num"
size="
8"
face="
新宋体"
color="
#FF0000"
>
5<
/font>
fontsize="
color="
#6699FF"
秒后自动跳转<
/h2>
/center>
呈现效果如图1所示:
图1
2、主页:
2.1、主页设置模块:
利用div+css为主页布局。
“style.css”文件中设置。
*{
margin:
0px;
padding:
border:
0px
body{
font-family:
"
font-size:
13px;
color:
#000000;
a:
link,a:
visited{
#333;
text-decoration:
none;
font-weight:
normal;
}a:
active,a:
hover{
*fff;
underline;
#wrap{
width:
984px;
#98EDF3;
0auto;
2.2、登陆注册模块:
在“style.css”文件中设置板块的大小,字体的颜色大小。
#top{
float:
right;
200px;
14px;
text-align:
margin-top:
10px;
margin-bottom:
20px;
padding-right:
#topspan{
padding-left:
5px;
在主页中设置超链接,连接到注册页面。
divid="
top"
ahref="
zhuce.html"
登录/注册账号<
/a>
span>
|<
/span>
收藏本站<
/div>
呈现效果如图2所示:
图2
2.3、导航栏模块及关键字搜索:
在“style.css”文件中设置板块大小及背景,字体的颜色大小。
代码如下:
#nav{
left;
overflow:
hidden;
#nav_search{
260px;
40px;
10px0px0px30px;
margin-left:
15px;
#nav_menu{
36px;
10px0px0px0px;
#00CC99;
#nav_menu_mid{
580px;
#nav_menu_midul{
list-style:
#nav_menu_midli{
11px;
#nav_menu_mida{
在主页中设置超链接。
nav"
<
nav_search"
关键字搜索:
inputtype="
search"
results="
5"
metaname="
keywords"
content="
动漫"
/>
br/>
nav_menu"
<
nav_menu_mid"
ul>
<
li>
#"
target="
_self"
首页<
/li>
跳转网页"
日本动漫<
国产动漫<
欧美动漫<
港台动漫<
动漫电影<
新番<
完结版<
/ul>
呈现效果如图3所示:
图3
2.4、新闻滚动模块:
在“style.css”文件中设置板块大小及背景,字体的颜色大小。
并添加属性overflow:
auto,呈现出新闻滚动的形式。
代码如下(仅显示左边模板代码,右边类似):
#main_top1{
477px;
35px;
margin-right:
#00FFCC;
#main_top1h3{
16px;
bold;
padding-top:
#main{
#main_left{
auto;
.news_list*{
0;
.news_listli{
450px;
30px;
.news_listlispan{
120px;
.news_listlia:
#32600;
在主页中添加内容以及背景。
代码如下(中间有缩减):
main_top1"
h3>
更新预告<
/h3>
main_top2"
动漫资讯<
main"
main_left"
ulclass="
news_list"
名侦探柯南835<
预计06月25日更新<
...
境界的轮回S211<
预计06月25日更新<
在主页上方滚动的字幕代码写在主页warp中:
marqueedirection="
left"
scrolldelay="
120"
fontcolor="
#3399CC"
face="
楷体"
7"
欢迎来到动漫集中营~( ̄▽ ̄~)(~ ̄▽ ̄)~<
/marquee>
呈现效果如图4、5所示:
图4
图5
2.5、站内图片切换播放器模块;
在“style.css”文件中,输入代码:
ul,li{list-style:
}
.mid{margin:
.area{width:
944px;
600px;
margin-bottom:
position:
relative;
#pic_list{position:
#pic_listli{position:
absolute;
visibility:
#pic_listli.show{visibility:
visible;
#pic_listliimg{vertical-align:
middle;
.button{width:
240px;
line-height:
bottom:
#button{float:
#buttonli{float:
center;
03px;
Arial"
12px;
#fff;
#000;
#buttonli.current{background:
#f00;
cursor:
pointer;
在主页中,输入代码:
main2_top"
萌图欣赏<
main2"
divclass="
areamid"
imgbox"
class="
bbbb"
ulid="
pic_list"
aaaa"
liclass="
show"
id="
one"
imgsrc="
images/图1.jpg"
width="
999"
/>
liid="
two"
images/图2.jpg"
width="
/>
three"
images/图3.jpg"
four"
images/图4.jpg"
five"
images/图5.jpg"
six"
images/图6.jpg"
button"
dddd"
cccc"
current"
but_one"
1<
liid="
but_two"
2<
but_three"
3<
but_four"
4<
but_five"
but_six"
6<
scripttype="
text/javascript"
(function(){
varimgbox=document.getElementById("
);
varpic_list=document.getElementById("
varpics=pic_list.getElementsByTagName("
li"
varbutton=document.getElementById("
).getElementsByTagName("
varp;
varstart;
functionautoplay(start){for(i=start;
i<
button.length;
i++){(function(){
varp=i;
button[i].onmouseover=functionchange(){
for(j=0;
j<
this.parentNode.childNodes.length;
j++){
this.parentNode.childNodes[j].className="
}
this.className="
for(m=0;
m<
pics.length;
m++){
pics[m].className="
if(m==p){
}}}};
}}
autoplay(0);
};
呈现效果如图6所示:
图6
2.6、页尾:
在“style.css”中,输入:
#footer{
clear:
both;
#999;
#666;
在homework1.html中,输入:
footer"
p>
Copyright&
copy;
2016-201752Tian.NetInc.Allrightsreserved.动漫集中营<
/p>
联系邮箱:
1234567890@<
呈现效果如图7所示:
图7
3、子页:
登陆注册:
主要是验证部分有难度。
需要写js脚本。
下面是密码验证码的代码:
functioncc(){
varpass1=window.document.my_form.password1.value;
varpass2=window.document.my_form.password2.value;
if(pass1==pass2){
window.alert("
注册成功!
returntrue;
}
else
密码错误!
returnfalse;
}<
整体呈现效果如下:
欢迎页
主页
登录注册页
三、所遇到的问题:
在设计网页的过程中,遇到了很多问题,在查阅资料以及请教同学,一一解决了。
主要问题有以下几个:
1、新闻滚动模块的滑动条设置不出来
解决方法:
在“style.css”文件中的相应div中加入属性overflow:
auto。
2、设置注册页面中的密码验证码设置不出来
解决办法:
在主页中<
输入代码:
window.alert("
returntrue;
}
else
returnfalse;
3、欢迎页设置倒计时,页面上的数字没有随时间的减少发生递减变化
解决办法:
输入以下代码:
四、总结:
网页的主题以动漫为主,设有多个板块。
在设计主页过程中,页面布局是一个很大的难题,要在纸上画出心中的方案,并计算好数值,否则,就会出现页面混乱的情况。
把整个结构设置好后,就开始设置具体板块。
登录注册板块,需要设置超链接,连接到注册页面,这个还比较简单。
导航栏板块,则需要在板块中再设置相应的小版块,这样可以分别操作,互不影响。
新闻滚动板块,则是在设置滚动中遇到了问题,在设置了属性后,解决了。
幻灯片播放则相对有些难度,在网上查找了资料,设置了一下宽和高,也可以在网页中相应播放。
而页尾的设置很简单,输入代码即完成。
再就是子页的设置,分别有登录注册页和欢迎页。
登录注册页中,验证码是一个难题,后来请教同学,设置了javascript脚本,得到如果两次密码设置不正确,就会有提示,并重新输入。
欢迎页主要是倒计时数字的变化。
开始一直做不好,后来发现有个单词的大小有问题。
最后,就是美化和修饰了。
开始为了分辨模块,背景设置了不同的颜色,现在就是重新设置属性background,是整个视觉效果达到最好
这次设计网页的作业让我收获颇多,知道了自己的不足,但能让脑中的知识活学活用,也还是很满足的。
遗憾的是时间太少了,没有让网页很精致,只是基本上满足了作业的要求。
但是,以后有兴趣还是会继续深入学习。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 应用 II 课程 报告