网页设计课程设计.docx

1、网页设计课程设计存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计和制作 题 目 网页设计和制作课程设计 分 院 电信分院 专业班级 学 号 学生姓名 指导教师 2013年 月 日目录第一章 课程设计内容及要求 31.1 课程设计的目的 31.2 课程设计的内容 3第二章 建立站点 4第三章 结构分析 5第四章 构建框架 6第五章 布局页面头部和导航 85.1 头部分析 85.2制作导航 95.3 主体部分 12第六章 课程设计总结与体会 14第七章 参考文献 14第一章 课程设计内容及要求1.1 课程设计的目的网页设计与制作课程设计是我院信息管理与信息系统

2、专业（本科）教学大纲要求的重要实践性环节之一，是学习完网页设计与制作课程后进行的一次全面的综合练习。其目的在于：配合网页设计与制作课程的教学，全面帮助学生加强对网站的认识；学会设计和制作网站，包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站和掌握实际网页设计与制作开发流程和开发方法。1.2 课程设计的内容利用DW软件编辑网页，以及运用Ps对给定网页进行切片，和材料收集。由于本次课程设计只需要设计一级页面，相对比较容易。本次课设必须要求包括标题和导航栏，充分运用表格布局及html和css，以及超链接。第二章 建立站点站点管理是对一个Internet的站点进行组织、维护和管理的

3、功能集合。为了实现多个不同站点、不同地域或不同部门站点的统一管理，在网页设计与制作中建立站点尤为重要。在D盘建立一个kshjb文件夹，在dreamweaver(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。1.点击“新建站点”就会显示下面的框图2-1和图2-2。图2-1 图2-22. 建立好站点后，首先先新建一个html文件，右键点击站点，新建文件，并命名为index.html。再新建一个文件夹，命名为images，里面放着所需的图片素材，再新建一个css的文件夹。如图2-3。如图2-3第三章 结构分析根据老师所给的网页进行结

4、构分析，从效果图3-1图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，整体框架结果图3-2所示。图3-1图3-2第四章 构建框架1.首先在dw里新建一个html文件，点击文件-新建-基本页的HTML，创建后会自动生成如下4-1的一个html文件，保存为index.html并把无标题文档改为主页。 图4-12.接下来需要插入以上各个块的标签了，这里就以插入header的标签为例，其它的插入方法类同。如图4-2。图4-23.按照上图的方法依次插入标签，或者直接在代码视图中手工输入。从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样

5、的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：此处显示 id header 的内容此处显示 id nav 的内容 此处显示 id main 的内容 此处显示 id side 的内容此处显示 id footer 的内容4. html框架代码写完后，下边就需要设置css样式表了。先测量下效果图的整体宽度，然后设置container也是这个宽度并居中。测量其中某一块的宽度，可以在ps下测量方法，首选项里把ps的单位改为像素，然后

6、用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了，如图4-3。图4-3第五章 布局页面头部和导航5.1 头部分析头部分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。 此处显示 id logo 的内容 此处显示 id search 的内容 1.先在header里插入以上两块元素。然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下： 搜索产品 2.接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜

7、索产品距顶部30px，下面在css里把这些参数都给定义上 #logo float:left; margin-top:18px; #search float:right; margin-top:30px; #header height:71px;5.2制作导航导航分为一级导航和二级导航，需要在nav下再插入nav_main和nav_son两个块元素。如图5-1图5-1 首页 企业新闻 企业简介 产品展厅 企业历史 招商加盟 网上下单联系我们 企业动态 领导活动 产品资讯 通知公告 1.先设置nav的高度及背景图片样式。 #nav height:66px; background:url(./ima

8、ges/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px; 搜索产品 首页 企业新闻 企业简介 产品展厅 企业历史 招商加盟 网上下单 联系我们 企业动态 领导活动 产品资讯 通知公告 此处显示 id main 的内容 此处显示 id side 的内容 此处显示 id footer 的内容2.主体部分涉及side和main两部分。如图5-2图5-2插入如下html代码 产品导购 此处显示 class side_con 的内容 产品导购 语音业务：普通电话 | 语音数字中继 语音业务：普通电话 | 语音数字中继 语音业务：普通电话 | 语音数字中继 5.3

9、主体部分1.主体部分可以分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。而热点新闻列表中的日期，是用一个span标签写在了内容的前边，然后把span向右浮动就实现了，“个人登录”和“商户登录”的实现方法也是用了同样的方式。如图5-3。图5-32.设计完成后界面如图5-4，图5-5所示。图5-4 图5-5第六章 课程设计总结与体会通过这次网页设计与制作的课程设计，我对网页设计有了更加深刻的认识。本次网页课程设计，使我觉得我学到了很多，因为以前上课的时候觉得无聊听不懂，所以这次课设上才深深地感到自己上机操作能力很不足。但从中还是学会了一些有用的东西，更加了解使用PS 和DW进行操作。总之，这次课程设计提高了我对网页制作的综合能力和实际操作能力。第七章 参考文献1 高林网页制作案例教程（第二版）M北京：人民邮电出版社，20092 吴代文网页设计基础与实训北京：清华大学出版社，2011 3 杨晓钟网页设计与开发北京：机械工业出版社，2005 4 赵祖荫电子商务网站建设教程第一版北京：清华大学出版社，2004年致 谢