二楼打个广告：感谢站长Carlos大佬的协助。但我不知道他的ID我就不艾特了。
推荐使用VScode编写FDF，其中有Carlos的fdf插件，搜索War3FDF即可。
话说站长的站到底指的是什么站？

教程开始之前，我得先把我踩过的坑告诉各位，这是我自己在开发过程中自己发现或转载的一些问题和注意事项。
如果某天你遇到了某个莫名其妙的BUG，可以回来这里看看，说不定能找到解决方法。如果发现了其他新的坑我会记录在楼中楼。
#1 TOC文件末尾一定要空一行。（感谢皮蛋大佬）
#2 替换FDF文件后不要直接测试，而是先保存两次再点击测试。记得是两次。
#3 不要用 " /* ... */ " 注释，我一用这个格式就原地升天，具体原因不明。
#4 创建UI时是从上而下的读取FDF文件并创建。如果FDF文件出错，则错误的位置以后的内容都不会再创建。
这一个部分主要内容都是解释代码，非常长的代码，不喜欢的可以直接跳过，等我下一个部分的教程。

先上一段代码以及翻译(请在网页端查看以免手机端自动换行)。
#0 IncludeFile "UI\FrameDef\UI\EscMenuTemplates.fdf",
//框架 "对话框" "ScriptDialog"
#01 Frame "DIALOG" "ScriptDialog" {
//使用活动的链接
#02 UseActiveContext,
//宽度0.288f
#03 Width 0.288f,
//高度0.112f
#04 Height 0.112f,
//对话框背景 "ScriptDialogBackdrop"
#05 DialogBackdrop "ScriptDialogBackdrop",
//框架 "背景" "ScriptDialogBackdrop"
#06 Frame "BACKDROP" "ScriptDialogBackdrop" {
//授予文件名称
#07 DecorateFileNames,
//背景平铺
#08 BackdropTileBackground,
//背景贴图文件 "EscMenuBackground"
#09 BackdropBackground "EscMenuBackground",
//背景边框锚点 "UL|UR|BL|BR|T|L|B|R"
#10 BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
//背景边框大小 0.048
#11 BackdropCornerSize 0.048,
//背景贴图大小 0.128
#12 BackdropBackgroundSize 0.128,
设置背景边框间距 0.01 0.01 0.01 0.01,
#13 BackdropBackgroundInsets 0.01 0.01 0.01 0.01,
//背景边框文件
#14 BackdropEdgeFile "EscMenuBorder",
//背景透明通道
#15 BackdropBlendAll,
}
//框架 "文字" "ScriptDialogText" 继承 "EscMenuTitleTextTemplate"
#16 Frame "TEXT" "ScriptDialogText" INHERITS "EscMenuTitleTextTemplate" {
//使用活动的链接
#17 UseActiveContext,
//设置锚点 顶部 "ScriptDialog" 顶部 0.0 -0.03
#18 SetPoint TOP, "ScriptDialog", TOP, 0.0, -0.03,
}
}
//框架 "附着文字按钮" "ScriptDialogButton" 继承 包括子级 "EscMenuButtonTemplate"
#19 Frame "GLUETEXTBUTTON" "ScriptDialogButton" INHERITS WITHCHILDREN "EscMenuButtonTemplate" {
//使用活动的链接
#20 UseActiveContext,
//按钮文字 "ScriptDialogButtonText"
#21 ButtonText "ScriptDialogButtonText",
//框架 "文字" "ScriptDialogButtonText" 继承 "EscMenuButtonTextTemplate"
#22 Frame "TEXT" "ScriptDialogButtonText" INHERITS "EscMenuButtonTextTemplate" {
//文字 ""
#23 Text "",
}
}

注意一下我们用不上的两个函数（或者说我不知道怎么用，如果有知道的麻烦解答下谢谢）：
UseActiveContext,
DecorateFileNames,
初步猜测，这是用以读取游戏界面文件内的字符串和路径的功能，至于我们自己则不需要用到这种预设功能。阅读代码时请无视。

