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