网页设计实验(一).doc

计算机网络课程 网页设计实验一、 实验目的熟悉HTML和CSS语法，理解网页结构设计和样式设计及其区别，掌握网站设计的过程。二、 实验内容1）利用HTML和CSS设计首页2）利用HTML和CSS设计其他网页3）建立各网页之间的链接三、 实验步骤1）在DW中建立一个站点：站点名称：*的站点，物理文件夹：E:*website。*为姓名拼音或英文名字。建立二个子文件夹images、styles。2）)设计首页Box网站中各网页的结构一般包括三个部分 头部，主体内容部分，尾部，首页也不例外。HeaderContentFooter（1） 建两个文件 index.htm style.cssindex.html保存在网站根目录下，style.css保存在styles子文件夹中。index.html中代码：个人网站style.css中的代码为：bodymargin:0px;说明：语句的功能是调用 css。style.css中“margin:0px;”代码的意思就是 让 body 这个容器(里面的所有内容)的上下左右边距均为0 （2）建网页头部在index.html网页代码的 之间输入代码：注意：div的属性id 必须有id 因为要在css里面判断为哪个容器 赋于css样式建一个 高80px 宽960px 的网页头部。css里面这样编代码：style.css 中增加代码：#boxmargin:0 auto;width:960px;background-color:ivory;#headermargin:0 auto;Width:100%;height:80px;background-color:red;说明：margin:0 auto; 这个代码为是兼容火狐等游览器，不必深究。width:960px; 宽width:100%; 宽height:80px; 高background-color:ivory;设置box层的背景色为象牙色background-color:red;设置header层的背景色为红色（3）用相同的方式 再创建两个div，得到网页的主体部分和尾部index.htm中添加部分代码（蓝色部分）个人网站div id=”box”在style.css中增加代码（蓝色部分）：bodymargin:0px;#boxmargin:0 auto;width:960px;background-color:ivory;#headermargin:0 auto;width:100%;height:80px;background-color:red;#contentmargin:0 auto;width:100%;height:600px;background-color:blue;#footermargin:0 auto;width:100%px;height:80px;background-color:yellow;至此得到一个网页的轮廓。为区分网页中的各部分，设置了不同的背景色。在网页设计完成后，可根据需要将背景色去除。（4）在网页头部放置网站导航条（网站菜单栏）（a）在index.html中之间输入代码 首页 简介 相册 留言 说明：当在HTML中定义为id=divID时，在CSS对应的设置语法则是#divID，如果在HTML中定义为class=divID时，则在CSS中对应的设置语法是.divID。如果id=divID这个层中包括了一个,则这个img在CSS中对应的设置语法应该是#divID img，同样，如果是包含在class=divID这个层中时，则设置语法应该是.divID img。（b）在style.css中增加内容，将列表转化为导航条（菜单）#menu ullist-style:none;margin:0px;#menu ul li float:left;margin:0 10px;说明：#menu ul list-style:none;margin:0px;list-style:none，这一句是取消列表前点，因为不需要这些点。margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。#menu ul li float:left;margin:0 10px;这里的float:left的作用是让内容都在同一行显示，使用了浮动属性(float)。margin:0 10px的作用是让列表内容之间产生一个20像素的距离(左：10px,右：10px)，预览效果： 首页 简介 相册 留言（c）在style.css中增加内容，固定菜单的位置，并使菜单居于页面右侧：#menu padding:20px 20px 0 0;/*利用padding:20px 20px 0 0来固定菜单位置*/#menu ullist-style:none;margin:0px;float:right;/*添加了float:right使得菜单位于页面右侧*/(d)菜单选项之间加一条竖线：.menuDiv width:1px;height:28px;background:#FFF;预览效果： 首页 | 简介 | 相册 | 留言（e）调整菜单选项的文字的位置，使其垂直居中，修改代码为：#menu ul li float:left;margin:0 10px;display:block;line-height:28px;（f）修改菜单的超链接样式，在style.css中添加代码：#menu ul li a:link,#menu ul li a:visited font-weight:bold; /*设置字体为粗体*/color:#FFF; /*设置字体色为白色*/text-decoration:none; /*去除超链接下划线*/#menu ul li a:hovertext-decoration:underline; /*超链接下方出现下划线*/（g）设置背景图片在style.css中修改样式代码（蓝色部分）：#headermargin:0 auto;width:100%;height:80px;background-color:red;background-image:url(./images/headerBGIMG.jpg); /*加入背景图片*/background-repeat:repeat-x; /*重复*/（5）设计网页尾部(a)在网页尾部写上版权： 版权所有：*网站建设工作室 Copyright 2012 All Right Reserved (b)编辑css:#footermargin:0 auto;width:940px;height:60px;background-color:yellow;padding-top:30px;padding-left:20px;text-align:center;说明：padding-top:30px; 让文字离容器顶部距30px padding-left:20px; 同样离左面 20px text-align:center; 所有文字居中（6）设计网页主体部分（本部分可选做）若主体内容分成 左右两部分：index.html中之间增加代码(蓝色部分)：Style.css中增加代码#content-leftwidth:280px;float:left;#content-rightwidth:680px;float:right;说明：请注意 float 这个属性，用来控制层容器的浮动状态。一行三列或者多列如何显示？最后一个div 用 float:right; 其他的全部用 float:left;网站模板页3）设计简介网页以首页为模板，建立intro.html网页。在主体部分输入个人简介。简介内容如下图所示：4）设计相册网页以首页为模板，建立photo.html网页。在