网页设计课程设计.docx
《网页设计课程设计.docx》由会员分享,可在线阅读,更多相关《网页设计课程设计.docx(13页珍藏版)》请在冰豆网上搜索。
网页设计课程设计
存档资料成绩:
华东交通大学理工学院
课程设计报告书
所属课程名称网页设计和制作
题目网页设计和制作课程设计
分院 电信分院
专业班级
学号
学生姓名
指导教师
2013年月日
目 录
第一章课程设计内容及要求3
1.1课程设计的目的3
1.2课程设计的内容3
第二章建立站点4
第三章结构分析5
第四章构建框架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都设置宽度并居中,这样做起来很麻烦,所以再在这些标签外增加一下父标签,设置这个父标签宽度并居中后,是不是所有的标签都居中了呢。
增加后的代码如下:
此处显示id"header"的内容