Artisteer 中文版
使用手冊
鱷魚哥 著
目次 1、 關於本書................................................................................................................................1 1.1 網頁設計的困境與問題..................................................................................................1 1.2 ARTISTEER 概述.................................................................................................................2 1.3 ARTISTEER 優缺點.............................................................................................................2 1.4 為何要寫這本書？..........................................................................................................3 1.5 作者..................................................................................................................................4 1.6 電子書版權宣告..............................................................................................................4 2、 ARTISTEER 基本操作........................................................................................................5 2.1 安裝..................................................................................................................................5 2.2 介面簡介..........................................................................................................................7 2.2.1 檔案..........................................................................................................................7 2.2.2 推薦..........................................................................................................................8 2.2.3 顏色字型................................................................................................................10 2.2.4 佈局........................................................................................................................12 2.2.5 內容........................................................................................................................13 2.2.6 背景........................................................................................................................15 2.2.7 網頁........................................................................................................................16 2.2.8 標題........................................................................................................................17 2.2.9 選單........................................................................................................................20 2.2.10 區塊......................................................................................................................23 2.2.11 垂直選單..............................................................................................................24 2.2.12 按鈕......................................................................................................................26 2.2.13 頁腳......................................................................................................................26 3、 ARTISTEER 應用於 JOOMLA!......................................................................................28 3.1 匯出選項........................................................................................................................28 3.2 匯出與安裝 JOOMLA! 佈景.............................................................................................31 3.2.1 匯出........................................................................................................................31 3.2.2 標題和 slogan.........................................................................................................34 3.2.3 垂直選單................................................................................................................34 4、 後記......................................................................................................................................37
4.1 下載................................................................................................................................37 4.2 ARTISTEER 的未來...........................................................................................................37 4.3 相關資源........................................................................................................................38 4.4 FAQ.................................................................................................................................38
1、 關於本書
1.1 網頁設計的困境與問題 資訊時代，無論公司、SOHO 與個人，都很可能有網站架設的需求。國內網 站架設、網頁設計的族群，最頭疼的問題，是要學習的技術太多，十八般武藝 樣樣都要會。 我們來統計一下，若使用 HTML 來制作網站，至少要學習：
HTML：這個是基本網頁呈現的語言。
CSS（Cascading Style Sheets）：學習 CSS 標記語言除了了解語法之 外，還需要一定的經驗。最困難的部份，在處理不同瀏覽器顯示異常 的問題，同時要在 IE、firefox、chrome，看起來都要正常。是一件非常 痛苦的事。
圖片處理：PhotoShop、Illustrator 之類的繪圖軟體。
由於使用純 HTML 來架設網站，無法方便地即時更新內容。所以現在使用 「內容管理系統」（CMS）來架設網站是大勢所趨。例如：現在非常風行活躍的 JOOMLA!、WORDPRESS 與 DRUPAL，均為非常受歡迎的內容管理系統。 這些 CMS 雖然有豐富的國外佈景，但是要找到「適合中文網站的佈景」實 務上也是滿難找到。常常發現無中文字體、字體不當、行距不當、有 bug、有病毒、 版本不符、區塊不夠、不支援小工具…等問題。要找到合宜可用的免費佈景實在 很困難（要花很多時間）。 另一條路，是學習自製 CMS 的佈景，除了上述的工夫之外，還要學習：
CMS 佈景的規則：要懂得如何製作 CMS 的佈景，基本上要先學會如 何使用該 CMS，以及它的佈局方式、原理與規則。
PHP：要將程式碼插入佈景中。 Javascript：現代佈景少不了的語言與功能。
所以，在有限的時間內，有沒有更有效率的工作方式呢？
1.2 Artisteer 概述 所謂「佈景」，在不同的系統之下，有不同的名稱。在 Joomla! 中稱為 「佈 Template；在 Wordpress 與 Drupal 則稱為 Theme。中文則稱之「佈景主題」、 景」、 「模版」、 「版型」…等等。您可以想像它就是網站的「衣服」，負責的是關於美 感的部份。我在此文中就統稱「佈景」。 其實佈景的製作，是有其規律性的，只是各系統之製作方式不同而己。但 它的原理，就是用 HTML 建立骨幹、用 CSS 來規定格式，把區塊切開，再置入 PHP 程式碼將內容導入。 以上這些動作，其實有其固定的規則，既然是固定的規則，就可以藉由軟 體來協助。若有一個軟體非常理解各種 CMS 佈景規則，並且能協助我們做可視 化的編輯，我們在操作時就能看到成果，並可將佈景產出，那麼是不是很方便 呢？ 鱷魚哥推薦的「Artisteer」，就是這種軟體，也就是本書介紹的主角。它可以 讓您無痛自製佈景，支援 HTML、CSS 與各種瀏覽器，也能生成各種 CMS 佈 景（幾乎沒有 bug）。 這個軟體，並非鼓吹您不用去學習上節所述的那些語言與技巧，也並非鼓 勵快速、無痛能解決一切問題。若您只是自用或簡單的網站，Artisteer 已經綽綽 有餘。若您是進階使用者，您更可以從它產生的佈景原碼中，更了解如何自製 佈景；也可以用它來做出基本的架構，再加以精進與客製化。這些用法都是並 行不悖的。
1.3 Artisteer 優缺點 使用 artisteer 製作佈景的優點 以下是鱷魚哥個人的使用 Artisteer 的感想，供參囉！
1、存成 Artisteer 專用的 .artx 檔，隨時可匯出為不同 CMS 系統的佈景。 2、隨時可修改，不需要辛苦地抓 CSS 除錯，也不需要懂得語法與程式。 3、適用於大部分的主流瀏覽器。IE、Firefox、Chrome、Opera。 4、既然適用於絕大部份的瀏覽器，也就是說，它產生的程式碼是符合 W3C 標準。 5、內附美工圖庫（包含背景、底圖、header、花紋、icon、favicon，可完全合法 使用）。 6、可以用它來接案，使生產力大增。或用於製作自己的佈景。再也不求人。 7、所有的細節都可以自訂，使個人的創意發揮到極限！
使用 artisteer 製作佈景的缺點 鱷魚哥認為，Artisteer 2.6 之前的版本，製作出的佈景會太過於類似。都是 方方正正的，沒什麼變化。不過 3.0 版之後，支援無限延伸的 header、透明 header、選單嵌入 header 中…等。若能配合美工變化，加上進階功能用熟，我想 變化已經夠多了，用在一般個人、公司網站已綽綽有餘啦！ 當然，跟付費佈景 Joomlart、elegantthemes、這些商業佈景比起來，當然沒 有那麼傑出…。若您的美工很強，也許用 Aritsteer 做出來的佈景也很好看呢！ 偷偷告訴你，很多免費佈景都是用 Artisteer 做出來的。 總之，鱷魚哥覺得這家公司的研發很用心，解決了大多數佈景製作者者的 痛苦。我會在接下來的教學文章中展示。
1.4 為何要寫這本書？ 我從一年多前的 2.4 版就購買，一直升級到現在。在 3.1 正式版於 2012 年 1 月推出後，鱷魚哥在實際使用後，覺得這套軟體已臻成熟，不管對於架站者、 切版者，網站美術設計師、自學者…等，都非常實用。值得推薦！
這本電子書內含網站聯盟（affiliate link），帶有一點實驗性質，評估用電 子書推廣新軟體的效益如何。若您點擊連結後，購買了此軟體，我會收到部份 佣金，但完全不影響您的購買價格。收入所得的一部份，會捐給 CMS 的網路 社團，其他的錢買啤酒…XD。 您若要贊助，就直接點這裡！
1.5 作者 Name：鱷魚哥 Blog：http://blog.cmsart.net Email：gator.study@gmail.com
1.6 電子書版權宣告 簡單地說：您可以在無商業目的之下，合法供人下載、傳遞這本電子書， 但不能更改它。以下是授權條款： 本授權條款允許使用者重製、散布、傳輸著作，但不得為商業目的之使用， 亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
姓名標示表示： 您必須按照著作人或授權人所指定的方式，表彰其姓名。
非商業性表示： 您不得因獲取商業利益或私人金錢報酬為主要目的來利用作品。 禁止改作表示： 您僅可重製作品不得變更、變形或修改。
2、 Artisteer 基本操作
2.1 安裝 1. Artisteer 有分為 Windows 版與 Mac 版，像一般的安裝方法一樣，直接 在電腦上安裝即可。直接在下載處下載試用版程式即可試用；若您在購買後， 直接將試用版「啟用」即可。 2. 試用版可以正常使用所有功能，只是匯出的佈景會有浮水印。 3. 下載中文 xml 檔，這是鱷魚哥獨家翻譯的，共有 2200 多行。Artisteer 內 附只有簡體中文，而且只有 900 多行，不完整，若使用「簡轉繁」就太遜了點， 這回可以「繁轉簡」給台灣爭光一下…XD。 請將下載的 xml 檔放 C 碟>Program Files/Artsiteer3/Library/Data/Langs/
4. 打開 Artisteer 3，按左上角檔案>喜好設定>選擇剛才放上去的 xml 檔。 按確定後，關閉 Artisteer 再重新打開，即可變成正體中文畫面。
2.2 介面簡介 因為介面都已經翻成中文，且是「所見即所得」，甚至滑鼠懸停時，即可看 到改變的效果，鱷魚哥就不用每個細節都說明，僅就每個功能的所能控制佈景 的地方，說明一下。若遇到特別需要注意的地方，我會提出來討論。
2.2.1 檔案 1.Artisteer 專用的檔案格式為 artx，記得所有的可編輯檔，都是存成 artx 格式的檔案。
2. 開始編輯前，可以先更改佈景，這裡有好幾種 CMS 佈景可供選擇。現 在若要編輯一個 Joomla 的佈景，則選擇 Joomla!
2.2.2 推薦 1. 推薦的意思，就是由 Artisteer 自動幫您亂數產生佈景；Artisteer 3 已經 可以選擇樣式，再按推薦，這樣產生的佈景會較接近您要的風格。
2. 整個 Artisteer 軟體功能，由左到右分為顏色字型、布局、內容、背景、網頁、 標題、選單、區塊、垂直選單、按鈕、頁腳。以上這些功能，所組成的網站佈景，均 可以透過 Artisteer 軟體來做可視化調整，並立即預覽調整後的結果。
3. 若不想自行設定，就按推薦設計，推薦設計是指所有的功能組合都推薦。 有時推薦的效果不錯，再依推薦的效果做細部更改。
4. 亦可以做各功能的個別推薦。例如：若只需改變標題，則按推薦標題； 只需改變背景，就按推薦背景…。依此類推。 當然，所有的功能細部選項都可以做細部手動設定。後面各節，我們開始 講到各功能的手動設定的選項。
2.2.3 顏色字型
1. 在 Artisteer 中，佈景是有 3 個主顏色組成，只要決定佈景的 3 個主顏色， 佈景相關的顏色均會自動調配。 2. 當然，配色的組合，已經有類似 powerpoint 的佈景主題，可以選擇配色 組合，也可以自己決定顏色。
3. 選定顏色後，還可以再調整對比度、顏色深淺等等。按最下方的調整選項 還可以進一步調整顏色的光度和飽和度。
4. 例如：3 個主顏色，選擇灰、藍、淺藍，那麼網站呈現的顏色感覺就像下 圖。3 個主顏色溶和於佈景中。
2.2.4 佈局
1. 佈局是決定網站結構最重要的一環。在 Artisteer 3 中，佈局的靈活性已 經進步很多。我們可以看圖示就知道整個網站的佈局。 是標題 （header）；
是選單（menu）；
是網頁主體。只要看相對位置就能
立即設定網站佈局。 2. 其中，選單在標題內部、透明標題、重疊的、寬的，都是第 3 版後新增的 功能，使整個網站佈局的靈活性更高。
2.2.5 內容
1. 是指文章內容這一塊，包含文章是否要有框線、標題文字、內文文字、超 連結格式、表格、引文、影像的格式等等。因為選取後，立即可看到改變的效果， 不用教，試一下就會。
2. 右邊標題可以控制文章標題下方與內容下方的區塊格式，看圖示即可了 解。
2.2.6 背景
1. 紋理與影像：背景可以加上內附上百種的紋理與影像；當然，您若是設 計師，可以自己畫一個背景，然後按「從檔案」選取自製的背景。
2. 光影效果：可以在背景上，加上光影效果。應該也有上百種。這些圖案， 您購買軟體後，都可以合法使用。
2.2.7 網頁
網頁=內容+邊欄
或
網頁=內容+邊欄+選單+標題 範圍不一定，要看「佈局」如何設定。以下面的例子來說，就包含內容+邊 欄。可以設定網頁這一塊一寬度、邊界、圓角、陰影、透明度等。若需要有透明度的
網頁，露出背景，即可在此設定。
2.2.8 標題
1. 這裡的標題，就是英文的 header，通常在網站上方。 2. 標題可以填入填色、指定透明度，也可以插入影像，而且可以自訂影像 的效果。例如：我插入紫色花朵的影像，然後把效果設定為模糊。
3. 前景相片：這是 artisteer 唯一有限制使用的地方。根據官方網站的說法， 不能將前景相片所做的佈景拿去販賣。但做自己或客戶的網站是可以的。前景相 片有時可以應用在 logo，或是人物。
4. 按位置鈕，可以直接用滑鼠移動相片的位置；右邊伸縮桿可以縮放大小。
5. 標題可以插入 flash，所以若要製作 flash 的 header 也是可以的。把標題的其 他部份取消，直接在從檔案插入 flash。這樣就有 flash 的標題。Artisteer 內建的 flash 是一些雲朵飄過之類的 flash。
2.2.9 選單
1. 選單主要控制佈景上方橫式的選單。
2. 導航欄的樣式，如下圖所示；先選擇並決定樣式。
2. 選單的形狀與各種細部格式參數，均可以在做細部設定。
3. 導航欄：這一塊主要在控制整欄的顏色和紋理、階度效果（例如發光、漸 層）等等。
4. 項目、子選單，就是控制選單項目（子項目）內的格式。
5. 您只需要稍微試一下，滑鼠懸停在該選項上，即可馬上看見變化後的效 果，以此方法了解每一功能選項。
2.2.10 區塊
1. 區塊：在 Artisteer 中是指除了垂直選單之外的邊欄區塊。
2. 可以控制區塊呈現的樣式、標題與文字的格式、行距、字體、小圖示…等等。
3. 未來在 CMS 中呈現的邊欄區塊，都會套用這裡所設定的格式。
2.2.11 垂直選單
1. 垂直選單：是 Artisteer 的新功能，它可以跟區塊的樣式不同，通常主要 用於「主選單」，可以支援多層次選單，並可以指定多層次的呈現方式。
2. 樣式、格式的部份，跟區塊類似，非常簡單。只需要滑鼠懸停或點擊一下 即可馬上看到效果。在此不多贅述。 3. 層級呈現方式：許多佈景，沒有多層次選單，在 Aritsteer 中，橫式選單 本來就支援多層選單；在垂直選單中，現在也支援多層次選單了，且可以定義 多層次選單的呈現方式。 「展開」，就是指滑動展開，再點擊就滑動式收合。 「出現」就是立即出現， 但不能收合。 其他看下圖的圖示應該就可以了解了。
2.2.12 按鈕
「投票」 「表單送 1. 可定義所有佈景的「按鈕」為統一格式。包含「繼續閱讀」 出」…等等。舉凡有按鈕的地方，按鈕的格式均可在此套用。
2.2.13 頁腳
1. 頁腳：首先定義長度和位置。和網頁一樣寬，或是和頁面同寬。
2. 其也顏色格式、填入效果、文字格式…均可在此設定。和前述其他的功能 一樣。 3. 新版 Artisteer 中，可以在頁腳自訂 html 碼。所以可以定義出較為特別的 頁腳。例如：
可以做出類似這樣的頁腳：
3、 Artisteer 應用於 Joomla! Artisteer 可以應用於多種 CMS，現在示範一個快速製作佈景的實例，供 讀者參考。
3.1 匯出選項 1. 匯出選項在匯出前，是非常重要的設定，一定要了解。按檔案→匯出→ 匯出選項。
2. 彈出匯出選項視窗；第一個介面是「一般的」，可以定義文字方向與網站 小圖示 favicon。
3. CSS 選項：定義 CSS 的前綴，所有 CSS 會套用此前綴；若您不想使用 art- 可以自訂，請記得您的前綴，等一下會用到。
4. 描述：這邊所定義的內容，會顯示在 CMS 的後台中。有利於佈景的版 權宣告與管理。
5. 浮水印：試用版就是鎖住這個功能。要匯出正常的佈景，請選擇「否」； 有個應用是：給客戶試用的佈景，可以選擇「是」；浮水印文字使用自己公司的 名字。
6. 頁腳附註：反向連結到作者 URL，會在頁腳有一列第 4 點「描述」中作 者的 URL，位置在頁腳下方。反向連告到 Artisteer 就不用勾選了。
3.2 匯出與安裝 Joomla! 佈景 3.2.1 匯出 1. 舉例來說，鱷魚哥現在做好了一個佈景，匯出選項也設定完成。準備匯 出。
2. 按檔案→匯出→Joomla!佈景（若您匯出其他佈景，可以先按上方更改佈 景）
3. 可以匯出 Joomla!1.5 或 1.7-2.5 的 zip 檔，position 在 Joomla2.5 已經改為編號 方式，而非舊式的 top、bottom 之類的，但有時因為相容性需求，二種都可以選 擇。下方定義 zip 檔名，並選擇 zip 檔的存檔路徑。
4. 按匯出吧！匯出後，與一般的佈景相同，到後台去安裝即可。
5. 當然，安裝完畢後，到擴充套件→佈景主題管理，將剛才上傳的佈景設定為 預設即可。
3.2.2 標題和 slogan 預覽中的標題和 slogan 沒出現，是因為 Joomla2.5 版，已經改而後台去設 定。擴充套件→佈景主題管理→佈景名稱→編輯，右邊的 headline 與 slogan 輸 入後存檔即可。
3.2.3 垂直選單 1. 垂直選單的設定，也未顯示出來，需要在 Joomla 後台設定一下。後台→ 擴充套件→模組管理→主選單→編輯
2. 將主選單的模組 CSS 類別字尾，改為 art-vmenu ，若您在匯出選項的 CSS 前綴不是 art，則改為您設定的前綴。
3. 存檔，重新整理前台，是不是已經變成垂直選單的樣式了呢？
以上是介紹 Artisteer 運用於 Joomla! 下一版電子書會增加 wordpress 的部 份，敬請期待！
4、 後記
4.1 下載 主程式試用版下載 中文化下載 購買
4.2 Artisteer 的未來 Artisteer 這個佈景主題製作軟體，鱷魚哥已經使用了 2 年，對於它發展的 速度，每每令我吃驚。 從 Drupal 6 升級到 7、Joomla1.5 到 1.7 再到 Joomla2.5，Wordpress 的佈景 也一直能正常匯出，每次都能在這些 CMS 正式大升級的時刻，軟體的功能也 跟上來。這個研發團隊的工作能量非常可怕。 現在，我更吃驚了！Artisteer 4 即將在今年 7 月推出 bata 版，以他們的速 度，下半年將有正式版。Artisteer 4 的特點如下： 一、支援 HTML5+CSS3：下一代的網頁語言，這將是以後網頁的主流與標 準。 二、視覺化的 header 設計介面： 3.2 版 Header 就會支援 Slider（幻燈片）， Artisteer 4 這部份如何「視覺化」就不得而知了。之前的 Flash 雖然也能變幻，但 是現在似乎 Slider 是主流，且活動性較高。 三、數千張的圖庫：合法的圖庫使用，能省很多事，也能給我們設計靈感， 並降低設計成本。
四 、 將 開 放 SDK 功 能 ： 第 一 批 將 支 援 購 物 車 模 版 ， 如 Magento、osCommerce 和 PrestaShop。由於 SDK 的功能，將來會有許多其他的 CMS 的發展 Artisteer 的 SDK，使 Artisteer 也能快速產生其他 CMS 的佈景。 註：上述 Artisteer 功能仍在開發中，因此，以上說明可能與最終產品有所 不同。 我想 SDK 這一招將會非常有效，集合眾人智慧，會使得 Artisteer 4 更強 大！也將它從支援特定的 CMS 模版產生器的角色，一舉變成了多用途的模版 製作軟體。
4.3 相關資源 官網 官網論壇 Artisteer 中文粉絲團 鱷魚哥教學網部落格
4.4 FAQ 這邊整理一些大家最常問的問題，依我的了解予以說明如下，僅供參考。 一切還是以官網的說法為主。 1、購買後的權利為何？ 購買後，一年內可以免費升級。例如：現在購買，是下載最新的 3.0 版。一 年內若軟體升級到 3.5 版、4.0 版，一樣可以下載並啟用。 一年後，軟體依然可以繼續正常使用（到永久）。只是若有新版本無法升 級。一年後的續買費用我記得是 59US。 2、能不能拿 Artisteer 佈景來販賣？ 可 以 的 。 （ 除 了 頁 首 的 前 景 圖 片 之 外 header→foreground photo ） 依
Aritiseer 的說法，前景圖片的圖庫，是第三方提供的。所以能用於自己和客戶 的網站（可以自用或接案），只是不能將做成佈景拿來「出售」。除此部份之外， 其他所有的部份，都可以自由使用。 3、購買後可以裝在幾台電腦上？ 官網的說法是一台；但允許裝在第二台筆電上。我試過多裝幾台馬上不能 啟用，可能會影響原本合法的機器啟用（應該有鎖硬體，例如：網卡號碼）。 哈哈！人家畢竟研發非常辛苦，不要只買一個 license 大家一起 share 啊！ 4、有沒有試用版？ 您可以直接下載使用、試用。唯未經「啟用」的產品，在「匯出」後會有浮水印。 請支持正版，並不用浪費時間去找「免費版」了，此軟體是通過網路啟用，防拷 技術非常厲害哦！請多多支持正版。現在買個商業佈景也要 3-5 千吧！不管是 自用、接案用（做個案子就賺回來了），憑良心說滿划算的。 5、如何買？ 台灣的鄉民們，請使用 paypal 購買（若沒 paypal 帳號，亦可經由 paypal 刷卡）。建議購買的版本是標準版（Standard Edition），可匯出所有格式，並 有 完 整 的 圖 庫 。 家 庭 學 生 版 （ Home & Academic Edition ） 僅 能 匯 出 HTML、Wordpress、與 Google 的 Bloger 版本，並僅有部份的圖庫。請參考官網 的 Purchase 中的比較表。