小微公司響應式網(wǎng)站開(kāi)發(fā)與實(shí)現研究發(fā)布者：本站     時(shí)間：2020-05-05 12:05:05

響應式網(wǎng)站, 主要是采用了HTML5語(yǔ)言。他是在通用標記語(yǔ)言下的一個(gè)應用超文本標記語(yǔ)言的第五次重大修改, 所以簡(jiǎn)稱(chēng)H5。他被廣泛應用于手機端前端界面開(kāi)發(fā), 平板網(wǎng)站開(kāi)發(fā), PC端網(wǎng)站開(kāi)發(fā)等多種場(chǎng)景。PHP是一種通用開(kāi)源腳本語(yǔ)言, 他比ASP等語(yǔ)言更快速地執行動(dòng)態(tài)網(wǎng)頁(yè), 安全性又優(yōu)于A(yíng)SP且免費等特點(diǎn), 這對于小微企業(yè)官網(wǎng)開(kāi)發(fā), 有先天性的價(jià)格優(yōu)勢。本文通過(guò)前端采用HTML5技術(shù), 后端采用PHP和MYSQL的方式, 實(shí)現了小微公司官網(wǎng)的快速開(kāi)發(fā)。

1 互聯(lián)網(wǎng)技術(shù)現狀

依托互聯(lián)網(wǎng)技術(shù)的高速發(fā)展, 特別是手機移動(dòng)網(wǎng)絡(luò )的發(fā)展, 使得使用手機、平板等上網(wǎng)越來(lái)越具有優(yōu)越性。人們可以在乘坐地鐵、公交等零散的時(shí)間中, 使用移動(dòng)設備, 人們對移動(dòng)設備和互聯(lián)網(wǎng)的接觸不斷加深。但是, 隨著(zhù)智能化手機的不斷發(fā)展, 不同操作系統的手機各自為政, 各個(gè)手機的分辨率不同, 瀏覽器版本不同, 所以, 在前端界面顯示中, 需要照顧到多種不同屏幕尺寸的需要。HTML5具備開(kāi)發(fā)簡(jiǎn)單, 投入少, 執行速度快的特點(diǎn), 所以一推出市場(chǎng), 就在國內外引起強烈反響。

2 開(kāi)發(fā)技術(shù)比較

2.1 響應式技術(shù)

HTML5是萬(wàn)維網(wǎng)的核心語(yǔ)言標準, 比傳統的HTML語(yǔ)言功能更強大, 兼容性更好。他作為移動(dòng)網(wǎng)絡(luò )發(fā)展的重要應用, 擁有巨大的發(fā)展潛能。作為一項開(kāi)放性的技術(shù), 成為移動(dòng)網(wǎng)絡(luò )發(fā)展的一個(gè)重要影響因素, 以開(kāi)放的Web標準為基礎, 開(kāi)發(fā)出較為完備的編程規范, 具有視頻和音樂(lè )以及動(dòng)態(tài)展示的效果, 并且具備強大的離線(xiàn)存儲功能, 運用此技術(shù)進(jìn)行網(wǎng)頁(yè)的設計, 可以使網(wǎng)頁(yè)更加簡(jiǎn)單易懂, 實(shí)現同一張網(wǎng)頁(yè)自動(dòng)適應不同屏幕的大小, 根據屏幕的寬度和分辨率進(jìn)行自動(dòng)調整和頁(yè)面布局。

2.2 PHP技術(shù)

PHP是一種通用開(kāi)源腳本語(yǔ)言。他是一個(gè)免費的語(yǔ)言, 入門(mén)簡(jiǎn)單, 功能強大, 使用廣泛。他具備響應速度快, 程序開(kāi)發(fā)簡(jiǎn)單, 功能性和擴展性強的特點(diǎn), 而且免費, 所以注定成為小微公司開(kāi)發(fā)后臺的首要技術(shù)。

2.3 MYSQL技術(shù)

