零基础Sharepoint企业OA网站开发02——创建母版页

浏览数：62 / 时间：2015年06月09日

上次讲到在SharePoint管理中心创建了网站集，选用了发布网站的模板，默认的发布网站的样式如下：

显然要作为企业OA网站的话，这个样式是不行的，比如顶部的蓝条上面的SharePoint字样、新闻源等等我们都不需要，还有网站的logo肯定也是要换的。

经过一段时间的学习和实践，我大概学会了通过修改母版页的方式来自己定义网站的样式，上图一张：

下面就说一说如何通过母版页来自定义自己的网站风格吧：

1、用SharePoint Designer打开我们创建的网站集，点击左侧导航中的母版页，新建空白母版页：

2、空白母版页的代码就先用系统默认的seattle.master的代码吧，复制粘贴过来就行，在这个基础上比较容易修改。

3、创建自己的样式文件，我选择在“所有文件”---Style Library”中新建文件夹style，在style文件夹中放入CSS样式文件和一些图片：

4、在母版页中引用创建的样式文件，顶部“样式”---“附加样式表”，选择刚刚放入Style Library中的样式文件，附加完成后母版页代码中会多出如下一行：

5、再做一些调整，比如换掉网站的logo图片，去掉顶部蓝条上的一些图标。修改完成后要把我们自定义的母版页设置为默认母版页和自定义母版页。然后打开网站，就可以看到我们自己定义的网站样式了。

下面附上css文件：

#suiteBarLeft
{
    background-color:#73B6CE;
}
#suiteBarRight
{
    background-color:#73B6CE;
}

.ms-backgroundImage
{
background-image:url(‘http://yabangoa/sites/hcc/Style Library/style/back.jpg‘);
background-repeat:repeat-x;
}



.ms-core-pageTitle
{
padding-top:15px;
font-family:华文行楷;
color:black;
font-size:36px;
white-space:nowrap;
}

#s4-workspace 
{ 
max-width:1024px; 
overflow:auto;
margin:0 auto; 
padding:0px; 
position:top center;
background-color:#D6E3E7; 
}

#s4-titlerow
{
background-color:#73B6CE;
height:110px;
background-position:top center; 
margin-top:0px;
margin-bottom:0px;
padding-top:19px;
padding-bottom:8px;
}

#sideNavBox
{
font-size:20px;
background-color:#73B6CE;
height:720px;
margin-left:0;
padding-left:30px;
float:left;
padding-top:50px;
width:120px;
}

#contentRow
{ 
max-width:1024px;

overflow:auto;
margin:0 auto; 
padding-right:10px; 
position:top center;
background-color:transparent; 
}
#copyright
{
height:25px;
font-size:20px;
background-color:#73B6CE;
text-align:center;
}