基于HTML5技术的跨平台门户网站设计与实现

谭卫 常贤发

摘要：阐述了前端采用HTML5、CSS3、Javascript等技术，后台基于Dedecms开源框架信息管理平台的门户网站设计与实现，主要分析和解决设计与实现中的需要分析及实现流程，并对重要的模块实现进行了图文解析。

关键词：HTML5;门户网站;跨平台

中图分类号：TP311    文献标识码：A

文章编号：1009-3044（2020）23-0236-03

随着web网页技术的不断发展，现在门户网站也开始逐渐更新换代，如今用户对于门户网站的功能需求越来越高。近几年互联网发展十分迅猛，移动端也逐渐超越PC端，甚至PC端望尘莫及，移动设备趋向多元化，所以跨平台的设计是所有门户网站应该考虑的方面。门户网站是一个企业性质的宣传网站，希望通过这个网站，及时地宣传自身品牌产品，同时让更多的人了解到公司的精神文化，将自己的产品信息和企业动态，更方便展示给用户，并且通过丰富的交互去优化与用户沟通的过程[1]。所以在内容上应更加多姿多彩，板块结构完整，而且应能够适应不同屏幕大小，在这个用手机多过PC的时代，能更好更快地将第一手信息送到用户手上。 这些变化促成企业构建更加专业，更加便于维护，用户体验度更高的网站。

基于此，门户网站设计技术有了更高的技术要求，本课题研究的实现技术为前端采用HTML5、CSS3、Javascript等技术实现，后台基于dedecms开源框架进行后台数据管理，并进行针对性的定制功能，通过CSS3来实现动画演绎和图片常见效果变化，提高页面性能和降低网页载荷;使用CSS3实现网页自适应，使得不同浏览终端设备之间更容易实现无障碍切换，而DIV不会错乱，很大程度上满足门户网站的跨平台设计需求及交互性的友好体验[2]。

1需求分析

1.1网站配色及布局分析

企业LOGO是徽标或者商标的英文说法，起到对徽标拥有公司的识别和推广的作用，通过形象的LOGO可以让消费者记住公司主体和品牌文化。所以门户网站应以企业的LOGO中的色彩为主色调，再辅助以灰、白、黑三种颜色，其中灰色作为一种最经典、最耐看的颜色，是很多门户网站选择的辅助色。

在页面布局上，采用当下流行的响应式布局，即flexbox弹性布局。这种布局能够按照用户的屏幕尺寸、浏览器窗口大小来调整页面排版布局，达到更好展示内容的目的。在网站的各模块间使用了大量的留白，使网站整体更加简洁，清新。在网站的布局上，网站统一顶部为导航条，中部为banner和内容图文信息，底部为footer声明版权信息。

1.2.前端模块需求分析

门户网站是一个企业性质的宣传网站，它所指的就是通向互联网信息并提供信息服务的一个计算机系统， 是一个综合性的使用系统。它的综合性体现在多方面， 包含了大数据资源和互联网的多资源共享以及其他相关的方面， 是一个综合性的管理和应用的平台和展示企业文化的平台[3]。所以企业前端通用模块如下图1所示。

各重要模块功能介绍如下。

（1）首页模块

一般来说，网页设计的关键在于网站首页的布局。网站首页布局主要指主页的框架和排版。首页的布局设计可以简单大气为主，将重要的企业的内容展示给用户。合理的设计可以让网站根据屏幕的大小划分模式，并呈现在屏幕或半屏幕显示器中，然后根据重要性从上到下和从左到右进行布局，以此来满足大多数用户的浏览习惯。

（2）新闻模块

新闻模块是属于网站的二级列表页，主要用来展示公司新闻和公告信息，让用户了解企业的各类动态，以把握企业在行业中的影响等，它亦是网站信息的主导模块，是向用户传企业信息的重要模块。

1.3 后端功能需求分析

网站的后台dedecms开源框架系统，dedecms系统是一个集内容发布、编辑、管理检索等于一体的网站信息管理系统，dedecms有一套简单便捷的自定义标签和自己独立开发的模板引擎技术，能够降低后期的维护成本，网站的前端页面都是通过dedecms的模板技术生成的静态页面，静态页面直接获取数据生成页面，有利于管理和更容易的维护网站。各主要模块功能介绍如下。

（1）文章模块

