基于Web前端开发的广告传播平台设计

刘涛 武壮壮 张文彬

摘要：商品经济的发展带动了广告行业的发展，目前随着互联网的发展和普及，广告的传播方式也发生了很大的变化，以新媒体为主的广告行业凭借其互动性强，传播速度快，传播范围广等特点发展迅速.本文主要介绍依靠Web前端技术设计的广告传播平台的具体开发过程.

关键词：新媒体;广告传播;Web前端技术

新媒体借助互联网在电脑和手机终端上可以轻松传递，Web网站形式的广告传播方式可以实时动态传递信息，借助互联网这一媒介可以进行实时的修改，用户也可以实时分享[1]。本文介绍如何自我实现快速搭建一个简单的Web前端平台。

一、平台搭建的技术

Web前端开发离不开代码编辑软件，简单罗列几种编辑软件DreamWeaver、MicrosoftVisualStudio、Visual Studio Code、记事本等[2-3]，DreamWeaver是Macromedia公司于1997年发布的，是一种视觉化的代码编辑软件，能实现HTML、CSS、JavaScript 等多种设计语言的编写，其优点在于设计过程中可以实时观察设计结果，以便于及时的修改和更正;Visual Studio Code是微软公司发布的一款开源免费轻量级的代码编辑软件，具备智能补全代码功能，支持语法亮高自动匹配括号等功能，适合多种软件开发，当然也方便前端设计开发。打开主界面可以看到资源管理器、搜索、Git、调试、分屏显示等按钮，当按下 F1键 或按下 Ctrl+Shift+P组合键打开的命令面板后就可以在命令框里执行Visual Studio Code的任何一条命令。而且可以在这个软件中自行添加一些需要的插件，因为Visual Studio Code这款代码编辑软件的插件库特别丰富[4]。

二、平台的具体搭建过程

（一）元素的添加

本文设计的平台中需要展示图片和文字信息，常见的展示类型如下

用户在平台上能观察到的信息是上面图片展示的内容，用具体的HTML代码表示为：<p>首页</p><p>水果</p><p>生活用品</p><p>衣服</p><p>蔬菜</p>，這里p标签就是表达文字的一种基本元素，其目的就是把p标签里面包含的内容通过计算机能正确翻译表达出来。

平台上的图片内容是通过<img>元素表达出来的，<img>标签定义HTML页面中的图像。

（二）元素的布局

Html代码只是简单的把元素表示出来，所以还需要惠CSS代码来为HTML元素布局，从而使得整体界面更美观。

需要用CSS代码来为元素固定位置，实际设计过程中往往把HTML元素中的P标签和img标签存放在div标签中，也就是盒子模型”，这样通过CSS代码来为每一个存放P标签或者img标签的div元素设计一下高度，宽度，背景颜色，以及位置关系，使得整体界面更加和谐。

（三）布局的优化以及简单的交互

元素位置固定好之后就可以在浏览器上进行本机测试，此过程是为了观察元素能不能在浏览器上正确显示，另一方面也为了观察元素的位置是否有偏差，是否影响正常的展示，因为实际设计过程往往因为浏览器的不同，或者终端类型不同导致元素的位置和大小不能实现良好的自适应，只有在不断的调整优化之后才能达到最佳状态[5]。

（四）整体优化

整个平台的设计基本完成，然后就要通过一次次的调试来优化整个程序，首先需要优化代码长度，这样直接的意义就是减少了服务器的容量，其实更重要的是为了提升搜索引擎的处理速度，加快代码的编译过程，这样用户在使用过程中才会减少等待的时间。

三、平台的部署

（一）域名的选择

域名类似于人的身份证，其功能就是在数据传输交换过程中给计算机的一个电子方位，选择便于读易于记的名字，也就意味着域名最好和平台名字相匹配，便于用户的记忆，从而便于日后的再次浏览，其次就是要注意以下域名具有行业、地理位置，以及品牌相关的词语，可以根据自己搭建的平台来选择相适应的域名，最后一点，为了保证自己平台的安全性，选择域名时一定要到正规大型网站注册购买，防止平台信息丢失或者泄露。

（二）服务器的选择

服务器，是用来提供计算服务的设备。本文谈论的平台因为需要处理的内容较少而且需要存储的空间较小，所以可以选择虚拟主机来存放平台站点内容，虚拟主机是使用特殊的软硬件技术，把一台计算机主机分成一台台"虚拟"的主机，每一台虚拟主机都具有独立的域名和IP地址。

四、总结

互联网时代是个信息时代，想要更好的与时代接轨就要把握时代带给我们的机会，利用好信息互联网这个资源，Web前端技术作为依靠互联网发展的新媒体行业的一个分支技术之一，在今后的生产生活中将会起到不可忽视的作用。

参考文献：

[1]王婷婷.新媒体发展对线上广告传播的影响分析[J].传播力研究，2018，2（28）：176.

[2]邓威.基于HTML5的Web界面设计模式初探[J].电脑知识与技术，2018，14（33）：184-186.

[3]何杰惠.基于Web前端开发的即时通信文件传输研究[J].微型电脑应用，2018，34（11）：88-91+106.

[4]李爱红.浅谈Dream weaver CS6中网页布局的三种方式[J].电脑知识与技术，2018，14（22）：288-289.

[5]Patrick Gallucci，崔建海.Visual Studio 2005的智能感应代码段[J].程序员，2006（07）：103-106+10.