Blocks: Objects

Web Design: Blocks - Epistemological/Digital Aesthetics - Formation Methodology

網站/網頁設計:圖文框實作-知識美學/數位美學之建構方法

Blocks include pictures, tables and other objects such as division, shape and border, inline frames, embedded maps, photo gallery... etc.

Division <div> 區域命令的設計

背景與邊框其實就是<div> 區域命令的設計。

在 Html5 時代，宜先以CSS設計背景與邊框的視覺風格，可參考 tx-14.css 範例檔。

在 Html5 時代，在範本中的區域規畫，應用 <div> 命令；但在各別網頁中，也可使用表格。

Shape and Border 背景與邊框

背景與邊框樣式應設計在 .css 檔案內，如非特別需求，避免在單獨頁內設計。

<div>的背景與邊框-固定空間設計

在〈程式碼〉中，撰寫以下命令：

<div style="width: 300px; height: 100px; "></div>

設定區域的範圍，再於程式編號左側、點選該命令全段。

再在〈設計〉介面中，可看到點選區域。

〉套用樣式

練習應用 CSS 不同背景與邊框樣式的效果。

唯此固定空間設計法，必須對頁面尺寸計算十分精準，否則容易出現意外、或不佳視覺效果。

<div>的背景與邊框-彈性空間設計

以上程式為固定空間設計，為避免「框頂框、線頂線」的不佳視覺效果，宜改為彈性空間設計，亦即將屬性：height: 100px;刪除。

在〈程式碼〉中，改寫為以下命令：

<div style="width: 300px; " class="boxy">
<h4>背景與邊框</h4>
<h4>彈性空間設計</h4>
<p>以上程式為固定空間設計，為避免「框頂框、線頂線」的不佳視覺效果，宜改為彈性空間設計，亦即將屬性：<span class="backpink">height: 100px;</span>刪除。</p>
</div>

出現以下效果：

再於程式編號左側、點選該命令全段。

再在〈設計〉介面中，可看到點選區域。

〉套用樣式

再練習應用 CSS 不同背景與邊框樣式的效果。 

Html4 以前的設計

以下作為使用舊版者參考。

>Format-Borders and Shading

You may apply this function to any object.

網頁空間 div 垂直置中

<div> 區域命令的設計和段落設計原則相同，只有「垂直置中」必須特別設計。

如果一般設計，會發生不垂直置中的情形，如下例。

<div style="width: 240px; height: 44px; border : 4px ridge #0000FF; background-color: #FFFF99" class="center">
<h4>Positioning</h4>
</div>

修正的方法，有以下方案。

浮動高度 垂直置中 Box Model 設計法

如果可以浮動高度，就採 Box Model 設計法，詳細設計上下的 border 與 padding 空間。

You may use <div> instead and encode the tag manually.

<div style="width: 240px; border: 4px ridge #0000FF; padding-top: 10px; padding-bottom: 10px; background-color: #FFFF99" class="center">
<h4>Positioning</h4>
</div>

Padding-right and height are able to be omitted when class="center" are used.

The total width is the sum of "width" and "border" * 2. Here is (240 +(4*2))=248 px.

固定高度 垂直置中設計法 line-height 應用

如果不想詳細計算各空間，且就已知固定高度區域範圍內，作文字垂直置中並不容易，且各瀏覽器可能發生誤差。

適用各瀏覽器的垂直置中簡易法如下：

<div style="width: 240px; height: 44px; border: 4px ridge #0000FF; line-height:44px; background-color: #FFFF99" class="center">
<h4>Positioning</h4>
</div>

其中最重要的，就是line-height 應用，即 <div> 高度固定為44px，設line-height:44px，就可自然達成垂直置中。

overflow 當內容物大於外框

當內容物大於<div>外框時，預設為內容物超越外框，如果要調整，就要使用 overflow 屬性，此例為加上捲軸。

<div style="width: 300px; height: 300px; overflow: scroll;" class="boxy">

其他可用值：
hidden;
auto;
visible;

等同的 Java 為：
JavaScript syntax: object.style.overflow="scroll"

