響應式網頁設計論文

1、什麼是響應式網頁設計與自適應網頁設計

響應式與自適應的原理是相似的，都是檢測設備。 根據不同的設備採用不同的css，而且css都是採用的百分比的，而不是固定的寬度。

不同點：響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式， 而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不同的展示樣式。

2、響應式網頁設計到底是什麼？

響應式的網站就是隨著電腦屏幕的大小會自動匹配網頁的大小。

3、響應式網頁設計的提出

Ethan Marcotte曾經在A List Apart發表過一篇文章Responsive Web Design，文中援引了響應式建築設計的概念：現出現了一門新興的學科——響應式架構(responsive architecture)——提出，物理空間應該可以根據存在於其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用，建築師們正在嘗試建造一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的牆體結構；還可以使用運動感測器配合氣候控制系統，調整室內的溫度及環境光。已經有公司在生產智能玻璃：當室內人數達到一定的閾值時，這種玻璃可以自動變為不透明，確保隱私。
將這個思路延伸到Web設計的領域，我們就得到了一個全新的概念。為什麼一定要為每個用戶群各自打造一套設計和開發方案？和響應式建築相似，Web設計同樣應該做到根據不同設備環境自動響應及調整。
顯然，我們無法也無需使用運動感測器或是機器人技術，響應式Web設計更多需要的是抽象思維。好在，一些相關的概念已經得到了實踐，比如液態布局、幫助頁面重新格式化的media queries和腳本等。但是響應式Web設計不僅僅是關於屏幕解析度自適應以及自動縮放的圖片等等，它更像是一種對於設計的全新思維模式。

4、響應式網頁設計和自適應網頁設計的區別

驚喜設計裡面有篇文章提到過，自適應網頁設計也是響應式網頁設計，響應式網頁設計也是自適應網頁設計。但是真正的細分起來，自適應只是響應式的一個子集，指網頁中整體大圖的自適應或者banner的自適應。

響應式設計可以一個網站兼容多個不同終端

響應式網頁設計優勢：流體網格的網站適合響應式網頁設計。

1、靈活性強，可以適應不同解析度的設備

2、方便快捷的解決多設備顯示適應問題

自適應網頁設計優勢：固定斷點的網站適合自適應網頁設計。

1、實施起來代價更低，測試更容易

2、自適應布局可以讓設計更加可控，因為它只需要考慮幾種狀態就可以了

雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、載入時間長的缺點，但它們能「一次設計，普遍適用」，可以根據屏幕解析度自適應以及自動縮放圖片、自動調整布局，它們不只是技術的實現，更多的是對於設計的全新思維模式。

5、動態網頁設計論文！！！！！！！！

指導老師：
完成日期：
目錄

一、概述 - 3 -

二、結構圖 - 3 -

三、站點主題選擇 - 4 -

四、模塊介紹 - 4 -

（一）index - 4 -

（二）公告欄 - 5 -

（三）心馬游韁 - 5 -

（四）新聞、娛樂、游戲等附屬板塊 - 5 -

五、總結 - 6 -

一、概述

隨著互聯網的不斷發展和中國網路人口的日益增長，建立個人網站，不但可以剛好的展示自己，而且可以提高自己在計算機應用方面的能力。故本次作業，我選擇製作個人網站。

個人在設計時考慮的多為個人的興趣喜好，而不注重商業的展示。內容以反映個人為中心，從而使個人網站真正的成為展示自己的網路名片。

在網頁製作中，我借鑒了韓國個人網站的設計風格，著重於給瀏覽者以強烈的視覺沖擊。運用了photoshop和fireworks強大的圖像製作和處理能力。進行了大量的圖片製作，從而給人以強烈的美感。並利用Flash進行片頭動畫的製作，給予瀏覽者一種強烈的時代動感。整個網站的架構是由Dreamwave完成的。

二、結構圖

三、站點主題選擇

由於網路上各種各樣的信息很多，別人可以輕易的各大知名網站上了解自己想要的信息。所以，我的關注的便是怎樣讓自己的網站更具有個性魅力，使個人擅長的信息更全面的反映於瀏覽者。以上便是我個人站點主題選擇的指導思想。

站點的主體內容由個人日常生活和大學各種作業兩部分組成。從學習和生活兩大方面全方位展示自己豐富多彩的大學生活。

在主要內容之外，還設有娛樂、游戲、新聞三個模塊。這部分內容將我個人瀏覽網頁所收集到的奇聞趣事反映給大家。（此部分未開通）

四、模塊介紹

（一）index

使用Flash動畫進入主頁，給人一種耳目一新之感。開始的兩個隧道引入，表明引領瀏覽者進入本人的內心世界，隨之而來的是以紅色為主色調的動畫，給人一種熱情好客的感覺，不斷變換的網站內容更是起到了提示和概述的作用。

（二）公告欄

公告欄是我個人正在或將要發生重大事情的提示欄。內容與報紙的頭版頭條有異曲同工之妙。公告欄標題是由一面大鼓作為引導，用以寓意此部分內容重要之處。在黃底紅字的襯托之下更顯示其應受到的關注程度之高。

（三）心馬游韁

心馬游韁是個人心靈的自我傾訴之所，將自己日常生活的感悟寫下來與瀏覽者交流。這部分也總結了自己的得與失，沉澱了自己的情緒。

在主頁上有該部分的文章列表，瀏覽者點擊之後將跳轉到每篇文章相對獨立的網頁中。而每一個相對獨立的網頁以黃色為主色調，有一種流露個人思想之感。

（四）新聞、娛樂、游戲等附屬板塊

該板塊聚集了本人在日常瀏覽互聯網時收集到的奇聞趣事。該部分內容並不在內容的廣度，而是考慮所反映內容的深度和全面性。

值得一提的是，進入該部分是通過Flash的Actionscrip語言編寫。形式較為新穎。

五、總結

不知不覺網頁設計的課程將要結束了，這門課程所包含內容的豐富是讓我從沒有想到的。在整個的學習過程中，我學習了Flash、Dreamwave、Fireworks、Html語言、IIS、網站建設的基本思想等重要內容。到現在為止，我還是很慶幸能夠學到這么多的內容。

整個網站的製作是我一個人完成的。雖然整個網頁的結構還有很多不足，還有一些板塊沒有開通，但是我的確能夠感到在我製作過程中技能的提高。整個網站的不足我想是沒有使用到一些動態網頁的知識，使得日後網站的維護較為繁雜。希望明年可以選到動態網站的課程，從而彌補自己在動態網路語言方面的不足。

6、什麼是響應式網頁設計

響應式Web設計(Responsive Web design)的理念是:頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備;換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端--而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。