計算機網(wǎng)站設(shè)計關(guān)鍵技術(shù)應(yīng)用

劉新華

（廣州市交通高級技工學(xué)校 廣東省廣州市 510540）

1 引言

目前，5G 通信、大數(shù)據(jù)、互聯(lián)網(wǎng)、云計算等技術(shù)的快速發(fā)展，人們已經(jīng)進入到了先進的移動互聯(lián)網(wǎng)時代，基于計算機技術(shù)設(shè)計的網(wǎng)站覆蓋了各個行業(yè)，比如在線教育、智能旅游、醫(yī)療診斷、娛樂游戲、金融投資等，有效地提升了行業(yè)信息化、共享化和智能化水平。計算機網(wǎng)站作為人們與信息社會交流的一個重要橋梁，其引入的設(shè)計和開發(fā)技術(shù)也逐漸提升，但是，由于目前網(wǎng)站登錄的設(shè)備越來越多，不僅包括PD 電腦、筆記本電腦等，還包括智能手機、平板電腦、車載電子、安防門禁和工業(yè)控制顯示設(shè)備，因此網(wǎng)站渲染已經(jīng)面臨著跨設(shè)備和多種尺寸屏幕的現(xiàn)狀，從簡單的人機交互網(wǎng)站開始向用戶體驗交互網(wǎng)站發(fā)展，因此網(wǎng)站輸出到不同的設(shè)備上會產(chǎn)生一系列問題，比如網(wǎng)站顯示不全面、網(wǎng)站無法打開、瀏覽器與網(wǎng)站無法適配，嚴(yán)重影響網(wǎng)頁用戶的體驗，也會降低用戶對網(wǎng)站的信賴度。

因此，網(wǎng)絡(luò)設(shè)計師和程序開發(fā)人員為了提高計算機網(wǎng)站的運行性能，經(jīng)過多年的研究和改進，提出了一些先進的網(wǎng)站設(shè)計技術(shù)，比如HTML5+JavaScript、HTML5+CSS3 等，網(wǎng)站開發(fā)也引入了先進的工具，比如Photoshop、Fireworks 和Flash 等，為了能夠?qū)崿F(xiàn)網(wǎng)站在多平臺上輸出，也引入了微服務(wù)架構(gòu)和SQLite 數(shù)據(jù)庫，提高了網(wǎng)站信息處理的效率，一定程度上也提高了網(wǎng)站的開發(fā)水平。

2 計算機網(wǎng)站設(shè)計架構(gòu)技術(shù)

計算機網(wǎng)站設(shè)計架構(gòu)經(jīng)過多年的研究，也提出了很多的種類，從最初的C/S 架構(gòu)、B/S 架構(gòu)等發(fā)展到了微服務(wù)架構(gòu)，因此大大的提高了網(wǎng)站的可移植性、并發(fā)性和響應(yīng)速度。C/S 架構(gòu)模式的計算機網(wǎng)站必須安裝客戶端程序，因此對計算機設(shè)備的要求就比較高，不利于網(wǎng)站的推廣和提高用戶流量。B/S 架構(gòu)模式的計算機網(wǎng)站只需要在瀏覽器上輸入服務(wù)器地址即可登錄，可以提高PC 設(shè)備登錄的速度，但是由于云計算和移動通信技術(shù)的發(fā)展，目前人們通過智能手機和平板電腦等移動設(shè)備登錄網(wǎng)站的頻率越來越高，因此傳統(tǒng)的C/S 架構(gòu)和B/S 架構(gòu)已經(jīng)無法適應(yīng)新時期的需求，網(wǎng)絡(luò)工程師提出了微服務(wù)架構(gòu)[1]?；谖⒎?wù)架構(gòu)的網(wǎng)站架構(gòu)如圖1所示。

圖1：基于微服務(wù)架構(gòu)的計算機網(wǎng)站