在 html5 後，亦適用於以下之：iframe。

內置框架 Inline Frame

RWD 設計神掌

內置框架廣泛應用在網頁平面設計的分區設計上，可在同1頁面上整合呈現不同網頁，甚至是來自不同伺服器的網頁。

新聞區、使用者自訂區，多使用內置框架設計方法。

RWD 的 css3 的 iframe，在發表初期屬於「待定」，故本講義的 V8 版有長篇補敘，唯當前已經定案，且無舊版維護價值，本版全部刪除 。

Html5 的 iframe

改用 style 設計屬性。

度量使用 % 可達成 responsive。

若作 RWD，避免使用 Expression Web/ SP 之： >Inline Frame 內置框架

改為自行設計程式：常用屬性減少如下。

It is also very easy to use htm coding. You may design a frame for "Community News" from:

../../TxNews.htm

<iframe src ="../../TxNews.htm" name="TxNews" title="社群新聞" style="width:50%; height:400px; overflow: scroll;" >

社群新聞

程式其他表現方法

<iframe src="../../TxNews.htm" name="TxNews" title="社群新聞" style="border:none; height:400px; width:100%" >
</iframe>
overflow 預設為自動。

border:none 通常在「範本」中使用，有「無縫」效果。

PDF 如何加入網頁

在HTML中嵌入PDF並使其具有響應性，可以使用以下方法。

<iframe>法

<iframe src="DP_3Stages.pdf" style="width:100%; height:800px; border: none; ">

其中 style="width:100%;" ，即設定<iframe>的響應性，但 pdf 檔案不會響應。

 height 無法設 %。即使設 overflow:hidden，文件超長，仍會顯示  scrollbars。

以下<object>或<embed>法，較不推薦優先使用。

<object>法

<object data="path/to/your.pdf" type="application/pdf" style="width:100%; height:800px;">
<p>看來您的瀏覽器沒有PDF插件。沒關係...您可以<a href="resume.pdf">點擊這裡下載PDF文件。</a></p>
</object>

<embed>法

<embed src="path/to/your.pdf" style="width:100%; height:800px;" type='application/pdf'>

Bootstrap 法

可以使用embed-responsive類，並將padding-bottom設置為高度除以寬度加上工具欄的一點額外空間。

例如，要顯示8.5 x 11的PDF，使用130% (11/8.5) 加上一點額外的空間 (20%)：

<div class='embed-responsive' style='padding-bottom:150%'>
<embed src="path/to/your.pdf" type='application/pdf'>
</div>

這個方法 PDF文件的響應性。

Html5 內置框架內的內置網頁背景

Html5 iframe Background Images

內置框架內的內置網頁背景‧如何與父網頁相同？

統雄老師特回答如下，在內置網頁上，應有 3 大設定，即可與父網頁相同。

內置網頁不要連結 .CSS 檔案

如刪除預設之：

<link rel="stylesheet" type="text/css" href="default.css" />

內置網頁設定 Embedding (Internal) Styles 頁內樣式

設定 Embedding (Internal) Styles 頁內樣式，如以上社群新聞之設定：

