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

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

所見即所得

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

系統(tǒng)要求

當(dāng)前版本 3.1

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

自 3.1 版起不支持 32 位 Windows。

軟件在哪里獲取

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

安裝 BlueGriffon

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

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

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

安裝期間建議采取安全措施，因?yàn)槲催M(jìn)行數(shù)字簽名的安裝人員存在風(fēng)險(xiǎn)。

設(shè)置向?qū)?dòng)，因此單擊“下一步”。

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

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

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

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

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

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

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

如何使用 BlueGriffon

BlueGriffon 支持所見即所得，但您需要了解 CSS 和 HTML，因?yàn)槿绻痪庉嫶a，它會(huì)帶來很多設(shè)計(jì)限制。

HTML——超文本標(biāo)記語言

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

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

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

相對路徑和絕對路徑

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

文件保存目的地

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

創(chuàng)建新的

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

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

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

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

在文檔屬性中，輸入將成為元元素的每個(gè)項(xiàng)目。

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

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

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

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

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

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

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

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

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

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

格式化 - 編輯 CSS

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

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

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

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

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

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

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

字體設(shè)置

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

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

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

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

前景色?背景色

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

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

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

漂浮

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

要指定，請?jiān)?strong>位置和布局項(xiàng)中選擇帶有浮動(dòng)的圖標(biāo)。

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

直接編輯

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

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

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

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

標(biāo)題

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

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

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

插入圖片

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

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

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

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

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

插入視頻

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

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

單擊工具圖標(biāo)上的視頻或從菜單欄中的“插入”中選擇一個(gè)視頻。

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

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

視頻控件 當(dāng)禁用顯示控件時(shí)，不顯示視頻。

插入鏈接

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

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

在目標(biāo)部分中輸入鏈接目標(biāo)的 URL 和標(biāo)題。

如果要移動(dòng)到站點(diǎn)中的另一個(gè)頁面，請選中Make URL relative to page 。 可以選擇當(dāng)前窗口、新窗口等作為打開鏈接的位置。

錨

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

選擇要添加錨點(diǎn)的文本并單擊工具圖標(biāo)上的錨點(diǎn)或從菜單欄中的插入中選擇錨點(diǎn)。

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

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

要移動(dòng)到另一個(gè)頁面上的錨點(diǎn)，請?jiān)陧撁?URL 后添加#anchor ID 。

用瀏覽器確認(rèn)

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

從工具圖標(biāo)中選擇“瀏覽器”。

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

可執(zhí)行位置

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

啟動(dòng)時(shí)的問題

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

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

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

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

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

總結(jié)

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

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