利用DIV+CSS设计出一个《网站首页

1、存档资料 课 程 设 计 报 告 书所属课程名称 网页设计与制作 题 目 利用DIV+CSS设计出一个网站首页 分 院 电 信 分 院 专业班级 学号 学生姓名 指导教师 2014年 12月 29日 第 0页 共 30 页序号项 目等级优秀良好中等及格不及格1课程设计态度评价2出勤情况评价3任务难度评价4工作量饱满评价5任务难度评价6设计中创新性评价7论文书写规范化评价8综合应用能力评价综合评定等级课程设计（论文）评阅意见评阅人 职称 20 年 月 日目录第一章 课程设计的内容与要求4第二章 网页设计的思路51.建立站点；54.切割效果图；64.1头部导航栏64.2主体74.3底部85.布局页

2、面头部和导航；8(1).视图：8(2).代码实现：96.布局页面侧边栏；106.1该布局为右侧边栏10(1).视图：10(2).代码实现:106.2：该布局为右侧边栏13(1).视图：13(2).代码实现：137.布局页面主体部分；14(1).视图14(2).代码实现：148.底部和细节调整。17(1)底部视图17(2).代码实现：18第三章 程序代码与视图191.程序代码：192. 对于整个页面实现的效果图为：25第四章 课程设计心得27第五章 参考文献（资料）29第 28 页 共 30 页第一章 课程设计的内容与要求利用这个学期所学的关于网页设计的知识，自己设计一个有关于一个公司的网页。要

3、求有内容有： 1 建立站点； 2 结构分析； 3 搭建框架； 4 切割效果图； 5 布局页面头部和导航； 6 布局页面侧边栏； 7 布局页面主体部分； 8 底部和细节调整。第二章 网页设计的思路关于分享宫崎骏动漫里的经典语录这个网页的实现，首先在index.html页面显示相关信息，然后创立各种信息链接，整个页面布局要求清新，不宜复杂。1.建立站点；(1) 打开站点管理新建站点输入名称“宫崎骏动漫里的经典语录” 下一步 (2)单击“下一步” (3)选好存储位置单击“下一步” (4)选好服务器文件夹单击“下一步” (5)单击“下一步” (6)单击“完成”2.结构分析；主页整个页面分为三个结构头部

4、，主体，底部。头部，是所有的导航。主体是由三个div来分隔的。分为左边为该动漫的作者和发布的时间；中间为这个动漫的经典语录；右边为内容的补充和这些动漫视频的链接。底部，可以是版权说明。3.搭建框架；留言经典语录宫崎骏头部 ：包括网页的title和导航栏经典语录作者时间主要内容：各个动漫的经典语句其他内容链接底部：版权或其他其他4.切割效果图；4.1头部导航栏.4.2主体4.3底部5.布局页面头部和导航；(1).视图：(2).代码实现：<div id="templatemo_wrapper_outer"><div id="templatemo_wr

5、apper"><div id="templatemo_header"><div id="site_title"> <h1><a href="#">动漫语录<span>BY宫崎骏</span></a></h1> </div> <!- end of site_title -> <div id="templatemo_menu"> <ul> <li>&

6、lt;a href="index.html" class="current">经典语录</a></li> <li><a href="#">宫崎骏</a></li> <li><a href="#">留言</a></li> <li><a href="#">其他</a></li> </ul> </div>

7、<!- end of templatemo_menu -></div> <!- end of header ->6.布局页面侧边栏；6.1该布局为右侧边栏(1).视图：(2).代码实现:<div id="sidebar"> <div class="rss"> <a href="#">首语</a> </div> <div class="sidebar_box"> <h3>那些让我们心有所感的那些动漫

8、语录</h3><h4><strong>目的</h4> <p>&nbsp&nbsp这个网页是整理起来让更多人知道宫崎骏的漫画，那么多触动心弦的语句，希望有更多的人喜欢、<div class="btn_more"><a href="#">Read more </a></div></strong></p> </div> <div class="sidebar_box">

9、<h3>动漫视频</h3> <p>那些触动心弦的台词，那些感动灵魂的画面，那些照亮前行方向哲理，那些陪伴我们成长的童话,让我们一起重温那些青葱岁月里，宫崎骏给我们带来的温暖细腻的小美好</p> <ul class="tmo_list"> <li><a href="#">风之谷</a></li> <li><a href="#">天空之城</a></li> <li><

