在本章中，你将学会使用矩形和文本域构建一个BusinessCanvas商业模型画布网站。
项目背景
在日常工作过程中，总是免不了需要对竞争对手的产品及其商品模式进行分析，从而了解当前自己的产品是否具有竞争力和不可取代性、商业模式是否可持续。
而企业融资时也常常需要用简单易懂的方式，让投资人明白你，或者企业需要这笔钱用来做什么。
这就催生了BusinessCanvas商业模型画布。
BusinessCanvas商业模型画布在企业前期可以帮助企业快速确定产品或者创意的商业可行性，后期亦可作为产品核心及其迭代方向的确立。
那么本周中，我们就搭建一个BusinessCanvas商业模型画布网站，作为一个网页工具，提供我们创建画布的效率。
项目搭建
首先，创建一个新项目，命名为BusinessCanvas。
框架搭建
拖入一个“矩形1”组件，作为展示区域的参考大小。
设置位置为（40，40），设置大小为1300*700。
接下来，构建每个区域的框架。
拖入12个“矩形1”组件，调整线宽为2，尺寸按照下面的排布方式进行排布。
不得不说，有时候需要一点审美才能构建出较为优美的页面。
内容搭建
下面搭建画布每一块内容的标题。
拖入一个“三级标题”组件，修改里面的文字为：1、目标客户细分 Cuustomer Segmentation&Target
调整位置为在画布区域左边和右边都距离20，在“样式”工具栏中，设置文字排版为“Medium”加粗，设置字体为17号字，颜色为#333333。
同理，我们按照画布的内容框架，在每一块中都设置标题。
紧接着，是可供用户输入内容的多行文本框。
拖入一个“文本域”组件，调整它的位置和尺寸在画布框内距离下边距和左右边距都为20。
在“交互”工具栏，设置提示文字为：示例：一线城市白领，设置隐藏提示：获得焦点。
在“样式”工具栏中，设置文字排版中，字号为17号字，字体颜色为#409EFF。
这样，在用户输入文字时，文字呈现蓝色。
同理，我们设置每一个画布框。
这样，我们就完成了BusinessCanvas商业模型画布的构建。
在浏览器中预览下，并完善画布的输入内容，看看效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
商业模式画布：ricardowesley.gitee.io/canvas
说在最后
利用矩形和文本域构建输入性的网站的形式很常见，也可以用上面的方法做很多实用性的网站，方便自己日常工作的使用。
工作中最常用的方式就是打开网站，输入内容，然后截图放在PPT或者文章中使用，大大提高工作效率。
其他类似的工具网站也可以参考下：
四象限工作法：ricardowesley.gitee.io/fourquadran…
5W2H分析法：ricardowesley.gitee.io/m5w2h
SWOT分析法：ricardowesley.gitee.io/swot
年度总结模版：ricardowesley.gitee.io/summary
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
