《网页设计与制作》Word文档格式.docx
《《网页设计与制作》Word文档格式.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》Word文档格式.docx（20页珍藏版）》请在冰点文库上搜索。
--第二行-->
THcolspan="
D
--第三行-->
width="
200"
height="
right"
E
F
G
TDwidth="
30"
H
--第四行-->
I
/TABLE>
/BODY>
②网页表格制作截图：
2、表单实验的结果
①表单实验代码：
实验1.2——电子商务1603王翔<
1"
400"
FORMmethod="
post"
action="
"
150"
客户名称:
/TD>
INPUTtype="
text"
name="
客户名称"
size="
20"
/TR>
电子邮件:
password"
电子邮件"
产品种类：
checkbox"
value="
lanqiu"
公交客车"
公交客车
校车"
checked>
校车
pingpang"
客运客车"
客运客车<
所在省份：
SELECTsize="
jiguan"
OPTIONselected>
河南<
/OPTION>
OPTION>
河北<
山东<
山西<
/SELECT>
TDcolspan="
submit"
提交"
tijiao"
reset"
重填"
chongtian"
/FORM>
②表单实验截图：
四、实验小结
通过此次实验，我对在课堂上学习到的知识进行了实际操作，只有真正操作一遍才知道知识并不只是记住就算是会运用。
在实验中，我熟悉了表格、表单的知识，操作熟练度也同时得到了提升。
勤学多练才是提升的最好途径。
实验二：
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-->
html>
head>
title>
蘑菇街.jpg<
/title>
metahttp-equiv="
Content-Type"
content="
text/html;
iso-8859-1"
metaname="
description"
FWMXCSSLayer"
/head>
bodybgcolor="
#ffffff"
divid="
蘑菇街r1c1"
style="
position:
absolute;
left:
0px;
top:
width:
1350px;
height:
30px;
z-index:
1;
visibility:
visible;
imgname="
蘑菇街_r1_c1"
src="
蘑菇街_r1_c1.jpg"
1350"
border="
0"
/div>
蘑菇街r2c1"
67px;
2;
蘑菇街_r2_c1"
蘑菇街_r2_c1.jpg"
67"
蘑菇街r3c1"
97px;
196px;
35px;
3;
蘑菇街_r3_c1"
蘑菇街_r3_c1.jpg"
196"
35"
蘑菇街r3c2"
176px;
4;
蘑菇街_r3_c2"
蘑菇街_r3_c2.jpg"
176"
蘑菇街r3c3"
372px;
88px;
5;
蘑菇街_r3_c3"
蘑菇街_r3_c3.jpg"
88"
蘑菇街r3c4"
460px;
82px;
6;
蘑菇街_r3_c4"
蘑菇街_r3_c4.jpg"
82"
蘑菇街r3c5"
542px;
84px;
7;
蘑菇街_r3_c5"
蘑菇街_r3_c5.jpg"
84"
蘑菇街r3c6"
626px;
8;
蘑菇街_r3_c6"
蘑菇街_r3_c6.jpg"
蘑菇街r3c7"
708px;
83px;
9;
蘑菇街_r3_c7"
蘑菇街_r3_c7.jpg"
83"
蘑菇街r3c8"
791px;
10;
蘑菇街_r3_c8"
蘑菇街_r3_c8.jpg"
蘑菇街r3c9"
874px;
11;
蘑菇街_r3_c9"
蘑菇街_r3_c9.jpg"
蘑菇街r3c10"
958px;
80px;
12;
蘑菇街_r3_c10"
蘑菇街_r3_c10.jpg"
80"
蘑菇街r3c11"
1038px;
312px;
13;
蘑菇街_r3_c11"
蘑菇街_r3_c11.jpg"
312"
蘑菇街r4c1"
132px;
445px;
14;
蘑菇街_r4_c1"
蘑菇街_r4_c1.jpg"
445"
/body>
/html>
②效果显示图如下:
通过对本实验进行操作，我更加熟悉了Fireworks、Dreamweaver的操作使用，对CSS和CIV也有了更进一步的认识。
罗马不是一日建成的，建立网站也不是一件容易的事情，循序渐进，我相信我能够在学习上取得长远的进步。
实验三：
JavaScript实验
1、掌握利用JavaScript编写网页动态效果的能力；
2、掌握在网页中使用JavaScript脚本的两种方法。
1、计算整数阶乘实验的结果
①实验代码：
计算阶乘的和<
script>
functionjiecheng（）{
varnum=document.getElementById（"
first"
）.value;
varnum1=document.getElementById（"
second"
varnum2=1;
varnum3=1;
for（vari=1;
i<
=num;
i++）{num2*=i;
}
for（varj=1;
j<
=num1;
j++）{num3*=j;
num3+=num2;
alert（num3）;
/script>
body>
center>
请在两个文本框中分别输入一个整数，然后单击单击按钮进行计算<
/br>
第一个数：
inputid="
type="
/>
br>
第二个数：
inputtype="
button"
计算阶乘的和"
onclick="
jiecheng（）"
/>
/center>
②实验效果图：
2、下拉菜单实验的结果
①实验代码:
styletype="
text/css"
--
#Layer1{
position:
width:
177px;
90px;
z-index:
hidden;
#Layer2{
background-color:
#99FFFF;
.STYLE1{
font-size:
large;
font-family:
"
宋体"
;
color:
#FF0000;
#Layer3{
30;
.STYLE2{
新宋体"
#Layer4{
60;
-->
/style>
scripttype="
text/JavaScript"
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）;
（x=d[n]）&
d.all）x=d.all[n];
for（i=0;
x&
d.forms.length;
i++）x=d.forms[i][n];
for（i=0;
d.layers&
d.layers.length;
i++）x=MM_findObj（n,d.layers[i].document）;
x&
d.getElementById）x=d.getElementById（n）;
returnx;
functionMM_showHideLayers（）{//v6.0
vari,p,v,obj,args=MM_showHideLayers.arguments;
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;
//-->
imgsrc="
onMouseOver="
MM_showHideLayers（'
Layer1'
'
）"
onMouseOut="
Layer1"
Layer2"
divalign="
class="
STYLE1"
ahref="
file:
///C:
/Users/wang/Documents/我的论文/网页设计与制作/24小时最新.htm"
24小时最新<
/a>
Layer3"
STYLE2"
/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流行榜<
Layer4"
/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"
风格馆<
absolu
升级会员 