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

落日映苍穹つ 2023-09-28 09:01 7阅读 0赞

![765f89652e2990f48f726092025b1ee8.png][]

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

**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 ####

BlueGriffon 安装程序不包含广告软件或间谍软件。

![e10f4592852748e62cb5bc0bd7db0735.png][]

从下载页面单击**Windows 7、8、10以下载安装程序。**

![1d001d3d0b039e3161aa29e26da8a135.png][]

启动下载的安装程序，当显示用户帐户控制对话框时，单击“是”以允许它。

**安装期间建议采取安全措施，因为未进行数字签名的安装人员存在风险。**

![0ef089ac69ef9e522692848abb548ac5.png][]

设置向导将启动，因此单击“下一步”。

![39d6b97dbad948b895adeebbf8508e2e.png][]

如果您不特别关注安装目的地，则默认设置为“下一步”。

![f7adc223135c752e8994d4eeb4fbeaa7.png][]

开始菜单中注册的默认设置是“下一步”。

如果您不想将其添加到开始菜单，请选中**不要创建开始菜单文件夹。**

![000ddb5739d86ab5eeb585425fd48429.png][]

如果要在桌面上创建快捷方式图标，选中它并单击“下一步”。

![612ea513a248818892194d52a6bccdd6.png][]

检查安装内容，如果没有问题，点击“安装”。

![9455411bfec0cbe3d64f6c0a363a8bbf.png][]

“完成”完成设置。

![b4679e39c0b37e03367c29222395037c.png][]

首次启动时会显示已安装版本的概览，请单击“确定”将其关闭。

#### 如何使用 BlueGriffon ####

BlueGriffon 支持所见即所得，但您需要了解 CSS 和 HTML，因为如果您不编辑代码，它会带来很多设计限制。

**HTML——超文本标记语言**

一种标记语言，用于在 Web 浏览器中显示文本、图像等并通过链接进行链接。  
在 BlueGriffon 中，当您像文字处理软件一样输入文本时，它是用 HTML 编写的。

**CSS – 级联样式表**

在指导网页设计的规范中描述了“样式表语言”。  
当您格式化文本时，BlueGriffon 会自动创建 CSS，但编辑 CSS 会极大地扩展您的设计。

**相对路径和绝对路径**

相对路径指定从当前位置开始的链接位置，绝对路径指定从顶部开始的 URL。  
在插入图像或使用 BlueGriffon 创建链接时，它由“相对路径”描述。

**文件保存目的地**

当网页完成后，显示页面所需的素材和所有创建的网页都上传到主机（web服务器）的初始文件夹（根目录），所以创建一个页面，使相对路径链接不之前需要进行文件夹划分，文件夹中的所有文件和子文件夹中的文件名都使用半角字母数字字符。

创建新的

创建新页面时，设置要使用的标记语言和元信息。

![5bece01d7eee39051049f4ecae3f84f8.png][]

要创建新页面，请从菜单栏上的“文件”中选择“新建”或“新建向导”。

新创建向导允许您进行基本页面设置。

![4c89f4c947c77ba4e2d47af9e2412850.png][]

选择New Wizard时，出现标记语言设置画面，选择当前推荐的**HTML5**，点击“下一步”。

![b92937214cb1343b9e3a0f0ea7bfa7d9.png][]

在文档属性中，输入将成为**元元素的每个项目。**

\-Title：在浏览器选项卡或搜索结果中显示的页面标题 -Author：  
页面创建者  
\-Description：页面的详细描述-Keyword  
：输入与页面相关的关键字（关键字为逗号（,）（分隔） -Language  
：从语言选择中选择日语。  
\-字符集：Unicode (UTF-8) -行  
方向：未指定

**行方向**没有完全显示，但默认设置很好。

![02c8e19d33755e4d5a6f8c289123c764.png][]

指定文本颜色和链接颜色方案。

要更改它，请选中**指定**颜色并选择任何颜色。

![3a97eb4bfbafcfcddcd1894ee68c51a4.png][]

要在背景中显示图像，请单击文件夹图标并指定任意图像文件。如果不需要背景图像，请不要设置，然后单击“下一步”。

