新媒體環(huán)境下科技論文HTML頁面布局及元素編排

2017-12-05 06:37:15李德根

數(shù)字傳媒研究 2017年9期

關鍵詞：頁面科技

李德根

黑龍江科技大學黑龍江省哈爾濱市 150022

新媒體環(huán)境下科技論文HTML頁面布局及元素編排

李德根

黑龍江科技大學黑龍江省哈爾濱市 150022

為提高科技論文在新媒體環(huán)境下的傳播和利用，通過分析科技論文HTML格式的優(yōu)勢，借鑒HTML技術，根據(jù)科技論文的特點，從科技論文HTML布局，以及科技論文元數(shù)據(jù)文字、圖、表和公式的角度進行研究，給出其編排的技巧與代碼實現(xiàn)的實例，通過對科技論文HTML編排的研究，以期為科技論文在數(shù)字出版環(huán)境下的HTML出版提供借鑒。

數(shù)字出版 HTML 科技論文元數(shù)據(jù)

新媒體與傳統(tǒng)媒體的融合已成為傳媒業(yè)和出版界的熱點，為應對新媒體的沖擊，傳統(tǒng)媒體已在理論和實踐中不斷研究傳統(tǒng)媒體與新媒體的融合。媒體融合不僅僅是傳播手段、傳播方式的多樣化，更應是傳播理念、思維方式的改變，其需要科技期刊辦刊者采用互聯(lián)網(wǎng)思維去辦刊，在網(wǎng)絡環(huán)境下建立新媒體的科技期刊運營模式、傳播模式、服務模式。目前，新媒體環(huán)境下科技期刊對新媒體的研究與使用主要有三個角度：一是如何利用新媒體提高編校業(yè)務；二是新媒體對科技期刊受眾行為的影響；三是科技期刊在新媒體環(huán)境中的發(fā)展。目前，科技期刊使用新媒體，以網(wǎng)站建設、數(shù)字期刊、集群化平臺應用為主，以及開設微博賬號等社交媒體的傳播。隨著平板電腦和手機普及，碎片化閱讀習慣的產(chǎn)生，人們開始在PC 端和平板電腦、智能手機移動終端閱讀科技期刊，PC 端閱讀已成為科技期刊閱讀的主流模式，其通過互聯(lián)網(wǎng)可以快速搜索查詢文獻和編輯文檔等；移動閱讀終端對科技期刊更適用于查詢、略讀，以及分享交流［1-3］?？萍计诳W(wǎng)站提供的PDF全文未能適應新媒體發(fā)展潮流下便捷化、碎片化的閱讀需求，其對獲取信息、引用文獻等方面，對學習和科研過程中使用十分不方便。HTML格式的全文閱讀模式越來越受到重視，其能提供碎片化閱讀，同時可以順應新媒體下移動閱讀趨勢。

隨著信息技術的高速發(fā)展，對科技期刊全文進行數(shù)字化，應考慮跨平臺、多數(shù)據(jù)傳輸，適應手機、平板電腦多種終端展示，更易傳播分享。科技論文HTML格式相比傳統(tǒng)PDF格式具有以下優(yōu)勢：HTML格式的全文便于搜索引擎檢索及收錄；HTML格式的全文便于碎片化、輕量化閱讀，通過全文結(jié)構化的拆分，以網(wǎng)頁形式展示，可以提高讀者的閱讀速率；HTML格式的全文通過提供作者鏈接和大數(shù)據(jù)分析能夠更深入地了解作者信息；HTML格式的全文應用鏈接技術可直接鏈接每條參考文獻全文；HTML格式的文章段落、圖表可直接使用，并提供原圖及原文件下載，可方便讀者保存及使用文中的圖表等內(nèi)容；HTML格式的全文在手機或者其它移動設備打開全文，可自動適應文字大小，順應移動閱讀趨勢［4-6］。HTML格式的全文更注重分享導出功能，讓其在微信等社交平臺上傳播成為習慣。HTML格式的全文為每期專家推薦、作者介紹、同類文章鏈接、廣告等模塊添加提供了可能。筆者通過分析HTML編排科技論文的優(yōu)勢，針對科技期刊論文的特點，給出科技論文HTML的布局框架，以及文字、圖、表和公式的編排及代碼，以期為科技論文的HTML編排提供參考。

