企业信息门户快速搭建必备手册模板.doc

企业信息门户快速搭建手册

一、创建站点 2
二、页面设计 6
1、创建文档库 8
2、创建页眉文件 15
3、修改css文件 18
4、创建页脚文件 19
5、首页其它部件设计 19
（1）、内容编辑器web部件布局和格式属性修改做法 19
（2）、取静态内容（带宏替换功效）修改。eg：搜索。 23
（3）、个人工作助理做法。 25
6、首页新闻设计 26
（1）、创建CMS文件夹 26
（2）、在CMS文件夹中新建文档 26
在CMS文件夹点击新建文档 27
（3）、CMS引用 27
三、二级页面（静态页面和栏目树） 28
1、创建静态页面文档库。 28
2、创建一个web部件页面 33
3、编辑新生成web部件页 34
4、在css文件中添加bmgk风格 39
5、将“企业概况”静态页面和首页挂接 40
四、二级页面（文档库） 42
1、创建网站和工作区 42
2、创建文档库 44
3、在css文件中加入文档库风格修饰代码 46
五、CMS 54
1、CMS频道创建和公布 54
（1）、创建频道 54
（2）、公布频道 56
2、首页新闻和CMS挂接 59
3、修改新闻频道细览页页眉页脚 60
（1）、创建新闻频道页眉 60
（2）、创建新闻频道页脚 63
4、新闻频道概览页 64
（1）、创建web部件页 64
（2）、修改更多链接 65
(3)、修改概览页样式 65
六、细化首页 66
1、帮助信息 66
（1）、上传图片和文件 66
（2）、修改页脚帮助信息链接 66
2、技术支持 66
3、网站地图 67
4、开启网站匿名 67
七、美化首页 67
1、首页添加“文档和列表”和“网站设置” 67
（1）、创建purview文档库，在该目录下上载“权限.htm”。 67
（2）、在首页中添加“取静态内容（带宏替换功效）”web部件。 67
（3）、更改purview文档库权限 67
2、将顶部功效条隐藏，增加浮动登录按钮 68
（1）、将登录按钮图片denglu.gif上传至EX_STATICPAGES_文档库_EX_RESOURCE_目录下 68
（2）、修改css文件 68

一、创建站点
和SPS在同一服务器场顶级站点创建
用浏览器打开SPS门户，点击页面右上角“登录”，在弹出对话框中输入用户名和密码，即可登录到门户。

密码
域 \ 邮件帐号

点击功效条上面“网站”，进入下一页面后点击页面左下侧“创建网站”，图所表示

输入标题(能够是汉字)和URL(最好用英文，以方便访问)，及电子邮件地址，点击创建按钮。以下图

进入以下图页面后点击确定按钮，进入下一步选择网站模板页面。

在此页面下模板选择“空白网站（带页眉页脚）”，以下图所表示。

选好后点确定按钮，即可。创建好WSS门户首页以下图所表示

注意：新建门户首页会自动继承父门户页眉和页脚

二、页面设计
点击主页右上角“修改共享网页” “添加Web部件”
“浏览”

依据部件性质，将“Web部件列表”中“内容编辑器”和“取静态内容（带宏替换功效）”拖入页面所需位置中（拖动方法为在待选部件上，按住鼠标左键移动，到指定位置后释放鼠标左键即可）。

1、创建文档库
点击主页左上角“文档和列表”

进入创建文档库页面，图所表示，然后点击“创建”

点开新建文件夹

创建一个保留图片及资源文件文件夹：_EX_RESOURCE_（文件名大小写均可）

点击“保留并关闭”，返回到上级目录。

打开建好“_EX_RESOURCE_”文件夹，点击上载文档。

2、创建页眉文件
在“EX_STATICPAGES_”文档库下，点击新建文档，这时系统会进入Microsoft
FrontPage编辑页面。

从coding文件中，选择页眉及导航条所在TABLE（有时可能包含多个TABLE）。

