网页课程设计与报告文档格式.docx
《网页课程设计与报告文档格式.docx》由会员分享，可在线阅读，更多相关《网页课程设计与报告文档格式.docx（22页珍藏版）》请在冰豆网上搜索。
我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。
而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设
第二章网页整体设计
1、创建HTML
首先打开DW软件建立一个站点，我取名为homework，如下图2-1
图2-1
站点建好后，还需要在产点里创建一些文件夹，用于存放东西。
将
CSS放在CSS文件夹里，图片放在images里，js存放java脚本。
如图2-2
图2-2
然后利用所学的知识，开始进行大体的页面布局。
布局的方式使用CSS+DIV进行如下图2-3：
源代码：
<
divid="
container"
>
header"
此处显示id"
的内容<
/div>
nav"
maincontent"
main"
side"
footer"
图2-3
2、创建CSS文件
创建一个外联的层叠样式表，将CSS代码写如下：
/*body*/
#container{width:
900px;
margin:
0auto;
}
/*header*/
#header{height:
70px;
background:
#CCFFCC;
margin-bottom:
8px;
#nav{height:
30px;
}
/*main*/
#maincontent{margin-bottom:
#main{float:
left;
width:
664px;
height:
500px;
#FFFF99;
#side{float:
right;
228px;
#FFCC99;
/*footer*/
#footer{height:
第三章网页详细设计
1、头部的和导航栏设计
头部：
分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
产品搜索
图3-1图3-2
用如下代码实现：
logo"
imgsrc="
images/logo.gif"
width="
181"
height="
45"
/>
search"
formid="
form1"
name="
method="
post"
action="
"
搜索产品
inputtype="
text"
textfield"
id="
submit"
button"
value="
查询"
/form>
#search{float:
24px;
margin-top:
color:
#444;
.inp_srh{width:
140px;
17px;
padding-left:
20px;
url（../images/srh_bg.gif）00no-repeat;
border:
1pxsolid#cbcbcb;
.btn_srh{width:
58px;
23px;
url（../images/btn_srh.gif）00no-repeat;
none;
cursor:
pointer;
text-indent:
-999em;
#search*{vertical-align:
middle;
inp_srh的宽度和高度并不是实际效果图中的宽高，是因为默认情况下文本框带有内边距造成的。
另外就是padding的值也会算到总宽度上的；
btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式为手形，text-indent:
-999em这个属性它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样就看不到文字，所以它的作用是将按钮上的文字隐藏。
导航分为一级导航和二级导航，所以我需要在nav下再插入nav_main和nav_son两个块元素。
先设置nav的高度及背景图片样式。
66px;
url（../images/nav_bg.gif）00repeat-x;
argin-bottom:
一级导航栏使用如下代码：
ULid=nav>
LI>
Aclass=nav_onid=mynav0onmouseover=javascript:
qiehuan（0）href="
/"
SPAN>
首页<
/SPAN>
/A>
/LI>
LIclass="
menu_line"
li>
ahref="
/psd/"
target="
_blank"
class="
nav_off"
mynav1"
onmouseover="
javascript:
qiehuan
（1）"
span>
企业新闻<
/span>
/a>
/li>
liclass="
/ai/"
mynav2"
qiehuan
（2）"
企业简介<
/ppt/Index.html"
mynav3"
qiehuan（3）"
产品展示<
/soft/Index.html"
mynav4"
qiehuan（4）"
企业历史<
/photo/Index.html"
mynav5"
qiehuan（5）"
招商加盟<
mynav6"
qiehuan（6）"
企业文化<
/sheji/Index.html"
mynav7"
qiehuan（7）"
网上下单<
/photoshop/Index.html"
mynav12"
qiehuan（12）"
联系我们<
/UL>
二级导航栏代码如下：
divid=menu_con>
divid=qh_con0style="
DISPLAY:
block"
UL>
<
/jiaocheng/Index.html"
交大理工<
LIclass=menu_line2>
Ahref="
/Article/Index.html"
电信分院<
/Website/Index.html"
10信管<
/png/Index.html"
何浔亚<
/Soft/bbsmoban/"
论坛模板<
divid=qh_con5style="
none"
/Photo/fengguang/"
腾讯<
/Photo/jieri/"
360<
/Photo/ktbz/"
微软<
/Photo/zhiwu/"
Adobe<
/Photo/dongwu/"
巨人<
/Photo/car/"
淘宝<
/Photo/shijue/"
京东<
/Photo/jiaju/"
苏宁<
/Photo/junshi/"
国美<
CSS代码如下：
#menuUL{BORDER-BOTTOM:
0px;
BORDER-LEFT:
PADDING-BOTTOM:
LINE-HEIGHT:
150%;
LIST-STYLE-TYPE:
none;
MARGIN:
0px0px0px15px;
PADDING-LEFT:
PADDING-RIGHT:
BORDER-TOP:
LIST-STYLE-IMAGE:
BORDER-RIGHT:
PADDING-TOP:
0px}
#menu_out{PADDING-LEFT:
4px;
WIDTH:
956px;
BACKGROUND:
url（../images/menu_left.gif）no-repeatlefttop;
MARGIN-LEFT:
auto;
MARGIN-RIGHT:
auto}
#menu_in{PADDING-RIGHT:
url（../images/menu_right.gif）no-repeatrighttop}
#menu{BACKGROUND:
url（../images/menu_bg.gif）repeat-x;
HEIGHT:
73px}
.menu_line{WIDTH:
8px;
url（../images/menu_line.gif）no-repeatcentertop}
.menu_line2{WIDTH:
15px;
url（../images/menu_line2.gif）no-repeatcentertop}
#nav{PADDING-LEFT:
20px}
#navLI{FLOAT:
left;
35px}
#navLIA{PADDING-LEFT:
6px;
DISPLAY:
block;
url（../images/menu_on_left.gif）no-repeatlefttop;
FLOAT:
35px;
CURSOR:
pointer;
TEXT-DECORATION:
none}
#navLIASPAN{PADDING-BOTTOM:
10px;
14px;
url（../images/menu_on_right.gif）no-repeatrighttop;
COLOR:
#ffffff;
FONT-SIZE:
FONT-WEIGHT:
bold;
11px}
#navLI.nav_on{BACKGROUND-POSITION:
left100%}
#navLI.nav_onSPAN{PADDING-BOTTOM:
7px;
BACKGROUND-POSITION:
right100%;
#333333;
14px}
#menu_con{TEXT-ALIGN:
20px;
CLEAR:
both}
#menu_conLI{MARGIN-TOP:
22px}
#menu_conLIA{PADDING-LEFT:
3px;
url（../images/menu_on_left2.gif）no-repeatlefttop;
pointer}
#menu_conLIASPAN{PADDING-BOTTOM:
12px;
url（../images/menu_on_right2.gif）no-repeatrighttop;
6px}
#menu_conLIA:
hover{BACKGROUND:
url（../images/menu_on_left2.gif）no-repeatleftbottom;
hoverSPAN{BACKGROUND:
url（../images/menu_on_right2.gif）no-repeatrightbottom}
做出的效果图如下3-3：
图3-3
通过使用图片，使得该二级导航栏具有动态效果，导航栏部分完成。
2、布局页面——侧边栏
主体部分先从侧边栏说起，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码
这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义。
定义侧边栏的样式如下3-4：
.side_box{margin-bottom:
.side_boxh2{height:
25px;
padding:
6px10px010px;
url（../images/side_bg.gif）00no-repeat;
font-size:
14px;
.side_boxh2strong{color:
#f30;
.side_con{padding:
10px;
background:
url
（../images/side_bg.gif）0bottomno-repeat;
图3-4
产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片。
divclass="
side_box"
h2>
strong>
产品<
/strong>
导购<
/h2>
side_conproduct"
ul>
语音业务：
#"
普通电话<
|<
语音数字中继<
product3"
/ul>
“产品导购”的样式定义如下（图3-5）：
图3-5
.product{padding:
0px10px;
.productul{background:
url（../images/icon2.gif）5px12pxno-repeat;
.productulli{height:
14px0064px;
border-bottom:
1pxdashed#dcdcdc;
#777;
.productullistrong{display:
block;
#333;
.productullia{color:
.productullia:
hover{text-decoration:
underline;
.productulli.product3{border-bottom:
“产品导购”完成后，下边该“使用问答”了。
“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。
所以这部分采用dl、dt、dd的形式来完成。
side_conask"
dl>
dt>
最新出的这个产品如何使用？
/dt>
dd>
该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...<
/dd>
/dl>
该产品采用全新的技术，较上一...<
该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...<
该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...<
该产品采用全
升级会员 