对于设置的背景图像，在**标题中****从无**（单个）、**水平**（水平）、**垂直**（垂直）和**两者**（整体）中指定位置。  
**对于滚动**，选择滚动时是移动指定的背景还是保持固定。

![db0472beaf7cc2b868b910a32872c3ed.png][]

在页面布局中，可以设置页面宽度和侧边栏，从**附加**列表中添加任意布局，设置完成后点击“完成”。

如果布局没有决定，添加**1 列， 100% 。**

**从宽度**下拉列表中选择来固定页面的宽度，或者从**侧边栏**下拉列表中选择位置和大小来创建侧边栏。

![e2c6f97564d09ec5564936ece9ae54ca.png][]

将显示带有示例文本的新页面。

![580232612cc0cd9352e9e477e754c360.png][]

创建新页面后，选择菜单栏上的从**文件****保存**以保存文件。

保存时请务必使用半角字母数字字符作为文件名。

格式化 - 编辑 CSS

BlueGriffon 免费版没有自带 CSS 编辑器，所以如果你想直接编辑 CSS ，修改**源代码即可。**

![7c2232b5cb6c1596077fa27af71432dd.png][]

从菜单栏的**面板**检查**样式属性。**

![6e9346b8d1baaca489a14d8c1f10a918.png][]

**样式属性**显示在右侧边栏中。

**样式属性**用于编辑页面设计，除了文字装饰外，还可以进行图片、背景色、表格等详细设置，还可以在鼠标悬停时添加简单的效果。

![1b189ccdc2b452c4a710e3db8bf67858.png][]

**使用样式属性**格式化时需要设置 ID 和类，但 BlueGriffon 实现了自动设置功能。

要启用ID和类的自动设置，请从菜单栏上的**工具**中打开**选项，然后在****样式**的**CSS编辑方法**中选中“**自动”。**

不知道 ID 或类的初学者建议开启。

![f5cf53e86788bbd47991f2d517769c6f.png][]

选择应用格式的范围后， 在**样式属性**中进行设置。

**字体设置**

字体大小、字符对齐方式、装饰、行高等 设置在**通用** 项目中。

![ea7f94304ce4181ba14df3264c91b99c.png][]

可以设置和MS Word一样的操作感觉。

![4d9fe4d28b8e822c616e9b58dbcf890d.png][]

**可以使用ALL PROPERTIES**设置边距和填充，并且可以通过双击相应项的值进行编辑。

![c87ffd441e75136ec1f8fd5b86c6bb6d.png][]

左侧工具栏也可以设置字符修饰、带符号列表、字符对齐等。

**前景色・背景色**

**使用style 属性**的**颜色**更改页眉和正文的文本颜色和背景颜色。

![8b499cbe736898742b3569c60cd3aacd.png][]

前景色为**文字颜色**，除了背景色外，还可以将图片设置为背景色或使用渐变色作为背景色。

![a242e503de9c7e66c3111a5b27403caf.png][]

要使用渐变，请单击**背景图像**中的“+”并选择**线性**或**径向。**

**漂浮**

浮动是一种将指定的图像和其他元素向左和向右移动的设置，并且持续**环绕**的内容，并且经常在个人计算机上浏览网站时使用。

![e83131fe723dcffcc9a8e0e1e4e1b1ee.png][]

要指定，请在**位置和布局**项中选择带有**浮动**的图标。

![83ea6bf9ba950338b04aeec32e3dfc71.png][]

当浮动设置在左侧时，图像在左侧，文本在图像右侧环绕。

**直接编辑**

如果你会写 CSS，你可以直接编辑**源代码**而不用在 style 属性中设置。

![c80f21a33bd339518a77bcba0a0d7efc.png][]

将视图从**预览**切换到**源**并编辑 CSS。

创建内容

可以创建与MS Word 和**[LibreOffice][]** Writer 等文字处理软件相同的操作感的内容。

**标题**

**使用标题**作为关键字来描述页面的内容，例如**标题 1**为页面标题，**标题 2**为副标题。

![cb9e042ab9278f0c456b33bc0e379918.png][]

标题和段落设置从左上角的**格式选择下拉列表中选择。**

标题格式在**[style 属性][style]**中设置。