将其代码有选择地拷贝到新建文件（eg：new_page_1.htm）中，img路径替换为“_EX_RESOURCE_/”，并将导航条中首页链接更改为：<a href=”_EX_EXCHANGESITE_/”>首页</a>（备注：导航条中不要写绝对地址）,同时添加<link rel="stylesheet" href="_EX_RESOURCE_/css.css" type="text/css">(其中标红处是门户名称，eg：daqing)。使页面宽度设定为760，居中显示，同时在页面web部件之间不显示缝隙，加入以下代码：
<Script>
document.title=" ";
function AutoFitFrame()
{
try{
node=event.srcElement;
if(node.contentWindow.document.body.innerHTML !="")
{
node.style.height=node.contentWindow.document.body.scrollHeight;
node.style.width=node.contentWindow.document.body.scrollWidth;
}

}catch(ex)
{
}
}
var ptables
ptables= document.getElementsByTagName("TABLE")
if(ptables.length > 0)
ptables(0).className="ms-main"
window.attachEvent("onload",flfoaterDiv);
window.attachEvent("onload",initFloaterExport);
window.attachEvent("onscroll",flfoaterDiv);
window.attachEvent("onresize",flfoaterDiv);
function initFloaterExport()
{
try{
document.getElementById("diidIOExportToSpreadsheet").className="diidIOExport";
}
catch(ex)
{
}

try{
document.all("floaterSettingsDiv").style.display="inline";
}
catch(ex)
{
}
}
function flfoaterDiv()
{
try{
document.all("floaterSettingsDiv").style.left=document.body.clientWidth-110;
document.all("floaterSettingsDiv").style.top=document.body.scrollTop;
}
catch(ex)
{
}
}

</script>
选择保留文件，文件名输入为“head.htm”。

选择保留文件，文件名输入为“head.htm”。

3、修改css文件
建好页眉文件后，回到“_EX_RESOURCE_”文件夹下，打开css文件，添加下面代码：
.ms-main
{
width:760;
}
body
{
text-align :center;

}

.ZoneSpacinghorizontal
{
display:none
}

.ms-PartSpacingVertical
{
display:none
}
4、创建页脚文件
和创建页眉（head.htm）建立次序和方法相同，在“EX_STATICPAGES_”目录下，创建一个新文件，将此文件名保留为“foot.htm”，将coding代码有选择拷贝进文件即可。

回到主页，就能够看到显示有头脚主页面。

5、首页其它部件设计
（1）、内容编辑器web部件布局和格式属性修改做法
修改web部件布局和格式操作方法有2种。
方法一 从页面右上角“修改共享网页”-----“修改共享web部件”------“选择待须改部件（eg：内容编辑器web部件[1]）”

方法二 直接从“修改web部件”进入，eg：内容编辑器web部件[1]

经过以上方法能够进入到以下界面，其中界面右边即为待改部件工具窗格。
点开界面右边“源编辑器”，弹出一个网页对话框。

从coding文件中选择该部件所对应代码拷贝至网页对话框中

注意：将每部分代码拷入源编辑中时，将原有文件中全部“img/”路径替换为“EX_STATICPAGES_/_EX_RESOURCE_”路径，然后“保留”。

点开右边工具栏“外观”，修改“标题”中名称，如“企业概况”、“交流和写作”、“网上办公”等。在框架样式中选“无”。然后“应用”------“确定”。

（2）、取静态内容（带宏替换功效）修改。eg：搜索。
点开“取静态内容（带宏替换功效）”下拉箭头，选“修改共享web部件”。

在右面工具框自定义属性下，
文件路径中输入“_EX_EXCHANGESITE_/EX_STATICPAGES_/search.htm”
在外观下
标题中输入“搜索”
框架样式中选“无”。
然后“应用”------“确定”。

创建搜索文件

和创建页眉（head.htm）建立次序和方法相同，在“EX_STATICPAGES_”目录下，创建一个新文件，将此文件保留为“search.htm”，并将“search”图片上传至“_EX_RESOURCE_”下,将下面代码拷贝进文件中即可。
<div align="left">
<table align=center border="0" cellpadding="0" cellspacing="2" width="146">
<tr>
<td width="40" valign=middle>
<select style="height:20;font-size:12px;width:60" sname="SearchScopeSel"

