圖文排版

H5

手機版秀米

正文字數：2935字

閱讀時間：9分鐘

在了解什麼是布局之後，希望你心裡已經閃爍起了一盞“探照燈”，現在就可以打開編輯界面跟随步驟嘗試了，本章内容勝在實戰。

如何制作各種并列結構，如何制作個性的小零件小标題，各式各樣好看的排版樣式是怎樣依靠布局完成的，這個章節都會具體講解。

步驟①：點擊“布局”标簽下的“基礎布局”

按默認排序，這裡已經躺好了很多藍色線框，此時鼠标懸停上去，可以看到提示“單列布局”、“二列布局”、“三列布局”……“多列布局”。顯然，布局将單行分割為多列，每列放入不同内容，左右并列的圖文效果就迎刃而解了。

步驟②：點擊第三個“二列布局”

在點擊此布局後，文章增加了兩個并列的灰色粗框，頁面也跟随改變寬度，這是因為“布局模式”被打開了，正是文章右側的第一個格子狀開關。在這個模式下，文章的結構能夠直接顯示，更方便我們編排版式。

步驟③：在第二列内，根據提示雙擊輸入标題文字；從圖庫拖入一張貼紙放入左側；點擊右側按鈕關閉布局模式

在“布局模式”下，可以往結構内添加内容；關閉布局模式可查看最終效果或者微調。

步驟④：

此時一個有圖片裝飾效果的标題就完成了。

現在，可以看左邊模闆區，哪些版式是這種類似的左右結構呢？不得不說，絕大多數模闆都是此類結構，包括兩側有圖片點綴的小标題，一側圖片一側文字的正文版塊，還有并列兩圖三圖四圖的效果，都是這些布局讓他們左右分割得如此鮮明。不要淺嘗辄止，這是構建宏偉設計藍圖的開端哦。

1.1

調整布局結構與基本樣式

在布局模式下，灰色粗線框代表了布局内容，反映了版式的結構。

步驟①：點擊“布局”标簽下的“基礎布局”，點擊第一個“單列布局”，點擊灰色線框

此時灰色線框外圍出現紅色虛線框，他們對應彈出的“布局”調整欄；整個行塊外圍出現了黑色實線框，對應彈出的“組件”調整欄。

此前對文字和圖片調整過程中，我們接觸了他們相應的調整欄和參數，布局同樣也有自己的調整項目。包含了增删結構、調整寬度、外觀、對齊與分布等。當然，整行布局等同于有結構的組件，在制作模闆時也常用“組件定位”。下面就針對着幾個功能作詳細的講解。

1.1.1

增删結構

步驟①： 在布局工具條，點擊第一個按鈕，選擇向右插入

這個按鈕可以對當前選中的列進行删除與左右增加，若勾選“插入時複制”，設定列數，則會将相同内容填入新增的列中。

步驟②：将圖片拖動到布局的側邊，以增加結構

想要将内容直接添加到該列的側邊，也可以直接拖動，吸附位置會以藍色提示，這是個更加高效直觀的添加方式。

1.1.2

調整寬度

在增删結構的時候，細心的你會注意到調闆中“寬”這個數值的變化嗎？在改變結構的時候，布局會自動調整每列的寬度。我們也可以主動更改或修正。

步驟①：輸入更小的寬度與更大的寬度數值

在輸入寬度的時候，也可以使用鍵盤上下鍵快速調整，你會明顯看到更寬與更窄的區别，布局内的内容如文字、圖片都會受到列寬的影響，并且每列相加的數值超過100%會發生斷裂，這點需要我們在後續對“相對單位”這個概念進行更深的探讨。

如果布局内有圖片，回顧我們在一開始調整布局内圖片寬度的步驟，調整布局寬度與内容寬度都可以進行闆塊内容的收放；但是需要将内容寬度與布局寬度區分開來，此時直接調整内容，沒有影響内容外層布局的結構與寬度。

1.1.3

調整外觀

布局看起來都是方方正正，貌似隻能當成結構，塞點文字圖片才能把場面撐得起來？

No！他可圓可方，可柔可剛，進可作結構，退可爆顔值，就看你如何為他裝點背景、邊線、弧度或者陰影。

步驟①：創建一個三列布局，選擇第一列，點擊色盤可調整填充色彩；展開右側三角可選擇填充背景圖，按照提示可選擇各種填充方式

布局可填充背景為純色、漸變、圖片；其中圖片可選擇填充方式，方式為不重複且拉伸時，背景會跟随内容面積産生變形；漸變填充時默認使用此填充方式。填充的不透明度完全取決于顔色或圖片本身的不透明度。

步驟②：選擇第二列，點擊“邊框”選項，樣式更改為“實線”，尺寸設置為2，更改一個半透明顔色

每個布局都可以分别設置上下左右邊線的樣式、尺寸、顔色，線框的不透明度取決于顔色本身。

因此，橫向的分割線是否可以不再依賴于組件标簽下的默認分割線了呢？除此之外，當左右兩塊文字并列時，是否也可以通過設置單側邊線來實現呢？

