利用DIV+CSS設(shè)計(jì)出一個《網(wǎng)站首頁

1、存檔資料 課 程 設(shè) 計(jì) 報(bào) 告 書所屬課程名稱 網(wǎng)頁設(shè)計(jì)與制作 題 目 利用DIV+CSS設(shè)計(jì)出一個網(wǎng)站首頁 分 院 電 信 分 院 專業(yè)班級 學(xué)號 學(xué)生姓名 指導(dǎo)教師 2014年 12月 29日 第 0頁 共 30 頁序號項(xiàng) 目等級優(yōu)秀良好中等及格不及格1課程設(shè)計(jì)態(tài)度評價(jià)2出勤情況評價(jià)3任務(wù)難度評價(jià)4工作量飽滿評價(jià)5任務(wù)難度評價(jià)6設(shè)計(jì)中創(chuàng)新性評價(jià)7論文書寫規(guī)范化評價(jià)8綜合應(yīng)用能力評價(jià)綜合評定等級課程設(shè)計(jì)（論文）評閱意見評閱人 職稱 20 年 月 日目錄第一章 課程設(shè)計(jì)的內(nèi)容與要求4第二章 網(wǎng)頁設(shè)計(jì)的思路51.建立站點(diǎn)；54.切割效果圖；64.1頭部導(dǎo)航欄64.2主體74.3底部85.布局頁

2、面頭部和導(dǎo)航；8(1).視圖：8(2).代碼實(shí)現(xiàn)：96.布局頁面?zhèn)冗厵冢?06.1該布局為右側(cè)邊欄10(1).視圖：10(2).代碼實(shí)現(xiàn):106.2：該布局為右側(cè)邊欄13(1).視圖：13(2).代碼實(shí)現(xiàn)：137.布局頁面主體部分；14(1).視圖14(2).代碼實(shí)現(xiàn)：148.底部和細(xì)節(jié)調(diào)整。17(1)底部視圖17(2).代碼實(shí)現(xiàn)：18第三章 程序代碼與視圖191.程序代碼：192. 對于整個頁面實(shí)現(xiàn)的效果圖為：25第四章 課程設(shè)計(jì)心得27第五章 參考文獻(xiàn)（資料）29第 28 頁 共 30 頁第一章 課程設(shè)計(jì)的內(nèi)容與要求利用這個學(xué)期所學(xué)的關(guān)于網(wǎng)頁設(shè)計(jì)的知識，自己設(shè)計(jì)一個有關(guān)于一個公司的網(wǎng)頁。要

3、求有內(nèi)容有： 1 建立站點(diǎn)； 2 結(jié)構(gòu)分析； 3 搭建框架； 4 切割效果圖； 5 布局頁面頭部和導(dǎo)航； 6 布局頁面?zhèn)冗厵冢?7 布局頁面主體部分； 8 底部和細(xì)節(jié)調(diào)整。第二章 網(wǎng)頁設(shè)計(jì)的思路關(guān)于分享宮崎駿動漫里的經(jīng)典語錄這個網(wǎng)頁的實(shí)現(xiàn)，首先在index.html頁面顯示相關(guān)信息，然后創(chuàng)立各種信息鏈接，整個頁面布局要求清新，不宜復(fù)雜。1.建立站點(diǎn)；(1) 打開站點(diǎn)管理新建站點(diǎn)輸入名稱“宮崎駿動漫里的經(jīng)典語錄” 下一步 (2)單擊“下一步” (3)選好存儲位置單擊“下一步” (4)選好服務(wù)器文件夾單擊“下一步” (5)單擊“下一步” (6)單擊“完成”2.結(jié)構(gòu)分析；主頁整個頁面分為三個結(jié)構(gòu)頭部

4、，主體，底部。頭部，是所有的導(dǎo)航。主體是由三個div來分隔的。分為左邊為該動漫的作者和發(fā)布的時(shí)間；中間為這個動漫的經(jīng)典語錄；右邊為內(nèi)容的補(bǔ)充和這些動漫視頻的鏈接。底部，可以是版權(quán)說明。3.搭建框架；留言經(jīng)典語錄宮崎駿頭部 ：包括網(wǎng)頁的title和導(dǎo)航欄經(jīng)典語錄作者時(shí)間主要內(nèi)容：各個動漫的經(jīng)典語句其他內(nèi)容鏈接底部：版權(quán)或其他其他4.切割效果圖；4.1頭部導(dǎo)航欄.4.2主體4.3底部5.布局頁面頭部和導(dǎo)航；(1).視圖：(2).代碼實(shí)現(xiàn)：<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">經(jīng)典語錄</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.布局頁面?zhèn)冗厵冢?.1該布局為右側(cè)邊欄(1).視圖：(2).代碼實(shí)現(xiàn):<div id="sidebar"> <div class="rss"> <a href="#">首語</a> </div> <div class="sidebar_box"> <h3>那些讓我們心有所感的那些動漫

