利用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页

第二章网页设计的思路

关于分享宫崎骏动漫里的经典语录这个网页的实现，首先在index.html页面显示相关信息，然后创立各种信息链接，整个页面布局要求清新，不宜复杂。

1.建立站点；

(1) 打开站点管理→新建→站点→输入名称“宫崎骏动漫里的经典语录” →下一步

(2)单击“下一步”

(3)选好存储位置→单击“下一步” (4)选好服务器文件夹→单击“下一步” (5)单击“下一步” (6)单击“完成”

2.结构分析；

主页整个页面分为三个结构头部，主体，底部。 头部，是所有的导航。

主体是由三个div来分隔的。分为左边为该动漫的作者和发布的时间；中间为这个动漫的经典语录；右边为内容的补充和这些动漫视频的链接。 底部，可以是版权说明。

3.搭建框架；

第 5 页 共 29页