您好, 访客   登录/注册

基于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.
转载注明来源:https://www.xzbu.com/1/view-14743806.htm