免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
默識| Notepad :分析博客模板的好幫手

Notepad++:分析博客模板的好幫手

收藏此頁到365Key
Published on 09/04,2006

  前面的文章中介紹了編輯博客模板的基本常識,包括 HTML 語言CSS 樣式表簡單的模板布局方案 等。然而,這些都是比較淺顯的入門知識,現(xiàn)實中使用的博客模板是非常復(fù)雜的,僅僅了解這些內(nèi)容遠遠不夠,要想真正從頭設(shè)計,還需閱讀很多現(xiàn)有的博客模板代碼,借鑒其它人的經(jīng)驗。在這里,我向您推薦一款開源免費的文本編輯器:Notepad++,它可以在您閱讀網(wǎng)頁代碼時給您很大幫助。

  Notepad++ 如何給代碼閱讀帶來幫助呢?如前面的教程中講到的,HTML 代碼是成對的網(wǎng)頁標簽層層包裹的結(jié)構(gòu),而在博客模板中,通常是用 div 這種矩形塊來布局。所以,要理解模板結(jié)構(gòu),首先應(yīng)當看到最外層的 div 標簽是如何排放的,這樣就看到了整個模板的框架,隨后再分析每個 div 內(nèi)部的代碼就可以逐步把握整個博客模板的結(jié)構(gòu)了。Notepad++ 有一個很棒的功能,那就是將網(wǎng)頁代碼顯示為可折疊的形式,當您不關(guān)心一對標簽內(nèi)部的結(jié)構(gòu)時,可以輕松地將這部分內(nèi)容折疊起來,只留下您感興趣的部分。

  左圖是 我的博客首頁 的模板代碼,如果您直接在頁面上點擊右鍵并選擇查看源代碼的話,恐怕立刻就會被一坨一坨的標簽搞得頭暈眼花,但當您將我的首頁另存為 HTML 文件并在 Notepad++ 中打開時,就可以看得清楚些。經(jīng)過一些簡單的折疊動作便可以看到頁面的總體框架:最外層用 id 為 container 的 div 包裹,里面有四個 div,頂部是 banner,底部是 footer,中間的兩部分分別是 content 和 sidebar。當然如果不參考樣式表的話還不能直接看出 content 和 sidebar 其實是并列的。


  那么該如何查看 CSS 樣式表呢?如果您將一張網(wǎng)頁完整地存儲到本地,CSS 樣式表通常就位于和網(wǎng)頁同名的 .files 目錄里。Notepad++ 識別 CSS 樣式表的語法,也可以用它查看和修改 CSS 樣式表,編輯時還可以通過快捷鍵調(diào)出輸入提示,減少重復(fù)乏味的屬性名拼寫。除了 HTML 和 CSS 之外,Notepad++ 還支持很多其它編程語言的語法高亮,如果對默認的字體配色方案不滿意,還可以自行設(shè)定。因為是綠色軟件,Notepad++ 的設(shè)置信息都保存在程序目錄下,即使復(fù)制到其它機器上運行,配置也不會丟失,所以特別適合放在優(yōu)盤上使用。

  當然 Notepad++ 并非沒有缺點,如果某個博客首頁的代碼寫得不規(guī)范,它也可能對網(wǎng)頁的結(jié)構(gòu)做出錯誤的分析。比如我曾在一篇文章中嵌入一個媒體文件,但沒有嚴格按規(guī)范書寫,只寫了 <embed ...> 而沒有寫關(guān)閉標簽 </embed>。結(jié)果 Notepad++ 就把它和后面緊鄰的 </div> 配對了;此外,一定讓重要的起始標簽另起一行,比如 <head>...</head><body> 這樣的寫法就會造成折疊 <head> 標簽的時候把整個 <body>...</body> 都隱藏掉。要避免這種情況,利用查找替換功能將代碼中所有的 "><" 都通過正則表達式替換為 ">\n<"即可。

  也許有些朋友會問,我聽說設(shè)計網(wǎng)頁都用 Dreamweaver,沒怎么聽過這個 Notepad++ 啊?個人認為 Dreamweaver 是設(shè)計整個網(wǎng)站的時候才需要的工具,用來設(shè)計博客模板會有大材小用的感覺。其實我用過的網(wǎng)頁編輯工具中最棒的當屬微軟的 VS.NET 2005,不僅啟動速度超快,對網(wǎng)頁代碼分析糾錯的能力也很強,還能根據(jù)代碼結(jié)構(gòu)重新縮進,使代碼層次分明,更具可讀性。遺憾的是它是個體積超過 2 G 的大家伙而且價格昂貴,除了專業(yè)編程人員,恐怕沒人會考慮用它來編輯博客模板了。

其它推薦軟件:TopStyle(精簡版免費),UltraEdit-32(收費)

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
這個是我的第一個正式的個人博客!
代碼入門教程(7)
WordPress快速入門指南代碼篇
<!----> 和 /**/ 的區(qū)別?
十九節(jié)5、移動標簽中插入css樣式
css樣式的標簽解析
更多類似文章 >>
生活服務(wù)
分享 收藏 導長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服