10、a href="#">龙猫</a></li> <li><a href="#">魔女宅急便</a></li> <li><a href="#">幽灵公主</a></li> <li><a href="#">千与千寻</a></li> <li><a href="#">哈尔的移动城堡</a><

11、/li> <li><a href="#">悬崖上的金鱼姬</a></li> <li><a href="#">起风了</a></li> </ul> </div> <div class="sidebar_box"> <h3>更多精彩</h3> <ul class="recent_comment"> <li><a href=&quo

12、t;#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </div> <div class="sidebar_box"

13、;> <h3>宫崎骏</h3><h4>人物小传</h4> <p> &nbsp&nbsp&nbsp&nbsp宫崎小时候就擅长绘画，非常喜欢手塚治虫和浦茂的漫画作品。高中三年级时，他看了东映的动画电影白蛇传大为感动，由此对动画产生了兴趣。在学习院大学政治经济学院学习期间，他一直向各类漫画杂志投稿但终未被采用。大学毕业后，宫崎进入了东映动画公司。进入东映动画的宫崎骏当时尚未放弃当一名漫画家的志向，然而在看过前苏联的动画电影雪之女王后，便决心投身动画事业。宫崎辗转于多个动画制作组，参与了诸多作品的制作，他

14、参加过原画、美术设定、画面设定、分镜等各种工作。未来少年柯南是宫崎的电视长篇动画代表作。<br /><a href="#">Read more</a></p> </div> </div> <!- end of sidebar ->6.2：该布局为右侧边栏(1).视图：(2).代码实现：<div class="post_meta"> <p>Author<span><a href="#" target="

15、_parent">宫崎骏</a></span></p> <p>Date<span>1989年</span></p> </div>7.布局页面主体部分；(1).视图(2).代码实现：<div id="templatemo_main_wrapper"> <div id="templatemo_main"> <div id="content"> <div class="post&

16、quot;> <div class="post_meta"> <p>Author<span> <a href="#" target="_parent">宫崎骏</a></span></p> <p>Date<span>1989年</span></p> </div> <div class="post_content"> <h2><a href

17、="#">&lt&lt魔女宅急便&gt&gt</a></h2> <a href="#"><img src="images/monv.jpg" alt="image" /></a> <p>即使在粉碎的镜片中，仍然能映出新的景色，晨色初照下的宁静窗台，还有化为虚无的身体。 在最好的时光，做想做的事，去想去的地方。成长是必需要舍弃一些东西的，就像长大的我们不再天真烂漫，不再无忧无虑，不再有无边无际的幻想，不再有亲

18、密无间的玩伴。-&lt&lt魔女宅急便&gt&gt</p> <p>有些心事只能自言自语，有些秘密只能讲给朋友。有些痛苦只能默默承受，自己还是要靠自己拯救。真正的痛苦，没有人能与你分担，你只能把它从一个肩头，换到你的另一个肩头-&lt&lt魔女宅急便&gt&gt</p> <p>这个世界有些事情真的是无法改变的，我们唯一能做的，只是在自己与世界之间找到一个平衡点-&lt&lt魔女宅急便&gt&gt</p> <p>长久坚持一条路，途中

19、总会有艳阳或云雨，比起走近路的人你能看到更多不一样的景色。绕远路的人最后一定内心意志坚强，远路的尽头有那么一个优秀的自己在等待 -&lt&lt魔女宅急便&gt&gt</p> <div class="btn_more"><a href="#">Read more</a></div> </div> <div class="cleaner"></div> </div> <!- end of a p

20、ost -><div class="post"><div class="post_meta"> <p>Author<span><a href="#" target="_parent">宫崎骏</a></span></p> <p>Date<span>2004年</span></p> </div> <div class="post_conten

21、t"> <h2><a href="#">&lt&lt哈尔的移动城堡&gt&gt</a></h2> <a href="#"><img src="images/haer.jpg" alt="image" /></a> <p>人生中遇到的磨难很多，我们愈是成熟，也愈是胆小，反倒在绝境中才激发出内存的潜质，从而变的坚强和勇敢。 -&lt&lt哈尔的移动城堡&

22、gt&gt</p> <p>爱，不是寻找一个完美的人，而是学会用完美的眼光，欣赏那个并不完美的人-&lt&lt哈尔的移 动城堡&gt&gt</p> <p>就是因为你不好，才要留在你身边，给你幸福。-&lt&lt哈尔的移动城堡&gt&gt </p> <p> 因为爱你，只要你一个肯定，我就足够勇敢。-&lt&lt哈尔的移动城堡&gt&gt </p><div class="btn_more"

