网页课程设计与报告.doc

网页课程设计与报告

34
2020年4月19日
文档仅供参考，不当之处，请联系改正。
存档资料 成绩：　

华东交通大学理工学院
课 程 设 计 报 告 书

所属课程名称 网页设计与制作课程设计
题 目 　　 网站首页　　　　　　　 　　　

分 院 　　电 信 分 院 　　 　
专业班级 信息管理与信息系统1班
学　　号 02104501XX 　 　　　　 　　 　
学生姓名 何XX　 　　　　 　　　
指导教师 程志平 　　　

12月 24日
目　录
第一章 绪论 1
1、网站设计的目 1
2、网站的主题 1
3、网站规划 1
第二章 网页整体设计 2
1、创立HTML 2
2、创立CSS文件 3
第三章 网页详细设计 4
1、头部的和导航栏设计 4
2、布局页面——侧边栏 7
3、页面布局——主体部分 9
4、页面布局——脚部的设计 11
第四章 课程设计心得 12
1、充分发挥动手能力 12
2、在设计过程中不断提高网页设计水平 12
3、不足之处 12
第五章 参考文献 13

第一章 绪论

1、网站设计的目
本学期经过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。 经过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。
2、网站的主题
主题：某企业网站首页
3、网站规划
我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设

第二章 网页整体设计
1、创立HTML
首先打开DW软件建立一个站点，我取名为homework，如下图2-1

图2-1
站点建好后，还需要在产点里创立一些文件夹，用于存放东西。将CSS放在CSS文件夹里，图片放在images里，js存放java脚本。如图2-2

图2-2

然后利用所学的知识，开始进行大致的页面布局。布局的方式使用CSS+DIV进行如下图2-3：
源代码：
d="main">此处显示 id "main" 的内容n-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}
/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}
/*footer*/
#footer { height:70px; background:#CCFFCC;}

第三章 网页详细设计
1、头部的和导航栏设计
头部：分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是能够的，不论采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。
产品搜索
图3-1 图3-2
用如下代码实现：
"查询" />
btn_srh.gif) 0 0 no-repeat; border: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的高度及背景图片样式。
#nav { height:66px; background:url(../images/nav_bg.gif) 0 0 repeat-x; argin-bottom:8px;}
一级导航栏使用如下代码：
"/">首 页"mynav4" onmouseover="javascript:qiehuan(4)">企业历史lass="nav_off" id="mynav6" onmouseover="javascript:qiehuan(6)">企业文化I>
/SPAN>class=menu_line2> 150%; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 0px 15px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; LIST-STYLE-IMAGE: none; BORDER-RIGHT: 0px; PADDING-TOP: 0px}
#menu_out { PADDING-LEFT: 4px; WIDTH: 956px; BACKGROUND: url(../images/menu_left.gif) no-repeat left top; MARGIN-LEFT: auto; MARGIN-RIGHT: auto}
#menu_in { PADDING-RIGHT: 4px; BACKGROUND: url(../images/menu_right.gif) no-repeat right top}
#menu { BACKGROUND: url(../images/menu_bg.gif) repeat-x; HEIGHT: 73px}
.menu_line { WIDTH: 8px; BACKGROUND: url(../images/menu_line.gif) no-repeat center top}
.menu_line2 { WIDTH: 15px; BACKGROUND: url(../images/menu_line2.gif) no-repeat center top}
#nav { PADDING-LEFT: 20px}
#nav LI { FLOAT: left; HEIGHT: 35px}
#nav LI A { PADDING-LEFT: 6px; DISPLAY: block; BACKGROUND: url(../images/menu_on_left.gif) no-repeat left top; FLOAT: left; HEIGHT: 35px; CURSOR: pointer; TEXT-DECORATION: none}
#nav LI A SPAN { PADDING-BOTTOM: 10px; LINE-HEIGHT: 14px; PADDING-LEFT: 10px; PADDING-RIGHT: 14px; BACKGROUND: url(../images/menu_on_right.gif) no-repeat right top; FLOAT: left; COLOR: #ffffff; FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 11px}
#nav LI .nav_on { BACKGROUND-POSITION: left 100%}
#nav LI .nav_on SPAN { PADDING-BOTTOM: 7px; PADDING-LEFT: 10px; PADDING-RIGHT: 14px; BACKGROUND-POSITION: right 100%; COLOR: #333333; TEXT-DECORATION: none; PADDING-TOP: 14px}
#menu_con { TEXT-ALIGN: left; PADDING-LEFT: 20px; CLEAR: both}
#menu_con LI { MARGINTOP: 8px; FLOAT: left; HEIGHT: 22px}
#menu_con LI A { PADDING-LEFT: 3px; DISPLAY: block; BACKGROUND: url(../images/menu_on_left2.gif) no-repeat left top; FLOAT: left; CURSOR: pointer}
#menu_con LI A SPAN { PADDING-BOTTOM: 4px; LINE-HEIGHT: 12px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND url(../images/menu_on_right2.gif) no-repeat right top; FLOAT: left; PADDING-TOP: 6px}
#menu_con LI A:hover { BACKGROUND: url(../images/menu_on_left2.gif) no-repeat left bottom; TEXT-DECORATION: none}
#menu_con LI A:hover SPAN { BACKGROUND: url(../images/menu_on_right2.gif) no-repeat right bottom}
做出的效果图如下3-3：