id="SearchScopeSel" class="a"><option value=1 >
部门</option><option value=0>集团</option></select></td>
<td >
<input name="SearchString" id="idSearchString" type="text" class="a"
style="width:66;height:18" size="15"></td>
<td width="20" align="left">
<img src="_EX_RESOURCE_/search.jpg" border="0" onclick="javascript:DoscopeSearch()" alt="搜索"></td>
</tr>
</table>
</div>
<Script>
function DoscopeSearch()
{
var scope= document.all("SearchScopeSel").value
if(document.all('idSearchString').value==""){
alert("请输入关键字");
return;
}
if(scope=="0")
{
location=("/search.aspx?k="+document.all('idSearchString').value);

}
else
{
SubmitSearchRedirect('_layouts/2052/searchresults.aspx')
}
}
</Script>

（3）、个人工作助理做法。
a. 个人邮件，链接到：“http：//pc”(弹出新窗口)
b. 个人订阅，链接到：“_layouts/2052/MySubs.aspx”
c.

6、首页新闻设计
（1）、创建CMS文件夹
进入“EX_STATICPAGES_”文档库，点新建文件夹在“名称”框中输入“CMS”，然后选择“保留并关闭”。

（2）、在CMS文件夹中新建文档

在CMS文件夹点击新建文档，弹出M]icrosoft Office FrontPage页面，在该页将coding代码进行拷贝编辑，注意，img路径替换为：“_EX_RESOURCE_/”，将此文件保留为后缀为.htm形式。eg：通知公告可存为tzgg.htm或通知公告.htm。

（3）、CMS引用

点击“取静态内容（带宏替换功效）”下拉箭头，选“修改共享web部件”，展开自定义属性。文件路径中输入：“_EX_EXCHANGESITE_/_EX_STATICPAGES_/CMS/….htm”
外观标题中输入名称，框架样式中选“无”。然后“应用”“确定”。
页面以下显示：

三、二级页面（静态页面和栏目树）
1、创建静态页面文档库。
（1）、创建以二级栏目命名文档库，eg：“企业概况”，文档模板选“Microsoft Office FrongtPage网页”。

（2）、添加扩展属性

点开目前文档下左栏最下面“修改设置和栏”，选“添加新栏”。

在栏名处输入“Level”（首字母必需大写），信息类型选“数字(1, 1.0, 100)”，
要求此栏包含信息选“是”。然后“确定”。

点开刚建好栏目“Level”，将默认“Level”改为“深度”，然后确定。

点击“返回栏目名称”，eg本例“返回企业概况”。

添加新栏目后界面以下。

（3）、在该文档库下创建所属全部静态页面。

（4）、设置树形结构
计划要展示栏目树，并对树中每个节点表示其深度。这里约定栏目树结构深度从0开始。
深度编号
0
1
2
3

生产周报

总部机关

发展研究部

政治思想工作部

计划研究部

直属企事业

油气田企业

大庆石油管理局
深度编码将能控制树显示层次，树中同一层次结点显示次序将由列表中次序编码来控制。依据上表将深度值赋给列表中静态页面。（能够手动修改各个页面次序，次序号间隔缺省为100）
2、创建一个web部件页面
（1）、创建pages文档库
文档库名称命名为“pages”，在文档模板处选“web部件页”，然后创建。

进入以下界面

（2）、在该pages库下选“新建文档
在该pages库下选“新建文档”，在下一页面中输入二级栏目名称，
eg：企业概况，布局模板默认“页眉，页脚，左栏，正文”。然后“创建”。
3、编辑新生成web部件页
（1）、将右边工具栏中“站点、库、列表显示”拖到页面“左栏”中，点开“站点、库、列表显示”栏右边下拉箭头，选“修改共享web部件”。

（2）、点开右边工具栏中“内容设置”

在框中按以下对照填写。
名称 填写值
列举列表内容 *

