24小时服务中心

售前咨询:

点击这里给我发消息

售后服务:

点击这里给我发消息

新Adobe加速HTML5网页开发设计与App设计

当前位置:首页 > 帮助中心 > 建站技术 >

Dreamweaver CS6可建立不同画面大小的CSS版面,便同时针对手机、平板、PC设计网页版面,而Flash CS6的特色在能够转换成HTML5内容。

在CS6中,Adobe对Dreamweaver与Flash所新增的功能,几乎都是针对以跨平台开发的特性。这两套过去以个人电脑桌面为主的网站、动画开发工具,现在也可以用来开发行动平台的内容与代码。

Dreamweaver可以快速设计不同屏幕大小的网站

Dreamweaver在上个版本已加入jQuery Mobile的功能,以便制作手机版的网页,而这次Dreamweaver的改版中,我们认为最吸引人的就是提供了流畅格点版面(Fluid Grid Layout)功能,对支援各种不同屏幕大小装置的网站专案,它可以协助你完成设计。

用Dreamweaver可以一次做好对应不同屏幕大小的CSS版面

在Dreamweaver的流畅格点版面设计上,使用者可以针对不同屏幕尺寸做出对应的调整,让这个网站内容在不同装置浏览时,都有不错的呈现效果,像是设定时可以让图片跟着缩放,或是保持图文栏宽的各自比例。

流畅格点版面的使用方式很容易

在Dreamweaver CS5.5版中,Adobe加强不同屏幕尺寸的预览机制,开发人员用它同时看到3种不同网页尺寸的画面,现在CS6有了流畅格点版面,则利用CSS3的技术,让你在设计同一个网页时,Dreamweaver便能自动排出符合不同的屏幕尺寸的版面,使物件对齐位置时,也相对容易。

使用时,当我们在Dreamweaver上,将流畅格点版面Div标签建立后,就会产生自动产生对应的CSS指令,我们可以在代码码中看到@media的语法,并搭配<div>、<nav>等HTML标签调整。接下来,你可以调整行动装置、平板电脑、桌面画面的CCS版面,使网页或Web App在各屏幕尺寸都有理想的呈现,而不用花时间为不同的装置设计专属版本的网页,相当实用。此外,新版的屏幕预览也提供更多解析度选项,而多屏幕预览面板也能方便地检视HTML5内容。

直接开发手机App设计

透过Dreamweaver CS6内建的PhoneGap Build服务,可以开发iOS与Android等7个不同平台的App,减少开发不同平台的时间。

当我们准备将Web App发布到手机上做测试,或上传到应用代码商店时,只要在Dreamweaver网站选单中开启,PhoneGap Build服务面板(首次使用时先免费注册登入),即可将制作的内容打包成不同系统平台相容的应用代码。同时,PhoneGap Build还可以将手机版网页,直接发布到登入帐号的云端空间(build.phonegap.com/apps),方便下载测试。

Dreamweaver在CS6增加了CSS转变(CSS transition)功能,开发人员现在能使用CSS技术做出简单的网页动态效果。要实作也不难,我们要在Dreamweaver上开启新增的「CSS转变」视窗,选取要转变的元素目标与开启转变的动作后,接着设定转变属性与速度,就可以将CSS属性的变化,制作成动画转换效果,例如当滑鼠停留在元素上时,产生放大文字,图像缩放、增加阴影等多种动态效果。

基CSS转变这功能而言,在速度控制上,Dreamweaver提供6种计时函式可选择,让开发人员控制转变效果的速度,并能够设定持续时间与延迟,让效果更具变化。当然,你也可以在CSS样式面板中,检视转变分类的属性。

除了上述特色之外,Dreamweaver新版本也提供色表概念管理的jQuery Mobile Swatches,同时改善上传FTP效能,并增加W3C线上验证服务,以确保标准网页设计的精确性。

 

关键词:HTML5网页开发,App设计,HTML5设计