页设计是把颜色、图片和字体等等要素进行组合调整，达到网页页面美化的目的，在给用户带来完美的视觉体验的同时，也为用户提供更好的使用体验。因此，网页设计需要考虑的设计因素有很多，绝不仅仅只是为了美观。本文千锋武汉Web前端培训小编将推荐十款好用的HTML生成工具，帮助大家更高效率的完成网页设计。

1、Bootstrap Studio

这是一款桌面应用程序，旨在帮助web开发人员和设计人员创建一个相应迅速的网页。一般是用Bootstrap Studio来架构、设计页面效果图和最初的修饰，然后几乎不用导出功能，而是直接在单元上右键，复制html。可以说Bootstrap Studio是在Chrome浏览器代码和 Node.js 基础之上重组和整理出的一套很规范的基于Bootstrap框架的网页前端设计工具。

2、Template Stash

这款软件几乎集合了所有类型网页的模板，你可以通过关键词检索来找到你想要的主题风格。可以说Template Stash 是一个提供高品质，完全免费的响应式网页模板，帮助设计师们找到完美的响应式网站主题或模版，根据网站分类来提高不同的模版样式，所有的模版都是来源于Kickstart项目。

3、Carrd

这款软件是免费的，可以帮助初学者制作一个简单、响应快捷的网页，只要几个简单步骤就能快速设计出美观特色的响应式网站。

4、Bubble

Bubble的优势在于使用者不用掌握任何编程技巧就可以制作网页，它独特的拖拉界面可以让使用者在网页上添加视频、地图、音频等等功能。

5、Tilda Publishing

这款软件可以帮助使用者制作一个内容导向型的网页，这款软件非常适合那些喜欢设计博客页面的人。Tilda Publishing的最大优势在于可以会将不同内容形态切割成blocks，如果把网站想象成堆积木，内容就好比一块块不同花色的积木，利用拖拽方式进行排列组合，网站设计更加独特，操作上也更加简单。

6、XPRS

如果你曾经因为设计网页太过复杂和繁琐而感到沮丧，那么这款软件无疑是你的福音。这款软件会提供一个非常简单的编辑环境，让网页设计变得非常简单，因此对于新手小白来讲吗，是一款十分好用的HTML生成工具。

7、Hype 3.0

这款软件可以帮助你让网页的内容“动”起来，使用者可以设计每一帧动画并且进行排序，也可以手动添加或者删除动画效果，如果你想让自己的网页更加生动，那么这款软件绝对是你的首选。这是一款强大的Mac OS平台HTML5创作工具，它可以在网页上做出赏心悦目的动画效果，无需 Flash 插件。更重要的是这款强的html5开发工具竟然还有中文版！现在你几乎不需要任何的编码知识，只需要简单的拖拽就可以制作出好玩的动画，基于时间轴的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 种全新的定时功能等新功能，非常强大！

8、OnePager

Onepager 是一个提供使用者建置小型网站网站的网络服务，透过视觉化的操作介面，无须下载、安装任何软体，也不用苦苦寻找虚拟主机，只要申请帐户，就能够快速建立自己公司的网站。作为一款好用的HTML生成工具，它可以帮助使用者快速编辑所有类型的网页。使用者可以轻松建立一个响应迅速的网站，这款软件内置的预设系统使得网页的一切都是可定制的，使用者甚至可以自己设计网页的主题风格。总之，Onepaper 让制作网页变得非常简单。内建多种佈景主题可以切换、使用，你甚至不用具备网页设计的知识，直接透过线上工具就能变更设计。

9、Grav

Grav是一个简单可扩展的CMS平台。因为是纯文件系统，所以它无需安装，并且它有着完善的后台界面和完整的官方文档。又因为可扩展型号，可以通过有插件控制几乎每个环节。不过这也是一款较为复杂的HTML生成工具，需要使用者掌握一些编程的技巧。

10、HTML to WordPress

这个软件可以将静态的HTML网站转换成WordPress，如果你想转换你的网站格式，这款软件将帮助你节省大量的时间，因此推荐大家使用。

