收藏

下载资源 加入VIP,免费下载

《网页设计与制作》.docx

上传人：b****4 文档编号：12187682 上传时间：2023-04-17 格式：DOCX 页数：20 大小：1.75MB

下载 相关 举报

第1页 / 共20页

第2页 / 共20页

第3页 / 共20页

第4页 / 共20页

第5页 / 共20页

点击查看更多>>

下载资源

资源描述

《网页设计与制作》.docx

《《网页设计与制作》.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》.docx（20页珍藏版）》请在冰豆网上搜索。

《网页设计与制作》

实验一：

HTML语言实验

一、实验目的

1、掌握利用HTML语言编写网页的能力；

2、掌握利用HTML语言编写表格的能力；

3、掌握利用HTML语言编写表单的能力。

二、实验课时

2学时

三、实验内容

1、表格实验的结果。

①表格制作代码：

--第一行-->

A

BC

--第二行-->

D

--第三行-->

E

F

G

H

--第四行-->

I

②网页表格制作截图：

2、表单实验的结果

①表单实验代码：

客户名称:

电子邮件:

产品种类：

公交客车

校车

客运客车

所在省份：

河南

河北

山东

山西

②表单实验截图：

四、实验小结

通过此次实验，我对在课堂上学习到的知识进行了实际操作，只有真正操作一遍才知道知识并不只是记住就算是会运用。

在实验中，我熟悉了表格、表单的知识，操作熟练度也同时得到了提升。

勤学多练才是提升的最好途径。

实验二：

FireWorks和CSS实验

一、实验目的

1、掌握为给定效果图规划切图方式的能力；

2、掌握利用FireWorks切图的能力；

3、掌握利用CSS+DIV制作网页的能力。

二、实验课时

2课时

三、实验内容

1、规划切图方式的思路

（1）选中一个图片作为要切割的对象。

（2）根据图片结构，将网页效果图分为五个区域。

（3）利用Fireworks将所选图片切片分割成小图片。

（4）利用CSS+DIV将切成的小图整合成网页。

2、利用FireWorks切图的步骤

（1）打开Fireworks，导入所选定的网页设计图。

（2）进行切片，设置切片图片质量。

（3）建立专用文件夹，导出切片。

3、CSS+DIV制作网页的结果.

①网页代码：

--savedfromurl=（0014）about:

internet-->

absolute;left:

0px;top:

0px;width:

1350px;height:

30px;z-index:

1;visibility:

visible;">

absolute;left:

0px;top:

30px;width:

1350px;height:

67px;z-index:

2;visibility:

visible;">

absolute;left:

0px;top:

97px;width:

196px;height:

35px;z-index:

3;visibility:

visible;">

absolute;left:

196px;top:

97px;width:

176px;height:

35px;z-index:

4;visibility:

visible;">

absolute;left:

372px;top:

97px;width:

88px;height:

35px;z-index:

5;visibility:

visible;">

absolute;left:

460px;top:

97px;width:

82px;height:

35px;z-index:

6;visibility:

visible;">

absolute;left:

542px;top:

97px;width:

84px;height:

35px;z-index:

7;visibility:

visible;">

absolute;left:

626px;top:

97px;width:

82px;height:

35px;z-index:

8;visibility:

visible;">

absolute;left:

708px;top:

97px;width:

83px;height:

35px;z-index:

9;visibility:

visible;">

absolute;left:

791px;top:

97px;width:

83px;height:

35px;z-index:

10;visibility:

visible;">

absolute;left:

874px;top:

97px;width:

84px;height:

35px;z-index:

11;visibility:

visible;">

absolute;left:

958px;top:

97px;width:

80px;height:

35px;z-index:

12;visibility:

visible;">

absolute;left:

1038px;top:

97px;width:

312px;height:

35px;z-index:

13;visibility:

visible;">

absolute;left:

0px;top:

132px;width:

1350px;height:

445px;z-index:

14;visibility:

visible;">

②效果显示图如下:

四、实验小结

通过对本实验进行操作，我更加熟悉了Fireworks、Dreamweaver的操作使用，对CSS和CIV也有了更进一步的认识。

罗马不是一日建成的，建立网站也不是一件容易的事情，循序渐进，我相信我能够在学习上取得长远的进步。

实验三：

JavaScript实验

一、实验目的

1、掌握利用JavaScript编写网页动态效果的能力；

2、掌握在网页中使用JavaScript脚本的两种方法。

二、实验课时

2课时

三、实验内容

1、计算整数阶乘实验的结果

①实验代码：

②实验效果图：

2、下拉菜单实验的结果

①实验代码:

--savedfromurl=（0014）about:

internet-->

--

#Layer1{

position:

absolute;

width:

177px;

height:

90px;

z-index:

1;

visibility:

hidden;

}

#Layer2{

position:

absolute;

width:

177px;

height:

30px;

z-index:

1;

background-color:

#99FFFF;

}

.STYLE1{

font-size:

large;

font-family:

"宋体";

color:

#FF0000;

}

#Layer3{

position:

absolute;

width:

177px;

height:

30px;

z-index:

2;

top:

30;

background-color:

#99FFFF;

}

.STYLE2{

font-size:

large;

font-family:

"新宋体";

color:

#FF0000;

}

#Layer4{

position:

absolute;

width:

177px;

height:

30px;

z-index:

3;

top:

60;

background-color:

#99FFFF;

}

-->

--

functionMM_findObj（n,d）{//v4.01

varp,i,x;if（!

d）d=document;if（（p=n.indexOf（"?

"））>0&&parent.frames.length）{

d=parent.frames[n.substring（p+1）].document;n=n.substring（0,p）;}

if（!

（x=d[n]）&&d.all）x=d.all[n];for（i=0;!

x&&i

for（i=0;!

x&&d.layers&&i

if（!

x&&d.getElementById）x=d.getElementById（n）;returnx;

}

functionMM_showHideLayers（）{//v6.0

vari,p,v,obj,args=MM_showHideLayers.arguments;

for（i=0;i<（args.length-2）;i+=3）if（（obj=MM_findObj（args[i]））!

=null）{v=args[i+2];

if（obj.style）{obj=obj.style;v=（v=='show'）?

'visible':

（v=='hide'）?

'hidden':

v;}

obj.visibility=v;}

}

//-->

absolute;left:

0px;top:

0px;width:

1350px;height:

30px;z-index:

10;visibility:

visible;">

absolute;left:

0px;top:

30px;width:

1350px;height:

67px;z-index:

10;visibility:

visible;">

absolute;left:

0px;top:

97px;width:

196px;height:

35px;z-index:

10;visibility:

visible;">

absolute;left:

196px;top:

97px;width:

176px;height:

35px;z-index:

10;visibility:

visible;">

///C:

/Users/wang/Documents/我的论文/网页设计与制作/24小时最新.htm">24小时最新

///C:

/Users/wang/Documents/%E6%88%91%E7%9A%84%E8%AE%BA%E6%96%87/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/TOP%E6%B5%81%E8%A1%8C%E6%A6%9C.htm">TOP流行榜

///C:

/Users/wang/Documents/%E6%88%91%E7%9A%84%E8%AE%BA%E6%96%87/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/%E9%A3%8E%E6%A0%BC%E9%A6%86.htm">风格馆

absolute;left:

372px;top:

97px;width:

88px;height:

35px;z-index:

10;visibility:

visible;">

absolute;left:

460px;top:

97px;width:

82px;height:

35px;z-index:

10;visibility:

visible;">

absolu

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心