文档介绍：基于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元素设计一下高度,宽度,背景颜色,以及位置关系,使得整体界面更加和谐。
(三)布局的优化以及简单的交互
元素位置固定好之后就可以在浏览器上进行本机测试,此过程是为了观察