风格定义 bmgk

指定列表名称

列表类型选择

是否是显示犯错信息 FALSE

目标地址，多目标时用“;”分割 _EX_THISSITE_#二级栏目名称（eg：企业概况）

Xsl文件地址 _EX_ROOTSITE_/_layouts/2052/eip/nav_tree.xsl
或_EX_ROOTSITE_/_layouts/2052/eip/Doc_list.xsl

最大深度 -1

Xsl内容
然后“应用”---“确定”。
（3）、将“显示内容”拖入到“中间”栏中
点开右边“修改共享网页”，选“添加web部件”----“导入”，进入下一页面，点击“浏览”，将“显示内容.dwp”文件导入，然后“上载”，出现已上载web部件下“显示内容”，将“显示内容”拖入正文中

在“显示内容”下拉箭头点击 —→ 点开“修改共享Web部件” —→ 在“显示内容”下点开“外观”—→ 在框架样式中下拉菜单中选“无”—→ 应用 —→ 确定 —→

进入下列页面。

下面是在“XSL”文件地址中，
1、用“_EX_ROOTSITE_/_Layouts/2052/eip/Doc_list.xsl”显示栏目树例子：

2、用“_EX_ROOTSITE_/_Layouts/2052/eip/nav_tree.xsl” 显示栏目树例子：

4、在css文件中添加bmgk风格
在“_EX_RESOURCE_”目录下打开css文件，将下列定义加入文件中：
/* Tree's CSS */
/栏目树顶部/
.bmgkDocMgtTreeViewHead {
background-image: url('');
background-repeat: no-repeat;
width: 185px;
height: 135px;
}
.bmgkDocMgtTreeViewBody {
background-image: url('table-bg.jpg');
background-repeat: repeat-y;
width: 185px;
height: 50px;
}
/定义Level缩进/
.bmgkmvIndent {
background-image: url('treeImg/icon1.gif');
background-repeat: no-repeat;
background-position: right;
width: 40px;
height: 22px;
}
/栏目链接样式/
A.bmgkTreeViewMainNode {
font-family: "宋体";
font-size: 12px;
color: #003A57;
text-decoration: none;
cursor: hand;
}
/栏目树底部/
.bmgkDocMgtTreeViewBottom {
background-image: url('leftbg.gif');
background-repeat: no-repeat;
width: 185px;
height:180px;
}
5、铺设静态页面左侧底图
点击页面右上角“修改共享页面”――设计此页――点击显示内容WEB部件下拉箭头，点击“修改共享WEB部件”图

在页面右侧出现显示内容属性，点击“源编辑器”，出现显示内容WEB部件代码。
在代码下面添加铺底图样式代码
<style>
#MSO_ContentTable
{
background-image: url('/sites/pxcs/EX_STATICPAGES_/_EX_RESOURCE_/f_bg.jpg');
background-repeat:repeat-y;
Height:100%;
}
</style> 6、将“企业概况”静态页面和首页挂接
（1）、点击文档库和列表，点文档库中“pages”，进入pages页面—→点开“企业概况”，将此页面URL地址后加“?main=企业概况.htm ” —→ 然后将“pages/gsgk.aspx?main=企业介绍.htm” 拷贝，用Code.html编译器进行编译。把编译过地址Pages以后内容重拷贝。

回到主页，点击右上角“修改共享网页”-----“修改共享web部件”----“企业概况”，

进入下一页面，（1）点开“源编辑器”将上一步编译过地址Pages以后内容拷贝到其对应链接处，然后保留—应用---确定。

四、二级页面（文档库）
二级栏目是文档库创建方法。Eg：党群工作。
1、创建网站和工作区
点击主页左上角“创建”, 进入创建页面后再点击最下方“创建网站和工作区”

在标题处输入栏目名称，URL名称处输入该栏目拼音简写即可。点击“创建”进入下一页面。模板选“空白网站（带页眉、页脚）”，然后“确定”。能够看到已建好党群工作子站点。

2、创建文档库
点击功效条中“文档和列表”，即可进行文档库创建。

