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

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

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

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

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

2.1 響應(yīng)式技術(shù)

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

2.2 PHP技術(shù)

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

2.3 MYSQL技術(shù)

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

3 功能設(shè)計(jì)

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

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

3.2 網(wǎng)站功能設(shè)計(jì)

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

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

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

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

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

3.5 網(wǎng)站兼容性

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

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