❶ 有什麼工具可以快速畫出web頁面布局和大概設計的嗎
入股喲要求不高的話，可以利用Dreamweaver或者是C#進行，因為這兩個都是網頁製作中比較簡單的應用工具。
當然，在進行web頁面布局的時候，可以用div+css進行，這樣可以有效的防止內容浮動
❷ c# web界面不方便布局
c# web界面方便布局方法如下
不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，
如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
❸ 怎麼設計WEB登錄頁面，讓頁面不平庸
1，先分析網站的行業的性質。
2，根據行業設定主色調。
3，多採用些透明度。大氣美觀。
❹ 網頁的布局類型有哪些
1、「國」字型
也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。
2、拐角型
這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3、標題正文型
這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、封面型
這種類型基本上是出一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
5、「T」結構布局
所謂「T」結構布局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變「T」結構布局的形式。
如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式布置，通過背景色區分，分別放置圖片和文字等。
這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易於使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人「看之無味」。
6、「口」型布局
這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。
這種布局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。
缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網站。
7、「三」型布局
這種布局多用於國外網站，國內用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。
8、 對稱對比布局
顧名思義，它指採取左右或者上下對稱的布局，一半深色，一半淺色，一般用於設計型網站。其優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。
9、POP布局
POP源自廣告術語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
(4)web界面布局擴展閱讀
網站伴隨著網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變得非常的重要。由於企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。
專業的網頁設計，需要經歷以下幾個階段：
1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
5、根據用戶反饋，進行頁面設計調整，以達到最優效果。
❺ web前端如何讓網頁布局穩定性和標准性
為了實現網頁布局的穩定性和標准性，我們可以從下面幾方面努力：
一、 <!DOCTYPE> 標記的重要性。
位 於文檔的最前面，用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標准 規范，我們必需在開頭處使用<!DOCTYPE>標記為 所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網頁作為有 效的XHTML文檔，並按指定的文檔類型進行解析。
<!DOCTYPE> 標記和瀏覽器的兼容性相關，刪除<!DOCTYPE>，就是把如何展示HTML頁面的權利交給瀏覽器， 這 時，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少中顯示效果，這是不被允許的。
二、合適地方用到合適的標簽
物盡其用人盡其才。 再合適的地方用到合理的標簽，對網頁布局和優化都有很多的好處，比如logo ，一般我們都用h1 標簽包括。 還有理解行內元素和塊級元素的區別。
一個頁面不要只用div，太多反而太泛濫了。table雖然用的少，但是，再做一些數據處理的時候，還是比較好用的。
三、站在標准流的角度看padding 和 maring 、width等屬性穩定性
我們知道頁面布局的時候，控制盒子位置距離等，有盒子本身大小，padding和margin來做。
因此，再這里我們會根據穩定性來看這三者的先後順序：
其中穩定性最好的就是盒子本身的高度和寬度了，我們優先考慮這個。 因此，很多情況下，我們會考慮利用高度剩餘法，寬度剩餘法來做，而不是padding和margin。
這個評論和下面的文本域框有個小距離， 此時，我們給這個評論一個h2標簽，高度正好從評論上方，到文本域上的高度就好了。
h2 裡面文字內容默認是靠左上對齊的，高度用不了，就剩下了，這就是高度剩餘法。
其次，我們才考慮padding ，因為padding也可以看做特殊的盒子高度和寬度，最後我們再用margin來做。因為margin會有邊距合並的問題。
四、標准流、浮動流和定位的穩定性
標准流再裡面是最穩定的，就是塊級元素上下顯示，行內一行顯示，都是最穩定的。
浮動和定位都「脫標」了，穩定性沒那麼穩定，所以，我們應該遵循如下原則：
頁面布局，能用標准流去做的不用浮動去做，如果要用浮動做的，就不用定位去做。
五、知己知彼百戰百勝
總會有特殊的瀏覽器，比如ie6 ，這些奇葩瀏覽器總是有自己獨到的地方，那我們怎辦? 兵法雲，知己知彼百戰百勝，因此，需要我們詳細的了解這些瀏覽器自己獨特的特性，或者掌握他們ie6常常出現的bug，以及對於css 的理解，那麼我們根據他們的不同解析，寫出合理的布局。
六、不要讓清除內外邊距帶來麻煩
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
這句話，大家都知道，清除瀏覽器樣式的。但是如果你不加，不同瀏覽器肯定顯示不太一樣。所以，css的第一句話就是它。還有就是要使用大部分瀏覽支持的css屬性不至於引起不必要的麻煩。
❻ web布局有包括哪些
網頁基本布局方式：
（1）流式布局
Fluid
流布局與固定寬度布局基本不同點
就在於對網站尺寸的側量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設置百分比，我們不需要考慮設備尺寸或者屏幕寬度大小了，可以為每種情形找到一種可行的方案，應為你的設計尺寸將適應所有的設備尺寸。流布局與媒體查詢和優化樣式技術密切相關。
（2）固定布局 Fixed
在固定布局中，網頁的寬度是必須指定為一個像素值，一般為960px。過去，開發人員發現960px是最適合作為網格布局的寬度，因為960可以
整除
3，4，5，6，8，10，12和15。在今天，在
web開發
中還是比較普遍使用固定寬度布局的，因為這種布局具有很強的穩定性與可控性。但是同時也有一些劣勢，固定寬度必須考慮網站是否可以適用於不同的屏幕寬度。
（3）彈性布局
Elastic
彈性布局跟流布局很像，主要不同是大小單位。彈性布局的大小單位不是像素或者百分比，而是em或者rem，避免了根據px局部在高解析度下幾乎無法辨識的缺點，又相對於%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示，需要一段時間適應而且不易從其他布局轉換過來。
（4）伸縮
Flex
box
使用
css3
Flex系列屬性進行相對布局。對於
富媒體
和復雜排版的支持非常大，但是存在兼容性問題。
（5）響應式
使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。優秀的響應范圍設計可以給適配范圍內的設備做好的體驗。
❼ web網頁設計和web前端有什麼區別
設計就是呈現的過程，前端設計是通過色彩/構圖/等元素賦予頁面性格和特點，前端也是展現，通過色彩先抓住自己的目標人群，通過設計表現自己。
當然這僅僅是是web前端設計的一部分而已，這被成為-界面設計。WEB前端設計實際上是網頁製作 ，經過web1.0進入web2.0之後網站的前端由此發生了翻天覆地的變化，網頁不再只是承載單一的文字和圖片,它除了設計還要掌握開發技術，如：HTML、CSS和JavaScript等。
網頁製作
網頁製作是Web 1.0時代的產物，產生在2005年左右。那個時候的網頁主要是靜態頁面。
靜態頁面就是能使用戶瀏覽網頁但不能與伺服器進行數據交互。例如，發布一篇文章，用戶只能瀏覽這個文章的圖片或文字，卻不能在網頁上發布評論。
可能一些人聽說過「網頁三劍客」，這個組合就是Web 1.0時代的網站開發工具。網頁三劍客指的是「Dreamweaver、Fireworks、Flash」3款軟體。
前端開發
現在的「前端開發」是從「網頁製作」演變而來的。互聯網於十多年前進入了Web 2.0時代，在Web 2.0時代，網頁分為兩種：「靜態頁面」，「動態頁面」。
靜態頁面與前文「網頁製作」所描述的相同。
動態頁面就是在靜態網頁中添加與伺服器的交互功能。例如，某一天，小藍有點難受打算看個小視頻緩解一下，他打開了一個存儲多年的網站，網站需要賬號和密碼，小藍輸入了自己的賬號和密碼，然後登錄。這個時候網站後台伺服器就會對這個賬號和密碼進行驗證，成功後才可以登錄。
Web 2.0時代，如果僅使用「網頁三劍客」來做開發，是不能滿足大量數據交互開發需求的。現在的「頁面開發」，更接近傳統的網站後台開發。因此，不再叫「網頁製作」，而是叫「前端開發」。
❽ web界面設計規范有哪些
一、網頁尺寸
製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是：可辨識性和易讀性。
網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種：
12px是應用於網頁的最小字體，適用於非突出性的日期，版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
❾ webstorm 怎麼調頁面布局
新建Scheme + 修改字體
ctrl+alt+s打開Settings界面，Editor > Colors&Fonts > Font。
Default scheme是亮色調，但我想定製一套暗背景的環境，所以在右側Scheme name下拉框中選擇Monokai，以此作為修改的基礎，然後點擊Save as，給自己新建的Scheme起個名字吧，如下圖：
這裡面可以設置字體（我一般選擇Consolas），字體大小，行間距。
自定義語法高亮
用ctrl+alt+s打開Settings界面，Editor > Colors&Fonts。
不同語言有各自的語法高亮規則，但有一部分是通用的（General），我們首先來設置General，然後再根據需要設置不同語言的語法高亮。
General的設置
普通文本：default text
折疊文本: Folded text
游標: Caret
游標所在行: Caret row
行號: Line number
TODO: TODO default
游標下變數高亮：Search result
搜索結果：Text search result
匹配的括弧：Matched brace
不匹配的括弧：Unmatched brace
未使用的符號：Unused symbol
左邊空隙（行號，斷點）：Gutter background
選中的文本背景色：Selection background
選中的文本前景色：Selection foreground
區分語言的設置
舉例來說，如果要更改Javascript的語法高亮，就在上圖中選擇Javascript，然後再進行詳細設置。具體設置項就不贅述了。
顯示行號 + 自動換行
如果用Vim編程，行號是非常必要的輔助。WebStorm默認是不顯示行號的，沒關系，顯示行號非常的容易。
只要在代碼左側的gutter區域點右鍵，就會出現下圖的菜單：勾選上Show Line Numbers即可。
另外，勾選上圖中的Use Soft Wraps就啟用了WebStorm的自動換行的功能，即過長的代碼行不會超出屏幕，不會出現橫向的滾動條。
值得一提的是，標準的Vim，jk是移到上一行下一行，如果代碼自動換行了，被分割成的兩行雖然看起來是兩行，但其實是一個邏輯行，這時候用jk是上移下移一個邏輯行。這種情況下，如果要從同一邏輯行的「第一行」移動到「第二行」，需要按gj，即先按g再按方向。雖然Vim提供了這個方法，但還是經常按錯。
好消息是，啟用了Use Soft Wraps的WebStorm不需要這樣，直接按j就可以從同一邏輯行的「第一行」移動到「第二行」。
導入導出設置
File > Export Settings導出用戶設置。如下圖，你可以選擇要導出哪些類型的設置，也可以選擇導出到哪個目錄下。
導出後的配置以jar包的形式存在，導入也同樣簡單，File > Import Settings，選擇jar包導入成功後，重啟WebStorm就大功告成了。
❿ web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。