晒网创作快速入门

老张

载入中...

快速入门手册 晒网 · 创作 专业 HTML5 创作工具软件 左右划切换章节 上下滚动读内容 双指缩放看细节 电脑手机自适应 扫码到手机 H5.saiwon.com 主要特点 环境准备 界面概览 开始你的创作 文本图片长图文美化页面构件 调整构件样式排列构件给构建添加行为 动画效果点击行为调整不同设备下的表现看看效果发布你的作品下载作品源文件了解你的读者反馈更多功能等你发掘 

快速入门手册
晒网 · 创作
专业 HTML5 创作工具软件
左右划切换章节
上下滚动读内容
双指缩放看细节
电脑手机自适应
扫码到手机
H5.saiwon.com
双击添加标题

注：点击目录可直达内容页

  

    
      
         跨平台
      
    
  



   在电脑上一次创作后，任何可上网的设备（手机、平板、电脑）上均可完美呈现
  






  
    
       功能强
    
  



   专业 H5 技术与办公软件简单易用特点完美结合，网页设计师可用于制作商业 H5 作品，普通白领也可轻松制作 H5 文档
  



  

  

    
      
         轻量级
      
    
  



   成品文件数据量小，在较差的手机网络环境中也可快速打开流畅观赏
  






    
      
      易传播
      
    



   你的 H5 作品不只局限在微信中观看，还可简单分享到微博、QQ以及各类PC与手机版网站，更可嵌入到手机 APP 中
  



  

  

    
      
         完全自主
      
    
  



   在晒网创作的 H5 作品，可下载完整成品源文件，以便你放到自己的服务器，或直接当做办公文档存档






欢迎使用晒网 · 创作！

这是一款专业级的 HTML5 创作软件，旨在帮助企业用户将最新的H5 技术应用到办公场合，创作出面向未来的商业文档。

  
    一台可上网的电脑
  





   作为专业的 H5创作软件，你最好在大屏幕的电脑上，用鼠标操作，以获得最佳工作效率


  Chrome 浏览器





  这是一款网络软件，不需要下载安装，在现代浏览器中即可完成所有工作。
建议尽可能使用 Chrome 浏览器，以获得最强的功能，并更好地模拟手机显示。条件不具备时，也可使用 QQ浏览器、360浏览器极速版等采用 chrome 内核的浏览器替代。
  1. 工具栏
    • 作品管理
    • 工作设备选择
    • 插入编辑页面构件
    • 预览发布
    • 账户相关功能
  2. 作品页缩略图
    • 上方的“+”图标添加新页
    • 拖动页可改变顺序
    • 右键点击有更多功能
  3. 页工作区
    • 点击选择构件
    • 双击进入该构件内容编辑状态
    • 点击不同的构件，右侧的构件属性区会相应变化，以便你进一步调整此构件
  4. 构件属性区
    • 根据你在页工作区中点选的构件不同而变化内容
    • 上下方的标签都可以点选，以分类设置构件的不同属性
    • 不同的构件属性设置不尽相同，尽管操作试试！
开始你的创作
  1. 点击左侧页缩略图区上方的“+”图标，添加新的作品页
  2. 现在你有了一张新的作品页，在上面开始创作吧！
小技巧
你可以右键点击作品页缩略图，建立该作品页的副本，快速创建版面类似的作品页
  1. 点击工具栏上的“文本”图标，将自动在作品页内创建一个新的文本构件
  2. 双击文本构件，即可编辑输入文字
小技巧
直接在作品页内空白处双击鼠标，可快速添加新的文本构件并进入编辑状态

  1. 点击工具栏上的“图片”图标，将弹出一个图片选择框
  2. 你可以读取硬盘上的图片，或选择一个已有的图片创建一个新的图片构件
小技巧
如果你使用的是 Chrome 浏览器，还可以直接用 Ctrl+V 粘贴外部图片。具体操作步骤是：
  1. 在其他软件（如 Excel、Photoshop）中，选中一些内容，按下 Ctrl+C
  2. 回到作品编辑界面，按下 Ctrl+V 即可
添加长图文
  1. 点击工具栏上的“长图文”图标，将在作品页内添加一个长图文构件
  2. 双击长图文构件，将进入长图文编辑界面
小技巧
你可以将长图文理解为一个简版的 word，在里面可以插入图片、文字、表格等。
如果观看时图文内容超过屏幕，读者可以通过滚动看到全部内容，就像现在这样。
美化页面构件
  1. 先在作品页中点选一个构件
  2. 注意看，右侧的构件属性区发生了变化，在这个区域，你可以进一步设置构件的属性
小技巧
构件属性区上下都有页签，你可以点击这些页签，切换不同的属性分类，深入控制构件的样式。
组合使用这些样式，你可以创造出我们也没想到，丰富多彩的构件形式！
调整构件样式
  1. 点构件属性区上方的“样式”标签，你可以看到很多样式设置
  2. 这些样式设置是可以展开的，里面是更进一步的设置参数
  3. 点击这个快速设置区，会有一些现成的样式供你使用
  4. 不满足现成的设置，可分别调节具体参数，直到你满意
