BlueGriffon是Nvu開發者Daniel Gratzman (Disruptive Innovations SAS ) 開發的基於 Mozilla Composer 的WYSIWYG相容的 Web 創作軟體，HTML5 和 CSS 等基礎部分免費提供，模板和響應式設計等功能可用付費版本（75 美元）。
所見即所得
WYSIWYG 代表所見即所得，您可以編輯完成的影象以建立網頁，如文字處理軟體或圖形軟體。
Nvu的開發於 2006 年停止，接替 Nvu 程式碼的免費軟體KompoZer在 2010 年釋出的 beta 版本 0.83 結束時停止開發。
系統要求
當前版本 3.1
作業系統：Windows 7/ 8 / 10 ( 64bit )
自 3.1 版起不支援 32 位 Windows。
軟體在哪裡獲取
BlueGriffon官網下載頁面
安裝 BlueGriffon
BlueGriffon 安裝程式不包含廣告軟體或間諜軟體。
從下載頁面單擊Windows 7、8、10以下載安裝程式。
啟動下載的安裝程式，當顯示使用者帳戶控制對話方塊時，單擊“是”以允許它。
安裝期間建議採取安全措施，因為未進行數字簽名的安裝人員存在風險。
設定嚮導將啟動，因此單擊“下一步”。
如果您不特別關注安裝目的地，則預設設定為“下一步”。
開始選單中註冊的預設設定是“下一步”。
如果您不想將其新增到開始選單，請選中不要建立開始選單資料夾。
如果要在桌面上建立快捷方式圖示，選中它並單擊“下一步”。
檢查安裝內容，如果沒有問題，點選“安裝”。
“完成”完成設定。
首次啟動時會顯示已安裝版本的概覽，請單擊“確定”將其關閉。
如何使用 BlueGriffon
BlueGriffon 支援所見即所得，但您需要了解 CSS 和 HTML，因為如果您不編輯程式碼，它會帶來很多設計限制。
HTML——超文字標記語言
一種標記語言，用於在 Web 瀏覽器中顯示文字、影象等並透過連結進行連結。
在 BlueGriffon 中，當您像文字處理軟體一樣輸入文字時，它是用 HTML 編寫的。
CSS – 級聯樣式表
在指導網頁設計的規範中描述了“樣式表語言”。
當您格式化文字時，BlueGriffon 會自動建立 CSS，但編輯 CSS 會極大地擴充套件您的設計。
相對路徑和絕對路徑
相對路徑指定從當前位置開始的連結位置，絕對路徑指定從頂部開始的 URL。
在插入影象或使用 BlueGriffon 建立連結時，它由“相對路徑”描述。
檔案儲存目的地
當網頁完成後，顯示頁面所需的素材和所有建立的網頁都上傳到主機（web伺服器）的初始資料夾（根目錄），所以建立一個頁面，使相對路徑連結不之前需要進行資料夾劃分，資料夾中的所有檔案和子資料夾中的檔名都使用半形字母數字字元。
建立新的
建立新頁面時，設定要使用的標記語言和元資訊。
要建立新頁面，請從選單欄上的“檔案”中選擇“新建”或“新建嚮導”。
新建立嚮導允許您進行基本頁面設定。
選擇New Wizard時，出現標記語言設定畫面，選擇當前推薦的HTML5，點選“下一步”。
在文件屬性中，輸入將成為元元素的每個專案。
-Title：在瀏覽器選項卡或搜尋結果中顯示的頁面標題 -Author：
頁面建立者
-Description：頁面的詳細描述-Keyword
：輸入與頁面相關的關鍵字（關鍵字為逗號（,）（分隔） -Language
：從語言選擇中選擇日語。
-字符集：Unicode (UTF-8) -行
方向：未指定
行方向沒有完全顯示，但預設設定很好。
指定文字顏色和連結顏色方案。
要更改它，請選中指定顏色並選擇任何顏色。
要在背景中顯示影象，請單擊資料夾圖示並指定任意影象檔案。如果不需要背景影象，請不要設定，然後單擊“下一步”。
對於設定的背景影象，在標題中從無（單個）、水平（水平）、垂直（垂直）和兩者（整體）中指定位置。
對於滾動，選擇滾動時是移動指定的背景還是保持固定。
在頁面佈局中，可以設定頁面寬度和側邊欄，從附加列表中新增任意佈局，設定完成後點選“完成”。
如果佈局沒有決定，新增1 列， 100% 。
從寬度下拉列表中選擇來固定頁面的寬度，或者從側邊欄下拉列表中選擇位置和大小來建立側邊欄。
將顯示帶有示例文字的新頁面。
建立新頁面後，選擇選單欄上的從檔案儲存以儲存檔案。
儲存時請務必使用半形字母數字字元作為檔名。
格式化 - 編輯 CSS
BlueGriffon 免費版沒有自帶 CSS 編輯器，所以如果你想直接編輯 CSS ，修改原始碼即可。
從選單欄的面板檢查樣式屬性。
樣式屬性顯示在右側邊欄中。
樣式屬性用於編輯頁面設計，除了文字裝飾外，還可以進行圖片、背景色、表格等詳細設定，還可以在滑鼠懸停時新增簡單的效果。
使用樣式屬性格式化時需要設定 ID 和類，但 BlueGriffon 實現了自動設定功能。
要啟用ID和類的自動設定，請從選單欄上的工具中開啟選項，然後在樣式的CSS編輯方法中選中“自動”。
不知道 ID 或類的初學者建議開啟。
選擇應用格式的範圍後， 在樣式屬性中進行設定。
字型設定
字型大小、字元對齊方式、裝飾、行高等 設定在通用 專案中。
可以設定和MS Word一樣的操作感覺。
可以使用ALL PROPERTIES設定邊距和填充，並且可以透過雙擊相應項的值進行編輯。
左側工具欄也可以設定字元修飾、帶符號列表、字元對齊等。
前景色・背景色
使用style 屬性的顏色更改頁首和正文的文字顏色和背景顏色。
前景色為文字顏色，除了背景色外，還可以將圖片設定為背景色或使用漸變色作為背景色。
要使用漸變，請單擊背景影象中的“+”並選擇線性或徑向。
漂浮
浮動是一種將指定的影象和其他元素向左和向右移動的設定，並且持續環繞的內容，並且經常在個人計算機上瀏覽網站時使用。
要指定，請在位置和佈局項中選擇帶有浮動的圖示。
當浮動設定在左側時，影象在左側，文字在影象右側環繞。
直接編輯
如果你會寫 CSS，你可以直接編輯原始碼而不用在 style 屬性中設定。
將檢視從預覽切換到源並編輯 CSS。
建立內容
可以建立與MS Word 和LibreOffice Writer 等文字處理軟體相同的操作感的內容。
標題
使用標題作為關鍵字來描述頁面的內容，例如標題 1為頁面標題，標題 2為副標題。
標題和段落設定從左上角的格式選擇下拉列表中選擇。
標題格式在style 屬性中設定。
插入圖片
由於插入影象時沒有影象尺寸或邊距設定項，因此需要在放置後使用ALL PROPERTIES進行設定。
單擊工具圖示的影象或從選單欄中的“插入”中選擇影象。
單擊影象位置中的資料夾圖示以指定要插入的影象，選中Make URL relative to page ，然後輸入標題和備用字串（alt 屬性）。
要在影象周圍新增邊距，請在選定影象的情況下展開所有屬性，然後單擊“+”以 新增邊距。
要更改插入影象的大小，請將寬度新增到所有屬性並指定任何寬度。
插入影片
直接插入影片檔案時，將其作為影象等材料儲存在資料夾中。
如果影片檔案超過可以上傳的檔案大小，請將其上傳到 YouTube 等，然後將嵌入程式碼新增到源中。
單擊工具圖示上的影片或從選單欄中的“插入”中選擇一個影片。
指定要插入到影片檔案位置的影片。
輸入播放器的大小以按寬度插入頁面後，選中Show video control controls ，可選擇啟用自動播放/重複並點選“OK”確認。
影片控制元件 當禁用顯示控制元件時，不顯示影片。
插入連結
有的連結在站內，有的在站外。基本上站內的連結使用相對路徑，站外的連結使用絕對路徑 。
單擊工具圖示的連結，選擇要新增連結的字串或影象，或從選單欄中的“插入”中選擇連結。
在目標部分中輸入連結目標的 URL 和標題。
如果要移動到站點中的另一個頁面，請選中Make URL relative to page 。
可以選擇當前視窗、新視窗等作為開啟連結的位置。
錨
錨點用於在沒有 URL 的地方進行標記，例如在同一頁面上，並透過在標題中設定 ID來建立。
選擇要新增錨點的文字並單擊工具圖示上的錨點或從選單欄中的插入中選擇錨點。
系統將要求您輸入錨點的名稱，因此請輸入任何半形字母數字字串，然後單擊“確定”。
可以透過選擇任意文字、建立連結並輸入#（設定 ID）作為目標來建立在頁面上建立的錨點。
要移動到另一個頁面上的錨點，請在頁面 URL 後新增#anchor ID 。
用瀏覽器確認
當頁面建立到一定程度時，請檢查瀏覽器上的顯示。
從工具圖示中選擇“瀏覽器”。
目前，Chrome / Edge / Brave / Vivaldi 和 Firefox 等 Chromium 系列是主流，因此請檢查這兩個瀏覽器。
可執行位置
Google Chrome
C:\Program Files\Google\Chrome\Application
Firefox
C:\Program Files\Mozilla Firefox
Microsoft Edge
C:\Program Files (x86)\Microsoft\Edge\Application
啟動時的問題
錯誤訊息XML 解析錯誤：正在使用未定義的現實。顯示且 BlueGriffon 未啟動，您可以透過刪除包含 BlueGriffon 配置檔案的Disruptive Innovations SARL資料夾來解決此問題。
由於Disruptive Innovations SARL在Roaming資料夾中，這是一個隱藏資料夾，指定檔名並執行（Win + R 鍵）並輸入% appdata%開啟資料夾。
C:\Users\（使用者名稱）\AppData\Roaming\Disruptive Innovations SARL\BlueGriffon
退出 BlueGriffon 後，從 Roaming 資料夾中刪除Disruptive Innovations SARL資料夾。
啟動 BlueGriffon 時會自動生成Disruptive Innovations SARL，因此如果您再次啟動 BlueGriffon，啟動所需的時間將比平時更長。
如果等待一段時間後 BlueGriffon 沒有啟動，請嘗試再次啟動它。
|
