如何修改源碼的網(wǎng)頁(yè)模板？
- 威海網(wǎng)站建設(shè) 威海CMS
- 2235
終于下載了一款自己滿意的新模板，打算裝到自己的網(wǎng)站上，但我又不想和原來(lái)的風(fēng)格模板一模一樣，該怎么辦呢？
接下來(lái)盧松松帶你一起去修改各種源碼的風(fēng)格模板。
模板有很多種類，在這里我主要講的是ZBLOG風(fēng)格模板如何修改，此方法可以舉一反三。對(duì)于WordPress、PJBLOG、動(dòng)易CMS、織夢(mèng)CMS、風(fēng)訊CMS的風(fēng)格模板修改方法都是一樣的。
修改一個(gè)你滿意的網(wǎng)頁(yè)模板，你要有以下基礎(chǔ)，會(huì)一點(diǎn)HTML語(yǔ)言，會(huì)一點(diǎn)DIV+CSS，會(huì)一點(diǎn)圖片制作方法。
第一步，先講解一下主題模板的構(gòu)成。
下面以Z-blog主題“低調(diào)與華麗”風(fēng)格模板來(lái)說(shuō)明，
模板均分為三大部分，①網(wǎng)頁(yè)的html文件，②CSS文件，③圖片文件。一般情況修改模板只需修改這三部分。
第二步，你可以讓模板可視化再修改。
幾乎所有默認(rèn)的源碼網(wǎng)頁(yè)模板的路徑都是系統(tǒng)自帶的標(biāo)簽。這樣把講HTML文件放入Dreamweaver里時(shí)會(huì)是一堆的代碼。如何將程序模板轉(zhuǎn)換為可視化界面呢。其實(shí)只需要修改CSS和圖片路徑就可以了。
如：
<link rel="stylesheet" rev="stylesheet" href="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/<#ZC_BLOG_CSS#>.css" type="text/css" media="screen" />
加紅色的部分就是系統(tǒng)標(biāo)簽，這時(shí)你可以修改成你本機(jī)的虛擬路徑。其他的程序標(biāo)簽都有說(shuō)明，請(qǐng)查看相關(guān)系統(tǒng)標(biāo)簽。
如：<link href="../style/css/LuSongSong-Index.css" rel="stylesheet" type="text/css" />
修改好之后你就可以在Dreamweaver里面直觀的看到網(wǎng)頁(yè)界面了，并且修改起來(lái)也非常方便。（記得模板修改之后別忘記把CSS路徑改回去哦?。?/p>
如圖所示：
如何修改源碼的網(wǎng)頁(yè)模板？ 網(wǎng)站設(shè)計(jì) ZBlog 建站教程 第1張
擴(kuò)展閱讀：如何學(xué)習(xí)HTML語(yǔ)言；如何從零開(kāi)始學(xué)習(xí)DIV+CSS。
第三步，修改LOGO，和模板相關(guān)圖片。
網(wǎng)頁(yè)我所要的框架改好了，但里面的logo和banner都還是人家的怎么辦呢？接下來(lái)就是如何修改模板中的相關(guān)圖片了。
由于盧松松提供的“低調(diào)與華麗”風(fēng)格模板，包含的有源文件，所以修改起來(lái)非常方便，你只需要修改里面的文字，下載一點(diǎn)你喜歡的其他圖標(biāo)就可以了。
對(duì)于修改網(wǎng)頁(yè)中的圖片推薦使用Fireworks，原因是Fireworks不僅可以打開(kāi)PNG源文件，還可以打開(kāi)PSD源文件，相反Photoshop是不能打開(kāi)PNG源文件的。（注：盧松松提供的源文件都是PNG格式）
如果你遇到?jīng)]有提供源文件的模板怎么辦？比如修改logo，無(wú)論是JPG格式還是GIF格式，一律用Fireworks打開(kāi)，然后在原基礎(chǔ)上修改，然后直接保存就可以看到效果了。但這需要一點(diǎn)點(diǎn)PS技巧。擴(kuò)展閱讀：我的博文插圖是如何制作的。
仿制圖章工具、橡皮圖章工具等這些Fireworks自帶的工具是修改沒(méi)有源文件圖片時(shí)常用的工具。外部工具“拾色器”非常重要哦，可以讓你修改的圖片與整個(gè)網(wǎng)頁(yè)顏色協(xié)調(diào)統(tǒng)一。
第四步，教程看的再多不自己動(dòng)動(dòng)手，親自試一試。那就趕快下載“低調(diào)與華麗”風(fēng)格模板試一試吧！
來(lái)源：盧松松博客