以上就是千锋武汉Web前端培训小编推荐的十款好用的HTML生成工具，大家都用过了吗？如果你现在还在寻找一款HTML生成工具，不妨试试以上的推荐工具，相信总有一款适合你。关注“武汉千锋”微信公众号，会定期为大家分享最新Web前端发展趋势、学习资料，助力大家学好Web前端。

ello~各位ITer！

这里是每周陪你技术内卷的小谷！

本期内容要介绍的是GO.js的高级使用——动态显示效果。

前言

官网地址：https://gojs.net/latest/

官网包含了200多个例子，api及介绍，学习入门等。

Go.js属于功能丰富的JS库，在Web浏览器和平台上可实现自定义交互图和可视化效果，Go.js用自定义模板和布局组件简化了节点、链接和分组等复杂的js图表。

它给用户交互提供了许多先进的功能：

例如：

拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统等等。

无需切换服务器和插件，Go.js就能实现用户交互并在浏览器中完全运行，呈现HTML5 Canvas元素或SVG，也不用服务器端请求。Go.js不依赖于任何JS库或框架，可与任何HTML或JS框架配合工作，甚至可以不用框架。

用功能强大的Go.js可以构建自定义建模环境和特定的可视化语言，使用共享代码和模板提供一个系统编辑器和只读状态监控，在不同的图表中显示相同数据的可视化替代，实现子图或其它图表的详细视图扩展。

Go.js是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。它采用了面向对象的编程模式，以图形对象表示绘图模板，以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。

Go.js同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建出具有丰富交互性能的各种图表。

——GO.js概念来源

https://blog.csdn.net/zy0412326/article/details/128890317

一、介绍

1.回顾

下文将以Vue2项目为例，进行动态显示效果的快速入门学习。

我们以实现图中效果为例——静态展示链路日志：

（1） js或者csdn引入

<script src=”/static/go.js”></script>

（2） 指定容器

<div :id=”id” class=”myDiagram” style=”width:100%;height:100%”/>

const go = window.go

const $ = go.GraphObject.make

这里go是所有GoJS类型所在的“命名空间” 。所有使用GoJS类的代码，例如 Diagram 或 Node 或 Panel 或 Shape 或 TextBlock 都将以“ go.”为前缀。

（3）引入icon

（4）创建图表

this.myDiagram = $(go.Diagram, self.id, {})

（5）设置节点,自定义tooltip

const tooltiptemplate =

this.myDiagram.nodeTemplate=$(go.Node,'Horizontal',{toolTip:tooltiptemplate, background: '#fff' })

（6）设置连接线,linklabel等

this.myDiagram.linkTemplate =

（7）鼠标移入移出线条样式

（8）设置数据

this.myDiagram.model = new go.TreeModel(data)

（9）渲染

this.myDiagram.layoutDiagram(true)

二、Comparator接口

动态展示节点信息，查找节点进行高亮，根据节点的广度深度进行横纵展示，示意如下：

1.动态显示节点

每个要动态显示的元素绑定一个visible属性：

<el-checkbox v-model="isURL" @change="isChange($event, 'URL')">URL</el-checkbox>
<el-checkbox v-model="isTraceID" @change="isChange($event, 'TRACEID')">TraceID</el-checkbox>
<el-checkbox v-model="isSpanID" @change="isChange($event, 'SPANID')">SpanID</el-checkbox>
// 数据动态渲染
isChange(val, key) {
  this.myDiagram.commit(d => {
    d.nodes.each(node => {
      const name = node.findObject(key)
      name.visible = val
    })
  })
}
// spanId
$(go.TextBlock,
  {
    margin: new go.Margin(0, 10, 4, 15),
    stroke: '#0076FF',
    font: 'normal 12px helvetica neue',
    width: 160,
    textAlign: 'left',
    maxLines: 3,
    overflow: go.TextBlock.OverflowEllipsis, // 最大行数和溢出
    cursor: 'pointer',
    name: 'SPANID', // 方便查找元素
    visible: false
  },
  new go.Binding('text', 'spanId')
)

