《网页设计与制作》实验报告刘志华Word下载.docx
- 文档编号:19198370
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:18
- 大小:1.94MB
《网页设计与制作》实验报告刘志华Word下载.docx
《《网页设计与制作》实验报告刘志华Word下载.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》实验报告刘志华Word下载.docx(18页珍藏版)》请在冰豆网上搜索。
/head>
body>
tableborderalign="
center"
>
captionstyle="
height:
40px;
margin-bottom:
10px;
"
h2>
实验一表格实验<
/h2>
/caption>
tr>
tdrowspan="
2"
colspan="
width="
200"
bgcolor="
#FF0000"
A<
tdwidth="
B<
align="
C
tdcolspan="
D
align="
right"
E<
F<
G<
td>
H
I
/body>
/html>
2、表单实验的结果
tableborderwidth="
500"
divalign="
实验一表单实验<
hR>
form>
tdalign="
姓名:
inputname="
name"
密码:
inputtype="
password"
name="
value="
size="
maxlength="
性别:
radio"
gender"
valeu="
1"
checked>
女
<
男
爱好:
checkbox"
check1"
value="
yes"
篮球
check2"
足球
check3"
乒乓球
籍贯:
selectname="
jiguan"
option>
开封<
郑州<
洛阳
/select>
TDcolspan="
submit"
submit_button"
提交"
reset"
reset_button"
重置"
/table>
四、实验小结
这次的实验是设计表格和表单,跟表格相比,表单可能更复杂一点,同时表单制作时还需要表格的一些基础,在实验中,主要是参考课本上的代码,然后自己动手输入到记事本中。
通过这次的实验,我简单了解了TR、TD等代码的用法,对网页制作也有了简单的认知。
实验二:
FireWorks和CSS实验
1、掌握为给定效果图规划切图方式的能力;
2、掌握利用FireWorks切图的能力;
3、掌握利用CSS+DIV制作网页的能力。
2课时
1、规划切图方式的思路
以管理学院的网站主页为例,根据网站结构,可以将网页分为学院LOGO、导航区、图文部分、友情链接和版权信息几部分组成。
2、利用FireWorks切图的步骤
在fireworks中打开之前选定的网页的图片,按照所需内容进行切图,切图结果如下图所示:
3、CSS+DIV制作网页的结果
metacharset="
GBK"
style>
div,ul,li,a,p,h{margin:
0;
padding:
}
.top.mennu{width:
100&
;
45px;
background:
#164896;
.top.logo{border:
none;
.top.mennuul{width:
900px;
margin:
0auto;
.top.mennuli{width:
150px;
list-style:
float:
left;
line-height:
text-align:
center;
.top.mennulia{display:
block;
color:
#FFF;
text-decoration:
width:
.top.mennulidiv{width:
visibility:
hidden;
z-index:
2;
position:
relative;
.main{width:
992px;
absolute;
left:
180px;
.main.banner{float:
width:
764px;
248px;
z-index:
1;
url(images/banner.png);
.main.right{float:
228px;
.main.rightimg{float:
.main.content{width:
500px;
padding-top:
30px;
/style>
scripttype="
text/javascript"
!
--
vartimeout=500;
varclosetimer=0;
varddmenuitem=0;
functionmopen(id)
{mcancelclosetime();
if(ddmenuitem)ddmenuitem.style.visibility='
hidden'
ddmenuitem=document.getElementById(id);
ddmenuitem.style.visibility='
visible'
}
functionmclose()
{if(ddmenuitem)ddmenuitem.style.visibility=
'
functionmclosetime()
{closetimer=window.setTimeout(mclose,timeout);
functionmcancelclosetime()
{if(closetimer)
{window.clearTimeout(closetimer);
closetimer=null;
}
document.onclick=mclose;
//-->
/script>
divclass="
top"
logo"
imgsrc="
images/logo.jpg"
/>
/div>
mennu"
<
ul>
lionmouseover="
mopen('
m1'
)"
onmouseout="
mclosetime()"
ahref="
/"
学院概况<
/a>
divid="
m1"
onmouseover="
mcancelclosetime()"
学院简介<
学科建设<
机构设置<
发展规划<
/li>
m2'
党建工作<
m2"
教工之家<
党校建设<
组织建设<
党的活动<
m3'
招生就业<
m3"
招生计划<
就业指导<
毕业信息<
li>
社会服务<
m5'
合作交流<
m5"
合作研究<
教师互访<
校友风采<
/ul>
main"
banner"
images/jiuye.jpg"
images/shisheng.jpg"
images/xiaoyou.jpg"
images/ziliao.jpg"
content"
p>
河南工业大学管理学院现有教职工102人,其中教授、副教授46人,博士、在读博士31人。
教师队伍中,拥有河南省学术技术带头人1人,河南省优秀专家1人,河南省创新人才培养工程资助对象1人,河南省高校新世纪优秀人才支持计划资助对象2人,河南省优秀中青年骨干教师6人,河南省教育厅学术科技带头人5人。
设有4个行政办公室、1个资料中心、1个MBA教育中心、5个专业系和3个研究所以及1个管理学科综合实验中心。
/p>
河南工业大学管理学院目前共有电子商务、物流管理、工商管理、旅游管理、财务管理等五个专业,电子商务为一本招生专业,同时也是国家特色重点专业。
管理学院每年向社会输送近四百余名应届毕业生。
这次是我第一次使用fireworks这个软件,使用它切图并不算太难,只是要切的美观需要十分的细心。
切完图后,需要利用css+html将其制作成网页,这个还是有一定难度的,原本是想仿一个学院的网站出来的,但是其中的代码太多,而且时间也比较紧张,所以只能尽可能多的利用切出来的图,做出一个简单的模型出来,结果图其实与原图的出入还是有点大的,自己做过之后,才知道做一个精致的网站是多么的不容易。
还是要好好学习网页设计,争取自己能早日做出高水平的网站。
实验三:
JavaScript实验
1、掌握利用JavaScript编写网页动态效果的能力;
2、掌握在网页中使用JavaScript脚本的两种方法。
1、计算整数阶乘实验的结果
language="
javascript"
functiona(){
varshuzi=document.all.shuzi.value;
varjc=shuzi;
while(shuzi>
1){
shuzi--;
jc=shuzi*jc;
alert(jc);
P>
请在文本框内输入一个整数,然后点击“计算”按钮,计算该整数的阶乘<
/P>
text"
shuzi"
br>
button"
jisuan"
计算"
onclick="
a()"
2、下拉菜单实验的结果
div,ul,li,a{margin:
3、表单验证实验的结果
scriptlanguage="
type="
functionyzdianhua(){
vardianhua=zhuce.dianhua.value;
varobj=/^0\d{2,3}-?
\d{7,8}$/;
if(obj.test(dianhua)==false){
alert("
您输入的电话号码格式有误,请重新输入!
);
document.all.zhuce.dianhua.value="
}
functionyzshenfen(){
varshenfen=zhuce.shenfen.value;
varobj=/\d{6}([12]\d{3})([01]\d)([0123]\d)\d{4}/;
if(obj.test(shenfen)==false){
您输入的身份证号码格式有误,请重新输入!
document.all.zhuce.shenfen.value="
}
functionyzshouji(){
varshouji=document.all.shouji.value;
varobj=/^1\d{10}$/;
if(obj.test(shouji)==false){
您输入的手机号码格式有误,请重新输入!
document.all.shouji.value="
functionyzyouxiang(){
varyouxiang=document.all.youxiang.value
varobj=/^(\w-*\.*)+@(\w-?
)+(\.\w{2,})+$/;
if(obj.test(youxiang)==false){
您输入的电子邮箱格式有误,请重新输入!
document.all.youxiang.value="
formaction="
method="
post"
zhuce"
tablealign="
h1align="
用户注册<
/h1>
用户名:
yonghuming"
性别:
sex"
id="
man"
m"
women"
f"
身份证号:
shenfen"
onblur="
yzshenfen()"
固定电话:
dianhua"
yzdianhua()"
手机号码:
shouji"
yzshouji()"
电子邮箱:
t
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 实验 报告 刘志华
![提示](https://static.bdocx.com/images/bang_tan.gif)