所見即所得兼容的網(wǎng)絡(luò)創(chuàng)作軟件，可讓您免費使用基本功能

BlueGriffon是Nvu開發(fā)者Daniel Gratzman?(Disruptive Innovations SAS??)?開發(fā)的基于 Mozilla Composer? 的WYSIWYG兼容的 Web 創(chuàng)作軟件，HTML5 和 CSS 等基礎(chǔ)部分免費提供，模板和響應(yīng)式設(shè)計等功能可用付費版本（75 美元）。

所見即所得

WYSIWYG 代表所見即所得，您可以編輯完成的圖像以創(chuàng)建網(wǎng)頁，如文字處理軟件或圖形軟件。 ?Nvu的開發(fā)于 2006 年停止，接替 Nvu 代碼的免費軟件KompoZer在 2010 年發(fā)布的 beta 版本 0.83 結(jié)束時停止開發(fā)。

系統(tǒng)要求

當前版本 3.1

操作系統(tǒng)：Windows 7/ 8 / 10 ( 64bit )

自 3.1 版起不支持 32 位 Windows。

軟件在哪里獲取

BlueGriffon官網(wǎng)下載頁面

安裝 BlueGriffon

BlueGriffon 安裝程序不包含廣告軟件或間諜軟件。

從下載頁面單擊Windows 7、8、10以下載安裝程序。

啟動下載的安裝程序，當顯示用戶帳戶控制對話框時，單擊“是”以允許它。

安裝期間建議采取安全措施，因為未進行數(shù)字簽名的安裝人員存在風(fēng)險。

設(shè)置向?qū)?#xff0c;因此單擊“下一步”。

如果您不特別關(guān)注安裝目的地，則默認設(shè)置為“下一步”。

開始菜單中注冊的默認設(shè)置是“下一步”。

如果您不想將其添加到開始菜單，請選中不要創(chuàng)建開始菜單文件夾。

如果要在桌面上創(chuàng)建快捷方式圖標，選中它并單擊“下一步”。

檢查安裝內(nèi)容，如果沒有問題，點擊“安裝”。

“完成”完成設(shè)置。

首次啟動時會顯示已安裝版本的概覽，請單擊“確定”將其關(guān)閉。

如何使用 BlueGriffon

BlueGriffon 支持所見即所得，但您需要了解 CSS 和 HTML，因為如果您不編輯代碼，它會帶來很多設(shè)計限制。

HTML——超文本標記語言

一種標記語言，用于在 Web 瀏覽器中顯示文本、圖像等并通過鏈接進行鏈接。
在 BlueGriffon 中，當您像文字處理軟件一樣輸入文本時，它是用 HTML 編寫的。

CSS – 級聯(lián)樣式表

在指導(dǎo)網(wǎng)頁設(shè)計的規(guī)范中描述了“樣式表語言”。
當您格式化文本時，BlueGriffon 會自動創(chuàng)建 CSS，但編輯 CSS 會極大地擴展您的設(shè)計。

相對路徑和絕對路徑

相對路徑指定從當前位置開始的鏈接位置，絕對路徑指定從頂部開始的 URL。
在插入圖像或使用 BlueGriffon 創(chuàng)建鏈接時，它由“相對路徑”描述。

文件保存目的地

當網(wǎng)頁完成后，顯示頁面所需的素材和所有創(chuàng)建的網(wǎng)頁都上傳到主機（web服務(wù)器）的初始文件夾（根目錄），所以創(chuàng)建一個頁面，使相對路徑鏈接不之前需要進行文件夾劃分，文件夾中的所有文件和子文件夾中的文件名都使用半角字母數(shù)字字符。

創(chuàng)建新的

創(chuàng)建新頁面時，設(shè)置要使用的標記語言和元信息。

要創(chuàng)建新頁面，請從菜單欄上的“文件”中選擇“新建”或“新建向?qū)А薄?/span>

新創(chuàng)建向?qū)г试S您進行基本頁面設(shè)置。

選擇New Wizard時，出現(xiàn)標記語言設(shè)置畫面，選擇當前推薦的HTML5，點擊“下一步”。

在文檔屬性中，輸入將成為元元素的每個項目。