在名称处输入该栏目下子栏目标名称，文档模板选默认“Microsoft Office Word 文档”。

建好后文档库以下：

3、在css文件中加入文档库风格修饰代码
Td.ListLeftTree_head

td.ListLeftTree_body

ms-pagetitle

（背景色）ms-navframe
(边框)ListLeftPanelBorder

TD.ms-selectednav

用FrontPage打开Css文件，在文件中加入以下代码，请依据上图对应部分名称修改对应风格。

TD.ms-unselectednav

{
border:0px solid #E1ECFC;
padding-top:1px;
padding-bottom:2px;
}
.ms-navline

{
display:none;
}
.ListLeftPanelBorder

{
border-color:"#0F86DA";
}
.ListLeftPanelLine

{
background-color:"#003399";
}
.ListLeftPanelBorderLine

{
background-color:#8fdaff;
}
#listtitlearea

{
display:none;
}

.ms-searchcorner

{
display:none;
}

#doclibleftsearch
{
display:inline!important;

}
#idSearchString

{
width:110;
}
.ListLeftTree_part

{
font-size:12px;
text-align:left;
width:100%;
}
a. ListLeftTree_row:visited

{
color:#003399;
font-size:12px;
}
a. ListLeftTree_row

{
color:#003399;
font-size:12px;
}
a. ListLeftTree_row:link

{
color:#003399;
font-size:12px;
}
a#onetidViewSelector

{
color:#003399;
font-size:12px;
}
a#diidPinToMyPage

{
color:#003399;
font-size:12px;
}
a#diidSubscribeButton

{
color:#003399;
font-size:12px;
}
a#diidCustomizeButton

{
color:#003399;
font-size:12px;
}
a#diidSlideShowButton

{
color:#003399;
font-size:12px;
}
a#diidFolderListButton

{
color:#003399;
font-size:12px;
}
td.ListLeftTree_row

{
background-position: center left;
background-image: url(dian2.gif);
BACKGROUND-REPEAT:no-repeat;
padding-left:9px;
height:20px;
}
.ms-descriptiontext

{
display:none;
}
.ms-navframe

{
background-color: #E3F3FF;
}
.ms-pagetitle

{
BACKGROUND-IMAGE: url('wendangku_07.jpg'); BACKGROUND-REPEAT: x-repeat;
background-position: center left 100%;
text-align :center;
vertical-align:"text-bottom";
font-family: "宋体";
font-size: 13px;
font-weight :bold;
height:24px;
color: #071685;
}
#L_SearchViewFont

{
text-align :left;
font-family: "宋体";
font-size: 14px;
font-weight :bold;
color: #009ace;
}
#search

{
background-color:#E3F3FF;
}
.ms-searchform

{
background-color:#E3F3FF;
}
#docliblefttitle

{
display:inline!important;
color:#003399;
font-size: 13px;
}
TD.ListLeftTree_head

{
BACKGROUND-IMAGE: url('wendangku_03.jpg'); BACKGROUND-REPEAT: x-repeat;
text-align :left;
font-family: "宋体";
font-size: 13px;
font-weight :bold;
color:#ffffff;
text-align:center;
letter-spacing:1px;
width:149px;
height:26px;

}
TD#L_SelectView

{
text-align :left;
vertical-align:"bottom";
height:19px;
font-weight :bold;
color: #009ace;
font-size: 13px;
}
#L_RelatedTasks

{
text-align :left;
vertical-align:"bottom";
height:19px;
font-size: 13px;
font-weight :bold;
color: #009ace;
}
TD.ms-selectednav

{
border:0px solid #003399;
background:#FDFAD5;
padding-top:1px;
padding-bottom:2px;
}

td.ListLeftTree_body
{
background-image: url('wendangku_05.jpg');
background-repeat:repeat;
width:149px;
text-align:center;
}

.ListLeftTree_part
{
width:149px
}
五、CMS
1、CMS频道创建和公布
（1）、创建频道
打开Site Manager 登录，进入登录界面
服务器端口号
CMS服务器地址

