网站群知识库辅导材料第一期.docx
《网站群知识库辅导材料第一期.docx》由会员分享，可在线阅读，更多相关《网站群知识库辅导材料第一期.docx（27页珍藏版）》请在冰豆网上搜索。
网站群知识库辅导材料第一期
网站群知识库辅导材料
第1期
中国科学院网站群技术部编印
二○一一年四月一日发布
前言
院网站群上线运行一年有余，网站群系统已趋于稳定。
这与各单位的支持是分不开的。
在此，向各单位工作在网站系统维护一线的同事们致以诚挚的谢意。
在网站日常运维支持中，我们也对网站群后台的日常操作，模板制作，资源库、图片库和视频库的建设积累了一定的经验，并将通用的问题进行收集并分类整理，以知识库辅导材料的形式，定期发送给各位同事参考，共同促进网站群持续发展。
本期内容主要为网站群后台中进行图片操作的相关辅导材料（在标题后添加的号码为网站群支持平台中相关帖子的编号，便于查找）。
如有不足之处，请各位同事批评指正！
编者
目录
前言2
1、如何在文章中添加/修改图片（221）4
2、英文稿件中含图片稿件的编辑方法（5404）5
3、编辑文档时如何实现文字环绕图片的效果8
4、解决文章中图片宽度过大，可能会把页面撑开的问题9
5、如何将文章正文中的图片提取为图片附件（3006）11
6、网站首页图片新闻里的图片不显示的几种常见情况分析及解决方法（5166）11
7、图片添加热点链接方法（1596）12
8、文章图片添加资源库链接方法（420）15
9、用户如何从网站群后台获取文档已上传的图片及文件附件（785）18
10、修改模板中所用的图片、样式、附件操作方法（289）19
11、子站首页版头图片更新方法（432）20
12、如何在文字库制作模板获取图片库的图片（1597）23
13、关于某些栏目在首页显示logo的功能实现（如专题显示专题图标）（294）24
14、首页图片新闻显示错乱问题的分析与解决（以flash方式显示图片新闻）（4845）25
15、建立有特点的新专题、栏目等模版时对图片的命名的建议（2804）26
16、如何实现首页取第一个带图片的新闻，其余文档按时间顺序显示标题列表（1614）27
17、网站首页添加new图标的方法与素材（5009）27
1、如何在文章中添加/修改图片（221）
首先找到您的文章（例：
紫金山天文台People里的CASMEMBER）里的第一篇文章
打开后看到此文章内容
比如您要修改TANLU这个人的图片单击图片然后删除删除后单击最上面的插入图片按钮
单击后选择您要上传的图片点上传就可以了最后调整下大小就OK！
2、英文稿件中含图片稿件的编辑方法（5404）
英文网站对稿件中的图片有如下的要求（详见中国科学院网站群英文网站信息编辑规范）
1.上Events的稿件必须配有图片（文中图片最多两张）。
2.InternationalCooperationNews以及ScienceandTechnology（ResearchProgress）并不要求必须配图。
3.如须配发图片，图片须有文字说明，文字说明分两部分，第一部分应说明图片的内容，第二部分为图片的来源，即版权所属机构或个人。
如：
（Picture/IHEP）（PicturebyXUJia）
注意：
不能使用网址或论文名称作为版权出处。
如：
Citedfromthepaper
下面就介绍一下，如何在文章正文中对图片进行插入与编辑及排版。
1）信息员正常将文章内容贴入到后台编辑器中。
2）绘制在插入图片处绘制一个两行一列的表格。
3）在第一行中插入相应的图片（可以为本地图片，也可以为图片库图片），第二行插入图片注释。
4）将图片和注释插入到，将表格调整到与图片等大小适当，点右键，进一步调整表格属性。
5）将表格边框设为0，并选择表格对齐方式，确定。
6）调整后，后台的显示效果。
7）前台显示效果。
3、编辑文档时如何实现文字环绕图片的效果
为了使网页页面不至于太呆板，如何实现文字环绕图片的编辑，双击图片编辑对齐方式即可文字环绕：
保存后图片即可居右文字环绕：
4、解决文章中图片宽度过大，可能会把页面撑开的问题
有些研究所提供的图片宽度过大，可能会把页面撑开，很多解决办法都是通过css样式来控制的，这种方式存在bug（图片可能变得很小）
只有刷新才能回复正常，建议改成通过js控制：
//图片按比例缩放
varflag=false;
functionDrawImage（ImgD,iwidth,iheight）{
//参数（图片,允许的宽度,允许的高度）
varimage=newImage（）;
image.src=ImgD.src;
if（image.width>0&&image.height>0）{
flag=true;
if（image.width/image.height>=iwidth/iheight）{
if（image.width>iwidth）{
ImgD.width=iwidth;
ImgD.height=（image.height*iwidth）/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if（image.height>iheight）{
ImgD.height=iheight;
ImgD.width=（image.width*iheight）/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//zoom内的图片按比例缩放
vardiv=document.getElementById（"zoom"）;
varnodes=div.childNodes;
varsLen=div.childNodes.length;
varobj;
for（vari=0;iobj=nodes[i];
if（obj.tagName=="CENTER"）{
varimgNodes=obj.childNodes;
variLen=imgNodes.length;
varimg;
for（varj=0;jif（imgNodes[j].tagName=="IMG"）{
img=imgNodes[j];
DrawImage（img,700,700）;
}
}
}
}
5、如何将文章正文中的图片提取为图片附件（3006）
网站首页或者栏目概览页需要显示图片时，需要在文档的附件管理里上传图片。
为了在文档中显示图片，在首页也显示图片，需要将一张图片上传2次，为了解决操作繁琐问题，现在系统已经实现了将正文中的图片一键提取到附件管理中的功能。
操作方法如下图所示：
6、首页图片新闻中图片不显示的常见情况分析及解决方法（5166）
情况一、附件中没有上传图片
如果网站首页新闻图片没有显示，首先要去网站群后台查看，附件中是否已上传了图片。
上传后的效果如图：
若没些图片标识，说明未在附件中添加图片，用户可以通过附件上传方式上传附件图片，或者直接将文章正文中的图片点击右键，提取为图片附件。
情况二、如果是在FLASH（大多是网站首页的滚动图片新闻）中显示，请确认图片格式是否为JPG的
注意：
FLASH是不支持.BMP格式的图片的，最好使用.JPG的
情况三、在站点的相应首页模板中未写upload="true"这个属性
如果均不属于上述两种情况，请用户确认首页模板中是否写了upload=”true”这个属性
WHERE="wcmchnldoc.AttachPic=1">
pic.push（'upload="true">'）;
linka.push（''）;
text.push（'NUM="36">'）;
7、图片添加热点链接方法（1596）
各个所有自己的组织机构，需要在组织机构图上添加特点链接。
首先选择组织机构栏目，添加一篇新的文章。
单击此按钮把本所的组织机构图添加进来。
上传后切换到代码方法
看左下角单击代码
然后复制所有代码到DW里
找到SRC=“”把里面的路径粘贴到另一个地方（保存好），然后里面的路径选择本地的图片路径。
出现此图后，单击图片，单击下方是属性
就会看到热点模型
一般画热点用长方形。
单击长方形画好选择你要连接的栏目（比如科研中心）
这个时候科研中心就被框起来了，上面是热点的坐标不用管它，主要看下面，有个链接。
在连接里添加本所的发布后的地址就可以了（注意：
一定是发布的地址以本所域名开头的那种）。
比如科研中心的发布地址是：
就把这个路径粘贴进去
所有热点都做好后，复制所有的代码粘贴到文章里的代码部分
复制过去后千万别点保存。
找到它里面的路径src=””这个路径还是本地的路径。
需要更换成服务器的路径，服务器的路径就是开始保存的路径，粘贴回来就可以了。
最后保存，此图就是本所的带连接的组织机构图了。
8、文章图片添加资源库链接方法（420）
前言
各个所的历届所长都放置照片，并且要求照片链接到此人的详细页面
一首选这个需要修改照片连接的文章
单击文章看到此文章的内容
转换到代码方式，复制所有代码到DW里
选择要加链接的图片
选择后上方代码就会被选中，也就是说被选中的图片就是要加连接的图片。
然后在此代码的前后加超级链接标签。
并且在Href=””里面就写此人的详细页面链接地址。
此地址需要去资源库里查询
在WCM中文后台找到本所得资源库。
并且在资源库里找到此人
要保证要加链接的人的发布状态是已发的。
然后选中此人单击预览这条记录
预览后页面路径会是
这个时候我们需要修改此路径，目前路径是后台路径，需要修改成发布路径。
首先，删除？
后面的所有代码变成
然后修改前面代码把替换为
最后的路径为
然后把此路径粘贴到地址栏里看看能不能访问。
能访问后把此路径粘贴到刚才DW里的HREF里
最后复制所有代码粘贴到文章代码里保存并发布即可。
9、如何从网站群后台获取文档已上传的图片及文件附件（785）
在新建文档时，如果上传了图片或文件附件，在前台发布的页面上可以使用置标置标将附件取出。
而在后台编辑时，如果这篇文档还未发布，管理员想查看或者下载已上传的图片或文件附件，可以通过这样的方式：
2009-10-108-50-54.jpg（33.02K）
10/10/20098:
56:
51AM
点击对应文档的IE样式图标后会打开下面的页面
10、修改模板中所用的图片、样式、附件操作方法（289）
网站页面上的图片和附件分两种，一种情况是原设计页面自带的，包括logo图、按钮图标、flash动画、css样式等文件，这些文件在上传模板时系统自动保存在站点下的images文件内，要修改这些文件需要把使用了该文件的模板（也就是页面对应栏目使用的模板）导出，导出模板后，这些文件也会一同被导出，修改后再导入模板，就实现了附件的更新；另一种情况是图片和附件是用置标取出的，因为置标取出的是文档的内容，直接修改相关文档的内容即可。
下面针对第一种情况如何操作做一下示例：
步骤一：
步骤二：
步骤三：
步骤四：
11、子站首页版头图片更新方法（432）
替换头部图片前，首先要知道头部图片的文件名，所以要把头模板导出。
1.导出头模板
查看头部嵌套模板名称如下。
点中站点在右下点开首页模板
在首页模板里找到一段TRS_TEMPLATE的置标。
TempName就是头模板的名称。
然后在站点下找到头模板。
选中头模板后导出这个模板。
第一次登陆当点导出模板后浏览器可能会弹出拦截。
点下载文件重新选择一次首页模板导出。
2.替换图片
修改导出导出后解压导出的文件会有2个文件夹和1个文件。
在site站点号的文件夹里会看到头部的图片。
找到后并替换该图片（替换前最好对图片继续备份）。
然后再把导出的文件压缩成一个zip包。
打开压缩页面压缩文件格式选择zip后点确定，
3.导入模板zip包
到wcm后台点中站点—模板—导入模板。
4.同步模板附件
导入完成后再点导入模板下面的三角，同步所有模板附件。
同步完模板附件后图片导入成功。
可以再外网看到新导入的图片了。
12、如何在文字库制作模板获取图片库的图片（1597）
图片库和文字库是两个不同的体制，但是他们同属于一个wcm服务器下。
所以要想在文字库里获取图片库的图片，就必须跨站点，而垮了站点就必然要有一个标示，这个就是channelid，也就是栏目ID，因为栏目ID在同个wcm服务器下市唯一的，我们可以很好的利用这一点，做到如题的目的。
代码
代码详解
ID=“channeled:
49351”是图片库下栏目的id号
TRS_DOCUMENTS说明在图片库里和文字库是一样的，图片记录和文档对置标是一样的
Trs_image是取出图片库图片的关键置标。
写法是不变的。
请参考图一代码。
13、关于某些栏目或专题在首页显示logo的功能实现（294）
一些时效性的栏目需要在首页上显示LOGO图+栏目名称，如专题栏目，如何实现此功能？
5.jpg（18.65K）
9/9/20095:
49:
35PM
答：
点击相应栏目，点击页面最右边栏目操作任务下方的箭头（更多操作），点击管理LOGO上传栏目的logo，发布首页就可以了
6.jpg（32.48K）
9/9/20095:
49:
35PM
9/9/20095:
49:
35PM
首页调用栏目logo的代码可以参考如下（取专题栏目下的前3个专题的logo及栏目名称）：
"width="100"height="46"style="border:
1pxsolid#999999">
|
|
14、首页图片新闻显示错乱问题的分析与解决（4845）
有些所图片新闻会显示错乱，如图，
如果出现以上问题，首先查找最新的图片新闻标题中是不是有引号，而这个引号恰好是拿英文输出的，如果是，先将引号改成中文格式下的输出。
一般情况下，这个问题就会解决。
如果确认确实不是文章标题中引号的问题（即无引号或者引号是在中文格式下输出的），可以查看是不是给标题加了相应的颜色，如果是，可在模板的相应位置添加属性（autocolor="false"）来解决此问题。
pic.push（''）;
linka.push（''）;
text.push（''）;
15、建立新专题、栏目等模版时对图片命名的建议（2804）
内容管理平台对除首页外的文件（css,图片等）现在采取的保存方式是全部放在images目录下，如果两个模版使用了同一个名称的图片，那么当做模版附件同步操作后，图片会被覆盖。
一个网站整体的风格是统一的，图片在不同网页会重复的使用，一般不会有什么问题，但是当建立比较独立有特点的专题时，问题会暴露出来，如：
一个专题头部的图片通常会被命名为banner或者logo,如果两个不同的专题的图片都被命名为banner或者logo,就会出现2个专题出现了同样的头部图片，这显然是错误，为了解决文件互相覆盖的问题，给做模版的同志提出文件命名的建议，特殊专题或者页面中所使用的图片、css文件都为其加上前缀，如2010年清明节专题的头部banner图片，可以命名为2010qm_banner.jpg，其他图片可以命名遵循"2010qm_**.jpg"这种规则，这样可以保证个性化的模版图片不被覆盖。
16、首页取第一个带图片的新闻，其余文档按时间顺序显示标题列表（1614）
前言：
在首页上面，显示完带图片的新闻后，剩余的新闻按时间顺序显示，又不想重复出现已经显示过的带图片的新闻标题
主题：
对于“前言”中提出的页面显示情况，用如下方法可以解决
第一步，先找到对应的栏目
第二步，在此栏目下，建立两个子栏目
第一个栏目用于存放带图片的新闻文档
第二个栏目用于存放不带图片的新闻文档
第三步，此栏目用于存放所需要的所有新闻文档，然后将带图片的新闻文档镜像型引用到第一个栏目，将不带图片的新闻文档镜像型引用到第二个栏目
第四步，在首页，需要显示图片的部分，就用置标获取对应栏目的第一个子栏目内的文档，需要显示新闻标题的部分，就用置标获取对应栏目的第二个子栏目内的文档
在对应栏目的概览页面里，用置标获取此栏目的文档就可以了
17、网站首页添加new图标的方法与素材（5009）
部分网站都添加了new图标，效果如图
根据这种需求，整理了如何在首页添加NEW图标的方法供各位老师参考使用。
首先，整理了部分NEW图标图片，
，用户可以根据页面情况，选择适合的图标。
其次，将相应的上传模板已提供，用户只需要使图标名称与模板中图片的名称一致即可。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
无标题文档