图3-3
经过使用图片，使得该二级导航栏具有动态效果，导航栏部分完成。

2、布局页面——侧边栏
主体部分先从侧边栏说起，侧边栏能够共用一个样式，下面就先做一个通用的，插入如下html代码

这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样能够省去很多没必要的定义。定义侧边栏的样式如下3-4：

#side { float:right; width:228px;}
.side_box { margin-bottom:8px;}
.side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}
.side_box h2 strong { color:#f30;}
.side_con { padding:10px;background:url
(../images/side_bg.gif) 0 bottom no-repeat;}
图3-4

产品导购部分，内容分为三部分，能够用ul、li列表的形式实现，前边的图标用背景图片来实现，能够在li上设置背景图片。
ong>普通电话 | 语音数字中继777;}
.product ul li strong { display:block; height:24px; color:#333;}
.product ul li a { color:#777;}

.product ul li a:hover { text-decoration:underline;}
.product ul li.product3 { border-bottom:none;}

“产品导购”完成后，下边该“使用问答”了。“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。因此这部分采用dl、dt、dd的形式来完成。

>
{ height:22px; overflow:hidden; font-weight:bold; background:url(../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}
.ask dl dt a { color:#666;}
.ask dl dd { color:#666; background:url(../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}

“使用问答”完成后，侧边栏就剩下“联系我们”了，直接插入图片，然后调整一下位置。

产品名称lay:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;}
#index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}
#index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}
#index_pic ul li a { display:block;}
#index_pic ul li img { margin-bottom:3px;}
然后还要做幻灯片，制作幻灯片还需要使用JAVA脚本，还有幻灯片下面的两个DIV，商户登录，个人登录如图3-6：

linkarr = new Array();
picarr = new Array();
textarr = new Array();
var swf_width=269;
var swf_height=210;
var files =
"images/pic.jpg|images/pic1.jpg
</p><p style='height:0px;padding:0;overflow:hidden'>43、图3-6 |images/pic2.jpg|images/pic3.jpg";
var links = "#|#|#|#";
var texts = "";
for(i=1;i<picarr.length;i++){
if(files=="") files = picarr[i];
else files += "|"+picarr[i];
}
for(i=1;i<linkarr.leng</p><p style='height:0px;padding:0;overflow:hidden'>44、th;i++){
if(links=="") links = linkarr[i];
else links += "|"+linkarr[i];
}
for(i=1;i<textarr.length;i++){
if(texts=="") texts = textarr[i];
else texts += "|"+textarr[i];
}
document.write('</p><p style='height:0px;padding:0;overflow:hidden'>45、<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-" codebase=",0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
document.write('<param name="movie" value="images/indexpic.swf"><param name="quality" value="high">');
document.write('<param name="menu" value="false"><</p><p style='height:0px;padding:0;overflow:hidden'>46、param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
document.write('<embed src="images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&</p><p style='height:0px;padding:0;overflow:hidden'>47、bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="" />'); document.write('</object>');

然后设计幻灯片右边的新闻标题，设计代码如下（图3-7）：
日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。容ie6,ie7,ie8以及firefox的css透明滤镜