新时代Web前端页面设计的实践

张敏

摘 要：文章指出，信息技术的快速发展使得人们的生活离不开互联网网页信息，网站页面的展示不只是传递信息，还能够起到宣传相关组织、说明工作内容、提升影响力等作用。新时期对Web的前端页面设计还提出了设计美观、专业知识展示鲜明、便于维护管理等要求。

关键词：新时期;Web前端页面;设计实践分析

0    引言

在现实Web的前端页面设计过程中需要熟悉各项技术的特质，明确功能覆盖的范围。在此基础之上需要关注网页设计目标对象的现实需要，适当增加设计美感，明确主题风格，突出展示文字信息，根据网页需要达到的运营目的做出相应的调整。

1    Web前端页面设计的现实意义

随着我国的经济发展社会进步，互联网的普及度得到了空前的增长。网页能够承载的媒体样式也更加丰富。网页浏览方便展示信息，能够满足不同年龄层次，不同职业，不同背景的人群的需求。网络页面的作用也从传统的快速获取信息，广告宣传，传递散播信息的基础作用延伸到办理相关业务等更具有深度和广度的功能作用。借助网站这种切合现代社会发展需要的媒介，一方面能够拉近互动的距离实现亲民，从另一方面还有助于现代社会的人们彰显自我，实现个人价值。网页能够打破时空限制，突破时间层面的束缚，空间意识形态之上的禁锢，帮助人们获取信息的同时，也能帮助对应目标树立良好的正面形象。网页的前端设计能够有效实现信息的系统整合，从便于逻辑思考的角度出发，平衡外界社会和目标需要的关系，帮助信息宣传的效果能够无限延长[1]。网络信息自身具备的海量存储功能，能够使得网页自身就成为其中一个数据库，实现网页随时随地传播到世界各地。网页的前端设计从数据存储的分析角度出发能够分为纵向和横向两个思考方向。纵向来看网页的前端设计单一板块之间的内容并不是一成不变的，是需要结合时事进行周期性的动态更新的。横向分析能够发现网页安排的各个板块之间需要有密切的联系且需要具有存在的必要性和唯一性，顺利实现网页微型数据库的逻辑性和合理性[2]。

2    Web前端设计实践要点

2.1  突出目标的特质

Web页面作为目标向大众展示形象的主要数字媒体阵地，需要在进行前端页面设计的时候突出目标的特征。这样类似于将Web的整体页面打造成目标的“商标”。这样鲜明的特征能够方便用户快速识别，及时判断。還可以帮助目标完成宣传和品牌建设的任务。发挥Web的信息数据库的特征，将信息快速传播至各个角落，突出目标的特征，加深人们的印象[3]。

2.2  加强网页的交互性

网络的数据庞杂用户众多，网络使用的途径较为方便。网页作为信息资源再次分配的重要渠道，能够帮助用户和目标建立良好的互利互惠关系。这样能够使得目标的信息发布获得更多的关注，同时也方便用户第一时间获取相应的信息资源。拿学院的网页设计举例说明，网页的存在能够方便学生和教师的交流，帮助学生获得专业知识的培训和教育，教师则可以根据学生的反馈及时调整自身工作方法中存在的落后成分，提升自己的素养。除此之外，还能收获来自外界第三方的意见，帮助反思Web设计存在的现实合理性，打破传统的交流壁垒，活化思维[3]。

2.3  加强Web的个性化设计

网联物联化使得用户端之间的物品、信息、资源融合，并创建最新的网页信息管理平台。在此基础之上完成公共基础设施的服务架构，活用数字化产品，进行个性化服务设定，促使生产模式的精确度提升。这就使得在进行Web前端设计的时候要着重突出目标的特性，彰显其个性。同前文提到的打造商标和品牌的概念有所区别的是，这个观点是在强调网页设计的唯一性。这样能够加深用户的印象，帮助用户在互联网信息泛滥的庞大的信息流中对目标留存更加鲜明的印象。策略制定需要同受众的主观感受保持一致[4]。最近热门的VR、图片、视频等体验方式充分调动了群众对移动互联网页面的感官认知。

2.4  加深Web的信息传播教育意义

Web作为信息流承载的媒介，在现代社会还需要肩负着监督和教化大众的使命。这就要求在页面设计上要安排举报板块和教学板块。实现完成群众监督举报不良违法现象的作用。同时借助新媒体慕课等全新的教学方式，提高受众的受教育水平。MOOC这种开放教育资源的方法能够使受众在查询信息的过程中顺便学习相关专业知识。查询相关的知识，巩固延伸知识点，建立有效的知识关系网络，提升我国的全民素质。这一点主要是从新时期Web前端页面设计需要满足的社会作用提出的两点要求，具体实践还要根据现实的设计安排进行取舍[4]。

