關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
More
社群地圖
社群新聞
│吳統雄
履歷
研究
教學
服務
榮譽
│社科
第1類知識
第2類知識
第3類知識
研究方法
統計/多變項分析
投票行為與選舉預測
53237 選民結構
人類取用行為新典範
取用行為國際研究團隊
│資管
管理學‧經濟學
貨幣主義
數位貨幣‧投資行為
資訊系統開發
電子商務
網路教育
數位電視
產學合作
就業進修‧甄選必勝
│文創
數位美學/數位文創導論
數位出版/電子書
視覺設計
優化網站
數位視訊/微電影
數位文創管理
大學青年‧網路雜誌
│電音
統雄 數位音樂作品選
我,被禁唱的民歌手
數位音樂創作教學
統雄的音樂知識美學
歡迎聽歌.點歌.下載樂譜
│人文
公共評論
法律評論
社會評論
教育文化傳媒評論
科技科普評論
美語樂學
文學創作
萬象現代(NBA)
資訊社會
幽默人生
統雄樂水
Context 意涵設計

Other Font Presentations and Font Style Design
意涵-文字視覺-的設計 其他字特徵的呈現與配樣式

數位出版設計:意涵/樣式篇Web Design: Context/Text/Context - Epistemological/Digital Aesthetics - Formation Methodology

數位出版設計:意涵/樣式篇網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法

The meaning of your content should be supported by the visual imagination of your font style.

網站/網頁設計:意涵/文字:屬於美學的統一元素,包括字碼設定,字的預設,字的呈現:字體+字級+字比率+字變化+字間距+字顏色,字的編號,字的位置-方塊模型與定位,層疊樣式表(Cascading Style Sheets, CSS)應用等。


字比率:表現協調

 


字變化:表現強調部分

基本變化

動畫


字位置:平衡對比

縮排與定位鈕


字間距:清析美觀

外框字與內框字

字距

行距


字顏色:選色與配色

字顏色另以專題系列介述如下:

數位色彩系統與數位調色盤

色彩心理學

TX選色與四大配色定律 


中文基本字型

基本字型通常就是第一內文,既以穩重理性為主,當以明體為首選。

但明體是外框字、有角字,小字會黏在一起,非常不易閱讀,在排版專業上必須作進一步處理。

對政府部門而言,缺乏排版專業,不便也不會去深思許多技術問題,而必然以易讀為優先,性格等美學感受為後,所以行政院明訂「政府文書格式」的字型為「楷書」。

而在網路應用上,除了以上技術問題外,還有:內碼、系統字型、各種瀏覽器配合、CSS語法維護、國際化通用能力…更多考量。

楷書並不是網頁設計的「最佳」基本字型,但在易讀、技術、法令、國際化的綜合權衡下,卻是當前「最適」的基本字型,這也是本社群在 html5/CSS3 之前,以楷書為基本字型的原因。唯在html5/CSS3 成熟之後,可以考量變更。 


網頁配樣式 Font Style Design

網頁上如何根據文字的功能、性格、重要性…,設計不同的字型,稱為配樣式 Font Style Design。

這裡的,Style 不是廣義的「風格」,而是字各種特徵設計後的總稱,狹義、專義的「樣式」。

Page Font Default 網頁基本字型的預設

Set up your default font by the step as follows.

在網頁編輯器中,必須設定網頁基本中文。

由於當前中文環境的限制,除了新細明與標楷外,其他各種樣式在使用者端,可能均以新細明呈現,不利閱讀,故在可見的未來,宜一律預設為「標楷」。 

Tools-Page Options

在視覺設計巳由 CSS 成為主流的今日,其他字的預設應均在.css 檔案中設定。


Text Size 中文內文字級設定

中文內文字級設定,以常用單位分,適當設計如下:

內文字級設定 以px為單位

中文內文字級設定以 16px 為佳。

內文字級設定 以pt為單位

Under 800*600 screen : 12-14 pt (or 16-20 px)

Under 1024*768 screen : 14-18 pt

For public presentation: above 20 pt

It is a good idea to design 2 basic text style: one in moderate, the other in soft.

Title Size 標題字級設定

中文標題字級設定,通常為內文字級的倍數,適當設計如下:

General range: text size * 1.2~2.5

一般標題(h6~h1):1.2~2.5 倍

Emphasizing range: text size * 2.5-8

強調標題(使用者自訂標題):2.5-8 倍

If a size is larger than 'text size * 8', it indicates something dramatic.

特用標題,如超過8倍,通常有戲劇化突顯目的,如作為重大廣告等。

Banner Size 橫幅字級設定

中文橫幅字級設定,以常用單位分,適當設計如下:

中文橫幅字級設定以px為單位

中文橫幅字級設定,相當於標題1(h1):

 35~40 px 為佳。

中文橫幅字級設定以pt為單位

24~28 pt 為佳。

It is a good idea to use Arial Narrow for English.

中文 English

Proportional SizeProportional Size

Many browsers may use proportional size, so the final display may be different from your design.

Such as: 12pt = small, 18pt = large...etc.


Positioning: Box Model 字的空間:方塊模型與定位

The positioning of text and all other objects stand on the idea of "box model".

