用web設置網頁的設計思路_做響應式web頁面怎麼設計

1、做響應式web 頁面怎麼設計

響應式Web設計的方法
介紹完響應式Web的背景和概念之後，是時候該介紹具體的實現方法了，其實響應式Web設計的方法很簡單，就是利用CSS3的媒體查詢Media Queries和Viewport來解決問題的。
首先我們一起來看看Media Queries，這里我只會對其做一個簡單的列舉介紹。
通過媒體查詢的設置，我們可以根據屏幕寬度、屏幕方向等各個屬性來載入不同場景下不同的CSS文件來渲染頁面的視覺風格。具體的使用方法有以下兩種：
1、通過link標簽：
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代碼代表當當前屏幕寬度小於479px的時候，載入testcssbywidth1.css文件來渲染頁面。
2、CSS中直接設置：
@media screen and (max-width:479px) {
/* 具體的CSS屬性設置 */
}
對於Media Queries的一些常用屬性，只對常用的幾個做一個簡單列舉說明，其他的屬性請各位自行查閱相關資料：
width：描述終端設備顯示區域的寬度，接受max/min的前綴；
height：描述終端設備顯示區域的高度，接受max/min的前綴；
device-width：描述終端設備屏幕的寬度，接受max/min的前綴；
device-height：描述終端設備屏幕的高度，接受max/min的前綴；
orientation：描述終端設備處於橫屏還是豎屏的狀態，取值分別為：landscape/portrait。
當我們調整瀏覽器大小的時候，上面通過媒體查詢屬性的操作就可以完成響應式Web設計的工作，但是這卻不能滿足移動終端的瀏覽器，因為移動瀏覽器默認頁面是為寬屏幕設計的，所以會把他縮小來適應小屏幕，但是終端設備卻無法識別正確的寬度，所以光靠媒體查詢是解決不了移動終端設備的響應式Web設計的

2、用photoshop設計網頁怎麼轉換成web格式啊

打開photoshop格式圖片,然後依次執行:文件-另存為-選擇保存類型為WEB格式-確定保存

3、WEB網站的需求分析方案設計

WEB網站的需求分析方案設計?企業網去看看http://www.nneasy.com.cn這個吧！

4、web頁面都是使用什麼語言為基礎設計出來的

web頁面都是使用「HTML」語言為基礎設計出來的。

相關介紹：

HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly於1990年創立的一專種標屬記語言，它是標准通用化標記語言SGML的應用。HTML包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。

(4)用web設置網頁的設計思路擴展資料

自1990年以來，HTML就一直被用作WWW的信息表示語言，使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種建立網頁文件的語言，通過標記式的指令(Tag)，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。

事實上，每一個HTML文檔都是一種靜態的網頁文件，這個文件裡麵包含了HTML指令代碼，這些指令代碼並不是一種程序語言，只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。

HTML的普遍應用就是帶來了超文本的技術―通過單擊滑鼠從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，與世界各地主機的文件鏈接超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。

5、web版本的網頁設計有哪些應該怎麼做

1.確定網頁的主體色調風格。

我們製作自己的網頁首先應該對自己的網頁有一個整體的規劃，是建一個什麼類型的網站，網站主色調使用哪種顏色、設計布局採用什麼樣的方式等這些都需要有一個很好的規劃。

2.規劃網站的整體布局——導航、按鈕、圖片、文字的排版方式。

做什麼事都不能盲目的沒有目的的進行，那樣只能浪費時間浪費精力，在我們製作網頁之前一定要對網頁的基本元素進行一些設計。可以簡單的畫草圖，或者瀏覽幾個自己比較喜歡的網站學習借鑒。

3.准備和歸類素材——圖片、音頻、視屏、文章等。

製作一個網頁需要大量的文件，我們必須先將這些不同類型的文件進行歸類放置，整理到一個文件夾中。

打開Dreamweaver軟體，新建一個站點，然後在站點下建立不同的文件夾存放素材。

.4建立自己的主頁，按照之前的定的風格設計布局。

不要急著添加圖片和文字，先將導航欄，標題欄和內容欄都規劃好然後在進行素材的導入。注意無論是文件夾的名還是素材名最好使用英文而不是中文。中文狀態很容易報錯，文件添加後就不要更改文件路勁了，否則會導致文件的丟失。

5.製作網頁是一個非常復雜的過程，如果想從頭到尾自己製作一個網頁的話是很難說清楚的，所以這里就分享一個很簡單的方法。

找到一個適合自己風格或是自己比較喜歡的網頁，右擊滑鼠——另存為。
這時瀏覽器就會將這個網頁中的所有的元素都復制下來，存放到一個文件夾中。

6.打開Dreamweaver軟體代開剛剛下載的網頁，這時Dreamweaver中就會顯示你下載網頁的所有元素，不會出現丟失的情況。

