实验一_运用XHTML标记进行网页设计.doc

实验报告课程名称Web程序设计实验名称实验一、运用XHTML标记进行网页设计日期2015.3.10学生学号姓名班级实验目的：1掌握开发工具VS2008开发网站的基本步骤。2掌握一个静态网页的设计步骤。3通过几个网页的设计掌握XHTML标记的作用。实验条件： 电脑一台、能上网查阅资料。实验内容与步骤：(1) 创建一个XHTML页面rumengling.aspx，输出结果如图1-1所示。图1-1(2) 练习列表标记songci.aspx，输出结果如图1-2所示：图1-2(3) 用XHTML语言编写符合以下要求的页面：标题为“An example of image”，在浏览器窗口中显示一个图像。图像的宽度为200个像素点，高度为150个像素点，边框宽度为10个像素点(4) 在网页中做一张课程表，要求所有的文字均居中，背景为黄色，表格居中，宽度为500像素。单元格间距与单元格边距为20像素。(5) 创建一个网页，通过链接可以跳转到(1)创建的rumengling.aspx上。（2）源代码 (1) <center > <h1 >如梦令</h1> <h2 >李清照</h2><hr style ="width :60%;height:0.5px;color:Black " />昨夜雨疏风骤<br />浓睡不消残酒<br />试问卷帘人<br />却道海棠依旧<br />知否知否<br />应是绿肥红瘦 </center> (2) 1.咏梅 <ul > <li style ="list-style-type :circle">驿外断桥边，寂寞开无主。</li> <li style ="list-style-type :circle">已是黄昏独自愁，更著风和雨。</li> <li style ="list-style-type :circle">无意苦争春，一任群芳妒。</li> <li style ="list-style-type :circle">零落成泥碾作尘，只有香如故。</li> </ul>2.如梦令 <ul> <li style ="list-style-type :square">昨夜雨疏风骤,浓睡不消残酒。</li> <li style ="list-style-type :square">试问卷帘人，却道海棠依旧。</li> <li style ="list-style-type :square">知否？知否？应是绿肥红瘦。</li> </ul>(3) <h2 >An example of image</h2><img src="images/lantian.jpg"align="middle" border="10"width ="200"height="150"alt="lantian" />(4)<div> <center> <table border="5"cellpadding ="20""width="500"> <tr align="center"> <td bgcolor="yellow"> </td> <td bgcolor="yellow">周一 </td> <td bgcolor="yellow">周二 </td> <td bgcolor="yellow">周三 </td> <td bgcolor="yellow">周四 </td> <td bgcolor="yellow">周五 </td> </tr> <tr> <tr align="center"> <td bgcolor="yellow">第一二节 </td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> </tr> <tr> <tr align="center"> <td bgcolor="yellow">第三四节 </td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> </tr> <tr> <tr align="center"> <td bgcolor="yellow">第五六节 </td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> </tr> <tr> <tr align="center"> <td bgcolor="yellow">第七八节 </td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> </tr> <tr> <tr align="center"> <td bgcolor="yellow">第九十节 </td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> <td bgcolor="yellow"></td> </tr> </table> </center>（5） <div> rumengling.aspx的超链接： <a href ="rumengling.aspx"> rumengling.aspx</a><br /> </div>实验总结（结论或问题分析）： 通过本次实验，我对网站程序设计有了更深刻的了解。学会了怎么去添加链接和在网页中插入图片，运用XHTML标记进行网页设计。实验成绩任课教师签名郭俊恩