正本09电商---实验报告---网页与网站设计(2011-2012(1))

经济与管理系学生实验报告

实验项目二：HTML 语言系列实践实验 性 质 必做 * ) ( 选做 ( ) 性 质

实验目的：(1) 掌握 HTML 语言 (2) 熟悉 Dreamweaver MX 的使用

实验过程记录：(1)在 Dreamweaver MX 中输入 2-5.htm、2-6.htm、 2-10.htm、2-11.htm、2-12.htm(里面的文字内 容可随便写，但标签要照书中写) ,并看看实现的效果。 (2)对前面的代码内容进行适当的修改，并再看看效果

(要求将 2-5.htm、2-6.htm、标明修改的地方)

2-10.htm、2-11.htm、2-12.htm 修改后的代码复制此记录处，并用下划线 下划线

实验项目三：HTML 语言系列实践实验 性 质 必做 * ) ( 选做 ( ) 性 质

实验目的：(1) 掌握 HTML 语言 (2) 熟悉 Dreamweaver MX 的使用

实验过程记录：(1)在 Dreamweaver MX 中输入 2-15.htm、 2-16.htm、 2-20.htm 的代码 (里面的文字内容可随便写， 但标签要照书中写) ,并看看实现的效果。 (2)对前面的代码内容进行适当的修改，并再看看效果 (3)新建一个 2-15-A.htm 文件，在该文件中用 html 标签实现下面的效果。(提示：colspan,rowspan)

(要求将 2-15.htm、修改的地方)

2-16.htm、 2-20.htm、2-15-A.htm 修改后的代码复制此记录处，并用下划线 下划线标明 下划线

(1)2-15.htm <table width="65%" height="180" border="3" align="center" cellpadding="5" cellspacing="2" bordercolor="#ff0000"> <tr> <td width="50%" height="60" bgcolor="#ffff00">111</td> <td width="50%">111111</td> </tr> <tr> <td height="100" >111111</td> <td height="100" >111111</td> </tr> <tr> <td height="100">111111</td>

<td height="100" >111111</td> </tr> </table> 2-16.htm

<form

name="form1"

method="post"

action="text.cgi

enctype="mulpipart/form-data"> <h1>个人情况填写表</h1> <p>姓名：</p> <input type="text" name="textfield"></p> <p>出生年月：</p> <input type="text" name="textfield-1"><p> <p></p> <input type="radio" name="radiobutton" value="radiobutton">男 <input type="radio" name="radiobutton" val

ue="radiobutton">女 </p> <p></p> <input type="checkbox" name="checkbox" value="checkbox">体育 <input type="checkbox" name="checkbox" value="checkbox">音乐 <input type="checkbox" name="checkbox" value="checkbox">上网 <input type="checkbox" name="checkbox" value="checkbox">旅游 <input type="checkbox" name="checkbox" value="checkbox">棋类 <input type="checkbox" name="checkbox" value="checkbox">电影 <input type="checkbox" name="checkbox" value="checkbox">电脑 <input type="checkbox" name="checkbox" value="checkbox">购物 <p>个人相片：</p> <input type="submit name="submit" value="submit"></p> </form>2-20.htm<h2>键连接标签示例<br></h2>

<p><a href="#11">如梦令</a><br> <a href="#22">渔家傲</a><br> <a href="#33">点绛唇</a><br> <a href="#44">忆秦娥</a><br></p> <pre> <a name="11"></a> 如梦令 【宋】李清照 昨夜雨疏风骤，浓睡不消残酒。 试问卷帘人，却道“海棠依旧” 。 “知否？知否？应是绿肥红廋” <a name="22"></a> 渔家傲 【宋】李清照 个房间干净；就是 ；副书记 砥节奉公 ijgrj; 绝对可靠来的了劳动管理了了 ildglf 法规尽快发给；风格； 个规范管理和了符合规范后果。 点绛唇 <a name="33"></a> [宋]李清照 一田政治上还；这刊物目的地 夺取罪恶三十五在十三在世界上 奎寺夺二十七真正院越来越大一 地某地地区性十古城十三大三十 <a name="44"></a>

忆秦娥

【宋】李个房间干净；就是 ；副书记 砥节奉公 ijgrj; 绝对可靠来的了劳动管理了了 ildglf 法规尽快发给；风格； 个规范管理和了符合规范后果。清照

</pre>

(3)<table

border="1">

<tr> <td>112553</td> <td colspan="2">112553</td>

<td></td> </tr> <tr> <td rowspan="2">112553</td> <td >112553</td> <td>112553</td> </tr> <tr> <td >4444</td> <td>112553</td> <td></td> </tr> </table>

实验项目四：HTML 语言系列实践实验 性 质 必做 * ) ( 选做 ( ) 性 质

实验目的：(1) 掌握 HTML 语言 (2) 熟悉 Dreamweaver MX 的使用

实验过程记录：(1)在 Dreamweaver MX 中新建一个名为 2-16-A.htm 的页面实现下面效果。

(2)在 Dreamweaver MX 中输入 2-17.htm、 2-19.htm、 2-21.htm 的代码(里面的文字内容可随便 写，但标签要照书中写) ,并看看实现的效果。 (3)对(2)前面的代码内容进行适当的修改，并再看看效果

(要求将

2-16-A.htm、 2-17.htm、 2-19.htm、 2-21.htm 修改后的代码复制此记录处，并用下划线 下划线标 下划线

明修改的地方) 2-16-A.htm <form name="form1" method="post" action="text.cgi enctype="mulpipart/form-data"> <h1>个人情况填写表</h1> <p>姓名：</p> <input type="text" name="textfield"></p> <p>出生年月：</p>

<input type="text" name="textfield-1"><p> <p></p> <input type="radio" name="radiobutton" value="radiobutton">男 <input type="radio" name="radiobutton" value="radiobutton">女 </p> <p></p> <input t

ype="checkbox" name="checkbox" value="checkbox">体育 <input type="checkbox" name="checkbox" value="checkbox">音乐 <input type="checkbox" name="checkbox" value="checkbox">上网 <input type="checkbox" name="checkbox" value="checkbox">旅游 <input type="checkbox" name="checkbox" value="checkbox">棋类 <input type="checkbox" name="checkbox" value="checkbox">电影 <input type="checkbox" name="checkbox" value="checkbox">电脑 <input type="checkbox" name="checkbox" value="checkbox">购物 <p>个人相片：</p> <input type="submit name="submit" value="submit"></p> </form>

实验项目五：构建本地站点和网页版面布局 性质 必做( * ) 选做( ) 实验时间

实验目的：1. 学会 IIS 的配置 2. 掌握构建本地站点的步骤，体会构建本地站点的好处。 3. 体会网页的版面布局

实验过程记录： 1. 在自己的计算机中打开 IIS,学会 IIS 的配置(参看“IIS 设置参考.ppt”。 ) 2. 参考书中“3.2 构建本地站点”在 Dreamweaver 中构建本地站点。 3. 在刚构建好的本地站点中建立“2-21-A.htm”文件，要求此文件中必需包含图片、音乐和 视频，并测试你的多媒体效果(网址栏处应该形如 http://你的计算机 IP/ 2-21-A.htm) 。 你的计算机 注意所需多媒体文件是否保存到了网页所在的文件夹中。 4. 在刚构建好的本地站点中建立一个名为 4-1.htm 的网页，在此网页中用表格实现下面 的布局。

5. 在刚构建好的本地站点中建立一个名为 4-2.htm 的网页，在此网页中用图层实现上图 的布局。 6. 在刚构建好的本地站点中建立一个名为 4-3.htm 的网页, 实现教材 P104 页图 4-32 的效 果。

(请将 2-21-A.htm 的代码和 4-1.htm、4-2.htm 、4-3.htm 的代码复制到以下空白处)

2-21-A.htm

4-1.htm <table width="777" height="434" border="1"> <tr bgcolor="#993366"> <td colspan="4">&nbsp;</td> </tr> <tr> <td bgcolor="#000000">&nbsp;</td> <td colspan="3" rowspan="3" bgcolor="#003333">&nbsp;</td> </tr> <tr> <td bgcolor="#00FFFF">&nbsp;</td> </tr> <tr> <td bgcolor="#FFFFCC">&nbsp;</td> </tr> </table>

4-2.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="JavaScript" type="text/JavaScript"> <!-function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) document.MM_pgH=innerHeight;

location.reload(); } MM_reloadPage(true); //--> </script> </head>

<body> <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 10px; top: 346px; background-color: #0033FF; layer-background-color: #0033FF

; border: 1px none #000000;"></div> <div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 9px; top: 228px; background-color: #6633FF; layer-background-color: #6633FF; border: 1px none #000000;"></div> <div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:3; left: 7px; top: 104px; background-color: #6D879F; layer-background-color: #6D879F; border: 1px none #000000;"></div> <div id="Layer4" style="position:absolute; width:755px; height:103px; z-index:4; left: 2px; top: -5px; background-color: #FF9999; layer-background-color: #FF9999; border: 1px none #000000;"></div> <div id="Layer5" style="position:absolute; width:542px; height:357px; z-index:5; left: 213px; top: 106px; background-color: #FF99CC; layer-background-color: #FF99CC; border: 1px none #000000;"></div> </body> </html>

4-3.htm