網頁界面設計手法_網頁設計製作詳細流程

1、UI要做網頁界面設計把，應該怎麼去學習網頁界面設計呢，有什麼快速的好方法嗎

什麼事情都要有過過程，不可能一頻登天，

UI要做成網頁的話最簡單方法是，PS CC這類的版本好像支持直接生成HTML（靜態）網頁；

學習DIV +CSS 這個是最基本的HTML代碼，上手很快的，學習完這個可以創建HTML網頁

HTML5是這些年新出來的HTML升級版，直接支持動畫與游戲類的開發

網頁的尺寸：每個人使用的電腦顯示尺寸都不一樣的，所以才要考慮到用戶體驗的問題，常用的尺寸為1000px左右（也就是為了1024px尺也就是14寸顯示器）

2、網頁設計中怎麼讓一張圖片填充滿整個畫面？

1、如果樓主只是將其當做一張圖片顯示，可以通過css控制，如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法：
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，實現背景拉伸鋪滿整個瀏覽器，但其它的瀏覽器不支持。
這時可以拐個彎，設置兩層div，底層div當做背景使用，放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復，但又得占滿瀏覽器所採用的方法。

3、設計一個網頁方法

熟悉HTML/CSS/JS等網頁基本元素，完成階段可自行製作完整的網頁，對元素屬性達到熟悉程度。
用Dreamweaver自己先找個簡潔點的網站模仿著做，如果不會Dreamweaver那麼就先買本Dreamweaver的書看看吧。很簡單的就學會了，然後了解CSS。會了CSS就可以做靜態頁面了，你可以找個簡潔點的公司網站，模仿著做。靜態頁面做熟練了，就會有需求學動態腳本語言了，PHP,ASP等動態語言。

4、短文檔的頁面布局通常採用什麼方法規劃頁面

方法/步驟
打開一個新的word文檔

點擊」頁面布局「下的」頁邊距「

點擊」自定義頁邊距「

頁邊距

紙張設計

板式布局

文檔網格設計

分欄設計

5、dw設計網頁時,布局常用什麼方法來布局呢???

1、嚴格意義來說dw並不能用來設計網頁，設計網頁都是在平面設計工具里完成的，比如在ps裡面設計好網站的效果圖，在ps裡面切圖。

2、dw只是個網站代碼編寫工具，使用dw編寫代碼會比較方面，因為有很多的快捷功能。但是對於高手來說，是用記事本都可以編輯網站的。

3、dw的編輯面板主要有三種視圖，分為「代碼」「拆分」「設計」，如下圖

在製作網站的時候，能夠用到的主要是「代碼」視圖功能。「設計」和「拆分」視圖很少用到，只有當網站代碼出現問題的的時候用來查找錯誤，對於有一年多代碼編寫經驗的人來說，就已經用不到了。

4、在dw中編寫製作網站的代碼主要是div+css，也是就是html。網站布局也是通過html代碼來實現的，比如maigin 與padding position 都是來控制div的布局和位置的。

所以，在dw裡面設計網頁布局網站並不是dw的功能，還是通過代碼實現的。

6、網頁頁面的整體設計方法？急啊~！

我用div布局跟你說吧：
一般我們設置整個網頁的寬度是960px或980px ,當然也有800px的。以960px為例跟你說吧，
在網站最上方，首先設置一個banner(橫幅)，把它寬度設為960px，高度大概200px吧；它下面設置為menu(導航條)，寬960px,高度大概40px；接下來是我們網頁的main(正文區域),我們可以把左邊設為300px，可以放廣告、文章列表，右邊設為600px，是文章區，中間設為60px，作為兩板塊的空隙。
最後就是bottom（網頁底部）了，我們可以放置一些友情鏈接、備案號，網站站長聯系方式。

可以到我的網站去看一下 http://zhanghuaipeng.3.bname.biz/ 我是用源碼作的，本人學網路工程的，網站建設不是主科目，只學了十多次課，平時也沒時間打理網站，希望對你有幫助。

7、PS中普通設計頁面的默認設置方法是？

方法1：快捷鍵完成來恢復
1、啟動PS時馬上自按下SHIFT+ALT+CTRL+Z。
2、在彈出的「是否刪除PS配置文件？」選擇「是」即可恢復出廠設置。
方法2：打開有選擇的恢復
1、打開Photoshop。
2、窗口－>工作區->基本功能，便可恢復到剛安裝時的設置。

8、網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

2、下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對於新手這個功能具有可視化，能更好的製作網頁。

3、下面我們來製作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。

4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件，並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。

5、下面我們來製作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示範。

6、下面學習添加文本。編輯「籃球資訊網」，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。

7、網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。

8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。

9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

(8)網頁界面設計手法擴展資料：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。

9、網頁版式設計中可以同時運用多種表現手法嗎

網頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。

1、骨骼型
網頁版式的骨骼型是一種規范的、理性的分割方法，類似於報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。

2、滿版型

3.分割型
把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜。可以調整圖片和文案所佔的面積，來調節對比的強弱。例如：如果圖片所佔比例過大，文案使用的字體過於纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產生自然和諧的效果。

4.中軸型
沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。

5.曲線型
圖片、文字在頁面上作曲線的分割或編排構成，產生韻律與節奏。

圖1：綜合運用多種分欄形式。
圖2：四邊出血，向外擴張，適合年輕人的口味。
圖3：分割線上的壓置的圖片既打破了頁面分割的生硬感，也使自身得到強調。左邊框上的小標簽乃點睛之筆。
圖4：不易覺察的中軸型版式，給人以輕快之感。
圖5：網站的導航標題沿圖形弧線排列。

6.傾斜型
頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩定感或強烈的動感，引人注目。

7.對稱型
對稱的頁面給人穩定、嚴謹、莊重、理性的感受。
對稱分為絕對對稱和相對對稱。一般採用相對對稱的手法，以避免呆板。左右對稱的頁面版式比較常見。
四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內容都能產生安定感。控制好頁面的四個角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制。

8.焦點型
焦點型的網頁版式通過對視線的誘導，使頁面具有強烈的視覺效果。焦點型分三種情況

（1）中心　以對比強烈的圖片或文字置於頁面的視覺中心。
（2）向心　視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩定的，是一種傳統的手法。
（3）離心　視覺元素引導瀏覽者視線向外輻射，則形成一個離心的網頁版式。離心版式是外向的、活潑的，更具現代感，運用時應注意避免凌亂。

9.三角型
網頁各視覺元素呈三角形排列。正三角形（金字塔型）最具穩定性，倒三角形則產生動感。側三角形構成一種均衡版式，既安定又有動感。

導航:首頁 > 萬維百科 > 網頁界面設計手法

網頁界面設計手法

與網頁界面設計手法相關的知識