基于Web前端開發(fā)的廣告?zhèn)鞑テ脚_設(shè)計

劉濤 武壯壯 張文彬

摘要：商品經(jīng)濟(jì)的發(fā)展帶動了廣告行業(yè)的發(fā)展，目前隨著互聯(lián)網(wǎng)的發(fā)展和普及，廣告的傳播方式也發(fā)生了很大的變化，以新媒體為主的廣告行業(yè)憑借其互動性強(qiáng)，傳播速度快，傳播范圍廣等特點發(fā)展迅速.本文主要介紹依靠Web前端技術(shù)設(shè)計的廣告?zhèn)鞑テ脚_的具體開發(fā)過程.

關(guān)鍵詞：新媒體;廣告?zhèn)鞑?Web前端技術(shù)

新媒體借助互聯(lián)網(wǎng)在電腦和手機(jī)終端上可以輕松傳遞，Web網(wǎng)站形式的廣告?zhèn)鞑シ绞娇梢詫崟r動態(tài)傳遞信息，借助互聯(lián)網(wǎng)這一媒介可以進(jìn)行實時的修改，用戶也可以實時分享[1]。本文介紹如何自我實現(xiàn)快速搭建一個簡單的Web前端平臺。

一、平臺搭建的技術(shù)

Web前端開發(fā)離不開代碼編輯軟件，簡單羅列幾種編輯軟件DreamWeaver、MicrosoftVisualStudio、Visual Studio Code、記事本等[2-3]，DreamWeaver是Macromedia公司于1997年發(fā)布的，是一種視覺化的代碼編輯軟件，能實現(xiàn)HTML、CSS、JavaScript 等多種設(shè)計語言的編寫，其優(yōu)點在于設(shè)計過程中可以實時觀察設(shè)計結(jié)果，以便于及時的修改和更正;Visual Studio Code是微軟公司發(fā)布的一款開源免費輕量級的代碼編輯軟件，具備智能補(bǔ)全代碼功能，支持語法亮高自動匹配括號等功能，適合多種軟件開發(fā)，當(dāng)然也方便前端設(shè)計開發(fā)。打開主界面可以看到資源管理器、搜索、Git、調(diào)試、分屏顯示等按鈕，當(dāng)按下 F1鍵 或按下 Ctrl+Shift+P組合鍵打開的命令面板后就可以在命令框里執(zhí)行Visual Studio Code的任何一條命令。而且可以在這個軟件中自行添加一些需要的插件，因為Visual Studio Code這款代碼編輯軟件的插件庫特別豐富[4]。

二、平臺的具體搭建過程

（一）元素的添加

本文設(shè)計的平臺中需要展示圖片和文字信息，常見的展示類型如下

用戶在平臺上能觀察到的信息是上面圖片展示的內(nèi)容，用具體的HTML代碼表示為：<p>首頁</p><p>水果</p><p>生活用品</p><p>衣服</p><p>蔬菜</p>，這里p標(biāo)簽就是表達(dá)文字的一種基本元素，其目的就是把p標(biāo)簽里面包含的內(nèi)容通過計算機(jī)能正確翻譯表達(dá)出來。

平臺上的圖片內(nèi)容是通過<img>元素表達(dá)出來的，<img>標(biāo)簽定義HTML頁面中的圖像。

（二）元素的布局

Html代碼只是簡單的把元素表示出來，所以還需要惠CSS代碼來為HTML元素布局，從而使得整體界面更美觀。

需要用CSS代碼來為元素固定位置，實際設(shè)計過程中往往把HTML元素中的P標(biāo)簽和img標(biāo)簽存放在div標(biāo)簽中，也就是盒子模型”，這樣通過CSS代碼來為每一個存放P標(biāo)簽或者img標(biāo)簽的div元素設(shè)計一下高度，寬度，背景顏色，以及位置關(guān)系，使得整體界面更加和諧。

（三）布局的優(yōu)化以及簡單的交互

元素位置固定好之后就可以在瀏覽器上進(jìn)行本機(jī)測試，此過程是為了觀察元素能不能在瀏覽器上正確顯示，另一方面也為了觀察元素的位置是否有偏差，是否影響正常的展示，因為實際設(shè)計過程往往因為瀏覽器的不同，或者終端類型不同導(dǎo)致元素的位置和大小不能實現(xiàn)良好的自適應(yīng)，只有在不斷的調(diào)整優(yōu)化之后才能達(dá)到最佳狀態(tài)[5]。

（四）整體優(yōu)化

整個平臺的設(shè)計基本完成，然后就要通過一次次的調(diào)試來優(yōu)化整個程序，首先需要優(yōu)化代碼長度，這樣直接的意義就是減少了服務(wù)器的容量，其實更重要的是為了提升搜索引擎的處理速度，加快代碼的編譯過程，這樣用戶在使用過程中才會減少等待的時間。

三、平臺的部署

（一）域名的選擇

域名類似于人的身份證，其功能就是在數(shù)據(jù)傳輸交換過程中給計算機(jī)的一個電子方位，選擇便于讀易于記的名字，也就意味著域名最好和平臺名字相匹配，便于用戶的記憶，從而便于日后的再次瀏覽，其次就是要注意以下域名具有行業(yè)、地理位置，以及品牌相關(guān)的詞語，可以根據(jù)自己搭建的平臺來選擇相適應(yīng)的域名，最后一點，為了保證自己平臺的安全性，選擇域名時一定要到正規(guī)大型網(wǎng)站注冊購買，防止平臺信息丟失或者泄露。

（二）服務(wù)器的選擇

服務(wù)器，是用來提供計算服務(wù)的設(shè)備。本文談?wù)摰钠脚_因為需要處理的內(nèi)容較少而且需要存儲的空間較小，所以可以選擇虛擬主機(jī)來存放平臺站點內(nèi)容，虛擬主機(jī)是使用特殊的軟硬件技術(shù)，把一臺計算機(jī)主機(jī)分成一臺臺"虛擬"的主機(jī)，每一臺虛擬主機(jī)都具有獨立的域名和IP地址。

四、總結(jié)

互聯(lián)網(wǎng)時代是個信息時代，想要更好的與時代接軌就要把握時代帶給我們的機(jī)會，利用好信息互聯(lián)網(wǎng)這個資源，Web前端技術(shù)作為依靠互聯(lián)網(wǎng)發(fā)展的新媒體行業(yè)的一個分支技術(shù)之一，在今后的生產(chǎn)生活中將會起到不可忽視的作用。

參考文獻(xiàn)：

[1]王婷婷.新媒體發(fā)展對線上廣告?zhèn)鞑サ挠绊懛治鯷J].傳播力研究，2018，2（28）：176.

[2]鄧威.基于HTML5的Web界面設(shè)計模式初探[J].電腦知識與技術(shù)，2018，14（33）：184-186.

[3]何杰惠.基于Web前端開發(fā)的即時通信文件傳輸研究[J].微型電腦應(yīng)用，2018，34（11）：88-91+106.

[4]李愛紅.淺談Dream weaver CS6中網(wǎng)頁布局的三種方式[J].電腦知識與技術(shù)，2018，14（22）：288-289.

[5]Patrick Gallucci，崔建海.Visual Studio 2005的智能感應(yīng)代碼段[J].程序員，2006（07）：103-106+10.