网页设计课程设计Word格式.docx
《网页设计课程设计Word格式.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计Word格式.docx（13页珍藏版）》请在冰点文库上搜索。
第四章构建框架6
第五章布局页面——头部和导航8
5.1头部分析8
5.2制作导航9
5.3主体部分12
第六章课程设计总结与体会14
第七章参考文献14
第一章课程设计内容及要求
1.1课程设计的目的
《网页设计与制作》课程设计是我院信息管理与信息系统专业（本科）教学大纲要求的重要实践性环节之一，是学习完《网页设计与制作》课程后进行的一次全面的综合练习。
其目的在于：
配合《网页设计与制作》课程的教学，全面帮助学生加强对网站的认识；
学会设计和制作网站，包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站和掌握实际网页设计与制作开发流程和开发方法。
1.2课程设计的内容
利用DW软件编辑网页，以及运用Ps对给定网页进行切片，和材料收集。
由于本次课程设计只需要设计一级页面，相对比较容易。
本次课设必须要求包括标题和导航栏，充分运用表格布局及html和css，以及超链接。
第二章建立站点
站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。
为了实现多个不同站点、不同地域或不同部门站点的统一管理，在网页设计与制作中建立站点尤为重要。
在D盘建立一个kshjb文件夹，在dreamweaver（简称DW）里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
1.点击“新建站点”就会显示下面的框图2-1和图2-2。
图2-1图2-2
2.建立好站点后，首先先新建一个html文件，右键点击站点，新建文件，并命名为index.html。
再新建一个文件夹，命名为images，里面放着所需的图片素材，再新建一个css的文件夹。
如图2-3。
如图2-3
第三章结构分析
根据老师所给的网页进行结构分析，从效果图3-1图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，整体框架结果图3-2所示。
图3-1
图3-2
第四章构建框架
1.首先在dw里新建一个html文件，点击文件->
新建->
基本页的HTML，创建后会自动生成如下4-1的一个html文件，保存为index.html并把无标题文档改为主页。
图4-1
2.接下来需要插入以上各个块的标签了，这里就以插入header的标签为例，其它的插入方法类同。
如图4-2。
图4-2
3.按照上图的方法依次插入标签，或者直接在代码视图中手工输入。
从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。
增加后的代码如下：
<
divid="
container"
>
header"
此处显示id"
的内容<
/div>
nav"
maincontent"
<
main"
side"
footer"
4.html框架代码写完后，下边就需要设置css样式表了。
先测量下效果图的整体宽度，然后设置container也是这个宽度并居中。
测量其中某一块的宽度，可以在ps下测量方法，首选项里把ps的单位改为像素，然后用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了，如图4-3。
图4-3
第五章布局页面——头部和导航
5.1头部分析
头部分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
logo"
search"
1.先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：
imgsrc="
images/logo.gif"
width="
181"
height="
45"
/>
formid="
form1"
name="
method="
post"
action="
"
搜索产品
inputtype="
text"
textfield"
id="
submit"
button"
value="
查询"
/form>
2.接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上
#logo{float:
left;
margin-top:
18px;
}
#search{float:
right;
30px;
#header{height:
71px;
5.2制作导航
导航分为一级导航和二级导航，需要在nav下再插入nav_main和nav_son两个块元素。
如图5-1
图5-1
nav_l"
nav_r"
divclass="
nav_main"
ul>
li>
ahref="
#"
span>
首页<
/span>
/a>
/li>
nav_current"
企业新闻<
企业简介<
产品展厅<
企业历史<
招商加盟<
网上下单<
联系我们<
/ul>
nav_son"
企业动态<
领导活动<
产品资讯<
通知公告<
1.先设置nav的高度及背景图片样式。
#nav{height:
66px;
background:
url（../images/nav_bg.gif）00repeat-x;
margin-bottom:
8px;
inputclass="
inp_srh"
type="
btn_srh"
clearfloat"
/body>
/html>
2.主体部分涉及side和main两部分。
如图5-2
图5-2
插入如下html代码
side_box"
h2>
strong>
产品<
/strong>
导购<
/h2>
side_con"
此处显示class"
side_conproduct"
语音业务：
普通电话<
|<
语音数字中继<
liclass="
product3"
5.3主体部分
1.主体部分可以分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。
而热点新闻列表中的日期，是用一个span标签写在了内容的前边，然后把span向右浮动就实现了，“个人登录”和“商户登录”的实现方法也是用了同样的方式。
如图5-3。
图5-3
2.设计完成后界面如图5-4，图5-5所示。
图5-4
图5-5
第六章课程设计总结与体会
通过这次网页设计与制作的课程设计，我对网页设计有了更加深刻的认识。
本次网页课程设计，使我觉得我学到了很多，因为以前上课的时候觉得无聊听不懂，所以这次课设上才深深地感到自己上机操作能力很不足。
但从中还是学会了一些有用的东西，更加了解使用PS和DW进行操作。
总之，这次课程设计提高了我对网页制作的综合能力和实际操作能力。
第七章参考文献
[1]高林．网页制作案例教程（第二版）[M]．北京：
人民邮电出版社，2009
[2]吴代文．网页设计基础与实训．北京：
清华大学出版社，2011
[3]杨晓钟．网页设计与开发．北京：
机械工业出版社，2005
[4]赵祖荫．电子商务网站建设教程．第一版．北京：
清华大学出版社，2004年．
致谢
升级会员 