班级静态网站设计
<--好消息！好消息！好消息！
粉絲超過2000的公眾號主快來接單吧，快來領取你的第一筆廣告費。（粉絲數不夠的小伙伴，請私信我一并解決）
新用戶注冊紅包1.8元，新用戶注冊并接單紅包9.9元。
綁定有賺并接單成功的小伙伴，來找我領大紅包。
具體操作指導可加我微信（lizaozhizao）私信我。（本人親測，真實有效，非廣告）
點擊下面鏈接直接注冊（選流量主）。
2021年，流量變現年，不要錯過，只要有公眾號，有視頻號，有流量，就能變現。大家都在做自媒體變現，你為什么也不嘗試一下呢？
https://a.newrank.cn/link/tkfomO
-->
————————————————
版權聲明：本文為CSDN博主「hbqjzx」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/hbqjzx/article/details/5428097
班級靜態網站設計
1.概述
??????? 本次靜態網站設計類型為班級網站，題目為“2010級計算機科學與技術1班”，其整體設計以綠色為主調顏色，更以藍天、白云、樹葉以襯托出“和諧”與“寧靜”的主題，再以翻開的書本樣式作為背景圖，構造出10計1班在一個幽靜的環境中翻閱著這本回憶錄的意境。另外，此網站導航欄設“主頁”、“動態”、“風采”、“學習”、“交流”、“資源”、“聯系”共7項，在構造意境的同時不忘其實用性。
??????? 靜態網頁源文件共計占用磁盤空間12MB，主要使用Dreamweaver和Photoshop工具制作。已實現網頁有四個，其中首頁占一頁，動態、風采、資源的子頁面各占一頁。
??????? 靜態網頁課程設計由本人從2012.11.16至2012.11.20共耗時五天獨立完成。
?
2.詳細設計
2.1網站結構說明
????????網站從內容上劃分可分為六個模塊，分別是“動態”、“風采”、“學習”、“交流”、“資源”、“聯系”，而網站會再對每個模塊進行細化劃分，具體劃分方法可見圖1。
?圖1 網站內容結構圖
??????? 本次內容模塊主要從實用性出發，力圖將班級各方面的內容從網頁中展示出來，方便班級中的每一個成員瀏覽，方便以最快的速度從網站中獲取所需的內容。
??????? 我們從“動態”模塊中獲得班級的最新資訊，包括活動通知、教務通知及其它的通知，也可以查看網站的最新動態，包括班級微博所顯示的內容，同學們的語錄，及網站的留言。從“風采”模塊中查看校、院、班級曾舉辦或正在舉辦的活動，可以查看我們班中的每一個成員，或者是小組，甚至是整個班級的榮譽。從“學習”模塊中，可以關注到班級專業發展的各種學科的資訊，還有現在上課或課程設計時的學科任務通知，還可以在本模塊中的“作業討論”分支與大家討論各學習上的知識。從“交流”模塊中，我們可以討論就業、娛樂和情感等方面的內容，形成一個良好的互動的氣氛。我們還可以方便地從“資源”模塊中獲取到在班級成長過程中的競賽、娛樂、學科、會議、活動等資源。最后，本網站還提供“聯系”模塊，我們可以以最快的方式獲得與各干部、同學、老師的聯系方式。
?
2.2首頁設計說明（index.html）
（1）首頁的設計效果：
圖2? 首頁設計效果圖
??????? 網頁的意境及實用性已在說明書前面部分提及到，這里就不再重復了，現從網頁的布局方式觀察，如圖2所示，首頁由四大模塊組成，第一模塊，左上角的LOGO，作為一個網頁，一個班級的標志，凝聚了我們班的一切的“CST”樣式標志。第二模塊，右上的導航欄，也稱菜單欄，讓瀏覽者可以方便地鏈接到網頁各塊的內容。第三模塊，相當于一個便民服務的模塊，其中由首頁的登陸框，班級公告及近期班級里面需要做的任務幾個小模塊組成。第四模塊，首頁主內容，首先是一副以班級成員組成的圖片放在模塊頂部，象征著班級的團結，從另一種角度去想也是可以作為對班級的宣傳，然后模塊中心是班級動態，班級活動兩塊內容，是前面所提及到的網站內容結構中的模塊分支，在這里可以進行超鏈接，方便到關注網頁的核心內容，模塊的底部則也是以圖片為主要內容，從圖片樣式中可以展示出我們班的和諧。
（2）首頁的關鍵設計說明：
1、? 網頁布局
圖3? 網頁布局設計圖
??????? 顯然，本網頁可由多個分塊明顯的div塊拼合嵌套而成，首先，在div的設計上，因為需要使主頁核心模塊偏左顯示，所以先使用了whole_div作為總框架，并將其position屬性設為relative，再將main_div嵌套至whole_div中，然后將其position屬性設為relative，將margin-left屬性設為0，即使左外邊距為0而實現模塊左偏功能。
???????至于main_div中的top_div及center_div則是兄弟模塊，同是將position屬性設為relative，固定寬度，再將float屬性設為left，實現了模塊上下排版的樣式，同時，兩兄弟模塊的間距可通過margin屬性進行調整。而在top_div中的logo_div和menu_div，center_div模塊中的center_left_div和cneter_right_div幾個模塊的布局也使用了同樣的思想，這里也不再累述了。
2、葉子的裝飾：
???????由首頁效果圖可見，葉子（圖片）會出現在導航欄的附近，這是使用了position屬性的absolute值，將這些葉子絕對定位，而這些葉子（圖片）的屬性的父標簽是main_div的，這樣就可以將葉子的擺放跨過top_div和center_div這兩個標簽區域，具體代碼如下：
<divid="main_div">
??? <divstyle="position:absolute; z-index:1; left:228px; top:0px;">
??????????????????? <imgsrc="../image/Leaf1.png" />
??? </div>??
…(其它代碼省略)
</div>
3、導航欄的相關實現：
??????? 導航欄的實現在index.html中的menu_div標簽中，先使用css中的將background屬性設置為所需圖片，至于七個模塊的導航字體，則直接在html中輸入，如下面代碼：
<divid="menu_div">?????????
<pid="menu_font_div">
??????????? <ahref="index.html" style="text-decoration:none;"><spanclass="menu_font">主頁</span></a>|
????????? <a href="News.html"style="text-decoration:none;"><spanclass="menu_font">動態</span></a>|
????????? …(省略)
??????????? <spanclass="menu_font">學習</span>|
???????? ...(省略)
?????? </p>
</div>
??????? 這里的“主頁”、“動態”、“風采”、“資源”都使用<a>標簽設置了超鏈接，同時，為了成功設置超鏈接標簽的字體不改變原來的樣式，使用css屬性內嵌到該標簽，將text-decoration設為none，防止改變預設的字體樣式。而未實現超鏈接的字體（如上面代碼中的“學習”）則直接用<span>標簽設定，并且不加<a>標簽。至于“主頁”、“動態”、“學習”等模塊文字的間距是通過css的menu_font類的padding屬性來設定。
?
?
2.3 “動態”頁中的子頁設計效果說明（News.html）
???（1）“動態”頁中的子頁的設計：
?
? 圖4 動態模塊的子頁設計效果圖
??????? 如圖4所示，動態頁的子頁與首頁有相似的地方，不同之處是中心內容，首先是中心內容的右上角處會有一個定位導航，然后，為了使文章與整體樣式協調，標題使用土黃色，正文使用藍色，再加上一幅經處理的圖片，構成了動態頁的子頁，注意，這里的動態頁并不是指內容是動態的，而是指班級的“動態”模塊的最新資訊，活動類的信息，因此這子頁的內容主題是“10計算機科學與技術1班清遠班游”是符合“動態”模塊的特點的。
（2）網頁正文樣式控制
將字體大小設定為18px，然后設置字體顏色為#8489c9，因為需要首行縮進，所以再加上text-indent屬性，將值設為2em，兩個中文字符的大小，將對齊方式設為左對齊text-align:left，再設定行高line-height為20px，最后，為了美觀，設定padding的值，讓文字避免與邊框重疊。
?
?
2.4 “風采”頁設計效果說明（Mien.html）
（1）“風采”頁中的子頁的設計：
圖5? “風采”模塊的子頁設計效果圖
??? ?? 本頁的整體布局還是與主頁相似，制作相似主頁的主要原因是使它的整體樣式協調，中心內容的右上角處會有一個定位導航，然后，為了使文章與整體樣式協調，標題使用粉紅色，如圖5所示，本頁的正文部分嵌入了視頻，首先設置好父類div中的正文的內容，再使用
<embed src="url" quality="high"? type="application/x-shockwave-flash"></embed>
語句將視頻嵌入div中，在將視頻嵌入成功后，在內容尾部加上可留言的樣式，留言框的制作使用<input type="text">實現，然后在css中使用width與height設定留言框的高度，而提交按鈕則使用<input type="button">實現，使用css中的text-align設定對齊方式。
?
?
2.5 “資源”頁設計效果說明（Resource.html）
（1）“資源”頁中的搜索子頁的設計：
圖6? “資源”模塊的子頁設計效果圖
????本頁設置了搜索框放在中心內容模塊的右上角，用戶可以通過該搜索框方便地查找自己所需的資源。查找結果將會在下面顯示，查找結果的樣式，這里使用<table>標簽來實現，查找結果的邊框的樣式使用了咖啡色來做主題，使其看上去與導航欄及左側邊欄相協調。
?
?
3.總結
?
??? ? 靜態網站課程設計，在我看來，這是本學期開Dreamweaver課以來自主性最強的一次網頁設計作業，這學期上Dreamweaver課，一直跟著老師的步伐走，學到了很多關于網頁設計方面的知識，平時的小實驗，一般是完成老師布置下來的任務，一般是仿照原來的樣本來做出相應的網頁樣式效果，而這些天，終于可以嘗試自己定義主題然后根據自己所想而進行設計啦。
?? ?? 這次的靜態網站設計，可以分為六個步驟，第一步是選定主題，第二步是主題內容構思，第三步是網站設計框架構想，第四步是網站素材搜集，第五步是編碼實現，第六步是網頁檢查及說明書與總結的編寫。
?? ?? 第一步：選定主題。看見說明書要求，可以做個人博客，可以做班級網站，可以做商務網站，可以做音樂視頻播放網站，也可以做學習資源網站，我看見說明書首選的是個人博客與班級網站，在這兩方面選題，這是因為個人所需，一直有寫博文的習慣，不過并沒有試過自己給自己設計主頁，完全可以借助這次的機會給自己設計一個博客網站，另一方面，班級網站，之前也有想過說給班上做一個班級網站，只是，也是因為時間的關系，也一直沒有動手，這次借這個靜態網站課程設計的機會，還是決定了選擇班級網站這個主題了，這次的選題，并沒有去考慮課程設計完成的難度，而僅僅是從個人需求這個角度去選題的。這一步在2012年11月16日完成。
?? ?? 第二步：主題內容構思。選定是主題后，需要開始構思好主題的相關內容有哪些，這次使用思維導圖方式的思考，一個個模塊展開，這次是以實用性的角度去將這班級的主題分塊的，以自己是一個班級成員的身份去考慮我進入這么一個班級網頁里面需要用上哪些功能，自己平時在上學的時候需要去使用哪些功能，活動，學習，生活，班級榮譽，各種資源，還有少不了的各種最新資訊，還有平時同學們的溝通無法找到聯系方式的問題，所以最后就將主題分為“動態”、“風采”、“學習”、“交流”、“資源”、“聯系”這六個模塊了。這一步在2012年11月16日完成。
?? ?? 第三步：網站設計框架構想。在主題內容設定后，得開始思考這些內容大概需要一個怎樣的框架去裝載，心中有一個大概的網站樣式，需要一個怎樣的樣式去實現這一主題，起初我是想到的是以簡單為主調，簡單即是美嘛，不過后來是因為無意瀏覽網頁的時候，發覺有些頁面的設計雖然沒有心目中的那么簡單，不過也不算是太花花綠綠，也符合自己想要的另一個思考，和諧，于是，就這樣通過不斷的參考修正自己心中的框架，確定下最后的主題為翻頁式的“和諧與回憶”，并且，考慮好將每個子模塊的內容是怎樣裝入這網頁的樣式中去的。這一步在2012年11月17日完成。
?? ?? 第四步：網站素材搜集。根據自己所考慮的網站設計框架，開始上網搜集素材，并且有些必須的，自己使用Photoshop工具進行制作，將全部的素材搜集好，為下一步編碼實現打好基礎，另外，將所有的素材搜集好后，再使用Photoshop 先將網頁在Photoshop中設計展示出來，讓下一步只需要根據自己的設計結果進行制作就可以了。這一步在2012年11月18日完成。
?? ?? 第五步：編碼實現。在設計好樣式，網站的素材搜集好的情況下，編碼的實現相對就顯得輕松了，當然，這是需要有一定的網頁的編寫基礎，當遇到不懂的問題時，一般會先去查書，找找是否有自己所需要的功能，如果書籍找不到所需資料，就會上網找答案，這次課程設計，并沒有太多的疑難雜癥，因為也沒有走到去請教別人的那一步了，我這次編寫代碼，是邊編寫邊調試，編好一個小模塊后就使用瀏覽器打開網頁看是否自己所需的樣式再根據需要進行調整或繼續進行下一子模塊的編碼。這一步在2012年11月20日完成。
?? ?? 第六步：網頁檢查及說明書與總結的編寫。最后，在完成了編碼工作后，為了盡量使自己的網頁錯誤降到最低，我會將整個網頁的內容與鏈接都檢查一遍。然后，開始著寫編寫說明書，制作說明書所需要的圖片素材，根據自己思路將說明書寫下。最后，免不了的是一次課程設計的總結，總結是每次課程設計的必做項，因為它可以讓我們反思整個制作過程，可以總結出這次的制作經驗，可以從自己的這次制作中總結出下次制作改進的方法。這一步在2012年11月20日完成。
?? ?? 最后，這次的網頁課程設計總算是完成了，自己也沒有很滿意，因為只是實現了四個子頁面，這也是由于近期學習任務的繁重，近期還是想將更多的時間花在一些自己更感興趣和更為急迫的學習任務上。而這次的網頁設計作品也有些缺陷，首先是網站的內容不夠豐富，感覺雖然是按個人的需求進行了模塊分類，不過好像還是缺了點什么，分類的方法還是不科學，我想如果可以進行問卷檢查的話可以再從另外一些角度去分類，或者可以再上網搜尋科學的分類方法。還有的不足就是子網頁的功能都是不能實現的，由于這次是靜態網頁設計，因為也就沒有去思考如何去實現這些功能了，功能的實現，對于網站的制作來說必然是重要的一步，制作的產品是為了給大眾使用，相當少的情況會僅用來欣賞的，子頁的div分塊也有點過于簡單，完成得有點倉促。當然，批了很多自己的不足，本次的網站制作也是有能讓自己感到滿足的地方，在這個制作的過程，將自己的CSS知識與HTML知識鞏固了一次，另外，成功將網站制作出來是很讓人興奮的一件事，畢竟是第一次看見自己自主制作的網頁成品啦。
?
4.參考文獻
?? [1] 《網頁設計與開發》. 主編：王津濤 副主編：孟慶昌 出版：清華大學出版社 版次：2012年
總結
- 上一篇： python基础知识大一总结与反思_反思
- 下一篇： 汇编语言笔记-keil5软件仿真及调试