8、語錄</h3><h4><strong>目的</h4> <p>&nbsp&nbsp這個網(wǎng)頁是整理起來讓更多人知道宮崎駿的漫畫，那么多觸動心弦的語句，希望有更多的人喜歡、<div class="btn_more"><a href="#">Read more </a></div></strong></p> </div> <div class="sidebar_box">

9、<h3>動漫視頻</h3> <p>那些觸動心弦的臺詞，那些感動靈魂的畫面，那些照亮前行方向哲理，那些陪伴我們成長的童話,讓我們一起重溫那些青蔥歲月里，宮崎駿給我們帶來的溫暖細(xì)膩的小美好</p> <ul class="tmo_list"> <li><a href="#">風(fēng)之谷</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="#">起風(fēng)了</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宮崎小時(shí)候就擅長繪畫，非常喜歡手塚治蟲和浦茂的漫畫作品。高中三年級時(shí)，他看了東映的動畫電影白蛇傳大為感動，由此對動畫產(chǎn)生了興趣。在學(xué)習(xí)院大學(xué)政治經(jīng)濟(jì)學(xué)院學(xué)習(xí)期間，他一直向各類漫畫雜志投稿但終未被采用。大學(xué)畢業(yè)后，宮崎進(jìn)入了東映動畫公司。進(jìn)入東映動畫的宮崎駿當(dāng)時(shí)尚未放棄當(dāng)一名漫畫家的志向，然而在看過前蘇聯(lián)的動畫電影雪之女王后，便決心投身動畫事業(yè)。宮崎輾轉(zhuǎn)于多個動畫制作組，參與了諸多作品的制作，他

14、參加過原畫、美術(shù)設(shè)定、畫面設(shè)定、分鏡等各種工作。未來少年柯南是宮崎的電視長篇動畫代表作。<br /><a href="#">Read more</a></p> </div> </div> <!- end of sidebar ->6.2：該布局為右側(cè)邊欄(1).視圖：(2).代碼實(shí)現(xiàn)：<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).代碼實(shí)現(xiàn)：<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>即使在粉碎的鏡片中，仍然能映出新的景色，晨色初照下的寧靜窗臺，還有化為虛無的身體。 在最好的時(shí)光，做想做的事，去想去的地方。成長是必需要舍棄一些東西的，就像長大的我們不再天真爛漫，不再無憂無慮，不再有無邊無際的幻想，不再有親

18、密無間的玩伴。-&lt&lt魔女宅急便&gt&gt</p> <p>有些心事只能自言自語，有些秘密只能講給朋友。有些痛苦只能默默承受，自己還是要靠自己拯救。真正的痛苦，沒有人能與你分擔(dān)，你只能把它從一個肩頭，換到你的另一個肩頭-&lt&lt魔女宅急便&gt&gt</p> <p>這個世界有些事情真的是無法改變的，我們唯一能做的，只是在自己與世界之間找到一個平衡點(diǎn)-&lt&lt魔女宅急便&gt&gt</p> <p>長久堅(jiān)持一條路，途中

19、總會有艷陽或云雨，比起走近路的人你能看到更多不一樣的景色。繞遠(yuǎn)路的人最后一定內(nèi)心意志堅(jiān)強(qiáng)，遠(yuǎn)路的盡頭有那么一個優(yōu)秀的自己在等待 -&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>人生中遇到的磨難很多，我們愈是成熟，也愈是膽小，反倒在絕境中才激發(fā)出內(nèi)存的潛質(zhì)，從而變的堅(jiān)強(qiáng)和勇敢。 -&lt&lt哈爾的移動城堡&

22、gt&gt</p> <p>愛，不是尋找一個完美的人，而是學(xué)會用完美的眼光，欣賞那個并不完美的人-&lt&lt哈爾的移 動城堡&gt&gt</p> <p>就是因?yàn)槟悴缓?，才要留在你身邊，給你幸福。-&lt&lt哈爾的移動城堡&gt&gt </p> <p> 因?yàn)閻勰?，只要你一個肯定，我就足夠勇敢。-&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">什么時(shí)候我們開始無法像孩子一樣肆意地大呼小叫了？心里的小情緒堆積得像山一樣高，直到溢出來。與其如此，不如永遠(yuǎn)像孩子一樣。-&lt&lt龍貓&gt&gt </p> <p>生活壞到一定程度就會好起來，因?yàn)樗鼰o法更壞。努力過后，才知道許多事情，堅(jiān)持堅(jiān)持，就過來了。-&lt&lt