登录域
邮件帐号
口令

输入正确后，进入管理界面，以下图所表示

找到本单位频道 ，比如： 培训站点，鼠标右键单击，弹出菜单选择NEW Channel ，图所表示

在Name中填入频道名称，点击OK按钮即可。

选择Tools频道，选中右边两个页面文件：defaut和 summary，击鼠标右键后选“Copy”,再选中刚建立新频道，点击鼠标右键后选择”Paste”
注意：Locking Owner列假如不是everyone 则 该频道还未公布，以下图所表示。

（2）、公布频道
打开浏览器，在地址栏输入http://<cms server>/tools/) 注意前面<cms server>是CMS服务器所在IP，这里我们输入，点击页面左下角“编辑”，进入编辑模式，输入用户名和口令后进入编辑模式。（注意：公布时登录帐号要和创建频道帐号一致，不然看不到要公布页面）

形式：域\邮件帐号

点击编辑模式，进入下一页面，点击左下角“制作管理”，进入制作管理页面，以下图所表示。

点击上图中转到，进入下一页面，点击“同意”

以后再点击“制作管理”，然后点击“同意”，将文件全部公布完成。此时在Site Manager中刷新此频道，在此频道下default.htm和summary.htmlocking Owner应该为everyone。
2、首页新闻和CMS挂接
在浏览器中打开门户，点击功效条中“文档和列表”，打开EX_STATICPAGES_文档库，然后打开CMS文件夹，鼠标指向tzgg.htm，点击下拉箭头，在弹出菜单中点击“在 Microsoft Office Frontpage 中编辑”

打开文件后，将页面中示例新闻删除，图所表示

然后加入以下代码：
<iframe SCROLLING=no frameborder="0" name='view_WPQ_'
src=’_EX_CMSSERVER_/门户标识/栏目名称/summary.htm?MaxRecords=6&MaxWords=30' width='100%' >
</iframe>
如
<iframe SCROLLING=no frameborder="0"
name='view_WPQ_' src='_EX_CMSSERVER_/培训站点/通知公告/summary.htm?MaxRecords=6&MaxWords=20&hiddenEdit=1&noshowmore=true&showdate=true' width='100%' height=90></iframe>
隐藏编辑模式 &hiddenedit=1
隐藏更多 &noshowmore=true
3、修改新闻频道细览页页眉页脚
（1）、创建新闻频道页眉
用FrontPage打开美工Coding好新闻细览页面选择页眉所在部分代码，拷贝下来。

、Site Manager ,登录后选中本单位所在频道，单击鼠标右键，在弹出菜单中点击“Properties”

在Properties页面中点击右上侧“Custom”进入下一页面，点击左下角“New”按钮，弹出新建页面，在此页面中填写以下：
Property Name中填入 ChannelHead
Property Type选择 TEXT
Current Text Value中输入刚才拷贝代码（注意：请将图片所在路径更更正确），再将一下定义细览页风格代码拷贝到最上面，代码以下：
<style>
table {
font-family: "宋体";
font-size: 12px;
color: #000000;
}
.cmstext {
font-family: "宋体";
font-size: 12px;
line-height: 160%;
}

.cmstitle {
font-family: "宋体";
font-size: 14px;
line-height: 160%;
font-weight: bold;
}
.ms-main{width:660;}
.ms-content{background-image: url("");
}
.ms-contentLeft{width=50}
.ms-contentRight{width=50}
.yejiao{ font-family: "宋体"; font-size: 12px; color: #ffffff;}
a.yejiao:link { font-family: "宋体"; font-size: 12px; color: #ffffff; text-decoration: none;}
a.yejiao:visited { font-family: "宋体"; font-size: 12px; color: #ffffff; text-decoration: none;}
a.yejiao:hover { font-family: "宋体"; font-size: 12px; color:# ffffff; text-decoration: underline;}

</style>
CMSTEXT 定义正文字体风格
CMSTITLE 定义标题字体风格
MS-Content 定义正文区域背景图