微服務(wù)架構(gòu)是一項非常先進的計算服務(wù)技術(shù)，其可以與當(dāng)前最為流行的云計算進行結(jié)合，在云中部署應(yīng)用程序，從而可以方便使用智能手機等移動設(shè)備登錄網(wǎng)站，微服務(wù)架構(gòu)通過“輕量級設(shè)備與HTTP 型API 進行溝通”，可以實現(xiàn)網(wǎng)站的重構(gòu)和逆向工程，從而可以在不影響網(wǎng)站整體架構(gòu)的過程中，進一步提高服務(wù)性能，不影響計算機網(wǎng)站的接入和輸出[2]。微服務(wù)架構(gòu)可以將網(wǎng)站的功能分解到各個離散的服務(wù)中，從而降低系統(tǒng)功能的耦合性和提高系統(tǒng)靈活性，圍繞計算機網(wǎng)站的業(yè)務(wù)領(lǐng)域組件創(chuàng)建應(yīng)用，從而可以進行迭代升級和管理服務(wù)，加快了Web 應(yīng)用網(wǎng)站向移動應(yīng)用網(wǎng)站的轉(zhuǎn)變。微服務(wù)能夠給應(yīng)用網(wǎng)站提供一個API Gateway 接口，為網(wǎng)站工程師提供一個服務(wù)入口，該入口對前臺是透明的，能夠聚合后臺的多種服務(wù)，實現(xiàn)安全過濾和流量控制，還可以提高網(wǎng)站的性能。

3 計算機網(wǎng)站頁面開發(fā)技術(shù)

目前，計算機網(wǎng)站設(shè)計的頁面開發(fā)非常重要，引入的關(guān)鍵技術(shù)非常多，比如HTML5、XML、JavaScript、CSS3 和DIV 等，不僅可以提高網(wǎng)頁動態(tài)交互設(shè)計能力，還可以實現(xiàn)網(wǎng)頁跨平臺和跨終端設(shè)備設(shè)計，滿足當(dāng)前多屏幕尺寸的終端應(yīng)用需求。CSS3 技術(shù)可以為網(wǎng)頁設(shè)計提供層疊樣式表，為網(wǎng)頁設(shè)計提供信息標(biāo)記語言，準(zhǔn)確的控制網(wǎng)頁版面的布局、顏色、背景，提高了網(wǎng)頁版面的豐富多彩性，也可以觸發(fā)網(wǎng)頁設(shè)計者的靈感，確保用戶的體驗更加簡易，增強人們?yōu)g覽互聯(lián)網(wǎng)的興趣。DIV 可以完成網(wǎng)頁整體布局和框架結(jié)構(gòu)設(shè)計，也可以運用網(wǎng)頁標(biāo)記和語言等關(guān)鍵元素，為網(wǎng)頁設(shè)計提供一個系統(tǒng)化和結(jié)構(gòu)化的背景，并且形成一個整體的網(wǎng)頁定位技術(shù)，DIV 技術(shù)可以為網(wǎng)頁設(shè)計提供約束配置和控制功能，有效的保護網(wǎng)頁設(shè)計文檔。基于DIV 在網(wǎng)頁布局中的定義結(jié)構(gòu)代碼如下所述。

其中，wrapper 表示門戶網(wǎng)的主體，以便能夠與頁腳進行區(qū)別，header 表示門戶網(wǎng)頁頭，container 表示門戶網(wǎng)的內(nèi)容；sidebar 表示側(cè)邊導(dǎo)航工具欄；maincontent 表示門戶網(wǎng)的主要功能區(qū)，可以劃分為左邊欄、右邊欄、上邊欄和下邊欄，使用DIV 可以針對主功能區(qū)進行更加細(xì)化的、嵌套的分割，從而可以美化門戶網(wǎng)頁面布局；footer 表示門戶網(wǎng)的頁腳，可以利用DIV 設(shè)置頁腳的開始位置和結(jié)束位置。

網(wǎng)頁布局設(shè)計完畢之后，就可以利用CSS3 進行詳細(xì)劃分，比如header 的設(shè)計包代碼如下。

網(wǎng)站開發(fā)采用DIV 和CSS 技術(shù)可以為學(xué)校網(wǎng)站提供一個更加合理的網(wǎng)頁空間布局，DIV 可以封裝網(wǎng)頁布局子模塊的內(nèi)容，這些內(nèi)容包括視頻、圖片、文字和表格，CSS 是一個層疊式的樣表，可以精確的控制網(wǎng)頁的布局、背景和其他可視化效果。網(wǎng)站開發(fā)采用DIV 和CSS 技術(shù)，可以將網(wǎng)頁中的代碼、數(shù)字和文字高效傳輸，并且可以過濾無效的和不合規(guī)范的數(shù)據(jù)信息，進一步提高網(wǎng)站的響應(yīng)速度。

