Visual Presentation of Web Context Design


Themes and Design Comp

網頁除了平面設計-也有文獻稱為藍圖-之外,還必須加上完整的共同視覺元素,過去稱為 布景主題 Themes ,近年也有術語稱為全設計 Design Comp,其中的 Comp,就是 Comprehensive 的縮寫。

布景主題包括:色彩設計與多種「識別標幟系統」, 微軟有提供布景主題範本,稱為但在 css 功能愈趨強大後,統雄老師建議直接以 css 設計法表現更具個人化的「識別標幟系統」。


go to "Bottom" for SharePoint. Most of functions and processes are for FrontPage only, go to css for related dedicated designs.

System Theme Banner

It is not recommended for now because of the emerging deprecation.

Expression Web/ SharePoint Expression Web/ SharePoint

Insert-Web Objects

>Common Contents

Or, you may use HTML tag as the follows.


<!--webbot bot="Navigation" S-Type="banner" S-Rendering="graphics"
S-Orientation B-Include-Home B-Include-Up U-Page S-Target -->

note FrontPage

Insert-Page banner

Option: picture

note FrontPage

Theme is a grouped set of fonts (styles), background, navigation buttons, and banner.

Theme is defined as the follows.

<meta name="Microsoft Theme" content="Theme folder name, Link bar name, ">


advanced Link bar name

1. "default" is the web's navigation bar. (FP uses it automatically)

2. Any name of "User defined link"


Choose a theme whose visual impression is relevant to your web's content.

Do not use a dark background for a web that has more than 3 pages, or a busy theme for a web that has more than 10 pages.

You can modify the existing theme or create your own theme later.

Right click-Link bar properties

Option: Child pages under home.

Check: Home page, parent pages.


Right click-Link bar properties-Style

You can use the page theme or use another one.


TxWarning Warning: Change the theme

The theme is saved in the "content database" of OS and it is not responding well (such as the font of navigation bar). Tips are as follow:

1. Do not change the theme's name.

2. Change the text of navigation bar, then re-upload it.

TxWarning SP v.s. FP

You can only use the FP to change the theme. When you use the SP to edit the changed file, the "preview mode" of SP may be wrong. If you have changed the <h6> to 14pt, the preview of SP may still look like 6 pt. However, it will display correct sizes in the browsers.

Personalized theme 布景主題物件個人化

It is recommended, at least, to replace the banner for existing themes. A personalized example is as follows.

It is also a good idea to modify the fonts of theme especially for Chinese website.

You may not personalize your theme until you complete your design of 'Context

Example: Demo and Chinese Version

Theme Style and Personalization

TxNote SharePoint

TxAdvanced Banner: Bilingual Design

TxNote FrontPage


For practicing, chose the option of  'Selected page'.

For personalizing theme, chose the option of 'All pages'.

Check 'Apply using CSS'.

Click 'Modify'.

TxAdvanced Advanced

You may change the background by the syntax in CSS file as follows.

body { font-family: Times New Roman, 標楷體; font-size: 12pt; background-image: url('TxBackG.gif');}

TX advanced topics Advanced: Multi-language Settings

Use the default theme for the first language (Chinese) pages.

2nd Theme and Settings

Define a specific theme for the second language (English) pages. It is a good idea to design a dedicated template for the 2nd theme (Must not with "default" setting" in meta name tag.)

Design a specific .css file that defines Selectors and all other Classes.

Make sure the settings are the following:

<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="English.CSS" />
<meta name="Microsoft Theme" content="EnglishTheme"/>

回頁首 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