3    Web前端开发工具简述

3.1  MyEclipse

MyEclipse企业级工作平台（MyEclipse Enterprise Workbench，以下简称“MyEclipse”）是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts， JSP， CSS， JavaScript， Spring， SQL， Hibernate。

MyEclipse结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。

3.2  Dreamweare

Dreamweare能够同时完成Web的设计开发和后期的Web运营工作。自身的显著特征是视觉化网页开发工具，实现Web前端页面设计的动态化展示。这种突破浏览器和平台禁锢的设计软件，能够借助网站地图快速实现网页的初步设计。这样的操作有助于实现网页内容板块的重组设计，顺利更新网页内容需要的连接，内容档案的所处位置。借助文字代码，HTML等标签和搜寻方法置换更新网页。Dreamweare的使用操作方法较为简单，成为网页设计开发使用的主要软件之一[5]。

3.3  HBuilder

HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。快是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块及很多配套，HBuilder能大幅提升HTML，js，css的开发效率。以“快”为核心的HBuilder，引入了“快捷键语法”的概念，巧妙地解决了困扰许多开发者的快捷键过多而记不住的问题。开发者只需要记住几条语法，就可以快速实现跳转、转义和其他操作。比如alt+[是跳转到括号，alt+是跳转到引号，alt+字母是跳转菜单项，而alt+左则是跳转到上一次光标位置。而Ctrl则是各种操作，比如ctrl+d就是删除一行。另外，HBuilder的生态系统可能是最丰富的Web IDE生态系统，因为它同时兼容Eclipse插件和Ruby Bundle。SVN，git，ftp，PHP，less等各种技术都有Eclipse插件。HBuilder的编写用到了Java，C，Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。但因为Java效率太低，所以用C写了启动器。HBuilder柔和的绿色界面设计需要动态调节屏幕亮度，它还支持手机数据线真机联调，而这些都是用C写的。

4    Web前端页面布局设计

根据设计目标的自身性质先对整个网站的内容进行初步设计，网站统一顶部为导航条站标，系内概况、系内新闻、教务信息、专业介绍、选题系统、教学研究、科研创作。这部分内容参考以往的学校官方页面板块安排一般为固定模式。网站的上中部位置需要做好图片展示和板块导航，从页面布局和使用者的习惯角度来考虑一般采用这样的安排。网站的中部位置安排介绍学院需要展示的图文信息，网站信息公布栏，站点数据公式，网站使用导航。最后在网页底部根据固定安排需要做好网页或者版面的制作，确定版权信息所属。为了保证使用者的视觉舒适度和审美体验的统一，尽量选择邻近色从而避免网页色彩杂乱无法统一的問题。根据学院官网这一主题，需要选择色彩较为素雅，花纹简单的背景设计，着重突出网页的实用性[5]。还需要注意的是鼠标点击相关的导航文字时，文字会变色，这个色彩的选择需要加强层次感，以便受众使用。注意信息排版的层次感，方便受众信息关键词的快速检索，提升使用感受。

5    结语

在网络信息成为日常生活不可获取的一部分的新时期，在进行Web的前端页面设计的时候需要熟练掌握基础的编程语言使用之外，还要根据网页自身的特质加强个性化设计，实现便于受众使用和信息交互传播的目标。

[参考文献]

[1]付效梅.新时代web前端页面设计的实践研究[J].计算机产品与流通，2020（11）：148.

[2]张晓龙.Web前端开发技术的优化发展[J].电脑知识与技术，2020（11）：78-79.

[3]高慧.浅谈Web前端开发技术以及优化[J].中国信息化，2019（12）：59-60.

[4]李晓薇.Web前端开发技术以及优化方向[J].电子技术与软件工程，2019（19）：48-49.

[5]张德发.Web前端开发技术与优化工作研究[J].计算机产品与流通，2019（9）：145.

（编辑 傅金睿）

Practice of Web front-end page design in the new era

Zhang Min

（Guiyang Vocational and Technical College， Guiyang 550081， China）

Abstract：The rapid development of information technology makes peoples life can not be separated from the Internet Web page information， the display of the Web page is not only a single transmission of information， but also can play the role of propaganda related organizations， explain the work content， improve the influence and so on. In the new era， the front-end page design of Web also puts forward the functions of beautiful design， bright display of professional knowledge and easy maintenance and management.

Key words：new period; Web front-end page; design practice analysis