-Title：在瀏覽器選項卡或搜索結(jié)果中顯示的頁面標題 -Author：
頁面創(chuàng)建者
-Description：頁面的詳細描述-Keyword
：輸入與頁面相關(guān)的關(guān)鍵字（關(guān)鍵字為逗號（,）（分隔） -Language
：從語言選擇中選擇日語。
-字符集：Unicode (UTF-8) -行
方向：未指定? ?行方向沒有完全顯示，但默認設(shè)置很好。

指定文本顏色和鏈接顏色方案。

要更改它，請選中指定顏色并選擇任何顏色。

要在背景中顯示圖像，請單擊文件夾圖標并指定任意圖像文件。如果不需要背景圖像，請不要設(shè)置，然后單擊“下一步”。

對于設(shè)置的背景圖像，在標題中從無（單個）、水平（水平）、垂直（垂直）和兩者（整體）中指定位置。
對于滾動，選擇滾動時是移動指定的背景還是保持固定。

在頁面布局中，可以設(shè)置頁面寬度和側(cè)邊欄，從附加列表中添加任意布局，設(shè)置完成后點擊“完成”。

如果布局沒有決定，添加1 列， 100% 。 從寬度下拉列表中選擇來固定頁面的寬度，或者從側(cè)邊欄下拉列表中選擇位置和大小來創(chuàng)建側(cè)邊欄。

將顯示帶有示例文本的新頁面。

創(chuàng)建新頁面后，選擇菜單欄上的從文件保存以保存文件。

保存時請務(wù)必使用半角字母數(shù)字字符作為文件名。

格式化 - 編輯 CSS

BlueGriffon 免費版沒有自帶 CSS 編輯器，所以如果你想直接編輯 CSS?，修改源代碼即可。

從菜單欄的面板檢查樣式屬性。

樣式屬性顯示在右側(cè)邊欄中。

樣式屬性用于編輯頁面設(shè)計，除了文字裝飾外，還可以進行圖片、背景色、表格等詳細設(shè)置，還可以在鼠標懸停時添加簡單的效果。

使用樣式屬性格式化時需要設(shè)置 ID 和類，但 BlueGriffon 實現(xiàn)了自動設(shè)置功能。

?要啟用ID和類的自動設(shè)置，請從菜單欄上的工具中打開選項，然后在樣式的CSS編輯方法中選中“自動”。 不知道 ID 或類的初學(xué)者建議開啟。

選擇應(yīng)用格式的范圍后，? 在樣式屬性中進行設(shè)置。

字體設(shè)置

字體大小、字符對齊方式、裝飾、行高等?設(shè)置在通用? 項目中。

可以設(shè)置和MS Word一樣的操作感覺。

可以使用ALL PROPERTIES設(shè)置邊距和填充，并且可以通過雙擊相應(yīng)項的值進行編輯。

左側(cè)工具欄也可以設(shè)置字符修飾、帶符號列表、字符對齊等。

前景色?背景色

使用style 屬性的顏色更改頁眉和正文的文本顏色和背景顏色。

前景色為文字顏色，除了背景色外，還可以將圖片設(shè)置為背景色或使用漸變色作為背景色。

要使用漸變，請單擊背景圖像中的“+”并選擇線性或徑向。

漂浮

浮動是一種將指定的圖像和其他元素向左和向右移動的設(shè)置，并且持續(xù)環(huán)繞的內(nèi)容，并且經(jīng)常在個人計算機上瀏覽網(wǎng)站時使用。

要指定，請在位置和布局項中選擇帶有浮動的圖標。

當浮動設(shè)置在左側(cè)時，圖像在左側(cè)，文本在圖像右側(cè)環(huán)繞。

直接編輯

如果你會寫 CSS，你可以直接編輯源代碼而不用在 style 屬性中設(shè)置。

將視圖從預(yù)覽切換到源并編輯 CSS。

創(chuàng)建內(nèi)容

可以創(chuàng)建與MS Word 和LibreOffice?Writer 等文字處理軟件相同的操作感的內(nèi)容。

標題

