Testing

HKPA WEB SITE CMS USER GUIDE

H K PA W EB S IT E C MS U SER G UIDE

Date

: 31-7-2012

Last modify : 29-12-2014 Prepared by : IT Department

HKPA WEB SITE CMS USER GUIDE

HKPA WEB Production CMS URL http://hq.hkpa.hk/cms/index.php

HKPA WEB UAT CMS URL http://cmsuat.hkpa.hk/UAT/cms/index.php

HKPA WEB CMS 登入 1. 輸入 Username 及 Password，按『Enter』制。 註: 只能進入各自的網頁，由 IT Dept 提供 Username 及 Password 為準。

HKPA WEB SITE CMS USER GUIDE 2. 登入後，按『服務單位』， 再按『單位列表』(如圖)。

3. 在菜單中選擇， 自訂網頁、發佈、分支等等…

HKPA WEB SITE CMS USER GUIDE 4. 先按『自訂網頁』制一下，顯示多個選擇， 剔所需要， 按下一步。

HKPA WEB SITE CMS USER GUIDE 5. 先選擇網頁排版及選擇頁面主色， 按下一步。

HKPA WEB SITE CMS USER GUIDE 每個模組的解像度如下:

HKPA WEB SITE CMS USER GUIDE

HKPA WEB SITE CMS USER GUIDE 6. 選擇 Banner 及分支、上載 Banner、分支名稱（ Module1-5 ），如圖排版選擇位置， 按 下一步。

7. 如圖片，需上傳有關圖片、連結， 按下一步。

HKPA WEB SITE CMS USER GUIDE 8. 輸入填寫內容、連結、顯示橫菜單名稱(繁體，英文，簡體)等資料， 按『儲存』制。

HKPA WEB SITE CMS USER GUIDE 9. 如圖片，按『按此瀏覽』制後，再 按『完成』制。

10. 在 CMS 板面，按『返回網頁』， 選擇『服務單位』， 選各自單位。

HKPA WEB SITE CMS USER GUIDE

HKPA Web CMS 功能表圖解 功能表圖解：

1. 在自訂網頁五格指定版面內，功能表內可選用不同的『內容樣版』。

2. 在自訂網頁五格指定版面內，功能表內可選用『超連結』。

HKPA WEB SITE CMS USER GUIDE 3. 在自訂網頁五格指定版面內，功能表內可選用『影像』，瀏覽及上傳至伺服器。

4. 在自訂網頁五格指定版面內，功能表內可選用『插入表情符號』。

5. 在自訂網頁五格指定版面內，功能表內可選用『特殊符號』。

HKPA WEB SITE CMS USER GUIDE 6. 在自訂網頁版面內，功能表內可選用『原始碼』。 按原始碼可加入 HTML 碼，例如: Youtube , Vimeo, HTML code 復制 Youtube 視頻原始碼

1. 挑選 Youtube 視頻，Mouse pointer right click and select “copy embed code” or “復制嵌入程 式碼” 。

2. 按下『原始碼』鍵，貼上巳復制“復制嵌入程式碼” 。

3. 按“儲存” 完成。

HKPA WEB SITE CMS USER GUIDE

如何在 CMS 內加入 Google Map 1. 在”自訂網頁-填寫內容 ”版面內，功能表內可選用『原始碼』。 按原始碼加入以下 HTML code: <p> <iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=zhTW&amp;geocode=&amp;q=Hong+Kong&amp;aq=1&amp;oq=hon&amp;sll=37.0625,95.677068&amp;sspn=47.215051,93.076172&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear= %E9%A6%99%E6%B8%AF&amp;ll=22.378487,114.128825&amp;spn=0.001736,0.00228&amp;z=18&amp;ou tput=embed" width="425"></iframe><br /> <small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=zhTW&amp;geocode=&amp;q=Hong+Kong&amp;aq=1&amp;oq=hon&amp;sll=37.0625,95.677068&amp;sspn=47.215051,93.076172&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear= %E9%A6%99%E6%B8%AF&amp;ll=22.378487,114.128825&amp;spn=0.001736,0.00228&amp;z=18" style="text-align: left; color: #0000ff">檢視較大的地圖</a></small> </p>

2. 完成更新後, 按瀏覽進行測試。

HKPA WEB SITE CMS USER GUIDE

如何在 CMS 內加入季刊

HKPA WEB SITE CMS USER GUIDE

Basic HTML code 1. HTML Headings HTML headings are defined with the <h1> to <h6> tags.

Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

2. HTML Paragraphs HTML paragraphs are defined with the <p> tag.

Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>

3. HTML Images HTML images are defined with the <img> tag.

Example <img src="w3schools.jpg" width="104" height="142">

4. HTML Links HTML links are defined with the <a> tag.

Example <a href="http://www.w3schools.com">This is a link</a>

HKPA WEB SITE CMS USER GUIDE 5. HTML Tables Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How the HTML code above looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

6. HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol> How the HTML code above looks in a browser: 1.Coffee 2.Milk

=== The End ===