使用文档 —— Document

梯子

Ftmlor

布局

教程

版权

嘿！您正在阅读使用文档。在这里您可以找到Ftmlor的使用方法及其他注意事项。

Ftmlor 使用文档

Now Version：3.0 | 文档更新时间：2022年10月22日

简介

Ftmlor是一款个人自主开发的可视化Html网页设计器，内置了自主研发Fro UI框架及jQuery，为广大前端爱好者开拓了网页新设计道路。

本内容对于Ftmlor使用者极为重要，它关乎着如何在Ftmlor中构建网页，这需要您耐心了解。

布局

从总体上来说，Ftmlor的布局总共可以分为三大板块：Ftmlor设计出的网页布局、工具栏、设计页。

Ftmlor设计出的网页布局

在设计之前，您需要先了解关于使用Ftmlor设计网页的基本知识。

  • 什么是Mod？

    • Mod是Ftmlor网页构成的最重要部分，它代表着网页元素。(下为其样)

    (我是一个Mod)

    (下为其选中时的状态)

    (我是一个Mod，现在我被选中了)

  • 如何添加Mod？

    • 您只需要从组件箱中单击一个Mod名称，再单击至中间板，即可完成一次Mod的添加。

    (演示视频如下)

现在您已经了解了一些基本知识，让我们进入主要内容吧！

由Ftmlor设计出的网页主要包括两个部分：Head和Body。

Head是用于存放网页资源或设置网页基本信息，您可以在More页中进行资源添加或设置。

Body是网页的主体部分，主要由Mod构成。当您的创意不断增添，一个网页就呈现在您的眼前。

如果您想了解如何在Ftmlor中设计一个网页，您可以点击教程Hello World!

(下为Ftmlor设计出的网页结构。)

Head(在More页中设置)

Body(由Mod构成)

每当您添加一个Mod，Body部分就会更加丰富，再配合您的创意，您就会发出WOW的惊叹！

对于Mod属性及样式设置的教程，详情请移至Mod设置

对于构建Head部分的教程，详情见构造Head

工具栏布局

工具栏的布局如下：

(您可以尝试将鼠标悬停至各个按钮下，届时您会观察到会有提示告诉您该按钮的作用。)

按钮介绍：

图标 名称 作用
运行 展示您设计的网页。
关闭Mod边框显示 关闭Mod的黑色边框并且删去Mod自带padding(padding:10px)。
Mod上移 将选中Mod移动到该Mod的上一个Mod前。
Mod下移 将选中Mod移动到该Mod的下一个Mod后。
保存 将您设计的网页加密保存，会弹出下载，文件格式为.txt。
输出到Html 将您设计的网页打包成Html文件包，自带Fro UI框架与jQuery，文件包为zip压缩包。
固定组件箱与属性面板 固定组件箱与属性面板，它们将不会自动缩回。

设计页布局

您的设计页总共可以分成三大部分：组件箱、属性面板、中间板

组件箱用于寻找构建网页的Mod。在组件箱中，Ftmlor不仅允许您自己添加Html Element还提供了Fro UI组件。

属性面板可以查看选择Mod的各种属性。您还可以为其添加自定义Html Element属性或内联CSS样式。

中间板是构造网页的地方。您任何在组件箱中选取的Mod都需要添加到中间板中才能生效。在您合理的搭配之下，中间板的内容越来越充实，最后形成了您网页的基础模样！

(下图为各个部分的位置。)

pageDesign

在属性面板上，我们可以看到有三个折叠框：[Mod Info],[Mod Attribute],[Mod Style]

那么它们分别代表什么呢？

Mod Info 参数详解

(参数名严格要求大小写区分。)

参数名 解释 可否修改
Name 为这个Mod的唯一名称，如p1,a2等等。 No
Tag 即代表这个Mod在Html中的标签名，如div,等等。 No
Class 即这个Mod的类，等价于<a class="test" href="#">Test</a>中的Class属性(test)。 Yes
Text 即Mod的文本 Yes

[Mod Attribute]与[Mod Style]可以设置所有Html中的元素属性即内联样式。

对于添加Text属性，Ftmlor允许您双击组件进行文本修改。

(下为Design页的各种操作演示)

教程

在本章，您将学习到如何设置网页的Head与其它分页的说明及操作。

构造Head

Head也是构成Ftmlor设计出的网页的重要部分。

先来了解一下分页吧！

在其设计界面中，可以看见明显的三个页面:


Design
Source
More

各分页简介：

(Design页在设计页布局中已有详细阐明，这里不作介绍。)

分页名 解释
Source 当您在工具栏中按下[保存]按钮时，界面就会切换到该页，并会自动弹出下载。
More Head在此页进行设置。除此之外，您还可以进行切换主题，载入工程项目等等操作。

(下为各分页的演示)

在演示视频中，您可以清楚的看见More页中有[Head设置]这个分区

(如下图所示)

Head-p

而其中又有对Html中Head标签的设置、外部资源设置两个部分

名称 解释
对Html中Head标签的设置 展开后，您会发现有Name、Http-equiv、Scheme三个下拉框，相关meta属性就可以在此进行添加。此外，还可以设置网页(title)、编码(Charset)及网页图标(Icon)。
外部资源设置 相关的Css样式表与JavaScript文件由此处添加，您只需要输入路径即可载入。

Ftmlor自带Fro UI与jQuery框架，所以对于外部资源设置中，css/Fro UI.css等为默认资源路径，您不需要再次手动添加。

其它操作

下面这个视频将演示：

  • 载入工程项目
  • Html直转Ftmlor工程项目
  • 选择设计主题

Hello World!

让我们从一个简单的Hello World开始吧！

下面这个视频将演示：

  • 添加自定义Mod
  • 设置Mod文本
  • 给Mod添加样式

Fro UI ON!

该教程为高级教程，您需要对Fro UI框架有一定的了解。

想要在Ftmlor中使用Fro UI？不用担心，Ftmlor完美兼容Fro UI框架并为您提供了相应的Mod组件。

当您使用Ftmlor越来越娴熟，不妨试试Fro UI组件，它能为您的网页设计锦上添花！

下面这个视频将演示：

  • 使用Fro UI组件搭建一个简易导航栏
  • 使用Fro UI组件搭建简单页面样例展示