1、找一位師傅教我如何用dreamweaver製作流體響應式布局網頁，滿意一定採納
很簡單
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
把這些標簽放到<head></head>裡面
然後將
@media(max-width:960px)
{
}
這個放到CSS樣式文件裡面
{}這個裡面寫樣式
這段代碼的意思是在屏幕寬度小於960px的時候執行的樣式，當然你可以把960px改為其他更小的寬度，例如760px。
然後就基本完成了
2、如何結合SEO製作一個優秀的響應式網站
一個優秀的H5響應式網站可以幫助企業開疆拓土，那麼如何結合SEO製作一個優秀的H5響應式網站?這其中離不開域名、空間和建站程序，今天耐思尼克小編就結合網站域名、網站空間、網站程序給大家簡單介紹一下。
1、網站域名。首先要做的就是注冊一個好域名，而好域名的原則也不過就是短、簡單、易記、有意義，企業網站最好和你的產品或服務有關聯，一個好網站離不開好域名的點綴。
2、網站空間。選擇空間要看三點就是：空間的穩定性、空間的訪問速度、空間價格。空間的穩定性對網站來說是很重要的一點，當客戶打開網站經常打不開或者打不開經常出現錯誤的時候，這是用戶體驗度是非常差的。空間的訪問速度，在這個快節奏信息滿屏皆是的時代，如果你網站打開的速度太慢，可會流失很多點擊率的哦。空間價格，價格這個問題就要按照你網站的需求購買啦，不要太便宜也不用太貴的。
3、網站程序。網站程序都是要編的，市面上也有很多可選擇，選擇哪個就要看你的網站需要了。很多站長在建站之初沒有考慮到SEO，所以在選擇程序、空間和域名的時候比較隨意，等到網站上線以後才開始做SEO優化;但如果在建站之初就能從SEO的角度出發，對域名、空間和程序都有要求的去選擇的話，會更有利於後期的網站排名。
先說說域名，像那種曾經被搜索引擎懲罰過或者是已經被他人丟棄的網站域名，一定不要用。因為那些域名以前的主人可能也曾做過SEO。由於種種原因被搜索引擎打入了冷宮，這種情況下，如果這種域名被你注冊並作為自己網站的域名，那麼即便你的網站做的非常好，但搜索引擎由於以前對該域名留下的壞印象，很有可能不會給你的網站一個好的排名。所以，在注冊一個域名之前，我們應該先做一下檢查，比如你想注冊一個域名，可以在百度、谷歌等幾大搜索引擎搜索該域名，看是否有相關的內容，如果沒有任何記錄的話，則說明該域名沒有被別人用過，可以注冊。
再來說說SEO對於網站空間有什麼要求。從SEO的角度出發，對空間的要求是穩定。穩定是指速度上的穩定和時間上的穩定，速度上要求越快越好，假如一個網民點擊某個網站，過了幾十秒甚至幾分鍾都打不開，搜索引擎也是如此，它認為一個網站如果打開速度慢，用戶體驗也不會好，就不會給網站好的排名。在時間上，如果網站經常性的打不開，搜索引擎也不會給他太好的
3、如何在網頁中製作響應式的SVG圖像
SVG（可縮放矢量圖形）：可縮放矢量圖形是基於可擴展標記語言（標准通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標准。
SVG圖片格式的優勢：
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕解析度和列印解析度。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
4、做響應式網站，是不是要先製作好H5響應式模板呢？
響應式布局概念
Responsive design，意在實現不同屏幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
經過不停地學習和實踐，如今總結響應式設計的方法和注意點。其實很簡單。
響應式設計的步驟
1. 設置 Meta 標簽
大多數移動瀏覽器將HTML頁面放大為寬的視圖（viewport）以符合屏幕解析度。你可以使用視圖的meta標簽來進行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度並禁止初始的縮放。在<head>標簽里加入這個meta標簽。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
[1]（user-scalable = no 屬性能夠解決 iPad 切換橫屏之後觸摸才能回到具體尺寸的問題。 ）
3. 通過媒介查詢來設置樣式 Media Queries
Media Queries 是響應式設計的核心。
它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假如一個終端的解析度小於 980px，那麼可以這樣寫：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
這里的樣式就會覆蓋上面已經定義好的樣式。
4. 設置多種試圖寬度
假如我們要設定兼容 iPad 和 iphone 的視圖，那麼可以這樣設置：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
恩，差不多就這樣的一個原理。
一些注意的
1. 寬度需要使用百分比
例如這樣：
#head { width: 100% }
#content { width: 50%; }
2. 處理圖片縮放的方法
簡單的解決方法可以使用百分比，但這樣不友好，會放大或者縮小圖片。那麼可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。
img { width: auto; max-width: 100%; }
用::before和::after偽元素 +content 屬性來動態顯示一些內容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 屬性了，這個方法就是結合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML 結構：
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
CSS 控制：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
5、html5怎麼製作一個響應式網頁？
HTML5 製作響應式網頁，首先需要考慮是全平台適配還是只是移動端適配。這里以移動端響應式網站為例，講述如何製作響應式網頁。
1、選定基本設計尺寸，一般以1080為基準。確定響應式web設計的應用場景之後，和美工（或設計師）溝通，之前，一般需要美工出幾套主流移動設備屏幕解析度的設計圖，現在，使用流式布局以及rem等可以使用一套設計圖，以最常用的移動設備屏幕解析度為基準。
2、當美工完成設計圖之後，前端工程師的工作就開始了。這時你就可以使用PS或是FW進行切圖了。一般說來，Fireworks cs6切圖更快，但是Fireworks有時會有圖片失真的情況發生，所以，有時需要使用PS進行配合，PS有切片工具可以專門用來切圖。
6、響應式網站的製作難點主要有哪些
1、設計難
因為不能使用絕對定位，那麼在設計的時候需要考慮可讀性以及區域面積以及在不同的設備下的行為。這對一般的設計師來說簡直是一場災難。所以很少有出眾的響應式網站出現。
2、實現更難
響應式設計出的稿子，當然還需要響應式的實現。響應式的基礎就是HTML5, CSS3。一般的建站公司，一般是沒有錢去聘用精通HTML5和CSS3技術的高手的。最多是讓程序員在寫代碼之前看2天書，然後就趕鴨子上架。這就導致了即使設計師設計出了很棒的模板，但是在實現了之後，怎麼看怎麼不舒服。
3、屏幕尺寸多，很難做到一次編碼，到處運行
目前，主流的大家用來訪問網頁的設備有：計算機(廢話)，iPad，Android Pad(例如三星的)，智能手機。那麼做一個網站，必須到這些設備上去測試和運行。普通的網站作坊很少有人會願意花這么多的精力去測試一個網站。
4、成本大
因為響應式設計需要對多個界面兼容、功能調試，導致整個製作過程需要UI設計師和前端工程師要不斷磨合製作。
總之，響應式網站設計，為計算機、手機、平板電腦等不同設備的訪問用戶了提供更加舒適的界面和更好的用戶體驗(和速度)，而且隨著目前移動設備的增長，已成為大勢所趨。對於新手而言，建設響應式網站是一件難事，你可以用nicebox響應式建站系統來自助建設。
7、H5響應式網站，用什麼工具進行製作
XUANZHEN h5case就有比較多的關於h5的案例，很值得借鑒~望採納！
8、HTML5怎麼製作響應式網頁
1.調整視口代碼實例：
<!DOCTYPE html>代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。
2.確定設計圖的最小字體瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。
代碼實例：
<style type="text/css">各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。
代碼實例：
.main {float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。
4.通過媒介查詢，為不同設備載入相應樣式有條件應用樣式：
<style>代碼解析：
第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。
第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。
有條件的載入樣式表：
<head>代碼解析：
第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。
第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。
5.使用百分比和rem替換px
除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。
代碼效果對比：
/*使用固定像素*/代碼解析：
水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。
例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。
垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。
9、怎麼製作一個H5響應式網站
網路建設公司很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1、有做了很多精明案例的
2、案例都是可以驗證方法的
3、只做網路建設的，沒有做其他的
4、做的比較久的。
10、如何用一簡單的CSS製作響應式HTML網頁
建議展開閱讀
新人如果想快速開發出響應式網站建議使用響應式框架Bootstrap,Foundation等等......
三個部分[Viewport][網格視圖][媒體查詢]
1.先在head裡面設置Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">用戶可以通過平移和縮放來看網頁的不同部分。
2.很多響應式都基於網格視圖設計
響應式網格視圖通常是 12 列，寬度為100%，在網頁自動伸縮
比如CSS裡面寫
這樣即可在html寫
<div class="row">達到簡單的響應式效果[拖拽瀏覽器大小查看]
圖片響應式方法
div {background-size 屬性設置為 "contain", 圖片比例會自動縮放。
3.媒體查詢主要用於針對不同的媒體類型定義不同的樣式
比如我在電腦顯示圖片1,但是在手機顯示的是圖片2
詳細可以私信我