1 HTML的編輯工具與元數(shù)據(jù)

科技期刊采用HTML排版，實質(zhì)上就是將每篇文章以網(wǎng)頁的形式進行展現(xiàn)，網(wǎng)頁構成的基本元素主要包括文本、圖像、超鏈接和表格等。

1.1 HTML編輯工具

常用HTML的編輯工具有FrontPage和Dreamweaver。FrontPage支持所見即所得的編輯方式；Dreamweaver是一個用于可視化設計與管理網(wǎng)頁和網(wǎng)站的工具，支持最新的WEB技術，其與MACROMEDIA公司的Flash和Fireworks配合使用，功能更為強大，是目前首選的科技論文網(wǎng)頁制作的工具。

1.2 圖形和圖像

科技論文編排加工HTML時，除了文字以外，圖、表和公式均得轉(zhuǎn)換成圖形和圖像形式。網(wǎng)頁中圖片的格式可以是 GIF、BMP、JPG、PSD、TIF、PNG等，其中GIF和JPEG兩種格式最為常見。彩色照片和產(chǎn)品圖片常用JPG格式存儲，其他的選用GIF格式存儲。Photoshop和Fireworks軟件是網(wǎng)頁圖片預處理常用的工具。網(wǎng)頁圖片受到傳輸帶寬的限制，應盡量小，其分辨率一般設置為72dpi。減小圖片精度可以同等比例減小圖片的縱向和橫向的像素數(shù)量，同時可以大幅度縮減儲存圖片文件的大小。如果科技論文需要瀏覽的高清大圖片，要使用文字或小圖片鏈接方式瀏覽，通過小圖片鏈接瀏覽的大圖片要放到另外一個文件夾保存，這樣可以提高HTML圖片的加載速度。

2 論文HTML頁面布局

一般顯示器的分辨率在800×600的情況下，頁面的顯示尺寸為：780×428個像素；分辨率在640×480的情況下，頁面的顯示尺寸為：620×311個像素；分辨率在1024×768的情況下，頁面的顯示尺寸為：1007×600，分辨率越高頁面尺寸越大。圖片和文本是網(wǎng)頁的兩大構成元素，缺一不可。隨著動態(tài)網(wǎng)頁的興起，在網(wǎng)頁布局上也將變得更重要，如何處理圖片和文本的位置是HTML整個頁面布局的關鍵，而HTML的布局思維也將體現(xiàn)在這里。文中科技論文HTML頁面布局使用DIV+CSS進行網(wǎng)頁布局，其設計思想是：首先，通過DIV分塊，定義語義結(jié)構，然后通過CSS對塊進行定位、添加樣式，最后定義好的各個塊內(nèi)添加相應的內(nèi)容，如文字、圖片、鏈接、列表等。以DreamWeaverCS6為開發(fā)平臺，使用

標記把網(wǎng)頁分成頭部（#網(wǎng)站頁頭），菜單部分（#網(wǎng)站菜單欄），內(nèi)容部分（#content）三個塊，內(nèi)容部分分成左側(cè)（#Left）、中間（#Middle）右側(cè)（#Right）三部分，科技論文HTML全文布局，如圖1所示。代碼如下：

菜單部分

文章結(jié)構索引部分

論文部分

引用本文參考文獻著錄、作者信息、基金項目、文章信息、相關文章、多平臺分享

圖1 科技論文的HTML布局

3 實例

