网页课程设计与报告.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：
源代码：
<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent">
<div id="main">此处显示 id "main" 的内容</div>
<div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div></div>

图2-3
2、创立CSS文件
创立一个外联的层叠样式表，将CSS代码写如下：
/*body*/
#container { width:900px; margin:0 auto;}
/*header*/
#header { height:70px; background:#CCFFCC; margin-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
用如下代码实现：
<div id="header">
<div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>
<div id="search">
<form id="form1" name="form1" method="post" action="">
搜索产品
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="查询" />
</form>
</div>
</div>

#search { float:right; height:24px; margin-top:30px; color:#444;}
.inp_srh { width:140px; height:17px; padding-left:20px; background:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}
.btn_srh { width:58px; height:23px; background:url(../images/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;}
一级导航栏使用如下代码：
<UL id=nav>
<LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI>
<LI class="menu_line"></LI><li><a href="/psd/" target="_blank" class="nav_off" id="mynav1" onmouseover="javascript:qiehuan(1)"><span>企业新闻</span></a></li>
<li class="menu_line"></li><li><a href="/ai/" target="_blank" class="nav_off" id="mynav2" onmouseover="javascript:qiehuan(2)"><span>企业简介</span></a></li>
<li class="menu_line"></li><li><a href="/ppt/Index.html" target="_blank" class="nav_off" id="mynav3" onmouseover="javascript:qiehuan(3)"><span>产品展示</span></a></li>
<li class="menu_line"></li><li><a href="/soft/Index.html" target="_blank" class="nav_off" id="mynav4" onmouseover="javascript:qiehuan(4)"><span>企业历史</span></a></li>
<li class="menu_line"></li><li><a href="/photo/Index.html" target="_blank" class="nav_off" id="mynav5" onmouseover="javascript:qiehuan(5)"><span>招商加盟</span></a></li>
<li class="menu_line"></li><li><a href="" target="_blank" class="nav_off" id="mynav6" onmouseover="javascript:qiehuan(6)"><span>企业文化</span></a></li>
<li class="menu_line"></li><li><a href="/sheji/Index.html" target="_blank" class="nav_off" id="mynav7" onmouseover="javascript:qiehuan(7)"><span>网上下单</span></a></li>
<li class="menu_line"></li><li><a href="/photoshop/Index.html" target="_blank" class="nav_off" id="mynav12" onmouseover="javascript:qiehuan(12)"><span>联系我们</span></a></li>
</UL>
二级导航栏代码如下：
<div id=menu_con><div id=qh_con0 style="DISPLAY: block"><UL>
<LI><a href="/jiaocheng/Index.html"><span>交大理工</span></A></LI><LI class=menu_line2></LI>
<LI><A href="/Article/Index.html"><SPAN>电信分院</SPAN></A></LI><LI class=menu_line2></LI>
<LI><A href="/Website/Index.html"><SPAN>10信管</SPAN></A></LI><LI class=menu_line2></LI>
<LI><A href="/png/Index.html"><SPAN>何浔亚</SPAN></A></LI>
</UL></div>
<LI><A href="/Soft/bbsmoban/"><SPAN>论坛模板</SPAN></A></LI>
</UL></div>
<div id=qh_con5 style="DISPLAY: none"><UL>
<LI><a href="/Photo/fengguang/"><span>腾讯</span></A></LI><LI class=menu_line2></LI>
<LI><A href="/Photo/jieri/"><SPAN>360</SPAN></A></LI><LI class=menu_line2></LI>
<LI><a href="/Photo/ktbz/"><span>微软</span></A></LI><LI class=menu_line2></LI>
<LI><A href="/Photo/zhiwu/"><SPAN>Adobe</SPAN></A></LI><LI class=menu_line2></LI>
<LI><a href="/Photo/dongwu/"><span>巨人</span></A></LI><LI class=menu_line2></LI>
<LI><A href="/Photo/car/"><SPAN>淘宝</SPAN></A></LI><LI class=menu_line2></LI>
<LI><a href="/Photo/shijue/"><span>京东</span></A></LI><LI class=menu_line2></LI>
<LI><A href="/Photo/jiaju/"><SPAN>苏宁</SPAN></A></LI><LI class=menu_line2></LI>
<LI><A href="/Photo/junshi/"><SPAN>国美</SPAN></A></LI>
</UL></div>

CSS代码如下：
#menu UL { BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 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 { MARGIN-TOP: 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上设置背景图片。
<div class="side_box">
<h2><strong>产品</strong>导购</h2>
<div class="side_con product">
<ul>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
<li class="product3"><strong>语音业务：</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>
</ul>
</div>

“产品导购”的样式定义如下（图3-5）：

图3-5
.product { padding:0px 10px;}
.product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;}
.product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#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的形式来完成。

<div class="side_con ask">
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...</dd>
</dl>
<dl>
<dt><a href="#">最新出的这个产品如何使用？</a></dt>
<dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd>
</dl>
</div>
CSS代码如下：
.ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}
.ask dl dt { 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;}

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

<div class="side_box">
<h2><strong>联系</strong>我们</h2>
<div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>
</div>
3、页面布局——主体部分
主体部分能够分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。顶部实际上还是个左右两列布局。
<div id="index_pic">
<h2><span></span></h2>
<ul>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
<li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>
</ul>
</div>
CSS代码如下：
#index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}
#index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;}
#index_pic h2 span { display: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：
<script language='javascript' type="text/javascript">
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
图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.length;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('<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"><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+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="" />'); document.write('</object>');
</script>
然后设计幻灯片右边的新闻标题，设计代码如下（图3-7）：
<div id="news_top">
<h1>苹果iphone 4手机将于9月25日在中国上市</h1>
<p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p>
</div>
<div id="news_list">
<ul>
<li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>
<li><span>9-22</span><a href="#">HTML元素的ID和Name
图3-7 属性的区别</a></li>
<li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
<li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
<li><span>9-22</span><a href="#">javascript为FF设置首页</a></li>
<li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
</ul>
</div>
</div>
页面主体部全就此做完。
4、页面布局——脚部的设计
脚部的设计很简单代码如下：
<div id="he_footer">
<dl>
<dt><a href="#">关于我们</a>　||　<a href="#">产品目录</a>　||　<a href="#">联系我们</a>　||　<a href="#">友情链接</a>　||　<a href="#">反馈问题</a>　||　<a href="#">广告合作</a></dt>
<dd>Copyright &copy; - All Rights Reserved<br />
XX企业 版权所有 京ICP备10007159号</dd>
</dl>
</div>