所見即所得兼容的網絡創作軟件，可讓您免費使用基本功能

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 沒有啟動，請嘗試再次啟動它。

總結

以上是生活随笔為你收集整理的安装和使用所见即所得WYSIWYG的 Web 创作软件 BlueGriffon的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。