2.高亮效果

<el-checkbox v-model="faultLight" @change="faultLightChange">异常高亮</el-checkbox>
<el-checkbox v-model="faultLightRoot" @change="faultLightRootChange">高亮当前应用及到根部的分支</el-checkbox>

A异常高亮效果

给满足条件的node节点添加透明度即可：

// 异常高亮
faultLightChange(val) {
  // code>=400为异常
  this.myDiagram.commit(d => { // d === myDiagram
    // iterate over all nodes in Diagram
    d.nodes.each(node => {
      if (val) {
        this.faultLightRoot = false
        // console.log(node.data.code)
        if (node.data.code >= 400) return
        node.opacity = 0.5
      } else {
        node.opacity = 1
      }
    })
  })
}

B高亮当前应用及分支

先获取当前选中节点的所有父节点，给这些节点设置透明度为1，其他的设置为0.5：

faultLightRootChange(val) {
  const parentKeys = this.findPatentValue(this.copyTreeData, this.selectedKey, 'key', 'children')
  this.myDiagram.commit(d => {
    d.nodes.each(node => {
      if (val) {
        this.faultLight = false
        node.opacity = parentKeys.includes(node.data.key) ? 1 : 0.5
      } else {
        node.opacity = 1
      }
    })
  })
},
// 获取当前节点的所有父节点
findPatentValue(array, targetId, valueKey, childrenKey) {
  if (!targetId || !Array.isArray(array)) return []
  const result = []
  let valid = false
  const seek = (_array, _targetId) => {
    let parentValue = ''
    const up = (_array_, _targetId_, lastValue) => {
      _array_.forEach(v => {
        const val = v[valueKey]
        const child = v[childrenKey]
        if (val === _targetId_) {
          valid = true
          parentValue = lastValue
          return
        }
        child ? child.length && up(child, _targetId_, val) : null
      })
    }
    up(_array, _targetId)
    if (parentValue) {
      result.unshift(parentValue)
      seek(_array, parentValue)
    }
  }
  seek(array, targetId)
  return valid ? [...result, targetId] : []
}

3.根据节点的广度深度进行横纵展示

Java 集合接口 java.util.Collection 中包含一个称为 iterator() 的方法。通过调用 iterator()，可以从给定的 Collection 中获取迭代器。Java 集合框架中实现了 Collection 接口的数据结构，比如列表、集合(Set)、队列、双端队列等等，它们都实现了iterator() 方法。

横纵展示只需要设置angle，0度或者90度即可：

const widthDeepth = self.handleGetTreeDeep(self.copyTreeData) // 深度
const heightDeepth = self.handleGetTreeExtent(self.copyTreeData) // 广度
self.direct = widthDeepth >= heightDeepth ? 'Horizontal' : 'Vertical' // 判断横向纵向
self.myDiagram =
  $(go.Diagram, self.id,
    {
layout:
    $(go.TreeLayout,
      {
        angle: self.direct === 'Horizontal' ? 0 : 90
      }
    ) 
}

以上就是Go.js的高级使用之动态显示效果，更多内容欢迎关注之后的文章。

福利：关注恭粽号[IT硅谷]，回复【JS特效】，免费下载116个JS特效动画效果！包括：

可自定义js弹出层动画特效

css3鼠标悬停按钮线条动画效果代码

jquery鼠标悬停横向时间轴代码

Canvas跳动彩球时间动画特效

jquery宽屏焦点图片动画轮播代码

jQuery+css3制作飘动的云动画特效

html5文字粒子动画效果代码

CSS3鼠标悬停图片文字动画效果代码

CSS3折页扇子翻转动画效果代码

纯CSS3实现按钮动画效果代码

纯CSS3实现眨眼动画特效

jQuery鼠标悬停文字渐隐渐现动画效果等等共计116个

reamweaver快捷键大全

新建文档Ctrl N

打开一个 HTML文档 Ctrl O或将文档从[文档管理器]或[站点]窗口拖动到[文档]窗口中

在框架中打开 Ctrl Shift O

关闭 Ctrl W

Ctrl S

另存为 Ctrl Shift S

检查链接Shift F8

退出Ctrl Q

编辑菜单

撤消Ctrl Z

重复Ctrl Y 或 Ctrl Shift Z

剪切Ctrl X 或Shift Del

拷贝Ctrl C 或Ctrl Ins

粘贴Ctrl V 或Shift Ins

清除Delete

全选Ctrl A

选择父标签 Ctrl Shift <

选择子标签 Ctrl Shift >

查找和替换 Ctrl F

查找下一个 F3

缩进代码 Ctrl Shift ]

