H5设计精灵
首页
产品功能
设计案例
购买价格
使用帮助
在线编辑
H5设计精灵网页制作软件使用说明

H5设计精灵是一款可视化的网页布局软件,软件具有布局可视化、 CSS 样式参数化、代码生成自动化的特点,通过鼠标选择各种工具在画布上画出元素,可自动创建基本的 CSS 样式,可非常快速的完成对网页的布局创建。其组件可模块化添加,输出的网页支持移动设备,兼容多种屏幕尺寸,极大的提升了开发者的工作效率,同时显著降低了网页布局的难度。

1、窗口介绍

1.1 菜单栏

菜单栏提供了常用的操作,撤销、重做、对齐、缩放工作区、复制、粘贴、前后移、删除、改变页面尺寸、编辑样式文件、文件列表显示等。

1.2 工具栏

工具栏提供了HTML元素,以及查找功能。点击元素后直接在工作区进行拖拽添加元素,也可以点击查找元素后,点击指定位置,所有该位置的元素在菜单中显示。

1.3 文件列表栏

文件列表已树形方式展示已有设计文件,你可以右键点击,出现菜单后,进行添加删除文件操作。

1.4 元素路径栏

元素路径栏已路径的方式显示元素在dom树中的位置。你可以直接点击选中元素的父节点,或者直接点击前方的 > 节点,选中元素的兄弟节点。

1.5 工作区

工作区显示当前正在设计的文件,你可以直接点击工作区的元素,进行拖拽移动位置,更改宽高度,或者右键点击元素,修改元素的属性和样式等。也可以直接从资源文件管理中拖拽图片到工作区,进行添加操作。工作区也支持按键操作,你可以直接上下或者左右进行微调元素位置的操作。

1.6 右侧边栏

右侧边栏包含元素属性、Dom树、动画属性、图像变换、字体设计、页面属性、图标等栏目。

2、文件菜单

2.1 新建项目

新建时,可以选择不同的项目类型。其中工作区大小,在建立项目后可以随时切换。

2.2 打开项目文件

从资源管理器打开项目文件(.h5a)。

2.3 另存为

将当前设计的项目文件(.h5a)保存到资源管理器中。

2.4 保存HTML页面

将当前的设计的项目文件保存为HTML格式文件。

2.5 导入PSD文件

将PSD设计源文件转换为h5a格式项目文件,并编辑。

2.6 导出图片、代码

将设计的文件导出为图片或HTML代码,导入到淘宝、京东等商城中。

2.7 字体管理

修改H5设计精灵支持的字体,包括系统字体和云字体。也可以将自行安装的系统字体导入到该字体库中。(注:需要有支持Flash的浏览器,使用360浏览器和搜狐浏览器皆可以)

2.8 素材管理

可以将常用的设计元素导入到H5设计的素材库,设计时快速查找添加。

2.9 保存

将当前的设计文件保存到硬盘中。

2.10 预览

在浏览器中预览当前设计文件。

2.11 上传

将当前设计文件同步到云中(需要付费用户才能使用)。

2.12 撤销、重做

撤销或重做当前操作。

2.13 对齐图标

 在容器内对齐元素,容器大小调整后,元素自动调整位置

 2.14 缩放工具

 调整工作区的缩放比例。

 2.15 复制、剪切、张贴

 对元素进行复制、粘贴,支持不同页面的元素复制。

 2.16 前移、后移

 在dom树中调整元素位置,dom树后面的元素会显示在前面元素之上,绝对(absolute)定位元素显示在相对定位(static,relative)元素之上。

 2.17 删除

 删除选定的元素

2.18 页面尺寸调整

 调整页面大小,也支持自定义尺寸。

 2.19 样式编辑

 编辑当前页面的样式

 2.20 文件列表显示

 切换文件列表的显示状态

3、工具栏

工具栏提供了元素的添加键,点击元素后,移动到工作区,点击拖动区域进行添加。

 3.1 查找元素

 当一个位置有多个元素重叠显示时候需要使用此功能查找该位置下的元素。点击查找元素按钮,再点击要查找的位置,就有相应的元素列表显示。

 3.2 容器

 容器可以摆放其他元素,文本、图片、子容器等,所有添加到容器的元素以绝对定位元素的方式进行添加,你也可随时切换容器类型为垂直容器或者水平容器,之后的元素已块级元素或者内联元素的方式添加。

 3.3 水平容器

 水平容器可以摆放其他元素,文本、图片、子容器等,所有添加到水平容器的元素以内联元素的方式进行添加,你也可随时切换容器类型为容器或者垂直容器,之后的元素已绝对定位元素或者块级元素的方式添加。

 3.4 垂直容器

