日本成人不卡一区二区,68精品人妻一区二区三区,姐姐的朋友4中文字幕

當(dāng)前位置：

深圳網(wǎng)站建設(shè)公司在處理老網(wǎng)站改版時對于圖形庫的使用方法分享

發(fā)布時間：2022-07-15

文章編輯：網(wǎng)站建設(shè) 文章來源：網(wǎng)站改版瀏覽量：次

深圳網(wǎng)站建設(shè)公司在處理老網(wǎng)站改版時對于圖形庫的使用方法分享。網(wǎng)站建設(shè)公司資深設(shè)計師首先來介紹一下 Brad Frost 的原子設(shè)計原則（http://patternlab.io）。網(wǎng)站建設(shè)使用原子設(shè)計原則無疑會改變你看待網(wǎng)站設(shè)計的方式，因此如果有機會的話，最好能夠深入研究一下這個領(lǐng)域。原子設(shè)計是一種構(gòu)建網(wǎng)站設(shè)計系統(tǒng)的方法論。它不是一次性地設(shè)計整個頁面，而是首先把網(wǎng)頁常用元素分解成各個尺寸的模式，然后再描述把這些模式組合成一個完整網(wǎng)頁的方式。這些模式中不可再分的最小單位就稱為原子。原子是構(gòu)造網(wǎng)站、標題、列表樣式、圖片、視頻和表單元素的基本結(jié)構(gòu)單元。就像大自然中的原子能組合成更復(fù)雜的東西，原子設(shè)計把多個原子組合成分子。在網(wǎng)頁設(shè)計中，“分子”可能代表一個搜索表單、媒體塊或者導(dǎo)航欄。正如多個原子組成多個分子，多個分子組成有機體來創(chuàng)造界面的一部分，如博客文章模塊或評論模塊。

最后創(chuàng)造出的是模板，它代表同一個頁面上的多個界面元素的組合和布局，包括導(dǎo)航欄、內(nèi)容區(qū)域和底部元素。
網(wǎng)站建設(shè)或者改版設(shè)計師使用的工具何為Pattern Lab

既然原子設(shè)計已經(jīng)提供了一種通過可分解的模塊來組合成網(wǎng)站的方法論，如果再有一個工具讓我們輕而易舉地實踐它，把新的網(wǎng)頁設(shè)計做成原型，那豈不是很令人振奮？而這正是 Pattern Lab 的用武之地。Pattern Lab（又稱 PL）是一個靜態(tài)網(wǎng)站生成器，它可以記錄所有的網(wǎng)站結(jié)構(gòu)單元。它把原子、分子、有機體和布局變成可瀏覽的網(wǎng)頁，你不僅可以從中看到每個原子組件，還可以使用自定義的內(nèi)容創(chuàng)造樣例頁面，模仿實際的網(wǎng)站效果。

網(wǎng)站建設(shè)設(shè)計師關(guān)于Pattern Lab入門介紹

Pattern Lab 是一個小型網(wǎng)站，自帶很多 CSS 文件、模板、JSON 數(shù)據(jù)文件，以及一個構(gòu)建系統(tǒng)（用來創(chuàng)造可瀏覽的靜態(tài)頁面）。原版本是基于 PHP 的，而我將要演示的是一個 Node 版本。開始使用時，你可以選擇直接把 Pattern Lab 庫粘貼到你的項目里，也可以使用 Yeoman 這樣的工具來快速生成新項目。使用 Pattern Lab 最好的方式是把它放到當(dāng)前的系統(tǒng)主題的目錄里，或者至少放到能與項目共用文件的地方。這么做是為了確保 Pattern Lab 和你的網(wǎng)站共用同樣的 CSS 和 JavaScript 文件。這樣你就可以在 Pattern Lab 中設(shè)計原型，創(chuàng)造所有必要的樣式和腳本。并且當(dāng) HTML 在 CMS 系統(tǒng)里生效時，所有必要的 CSS 和 JavaScript 也已經(jīng)就位了。當(dāng) Pattern Lab 下載完成并安裝好所有相關(guān)的 Node 模塊后（如果你使用的是 Node 版本），用一句命令就可以讓你的 PL 網(wǎng)站運行起來。Node 版本的運行命令為 $ grunt server。在稍加編譯并啟動一個簡單的 Web 服務(wù)器之后，我們會看到一個預(yù)置的簡單的樣式文檔，有原子、分子、有機體、模板，甚至還有完整頁面的示例，就像圖 16-1 所展示的主頁。

網(wǎng)站建設(shè)公司設(shè)計師是如何運行Pattern Lab的？

理解系統(tǒng)背后的運行原理的最好方式，就是從一個完善的界面開始，逆向推出系統(tǒng)的模板，還有 Pattern Lab 用到的數(shù)據(jù)文件。因此，下面就從廣告圖（那座山）開始，看看如何才能在頁面上展示這種帶標題的圖片。首先要明白，所有的文件按不同層級，分別放在 5 個不同的文件夾中：原子、分子、有機體、模板、頁面。每個模式都有一個文件，描述組成按鈕、輪播圖片或底部導(dǎo)航欄的標記。在頁面這一層級上，只需選擇模板并添加內(nèi)容就可以生成頁面，上面的模式也會有關(guān)聯(lián)文件，讓我們可以把 lorem ipsum 字符（或“亂數(shù)假文”）替換成真正的內(nèi)容。接下來看主頁模式的范例，在一番研究之后，我們會發(fā)現(xiàn)雪山廣告圖有這樣一個圖片標簽：

<！—— 00-homepage.mustache ——>

正如你所見，Pattern Lab 使用 Mustache 格式的文件，Mustache 是一種基本的模板語言，它支持使用變量、通過迭代器遍歷數(shù)據(jù)，以及導(dǎo)入其他文件。在 00-homepage.mustache 文件中，我們只需要導(dǎo)入主頁模板，無需其他任何操作。“頁面文件”的作用就在于，它可以把一些數(shù)據(jù)和模板關(guān)聯(lián)在一起，下面就來看看對應(yīng)的數(shù)據(jù)文件：

<！—— 00-homepage.json ——>

{

"title"："Home Page"，

　　　　</div>

　　</div><！——end 3up——>

　　<hr />

　　　　　<h2 class="section-title">Latest Posts</h2>

　　　　　　　<li>{{> molecules-media-block }}</li>

　　　　　</ul>

　　　　　<a href="#" class="text-btn">View more posts</a>

　　　　</section>

　　　</div><！——end .l-main——>

　　　</div><！——end .l-sidebar——>

　　</div><！——end .l-two-col——>

　</div><！——End role=main——>

</div>
好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“處理老網(wǎng)站改版時對于圖形庫的使用方法”就分享到這里。如果您有老網(wǎng)站需要改版或者重新建設(shè)，需要深圳專業(yè)的網(wǎng)站建設(shè)公司為您服務(wù)，請聯(lián)系我們網(wǎng)站技術(shù)客服或者撥打網(wǎng)站聯(lián)系電話，免費為您提供解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。

當(dāng)前文章鏈接：/construction/wzgb/14876.html

上一篇：深圳小程序定制開發(fā)公司淺談微信小程序的發(fā)展前景下一篇：網(wǎng)站建設(shè)公司如何處理商城網(wǎng)站改版移動電子商務(wù)平臺的安全架構(gòu)？

返回列表

如果您覺得案例還不錯請幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認后，會立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當(dāng)前位置：

深圳網(wǎng)站建設(shè)公司在處理老網(wǎng)站改版時對于圖形庫的使用方法分享

如果您覺得案例還不錯請幫忙分享：

相關(guān)案例推薦

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索