左缩进代码 Ctrl Shift [

平衡大括弧 Ctrl ’

启动外部编辑器 Ctrl E

参数选择Ctrl U

页面视图

标准视图Ctrl Shift F6

布局视图Ctrl F6

工具条 Ctrl Shift T

查看页面元素

可视化助理 Ctrl Shift I

标尺Ctrl Alt R

显示网格Ctrl Alt G

靠齐到网格 Ctrl Alt Shift G

头内容 Ctrl Shift W

页面属性Ctrl Shift J

代码编辑

转换到设计视图 Ctrl Tab

打开快速标签编辑器 Ctrl T

选择父标签 Ctrl Shift <

平衡大括弧 Ctrl ’

全选Ctrl A

拷贝Ctrl C

查找和替换 Ctrl F

查找下一个 F3

替换Ctrl H

粘贴Ctrl V

剪切Ctrl X

重复Ctrl Y

撤消Ctrl Z

转换断点Ctrl Alt B

向上选择一行Shift Up

向下选择一行Shift Down

选择左边字符Shift Left

选择右边字符Shift Right

向上翻页Page Up

向下翻页Page Down

向上选择一页Shift Page Up

向下选择一页Shift Page Down

选择左边单词Ctrl Shift Left

选择右边单词Ctrl Shift Right

移到行首Home

移到行尾End

移 动到代码顶部 Ctrl Home

移 动到代码尾部 Ctrl End

向上选择到代码顶部 Ctrl Shift Home

向下选择到代码顶部 Ctrl Shift End

编辑文本

创建新段落 Enter

插入换行

Shift Enter

插入不换行空格 Ctrl Shift Spacebar

拷贝文本或对象到页面其他位置 Ctrl 拖动选取项目到新位置

选取一个单词双击

将选定项目添加到库 Ctrl Shift B

在设计视图和代码编辑器之间转换 Ctrl Tab

打开和关闭[属性]检查器 Ctrl Shift J

检查拼写 Shift F7

格式化文本

缩进Ctrl ]