HTML5 則是最新的計算機網(wǎng)站交互技術(shù)之一，可以滿足多屏幕尺寸的自適應(yīng)功能，比如網(wǎng)頁中的圖像顯示自適應(yīng)大小代碼如下所述：“img{width:100%； -ms-interpolation-mode: bicubic；}”[3]。HTML5 還引入了本地數(shù)據(jù)庫，有效地支持DOM Storage 和Web SQL Database 兩種先進的存儲機制，可以完成本地存儲或高速緩存操作，還可以利用SQL 語法完成數(shù)據(jù)查詢和插入操作，這樣就可以提高交互式搜索的速度，提供一個緩存和索引功能，離線Web程序也可以使用，實現(xiàn)代碼如下：“if(window.applicationCache) {//支持離線應(yīng)用}”[4]。HTML5 可以利用

4 計算機網(wǎng)站數(shù)據(jù)處理技術(shù)

計算機網(wǎng)站最為關(guān)鍵的功能是實現(xiàn)數(shù)據(jù)加工和存儲，目前常用的數(shù)據(jù)庫軟件包括SQL 數(shù)據(jù)庫、Oracle 數(shù)據(jù)庫、MySQL 數(shù)據(jù)庫，這些數(shù)據(jù)庫概念強大，但是由于許多計算機網(wǎng)站還要適應(yīng)移動設(shè)備，因此又引入了一種輕量級的數(shù)據(jù)庫技術(shù)，也即是SQLite 數(shù)據(jù)庫技術(shù)，該技術(shù)是一種輕量級、并發(fā)性的數(shù)據(jù)庫加工軟件，其可以為數(shù)據(jù)庫插入、修改、刪除和查詢信息提供一個應(yīng)用程序接口，實現(xiàn)多種數(shù)據(jù)庫的統(tǒng)一訪問功能[5]。SQLite 數(shù)據(jù)庫還包括四個關(guān)鍵接口函數(shù)，分別是用于注冊驅(qū)動的對象DriverManager、與數(shù)據(jù)庫創(chuàng)建的連接對象Connection、數(shù)據(jù)庫操作對象Statement 和數(shù)據(jù)庫操作結(jié)果集對象ResultSet。SQLite 數(shù)據(jù)庫能夠為開發(fā)人員提供一個標(biāo)準(zhǔn)的應(yīng)用程序接口，可以將所有的數(shù)據(jù)庫操作語句嵌入到Java 程序中，可以為更高級的工具提供跨平臺操作技術(shù)，不需要受到應(yīng)用軟件配置數(shù)據(jù)庫不同帶來的影響。

SQLite 數(shù)據(jù)庫能夠為計算機網(wǎng)站提供一個移動式分布計算服務(wù)，與Java 程序相互結(jié)合，更好地開發(fā)和實現(xiàn)移動設(shè)備軟件，SQLite 數(shù)據(jù)庫利用Java 遠(yuǎn)程過程調(diào)用機制，是面向?qū)ο蟮囊粋€組成部分，可以將完整的對象作為返回值或參數(shù)傳遞給系統(tǒng)，不僅僅預(yù)定義數(shù)據(jù)類型，也及時可以將哈希表這樣的復(fù)雜類型作為參數(shù)傳遞。SQLite 數(shù)據(jù)庫采用了自然的、直接的和功能全面的方法實現(xiàn)分布式計算服務(wù)，幫助程序員利用持續(xù)遞增的方式添加系統(tǒng)功能。SQLite 數(shù)據(jù)庫還具有可移動性，將屬性從客戶機移動到服務(wù)器，也可以從服務(wù)器移動到客戶機，降低客戶機或服務(wù)器的工作量，促使系統(tǒng)具備更大的靈活性。

5 結(jié)束語

計算機網(wǎng)站設(shè)計與開發(fā)是一項系統(tǒng)的、復(fù)雜的工作，其不僅要引入先進的技術(shù)保障網(wǎng)站順利開發(fā)，還要保障計算機網(wǎng)站的并發(fā)性、可靠性、可移動性、自適應(yīng)性，因此人們引入了很多的先進技術(shù)，比如基于DIV 實現(xiàn)網(wǎng)站頁面的整體布局和分割，基于CSS3 技術(shù)實現(xiàn)每一個布局的設(shè)計，并且引入HTML5 技術(shù)實現(xiàn)網(wǎng)站的自適應(yīng)和多媒體顯示，不僅可以有效規(guī)劃網(wǎng)站的整體，還可以實現(xiàn)網(wǎng)站內(nèi)容與形式的分離，精簡網(wǎng)頁設(shè)計的代碼，促使網(wǎng)頁空間結(jié)構(gòu)更加簡單和清晰，提高網(wǎng)站搜索引擎的索引效率，并且可以為未來網(wǎng)站升級提供契機，降低網(wǎng)頁開發(fā)的工作量，提高網(wǎng)站維護的效率。