通过dedecms，后台已经拥有了发表文章的功能，操作过程为点击要发表文章的栏目，点击添加文档，在对应的位置填写文章的信息，内容有作者名称、发表时间、文章摘要、文章缩略图、文章标题、文章主内容。在发布了文章后，只要点击更新文档，就可以在网站对应的前端页面生成内容。

（2）用户管理

网站后台进行用户管理，能够给普通的会员升级权限，成为某一模块的管理员。方便了网站的管理。

（3）管理模块

管理模块对网站进行实时的更新。后台有网站的数据备份和还原。数据的备份能够很好地保存数据库表，预防某种不可控因素使网站数据库崩溃或丢失，有了数据备份就能够很好地进行数据还原。

2 设计与实现

2.1 前期准备阶段

网站结构规划后就进入收集素材阶段，可以根据各结构的设计需要，搜集一些素材。例如文本素材，图片素材、页面效果案例等。文本素材是在网站页中展示的文字内容，收集渠道比较多，可以在同行业网站中收集整理，分析总结文本内容的优缺点，提取有用的文本内容，提取到的文本内容为避免侵权需要再加工。为了保证快速完成网站的设计任务，在搜集图片素材时要考虑图片的风格是否和网站风格一致，以及图片是否清晰等。为了让设计出来的门户网站效果紧跟当前的时尚，应该多参考近几年上线的新网站，浏览他们的网址，留意网站模块效果并做好登记，当自己的网站模块需要进行参考时，就可参考他们的效果，分析效果的实现思路并进行样式设置。效果图设计也是网页设计中的重要组成部分[4]。根据首页原型图及收集到的各类素材，运用photoshop设计网站首页效果圖，效果图首先应先设计pc端的效果图，再根据pc端效果图对模块进行取舍后进行移动端效果图设计。如图2和图3中所示是某学会网站的不同终端的效果图。

2.2 前端重点模块设计与实现

2.2.1网站元素初始化

由于网页中块状元素默认有margin和padding值，在各个浏览器下解析不一样，为保证各浏览器下看到的效果一样，所以先初始化再统一赋值。所以我们要在网站系统开发之初就要对已使用的元素进行初始化设置，对所有的网页都要引用这个公共样式表。

2.2.2横幅模块设计与实现

首页布局符合客户浏览习惯，大多数企业门户网站都会在首页中设计横幅，即顶部设计一个轮播的横幅图片。横幅中的图片可以根据企业的当前或未来的活动来设计，企业的趋势可以更容易地传达给客户，同时也符合客户的视觉浏览习惯和互联网习惯。运用CSS3技术可以实现图片的轮播，具体样式代码截图如图4所示。

2.2.3跨平台响应式设计

实现跨平台响应式设计要使用得一套样式适应多个终端，则需要對网站前端页面中的模块进行媒体查询断点设置，具体实现代码如图5所示。

2.3 后端重点模块设计与实现

2.3.1新闻信息引用

在前端实现静态样式布局。然后使用cms标签进行替换调用，登录网站后台，在左侧找到内容管理模块，选择添加文档和栏目，填写对应的内容发表更新即可，我们也可以对新闻列表进行删除、修改、排序等二次操作。新闻列表代码图如图6所示。

2.3.2联系我们信息管理

留言表单应进行在后台进行表单定义，前端运用HTML5标签和CSS3样式实现静态表单，进入cms管理后台，添加自定义表单，生成代码，复制修改应用，后台表单建立页面如图7所示。

3 设计总结

企业门户网站采用跨平台设计是为了匹配不同终端用户，由于要兼容各种设备，因此，要重复编写大量代码，使页面结构杂乱，也影响了网站的访问速度，要让用户有更加舒适的界面和更好的用户体验，就要使用Javascript进行交互性上的改进。但其优点是面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。缺点为兼容各种设备工作量大，效率低下，一定程度上会改变网站原有的布局结构，会出现用户糊涂的情况。另外运用开源框架进行信息管理在一定程度上缓解了开发的压力，但也让网站结构代码产生了冗余，网站功能实现上会有一定的限制。

参考文献：

[1] 谢建华.基于Bootstrap技术的企业网站设计与实现[J].计算机时代，2017（8）：17-19.

[2] 王玲.分析旅游企业门户网站计算机设计[J].旅游纵览（下半月），2016（5）：46.

[3] 谭昊琳.计算机图像处理技术在网页设计中的应用[J].数字技术与应用，2020（2）：115-116.

【通联编辑：闻翔军】