左缩进 Ctrl [

格式>无 Ctrl 0 (零)

段落格式Ctrl Shift P

应用标题1到6到段落 Ctrl 1 到 6

对齐>左对齐 Ctrl Shift Alt L

对齐>居中 Ctrl Shift Alt C

对齐>右对齐 Ctrl Shift Alt R

加粗选定文本Ctrl B

倾斜选定文本Ctrl I

编辑样式表 Ctrl Shift E

查找和替换文本

查找Ctrl F

查找下一个/再查找 F3

替换Ctrl H

处理表格

选择表格（光标在表格中） Ctrl A

移 动到下一单元格Tab

移 动到上一单元格Shift Tab

插入行（在当前行之前） Ctrl M

在表格末插入一行 在最后一个单元格Tab

删除当前行 Ctrl Shift M

插入列 Ctrl Shift A

删除列 Ctrl Shift - (连字符)

合并单元格 Ctrl Alt M

拆分单元格 Ctrl Alt S

更新表格布局（在“快速表格编辑”模式中强制重绘）Ctrl Spacebar

处理框架

选择框架框架中Alt 点击

选择下一框架或框架页Alt 右方向键

选择上一框架或框架页Alt 左方向键

选择父框架 Alt 上方向键

选择子框架或框架页 Alt 下方向键

添加新框架到框架页 Alt 从框架边界拖动

使用推模式添加新框架到框架页Alt Ctrl 从框架边界拖动

选择层 Ctrl Shift 点击

选择并移 动层Shift Ctrl 拖动

从选择中添加或删除层Shift 点击层

以象素为单位移 动所选层 上方向键

按靠齐增量移 动所选层Shift 方向键

以象素为单位调整层大小 Ctrl 方向键

以靠齐增量为单位调整层大小Ctrl Shift 方向键

将所选层和最后所选层的顶部/底部/左边/右边对齐Ctrl 上/下/左/右方向键

统一所选层宽度 Ctrl Shift [

统一所选层高度 Ctrl Shift ]

创建层时转换嵌套配置Ctrl 拖动

转换网格显示Ctrl Shift Alt G

靠齐到网格 Ctrl Alt G

处理时间轴,图象

添加对象到时间轴Ctrl Alt Shift T

添加关键帧 Shift F9

删除关键帧 Delete

改变图象源文档属性 Double 点击图象

在外部编辑器中编辑图象 Ctrl 双击图象

管理超链接

创建超链接（选定文本） Ctrl L

删除超链接 Ctrl Shift L

拖动并投放以从文档创建超链接 选取文本，图象或对象，然后Shift 拖动选择到[站点]窗口中的文档

拖动并投放以使用[属性]检查器创建超链接 选取文本，图象或对象，然后拖动[属性]检查器的指向文档图表到[站点]窗口的文档

在Dreamweaver打开链接文档Ctrl 双击链接

检查选定链接Shift F8

检查整个站点中的链接Ctrl F8

在浏览器中定位和预览

在主浏览器中预览F12

在次要浏览器中预览 Ctrl F12

在浏览器中调试

在主浏览器中调试Alt F12

在次要浏览器中调试 Ctrl Alt F12

站点管理和FTP

创建新文档 Ctrl Shift N

创建新文档夹Ctrl Shift Alt N

打开选定Ctrl Shift Alt O

从远程FTP站点下载选定文档或文档夹Ctrl Shift D或将文档从[站点]窗口的[远程]栏拖动到[本地]栏

将选定文档或文档夹上载到远程FTP站点Ctrl Shift U或将文档从[站点]窗口的[本地]栏拖动到[远程]栏

取出Ctrl Shift Alt D

存回Ctrl Shift Alt U

查看站点地图Alt F8

刷新远端站点Alt F5

站点地图

查看站点文档F8

刷新本地栏 Shift F5

设为根 Ctrl Shift R

链接到现存文档 Ctrl Shift K

改变链接Ctrl L

删除链接Delete

显示/ 隐藏链接 Ctrl Shift Y

显示页面标题Ctrl Shift T

重命名文档 F2

放大站点地图Ctrl (plus)

缩小站点地图Ctrl - (hyphen)

播放插件

播放插件Ctrl Alt P

停止插件Ctrl Alt X

播放任何插件Ctrl Shift Alt P

停止任何插件Ctrl Shift Alt X

处理模板

创建新的可编辑区域 Ctrl Alt V

插入对象

任何对象（图象，Shockwave影片等）文档从[资源管理器]或[站点]窗口拖动到[文档]窗口

图象Ctrl Alt I

表格Ctrl Alt T

Flash影片 Ctrl Alt F

Shockwave和Director影片Ctrl Alt D

命名锚记Ctrl Alt A

历史纪录面板

打开[历史纪录]面板 Shift F10

开始/停止录制命令 Ctrl Shift X

播放录制好的命令Ctrl P

打开和关闭面板

对象Ctrl F2

属性Ctrl F3

站点文档F5

站点地图Ctrl F5

资源F11

CSS样式 Shift F11

HTML样式Ctrl F11

行为Shift F3

历史纪录Shift F10

时间轴 Shift F9

代码检查器 F10

框架Shift F2

层 F2

参考Ctrl Shift F1

显示/隐藏浮动面板 F4

最小化任何窗口 Shift F4

最大化任何窗口 Alt Shift F4

获得帮助

使用Dreamweaver[帮助主题] F1

参考 Shift F1

Dreamweaver支持中央 Ctrl F1