设计器界面分为六大部分,菜单栏、快捷键操作栏、工具栏、目录(图书浏览器)、样式库(富媒体控件)、html,如下图 。
如下图,菜单栏可以方便用户操作设计器,例如点击“文件”可以新建文件,打开文件,保存文件,关闭文件等;点击“插入”可以插入特殊符号、ID等。
如下图,快捷键操作栏可以快速地操作设计器,下面详细介绍每一个快捷键按钮。
1、点击“新建”新建html空白页面;
2、点击“目录”自动生成目录(第三章会详细介绍如何自动生成目录);
3、点击“机型”选择预览文档的机型,设计器支持四种机型,Galaxy S5、Nexus X5、iphone6、ipad,默认是ipad;
4、点击“保存”保存文档。
如下图,工具栏是对html文字做一系列操作,主要包括以下操作:
1、撤销
点击撤销图标或者ctrl+z,撤销图标如下图。
2、设置字体大小
拖动鼠标选择文字,点击设置字体大小图标,设置字体大小的图标如下图。
3、设置文本颜色
拖动鼠标选择文字,点击设置字体颜色图标,设置字体颜色的图标如下图。
4、书籍视图和代码视图的切换显示
点击切换书籍视图图标切换为书籍界面,点击代码视图图标切换为代码界面,书籍视图和代码视图图标如下图。
5、h1-h6级标题设置
为了使整个文档看起来层次分明,我们可以给文档添加段落,段落有六级标题h1-h6,普通段落p。输入的文字默认是普通段落。
添加标题的方法如下:单击鼠标并拖动选中要添加标题的文字,点击h1-h6。
标题设置图标如下图。
7、设置粗体,斜体,下划线删除线、上下角标
拖动鼠标选择文字,点击设置粗体,斜体,下划线删除线、上下角标图标,设置粗体,斜体,下划线删除线、上下角标图标如下图。
8、设置显示格式(左对齐,居中对齐,右对齐等)
拖动鼠标选择文字,点击设置显示格式图标,显示格式图标如下图。
9、设置有序列表和无序列表
鼠标拖动选择文字,点击设置有序列表和无序列表图标,设置有序列表和无序列表图标如下图。
10、设置首字母格式
拖动鼠标选择文字,点击设置首字母格式图标,设置首字母格式图标如下图。
11、清除样式
拖动鼠标选择设置了样式的文字,点击清除样式图标,清除样式图标如下图。
如下图,图书浏览器主要包括Text(html)、Styles(文档样式)、Images(文档的所有图片)、Fonts(文字字体)、Audio(音频)、Video(视频)、Gallary(画廊)。通过图书浏览器我们可以快速浏览需要查看的文档内容,点击“>”展开文件夹。
点击上图左下角的“目录“按钮,可以从图书浏览器结构切换到目录结构,目录结构如下图,目录结构相当于整个文档的索引,通过目录我们可以也快速浏览需要查看的文档内容,点击“>”展开文件夹。
如下图是样式库,添加样式可以使文档结构分明。
文档中添加样式方法如下:
单击鼠标并拖动选中要添加样式的文字,点击样式库中具体某个样式,即可添加成功。
同类型的样式只能添加一个,后添加的样式会覆盖前一次添加的。
点击上图下方的”富媒体控件“按钮,可以切换到富媒体界面。富媒体控件包括图像,音频,视频,画廊,链接等,后续章节会详细介绍如何添加每个控件。
如下图是html正文部分,在这里可以添加文字,图片,视频,音频等。