注册

QQ登录

只需一步,快速开始

制作关于我们 -> 公司简介页面

关于我们是个页面组,为方便用户选择性安装,我们把每个页都拆开做成组件,方便用户进行选择;

首先在页脚添加了“关于我们”的导航链接
2016-12-20_110021_添加页脚链接.png
Discuz! 页脚信息的设置与修改
http://www.999test.cn/qa/detail/1535.html


后台栏目设置参考
2016-12-20_114854_栏目设置参考.png

编辑“公司简介”栏目,模板选择“999test.cn_decorate_16081101_9011”
如何设置 Discuz! X 的门户栏目页模板
http://www.999test.cn/qa/detail/1551.html

公司简介页面的制作

演示地址:http://dz.test999.cn/decorate/16 ... list&catid=9011

公司简介框架分为两个DIY框架,左侧为一个图片调用框架,网站管理员可以自行选择调用什么图片,电脑框架背景是固定的,中间的图片是可以自定义的。
右侧是一个HTML框架,网站管理员可以自定义公司简介内容。
操作均为前台鼠标点选+文字编辑即可,极其方便。

2016-12-21_082540_公司简介框架.png

为了方便网站管理员添加横版与竖版的资质证书,公司资质框架分为了两个模块。
证书边框为固定设计,并且根据正常证书尺寸进行比例缩放,避免证书上传时裁剪缩略图导致的图片不全问题,网站管理员只需要将证书拍照上传即可,极大的减少了网站管理员的日常编辑工作。
框架底部还写了一个“查看全部”的按钮,方便网站管理员链接到资质证书的单独页面。

2016-12-21_110317_公司资质.png

发展历程框架采用了时间线样式,顶部圆点制作了一个动画样式
2016-12-21_153602_发展历程.png

最后加载了一些动画,完成页面制作。
演示:http://dz.test999.cn/decorate/16 ... list&catid=9011

公司简介页面同步到手机端

将公司简介页面同步到手机端,原则是数据源一致,方便管理。
2016-12-22_160945_公司简介页二维码.png
第一版手机页面

2016-12-22_125602_公司简介手机页.gif
本来想将内容段落进行左右动画弹入加载,测试后发现在iphone端的体验不佳,改成只第一、第二段落进行动画加载。
2016-12-22_143502_公司简介手机页-2.gif
资质证书的手机展示方式
2016-12-22_155300_资质证书手机页-1.gif
电脑端内容同步到手机端仅需填写对应栏目id这一个步骤;
2016-12-22_155814_页面配置.png

关于我们页面组的公司发展历程页面制作

沿续关于我们页面组首页的框架,采用Discuz文章栏目页模板,方便用户添加内容。
演示地址:http://dz.test999.cn/decorate/16 ... list&catid=9014

在不修改discuz原生程序文件的条件下重写了文章列表页的缩略图生成方式,将原来自动生成的方形缩略图改成与公司简介页面调用一致的3:2比例图片缩略图

加载了一致的动画

同步了手机版

2016-12-23_110201_发展历程手机页面-1.gif

联系我们页面的制作及部分微调

制作了联系我们页面:http://dz.test999.cn/decorate/16 ... list&catid=9016

并做了一些动态效果的微调
关注9测微信公众号

关注9测微信公众号
了解一个 Discuz! 应用的产生过程。

快速回复 返回顶部