Content 表示文字與其他所有物件,其定位定義,都以「方塊模型」為準。

Margin, Padding  為透明區,而 Border 可以設計顏色。

Box model 方塊模型線上實作練習Box model 方塊模型線上實作練習

box model


URL Encoding 網址編碼特規‧網址%字串URL Encoding 網址編碼特規‧網址%字串

在網址上經常看到一連串以%連結的字串,這是 URL Encoding 網址編碼的特別規範,目的是讓特殊符號與非英文字,也能夠作為網址。

它的格式,是由 % 再加 2 個代碼組成。

常用URL Encoding 網址編碼%字串常用URL Encoding 網址編碼%字串

以下是 URL Encoding 網址編碼的轉換編輯器,也可以將%字串轉回為文字。

URL Encoding 網址編碼轉換線上實作練習URL Encoding 網址編碼轉換線上實作練習

回頁首 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
同類別內相關主題

上層主題
Web: 什麼是Web?Web虛擬世界的實體環境與虛擬環境 Web: Fundamentals
IIS: 什麼是 IIS?網站部署與IIS基礎應用 IIS: Fundamentals
Web的設計與管理模式 Web Design and Management Models
網路內容的製作與呈現類型 Internet Contents Presentation Types
Web Design Tools 網站開發工具
How to Expression Web/SharePoint Designer 微軟網站開發軟體應用快訣與其機巧
A Quick Canon for Expression Web 網站設計:Expression Web 簡捷建站功法
A Quick Canon for SharePoint 網站設計:SharePoint 簡捷建站功法
How to Html 超文件標註語言的結構、功能、應用快訣與其機巧
網頁語言 HTML5 簡介 HTML5: An Introduction
Web Analysis Framework and Its Formation Elements 網站/網群創作分析架構與建構元素
Web Design: Community Structure 網群結構
Website Structure_Navigation Design/ 網站虛擬結構:Extension Web 導覽設計
Website Structure_Navigation Design/ 網站虛擬結構:SharePoint 導覽設計
Web Design: Website Structure_Folders Design/網站實體結構:資料夾設計
Basics and Borders Method of Web Page Layout 網頁平面設計基礎與邊框法
Table Method of Web Page Layout 網頁平面設計表格法
Frames Method of Web Page Layout 網頁平面設計框架法
CSS Method of Web Page Layout 網頁平面設計CSS法
Web Design: Context- Presentation 意涵-文字視覺設計:字碼‧字型‧字體與字的性格
Web Design: Context- Presentation 意涵-文字視覺設計:字級‧字大小‧字重要性
Web Design: Context- Presentation 意涵-文字視覺設計:其他字特徵的呈現與配樣式
Web Design: Context- CSS 網站/網頁設計:意涵/文字-什麼是CSS
Web Design: Context- CSS Practice 網站/網頁設計:意涵/文字-CSS 實作
CSS Practice Advanced 層疊樣式表 CSS 進階實作_網站/網頁設計:意涵/文字
Web Design: Theme 網站布景主題設計
布景主題個人化 Personalized Theme
Web Design: Blocks- Pictures 網站/網頁設計:圖文框-圖片/影象處理
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格多元應用
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格與邊框設計
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格進階應用
Web Design: Blocks- Objects 網站/網頁設計:圖文框-非圖表物件
Webpage Layers Design 圖文層設計‧網頁圖層應用
Web Design: Automations-Links 網站/網頁設計:自動化與互動-超連結與導覽
Various Hyperlinks_Automations and Interactivity 各種超連結_自動化與互動
Navigation Bar Design 導覽列設計/微軟網路機器人 Webbot 法
Navigation Bar Design 導覽列設計/互動式按鈕設計法
Navigation Bar Design 導覽列設計/自訂 Java 法
Navigation Bar Design 導覽列設計/Html5 CSS 法
Navigation Bar Design 導覽列設計/下拉選單與樹狀導覽法
Navigation Bar Design 導覽列設計/雙導覽列_多導覽列法
Navigation Bar Design 導覽列設計/固定位置導覽列法
Information Map Design_Web Design 資訊地圖設計
Web Design: Automations-Webbot 網站/網頁設計:自動化與互動-網站機器人
Web Design: Automations- Advanced 網站/網頁設計:自動化與互動-雲端元件
Web Design: Multimedia 網站/網頁設計:多媒體影音應用
Web Design: Multimedia 網站/網頁設計:網路音訊與網路收音機設計
Web Design: Multimedia 網站/網頁設計:嵌入影音播放器標籤
網頁內嵌多媒體當機‧整體優解 QuickTime Plug-ins 7.7.4 has crashed
Web Design: Multimedia 網站/網頁設計:播放清單檔設計
網頁視訊與媒體播放器
在網頁插入微軟視窗媒體播放器
Insert Adobe Flash Player 插入Adobe Flash 播放器
Embed YouTube Player and iframe Tag 嵌入YouTube播放器與遠端影音之標籤
HTML5 Video: A Morning Glare Battlefield/ HTML5 媒體播放器:旭光戰場
Video and Media Player 播放器進階與視訊小工具
Web Design: Dynamic Templates 網站動態範本設計
Web Design: Dynamic Templates 網站動態範本應用
目錄管理與遠端編輯


內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