23、><a href="#">Read more</a></div> </div> <div class="cleaner"></div> </div> <!- end of a post -> <div class="post"> <div class="post_meta"> <p>Author<span><a href="#" target

24、="_parent">宫崎骏</a></span></p> <p>Date<span>1988</span></p> </div> <div class="post_content"> <h2><strong><a href="#">&lt&lt龙猫&gt&gt</a></strong></h2> <a href=

25、"#"><img src="images/lm2.jpg" alt="image" /></a><p align="justify">什么时候我们开始无法像孩子一样肆意地大呼小叫了？心里的小情绪堆积得像山一样高，直到溢出来。与其如此，不如永远像孩子一样。-&lt&lt龙猫&gt&gt </p> <p>生活坏到一定程度就会好起来，因为它无法更坏。努力过后，才知道许多事情，坚持坚持，就过来了。-&lt&lt

26、龙猫&gt&gt</p> <p>有些烦恼，丢掉了，才有云淡风轻的机会-&lt&lt龙猫&gt&gt</p> <p>人生在世，委屈、烦难、辛酸，都是难免，重要的是，你得翻过去，翻过它，就会看见蓝天白云。-&lt&lt龙猫&gt&gt</p><div class="btn_more"><a href="#">Read more</a></div> </div>

27、<div class="cleaner"></div> </div> <div class="cleaner"></div> </div> <!- end of content ->8.底部和细节调整。(1)底部视图(2).代码实现：<div id="templatemo_footer"> <h3><a href="#">更多动漫语录</a></h3> <div cl

28、ass="cleaner"></div></div>第三章 程序代码与视图1.程序代码：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equi

29、v="Content-Type" content="text/html; charset=utf-8" /><title>宫崎骏动漫里的经典语录</title><meta name="keywords" content="floral beige, free css template, website layout, blog theme, CSS, HTML" /><meta name="description" content="Fl

30、oral Beige - free CSS template provided by " /><link href="css/templatemo_style.css" rel="stylesheet" type="text/css" /></head><body><div id="templatemo_wrapper_outer"><div id="templatemo_wrapper"> <div id=&qu

31、ot;templatemo_header"> <div id="site_title"> <h1><a href="#">动漫语录<span>BY宫崎骏</span></a></h1> </div> <!- end of site_title -> <div id="templatemo_menu"> <ul> <li><a href="index.html&q

32、uot; class="current">经典语录</a></li> <li><a href="#">宫崎骏</a></li> <li><a href="#">留言</a></li> <li><a href="#">其他</a></li> </ul> </div> <!- end of templatemo_men

33、u -></div> <!- end of header -> <div id="templatemo_main_wrapper"> <div id="templatemo_main"> <div id="content"> <div class="post"> <div class="post_meta"> <p>Author<span><a href="#&quo

34、t; target="_parent">宫崎骏</a></span></p> <p>Date<span>1989年</span></p> </div> <div class="post_content"> <h2><a href="#">&lt&lt魔女宅急便&gt&gt</a></h2> <a href="#">

35、;<img src="images/monv.jpg" alt="image" /></a> <p>即使在粉碎的镜片中，仍然能映出新的景色，晨色初照下的宁静窗台，还有化为虚无的身体。 在最好的时光，做想做的事，去想去的地方。成长是必需要舍弃一些东西的，就像长大的我们不再天真烂漫，不再无忧无虑，不再有无边无际的幻想，不再有亲密无间的玩伴。-&lt&lt魔女宅急便&gt&gt</p> <p>有些心事只能自言自语，有些秘密只能讲给朋友。有些痛苦只能默默承受，自己还是要靠

36、自己拯救。真正的痛苦，没有人能与你分担，你只能把它从一个肩头，换到你的另一个肩头-&lt&lt魔女宅急便&gt&gt</p> <p>这个世界有些事情真的是无法改变的，我们唯一能做的，只是在自己与世界之间找到一个平衡点-&lt&lt魔女宅急便&gt&gt</p> <p>长久坚持一条路，途中总会有艳阳或云雨，比起走近路的人你能看到更多不一样的景色。绕远路的人最后一定内心意志坚强，远路的尽头有那么一个优秀的自己在等待 -&lt&lt魔女宅急便&gt&gt&l

