利用DIV+CSS设计出一个《网站首页讲解.docVIP

存档资料 课 程 设 计 报 告 书 所属课程名称 网页设计与制作 题 目 　利用DIV+CSS设计出一个《网站首页》　　　　　　　 　　　 分 院 　　电 信 分 院 　　 　 专业班级 学　　号 　　　　 　　 　 学生姓名 　　　　 　　　 指导教师 　　　 2014年 12月 29日  序号 项 目 等　　　级 优秀 良好 中等 及格 不及格 1 课程设计态度评价 2 出勤情况评价 3 任务难度评价 4 工作量饱满评价 5 任务难度评价 6 设计中创新性评价 7 论文书写规范化评价 8 综合应用能力评价 综合评定等级 课程设计（论文）评阅意见 评阅人 　 职称 20 年月日 第一章 课程设计的内容与要求 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  课程设计的内容与要求 利用这个学期所学的关于网页设计的知识，自己设计一个有关于一个公司的网页。 要求有内容有： 建立站点； 结构分析； 搭建框架； 切割效果图； 布局页面——头部和导航； 布局页面——侧边栏； 布局页面——主体部分； 底部和细节调整。 网页设计的思路 关于分享宫崎骏动漫里的经典语录这个网页的实现，首先在index.html页面显示相关信息，然后创立各种信息链接，整个页面布局要求清新，不宜复杂。 1.建立站点； (1) 打开站点管理→新建→站点→输入名称“宫崎骏动漫里的经典语录” →下一步 (2)单击“下一步” (3)选好存储位置→单击“下一步” (4)选好服务器文件夹→单击“下一步” (5)单击“下一步” (6)单击“完成” 2.结构分析； 主页整个页面分为三个结构头部，主体，底部。 头部，是所有的导航。 主体是由三个div来分隔的。分为左边为该动漫的作者和发布的时间；中间为这个动漫的经典语录；右边为内容的补充和这些动漫视频的链接。 底部，可以是版权说明。 3.搭建框架； 4.切割效果图； 4.1．头部导航栏 . 4.2．主体 4.3．底部 5.布局页面——头部和导航； (1).视图： (2).代码实现： div id=templatemo_wrapper_outer div id=templatemo_wrapper div id=templatemo_header div id=site_title h1a href=#动漫语录spanBY宫崎骏/span/a/h1 /div !-- end of site_title -- div id=templatemo_menu ul lia href=index.html class=current经典语录/a/li lia href=#宫崎骏/a/li lia href=#留言/a/li lia href=#其他/a/li /ul /div !-- end of templatemo_menu -- /div !-- end of header -- 6.布局页面——侧边栏； 6.1．该布局为右侧边栏 (1).视图： (2).代码实现: div id=sidebar