《環境保護》網站設計
壹．前言
20世紀以來，科技進步和社會生產力的提高，使人類得以創造出前所未有的物質財富。但與此同時，人口劇增、資源過度消耗、環境汙染。生態破壞、國家或地區之間貧富差距擴大等全球性問題也日益突出，嚴重阻礙了人類社會的長遠發展和生活質量的提高，甚至對人類未來的生存和發展構成了威脅。特別是這幾年地球生態環境被破壞很大，造成了很多的水土流失，動物滅種，自然災害頻繁發生，從那年的幹旱開始這幾年出現了洪水、雪災、地震差不多每年都會出現壹次重大的自然災害。這就是人類破壞了自然的後果，做這個網站就是為了提倡大家關愛自然，尊重生命，保護自然環境，維護生態平衡，畢竟我們只有壹個地球。
二．總體設計
做網站前我瀏覽了國家環保局的網站與各種關於環境保護的網站，最後我、確定我的網站主要實現讓人們可以從我的網站了解環保法規、了解環保知識、宣傳環保廣告等功能，確定了網站要實現的功能後，就是著手畫網站草圖了，瀏覽與參考了很多網站後終於成功畫出網站的草圖，並根據草圖最終完成網站制作。網站邏輯圖如下
三．詳細設計
1.草圖的設計，瀏覽了各大環保網站後,我已在心中確定了我的環保網站的大體布局,並成功的建立網站草圖.
2.布局的規劃，第壹步新建“HTML”在新建的空白網頁的”工具欄”選項卡中選中”布局”由於在網頁中”層”不好固定位置,所以我選用表格布局,進入布局模式選用”繪制布局單元格”在空白網頁中根據先前設計的個人網站草圖繪出網頁的框架.根據個人網站顯示的需要更改表格布局的屬性值,最後成功完成了網站主頁的布局設計,並根據需要調整好頁面的布局表格屬性值.
網站的布局
3.網頁背景的設計
a.打開AdobePhotoshopCS2根據網頁頁面的要求建立相應大小的空白圖片,然後在新建的圖片上進行處理.
b.使用各工具對網頁背景的大體顏色進行噴繪,為使網站的背景顏色不會太過死板生硬,將各工具的”硬度”調整為0.
c.使用AdobePhotoshopCS2中的鋼筆路徑工具裁取網頁背景所需要的裝飾圖片
1.打開需要摳圖的圖片在AdobePhotoshopCS2的工具欄上選中”鋼筆”工具並將其改為”路徑描點”模式.
2.使用鋼筆工具描出需要摳取圖片,描點完成後同時按住鍵盤上”ctrl”+”enter”完成路徑的合並,將圖選中.
3.切換到剛剛新建的網站背景圖,將剛剛摳取的圖片粘貼進去.
4.重復摳圖步驟剪取背景所需的各種裝飾圖.對網站背景進行美化.
最後運用了AdobePhotoshopCS2將所有網頁頁面的背景模板都按照草圖要求美化。完成了整個網站各頁面的背景模板的美化設計.
我設計的網頁背景圖
4.網頁模板的建立，由於網站有很多網頁是用的同壹種風格，所以建立網頁模板可以節省很多時間與精力，模板是做好壹個網頁的母版後，選擇“文件“裏的”另存為模板“，如果計算機以前沒有建立站點，存模板時會提示建立站點，站點的文件夾要設為網頁保存的文件夾，最後成功的建立了模板並運用模板建立了多個子網頁。
網站的模板
5.廣告頁面flash的設計，1．打開Flash，在開始頁上選擇“從模板創建”中的“幻燈片演示文稿”，在彈出的對話框中選擇壹模板，如“科技幻燈片演示文稿”，然後“確定”即可。如果沒有開始頁，不要緊，可以單擊菜單“文件”中的“新建”，也可出現該對話框。2．打開後，在Flash中的幻燈片和PowerPoint結構略有不同，它是壹個倒掛的樹形結構。樹根只有壹個，在幻燈片演示中壹直存在，壹般用來做背景；同級之間是兄弟關系，默認情況是“替換”，也就是說第二張幻燈片如果與第壹張幻燈片同在壹級，當第二張幻燈片出現時，第壹張幻燈片消失；還有上下級關系，與上級之間默認情況是“疊加”關系，也就是說，如果第二張幻燈片是第壹張幻燈片的下級，當第二張幻燈片出現時，它是加在第壹張幻燈片上面的。3．當然，模板給的幻燈片個數可能與所需幻燈片不壹樣，也可以自己添加幻燈片或刪除它。在需要添加或刪除的幻燈片上單擊鼠標右鍵，，可以很方便地添加或添除它。當選擇“插入屏幕”時，插入的幻燈片與所選幻燈片同級並在所選幻燈片的下方；當選擇“插入嵌套屏幕”時，插入的幻燈片與所選幻燈片是下級關系。好了，只要將每張幻燈片變成自己的內容，然後選擇“文件->存盤”，再選擇“文件->發布”，就會在保存文件的位置發現壹個同名的swf文件，這就是制作出的幻燈片文件了。
四．心得體會
做完這個網站,讓我真正的認識到壹個成功的網站，先期的準備工作是很重要的，好的開始等於成功的壹半。選擇這個環保網站的建設的樣式後，就要為目標而努力了。熟練掌握網頁設計和圖形處理的技巧是必須的，但經驗是在實戰中獲得的，我們雖然剛開始學也不必因此而畏懼退縮，多多練習才會有提高。網站建設最重要的莫過於兩個問題：設計和內容，素材的準備.
1、設計的要求：
第壹、導航清晰，布局合理，層次分明，頁面的鏈接層次不要太深，盡量讓人第壹眼看清網站的大體.
第二、保持統壹的風格，有助於加深訪問者對的網站的印象。要實現風格的統壹，不壹定要把每個欄目做得壹模壹樣，舉個例子來說，可以嘗試讓導航條樣式統壹，各個欄目采用不同的色彩搭配，在保持風格統壹的同時為網站增加壹些變化.
第三、色彩和諧、重點突出：在網頁設計中，根據和諧、均衡和重點突出的原則，將不同的色彩進行組合、搭配來構成美觀的頁面.
第四、界面清爽：要吸引訪問者長時間的停留在的網站，千萬不能讓用戶第壹眼就感覺壓抑。大量的文字內容要使用舒服的背景色，前景文字和背景之間要對比鮮明，這樣訪問者瀏覽時眼睛才不致疲勞。
第六、動態效果不宜太多：適當的動態效果可以起到畫龍點睛的作用，過多的動態效果會讓人眼花繚亂而抓不住主題。
2、技術運用中要註意的壹些事項：
第壹、明確技術是為設計服務的，不要沈迷於技術的運用，堅決摒棄那些華而不實的特效；
第二、先為站點定義好統壹的外部CSS，內部頁面都調用這個CSS，這樣不但可以讓的網頁在瀏覽器改變設置時不變形，還有助於保持整個站點的風格統壹，並且方便修改；
第三、不要打開過多的新窗口，每個鏈接都會打開不同的新窗口尤其讓人反感；
第四、圖象的制作要兼顧大小和美觀，圖片和文字的混排、圖片的合理壓縮可以讓頁面美觀而且文件小巧。即使是個性十足的設計站點，浪費太多的時間在頁面下載上也會令人生厭；
3.加深了網站設計的技術熟悉
這次對網站的設計讓我對各種網站設計的技術和網站設計中應註意的問題以及網站設計中所運用的工具更加的了解與熟練.