小技巧
如果你一次选择了多个构件，可以统一设置这些构件的样式，以便你将页中多个构件统一为同样的样式。
  1. 点构件属性区上方的“排列”标签，将显示出排列构件所需的各种工具和具体参数
  2. 点击这些排列图标，可以快速移动、对齐、分布构件
  3. 点击这个快速设置区，可以帮助你将构件迅速移动到页面中相应的位置
  4. 构件的尺寸均以百分比为单位，以便自适应不同比例的屏幕
小技巧
注意到界面上的标尺了吗？你可以像 PS 一样，从标尺中拖出参考线。排列构件的时候，这些参考线可以有效帮助你统一对齐。
给构件添加行为
  1. 先在作品页中点选一个构件
  2. 然后点击属性区上方的行为标签
说明
构件的动画效果、点击后的动作，在这里均被归类为构件行为。
这些动画及动作均可组合使用，方便你创造出最佳观赏效果和交互体验。
添加动画效果
  1. 点构件属性区上方的“ 行为”标签，可以设置构件在不同事件触发下的行为
  2. 点击添加动画或行为的按钮，可以给构件添加不同的行为，多个动画或动作可连续执行
  3. 选单中预设了一些常用动画
  4. 选择不同的动画，调整它的参数，可以定制你的动画效果
小技巧
这些行为属性卡片，可以通过拖动其标题栏调整执行的先后顺序。
编辑动画的时候，你可以随时点击旁边的播放按钮，快速预览效果。如需预览整页的动画效果，点击工具栏中的预览按钮即可。
添加构件行为
  1. 点击“+动作”按钮，可以为构件添加上动作
  2. 在选单中选取一种动作
  3. 填写上相关设置，即可通过指定的事件触发这个动作
小技巧
构件的动作除了传统的点击后打开网页外，也可在作品页之间跳转，或调用手机的电话、短信、QQ等功能进行联络。
调整不同设备下的表现
  1. 点击工具栏上的“设备”图标，可以选择一种设备，直接以其屏幕比例进行编辑
  2. “横竖屏”按钮可以帮你快速在手机和电脑版式间切换
小技巧
先在首选设备（如手机）模式下制作页面，然后用“横竖屏”翻转进行调整。这样可以减少针对不同设备的调整工作量。
  1. 点击工具栏上的“预览”图标，将进入预览模式
  2. 在预览界面中，你可以通过点击下方的设备图标，预览不同设备下的显示效果
小技巧
预览功能对于检查作品在不同设备下的显示效果很有帮助。预览时，如果你发现某种设备下的效果不尽如人意，点一下“编辑”按钮，可以快速切换到改设备模式的编辑界面。
发布你的作品
  1. 点击工具栏上的“发布”图标，将显示出发布对话框，允许你将作品发布到晒网提供的免费服务器上
  2. 如果你觉得自己的作品还不错，愿意作为案例分享给其他晒网用户，可以勾选上分享，并选择一个类别
  3. 不想作为案例分享也没关系，直接点“发布”按钮，将获得一个发布后的网址，你自行分享此网址给朋友，他们就能看到你的作品了。
小技巧
发布后的网址，只有你主动通过微信、qq等方式发给朋友，别人才能找到。因此：
下载作品源文件
  1. 点击工具栏上的“下载”图标，将显示出下载对话框，允许你将作品下载到你的本地硬盘上
  2. 晒网提供了 HTML 和 ZIP 两种下载文档格式，建议
    • 文件尺寸较小或主要用作办公文档是，建议选择 HTML 格式
    • 文件尺寸较大，或主要用于网站发布，或你需要售卖作品时，建议选择 ZIP 格式
小技巧
下载功能是会员专属功能，如果你希望将作品用于商业用途或售卖，需要付费成为会员。

不想付费怎么办？那就多创作一些可作为案例的分享给大家的作品，获得积分换取会员资格吧！
了解你的读者反馈
  1. 点位于整个界面的右下角的“作品”页签
  2. 在出现的界面里面，选择“访问统计”或“用户反馈”等功能
小技巧
访问统计只能统计到你用晒网服务器发布的作品的访问情况，如果你是下载源代码放在自己的服务器上，请自行修改源码添加你需要的统计功能。
更多功能等你发掘

这份手册只是简单地介绍了创作一个H5 文档的步骤和方法。
  

  

     实际上，手册中描述的仅仅是晒网 H5 创作工具软件众多功能中很小的一部分。
  

  

     看过手册，了解基本操作方法后，尽管自行探索使用此软件，相信你能创作出让大家赞不绝口的优秀作品来！
  

  

  

  

  

     “晒网·创作”开发团队
  

  

     2016年9月