第0行
#0 IncludeFile "UI\FrameDef\UI\EscMenuTemplates.fdf",
其中 IncludeFile 的作用是引用其他FDF文件，以便使用其中的东西，懂jass的可以理解为Vjass中requires/needs关键字。
后面的则是文件的相对路径。填写的内容则是编辑器中导入管理器的路径。
需要注意的是，在这行的最后面跟着一个逗号，逗号的作用是分割语句。相当于ZINC中的分号；。
所有语句之间和参数都必须要逗号分隔。但语句和第一个参数之间则不用。详见第3、4行。

第1行
#1 Frame "DIALOG" "ScriptDialog" {
其中 Frame 的作用是声明一个框架，之后的类型和名称定义必填，后跟花括号，花括号内的内容为框架的主体。
该行定义了一个名为ScriptDialog的对话框。
类型可在其他帖子内找到，这里不一一列出。
名称为英文，最好老老实实用全英文，不要加上数字或者符号。因为我都没试过，出现问题不负责。
花括号内的是框架的主题，其中包含了属性或者其他框架。

第3、4行
#03 Width 0.288f,
#04 Height 0.112f,
这是两个功能函数，定义了该框架的长宽。
换算的公式为：实际尺寸 / 16 * 0.01
0.288实际尺寸为460.8像素。
0.288后面的F是C#/JAVA/JSON等语言的写法，代表单精度浮点数。实际就是个小数。可以省略。
（本身FDF的格式看起来也很像是JSON等数据格式的写法）
接第0行内容（7楼）：Width和0.288f,之间并没有逗号分隔。因为0.288f是第一个参数。而0.288f后面需要逗号则是因为分隔下一行的语句。

第8、9行
#08 BackdropTileBackground,
#09 BackdropBackground "EscMenuBackground",
第8行是一个无参数的功能函数，作用是将当前的BACKDROP贴图用作平铺。（不知道平铺是什么意思的人请百度）
第9行是一个功能语句，作用是定义ScriptDialogBackdrop的贴图路径为"EscMenuBackground"。
"EscMenuBackground" 看起来不像一个路径的原因是因为这是读取了游戏界面内预设的内容，所有字符串等都已经封装好在了另一个FDF文件内。
如果我们使用到了BackdropBackground功能则需要填写相应的路径，例如"Textures\Black32.blp"

第10行
#10 BackdropCornerFlags "UL|UR|BL|BR|T|L|B|R",
BackdropCornerFlags的作用是定义边框所用的锚点。边框实际是将一张图片分割多次附着在图片的周围。一共8个可供附着的点。
换句话说则是：一个Backdrop的边框实际是由8个小贴图组成。
UL = UP LEFT = 左上角
UR = UP RIGHT = 右上角
BL = BOTTOM LEFT = 左下角
BR = BOTTOM RIGHT = 右下角
T = TOP = 上
L = LEFT = 左
B = BOTTOM = 下
R = RIGHT = 右
一般来说这一行只需要直接复制，如果有特殊需求的话可以删掉其中任一锚点（至少保留一个锚点），多个锚点之间用竖线 | 分隔。

第11行
#11 BackdropCornerSize 0.048,
BackdropCornerSize的作用是设置每个锚点附着的边框贴图的大小。

第12行
#12 BackdropBackgroundSize 0.128,
BackdropBackgroundSize是设置平铺效果中单张贴图的尺寸。
至于为什么只有一个参数我也不是很清楚魔兽的换算，仍在研究中。
如果你不需要平铺的图片则不需要这一行。
（也有可能是我将功能理解错了，望高手解答）

第13行
#13 BackdropBackgroundInsets 0.01 0.01 0.01 0.01,
BackdropBackgroundInsets的功能缩小（或者裁剪，还没查出来）当前贴图的大小以达到贴合边框的目的。数值的大小和贴图的尺寸成反比。
具体对应的锚点尚不明确。

第14行
#14 BackdropEdgeFile "EscMenuBorder",
BackdropEdgeFile定义边框贴图文件的路径，具体参考第9行的说明。