MYSQL是一個(gè)關(guān)系型數據庫管理系統。他最大的特點(diǎn)是免費, 數據庫小巧, 相應速度快語(yǔ)法結構簡(jiǎn)單, 非常容易上手。所以PHP和Apache MYSQL組合, 可以實(shí)現投入少, 速度快, 開(kāi)發(fā)周期短的良好的開(kāi)發(fā)環(huán)境。

3 功能設計

3.1 網(wǎng)站架構模式的選擇

常見(jiàn)的網(wǎng)站開(kāi)發(fā)模式有B/B、B/C、C/C等結構。針對小微企業(yè)的開(kāi)發(fā)成本及運用實(shí)際, 本案例是采用的B/C模式結構進(jìn)行開(kāi)發(fā)。網(wǎng)站后端可以添加刪除修改數據, 讓前端客戶(hù)能方便訪(fǎng)問(wèn)到。

3.2 網(wǎng)站功能設計

根據企業(yè)對于官網(wǎng)的要求, 將設計的開(kāi)發(fā)系統模式進(jìn)行了功能分類(lèi), 前臺的功能分區, 小微型企業(yè), 一般具備很多通用共性, 包括首頁(yè)、公司介紹、資訊中心、發(fā)展戰略、項目案例、人力資源、聯(lián)系我們等模塊, 后臺根據前臺的顯示需要, 提供修改。比如, 后臺能自由添加、刪除、修改前臺顯示的新聞標題、內容。能夠對前臺顯示的圖片進(jìn)行維護, 修改。

3.3 網(wǎng)站開(kāi)發(fā)流程

為了讓項目能夠順利進(jìn)行, 前期需要與客戶(hù)溝通網(wǎng)站制作意向, 做網(wǎng)站需求調研, 為客戶(hù)制作網(wǎng)站規劃方案, 同客戶(hù)洽談設計細節, 然后并且簽訂合同, 收取定金, 約定相關(guān)責任等問(wèn)題, 之后開(kāi)始具體的設計制作。制作完成后, 向用戶(hù)提交完成稿件, 網(wǎng)站細節做一些調整, 客戶(hù)最終確認, 交付尾款。上傳服務(wù)器, 整個(gè)項目制作完成。

3.4 開(kāi)發(fā)語(yǔ)言及服務(wù)器的選取

公司網(wǎng)站由于是對外發(fā)布的網(wǎng)站, 系統對于服務(wù)器的性能有如下要求, 第一:響應性, 系統的響應時(shí)間能夠影響用戶(hù)的體驗, 所以, 在開(kāi)發(fā)之前, 選取了目前代碼運行速度較快的HTML5開(kāi)發(fā)前端。由于系統需要不定期的上傳內容進(jìn)行維護, 所有又設計了后臺, 后臺采取了PHP+mySQL組合模式, 從代碼執行效率上, 保證了訪(fǎng)問(wèn)的速度較快。

3.5 網(wǎng)站兼容性

公司官網(wǎng)由于代表了公司的形象和氣質(zhì), 所以要考慮到各種終端對網(wǎng)站的訪(fǎng)問(wèn)效果。用戶(hù)千千萬(wàn)萬(wàn), 終端瀏覽的平臺可能是手機、平板、電腦, 所以, 在設計網(wǎng)站之初, 就采用了對這三屏支持良好的HTML5開(kāi)發(fā)前端。用可以跨平臺操作的PHP作為網(wǎng)站后端。第三:可維護性, 由于網(wǎng)站設計了獨立后臺, 可以進(jìn)行常見(jiàn)的添加、刪除、修改操作, 所以, 極大的方便了對網(wǎng)站的日常管理維護。以下是部分實(shí)現兼容性判斷的的代碼:

通過(guò)對IE、火狐、谷歌、等不同瀏覽器的測試判斷, 均能按照瀏覽器的要求顯示出美觀(guān)、大方的內容。在手機端, 不同的分辨率下, 也最終實(shí)現了良好的兼容性。