Hkpa web site cms user guide(20161218)

H K PA W E B S I T E C M S U S E R G U I D E

HK PA WE B SIT E CM S U SER G UIDE

Date

: 31-7-2012

Last modify : 18-12-2016 Prepared by : IT Department

H K PA W E B S I T E C M S U S E R G U I D E

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

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

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

Password 為準。

H K PA W E B S I T E C M S U S E R G U I D E

2. 登入後，按『服務單位』， 再按『單位列表』(如圖)。

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

H K PA W E B S I T E C M S U S E R G U I D E

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

H K PA W E B S I T E C M S U S E R G U I D E

5. 先選擇網頁排版及選擇頁面主色， 按下一步。

H K PA W E B S I T E C M S U S E R G U I D E

每個模組的解像度如下:

H K PA W E B S I T E C M S U S E R G U I D E

H K PA W E B S I T E C M S U S E R G U I D E

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

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

H K PA W E B S I T E C M S U S E R G U I D E

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

H K PA W E B S I T E C M S U S E R G U I D E

9. 如圖片，按『按此瀏覽』制後，再 按『完成』制。

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

H K PA W E B S I T E C M S U S E R G U I D E

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

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

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

H K PA W E B S I T E C M S U S E R G U I D E

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

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

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

H K PA W E B S I T E C M S U S E R G U I D E

6. 在自訂網頁版面內，功能表內可選用『原始碼』。

按原始碼可加入 HTML 碼，例如: Youtube , Vimeo, HTML code 復制 Youtube 視頻原始碼 1. 挑選 Youtube 視頻，Mouse pointer right click and select “copy embed code” or “復制嵌入程 式碼” 。

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

3. 按“儲存” 完成。

H K PA W E B S I T E C M S U S E R G U I D E

如何在 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;output=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. 完成更新後, 按瀏覽進行測試。

H K PA W E B S I T E C M S U S E R G U I D E

如何在 CMS 內加入季刊 http://issuu.com/home

一個非常棒的免費網站，可以將 PPT、WORD 或 PDF 檔案上傳變成可翻頁的電子書，而且可 內嵌在網頁裡。 1. 登入網站：http://issuu.com/ 2. 點擊[Create account]先註冊成為會員。

3. 選擇你是閱讀者還是出版者Are you a [reader] or [publisher]

4. 選擇你要免費使用還是付費使用:免費[Free]

H K PA W E B S I T E C M S U S E R G U I D E 5. 輸入您的基本資料或從Facebook登入. 包括email, 密碼password, 顯示的名字display name, 使用者名字user name(設您issuu的網址),年齡-->I accept打勾-->done完成

6. UP LOAD 上傳檔案: WORD, PDF, POWERPOINT檔案格式都可以上傳.

7. 上傳完成後, 可對出版品標上抬頭TITLE和內容描述CONTENT. 打勾THIS IS A PREVIEW 這是流覽.打勾READER CAN DOWDLOAD 閱讀者可以下載. 按PUBLISH NOW現在出版.

H K PA W E B S I T E C M S U S E R G U I D E 8. 出現上傳的檔案, 左下方有EDIT PUBLICATION編輯出版品.

9.在document settings底下, 點一下圖片會出現對話框:SHARE分享, ADD TO加到, EDIT編 輯..等

10. 按SHARE分享:會出現分享到FACEBOOK, TWITTER, GOOGLE, EMAIL, BLOG, GET LINK..

11. 按EDIT編輯, 會出現EDIT INFO...

H K PA W E B S I T E C M S U S E R G U I D E

12. 按Edit info編輯訊息會出現標題,內容等讓你修改.

13. 切至embed widget 修改嵌入網頁時呈現的尺寸,背景顏色.

14. Links & bottons 連結和按鈕. 這是最近新增的功能, 我覺得很棒. 在你要新增按鈕的地方 拖曳一個正方格.

H K PA W E B S I T E C M S U S E R G U I D E

15. 選擇按鈕的形狀標誌, url的地方填上要連結的網頁.

16. 選擇的按鈕就會出現在出版品您拖曳的方格內

16. 完成後按鈕出現的地方, 按一下, 就會連結到你輸入的網頁.

H K PA W E B S I T E C M S U S E R G U I D E

17. 若要嵌入到網頁中或取得該電子書Link網址，可到share取得程式碼或 Link網址。 18. 複製embed Code裡的程式碼，內嵌在網頁裡或複製 Link連結網址，可貼在e-mail或FB分享 給朋友。 Reference: http://kaylah588.pixnet.net/blog/post/120744497-免費軟體issuu製作可翻頁的電子書 19.按下『原始碼』鍵，貼上巳復制“復制嵌入程式碼” 。

20.按“儲存” 完成。

H K PA W E B S I T E C M S U S E R G U I D E

Basic HTML code HTML Tutorial - http://www.w3schools.com/html/default.asp

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>

H K PA W E B S I T E C M S U S E R G U I D E 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

H K PA W E B S I T E C M S U S E R G U I D E

7. Image Map Generator https://www.image-map.net coords Specific Attributes target

_blank _parent _self _top

Where to open the target URL. _blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window

8. WordHTML https://wordhtml.com Free online word to HTML converter with built-in code cleaning features and easy switch between the visual and source editors.

私隠和保密

有關私隠和保密事宜，請根據服務質素標準 14:私隠和密保。

=== The End ===