統雄社群-相關主題
Shape and Border,背景與邊框
Division,區域
Inline Frame,內置框架
Favicon,網址標誌
Embedded Map,內嵌地圖
Photo Gallery,照片藝廊
Other,其他圖文框
Trouble Shooting,疑難雜症
數位出版設計:意涵/樣式篇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>

出現以下效果:

背景與邊框

彈性空間設計

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

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

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

〉套用樣式

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

Html4 以前的設計

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

>Format-Borders and Shading

You may apply this function to any object.

TxAdvanced 網頁空間 div 垂直置中

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

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

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

Positioning

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

浮動高度 垂直置中 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>

 

Positioning

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

total widthThe 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>

Positioning

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


內置框架 Inline Frame

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

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

通常只使用在「範本」上。

警告:Html5 的內置框架與 Html4 有重大差異

Html5 的內置框架由於有多項重大變更,Html4 時代的設定,幾乎近全部停用,而改為CSS, Java 設定。不過,各瀏覽器仍然支援從前的各項設定。

如不習慣,可以使用微軟機器人的共用網頁,功能近相同。

用法:在程式碼內,加入以下微軟機器人:

<!--webbot bot="Include" U-Include="Path 共用網頁路徑" TAG="BODY" --> 

使用 Expression Web/ SP:

>Insert 插入

>Html

>Inline Frame 內置框架

自行設計程式:常用屬性,只剩3個了。

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

http://tx.liberal.ntu.edu.tw/!txtemp/new.htm

<iframe src ="http://tx.liberal.ntu.edu.tw/!txtemp/new.htm" width="240" height="260" >
</iframe>

社群新聞

SharePoint 衝突 當前正值Html 換代過渡期間,會發生 SharePoint 衝突: XHTML 1.0 不允許 target,但 SharePoint 會自動加回來。

內置框架和共用網頁的異同

內置框架和微軟機器人的共用網頁都可以嵌入共用的網頁。

共用網頁使用主網頁的CSS,而內置框架使用內置網頁自己的CSS

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

Html5 iframe Background Images

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

迄 2017 年初,網路上回答以上問題者,均限為 Html4,而完全無法適用 Html5。

統雄老師特回答如下,在內置網頁上,應有 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 重傳而更新,易誤解為修改失敗。

iframe sandbox Attribute 內置框架的「沙盒」屬性 iframe sandbox Attribute 內置框架的「沙盒」屬性

html5 的<iframe> 特別提供「沙盒」屬性,「沙盒」就是作為測試,但「沙盒」內連結來的網頁,不能正常作用,如連結會失效。故網頁設計完成後,要特別檢查取消「沙盒」屬性。 


Embedded Map內嵌地圖 Embedded Map

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.

map1

>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.

map2

An example: Map of the NTU Midi Lab 


Photo Gallery相片藝廊 Photo Gallery

>Insert

>Web Components

>Photo Gallery

Choose a desired template.

Photo Gallery

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

Photo Gallery 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.

Photo Gallery

外加藝廊程式 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程式位置(絕對路徑)


advanced其他圖文框 Other Blocks

Ad objects, Banner, button, skyscraper etc.

立體圖片新趨勢 3D New Trend

111 Giga Pixel Picture


advanced圖文框設計疑難 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.

斷字問題

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題