**插入图片**

由于插入图像时没有图像尺寸或边距设置项，因此需要在放置后使用**ALL PROPERTIES进行设置。**

![8502327507d154eb0f5ce6d69e03c427.png][]

单击工具图标的**图像**或从菜单栏中的“**插入”中选择****图像**。

![d3216a25dde9f1fd4a67e2b56072f191.png][]

单击**图像位置**中的文件夹图标以指定要插入的图像，选中**Make URL relative to page ，然后输入****标题**和**备用字符串**（alt 属性）。

![4cb9ef12245310b8531733ec26112427.png][]

要在图像周围添加边距，请在选定图像的情况下展开**所有属性**，然后单击“+”以 添加**边距。**

要更改插入图像的大小，请将**宽度添加到****所有属性**并指定任何宽度。

**插入视频**

直接插入视频文件时，将其作为图像等材料保存在文件夹中。

如果视频文件超过可以上传的文件大小，请将其上传到 YouTube 等，然后将嵌入代码添加到源中。

![3811b2713511b212969d982ee2f09b6a.png][]

单击工具图标上的**视频**或从菜单栏中的“**插入”中选择一个****视频**。

![37c4b50eea8d0b541e9673997fa799a9.png][]

指定要插入**到视频文件位置的视频。**

![1225631789a45411b0f914c7498f7b85.png][]