步驟③：選擇第二列，加入圖片與文字等内容後，點擊“邊框”選項，設置弧度為10px，觀察效果；設置為100px，觀察效果；更改單位為“%”後設置30%，觀察效果；設置為50%，觀察效果

弧度以像素為單位時的效果

弧度以百分比為單位時的效果

當單位不同時，“弧度”的效果也不盡相同。固定半徑為10px時産生了俊俏的微弱圓角，更大時産生了膠囊形狀的可愛畫風；當半徑為百分比單位時，10%時産生了一種圓角被拉伸的效果，大于等于50%時形成橢圓。

除此之外，布局内的内容似乎被圓角遮擋而不能顯示完整，這部分被遮擋内容稱作“溢出”，當某個角的弧度被置0時，溢出部分就會完整顯示。

步驟④：點擊第一列，點擊“陰影”選項，調整為“水平10像素、垂直10像素、模糊4像素、外部陰影、灰色”

在調整的時候注意觀察效果，不同的參數可以形成不同的效果。

當選擇暗色時，可以是陰影，當選擇亮色時，他就是發光效果；隻需要調整好方向就可以營造出不同氛圍。

内部陰影甚至可以搭配純色背景産生漸變效果、白色内部陰影搭配圖片背景産生邊緣虛化效果等。單一樣式可能很普通，但是各種樣式的組合會産生各種意想不到的效果。

步驟⑤：點擊第一列，點擊“格式刷”圖标，選擇向右應用格式，觀察效果；選擇向右全部應用，觀察效果

向右應用格式時，會将所有的效果直接應用，也包括寬度等，隻要是該工具條可調整的數值，都會全部相同。

1.1.4

對齊與分布

步驟①：

三列的布局中放入不同高度的内容，每列布局均設置邊線；點擊其中一列，點擊垂直對齊按鈕調整垂直對齊方式

同一行的布局垂直對齊時以整體的上邊界、中位線、下邊界進行對齊，這裡的“整體”是指被選中的整個布局組件，也就是黑色線框部分。

步驟②：選中第一列，點擊“間距”，調整其上下左右距離，分别觀察各個數值帶來的直觀的變化

這裡的“間距”具體指布局裡的内容到布局上下左右紅色虛線邊框的距離，在每個數值輸入左方顯示的項目為“邊距”。

步驟③：選中第二列，将其寬度調小，點擊“列定位”按鈕，調整其上下左右距離（正負值均可），分别觀察各個數值帶來的直觀的結構變化

在布局為多列時；會出現“列定位”選項。此時可以看到，“列定位”的數值變化使得布局結構發生了變化，布局間産生了距離感，數值為正時遠離，為負時拉近直至重疊；因其呈現了位置變換的效果，故名“列定位”；也可理解為“列間距”，即相鄰列之間的距離。

對比一下上述兩者産生的分布效果，“間距”選項擠壓了内容，使之遠離了邊線，但并未改變各列的結構；“列定位”選項直接改變結構，使列與列産生了距離。因此，在實際使用這兩個分布效果的時候，要酌情選擇。

1.1.5

定位變換

理解了“列定位”後，我們掌握了各列之間可通過更改距離來控制位置；但如果并沒有出現多列結構，如何調整位置呢？

比如，單列的時候，再或者，隻是單純想調整文字或者圖片的位置時，并不會出現“列定位”選項該怎麼辦。

在基礎部分，講解到通用調整欄時，我們就知道，圖片、段落、布局等都是以“塊狀”的結構出現的，通用調整欄對應了黑色實線框的内容，這部分統稱為“組件”；因此，在“組件”調整欄中，“組件定位”選項給出了解決方案。

步驟①：添加圖片與文字，縮小圖片寬度，點擊“組件定位”，調整其“組前距”（正負值均可）、“組後距”（正負值均可），觀察變化；調整左中右對齊，觀察變化；調整“偏移”，觀察變化

調整數值時可使用鍵盤上下鍵快速調整，被選中的整塊内容都會随之發生位移。

不難理解，“組前距”、“組後距”分别指上下組件之間的距離；此時聯想“列定位”，他們實則是相通的，都是通過改變相互之間的距離産生的位置變換。列之間距離變化導緻左右位置變化，那麼行之間距離變化，自然就會導緻上下位置變化。

單個組件并沒有誰和他産生并列關系，左右位置就隻能靠“偏移”這個參數進行調整，屬于自身位置變換效果。這就是相互距離導緻結構位置調整與“偏移”的區别。

步驟②：創建一個三列布局，縮小各列寬度，調整左中右對齊

回顧前文中“垂直對齊”，是以黑色線框為參考，以整塊組件占領的空間邊界為限上下橫跳，對應到這裡的水平對齊，則是以該空間的左邊界、中軸線、右邊界為參考進行對齊。

1.2

本章小結

本期高級教程，主要從如何識别布局開始，到添加布局，增删布局結構、調整寬度、調整外觀、對齊與分布、定位變換等5個小分類講解。

看完本期教程，應會對布局的結構、布局工具條上的屬性設置有了簡單了解，當然最好的就是跟着做一遍，把工具條上的按鈕都戳戳，時間長了就懂了。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部