以南方醫(yī)科大學學報和航空學報網(wǎng)站上的HTML科技論文為例［7-8］，如圖2所示，進行論述科技論文HTML元數(shù)據(jù)的編排加工過程及其代碼實現(xiàn)。

圖2 科技論文HTML編排實例

3.1 論文HTML的圖元編排及代碼

相比文字，圖形和圖像所占磁盤空間較大，科技論文在制作HTML時，有時需先對圖片進行分割處理便于瀏覽者可以達到快速下載和瀏覽，在制作HTML時，圖片和圖像可以采用表格或div層進行實現(xiàn)，利用div層實現(xiàn)HTML圖元編排，如圖3所示。其代碼如下：

光鏡下和Hoechst33258染色觀察不同濃度DHA作用48h后對HeLa細胞形態(tài)的影響

圖3 網(wǎng)頁中圖的編排

3.2 論文HTML的表格編排及代碼

科技論文里有大量的表格，其在制作網(wǎng)頁時，表格以GIF圖片格式放到HTML網(wǎng)頁中，將GIF圖鏈接到網(wǎng)頁的數(shù)據(jù)表格上，數(shù)據(jù)表格已單獨的一個網(wǎng)頁進行顯示，其樣式如圖4所示。

different concentration of DHAfor 48 h（μmol/L）

不同濃度DHA刺激宮頸癌細胞48h后不同抑制率的濃度

Inhibition rate of cervical cells after treatment with

different concentration of DHAfor 48 h（μmol/L）

圖4 網(wǎng)頁中表的編排

3.3 論文HTML的公式編排及代碼

HTML在編排科技論文的公式時，公式需轉(zhuǎn)成JPEG圖像形式，如圖5所示。其代碼如下：

圖5 公式的JPEG圖像

HTML在編排文字、鏈接程序，以及各平臺的分享程序時，同網(wǎng)頁的設計類似，在此不再贅述。

結(jié)束語

在新媒體和網(wǎng)絡出版環(huán)境下，HTML作為一種新型的科技期刊出版格式，能夠滿足人們碎片化和輕量化閱讀?？萍计诳捎肏TML編排可以實現(xiàn)全文數(shù)據(jù)結(jié)構，可以為多元出版打下基礎。針對科技期刊論文HTML頁面布局、圖、表和公式的特點，結(jié)合南方醫(yī)科大學學報和航空學報科技論文HTML編排特點，給出圖、表和公式的HTML編排和代碼，為科技論文HTML的編排。

［1］嚴飛.科技期刊全媒體出版的互聯(lián)網(wǎng)思維［J］.編輯學報，2015，27（1）：13-15.

［2］陳佳沁，馬瀟漪. 科技期刊的新媒體應用與提升策略［J］.中國科技期刊研究，2014，25（7）：909-913.

［3］鄭筱梅．移動終端對科技期刊閱讀行為模式的影響及策略［J］．科技與出版，2014，（2）：73-75.

［4］蘇磊，張玉，蔡斐.科技期刊全文閱讀模式PDF和HTML的對比與分析［J］. 編輯學報2015，12（S1）：S17-S19.

［5］黃永慧，陳程凱．HTMLS在移動應用開發(fā)上的應用前景［J］.計算機技術與發(fā)展，2013，23（7）：207-210.

［6］馬新強，孫兆，袁哲，等．Web標準與HTML的核心技術研究［J］．重慶文理學院學報：自然科學版，2010，29（6）:61-64

［7］白俊強，張揚，徐晶磊，等. 新型單方程湍流模型構造及其應用［J］. 航空學報，2014，35（7）：1804-1814.

［8］白俊強，張揚，徐晶磊，華俊.新型單方程湍流模型構造及其應用［J］. 航空學報，2014，35（7）：1804-1814.

審稿人：魏朝輝內(nèi)蒙古新聞出版廣電局監(jiān)管中心正高級工程師

責任編輯：王學敏

TP314

2096-0751（2017）09-0015-05