一：序
最近有些朋友询问我关于模板制作的问题，比如说要怎么做模板啦，要怎么把模板做漂亮一点啊，也有些朋友想直接让我帮着做一个模板。
对于没有接触过网页设计的朋友来说，自己动手做一整个模板不是件简单的事情，而要做一个漂亮的模板更是难如登天。我学过网页设计，尽管不是专门做这一方面的，做了好几个模板了，但也不敢说能做得非常漂亮。
而帮别人做模板呢，虽然我有些空闲的时间，但做模板也是件挺花时间的事情，做不了那么多。嗯，自从做{dy}个模板到现在应该一个月左右了，做了八个模板，平均一个星期两个，好像挺多的！汗，其实是因为这个月没什么事情，xx又不想出去，所以做了这么几个，其中还有些是类似的。而且，也是因为开通空间两个月后发现这么一件有意思的事情——可以自己做模板，所以很兴奋，才做了那么多的，以后应该就不怎么做了吧，或者说不会做那么多了。八个里面有一个是帮别人做的，大家猜一下，是哪一个呢，答对有奖哦，呵呵！
二：制作自己的模板
其实，如果只是想把自己喜欢的东西，比如说自己的偶像，喜欢的动漫人物，家里的小狗，好吃的食物等等，做成一个简单的模板，不要求漂亮，自己喜欢就行的，也不是一件很困难的事情。因为，这可能只需要换一两张图片就可以了。
[管理中心]->[空间装扮]->[模板]，在那里可以选择自己喜欢的模板，这个大家应该都知道了。选了自己比较喜欢的模板，当然，{zh0}是比较简单的模板，点击右侧的[创建新模板]或者[编辑此模板]，进入[编辑CSS自定义模板]页面，就可以动手做一个自己的模板了。
其实，我更喜欢从[模板]->[我制作的模板]->[管理我制作的模板]进入。在那里有个大大的[创建新模板]，也可以选一个进行编辑。
进入[编辑CSS自定义模板]页面后，页面上方有[]，点击后可以查看页面对应的样式说明，有颜色选择器可以选择颜色。当然，你也可以baidu一下，找些特别效果的代码。
对于，有些朋友对这个css不了解，不清楚是怎么一回事，我在这里给大家简单说明一下。百度空间采用的是div+css的页面布局，因为布局的需要，可能是因为不想让大家改得太乱，也可能是因为想让大家改起来方便一点，页面中还存在一些table。css的作用呢，你想像一下，页面是一个人，而这css就是衣服，衣服有很多种，一个人可以穿不同的衣服，而我们要做的就是设计衣服，当然也可以是修改衣服。那么，要怎么样修改呢？
body{background-color:#FFFFFF;} 这是一件白色的外套，它的作用是让你整个页面的底色变为白色。如果你不喜欢，想换件彩色的外套呢？
body{background:url(xxx.jpeg);} 这是一件彩色的外套，它的作用是让你用图片xxx.jpeg作为页面的底纹。
你试一下，很简单的，这只是修改了整个页面的背景而已。而对修改模板不太熟悉的人来说，他们会只把头部换掉。
在[编辑CSS自定义模板]页面，找到一个#header{...}，这是页面的头部，它里面会有一个属性background-image或者background，在它后面你会找到url(xxx.jpeg),而这个xxx.jpeg就是页面头部的那个图片，你可以找张图片，用那张图片的地址换掉它。如果是网络上的图片，你可以直接拿到它的网址。一般情况下，你应该会选择本地的电脑里的图片，你需要把它上传到空间的相册里，然后找到那张图片，点击它，进入浏览模式，再点击它，然后你就会在浏览器的地址栏里看到类似http://hiphotos.baidu.com/chendychendy/pic/item/xxx.jpeg 的地址，复制它，粘贴到url()里面。然后你可以再修改一下高度或者其他。{zh1}，你会修改成类似这样的代码：
#header {
height:382px;
background-image: url(http://hiphotos.baidu.com/chendychendy/pic/item/7f838c7239e9213b8701b0b1.jpeg);
background-repeat: no-repeat;
background-position: center top;
}
这只是修改头部，接着你可以修改其他部分。在百度空间里，有几个地方的修改是需要重点关照的。
1.整个页面,设置整个页面背景 body
2.头部，设置头部背景 #header
3.空间名称 #header div.tit 空间简介 #header div.desc
4.页面主体，设置底部背景 #main
5.内容区域，设置中部背景 .stage
6.模块区域，设置模块标题背景 .modth
7.文章标题，设置文章标题前的小图片 #m_blog div.tit
8.模块内容，设置模块内容列表前的小图片
#m_artclg div.item,#m_filed div.item,#m_comment div.item,#m_links div.item
#m_mylink1 div.item,#m_mylink2 div.item,#m_mylink3 div.item,#m_mylink4 div.item
如果你不清楚对应位置是哪个标签，可以直接在页面上右键，查看源代码。当然如果是新手的话，应该很难看懂。那么，你也可以百度一下，或者再看下[]。
如果你对于网页的配色不太了解，你也可以查看下面的文章：
修改完，你可以点击[预览]查看一下效果，不满意就再改过，觉得可以了，就点击[另存为]或者[保存并使用]，跳到[我制作的模板]页面，如果是点击[另存为]的话，你需要再选择修改完的模板，点击[使用]，然后就可以到你的空间查看了。如果你觉得很好看，想分享给其他人，可以在[我制作的模板]页面选择那个模板，点击[分享]。不过，注意了，分享的模板自己是不能修改和删除的，所以要谨慎一点。而且，有些作者，就是你模板原来的设计师可能不愿意看到你把他喜爱的模板改得乱七八糟，或者一点没改就分享给别人。
好了，现在你应该基本了解怎么制作模板了吧！你可能还会问，图片放上去以后和其他的地方不搭配怎么办？那只有两种办法了。一是你找过另外一张图片来搭配这个模板，或者你找过另一个模板来搭配这张图片；二是你学一下绘图的工具，比如Photoshop，Firework等。
三：模板常用css入门
为了让新手快速入门，我在这里还是摘一些模板修改时比较常见的属性来说一下吧！
background: background-color || background-image || background-repeat || background-attachment || background-position
例：body{background:#ffffff url(xxx.jpg) repeat-y scroll left top;}
描述：这是一个复合属性，改变标签body的背景。
它可以只写其中的单个或几个属性，例如：body{background:#ffffff;}；
也可以拆出来写，例如，body{background-color:#ffffff;}。
其中，background-color是背景颜色，可以在[css说明]中取色，不写或者写transparent表示透明背景色；
background-image是背景图片；
background-repeat是背景图片平铺的修改，repeat:纵向和横向上平铺，no-repeat:不平铺，repeat-x:横向平铺，repeat-y:纵向平铺；
background-attachment中scroll是背景图像随对象内容滚动，fixed是背景图像固定；
background-position是背景图片的位置，有横向的和纵向的参数，可以写top|center|bottom|left|center|right，也可以写数值10px百分比10%。
font: font-style || font-variant || font-weight || font-size || line-height || font-family
例：body{font:italic small-caps bold 12px 20px 宋体}
描述：这是一个复合属性，改变标签body的字体。可拆开来写，同background。例子中表示的意思为：字体样式为斜体，小型的大写字母字体，加粗，字体尺寸为12px,行高为20px,字体名称为宋体。
height: auto | length
例：body{height:100px;}
描述：设置标签的高度
width: auto | length
例：body{width:100px;}
描述：设置标签的宽度
margin: auto | length
margin: margin-top | margin-right | margin-bottom | margin-left
例：body{margin:0px;} body{margin:0px 0px;} body{margin:0px 0px 0px 0px;}
描述：对象顶边的外延边距，就是和包含自己的标签的距离。
padding: auto | length
padding: padding-top | padding-right | padding-bottom | padding-left
例：body{padding:0px;} body{padding:0px 0px;} body{padding:0px 0px 0px 0px;}
描述：对象四边的补丁边距，就是和自己包含的标签的距离。
border: border-width || border-style || border-color
例：body{border: 1px solid #ffffff;}
描述：这是一个复合属性，改变标签body的边框。可拆开来写，同background。
这是同时指四个方向的边框，对应的，可以分开来指定，border-top，border-bottom，border-left，border-right
filter: filter
例：body{filter:Alpha(opacity=35);}
body{filter:Alpha(opacity=35);-moz-opacity:0.35;}
描述：设置或检索对象所应用的滤镜效果；例子中是设置标签的透明度，第二条是兼容其他浏览器的设置；
常用的背景音乐，图片的圆形效果：
filter: alpha(opacity=100, finishopacity=10, style=2, startx=20, starty=40, finishx=0, finishy=0)
常用的灰色效果：filter:gray();
顺便，我讲一下伪类：
a:link 设置a对象在未被访问前的样式表属性
a:hover 设置a对象在其鼠标悬停时的样式表属性
a:active 设置a对象在被用户xx（在鼠标点击与释放之间发生的事件）时的样式表属性
a:visited 设置a对象在其链接地址已被访问过时的样式表属性
再顺便，我讲一下!important
例：body{font-size:10px;font-size:12px;} 结果font-size为12px
body{font-size:10px !important;font-size:12px;} 结果font-size为10px
body{font-size:10px !important;} body{font-size:12px;} 结果font-size为10px
如果你对css还是不了解的话，可以阅读下面的文章：
四：我制作模板的方式和流程
上面说的是一般的方法，而我制作模板时也有自己的方式和流程。
在我做完第三个模板以后，我就开始整理自己的模板。这是我的一个习惯，我不喜欢弄得乱七八糟，不好找，也容易弄丢，看起来也不舒服。
下面是我制作的模板的目录：
因为在网页上编辑不直观，也很麻烦，所以我是直接在本地编辑的。如何做到在本地编辑呢？
打开你空间的首页（当然，你打开别人的首页也没有问题，那样可以方便地拿到别人的模板哦），在浏览器上点击[文件]->[另存为]，弹出一个对话框，选择保存的路径，修改文件的名字，比如修改为[我的空间首页]，选择保存类型[网页，全部(*.htm;*.html)]，点击确定，成功保存。找到保存后的文件[我的空间首页.htm]，它对应有一个文件夹[我的空间首页_files]，打开对应的文件夹，在文件类型为css的三个文件中找到类似7e9559ecc5e5ba4f78f05595.css的文件，这个文件就是你空间的模板了，它就是一个css文件。不过这个css文件和原来模板的代码不xx一样，它经过了整理，而且也少了些注释，注释是非常有用的，可以帮助你快速定位到你要修改的标签上，所以你{zh0}在[编辑CSS自定义模板]页面中把代码拷过来替换掉这个css文件的代码。现在你就可以直接编辑这个css文件，要查看效果就打开文件[我的空间首页.htm]，修改css代码，然后直接刷新页面就可以看到效果了。你可以使用Dreamweaver等网页设计工具进行编辑，更加方便，不过我一般还是用记事本打开的。
修改图片的话，直接保存在本地就行了，先不用上传到空间相册里，在css中引用直接用本地路径。一般我是直接保存在css所在的那个文件夹里，图片路径直接写图片的文件名，比如body{background:url(xxx.jpg);}。这样的话是不是方便很多，不用修改一下就上传一次。
对于除了首页以外的其它页面的样式，你也可以把对应的页面[另存为]下来，然后再编辑，不过我就没有这样做，因为修改完首页，其它页面要改的就不多了，在本地编辑css文件，然后放到空间上看效果就行了。编辑完保存并。
基本就是这样，如果你还有什么疑问，有什么意见或者建设的话，欢迎留言或者评论！
