《网站设计与制作》.docx
《《网站设计与制作》.docx》由会员分享,可在线阅读,更多相关《《网站设计与制作》.docx(18页珍藏版)》请在冰豆网上搜索。
《网站设计与制作》
网站设计与制作
实验报告
编制教师:
审定:
专业:
信息管理与信息系统
班级:
2010级3班
学号:
姓名:
2012~2013学年第1学期
经济与管理学院
实验一
实验名称:
HTML的基本操作
实验日期:
2012年9月实验地点:
8教5楼机房成绩:
_________
一、实验目的要求:
实验目的:
1、掌握HTML的基本结构、标签语法和常用方法。
2、掌握列表和标签的应用。
3、掌握框架和超链接的应用。
实验内容及要求:
完成实验指导书中实验2到实验4的操作。
二、实验仪器:
计算机
三、实验步骤:
实验2:
HTML基本标签应用
1,页面基本设置,关键代码为:
ThinkPadSL系列笔记本电脑2,页面主题基本设置,我的代码为:
3,页面主体内容编写:
(1),文本材料标题头编写,关键代码如下:
ThinkPadSL系列笔记本介绍
(2),编写文字材料的内容格式。
(由于都是对四段文字进行设置段落、字体、换行、斜体等,就不写代码了)
(3),编写页面页脚,代码如下:
版权所有:
同创科技有限公司|2011-2020|苏ICP备017513
| 联想Z460A-ITH(酷黑)联想Z460系列上市时间: 2010上半年处理器: IntelCorei3-350M(2.26GHz)内存容量: 2GB硬盘容量: 320GB屏幕尺寸: 14英寸¥3900 | | 联想Y460N-IFI联想Y460系列上市时间: 2010下半年处理器: IntelCorei5-460M(2.53GHz)内存容量: 2GB硬盘容量: 500GB屏幕尺寸: 14英寸全部参数网友推荐度: 68%2983网友投票
tdwidth="1104"align="left">
| 四、实验结论(讨论):
实验二
实验名称:
DIV、CSS的使用
实验日期:
2011年10月实验地点:
8教5楼机房成绩:
_________
一、实验目的要求:
实验目的:
1、学会DIV和CSS的操作使用方法。
2、掌握用DIV、CSS创建页面布局。
3、掌握使用DIV、CSS创建基于模板的网页。
实验要求:
完成实验指导书中实验6、实验7的内容
3、删除数据库MYDB。
二、实验仪器:
计算机
三、实验内容及步骤:
实验6:
使用DIV、CSS创建页面布局
本实验的关键代码都是div和css标签,代码如下:
/*CSSDocument*/
*{
margin:
0px;
border:
0px;
padding:
0px;}
body{
font-size:
12px;
color:
#787878;}
span{
margin-right:
20px;
font-size:
12px;}
/*CSSDocument*/
#box{
width:
980px;
height:
698px;
margin:
0auto;}
#top-right{
background-image:
url(../EX6/top2.gif);
background-repeat:
no-repeat;
width:
768px;
height:
92px;
float:
left;}
#
#right{
height:
470px;
width:
300px;
float:
left;}
#left-login{
background-image:
url(../EX6/left1.jpg);
background-repeat:
no-repeat;
height:
118px;}
#txtid{
position:
absolute;
top:
33px;
left:
39px;
height:
16px;
width:
86px;
border-bottom:
1px#cccccc;}
#txtpass{
position:
absolute;
left:
39px;
top:
56px;
height:
16px;
width:
86px;
border-bottom:
#CCCCCC;}
#right_newstop{
background-image:
url(../EX6/right1.jpg);
background-repeat:
no-repeat;
height:
31px;}
#right_newscontent{
background-image:
url(../EX6/right2.jpg);
background-repeat:
no-repeat;
height:
195px;}
#right_newsbottom{
background-image:
url(../EX6/right3.jpg);
background-repeat:
no-repeat;
height:
37px;}
#bottom{
width:
980px;
height:
180px;}
实验7:
使用DIV、CSS创建基于模板的网页
本实验的关键代码都是div和css标签,代码如下:
1,CSS.CSS
/*CSSDocument*/
*{
margin:
0px;
border:
0px;
padding:
0px;
}
body{
font-size:
12px;
color:
#787878;
}
span{
margin-right:
20px;
font-size:
12px;}
2,DIV.CSS(部分,由于太多了)
/*CSSDocument*/
padding-left:
18px;
}
.txtsearch{
background-color:
#CCC;
width:
100px;
}
#top_logo{
background-image:
url(../images/top1.gif);
background-repeat:
no-repeat;
width:
202px;
height:
95px;
float:
left;}
#main{
width:
980px;
height:
660px;
clear:
both;
}
#right_productpic02{
width:
61px;
float:
left;}
#right_productpic03{
width:
59px;
float:
left;}
3.subdiv.css(部分,由于太多了)
#submain{
height:
605px;
width:
780px;
float:
left;
margin:
0auto;}
#submain_topleft{
background-image:
url(../images/sub/submain_topleft.gif);
background-repeat:
no-repeat;
width:
16px;
height:
66px;
float:
left;}
#submain_bottom{
clear:
both;}
#submain_bottomleft{
background-image:
url(../images/sub/submain_bottomleft.gif);
background-repeat:
no-repeat;
width:
16px;
height:
18px;
float:
left;}
四、实验结论(讨论):
实验三
实验名称:
JavaScript的使用
实验日期:
2011年10月实验地点:
8教5楼机房成绩:
_________
一、实验目的要求:
实验目的:
1、掌握JavaScript的基本语法。
2、掌握使用JavaScript制作菜单的方法。
3、掌握使用JavaScript完成注册功能的方法。
实验要求:
完成实验指导书中实验8和实验9的内容。
二、实验仪器:
计算机
三、实验内容及步骤:
实验8:
使用DHTML、JavaScript制作菜单
1,源代码(部分):
菜单演示
#menu{
line-height:
23px;
list-style-type:
none;
margin:
10px20px20px20px;
font-size:
10px;
font-weight:
bold;
}
#menua{
display:
block;
width:
80px;
text-align:
center;
color:
#FFF;
}
#menua:
link{
text-decoration:
none;
}
2,css,css:
/*CSSDocument*/
*{
margin:
0px;
border:
0px;
padding:
0px;
}
body{
font-size:
12px;
color:
#787878;
}
span{
margin-right:
20px;
font-size:
12px;}
3,div.css:
(部分):
#box{
width:
980px;
height:
698px;
margin:
0auto;
}
#top-menu{
width:
940px;
margin-top:
10px;
text-align:
right;
font-weight:
bold;
font-size:
14px;
padding-left:
18px;
}
.txtsearch{
background-color:
#CCC;
width:
100px;
}
#top_logo{
background-image:
url(../images/top1.jpg);
background-repeat:
no-repeat;
width:
202px;
height:
92px;
float:
left;}
#top_right{
background-image:
url(../images/menu_bg.jpg);
background-repeat:
no-repeat;
width:
768px;
height:
48px;
float:
left;
position:
relative;
top:
30px
}
#main{
width:
980px;
height:
660px;
clear:
both;
}
4,sundiv.css:
(部分):
#submain{
height:
605px;
width:
780px;
float:
left;
margin:
0auto;}
#submain_topleft{
background-image:
url(../images/sub/submain_topleft.gif);
background-repeat:
no-repeat;
width:
16px;
height:
36px;
float:
left;}
#submain_topcenter{
background-image:
url(../images/sub/subma
展开阅读全文
相关搜索