垂直容器可以摆放其他元素,文本、图片、子容器等,所有添加到垂直容器的元素以块级元素的方式进行添加,你也可随时切换容器类型为容器或者水平容器,之后的元素已绝对定位元素或者内联元素的方式添加。

 3.5 标签

 标签通常是单行文本,不会自动换行。也可输入回车键进行手动换行。添加标签时,区域的高度决定字体的高度,当然也可以双击标签,修改字体大小属性等

 3.6 标题

 与标签类似,字体稍大。

 3.7 多行文本

 多行文本超出控件范围可以自动换行。

 3.8 段落

 段落通常位于垂直容器内,用于输入文章等文字较多的地方。可以自动换行,回车后自动创建新的段落。

 3.9 图片

 用于显示图片,添加后出现图片工具条,选择添加图片从资源管理器中添加图片。也可直接输入图片http://地址。

 3.10 视频

 视频用于添加视频,添加后选择编辑属性,输入src,http://地址,就可以在预览中看到视频了。

 3.11 声音

 声音用于添加音频文件,添加后选择编辑属性,输入src,http://地址,就可以在预览中看到声音控件了。

 3.12 框架

 框架用于包含其他的http网页,在设计时不显示。预览或者输出后会显示。

 3.13 表单

 作为垂直容器可以包含其他表单控件。

 3.14 超链接

 添加文字超链接。

 3.15 按钮

 表单控件按钮。

 3.16 标签label

 标签label,可以包含文本、单选按钮、复选框,点击标签label后,单选按钮、复选框自动切换状态

 3.17 单选按钮

 单选按钮控件

 3.18 选择输入框

 添加选择输入框后,可以添加option选项。

 

 

 3.19 输入框

 用于接收用户输入文本

 3.20 密码框

 用于接收用户输入的密码

 3.21 提交按钮

 提交表单

 3.22 日期输入框

 3.23 复选框

 添加复选框,同组输入框应输入相同的name属性。

 3.24 多行输入框

 用于接收用户输入的多行文本。

 3.25 直线

 添加直线后,可以通过更改背景颜色更改直线颜色。

 3.26 椭圆

 3.27 矩形

 3.28 圆角矩形

 3.29 光球

 3.30 三角形

4、工作区

 工作区是网页设计的区域,右键点击元素就会有菜单出现。

 4.1 复制元素

 将选定的元素复制到粘贴板,元素的样式及动画效果一并进行复制。复制元素后可以到其他页面进行粘贴,可以方便的复用已有的设计。

 4.2 剪切元素

 将选定的元素复制到粘贴板,完成粘贴后删除原元素

 4.3 粘贴元素

 将张贴板的元素复制到当前选定的元素下,如果选定元素不是容器类型,则作为兄弟节点插入。

 4.4 替换元素

 粘贴板的元素复制到当前元素的位置,并删除当前元素。此方法可以方便的复制元素到指定位置。

 4.5 复制元素ID

 将元素的ID复制到剪切板。

 4.6 编辑元素属性

 可以单独编辑元素的任意属性。

 4.7 编辑元素文字

 可以编辑元素内部文字,以及编辑HTML代码。可以方便的修改元素的样式和内容。

 4.8 编辑元素元素样式

 可以手动输入元素的常规样式,以及元素的hover/active/focus样式。

 4.9 元素转为超链接

 用一个超链接元素包含选定的元素,被选定的元素可以是任意的容器、图片或文字类型。

 4.10 显示/隐藏元素

改变元素的显示状态,该改变仅改变元素的设计时可见状态,并不影响输出的可见状态。需要改成不可见应将元素的显示类型(display)改成 “none”。

 4.11 删除元素

 删除选定的元素。

5、右侧边栏

5.1 元素属性侧边栏

 5.1.1 元素ID

 显示当前选中的元素ID

 5.1.2 状态

 切换元素的状态normal/hover/active/focus,切换到hover状态并更改元素的样式,然后切换到其他状态,元素的hover样式就可以保存下来。

 5.1.3 元素操作按钮

 分别是文字属性工具条、图片属性工具条、变换菜单、容器切换菜单、元素类管理对话框,可以修改元素的状态。

 文字属性工具条,可以修改文字的字体,前景色,增加和缩小字体,修改字体大小,行间距,字间距,文字的横排竖排,首行缩进,文字对齐方式,加粗、斜体、下划线等。

 图片属性工具条,可以修改背景色,从资源管理器选择文件,修改图片的http地址,剪切文件,修改掩码图片等。

 变换菜单可以对元素进行旋转,缩放,横向缩放,纵向缩放,横向倾斜,纵向倾斜,修改透明度等操作。

 切换容器类型,可以让元素在容器、垂直容器、水平容器之间进行切换。

 类(Class)管理,用于添加或删除元素的类,类的定义应在菜单栏的"编辑样式文件"中输入。

 5.1.4 显示类型(display)

 可以切换元素的display样式

 5.1.5 边缘填充框

 用于设置元素的margin,padding样式,按住箭头拖拽就可以直接改变元素的margin,padding样式的大小。

 5.1.6 元素位置样式

 元素位置样式包含左、右、上、下、宽、高样式。每个样式都支持px,%,rem单位。

 5.1.7 浮动、计算、溢出、定位样式

 可以设置元素的浮动(float),计算(box-sizing),溢出(overflow),定位(position)等样式。

 5.1.8 边框样式

 可以设置边框的宽度、颜色、形状等属性,即可同时设置4个方向的边框属性,也可以单独设置某个方向的边框属性。

 半径可以设置边框的圆角的大小。

 5.1.9 背景色设置

 设置元素的背景色

 5.1.10 插入位置锁定

 锁定添加或者复制的元素的插入位置