26、龍貓&gt&gt</p> <p>有些煩惱，丟掉了，才有云淡風(fēng)輕的機(jī)會-&lt&lt龍貓&gt&gt</p> <p>人生在世，委屈、煩難、辛酸，都是難免，重要的是，你得翻過去，翻過它，就會看見藍(lán)天白云。-&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.底部和細(xì)節(jié)調(diào)整。(1)底部視圖(2).代碼實(shí)現(xiàn)：<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>宮崎駿動漫里的經(jīng)典語錄</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">經(jīng)典語錄</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>即使在粉碎的鏡片中，仍然能映出新的景色，晨色初照下的寧靜窗臺，還有化為虛無的身體。 在最好的時(shí)光，做想做的事，去想去的地方。成長是必需要舍棄一些東西的，就像長大的我們不再天真爛漫，不再無憂無慮，不再有無邊無際的幻想，不再有親密無間的玩伴。-&lt&lt魔女宅急便&gt&gt</p> <p>有些心事只能自言自語，有些秘密只能講給朋友。有些痛苦只能默默承受，自己還是要靠

36、自己拯救。真正的痛苦，沒有人能與你分擔(dān)，你只能把它從一個肩頭，換到你的另一個肩頭-&lt&lt魔女宅急便&gt&gt</p> <p>這個世界有些事情真的是無法改變的，我們唯一能做的，只是在自己與世界之間找到一個平衡點(diǎn)-&lt&lt魔女宅急便&gt&gt</p> <p>長久堅(jiān)持一條路，途中總會有艷陽或云雨，比起走近路的人你能看到更多不一樣的景色。繞遠(yuǎn)路的人最后一定內(nèi)心意志堅(jiān)強(qiáng)，遠(yuǎn)路的盡頭有那么一個優(yōu)秀的自己在等待 -&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>人生中遇到的磨難很多，我們愈是成熟，也愈是膽小，反倒在絕境中才激發(fā)出內(nèi)存的潛質(zhì)，從而變的堅(jiān)強(qiáng)和勇敢。 -&lt&lt哈爾的移動城堡&gt&gt</p> <p>愛，不是尋找一個完美的人，而是學(xué)會用完美的眼光，欣賞那個并不完美的人-&lt&lt哈爾的移 動城堡&gt&

40、gt</p> <p>就是因?yàn)槟悴缓?，才要留在你身邊，給你幸福。-&lt&lt哈爾的移動城堡&gt&gt </p> <p> 因?yàn)閻勰?，只要你一個肯定，我就足夠勇敢。-&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">什么時(shí)候我們開始無法像孩子一樣肆意地大呼小叫了？心里的小情緒堆積得像山一樣高，直到溢出來。與其如此，不如永遠(yuǎn)像孩子一樣。-&lt&lt龍貓&gt&gt </p> <p>生活壞到一定程度就會好起來，因?yàn)樗鼰o法更壞。努力過后，才知道許多事情，堅(jiān)持堅(jiān)持，就過來了。-&lt&lt龍貓&gt&gt</p> <p>有些煩惱，丟掉了，才有云淡風(fēng)輕的機(jī)會-&lt&lt龍貓&gt&gt</p>

44、<p>人生在世，委屈、煩難、辛酸，都是難免，重要的是，你得翻過去，翻過它，就會看見藍(lán)天白云。-&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這個網(wǎng)頁是整理起來讓更多人知道宮崎駿的漫畫，那么多觸動心弦的語句，希望有更多的人喜歡、<div class="btn_more"><a href="#">Read more </a></div></strong></p> </div> <div class="sidebar_box"> <h3>動漫視頻</h3> <p>那些觸動心弦的臺詞，那些感動靈魂的

47、畫面，那些照亮前行方向哲理，那些陪伴我們成長的童話,讓我們一起重溫那些青蔥歲月里，宮崎駿給我們帶來的溫暖細(xì)膩的小美好</p> <ul class="tmo_list"> <li><a href="#">風(fēng)之谷</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="#">起風(fēng)了</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宮崎小時(shí)候就擅長繪畫，非常喜歡手塚治蟲和浦茂的漫畫作品。高中三年級時(shí)，他看了