安装和使用所见即所得WYSIWYG的 Web 创作软件 BlueGriffon

所见即所得兼容的网络创作软件，可让您免费使用基本功能

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 没有启动，请尝试再次启动它。