圖層設計與圖文整合實作

Download Materials

Size Check 調整圖片原稿

If the image was directly form the digital camera, its size may be too large. You want to resize and/or resample.

Move the cursor on the targeted picture.

>Right click

>Re-sampling

Criteria of Picture/ Text Overlay Design 圖文整合設計重點

Structure: Depth, Readability of Overlap, Area Alignment of Objects
Visual Language
Dynamics and
Color Design

圖文整合層設計一樣要符合「視覺設計4元素」：結構、意涵、動力、色彩。

唯結構要特別注意「圖文重疊區的易讀性」。

Layer Design Techniques: Positioning, <div> and Z-index 圖層設計技術

圖層設計技術主要有3：定位、區域標籤、與前後索引。

圖層定位進階 Advanced Settings of Positioning

圖文框定位有4種定位，對單一圖片差異不大，但對重疊圖層影響深遠。

Static: 靜態位置

An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) .

預設狀況，即跟著前後物件物件上下移動，除了要作圖層，不設亦可。

Absolute: 絕對位置

An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties.

對「外包的區域元素」其邊界的絕對座標位置，也就是在頁面上，始終不動，使用的座標是左上右下。也因此，只要在外包元素內，放在程式任何一段均可。

使用圖層工具拉圖層時，預設均為絕對位置。但是，使用絕對位置，一定會和不在圖層內的物件產生重疊。對初學者而言，除非是作背景，否則非常困擾。

Relative: 相對位置

An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

對「鄰近的區域元素」至其邊界的距離，所以在程式中不能隨便移動。

相對位置在頁面上比較穩定，不怕前後文修改，是重疊圖層較佳的選擇，只是要在拉出圖層後，先改為相對位置、再重調整，手續較多，請參見以下實作之進階示範。

Fixed: 固定位置

An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 and after (strict mode) .

對瀏覽器而言的固定位置。使用在頁面捲動時，仍有必要持續顯示提示者。通常為小範圍，避免影響其他主題。譬如本網站的分類目錄：

Example: Table of Contents

語法是：

<div style="position:fixed;"> 

---

 <div> 區域標籤

>Task Pane-Layer

〉工作窗格〉圖層

>icon of Insert

"Insert" assumes the position is at the top-left of the page. You have to manually change the position, if it is necessary.

Fill in the bottom pic into layer1 as "1" of the Z-index.

>icon of Draw

"Draw" will set up an "absolute position" at the cursor indicates. You may move it when the cursor becomes a double cross. <Cotl> + <arrow> are for minimal adjustment.

Draw layer2 for the title base, layer3 for animated title. It is a "bleeding" design.

Draw layer4 for the subtitles, and to modify the fonts.

Layer5 is a subtle technique to cover an intruding object.

在「工作窗格」中開啟「圖層窗格」，格中有2種設計圖示。

「插入」會在最上端建立圖層，通常用來放基底圖。

這個方法產生的程式和以下相同：

>插入

>HTML

>圖層

「繪製」則可在任意點建立圖層。

將圖片拖入圖層中時要特別注意，不要拖到框外。可以在程式碼中檢查，是否在<div>標籤之中。

將絕對位置改為相對位置

此時產生的是絕對位置：

〉圖層-按右鍵

〉位置

改為相對位置：

 

此時，位置是錯誤的，從絕對位置變為相對位置。

所以要重新調整：以「雙十字」游標拉圖。

注意：必須在「工作窗格」內選取圖層-呈現反藍，否則可能拉錯成圖片。

 

再檢查：

〉位置

 

左、上皆為0。

注意；寬度與高度必須是px，不得為%。

Z-index and Visibility 前後索引與可見度

>icon Eye

Control the visibility.

>Right click "Z"

Change the order.

圖層可見度是由「Z軸高度」所決定，Z值愈小，愈底層；Z值大者，愈上層。彼此重疊時，Z值大者就可以掩蓋Z值較小之圖層。

在圖層工作窗格中，從小按到大，就可以一一顯示圖層，反之亦然。從工作窗格中回到設計區，會維持原來在工作窗格中的顯示狀況。

在工作窗格中，可以對任一圖層按右鍵、或按其左方的眼睛，在瀏覽時顯示或隱藏該圖層。

許多「黑心SEO」就是利用隱藏圖層搗鬼，不值得鼓勵。

可見度（眼睛，Visibility）的屬性除了顯示、隱藏、預設（繼承上層設定的意思，通常即為顯示），其實還有collapse，是對表格物件中的行列專用隱藏屬性。

Layer Border 圖層框線

>View-Visual Tools-Visibility of Borders

Uncheck the borders.

Solution for FrontPage

---

Text Layer 文字圖層

微軟機器人維護 

微軟機器人語法與HTML不同，應另行維護。 

---

絕對位置圖層避免重疊方案

避免絕對位置圖層與內文主頁發生重疊，可在圖層後加空白。如：

</div> 

<p class= style="margin-top:圖層高度px"></p>

絕對位置圖層與瀏覽器

以上方案與瀏覽器解讀有關，有些瀏覽器可能保留空白大小不一樣。