开发者社区> sp42> 正文

iOS/Android/WAP 全兼容专题页面制作方法(一)

简介: READ First:这是供编辑人员所读的文档。关于技术上如何实 iOS/Android/WAP 的方法,稍后释出。 专题页面制作方法 概述 专题页面采用 HTML 脚本进行定义,以满足各种界面排版的需求。
+关注继续查看

READ First:这是供编辑人员所读的文档。关于技术上如何实 iOS/Android/WAP 的方法,稍后释出。

专题页面制作方法

概述

专题页面采用 HTML 脚本进行定义,以满足各种界面排版的需求。HTML 页面采用静态方式保存。客户端及 WAP 浏览器皆能正常展示该页面,并能正常响点击事件并跳转到内容显示界面,客户端跳转到响应的原生内容界面、WAP 门户跳转到相应的 WAP 内容展示页。
相关预备知识

  1. 了解基本 HTML  语法,了解 FTP  操作;
  2. 熟悉 PMS 后台系统录入数据、展现数据,理解“栏目”的概念。

专题制作主流程:


开始新建专题

页面制作

专题的设计可以被划分为专题的结构、专题的内容、专题的样式这三方面来设计。当编辑规划好专题之后,意味着专题的结构与内容已经确定好(通常交付一个原型);接着由美工人员跟进美化界面,美化图片。一个简单的专题之原型图、效果图分别如下 插图1、 插图2所示。

和其他任意 HTML 页面一样,专题页面也由文字、图片、视频资源所组成,具体结合专题的时候就是 Banner图片、相关的资源图片、描述文字、视频列表等几种元素,以不同形态的组合构成一张张缤纷异彩的专题页面。

专题制作以 HTML 为纲,把内容直接放到 HTML 中去,无论制作、修改和保存皆基于 HTML。因此构建专题页面的第一步还是离不开我们熟悉的网页编辑工具,例如常见的 FrontPage、Dreamweaver 等,按照你熟悉的工具来编辑专题网页,只要能够保存 HTML 文件即可。这是规划页面之后进入制作页面的第一步。虽然创建静态页面依旧通过编辑 HTML 来完成,但数据调用方式会比以前更轻松,更简单,也更好为统一管理所服务。

在 PMS 中新建专题

对于一个完整的专题页面,里面仅仅有文字图片这些静态资源是不够的,不能充分显示我们视频类资源。凡是属于我们的视频资源都保存在数据库中。如何把视频资源调入到页面中展示呢?固然不可能要求我们编辑人员都去学习 SQL  语言查询数据库中的记录。对此,过去我们的方法是手工编辑 .txt 文档,这在 PMS 之前能够解决问题。然而当现在引入了 PMS 之后,管理方式改进了,调用方法也不是读取 .txt 那种方式了,——我们应该怎么操作呢?
在 PMS 中创建一个专题可以分为两部分操作,第一部分是新建专题实体及栏目,第二部分是安排专题的数据源。一般的顺序是先创建专题记录,然后才安排数据源。

创建专题实体及栏目

首先说说新建专题实体。我们从“菜单栏——>内容管理——>专题管理”进入专题管理界面。可见,所有已创建的专题一目了然,如下 插图3所示。

我们点击“新建 ”按钮新建一专题。如下 插图4所示。

这里输入相关字段即可,不过这里请注意,先不需要输入内容,因为该界面目的是创建一笔专题记录在数据库中,专题内容还是要经过 FTP 工具上传,把整个 HTML 内容上传到指定文件夹,如下 插图5所示。


同理,日后修改专题页面也如是,不能在 PMS 的 HTML 编辑器中修改,而是要经过 FTP 下载回来修改,保存之后再上传 FTP。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html通过js调用ios或android代码
html通过js调用ios或android代码
43 0
浅谈 Unity、iOS、Android 闭包的使用方法
浅谈 Unity、iOS、Android 闭包的使用方法
103 0
Android/iOS内嵌Unity开发示例
Android/iOS内嵌Unity开发示例
235 0
阿里云EMAS-专家测试服务iOS和Android上百种机型性能、兼容及UI等测试
阿里云EMAS测试专家有着集团内部多个日活过亿规模APP经验,提供EMAS专家测试,客户只需提交测试需求,从用例设计、脚本录制、海量机型测试、整理测试结果、48小时输出专家测试报告均由阿里云EMAS测试专家一站式服务完成。覆盖功能测试、深度兼容测试、性能测试、UI适配测试以及隐私合规检测等,帮助用户以更低成本获得高质量的全面测试能力,可用于APP正式发版前验收,规避手机APP上线前或发版过程中各类隐患。
255 0
阿里云EMAS专家测试手机APP测试Android和iOS上百款机型
阿里云EMAS专家测试服务覆盖Android和iOS上百种手机型号,日活过亿规模手机APP经验的阿里云EMAS测试专家,48小时输出详细测试报告,包括功能测试、性能测试、UI适配测试以及隐私合规检测等。阿里云百科来详细说下阿里云EMAS专家测试服务说明及价格
406 0
不会代码(实操能力弱一点)的我如何快速开发出一个Android/Web/IOS/小程序
不会代码(实操能力弱一点)的我如何快速开发出一个Android/Web/IOS/小程序
98 0
html通过js调用ios或android代码
html通过js调用ios或android代码
47 0
Mobile - 微信清理内置浏览器缓存(IOS / Android)
Mobile - 微信清理内置浏览器缓存(IOS / Android)
130 0
一分钟教你Android、iOS如何实现自动化截长图功能,超实用!
在移动端自动化测试过程中经常会遇到需要截长图的场景,比如大促活动的H5页面、动态信息流页面等,但是目前在网上检索只能搜到关于截长图的软件推荐,没有讲关于如何通过自动化脚本的方式实现的文章,今天就来给大家分享一个简单的实现方案。
306 0
测试开发工程师需要知道的 Android和iOS CPU架构基础知识
测试开发工程师需要知道的 Android和iOS CPU架构基础知识
249 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
深入剖析iOS性能优化
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关镜像