博客

A   A   A   A
9月 24
如何装修自己博客使它更显个性化

母版页代码.txt

1,用Sharepoint Desginer 2013软件打开博客网站(“打开网站”输入如http://va.neu.edu.cn/personal/renmeng/Blog/这样的网址即可)。

2,打开后找到“母版页”,我的博客默认的母版页是oslo.master,编辑oslo.master母版页。同学们一般默认的是Seattle.master母版页。

3,把我提供的代码<body>.......</body>替换原有的<body>.......</body>即可。对于整个母版页来说我这种更改样式方法最为安全,因为对原有母版页布局没有改变,对母版页整体结构没有删减,只是做了一些CSS修改,我加的CSS是行内样式它有很高的优先级对原有的CSS不会删减,我在部分更改处添加了注释,但是需要说明上面的banner图片会寻找我博客的路径,所以banner图片会一样,如果想图片个性化可以更改红色字体的图片网络地址。

<div id="titlerow" class="ms-dialogHidden ms-core-header ms-tableRow" style="background-image:url('http://va.neu.edu.cn/personal/renmeng/Blog/DocLib/va_VAblogbanner_bg.jpg');background-repeat:no-repeat">

background-repeat:no-repeat这个是CSS,如果你的图比我的图高的话,可以去掉这个CSS代码background-repeat:no-repeat,这个CSS代码是定义图片是否重复。

xiaoguo.jpg 

4,我们默认的BLOG母版页使用的是Seattle.master,在网站中一共有四个母版页分别是Seattle.master,oslo.master, minimal.master, va.master,我前面讲的是修改oslo.master母版页,用同样的原理可以修改Seattle.master母版页。

5,这两个母版页有什么区别,如果你改的母版页是oslo.master的话,当你在“网站设置”选择“更改外观”你会发现,之前修改的样式banner荡然无存,为什么?因为当你“更改外观”后母版页自动会默认为Seattle.master母版页,所以修改Seattle.master母版页还是比较受益的。如果之前使用了oslo.master母版页那么更改外观后怎么修改Banner那?答案是用Desginer软件打开博客网站后,选择oslo.master母版页右键-点击“默认母版页”,“自定义母版页”,这步操作完一切问题迎刃而解。

另外再告诉你怎么通过页面能看出你博客引用的是哪个母版页,oslo.master母版页导航在博客标题下面,而Seattle.master母版页导航是在博客标题上面。

 如果在装修BLOG时遇到问题可以给我留言。

如果你按照我的方法装修了博客,请给我留言并附上你的博客网址。

评论

“装修”一词用得很妙,网站建设就像家装一样,需要自己一...

“装修”一词用得很妙,网站建设就像家装一样,需要自己一点一滴的设计和美化。从家具、电器的购置(比如网站内容如文本内容、图片库、文档库、资产库、应用程序、webpart等的添加)、摆设(母版页布局)到墙壁的粉刷、装饰(像js脚本的编写、css样式的美化)等。
图片: 穆友胜
  • 穆友胜
 时间 2014/9/24 17:01

@穆友胜

@穆友胜
图片: 任萌
  • 任萌
 时间 2014/9/26 9:38

表示没看懂

表示没看懂
图片占位符: 张强
  • 张强
 时间 2014/10/27 17:10

.............

.............
图片: 齐健
  • 齐健
 时间 2014/12/5 14:06

怎么设置自己的子网站

怎么设置自己的子网站
图片: 刘然
  • 刘然
 时间 2015/1/14 22:36

今天无聊捣鼓了一下,我是通过“博客”左上角的“页面”〉...

今天无聊捣鼓了一下,我是通过“博客”左上角的“页面”〉“编辑页面”〉“在sharepoint designer2013中编辑”才打开了软件对我的博客页面进行装饰的。代码就加入了本文中提供的那一条,效果图见链接:http://va.neu.edu.cn/personal/juxueqin/Blog/Lists/Posts/Post.aspx?ID=93
图片: 鞠雪琴
  • 鞠雪琴
 时间 2015/7/2 16:18

老师,为啥我找不到和你提供的代码相对应的代码呢?

老师,为啥我找不到和你提供的代码相对应的代码呢?
图片: 侯宽旭
  • 侯宽旭
 时间 2016/11/1 23:31

 ‭(隐藏)‬ 博客工具