html综合实例(实验报告).docVIP

实验八 综合实例 学号201114004 姓名 王渝迪 专业 计算机科学与技术 成绩 【实验目的】 运用学过的网页制作知识设计一个简单美观的网页。 【实验内容】 1、熟悉Dreamweaver软件的环境； 2、综合运用学习的网页制作知识进行网页的综合设计。 【实验步骤】 用css+div完成整个网页的布局。 在div里添加图片。文字等信息。 理解Div的盒子模型，用margin，padding等属性对布局进行调整。 制作导航栏。用ul 和 li 标签进行和display：block。属性控制导航栏样式。 按照自己的设计，制作多个链接，可以访问其它的网页。 【实验结果】 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=utf-8 title无标题文档/title style ul {margin:0 auto;width:1000px;padding-left:0;} ul li {width:500px;background:gray;list-style-type:none;float:left;font-size:25px;;display:block;text-align:center;} ul li:hover {background: #30F;} a {text-decoration:none;display:block;color:#000} a:hover {color:#fff;} /style /head body div style=width:1000px; margin:0 auto;img src=logo_012.png /div div style=width:1000px; margin:0 auto; ul lia href=首页/a/li lia href=学校概况/a/li /ul /div div style=width:1000px; margin:0 auto; /div div style=width:1000px;height:800px; margin:0 auto; div style=width: 495px; height: 600px; float: left;border:solid 1px #999 img src=华北水院.jpg width=495 height=495 /div div style=width: 495px; height: 600px; float: right;border:solid 1px #999 h1华北水利水电大学/h1 p水利学院发展历史悠久。50年的发展历史，历经风雨，伴随着水电学院同磨砺共成长，有着深厚的积淀，积累了丰富的教学经验。水利学院始终密切把握着水利水电事业发展的脉搏，坚定不移奉行“从严治校，从严执教”的两严方针，突出本科教学的中心地位，弘扬“勤奋严谨，求实创新”的优良学风，始终以培养具有创新精神、实践能力和奉献精神的高素质水利合格人才为己任，把“下得去、用得上、留得住”的优良传统作为我们培养优秀毕业生的宗旨，为我国乃至世界的水电行业培养了大批的优秀人才，在我国水利水电教育事业中享有很高的知名度。/p /div /div /body /html 【实验心得和体会】 本次关于网页综合设计的实验，尽管实现的功能比较简单，但是在实际操作的过程中，我还是遇到了不少的问题，其中有些是老师已经强调多遍的知识点，还有对网页的整个布局情况处理的也不是很好。在这次实验中，我发现原来听起来很简单的东西，其实做起来并不那么得心应手，我也明白了还有好多东西需要课下自己去学习。 《网页设计与制作》 实验报告 第2页 共2页