7.替換網頁中的元素即可。

選擇需要進行修改的圖片或是文字直接更換即可。選擇一個元素然後在下面的屬性欄中進行更換即可。同時還可以更換圖片的大小和其他的屬性。

8.按下F12進行預覽效果即可。不滿意的地方進行修改，一定要注意隨時保存文件。

6、web網頁設計問題，怎麼設計出下圖的效果，就是滑鼠移上去就切換內容

我給你簡單的寫了例子，至於具體樣式，你自己來寫吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
function meun(mun) {
var tab_name = document.getElementsByName("li");
for(var j=1;j<tab_name.length+1;j++){
for ( var i=1; i<=j; i++){
if ( i==mun ){
document.getElementById("right"+i).style.display="block";
document.getElementById("li"+i).style.color="#0ff";
}
else {
document.getElementById("right"+i).style.display="none";
document.getElementById("li"+i).style.color="#000";
}
}
}
}
</script>
<style>
.left_ul { float:left; width:200px;}
.left_ul li { height:30px; line-height:30px; text-align:center;}
.right1 { display:block; width:400px; float:left; height:200px; background:#999999;}
.right2 { display:none; width:400px; float:left; height:200px; background:#af6439;}
.right3 { display:none; width:400px; float:left; height:200px; background:#0ff;}
.right4 { display:none; width:400px; float:left; height:200px; background:#00f;}</style>
</head>
<body>
<ul class="left_ul">
<li name="li"><a href="#" onmousemove="meun(1)" id="li1">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(2)" id="li2">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(3)" id="li3">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(4)" id="li4">欄目1</a></li>
</ul>
<div class="right1" id="right1">11111111111111111111111</div>
<div class="right2" id="right2">222222222222222222222</div>
<div class="right3" id="right3">3333333333333333333333</div>
<div class="right4" id="right4">44444444444444444444444444</div>
</body>
</html>

7、web網頁設計中怎樣使用控制頁簡化頁面結構

你好控制頁面簡化結構這個命題有些大我說些基本遵循原則吧
第一：頁面屬於 ui層也就是展示層那麼所有有關數據交互啊之類的東西最好都封裝到其他的層比如業務邏輯或者數據層亦或者是公用的工具類中，簡單來說不要出現任何與顯示有關的內容
第二：如果某區域代碼結構過於復雜並且需要多種切換比如選項卡結構之類的如果要展示切換的內容很多且結構復雜建議引入頁面方式處理比如 iframe 或者 include 將頁面拆成很多個子頁面引入即可
第三：我是寫jsp的以他為例吧盡量少使用小腳本多使用 jstl和el表達式並且 js和css文件盡量都分離出去
希望能幫到你謝謝

8、總結歸納web設計思路,如何統一站點的風格?

網站建設網站設計的6個統一
第一個，色彩的統一
在進行網站設計時，要保持網站主體色彩的統一性，在確定了主體色之後，可以著重對局部的色彩進行改變。色彩的統一性可以幫助網站樹立企業的形象，在用戶腦中形成記憶。這樣有利於企業網站的宣傳。
第二個，結構的統一
網站結構的統一包括：網站布局、文字排版、導航、圖片位置等，這些內容的統一是實現網站風格的統一的有效方法。註：網站的標志性元素一定要統一，如網站名稱、網站標志、相關聯系方式等。
第三個，導航的統一
網站導航是網站頁面內容的重要組成部分之一，一個特點明顯、使用方便且具有企業特徵的導航，必定會給用戶留下極其深刻的印象。在進行網站導航設計時首頁導航與欄目頁、內容導航一定要一致。
第四個，背景的統一
學景的統一一直是網站設計中強調的問題，目前企業網站的背景設計有兩種情況，一種是圖片背景，一種是顏色背景。雖然很多企業網站會選擇用圖片做為背景，但是背景設計中圖片並不是最好的選擇。
具體原因如下：
1、高清大圖背景會影響網站頁面的載入速度，2、為網站添加了背景圖片之後，會出現文字與圖片重疊的現象，這樣會影響頁面內容的顯示效果，影響用戶閱讀。
第五個，特色元素的統一
很多企業網站設計時會因為想要突出獨特效果而設計一些特色元素，這些元素會在網站的各個頁面中出現，所以必須保持他們的統一性。因為重復出現的的東西可以在無形中給訪客留下很深的印象。
第六個，圖片的統一
網站設計中圖片的使用率非常高，對於圖片我們一定要保持圖片與內容的統一，形成完整的頁面。註：不要添加與網站內容無關的圖片或動畫元素。

導航:首頁 > 萬維百科 > 用web設置網頁的設計思路

用web設置網頁的設計思路

與用web設置網頁的設計思路相關的知識