快速入门手册
晒网 · 创作
专业 HTML5 创作工具软件
左右划切换章节
上下滚动读内容
双指缩放看细节
电脑手机自适应
扫码到手机
H5.saiwon.com
双击添加标题
注:点击目录可直达内容页
跨平台在电脑上一次创作后,任何可上网的设备(手机、平板、电脑)上均可完美呈现
功能强专业 H5 技术与办公软件简单易用特点完美结合,网页设计师可用于制作商业 H5 作品,普通白领也可轻松制作 H5 文档
轻量级成品文件数据量小,在较差的手机网络环境中也可快速打开流畅观赏
易传播你的 H5 作品不只局限在微信中观看,还可简单分享到微博、QQ以及各类PC与手机版网站,更可嵌入到手机 APP 中
完全自主在晒网创作的 H5 作品,可下载完整成品源文件,以便你放到自己的服务器,或直接当做办公文档存档
欢迎使用晒网 · 创作!
这是一款专业级的 HTML5 创作软件,旨在帮助企业用户将最新的H5 技术应用到办公场合,创作出面向未来的商业文档。
一台可上网的电脑
作为专业的 H5创作软件,你最好在大屏幕的电脑上,用鼠标操作,以获得最佳工作效率
Chrome 浏览器
这是一款网络软件,不需要下载安装,在现代浏览器中即可完成所有工作。
建议尽可能使用 Chrome 浏览器,以获得最强的功能,并更好地模拟手机显示。条件不具备时,也可使用 QQ浏览器、360浏览器极速版等采用 chrome 内核的浏览器替代。
- 工具栏
- 作品管理
- 工作设备选择
- 插入编辑页面构件
- 预览发布
- 账户相关功能
- 作品页缩略图
- 上方的“+”图标添加新页
- 拖动页可改变顺序
- 右键点击有更多功能
- 页工作区
- 点击选择构件
- 双击进入该构件内容编辑状态
- 点击不同的构件,右侧的构件属性区会相应变化,以便你进一步调整此构件
- 构件属性区
- 根据你在页工作区中点选的构件不同而变化内容
- 上下方的标签都可以点选,以分类设置构件的不同属性
- 不同的构件属性设置不尽相同,尽管操作试试!
开始你的创作
小技巧
- 点击左侧页缩略图区上方的“+”图标,添加新的作品页
- 现在你有了一张新的作品页,在上面开始创作吧!
你可以右键点击作品页缩略图,建立该作品页的副本,快速创建版面类似的作品页
小技巧
- 点击工具栏上的“文本”图标,将自动在作品页内创建一个新的文本构件
- 双击文本构件,即可编辑输入文字
直接在作品页内空白处双击鼠标,可快速添加新的文本构件并进入编辑状态
小技巧
- 点击工具栏上的“图片”图标,将弹出一个图片选择框
- 你可以读取硬盘上的图片,或选择一个已有的图片创建一个新的图片构件
如果你使用的是 Chrome 浏览器,还可以直接用 Ctrl+V 粘贴外部图片。具体操作步骤是:
- 在其他软件(如 Excel、Photoshop)中,选中一些内容,按下 Ctrl+C
- 回到作品编辑界面,按下 Ctrl+V 即可
添加长图文
小技巧
- 点击工具栏上的“长图文”图标,将在作品页内添加一个长图文构件
- 双击长图文构件,将进入长图文编辑界面
你可以将长图文理解为一个简版的 word,在里面可以插入图片、文字、表格等。
如果观看时图文内容超过屏幕,读者可以通过滚动看到全部内容,就像现在这样。
美化页面构件
小技巧
- 先在作品页中点选一个构件
- 注意看,右侧的构件属性区发生了变化,在这个区域,你可以进一步设置构件的属性
构件属性区上下都有页签,你可以点击这些页签,切换不同的属性分类,深入控制构件的样式。
组合使用这些样式,你可以创造出我们也没想到,丰富多彩的构件形式!
调整构件样式
小技巧
- 点构件属性区上方的“样式”标签,你可以看到很多样式设置
- 这些样式设置是可以展开的,里面是更进一步的设置参数
- 点击这个快速设置区,会有一些现成的样式供你使用
- 不满足现成的设置,可分别调节具体参数,直到你满意
如果你一次选择了多个构件,可以统一设置这些构件的样式,以便你将页中多个构件统一为同样的样式。
小技巧
- 点构件属性区上方的“排列”标签,将显示出排列构件所需的各种工具和具体参数
- 点击这些排列图标,可以快速移动、对齐、分布构件
- 点击这个快速设置区,可以帮助你将构件迅速移动到页面中相应的位置
- 构件的尺寸均以百分比为单位,以便自适应不同比例的屏幕
注意到界面上的标尺了吗?你可以像 PS 一样,从标尺中拖出参考线。排列构件的时候,这些参考线可以有效帮助你统一对齐。
给构件添加行为
说明
- 先在作品页中点选一个构件
- 然后点击属性区上方的行为标签
构件的动画效果、点击后的动作,在这里均被归类为构件行为。
这些动画及动作均可组合使用,方便你创造出最佳观赏效果和交互体验。
添加动画效果
小技巧
- 点构件属性区上方的“ 行为”标签,可以设置构件在不同事件触发下的行为
- 点击添加动画或行为的按钮,可以给构件添加不同的行为,多个动画或动作可连续执行
- 选单中预设了一些常用动画
- 选择不同的动画,调整它的参数,可以定制你的动画效果
这些行为属性卡片,可以通过拖动其标题栏调整执行的先后顺序。
编辑动画的时候,你可以随时点击旁边的播放按钮,快速预览效果。如需预览整页的动画效果,点击工具栏中的预览按钮即可。
添加构件行为
小技巧
- 点击“+动作”按钮,可以为构件添加上动作
- 在选单中选取一种动作
- 填写上相关设置,即可通过指定的事件触发这个动作
构件的动作除了传统的点击后打开网页外,也可在作品页之间跳转,或调用手机的电话、短信、QQ等功能进行联络。
调整不同设备下的表现
小技巧
- 点击工具栏上的“设备”图标,可以选择一种设备,直接以其屏幕比例进行编辑
- “横竖屏”按钮可以帮你快速在手机和电脑版式间切换
先在首选设备(如手机)模式下制作页面,然后用“横竖屏”翻转进行调整。这样可以减少针对不同设备的调整工作量。
小技巧
- 点击工具栏上的“预览”图标,将进入预览模式
- 在预览界面中,你可以通过点击下方的设备图标,预览不同设备下的显示效果
预览功能对于检查作品在不同设备下的显示效果很有帮助。预览时,如果你发现某种设备下的效果不尽如人意,点一下“编辑”按钮,可以快速切换到改设备模式的编辑界面。
发布你的作品
小技巧
- 点击工具栏上的“发布”图标,将显示出发布对话框,允许你将作品发布到晒网提供的免费服务器上
- 如果你觉得自己的作品还不错,愿意作为案例分享给其他晒网用户,可以勾选上分享,并选择一个类别
- 不想作为案例分享也没关系,直接点“发布”按钮,将获得一个发布后的网址,你自行分享此网址给朋友,他们就能看到你的作品了。
发布后的网址,只有你主动通过微信、qq等方式发给朋友,别人才能找到。因此:
下载作品源文件
小技巧
- 点击工具栏上的“下载”图标,将显示出下载对话框,允许你将作品下载到你的本地硬盘上
- 晒网提供了 HTML 和 ZIP 两种下载文档格式,建议
- 文件尺寸较小或主要用作办公文档是,建议选择 HTML 格式
- 文件尺寸较大,或主要用于网站发布,或你需要售卖作品时,建议选择 ZIP 格式
下载功能是会员专属功能,如果你希望将作品用于商业用途或售卖,需要付费成为会员。
不想付费怎么办?那就多创作一些可作为案例的分享给大家的作品,获得积分换取会员资格吧!
了解你的读者反馈
小技巧
- 点位于整个界面的右下角的“作品”页签
- 在出现的界面里面,选择“访问统计”或“用户反馈”等功能
访问统计只能统计到你用晒网服务器发布的作品的访问情况,如果你是下载源代码放在自己的服务器上,请自行修改源码添加你需要的统计功能。
更多功能等你发掘
这份手册只是简单地介绍了创作一个H5 文档的步骤和方法。
实际上,手册中描述的仅仅是晒网 H5 创作工具软件众多功能中很小的一部分。
看过手册,了解基本操作方法后,尽管自行探索使用此软件,相信你能创作出让大家赞不绝口的优秀作品来!
“晒网·创作”开发团队2016年9月