查看完整版本: 如何拥有一个属于自己的个性模板——“绯色迷情”

如何拥有一个属于自己的个性模板——“绯色迷情”

[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]首次学习修改模板,琢磨了两个晚上,终于明白如何把图片改造到原模板上了.
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]本次修改的主题是将“美丽深色”改为“绯色迷情”，下面将修改过程与大家分享一下。

[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第一步：打开门户管理，进入我的模板，选择“美丽深色”这个新模板。然后点击模板下的“编缉”，开始进入改造工程。
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第二步：在主页面上，会出现“美丽深色”的背景以及模块，直接在上面选中模块，用Delete删除你不需要的模块，比如“绯色迷情”中删除了论坛文集、我的下载和我的商品三个模块以及最顶部的spacename和guide。如果这些模块你都有需要，那么此步骤可以忽略。
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第三步：还是在这个主页面上，与它并排的有一个“样式表”，点击进入，里面会出现许多代码。
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第四步：想要修改背景图案：[url=http://www.mflady.com/space/batch.download.php?aid=12951][img]http://www.mflady.com/space/attachments/2006/07/2006716_00d046ba9ab232b2c3e511c290a6e502.jpg[/img][/url]
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]先找一张你中意的背景图案（可以到[url=http://photo.163.com/photos/linatang03005/]这里[/url]去看看），大小不限，然后将它保存在你的电脑上，保存为gif或ＪＰＥＧ形式，接着找个地方上传，把上传后得到的图片地址复制下来，下面注意粘贴的地方：
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]在样式表中********************************************* 基本布局风格 **/
　　　　　/*************************************************************/
　　　　　body {
　　　　background: url([color=#ff0000]images/deep/bg.jpg[/color]) ;
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]将红色部分用你复制下来的图片地址替换进去。这样，背景图案就修改完成。

[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第五步：想要修改顶部图案：[url=http://www.mflady.com/space/batch.download.php?aid=12950][img]http://www.mflady.com/space/attachments/2006/07/2006716_a24e09428425c6b39544841f9d09214f.jpg[/img][/url]
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]和上面的方法类似，先选择一张像素大小为[u]770x135[/u]的图片（可以先用photoshop调整图片大小），上传，将得到的图片地址复制下来，下面注意粘贴的地方：
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]在样式表中************************************************* 顶部风格 **/
　　　　　/*************************************************************/
　　　　　#header {
　　　　 background: url([color=#ff0000]images/deep/headbg.jpg[/color]) no-repeat 0 20px;
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]将红色部分用你复制下来的图片地址替换进去。这样，顶部图案就完成。
[font=宋体][font=arial,helvetica,sans-serif][size=3][color=#ffffff]□□[/color][/size][/font][/font][color=#ff80c0][size=3]对于比较希望有自我个性的ＭＭ，可以在图片上传前先处理一下图片，在上面添加一些文字。添加文字的好处就是，可以自定义自个喜欢的博客名称样式，并同时在模板管理中删去显示博客名称的模块，使整个模版更加个性化。[/size]
[/color]
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第六步：想要修改顶部图案下方的导航条：[url=http://www.mflady.com/space/batch.download.php?aid=13042][img]http://www.mflady.com/space/attachments/2006/07/2006716_f762c4a419950048ca6f8d3f33de1aa3.gif[/img][/url]
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]先选择一张像素大小为770x30的图片，上传，将得到的图片地址复制下来，注意粘贴的地方：
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]在样式表中   /*导航*/
             #menu {
             background: url([color=#ff0000]images/deep/line.gif[/color]);
             width: auto;
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]将红色部分用新的图片地址替换进去。这样，导航条修改就完成。
         

   第七步：想要修改左侧标题栏的彩条：[url=http://www.mflady.com/space/batch.download.php?aid=12952][img]http://www.mflady.com/space/attachments/2006/07/2006716_a2ccb91af828faaeb4e1b566af2b662f.jpg[/img][/url]
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]同上，先选择一张像素大小为210x34的图片，上传，将得到的图片地址复制下来，注意粘贴的地方：
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]在样式表中　*侧边标题*/
　　　　　　#sidearea h3 {
　　　　　　background: url([color=#ff0000]images/deep/leftbanner.gif[/color]);
[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]将红色部分用你复制下来的图片地址替换进去。这样左侧导航条的彩条就完成。

[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]第八步：想要修改右侧主体部分标题栏的彩条：[url=http://www.mflady.com/space/batch.download.php?aid=12953][img]http://www.mflady.com/space/attachments/2006/07/2006716_7d23fdaf8b7d819ec4b1603222138409.gif[/img][/url]
同上，像素大小为550x28的图片，上传后得到的图片地址复制后粘贴在样式表中：
　　　　/*主显示区大标题*/
　　　　#mainarea h3 {
　　　background: url([color=#ff0000]images/deep/subject.gif[/color]);
　　　border-bottom: 1px solid #9B9B9B;

[font=宋体][font=arial,helvetica,sans-serif][size=1][color=#ffffff]□□[/color][/size][/font][/font]最后，你还可以对显示的字体颜色，字体大小等做一下修改，这样会使你的整个模板更和谐。
[size=2][color=#339999][font=隶书][color=#660099]
[font=楷体_GB2312][size=5][color=#ff80c0][font=宋体][color=#ffffff]□□[/color][/font]第一次写这种心得，呵，虽然眼睛都看花了，但是很开心啊，可以和大家一起分享自己的学习成果，也希望大家都可以拥有一个属于自己的个性空间。[/color][/size][/font][/color][/font]
[/color][/size]



　　　　
[b]附件:[/b]

嗯，不错，收藏起来好好学习一下！

感动ing......分担我的工作，以用户的角度来指导用户，应该比我的教程更加易懂有效

呵,独乐乐不如众乐乐.

有空也给自己的点田搞下环境美化

就是就是，还有啊，快点贴帖子上去啊，我会时常去光顾的~~~

太好了，学习学习～～～
收藏一个，嘻嘻

辛苦了
我也是自己琢磨出来的呢

不错，背景图案我终于改成功了。可是其它的就弄不来了，因为图片的尺寸有要求，可惜，
photoshop还不会呢，唉，好笨哪。

处理图片尺寸很容易做到的，你按下面方法尝试一下。
先开photoshop，然后在文件中打开你要的图片，接着在图像中点图像大小，就可以按像素来调整了，最后将调好的图片保存一下就ＯＫ了。

细胞的甲子园也改得好漂亮啊，改天也把你修改的心得告诉大家吧~~~

新增左侧背景的修改方式，请大家注意阅读！

V。。。我来看你啦。。。

啊。。。好麻烦噢。。看到这么我代码我就晕掉了。。。算了。。我还是保持我原有的吧。。。。

不要沉了，顶起来