網頁設計準備：創建圖像版式

2022-08-31 分類：網站建設

圖像版式是靜態圖像，它不會移動，可受用戶控制，是靈活的Web頁面。它們將與最終創建的頁面的在外觀上十分相近。然而，在創建版式的過程中還要執行很多操作步驟，以使其更接近最終的頁面，并且在對版式進行切片時更容易將它轉換成最終頁面。

設置畫布尺寸

當為固定寬度的設計創建版式時，很容易確定所需畫布的尺寸。只要決定最終的固定頁面的寬度，并且為畫布設置同樣的盡寸即可（或者可能將它設置得更大一些，如果對超出的空白區域也進行了設計，即使用戶使用超出固定寬度的尺寸，同樣也可以顯示設計圖案）。

當創建靈活設計時，以像素為單位的頁面寬度將因用戶而異，那你會為畫布選擇什么寬度呢？我想你有3種選擇：

a.選擇你認為的最小的設計寬度。

b.選擇你認為的大的設計寬度。

c.選擇你認為的大多數用戶都會采用的中等尺寸。

每種選擇都有它的優缺點。

1．匹配最小的寬度

在創建版式之前，應該決定設計的最小寬度（或你想讓用戶看到的最重要部分的最小寬度）。于是，你可以將這個最小寬度或與之按近的寬度作為畫布的寬度。這可以讓你確保所有一切都非常適合這個小尺寸。同時還可以讓你避免犯因疏忽而讓圖像過大以至于不匹配最小寬度的錯誤。

然而，設計成最小寬度也會有問題，這主要是因為最終的設計效果在得到延展后，一切看起來是那么的松散、稀疏。你不妨想象一下這個設計被拉寬后的效果，這樣一來，你便可以根據一個更寬的寬度范圍來更改設計了。

2.匹配大的寬度

除了最小的寬度外，你也許還要在設計里包含大的寬度——要么是你想要展現的壯麗的場景，要么是那些超出你意料之外的瀏覽者所期望的。如果你在設計中使用大的寬度來設定畫布的尺寸，就可以避免設計在較大的顯示尺寸下顯得過于松散、稀疏的問題，并確保文字的長度不會變得太長而難以閱讀。在切分設計版面前，你說不定還可以省卻修改版面的功夫了——見后續內容，通常，創建小于最終頁面的版面意味著在切分版面時必須延展版面，因此切片需要與所需頁面相同大小。

然而，以一個大的寬度設計可能會不經意地增添了設計的難度——它比設計小尺寸的空間要難一些。你也許會過度地放大圖像或者在設計中填入過多的“素材”（功能框、圖像、工具條），這樣一來，當頁面以較小的寬度顯示時，頁面看起來會非常擁擠并且很難閱讀。

3.選擇一個折衷的辦法

除了使用最小和大的寬度，你還可以選擇位于這兩種寬度尺寸之間的值用做畫布尺寸。看看哪種尺寸可能為大多數瀏覽者所使用，并將該尺寸用做設計尺寸。你可以將設計優化為大多數人想看的那種。

使用折衷的畫布尺寸可以幫助你避開那兩種缺點。但是如果你不仔細的話，它也可以讓你的設計更受兩種缺點的影響。例如，你應該讓設計的寬度跨越600像素到1200像素，并且創建一個寬度為900像素的設計。非常有可能，你會創建一個四不像的設計：圖像對于600像素的最小寬度來說不合適——太大，頁面元素和文本對于1200像素的大寬度來說太稀疏，很不容易閱讀。盡管就很多方面而言，這個設計都非常了不起，但是它始終有一個缺陷：在兩個極端的寬度尺寸（而非一個）都存在問題。然而，當你采用位于它們中間的尺寸瀏覽時，這些問題的嚴重性又將得到不同程度的緩解。對于大多數設計而言，中間寬度可能足的-一在整個設計過程中，要謹慎小心并且持續不斷地考慮以其他可能的寬度顯示的情形。始終要牢記的一點是，最終創建的Web頁面不是一個靜態的頁面，它將是一個靈活的頁面。

標題名稱：網頁設計準備：創建圖像版式
文章位置：http://m.kartarina.com/news/194385.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、ChatGPT、小程序開發、網站維護、響應式網站、全網營銷推廣

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容