使用標題作為關(guān)鍵字來描述頁面的內(nèi)容，例如標題 1為頁面標題，標題 2為副標題。

標題和段落設(shè)置從左上角的格式選擇下拉列表中選擇。

標題格式在style 屬性中設(shè)置。

插入圖片

由于插入圖像時沒有圖像尺寸或邊距設(shè)置項，因此需要在放置后使用ALL PROPERTIES進行設(shè)置。

單擊工具圖標的圖像或從菜單欄中的“插入”中選擇圖像。

單擊圖像位置中的文件夾圖標以指定要插入的圖像，選中Make URL relative to page ，然后輸入標題和備用字符串（alt 屬性）。

要在圖像周圍添加邊距，請在選定圖像的情況下展開所有屬性，然后單擊“+”以??添加邊距。

要更改插入圖像的大小，請將寬度添加到所有屬性并指定任何寬度。

插入視頻

直接插入視頻文件時，將其作為圖像等材料保存在文件夾中。

如果視頻文件超過可以上傳的文件大小，請將其上傳到 YouTube 等，然后將嵌入代碼添加到源中。

單擊工具圖標上的視頻或從菜單欄中的“插入”中選擇一個視頻。

指定要插入到視頻文件位置的視頻。

輸入播放器的大小以按寬度插入頁面后，選中Show video control controls?，可選擇啟用自動播放/重復(fù)并點擊“OK”確認。

視頻控件 當禁用顯示控件時，不顯示視頻。

插入鏈接

有的鏈接在站內(nèi)，有的在站外。基本上站內(nèi)的鏈接使用相對路徑，站外的鏈接使用絕對路徑? 。

單擊工具圖標的鏈接，選擇要添加鏈接的字符串或圖像，或從菜單欄中的“插入”中選擇鏈接。

在目標部分中輸入鏈接目標的 URL 和標題。

如果要移動到站點中的另一個頁面，請選中Make URL relative to page 。 可以選擇當前窗口、新窗口等作為打開鏈接的位置。

錨

錨點用于在沒有 URL 的地方進行標記，例如在同一頁面上，并通過在標題中設(shè)置 ID來創(chuàng)建。

選擇要添加錨點的文本并單擊工具圖標上的錨點或從菜單欄中的插入中選擇錨點。

系統(tǒng)將要求您輸入錨點的名稱，因此請輸入任何半角字母數(shù)字字符串，然后單擊“確定”。

可以通過選擇任意文本、創(chuàng)建鏈接并輸入#（設(shè)置 ID）作為目標來創(chuàng)建在頁面上創(chuàng)建的錨點。

要移動到另一個頁面上的錨點，請在頁面 URL 后添加#anchor ID 。

用瀏覽器確認

當頁面創(chuàng)建到一定程度時，請檢查瀏覽器上的顯示。

從工具圖標中選擇“瀏覽器”。

目前，Chrome / Edge / Brave / Vivaldi 和 Firefox 等 Chromium 系列是主流，因此請檢查這兩個瀏覽器。

可執(zhí)行位置

Google Chrome
C:\Program Files\Google\Chrome\Application
Firefox
C:\Program Files\Mozilla Firefox
Microsoft Edge
C:\Program Files (x86)\Microsoft\Edge\Application

啟動時的問題

錯誤消息XML 解析錯誤：正在使用未定義的現(xiàn)實。顯示且 BlueGriffon 未啟動，您可以通過刪除包含 BlueGriffon 配置文件的Disruptive Innovations SARL文件夾來解決此問題。

由于Disruptive Innovations SARL在Roaming文件夾中，這是一個隱藏文件夾，指定文件名并執(zhí)行（Win + R 鍵）并輸入% appdata%打開文件夾。

C:\Users\（用戶名）\AppData\Roaming\Disruptive Innovations SARL\BlueGriffon

退出 BlueGriffon 后，從 Roaming 文件夾中刪除Disruptive Innovations SARL文件夾。

啟動 BlueGriffon 時會自動生成Disruptive Innovations SARL，因此如果您再次啟動 BlueGriffon，啟動所需的時間將比平時更長。 如果等待一段時間后 BlueGriffon 沒有啟動，請嘗試再次啟動它。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。