Web網頁設計標準之常見問題
引導語:網頁的設計需要考慮的問題比較多就,例如移動端與pc短的兼容性等,以下是小編整理的Web網頁設計標準之常見問題,歡迎參考閲讀!
Q:網頁設計的尺寸是多少?
製作網頁時,我們選用的分辨率是 72像素/英寸,使用的畫布尺寸1920*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的佈局主要有兩種,左右型佈局 和 居中型佈局。佈局的不一致,使得可設計的空間也不相同。
左右佈局,靈活性強, UI 的限制小;
左邊通欄為導航欄,寬度沒有具體的限制,可根據實際情況調整;
右側為內容版塊範圍,是網站內容的展示區域。
居中佈局, 中間的黃色部分為有效的顯示局域,用於網站內容的展示;
換句話説,兩邊均為留白,沒有實際用途,只是為了適配而存在;
內容顯示的區域,最好控制在 1000-1200px。
Q:選擇什麼樣的字體?
字體設計的總原則是:可辨識性和易讀性。
中文建議使用 微軟雅黑 字體,英文則建議使用 arial無襯線字體,常用的字體字號大小有以下幾種:
12px 是應用於網頁的`最小字體,適用於非突出性的日期,版權等註釋性內容。
14px 則適用於非突出性的普通正文內容。
16px 或者 18px 適用於突出性的標題內容。
網站的字體大小並沒有硬性規定具體的字號,根據實際情況可以酌情考慮,但是要 優先使用偶數字號。
字體規格也不需要太多,最好使用三種混搭。
如果需要更多層次的區別,可以用改變字體顏色或者加粗的方式來實現。
Q:字體間距舒適範圍是多少?
相鄰兩個文字的間距,其實不需要太過介意,除了特殊的需求之外,都可以使用默認數值的間距。
行間距,推薦以 字體大小的1.5—2倍 作為參考;
段間距,推薦以 字體大小的2—2.5倍 作為參考。
即,當選用14px 的字體時,行間距:21—28px;段間距:8px—35px。
Q:字體顏色設計技巧?
主文字顏色,建議使用 公司品牌的VI顏色,可提高公司網站與公司VI之間的關聯,增加可辨識性和記憶性。
正文字體顏色,保險起見,選用易讀性的深灰色,建議選用 #333333到#666666 之間的顏色。
輔助性的,註釋類的文字,則可以選用#999999之類的比較淺的顏色。
如果,你對顏色駕馭能力比較強,你也可以選用 偏公司VI顏色的深色,作為正文字體顏色或者輔助性文字顏色。
例如公司的品牌色是藍色,那麼,正文字體就可以選用偏藍的深色。
這樣處理之後,文字就帶有了環境色,網站整體色調將更加和諧。
Q:其他需要注意的事項有哪些?
做網頁設計時,你還要特別 注意網頁的首屏內容,在構圖和內容呈現上,首屏模塊的設計至關重要。
除去任務欄,瀏覽器菜單欄以及狀態欄的高度,剩下的是首屏的高度。
Window XP的首屏高度平均值是580px,Window 7的首屏高度平均值是710px。
綜合考慮到Window XP已經逐漸退出市場,在實際操作時,我們 以710px 作為依據。
如下圖所示,黃色的區域則是我們設計時需要着重考慮的首屏範圍。
另外,是關於圖片尺寸的問題。
需要全屏顯示的圖片,寬度尺寸嚴格設計為1920px。
但是值得注意的是,圖片內容的有效範圍不能超過網頁內容的有效範圍,即 控制在1200px以內。
避免遇到小屏幕設備時,內容顯示不全,而造成信息的遺漏的情況。
-
Dedecms中常用數據調用的sql語句
本文實例彙總了Dedecms中常用數據調用的'sql語句。分享給大家供大家參考。具體如下:{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=1"}共有文章:[field:c/]篇{/dede:sql}{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=2"}共...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript閉包的高級使用方法
擴展Code:複製代碼代碼如下:varblogModule=(function(my){hoto=function(){//添加內部代碼};returnmy;}(blogModule));Say:將自身傳進方法,然後實現了方法的擴展,有點象零件組裝啊Code:複製代碼代碼如下:varblogModule=(function(my){varoldAddPhotoMethod=hoto;...