利用DIV+CSS设计出一个网站首页 - 图文

存档资料 课 程 设 计 报 告 书

所属课程名称 网页设计与制作 题 目 利用DIV+CSS设计出一个《网站

首页》

分 院 电 信 分 院 专业班级 学 号 学生姓名 指导教师

2014年 12月 29日

第 1页 共 29 页

课程设计（论文）评阅意见

序号 1 2 3 4 5 6 7 8 项 目 课程设计态度评价 出勤情况评价 任务难度评价 工作量饱满评价 任务难度评价 设计中创新性评价 论文书写规范化评价 综合应用能力评价 等 级 优秀 良好 中等 及格 不及格 综合评定等级

评阅人 职称

20 年 月 日

第 2 页 共 29页

目 录

第一章 课程设计的内容与要求 ........................................................................................... 4 第二章 网页设计的思路 ....................................................................................................... 5

1.建立站点； .................................................................................................................. 5 4.切割效果图； .............................................................................................................. 6 4.1．头部导航栏 ............................................................................................................ 6 4.2．主体 ........................................................................................................................ 7 4.3．底部 ........................................................................................................................ 8 5.布局页面——头部和导航； ...................................................................................... 8 (1).视图： ....................................................................................................................... 8 (2).代码实现： ............................................................................................................... 9 6.布局页面——侧边栏； ............................................................................................ 10 6.1．该布局为右侧边栏 .............................................................................................. 10 (1).视图： ..................................................................................................................... 10 (2).代码实现: ................................................................................................................ 10 6.2：该布局为右侧边栏 .............................................................................................. 13 (1).视图： ..................................................................................................................... 13 (2).代码实现： ............................................................................................................. 13 7.布局页面——主体部分； ........................................................................................ 14 (1).视图 ......................................................................................................................... 14 (2).代码实现： ............................................................................................................. 14 8.底部和细节调整。 .................................................................................................... 17 (1)底部视图 .................................................................................................................. 17 (2).代码实现： ............................................................................................................. 18 第三章 程序代码与视图 ..................................................................................................... 19

1.程序代码： ................................................................................................................ 19 2. 对于整个页面实现的效果图为： .......................................................................... 25 第四章 课程设计心得 ......................................................................................................... 27 第五章 参考文献（资料） ................................................................................................. 29

第 3 页 共 29 页

第一章 课程设计的内容与要求

利用这个学期所学的关于网页设计的知识，自己设计一个有关于一个公司的网页。 要求有内容有： 1．建立站点； 2．结构分析； 3．搭建框架； 4．切割效果图；

5．布局页面——头部和导航； 6．布局页面——侧边栏； 7．布局页面——主体部分； 8．底部和细节调整。

第 4 页 共 29页