<style type="text/css">
body { font-family: "Times New Roman", 標楷體; font-size: 16px;}
p { font-size: 18px; font-family:"Times New Roman", 標楷體; }
h6 { font-size: 20px; color: #000080; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS",微軟正黑體; margin-bottom: 4px; margin-top: 0; }
.hilite { color: #800080; }
.small { font-size:14px; margin-top: 0; margin-bottom: 0 }
.bold { font-weight: bold; color: #666666; }
.border0 { border: 0px; font-family:"Times New Roman", 標楷體; font-size: 20px; text-align:left; vertical-align : top; margin-top: 0; margin-bottom: 0 }
.note { font-size: 16px; font-family:"Arial Narrow","Trebuchet MS",微軟正黑體; color: #000080; margin-top: 0; margin-bottom: 0px; margin-right:1px }
</style>

內置網頁設定背景為透明

如：

<body style="background-color:transparent"> 

修改內置網頁設定重要警示

修改內置網頁設定後，須清除瀏覽器內之已閱覽網頁。

內置網頁若只改設定，無法經由一般 reload 重傳而更新，易誤解為修改失敗。

RWD 內置框架<iframe>

<div class="container">
<iframe class="responsive-iframe" src="path"></iframe>
</div>

更多資訊：How To Create Responsive Iframes (w3schools.com)

內嵌 Google 地圖 Embedded Map

常用 Google 地圖，在網址輸入：https://www.google.com.tw/maps/

注意：版本不同，有些內嵌的名稱為〈分享〉，有的為〈連結〉。

又，有些教室的設定，會阻擋〈分享〉功能，但一般電腦不會阻擋。

〉輸入地址，如臺大計算機中心

〉分享：出現〈分享〉對話框；預設為〈傳送連結〉，改按：

〉嵌入地圖

〉複製 HTML

貼到網頁之程式碼中。

原始程式中之 width="100%"，可改為 width="100%"

嵌入效果如下：

其他版本之設定如下，如另有不同版本，請舉一反三。

Google map is the best choice.

>My map

>Create new map

Use "Pin" to decide the location and then give it a title and description.

Click "User define" if you want to modify the size other than the default.

>Link

It will return 2 links that are for email and HTML (a <iframe> tag).

Copy and paste the HTML to your web that can be modified later.

嵌入物件 Object

嵌入物件在 Html4 之前廣泛應用在網頁嵌入媒體上，在 Html5 之後，功能轉移，語法大變。

當前 通常只使用在嵌入 pdf 檔案上，必須加入屬性  type="application/pdf。

Html5 的 iframe

改用 style 設計屬性。

度量使用 % 可達成 responsive。

在手機上可能沒有作用。

舉例如下：

<object data="Sampling_HouseholdSelection.pdf" style="width:100%; height:600px; overflow: scroll;" type="application/pdf"></object>

實務應用上，以 內置框架取代較多，等同：

<iframe src="Sampling_HouseholdSelection.pdf" style="width:100%; height:600px; overflow: scroll;" >

相片藝廊 Photo Gallery

>Insert

>Web Components

>Photo Gallery

Choose a desired template.

Choose "User's CSS" fonts (The Chinese translation is a little bit confusing.). Another option is for inline setting.

Warning: There is a bug of SP that the default setting does not work automatically.

You have to click the 2nd option, then go back to click the 1st option to trigger the CSS' function.

The dialogue box will appear. Click "Yes" to use your CSS.

外加藝廊程式 Gallery Scripts

如：minishowcase

或其他更多選擇。

嵌入相簿網頁 Embed Picture Album

Picasa 雲端相簿

Picasa 是 Google 提供的免費雲端相簿網站。

Since the heavy time and resource consuming of the implementation of web album, a new convenient solution is to use external free album sites such as Google's Picasa.

However, it is a necessary idea that keeps the original copies on your local site.

如果已經有Picasa相簿了，可以使用PWA(Picasa Web API)作一張相簿頁，用一句語法就可以把Picasa相簿嵌入網站中。

先到http://sourceforge.net/projects/pwa/files/pwa/pwa/

下載pwa.js，這個網站很煩，沒有一般下載網站的下載圖示，要按Tab的Files，才能以類FTP方式下載。

程式存到網站後，將以下語法貼上相簿網頁：

<script type='text/javascript'>
username = 'Picasa帳號名稱'; photosize='800';
</script>
<script type='text/javascript' src='http://網站網址./pwa.js'></script>

username：Picsaa帳號名稱
photosize：單張時的圖片尺寸
src：JS程式位置(絕對路徑)

其他圖文框 Other Blocks

Ad objects, Banner, button, skyscraper etc.

立體圖片新趨勢 3D New Trend

111 Giga Pixel Picture

圖文框設計疑難 Trouble Shooting

斷字問題 Wrong Display of Icon and Text

An icon/pic and a text with hyperlink may cause the following trouble.

You may leave a blank space between the icon and the text.

Or, you may mark the pic and the text together then use 'Picture Property' to re-set the alignment to the left. So that the browser will not move the texts to the next spaces.