开始制作
首页>教程>教程详情

[图文教程] 图文混排页面制作案例(自由模式)

2013-03-19 09:45 来自于应用公园

2.0新版的自由模式相比老版本来说,实现了非常灵活的图文混排功能,能随意做出各种各样的图文页面,下面给大家例举2个,学会了大家就能根据需要自己随心配置图文页面啦~

11.jpg



下面讲第一种的做法:


1、  首先新建一个应用,填写基本信息保存。进入操作界面后在左边新建一个页面,这里就不细说了。建好页面后,就可以在右边的控件面板中拖拽控件到模拟器中进行页面配置了。

2、
 先拖一个单行文本控件到模拟器中,拖拽边缘把它靠在顶部,并填满左右两侧(坐标[0,0];宽320,高42),然后点击它,右侧面板已切换到了对应的控件属性栏,输入标题文字,设置居中、加粗,14号大小,这时模拟器里也出现了对应的文字效果。


2.jpg
(图2-1)




3、  将一个图片控件拖动到模拟器里,拉大至合适大小,上面贴紧文本控件,两侧贴紧边框(坐标[0,42];宽320,高220)。然后点击它,在右侧切换的图片控件属性中点击“上传图片”进入图片库面板,再点击上传在本地图片中选择一张确认上传,上传完成后该图片出现在了“我的图片中”,双击它或勾选后点确认(图3-2),图片便出现在了模拟器中,填充满了刚才设置的图片控件框(图3-1)。

9.jpg


(图3-1)

3.jpg
(图3-2)



4.jpg
(图3-3)

4、  再拖动一个多行文本控件到图片的下方,设置好大小(坐标[0,262];宽320,高220),点击它,在右侧的控件属性栏中输入内容,调整文字,这里设置的是14大小,不加粗。模拟器也同步出现了效果。

5.jpg
(图4-1)



5、  点击模拟器上的保存按钮,这个图文混排页面就做好了~

1.jpg
(图5-1)




第二种
1、  新建页面,与上一种一样,先拖一个单行文本控件到模拟器,拖拽到如图位置和大小(坐标[0,0];宽320,高42)。然后点击它,在右侧控件属性栏中输入文字。
2、  拖一个多行文本控件到模拟器中,如图调整位置和大小(坐标[0,43];宽320,高271),然后点击它,在控件属性栏输入一段文字,并使用回车、空格键将文字排版成如图所示效果,在左上留出空白。排版时对照模拟器修改,十分方便哦。

7.jpg
(图2-2-1)




3、  拖一共图片控件到刚才的多行文本控件上的空白位置,调整好大小位置(坐标[0,43];宽152,高204),然后点击它,在控件属性栏中上传一张图片后确认,这种不规则式的排版就做好了。

10.jpg
(图2-3-1)



4、  再拖一个图片控件到下方,调整好大小位置(坐标[0,314];宽320,高188),然后点击它,在右侧控件属性栏中上传一张图片后确认。

8.jpg
(图2-4-1)



5、  点击保存按钮,如图所示的图文混排页面就完成了。

01.jpg
(图2-5-1)



是不是感觉很简单也很灵活?大家掌握之后可以去自由设计更多花样的图文混排页面哦。


应用公园,专业级app制作开发公司,10年app软件开发经验,主营APP开发、软件定制开发、小程序制作等服务,支持SaaS云、独立部署、app源码交付。

在线咨询

立即咨询

售前咨询热线

0755-27805158

[关闭]
应用公园微信

官方微信自助客服

[关闭]