如何修改源碼的網(wǎng)頁(yè)模板？

時(shí)間：2023-06-12 04:12:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-12 04:12:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何修改源碼的網(wǎng)頁(yè)模板？：終于下載了一款自己滿意的新模板，打算裝到自己的網(wǎng)站上，但我又不想和原來(lái)的風(fēng)格模板一模一樣，該怎么辦呢？
接下來(lái)娜娜帶你一起去修改各種源碼的風(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)成。

下面以muban.io模板網(wǎ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路徑改回去哦?。?br>如圖所示：


第三步，修改LOGO，和模板相關(guān)圖片。

網(wǎng)頁(yè)我所要的框架改好了，但里面的logo和banner都還是人家的怎么辦呢？接下來(lái)就是如何修改模板中的相關(guān)圖片了。

娜娜在muban.io下載的模板，包含的有源文件，所以修改起來(lái)非常方便，你只需要修改里面的文字，下載一點(diǎn)你喜歡的其他圖標(biāo)就可以了。

對(duì)于修改網(wǎng)頁(yè)中的圖片推薦使用Fireworks，原因是Fireworks不僅可以打開PNG源文件，還可以打開PSD源文件，相反Photoshop是不能打開PNG源文件的。（注：muban.io模板網(wǎng)站的圖片都是PNG格式）

如果你遇到?jīng)]有提供源文件的模板怎么辦？比如修改logo，無(wú)論是JPG格式還是GIF格式，一律用Fireworks打開，然后在原基礎(chǔ)上修改，然后直接保存就可以看到效果了。但這需要一點(diǎn)點(diǎn)PS技巧。

仿制圖章工具、橡皮圖章工具等這些Fireworks自帶的工具是修改沒(méi)有源文件圖片時(shí)常用的工具。外部工具“拾色器”非常重要哦，可以讓你修改的圖片與整個(gè)網(wǎng)頁(yè)顏色協(xié)調(diào)統(tǒng)一。

第四步，教程看的再多不自己動(dòng)動(dòng)手，親自試一試。那就趕快下載muban.io的模板試一試吧！