**输入播放器的大小以按宽度**插入页面后，选中**Show video control controls** ，可选择启用**自动播放**/**重复并点击“OK”确认。**

**视频控件 当**禁用显示控件时，不显示视频。

**插入链接**

有的链接在站内，有的在站外。基本上站内的链接使用**相对路径**，站外的链接使用**绝对路径** 。

![d4551bb9907434ea374c255de763a2eb.png][]

**单击工具图标的链接**，选择要添加链接的字符串或图像，或从菜单栏中的“**插入”中选择****链接**。

![c857e89c56f6159e111f9902d49260a3.png][]

**在目标**部分中输入链接目标的 URL 和**标题**。

如果要移动到站点中的另一个页面，请选中**Make URL relative to page 。**

**可以选择当前窗口**、**新窗口**等作为打开**链接的位置。**

**锚**

**锚点**用于在没有 URL 的地方进行标记，例如在同一页面上，并通过在**标题中****设置 ID**来创建。

![ad0ad2bfc00714c42618823c0188b92a.png][]

选择要添加锚点的文本并单击工具图标上的**锚点**或从菜单栏中的**插入中选择****锚点**。

![e48911d8fa49fc31adde7b4784f82268.png][]

**系统将要求您输入锚点的名称，**因此请输入任何半角字母数字字符串，然后单击“确定”。

![018437047d5993b1b5c368df0a8115ff.png][]

可以通过选择任意文本、创建**链接**并输入**\#（设置 ID**）作为**目标来创建在页面上创建的锚点。**

要移动到另一个页面上的锚点，请在页面 URL 后添加**\#anchor ID 。**

用浏览器确认

当页面创建到一定程度时，请检查浏览器上的显示。

![55654a7698b261913f7b339609730112.png][]

从工具图标中选择“浏览器”。

![782ce8a27a81a1e04b9ca6c9fd778ff7.png][]

目前，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文件夹来解决此问题。**

![ca7186993390dadcb40295dbcf7504e7.png][]

**由于Disruptive Innovations SARL在****Roaming**文件夹中，这是一个隐藏文件夹，**指定文件名并执行**（Win + R 键）并输入**% appdata%**打开文件夹。

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

![4e5671308859af17b0b2adc3c6d539b5.png][]

退出 BlueGriffon 后，从 Roaming 文件夹中删除**Disruptive Innovations SARL文件夹。**

**启动 BlueGriffon 时会自动生成Disruptive Innovations SARL**，因此如果您再次启动 BlueGriffon，启动所需的时间将比平时更长。

如果等待一段时间后 BlueGriffon 没有启动，请尝试再次启动它。

####  ####

[765f89652e2990f48f726092025b1ee8.png]: https://img-blog.csdnimg.cn/img_convert/765f89652e2990f48f726092025b1ee8.png
[KompoZer]: https://eizone.info/kompozer/
[BlueGriffon]: http://bluegriffon.org/#download
[e10f4592852748e62cb5bc0bd7db0735.png]: https://img-blog.csdnimg.cn/img_convert/e10f4592852748e62cb5bc0bd7db0735.png
[1d001d3d0b039e3161aa29e26da8a135.png]: https://img-blog.csdnimg.cn/img_convert/1d001d3d0b039e3161aa29e26da8a135.png
[0ef089ac69ef9e522692848abb548ac5.png]: https://img-blog.csdnimg.cn/img_convert/0ef089ac69ef9e522692848abb548ac5.png
[39d6b97dbad948b895adeebbf8508e2e.png]: https://img-blog.csdnimg.cn/img_convert/39d6b97dbad948b895adeebbf8508e2e.png
[f7adc223135c752e8994d4eeb4fbeaa7.png]: https://img-blog.csdnimg.cn/img_convert/f7adc223135c752e8994d4eeb4fbeaa7.png
[000ddb5739d86ab5eeb585425fd48429.png]: https://img-blog.csdnimg.cn/img_convert/000ddb5739d86ab5eeb585425fd48429.png
[612ea513a248818892194d52a6bccdd6.png]: https://img-blog.csdnimg.cn/img_convert/612ea513a248818892194d52a6bccdd6.png
[9455411bfec0cbe3d64f6c0a363a8bbf.png]: https://img-blog.csdnimg.cn/img_convert/9455411bfec0cbe3d64f6c0a363a8bbf.png
[b4679e39c0b37e03367c29222395037c.png]: https://img-blog.csdnimg.cn/img_convert/b4679e39c0b37e03367c29222395037c.png
[5bece01d7eee39051049f4ecae3f84f8.png]: https://img-blog.csdnimg.cn/img_convert/5bece01d7eee39051049f4ecae3f84f8.png
[4c89f4c947c77ba4e2d47af9e2412850.png]: https://img-blog.csdnimg.cn/img_convert/4c89f4c947c77ba4e2d47af9e2412850.png
[b92937214cb1343b9e3a0f0ea7bfa7d9.png]: https://img-blog.csdnimg.cn/img_convert/b92937214cb1343b9e3a0f0ea7bfa7d9.png
[02c8e19d33755e4d5a6f8c289123c764.png]: https://img-blog.csdnimg.cn/img_convert/02c8e19d33755e4d5a6f8c289123c764.png
[3a97eb4bfbafcfcddcd1894ee68c51a4.png]: https://img-blog.csdnimg.cn/img_convert/3a97eb4bfbafcfcddcd1894ee68c51a4.png
[db0472beaf7cc2b868b910a32872c3ed.png]: https://img-blog.csdnimg.cn/img_convert/db0472beaf7cc2b868b910a32872c3ed.png
[e2c6f97564d09ec5564936ece9ae54ca.png]: https://img-blog.csdnimg.cn/img_convert/e2c6f97564d09ec5564936ece9ae54ca.png
[580232612cc0cd9352e9e477e754c360.png]: https://img-blog.csdnimg.cn/img_convert/580232612cc0cd9352e9e477e754c360.png
[7c2232b5cb6c1596077fa27af71432dd.png]: https://img-blog.csdnimg.cn/img_convert/7c2232b5cb6c1596077fa27af71432dd.png
[6e9346b8d1baaca489a14d8c1f10a918.png]: https://img-blog.csdnimg.cn/img_convert/6e9346b8d1baaca489a14d8c1f10a918.png
[1b189ccdc2b452c4a710e3db8bf67858.png]: https://img-blog.csdnimg.cn/img_convert/1b189ccdc2b452c4a710e3db8bf67858.png
[f5cf53e86788bbd47991f2d517769c6f.png]: https://img-blog.csdnimg.cn/img_convert/f5cf53e86788bbd47991f2d517769c6f.png
[ea7f94304ce4181ba14df3264c91b99c.png]: https://img-blog.csdnimg.cn/img_convert/ea7f94304ce4181ba14df3264c91b99c.png
[4d9fe4d28b8e822c616e9b58dbcf890d.png]: https://img-blog.csdnimg.cn/img_convert/4d9fe4d28b8e822c616e9b58dbcf890d.png
[c87ffd441e75136ec1f8fd5b86c6bb6d.png]: https://img-blog.csdnimg.cn/img_convert/c87ffd441e75136ec1f8fd5b86c6bb6d.png
[8b499cbe736898742b3569c60cd3aacd.png]: https://img-blog.csdnimg.cn/img_convert/8b499cbe736898742b3569c60cd3aacd.png
[a242e503de9c7e66c3111a5b27403caf.png]: https://img-blog.csdnimg.cn/img_convert/a242e503de9c7e66c3111a5b27403caf.png
[e83131fe723dcffcc9a8e0e1e4e1b1ee.png]: https://img-blog.csdnimg.cn/img_convert/e83131fe723dcffcc9a8e0e1e4e1b1ee.png
[83ea6bf9ba950338b04aeec32e3dfc71.png]: https://img-blog.csdnimg.cn/img_convert/83ea6bf9ba950338b04aeec32e3dfc71.png
[c80f21a33bd339518a77bcba0a0d7efc.png]: https://img-blog.csdnimg.cn/img_convert/c80f21a33bd339518a77bcba0a0d7efc.png
[LibreOffice]: https://eizone.info/libreoffice-the-documents-foundation/
[cb9e042ab9278f0c456b33bc0e379918.png]: https://img-blog.csdnimg.cn/img_convert/cb9e042ab9278f0c456b33bc0e379918.png
[style]: https://eizone.info/bluegriffon-web-editor/#style
[8502327507d154eb0f5ce6d69e03c427.png]: https://img-blog.csdnimg.cn/img_convert/8502327507d154eb0f5ce6d69e03c427.png
[d3216a25dde9f1fd4a67e2b56072f191.png]: https://img-blog.csdnimg.cn/img_convert/d3216a25dde9f1fd4a67e2b56072f191.png
[4cb9ef12245310b8531733ec26112427.png]: https://img-blog.csdnimg.cn/img_convert/4cb9ef12245310b8531733ec26112427.png
[3811b2713511b212969d982ee2f09b6a.png]: https://img-blog.csdnimg.cn/img_convert/3811b2713511b212969d982ee2f09b6a.png
[37c4b50eea8d0b541e9673997fa799a9.png]: https://img-blog.csdnimg.cn/img_convert/37c4b50eea8d0b541e9673997fa799a9.png
[1225631789a45411b0f914c7498f7b85.png]: https://img-blog.csdnimg.cn/img_convert/1225631789a45411b0f914c7498f7b85.png
[d4551bb9907434ea374c255de763a2eb.png]: https://img-blog.csdnimg.cn/img_convert/d4551bb9907434ea374c255de763a2eb.png
[c857e89c56f6159e111f9902d49260a3.png]: https://img-blog.csdnimg.cn/img_convert/c857e89c56f6159e111f9902d49260a3.png
[ad0ad2bfc00714c42618823c0188b92a.png]: https://img-blog.csdnimg.cn/img_convert/ad0ad2bfc00714c42618823c0188b92a.png
[e48911d8fa49fc31adde7b4784f82268.png]: https://img-blog.csdnimg.cn/img_convert/e48911d8fa49fc31adde7b4784f82268.png
[018437047d5993b1b5c368df0a8115ff.png]: https://img-blog.csdnimg.cn/img_convert/018437047d5993b1b5c368df0a8115ff.png
[55654a7698b261913f7b339609730112.png]: https://img-blog.csdnimg.cn/img_convert/55654a7698b261913f7b339609730112.png
[782ce8a27a81a1e04b9ca6c9fd778ff7.png]: https://img-blog.csdnimg.cn/img_convert/782ce8a27a81a1e04b9ca6c9fd778ff7.png
[ca7186993390dadcb40295dbcf7504e7.png]: https://img-blog.csdnimg.cn/img_convert/ca7186993390dadcb40295dbcf7504e7.png
[4e5671308859af17b0b2adc3c6d539b5.png]: https://img-blog.csdnimg.cn/img_convert/4e5671308859af17b0b2adc3c6d539b5.png