動態網頁範本設計
Social Networking Site and Blog: Service
社交網站/部落格佈局服務


.dwt 動態網頁範本的功能

動態網頁範本是專業網站建立「美學風格」的工具,也是各個社交網站、部落格的頁面佈局與服務方式,使用者只要會打字、貼圖,就可以有自己的網路空間。但使用者的創意,還是必須被限制在該站範本的視覺規畫之下。

會設計動態網頁範本,不僅可以呈現完全個人化的網路影音文創作品,其實也具備了開創各種社交網站、部落格…等網路媒體的能力。

微軟的 Dynamic Webpage Templates 中譯為「動態網站範本」,實則應為「動態網頁範本」,真正的「『網站』範本」應該包括預設網頁、資料夾、與相關工具。

確認動態網頁範本之平面設計與分區規畫

在設計檢視的工作:先以空白網頁設計佈局。

確認動態網頁範本之平面設計與分區規畫,當前最流行、也最適用的1000px,3欄設計,14區的規畫。

建立動態網頁範本

將已分欄、分區規畫好的空白網頁,另存為動態網頁範本 .dwt 檔案。

Completing one page including all plane design, common blocks, icons, tools...etc.

Use the index.htm or home.htm as the first layout. 

Save it into a "Dynamic Webpage Template".

Using 'Save As' to !tempUse the index.htm or home.htm as the first layout. 

Save it into a "Dynamic Webpage Template".

Using 'Save As' to !temp.dwt with a name begins with a symbol such as !. Do not us @ that may be recognized as an email address.

>Save As

設定〈管理可編輯區域〉

Move the cursor to the editable area, then right click.

為各〈管理可編輯區域〉命名

Give the editable area a name such as 'banner', 'content'.

Add the area, etc. There are 3 areas as the following example.

warning Warning

If you are using an existing page that is already on the navigation hierarchy as a template, the banner will keep the original title.

You have to delete the banner, insert a new one and reassign the navigation.


建立多個範本

一個網站通常有2個以上的範本,因其「顯示器解析度」、「易讀性」而不同,但「結構」與「意涵」並無差異,其間的空間位置,故也不必有太大差異。

就當前環境,至少可有:

1000px 設計:!Related\!Tx.dwt

1250px 設計:!Related\!Tx_present.dwt 


Community ID Codes 建立/檢查範本社群碼

如果自建範本,在程式碼檢視的工作:

Add the following codes before RIGHT before </head>.

為了增加作品的能見度,從SEO的立場,一定要在程式碼的</head>標籤正上方,加入以下程式碼。

<script src="!Related/jquery-1.5.2.min.js" type="text/javascript"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-11660641-1', 'auto');
ga('send', 'pageview');
</script> 


advanced Web Community Template 建立網群範本

網群範本通常包括社群入口站,與個人站,故應有不同範本。

另外,可能還有以管理為目的的管理網站。

Main-Portal Web 社群入口站範本

Personal Web 個人站範本

Management Web 管理網站範例

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