5.2 Dom树侧边栏

 HTML元素Dom树以树形的方式展示了设计页面的所有元素,可以方便的上下移动调整元素的位置。也可以显示或隐藏个节点。也可以输入文本在树里搜索满足条件包含文本的元素。

5.3 动画属性侧边栏

 可以为每个元素添加动画属性,页面载入或者元素显示时候,元素的动画就会生效。

 

5.4 图像变换

 5.4.1 滤镜效果

 选定元素以后,可以修改元素的虚化,饱和度,色调,亮度,对比度效果。

 5.4.2 Box阴影

 支持修改元素的外阴影和内阴影效果。

5.5 字体设计效果

 提供内置的多种文字效果,完全无需添加任何插件就可以实现。

 5.5.1、文字描边、立体

 修改文字的描边效果

 5.5.2 文字纹理

 更改文字的背景图片

 5.5.3 文字阴影

 修改文字的阴影效果

 5.5.4 文字渐变

 修改文字的渐变效果

5.6 页面设置

 5.6.1 页面信息

 可以修改页面的文件名,页面标题,页面关键字,包含文件等。(注意包含文件只有在预览或导出才生效)

 5.6.2 页面参数

 显示页面宽度、高度、Rem信息

 5.6.3 自定义字体文件

 显示页面使用的字体列表(非本地)

5.7 图标库

 提供了4套开源的图标库

快捷键说明

 CTRL + C 复制选定的元素

 CTRL + X 剪切选定的元素

 CTRL + V 张贴的剪切板元素

 Del 删除选定的元素

 CTRL + S 保存文档

 CTRL + N 新建文件

 

文档目录
1、窗口介绍
    1.1 菜单栏
    1.2 工具栏
    1.3 文件列表栏
    1.4 元素路径
    1.5 工作区
    1.6 右侧边栏
2、文件菜单
    2.1 新建项目
    2.2 打开项目文件
    2.3 另存为
    2.4 保存HTML页面
    2.5 导入PSD文件
    2.6 导出图片、代码
    2.7 字体管理    2.8 素材管理    2.9 保存    2.10 预览    2.11 上传    2.12 撤销、重做    2.13 对齐图标    2.14 缩放工具    2.15 复制、剪切、张贴    2.16 前移、后移    2.17 删除    2.18 页面尺寸调整    2.19 样式编辑    2.20 文件列表显示
3、工具栏
    3.1 查找元素    3.2 容器    3.3 水平容器    3.4 垂直容器    3.5 标签    3.6 标题    3.7 多行文本    3.8 段落    3.9 图片    3.10 视频    3.11 声音    3.12 框架    3.13 表单    3.14 超链接    3.15 按钮    3.16 标签label    3.17 单选按钮    3.18 选择输入框    3.19 输入框    3.20 密码框    3.21 提交按钮    3.22 日期输入框    3.23 复选框    3.24 多行输入框    3.25 直线    3.26 椭圆    3.27 矩形    3.28 圆角矩形    3.29 光球    3.30 三角形
4、工作区
    4.1 复制元素    4.2 剪切元素    4.3 粘贴元素    4.4 替换元素    4.5 复制元素ID    4.6 编辑元素属性    4.7 编辑元素文字    4.8 编辑元素元素样式    4.9 元素转为超链接    4.10 显示/隐藏元素    4.11 删除元素
5、右侧边栏
    5.1 元素属性侧边栏      5.1.1 元素ID      5.1.2 状态      5.1.3 元素操作按钮      5.1.4 显示类型(display)      5.1.5 边缘填充框      5.1.6 元素位置样式      5.1.7 浮动、计算、溢出、定位样式      5.1.8 边框样式      5.1.9 背景色设置      5.1.10 插入位置锁定    5.2 Dom树侧边栏    5.3 动画属性侧边栏    5.4 图像变换      5.4.1 滤镜效果      5.4.2 Box阴影    5.5 字体设计效果      5.5.1、文字描边、立体      5.5.2 文字纹理      5.5.3 文字阴影      5.5.4 文字渐变    5.6 页面设置      5.6.1 页面信息      5.6.2 页面参数      5.6.3 自定义字体文件    5.7 图标库