37、t;/p> <div class="btn_more"><a href="#">Read more</a></div> </div> <div class="cleaner"></div> </div> <!- end of a post -> <div class="post"> <div class="post_meta"> <p>Author

38、<span><a href="#" target="_parent">宫崎骏</a></span></p> <p>Date<span>2004年</span></p> </div> <div class="post_content"> <h2><a href="#">&lt&lt哈尔的移动城堡&gt&gt</a><

39、;/h2> <a href="#"><img src="images/haer.jpg" alt="image" /></a> <p>人生中遇到的磨难很多，我们愈是成熟，也愈是胆小，反倒在绝境中才激发出内存的潜质，从而变的坚强和勇敢。 -&lt&lt哈尔的移动城堡&gt&gt</p> <p>爱，不是寻找一个完美的人，而是学会用完美的眼光，欣赏那个并不完美的人-&lt&lt哈尔的移 动城堡&gt&

40、gt</p> <p>就是因为你不好，才要留在你身边，给你幸福。-&lt&lt哈尔的移动城堡&gt&gt </p> <p> 因为爱你，只要你一个肯定，我就足够勇敢。-&lt&lt哈尔的移动城堡&gt&gt </p> <div class="btn_more"><a href="#">Read more</a></div> </div> <div class="

41、cleaner"></div> </div> <!- end of a post -> <div class="post"> <div class="post_meta"> <p>Author<span><a href="#" target="_parent">宫崎骏</a></span></p> <p>Date<span>1988</sp

42、an></p> </div> <div class="post_content"> <h2><strong><a href="#">&lt&lt龙猫&gt&gt</a></strong></h2> <a href="#"><img src="images/lm2.jpg" alt="image" /></a> <

43、;p align="justify">什么时候我们开始无法像孩子一样肆意地大呼小叫了？心里的小情绪堆积得像山一样高，直到溢出来。与其如此，不如永远像孩子一样。-&lt&lt龙猫&gt&gt </p> <p>生活坏到一定程度就会好起来，因为它无法更坏。努力过后，才知道许多事情，坚持坚持，就过来了。-&lt&lt龙猫&gt&gt</p> <p>有些烦恼，丢掉了，才有云淡风轻的机会-&lt&lt龙猫&gt&gt</p>

44、<p>人生在世，委屈、烦难、辛酸，都是难免，重要的是，你得翻过去，翻过它，就会看见蓝天白云。-&lt&lt龙猫&gt&gt</p> <div class="btn_more"><a href="#">Read more</a></div> </div> <div class="cleaner"></div> </div> <div class="cleaner"

45、;></div> </div> <!- end of content -> <div id="sidebar"> <div class="rss"> <a href="#">首语</a> </div> <div class="sidebar_box"> <h3>那些让我们心有所感的那些动漫语录</h3><h4><strong>目的</h4> &

46、lt;p>&nbsp&nbsp这个网页是整理起来让更多人知道宫崎骏的漫画，那么多触动心弦的语句，希望有更多的人喜欢、<div class="btn_more"><a href="#">Read more </a></div></strong></p> </div> <div class="sidebar_box"> <h3>动漫视频</h3> <p>那些触动心弦的台词，那些感动灵魂的

47、画面，那些照亮前行方向哲理，那些陪伴我们成长的童话,让我们一起重温那些青葱岁月里，宫崎骏给我们带来的温暖细腻的小美好</p> <ul class="tmo_list"> <li><a href="#">风之谷</a></li> <li><a href="#">天空之城</a></li> <li><a href="#">龙猫</a></li> <

48、li><a href="#">魔女宅急便</a></li> <li><a href="#">幽灵公主</a></li> <li><a href="#">千与千寻</a></li> <li><a href="#">哈尔的移动城堡</a></li> <li><a href="#">悬崖上的金鱼

49、姬</a></li> <li><a href="#">起风了</a></li> </ul> </div> <div class="sidebar_box"> <h3>更多精彩</h3> <ul class="recent_comment"> <li><a href="#">link 1</a></li> <li>&

50、lt;a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </div> <div class="sidebar_box"> <h3>宫崎骏</h3><h4>人物小传</h4> <p> &nbsp&nbsp&nbsp&nbsp宫崎小时候就擅长绘画，非常喜欢手塚治虫和浦茂的漫画作品。高中三年级时，他看了