Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

Adobe Edge Reflow CC 响应式网页设计

    Home 设计工作站 设计技巧 Adobe Edge Reflow CC 响应式网页设计
    NextPrevious

    Adobe Edge Reflow CC 响应式网页设计

    By rainshadow | 设计技巧 | 0 comment | 16 10月, 2014 | 0

    响应式网页设计基础【从零开始】

    如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率,降低维护成本,提升用户体验等突出优势更是为Web 2.0时代掀起了又一股狂潮,致使无数开发者倾心致力于响应式网页设计。纷纷为响应式设计贡献自己的绵薄之力,当然各大软件制造上肯定不会放过如此良机,也纷纷推出各类响应式设计软件。理所当然不乏优秀之作:

    • Groundwork,一款开源的响应式设计工具,在Github上可以找到其项目源代码。Groundwork提供多套通用响应式页面模版,用于快速构建Web响应式应用程序。此外,它还提供丰富的UI组件,详情可以访问Groundwork官网。
    • FROONT,一个网页版的响应式开发工具。提供在线编辑,布局调整,以及在不同临界值之间切换预览等响应式开发必备功能,还能导出html/css文件,实属强大的响应式开发工具,更具体的介绍请参看FROONT官网,注册并登录即可体验在线响应式开发。
    • Adobe Edge Reflow CC,由世界著名软件大户Adobe公司开发的响应式网页设计软件。和Adobe Dreamweaver、Adobe Photoshop等知名软件一样,Adobe Edge Reflow CC是一款桌面应用程序,配合Adobe Edge Inspect CC可在各种移动设备之间进行响应式实时开发调试,我认为这无疑是目前为止最好的响应式网页设计软件。

    接下来将对如何使用Adobe Edge Reflow CC进行响应式网页设计,以及使用Adobe Edge Inspect CC进行调试做详细介绍。

    安装Reflow和Inspect

    Adobe最新推出了Adobe Creative Cloud,用于管理所有Adobe软件,包括下载、更新等。界面如下:

    Creative Cloud

    如果已经安装过Adobe Creative Cloud,那么可以直接通过它下载并安装Reflow和Inspect。如果未安装过Adobe Creative Cloud,可以直接通过https://creative.adobe.com/products/reflow?promoid=KFKMR下载Adobe Edge Reflow CC,系统会自动提示下载安装Adobe Creative Cloud,Adobe Edge Inspect CC安装方法雷同,不做赘述。

    Adobe Edge Reflow CC界面初识

    Adobe Edge Reflow CC

    Reflow 的用户界面如上图所示。从界面来看,目前的Reflow功能还很有限,比如:工具箱目前只有四个选项。但是,其强大之处不在于此,在于响应式的支持。下面我们一一来介绍各个部分。

    首先,顶部灰色的一条菜单栏与其他软件没有太大差异,使用过windows系统的用户应该都很熟悉,不多废话。

    接下来软件主体区域分为左右两个部分,左侧最上面一行是工具箱,如图所示包含四个工具,分别是选择工具、添加盒子、添加文本和添加图片。

    • 选择工具,用于选择盒子,拖动改变位置,设置CSS样式等。
    • 添加盒子,用于在界面上创建一个布局盒子,编译后会对应生成一个div标签。
    • 添加文本,用于在盒子中创建文本输入区,编译后会对应生成一个p标签。
    • 添加图片,用于在盒子中创建图片元素,编译后会对应生成一个img标签。

    介绍完这些工具,我发表一下自己对Reflow的个人看法。从目前Reflow提供的工具而言,Reflow对html结构的展现支持并没有Dreamweaver等编辑器强大,数完了也不过div、p、img三个标签,对语义化html结构的支持可谓少之又少,因此,我认为Reflow完全是为响应式布局而生。而在使用Reflow完成响应式模块布局之后,模块内部的内容区域样式和结构的实现,还是需要借助于像Sublime Text或Dreamweaver等这类更专业的网页编程软件来实现。

    右侧是软件最主要的区域,各个相应临界值下的个性化布局完全在这片区域中实现。截图中标出了右侧上部的彩色条为临界值标识区,这里的临界值并非固定不变的,完全可以根据用户需求定制,点击右侧的添加临界值的加号按钮,可以创建一个可左右拖动的三角标,通过左右拖动来确定临界值,非常的方便。

    右侧下方是网格区域,用户可以在view–Grid菜单中设置网格属性。点击标尺上方各个临界值区域的彩色条纹,可迅速将画布调整至目标尺寸,然后针对不同尺寸,调整画布网格中的盒子的布局效果,当各个临界尺寸的布局都调整好之后,我们保存项目,点击F12或view–Preview in Chrome在Chrome浏览器中预览相应效果。

    在添加临界值的加号按钮下方还有一个叫Edge Inspect CC的按钮,主要用于结合Adobe Edge Inspect CC进行移动端的真机调试。Inspect启动前后效果图如下:

    Adobe Edge Inspect CC

    Adobe Edge Inspect CC启动后,点击该按钮,会出现一个主机在浮层中,移动设备通过Inspect移动端添加相应主机后,当前设计中的页面便会出现在移动设备的屏幕上,当布局修改后,点击浮层右下角的刷新按钮,可以远程控制刷新移动端的页面,以查看最新的显示效果,非常方便。还可以点击右下角的全屏按钮,改变移动端的显示效果。

    页面: 1 2

    Adobe ,code ,html ,设计

    rainshadow

    More posts by rainshadow

    Related Post

    • FWA:一个介绍国外优秀网站的网站

      By rainshadow | 0 comment

      http://www.thefwa.com/,每天都会推荐国外设计的非Read more

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • 做站必备神图

      By rainshadow | 0 comment

    • IE6/7/8/9 Firefox的CSS兼容问题

      By rainshadow | 1 comment

      这是关于IE的一系列兼容问题的解决方法。

    • 手机网站开发原则

      By rainshadow | 0 comment

      从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着Read more

    Leave a Comment

    取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js office ppt Premiere PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio