网页设计实验报告Word文件下载.docx
《网页设计实验报告Word文件下载.docx》由会员分享,可在线阅读,更多相关《网页设计实验报告Word文件下载.docx(20页珍藏版)》请在冰豆网上搜索。
④插入图片以后,还可以为页面设置背景颜色或图片,点击属性面板上的【页面属性】,在对话框中可对背景颜色或背景图片进行设置。
⑤在页面的右下方输入文字“Enter”,选取文字,为它添加超级链接。
在属性面板的“链接”一栏中填写链接的地址,可以是其他某个网站的地址,或者是你网站内的某个文件上(可选取Enter-2.htm),如果希望该页面是在一个新窗口中打开,可以在“目标”中选择“-blank”,新页面在当前浏览器打开选择“-self”。
⑥这时,一个简单的页面完成了,保存后按F12进行预览。
4)制作表格
(1)表格的创建、插入、删除、复制和移动等操作
①创建一个名为exe1.htm的网页文件,单击【插入】面板的
按钮,在【插入表格】对话框中页面上输入4行5列的表格,在表格中输入如图1—1所示的内容。
并在表格上方增加标题“信管专业各班平均成绩表”,标题格式设置为方正舒体、5号、粗体、#003366。
科目
数据库原理
计算机组成实验
英语精读
电子商务
00级1班
73
85
77
79
01级1班
83
82
91
01级3班
90
80
92
图1—1各班平均成绩表
②在表格“01级3班”前插入一行,内容为“0l级2斑、85、82、88、82”。
在表格中“计算机组成实验”列前插人一列,内容为“计算机组成、69、73、75、80”。
③将00级1班这一行移到表格的最后一行;
删除“英语精读”这一行。
(2)单元格的拆分、合并和格式化操作
①使表格中的数据全部居中,使整个表格在页面上居中。
②将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格,内容改为“计算机组成和实验”,设置为居中、黑体、5号。
③选择【命令】【格式化表格】命令,将表格套用系统预没的格式simple3。
(3)导入外部数据和表格排序
①在Excel中新建图1-1的表格,保存为value.xls文件。
②创建名为value.htm的网页文件。
选择【文件】【导人】【Excel文档】命令,就可导入指定的数据文件。
③选中表格的“电子商务”列,选择【命令】【排序表格】,在对话框中设置参数。
在【排序按】下拉列表框中选择按【列5】
(即第5列)排序,选择【按数字排序】和【降序】。
观察排序后的结果。
④表格套用格式是系统预设格式“AltRows:
green&
yellow”。
⑤表格设置:
【边框】为3,【边框颜色】为#FF0000。
5)层的基本操作方法
①创建一个名为exe2.htm的网页文件。
可设置相关的背景图片。
②在网页合适的位置上,选择【插入】【布局对象】中,分别创建两个名为source和shadow的层,Z-index的尺寸分别为2和1。
③在层中输入文字“书-人生的伴侣,知识的源泉”,两个层中的文字的颜色分别为红色和黑色。
移动层,使两个层略微错开重叠,使文字带有阴影效果。
如图1-2所示。
④打开层的浮动面板,选中【防止重叠】复选项,然后移动名为source的层,试比较该复选项选与不选的区别。
6)使用框架布局页面的方法
①创建一个名为exe3.htm的网页文件。
选择【插入】【HTML】【框架】【左侧及上方嵌套】命令。
同理创建一个名为exe4.htm的网页文件,选择【上方及左侧嵌套】,比较两种框架的不同之处。
②删除exe4.htm的网页文件中创建的框架,然后创建【上方】框架,并把【上方】框架改为【上方及左侧嵌套】框架,调整框架的大小。
③分别用鼠标在【框架】面板中选中主框架(mainFrame)、左框架(1eftFrame)、顶框架(topFrame)和整个框架集(也称框架组),观察结果。
④在主框架(mainFrame)中插入底部框架(bottomFrame),选中左框架(1eftFrame)插入顶部框架,将左框架分割成上(topFrame)下(1eftFrame)两部分。
⑤分别在框架面板中选中topFrame、topFramel、mainFrame、1eftFrame、bottomFrame5个框架,并给这5个框架设置背景颜色共#AAFFFF、#CCFFFF、#CCFFCC、#CCFFCC、#CCFFFF。
⑥保存框架文件。
⑦设置exe4.htm框架文件的框架集的属性。
各项参数分别是:
【边框】为“是”,【边框颜色】为#00CCFF,【边框宽度】为2像素,左边【列】为100像素。
分别设置【列】的单位,在【单位】下拉菜单中分别选择【像素】、【百分比】、【相对】命令,观察不同的结果。
⑧在topFrame、topFramel、mainFrame、1eftFrame、bottomFrame框架中,可插入层、表格、图片、动画、文字等。
⑨保存网页文件,进行预览。
3.代码及其结果:
实验2网页制作综合实验
1.实验的目的与要求:
(1)使用框架构建完整页面。
(2)制作一个完整的页面。
(3)掌握创建和应用CSS样式表的方法。
2作业
2.1内部样式表的应用
2.1.1主要代码截图
<
style>
*{margin:
0;
padding:
font-size:
14px;
}
ul{list-style:
none;
height:
50px;
border-bottom:
#F605pxsolid}
.navli{height:
30px;
line-height:
width:
100px;
background-color:
#ccc;
margin-bottom:
1px;
text-align:
center;
float:
left;
margin-top:
20px;
.navlia{text-decoration:
li:
hover{background-color:
#F60;
color:
#fff;
<
/style>
/head>
body>
ulclass="
nav"
>
li>
aclass="
on"
href="
#"
/>
首&
nbsp;
&
页<
/li>
ahref="
新闻快讯<
产品展示<
售后服务<
联系我们<
/ul>
/body>
/html>
2.1.2页面运行截图
2.2外部样式表
2.2.1主要代码截图
linkrel="
stylesheet"
type="
text/css"
style/reset.css"
style/indexb.css"
title>
无标题文档<
/title>
divclass="
headerBar"
topBar"
comWidth"
leftArea"
class="
collection"
收藏本站<
/a>
/div>
rightArea"
欢迎<
[登录]<
[注册]<
logoBar"
logofl"
imgsrc="
image/.jpg"
alt="
"
search-boxfl"
inputtype="
text"
search-text"
button"
search-btnfr"
value="
搜索"
shopCarfr"
spanclass="
shopTextfl"
购物车<
/span>
shopcfr"
0<
navBox"
shopClassfl"
span>
全部商品分类<
i>
/i>
/spans>
shopClass_box"
dlclass="
shopClass_item"
dt>
b"
手机<
数码<
合约机<
/dt>
dd>
华为荣耀<
单反<
智能设备<
/dd>
/dl>
navfl"
active"
数码城<
吃货俱乐部<
团购<
发现<
二手特卖<
名品汇<
Css代码截图:
/*logo*/
.logoBar{background:
#1d7ad9;
85px;
.logo{padding-left:
41px;
padding-top:
13px;
.search-box{width:
430px;
35px;
margin-left:
185px;
23px;
font:
14px/35px"
微软雅黑"
"
MicrosoftYaHei"
;
.search-text{width:
350px;
25px;
backgrond-color:
5px;
.search-btn{width:
70px;
background-color:
/*购物车*/
.shopCar{width:
145px;
font-family:
;
#ff8c00;
margin:
23px50px00;
.shopText{height:
100%;
87px;
border-right:
#e27a00solid1px;
background:
url(../image/gou.jpg)10pxcenterno-repeat;
text-indent:
40px;
.shopc{width:
56px;
height:
url(../image/jianshu.jpg)33pxcenterno-repeat;
text-indent:
10px;
/*导航*/
.navBox{height:
#1369c0;
#FFF;
clear:
both}
.shopClass{width:
190px;
.nav{height:
.navli{float:
035px;
.nava{height:
display:
inline-block;
#FFF}
.nava:
hover{color:
#90C;
}
/*小列表*/
.shopClass_box{background-color:
#06F;
.shopClass_item{padding:
10px14px;
2.2.2页面运行截图
实验四网页程序设计
一、实验目的
通过几个实例练习,了解JavaScript、VBScript在网页中的应用。
二、实验内容和操作步骤
1.显示一个动态的时钟
操作步骤:
进入DW->
新建一个页面->
点击“HTML”。
在指定位置输入以下代码可以实现一个动态的时钟。
在<
body>
和<
/body>
之间插入下列代码:
bodyonload=displayTime()>
//定义时钟显示的函数
scriptlanguage="
javascript"
functiondisplayTime()
{vartoday=newDate();
//定义日期对象
varhours=today.getHours();
//从日期对象中中获得时间信息
varminutes=today.getMinutes();
varseconds=today.getSeconds();
minutes=fixTime(minutes);
seconds=fixTime(seconds);
//引入fixTime()函数,使分和秒可以正常显示,对于小于10的数字则在该数字前加一个0
varthe_time=hours+"
:
+minutes+"
+seconds;
//将时间、字符串组合在一起并写出
window.document.the_form.the_text.value=the_time;
//把表格的值重新写一遍,相当于刷新时间
the_timeout=setTimeout('
displayTime();
'
500);
//每半秒钟执行一次该函数,即500毫秒
functionfixTime(the_time)
{if(the_time<
10){the_time="
0"
+the_time;
}returnthe_time;
/script>
formname="
the_form"
欢迎光临我的网站现在是北京时间:
p>
fontface="
宋体"
name="
the_text"
size="
16"
/form>
运行,可以看到浏览器显示如下:
2.鼠标事件和浏览器的提示栏及IF语句的运用
1)鼠标事件和浏览器的提示栏
在DW中的HTML代码中下输入以下源代码:
当你把鼠标放在链接上时,看一下状态栏上显示的内容。
html>
onMouseOver="
window.status='
你现在把鼠标放在链接上面'
请把鼠标放到这里来<
br>
新建一个Html文件,运行,把鼠标移到上述链接后,就触发了onMouseOver事件,使得浏览器状态栏(window.status)的内容变成指定的文字了。
2)IF语句的运用
在网页的HTML代码中输入下面的源代码:
JavaScript"
varjava=prompt("
你喜欢JAVASCIRPT吗?
输入“Y”或者“N”"
);
其中window.prompt()就是一个窗口对象的方法,其基本作用是,当装入Web页面时在屏幕上显示一个具有“确定”和“取消”的对话框,让你输出数据。
JavaScript脚本中可直接引用窗口对象。
如:
window.alert("
窗口对象输入方法"
)可直接使用以下格式:
alert("
)
if(java=="
Y"
){
欢迎你,来吧,我们继续学习吧!
elseif(java="
N"
它很有趣的,不学多可惜,唉:
("
新建一个Html文件,运行,就会出现以下提示:
如果你选择“Y”(大写),则会出现(左图);
如果你选择“N”,或是直接回车,则会出现(右图)
三.代码及其实验结果:
2.1设计一个动态的时钟
2.1.1主要代码截图
head>
metacharset="
UTF-8"
动态时钟<
scripttype="
text/javascript"
functionclocks()
{
vardate=newDate();
varstring=date.getHours()+"
时"
+date.getMinutes()+"
分"
+date.getSeconds()+"
秒"
varweekday=["
星期日"
星期一"
星期二"
星期三"
星期四"
星期五"
星期六"
];
varweeks=weekday[date.getDay()];
string+=weeks;
document.getElementById("
clock"
).value=string;
vararr=setInterval(clocks,100);
现在时间是:
/p>
id="
2.2鼠标事件和浏览器的提示栏及IF语句的运用
<
鼠标事件<
functionrec(){
//body...
varchengji=prompt("
请输入你的成绩"
if(chengji==100)
alert("
你真棒!
elseif(chengji<
100&
chengji>
=80)
alert("
优秀!
80&
=60)
及格了但是要更加努力!
else
不及格!
点击输入成绩"
onclick="
rec()"
/>