整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ataGear數(shù)據(jù)可視化分析平臺提供了導(dǎo)入靜態(tài)HTML模板的功能，使您可以利用已有的任意HTML網(wǎng)頁資源制作數(shù)據(jù)可視化看板。
首先，您需要準(zhǔn)備一套已設(shè)置好布局的靜態(tài)HTML模板，其中包含的HTML網(wǎng)頁及相關(guān)資源，例如：
index.html
css/
|---style.css
|---images
|---bg.png
|---bg_head.png
js/
|---index.js
|---common.js它的靜態(tài)效果如下圖所示：
然后，將這套靜態(tài)HTML模板壓縮到一個ZIP文件中，使用DataGear看板的[導(dǎo)入]功能，將這個ZIP文件導(dǎo)入為看板。
導(dǎo)入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：
...
<div class="panel-content"
dg-chart-widget="圖表組件ID"></div>
...其中，圖表組件ID 是圖表管理列表中的一個圖表?xiàng)l目ID。
設(shè)置完所有的div元素后，一個數(shù)據(jù)可視化看板就制作完成了，點(diǎn)擊[保存并展示]按鈕，即可查看展示效果。
等等，默認(rèn)的展示效果差強(qiáng)人意……，沒關(guān)系，自定義展示效果也很簡單！
首先，自定義圖表主題，打開看板編輯界面，為<body>標(biāo)簽添加dg-chart-theme自定義圖表主題，如下代碼：
...
<body dg-chart-theme="{color:'#F0F0F0',
backgroundColor:'transparent',
actualBackgroundColor:'#050d3c'}">
...
</body>
...然后，自定義圖表設(shè)置項(xiàng)，為<body>標(biāo)簽添加dg-chart-options屬性，定義全局圖表設(shè)置項(xiàng)：
<body ... dg-chart-options="{title:{show:false},
legend:{top:0},grid:{top:25}}">
<!--隱藏標(biāo)題、圖例頂部展示、坐標(biāo)系距頂部25像素，具體參考echarts設(shè)置項(xiàng)-->大功告成！
官網(wǎng)地址：http://www.datagear.tech
源碼地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
多學(xué)員在學(xué)習(xí)的過程中都遇到過這樣的問題：為什么老師講的我都能聽懂，然而做起來卻總是諸多問題？千鋒重慶校區(qū)老師告訴你，其實(shí)這是正常現(xiàn)象，誰也不能幾天就成為大師，你的實(shí)踐還太少了！練習(xí)多了，經(jīng)驗(yàn)多了，靜態(tài)網(wǎng)頁自然也就手到擒來。
靜態(tài)的網(wǎng)頁其實(shí)就是由兩部分組成，一個是底層結(jié)構(gòu)HTML，另外一個就是負(fù)責(zé)修飾結(jié)構(gòu)的CSS。其實(shí)書寫靜態(tài)網(wǎng)頁就像小時候過家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個什么樣的網(wǎng)站，例如一個綜合類網(wǎng)站包括：搜索框、導(dǎo)航、文章類別模塊、文章標(biāo)題以及一部分廣告板塊；一個博客主頁包括：導(dǎo)航、文章縮略、文章搜索、文章導(dǎo)航以及沒有顯示但可能會有的評論區(qū)。
寫頁面的時候是有劇本的，這個劇本指網(wǎng)頁設(shè)計(jì)圖，或者某個現(xiàn)有網(wǎng)頁，建議大家在模仿網(wǎng)上現(xiàn)有網(wǎng)頁的時候利用瀏覽器自帶的截圖功能，把整個完整的頁面截取下來，QQ瀏覽器，360瀏覽器都可以做到。這樣的優(yōu)點(diǎn)在于可以利用PS自己一步步測量數(shù)據(jù)、切圖都做到親力親為，并且做到了頁面數(shù)據(jù)的精準(zhǔn)度，而不是隨意的給數(shù)據(jù)，或者是利用瀏覽器的F12功能查看原網(wǎng)頁的數(shù)據(jù)。
按照設(shè)計(jì)好的劇本接著就可以找對應(yīng)的成員了，例如百度網(wǎng)頁從上往下分為導(dǎo)航頭部、中間logo和表單、尾部二維碼和文字，相對來說頁面的整體布局是比較簡單的，當(dāng)然還有很多不同類型的頁面，布局要復(fù)雜一些。
當(dāng)看到一個網(wǎng)頁時，需要在腦海當(dāng)中對頁面進(jìn)行一個簡單的掃描，如果把頁面當(dāng)成一張紙，要怎么樣從大到小一點(diǎn)點(diǎn)分割。當(dāng)有了初步的認(rèn)識之后，就可以把這些東西轉(zhuǎn)化成HTML結(jié)構(gòu)，所有不同顏色的框框在寫的時候用的都是DIV。
從上往下，從大到小一點(diǎn)點(diǎn)先把某個模塊以不同的顏色色塊利用代碼堆積出來。保證大的模塊布局沒問題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時候簡單的頁面結(jié)構(gòu)就出來了。
接下來要把寫好的結(jié)構(gòu)進(jìn)行美化，不然頁面就會一團(tuán)亂麻，沒有美感，而網(wǎng)頁當(dāng)中潤色部分是用CSS來做的。這個環(huán)節(jié)需要更加細(xì)心，例如百度首頁導(dǎo)航紅色框整體在綠色框的右邊，需要給紅色框添加float：right；紅色框里面文字的字號大小，字體，字體顏色，水平間距，垂直間距都需要一點(diǎn)點(diǎn)寫。如果在寫的過程中遇見了問題，可以借助Chrome瀏覽器的調(diào)試功能，哪里錯了用箭頭點(diǎn)哪里，結(jié)構(gòu)看左邊，CSS看右邊，看看CSS屬性有沒有顯示，有沒有劃掉，有沒有黃色報錯等等。
在做頁面時，需要大量的練習(xí)，才可以熟能生巧。一個頁面寫完之后，總結(jié)一下這個頁面在書寫過程中遇到了哪些問題，是怎么解決的，為什么這樣解決，深入思考這個模塊的這個效果可不可以用其他的方法來實(shí)現(xiàn)，以做到舉一反三。
千鋒重慶HTML5大前端培訓(xùn)，配合實(shí)戰(zhàn)項(xiàng)目講解網(wǎng)站頁面布局，讓你從容應(yīng)對HTML、CSS的學(xué)習(xí)，基礎(chǔ)打好了，才能更有信心面對之后的挑戰(zhàn)。
的頁面靜態(tài)化分為兩種，一種是偽靜態(tài)，即url 重寫，一種是真靜態(tài)化。我們以真靜態(tài)化為主來講講。
什么是PHP靜態(tài)化
PHP靜態(tài)化的簡單理解就是使網(wǎng)站生成頁面以靜態(tài)HTML的形式展現(xiàn)在訪客面前，PHP靜態(tài)化分純靜態(tài)化和偽靜態(tài)化，兩者的區(qū)別在于PHP生成靜態(tài)頁面的處理機(jī)制不同。
為什么要讓網(wǎng)頁靜態(tài)化
一、加快頁面打開瀏覽速度，靜態(tài)頁面無需連接數(shù)據(jù)庫打開速度較動態(tài)頁面有明顯提高;
二、有利于搜索引擎優(yōu)化SEO，Baidu、Google都會優(yōu)先收錄靜態(tài)頁面，不僅被收錄的快還收錄的全;
三、減輕服務(wù)器負(fù)擔(dān)，瀏覽網(wǎng)頁無需調(diào)用系統(tǒng)數(shù)據(jù)庫;
四、網(wǎng)站更安全，HTML頁面不會受php相關(guān)漏洞的影響; 觀看一下大一點(diǎn)的網(wǎng)站基本全是靜態(tài)頁面，而且可以減少攻擊，防sql注入。
數(shù)據(jù)庫出錯時，不影響網(wǎng)站正常訪問。
生成html文章雖操作上麻煩些，程序上繁雜些，但為了更利于搜索，為了速度更快些，更安全，這些犧牲還是值得的。
PHP生成靜態(tài)HTML頁面的方法
利用PHP模板生成靜態(tài)頁面
PHP模板實(shí)現(xiàn)靜態(tài)化非常方便，比如安裝和使用PHP Smarty實(shí)現(xiàn)網(wǎng)站靜態(tài)化，也可以自己寫一套模板解析規(guī)則，常見的可以模仿各類cms的模板規(guī)則。
1.使用PHP文件讀寫功能與ob緩存機(jī)制生成靜態(tài)頁面
比如某個商品的動態(tài)詳情頁地址是： http： // xxx. com ？xxxxxx. php？ gid =112 xxxxx
那么這里我們根據(jù)這個地址讀取一次這個詳情頁的內(nèi)容，然后保存為靜態(tài)頁，下次有人訪問這個商品詳情頁動態(tài)地址時，我們可以
直接把已生成好的對應(yīng)靜態(tài)內(nèi)容文件輸出出來。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
