基于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.