网站群知识库辅导材料第一期.docx

1、网站群知识库辅导材料第一期网站群知识库辅导材料第1期中国科学院网站群技术部编印二一一年四月一日发布前言院网站群上线运行一年有余，网站群系统已趋于稳定。这与各单位的支持是分不开的。在此，向各单位工作在网站系统维护一线的同事们致以诚挚的谢意。在网站日常运维支持中，我们也对网站群后台的日常操作，模板制作，资源库、图片库和视频库的建设积累了一定的经验，并将通用的问题进行收集并分类整理，以知识库辅导材料的形式，定期发送给各位同事参考，共同促进网站群持续发展。本期内容主要为网站群后台中进行图片操作的相关辅导材料（在标题后添加的号码为网站群支持平台中相关帖子的编号，便于查找）。如有不足之处，请各位同事批评指

2、正！ 编 者目 录前言 21、如何在文章中添加/修改图片（221） 42、英文稿件中含图片稿件的编辑方法（5404） 53、编辑文档时如何实现文字环绕图片的效果 84、解决文章中图片宽度过大，可能会把页面撑开的问题 95、如何将文章正文中的图片提取为图片附件（3006） 116、网站首页图片新闻里的图片不显示的几种常见情况分析及解决方法（5166） 117、图片添加热点链接方法（1596） 128、文章图片添加资源库链接方法（420） 159、用户如何从网站群后台获取文档已上传的图片及文件附件（785） 1810、修改模板中所用的图片、样式、附件操作方法（289） 1911、子站首页版头图片更

3、新方法（432） 2012、如何在文字库制作模板获取图片库的图片（1597） 2313、关于某些栏目在首页显示logo的功能实现（如专题显示专题图标）（294） 2414、首页图片新闻显示错乱问题的分析与解决（以flash方式显示图片新闻）（4845） 2515、建立有特点的新专题、栏目等模版时对图片的命名的建议（2804） 2616、如何实现首页取第一个带图片的新闻，其余文档按时间顺序显示标题列表（1614） 2717、网站首页添加new图标的方法与素材（5009） 271、如何在文章中添加/修改图片（221）首先找到您的文章（例：紫金山天文台People里的CAS MEMBER）里的第一篇

4、文章打开后看到此文章内容比如您要修改TAN LU这个人的图片 单击图片 然后删除 删除后单击最上面的插入图片按钮单击后选择您要上传的图片 点上传就可以了最后调整下大小就OK！ 2、英文稿件中含图片稿件的编辑方法（5404）英文网站对稿件中的图片有如下的要求（详见中国科学院网站群英文网站信息编辑规范）1. 上Events的稿件必须配有图片（文中图片最多两张）。 2. International Cooperation News以及Science and Technology (Research Progress)并不要求必须配图。 3. 如须配发图片，图片须有文字说明，文字说明分两部分，第一部分

5、应说明图片的内容，第二部分为图片的来源，即版权所属机构或个人。如：(Picture/IHEP) （Picture by XU Jia） 注意：不能使用网址或论文名称作为版权出处。如：Cited from the paper 下面就介绍一下，如何在文章正文中对图片进行插入与编辑及排版。1）信息员正常将文章内容贴入到后台编辑器中。2）绘制在插入图片处绘制一个两行一列的表格。3）在第一行中插入相应的图片（可以为本地图片，也可以为图片库图片），第二行插入图片注释。4）将图片和注释插入到，将表格调整到与图片等大小适当，点右键，进一步调整表格属性。5）将表格边框设为0，并选择表格对齐方式，确定。6）调整后

6、，后台的显示效果。7）前台显示效果。3、编辑文档时如何实现文字环绕图片的效果为了使网页页面不至于太呆板，如何实现文字环绕图片的编辑，双击图片编辑对齐方式即可文字环绕：保存后图片即可居右文字环绕：4、解决文章中图片宽度过大，可能会把页面撑开的问题有些研究所提供的图片宽度过大，可能会把页面撑开，很多解决办法都是通过css样式来控制的，这种方式存在bug（图片可能变得很小）只有刷新才能回复正常，建议改成通过js控制：/图片按比例缩放var flag=false;function DrawImage(ImgD,iwidth,iheight) /参数(图片,允许的宽度,允许的高度) var image=

7、new Image(); image.src=ImgD.src; if(image.width0 & image.height0) flag=true; if(image.width/image.height= iwidth/iheight) if(image.widthiwidth) 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;

8、else if(image.heightiheight) 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内的图片按比例缩放var div = document.getElementById(zoom);var nodes = div.childNodes;var sLen = div.childNodes.length

9、;var obj;for(var i=0;isLen;i+) obj = nodesi; if(obj.tagName=CENTER) var imgNodes = obj.childNodes; var iLen = imgNodes.length; var img; for(var j=0;jiLen;j+) if(imgNodesj.tagName=IMG) img = imgNodesj; DrawImage(img,700,700); 5、如何将文章正文中的图片提取为图片附件（3006）网站首页或者栏目概览页需要显示图片时，需要在文档的附件管理里上传图片。为了在文档中显示图片，在首页

10、也显示图片，需要将一张图片上传2次，为了解决操作繁琐问题，现在系统已经实现了将正文中的图片一键提取到附件管理中的功能。操作方法如下图所示：6、首页图片新闻中图片不显示的常见情况分析及解决方法（5166）情况一、附件中没有上传图片如果网站首页新闻图片没有显示，首先要去网站群后台查看，附件中是否已上传了图片。上传后的效果如图：若没些图片标识，说明未在附件中添加图片，用户可以通过附件上传方式上传附件图片，或者直接将文章正文中的图片点击右键，提取为图片附件。情况二、如果是在FLASH（大多是网站首页的滚动图片新闻）中显示，请确认图片格式是否为JPG的注意：FLASH是不支持.BMP格式的图片的，最好使

11、用.JPG的情况三、在站点的相应首页模板中未写upload=true这个属性如果均不属于上述两种情况，请用户确认首页模板中是否写了upload=”true”这个属性 pic.push(); linka.push(); text.push(); 7、图片添加热点链接方法（1596）各个所有自己的组织机构，需要在组织机构图上添加特点链接。首先选择组织机构栏目，添加一篇新的文章。单击此按钮 把本所的组织机构图添加进来。上传后 切换到代码方法看左下角 单击代码然后复制所有代码到DW里找到SRC =“” 把里面的路径粘贴到另一个地方（保存好），然后里面的路径选择本地的图片路径。出现此图后，单击图片，单击

12、下方是属性就会看到热点模型一般画热点用长方形。单击长方形画好选择你要连接的栏目（比如科研中心）这个时候科研中心就被框起来了，上面是热点的坐标不用管它，主要看下面，有个链接。在连接里添加本所的发布后的地址就可以了（注意：一定是发布的地址以本所域名开头的那种）。比如科研中心的发布地址是：就把这个路径粘贴进去所有热点都做好后，复制所有的代码粘贴到文章里的代码部分复制过去后 千万别点保存。找到它里面的路径src=”这个路径还是本地的路径。需要更换成服务器的路径，服务器的路径就是开始保存的路径，粘贴回来就可以了。最后保存，此图就是本所的带连接的组织机构图了。8、文章图片添加资源库链接方法（420）前言

13、各个所的历届所长 都放置照片，并且要求照片链接到此人的详细页面一 首选这个需要修改照片连接的文章单击文章 看到此文章的内容转换到代码方式，复制所有代码到DW里选择要加链接的图片选择后上方代码就会被选中，也就是说被选中的图片就是要加连接的图片。然后在此代码的前后加超级链接标签。并且在img 里写上 border=”0” 表示图片边框为0Href=”里面就写此人的详细页面链接地址。此地址需要去资源库里查询在WCM中文后台找到本所得资源库。并且在资源库里找到此人要保证要加链接的人的发布状态是已发的。然后选中此人 单击预览这条记录预览后 页面路径会是这个时候我们需要修改此路径，目前路径是后台路径，需要

14、修改成发布路径。首先，删除？后面的所有代码变成然后修改前面代码把 替换为 最后的路径为然后把此路径粘贴到地址栏里看看能不能访问。能访问后把此路径粘贴到刚才DW里的HREF里最后复制所有代码粘贴到文章代码里保存并发布即可。9、如何从网站群后台获取文档已上传的图片及文件附件（785）在新建文档时，如果上传了图片或文件附件，在前台发布的页面上可以使用置标置标将附件取出。而在后台编辑时，如果这篇文档还未发布，管理员想查看或者下载已上传的图片或文件附件，可以通过这样的方式：2009-10-10 8-50-54.jpg (33.02 K)10/10/2009 8:56:51 AM点击对应文档的IE样式图标

15、后会打开下面的页面10、修改模板中所用的图片、样式、附件操作方法（289）网站页面上的图片和附件分两种，一种情况是原设计页面自带的，包括logo图、按钮图标、flash动画、css样式等文件，这些文件在上传模板时系统自动保存在站点下的images文件内，要修改这些文件需要把使用了该文件的模板(也就是页面对应栏目使用的模板)导出，导出模板后，这些文件也会一同被导出，修改后再导入模板，就实现了附件的更新；另一种情况是图片和附件是用置标取出的，因为置标取出的是文档的内容，直接修改相关文档的内容即可。下面针对第一种情况如何操作做一下示例：步骤一：步骤二：步骤三：步骤四：11、子站首页版头图片更新方法（

16、432）替换头部图片前，首先要知道头部图片的文件名，所以要把头模板导出。1.导出头模板查看头部嵌套模板名称如下。点中站点在右下点开首页模板在首页模板里找到一段TRS_TEMPLATE 的置标。TempName就是头模板的名称。然后在站点下找到头模板。选中头模板后导出这个模板。第一次登陆当点导出模板后浏览器可能会弹出拦截。点下载文件重新选择一次首页模板导出。2.替换图片 修改导出导出后解压导出的文件会有2个文件夹和1个文件。在site站点号 的文件夹里会看到头部的图片。找到后并替换该图片（替换前最好对图片继续备份）。然后再把导出的文件压缩成一个zip包。打开压缩页面压缩文件格式选择zip后点确定

17、，3.导入模板zip包到wcm后台 点中站点模板导入模板。 4.同步模板附件导入完成后再点导入模板下面的三角，同步所有模板附件。同步完模板附件后图片导入成功。可以再外网看到新导入的图片了。12、如何在文字库制作模板获取图片库的图片（1597）图片库和文字库是两个不同的体制，但是他们同属于一个wcm服务器下。所以要想在文字库里获取图片库的图片，就必须跨站点，而垮了站点就必然要有一个标示，这个就是channelid，也就是栏目ID，因为栏目ID在同个wcm服务器下市唯一的，我们可以很好的利用这一点，做到如题的目的。代码代码详解ID=“channeled:49351”是图片库下栏目的id号TRS_D

18、OCUMENTS 说明在图片库里和文字库是一样的，图片记录和文档对置标是一样的Trs_image是取出图片库图片的关键置标。写法是不变的。请参考图一代码。13、关于某些栏目或专题在首页显示logo的功能实现（294）一些时效性的栏目需要在首页上显示LOGO图+栏目名称，如专题栏目，如何实现此功能？5.jpg (18.65 K)9/9/2009 5:49:35 PM答：点击相应栏目，点击页面最右边栏目操作任务下方的箭头（更多操作），点击管理LOGO上传栏目的logo，发布首页就可以了6.jpg (32.48 K)9/9/2009 5:49:35 PM9/9/2009 5:49:35 PM首页调用

19、栏目logo的代码可以参考如下（取专题栏目下的前3个专题的logo及栏目名称）：img src= width=100 height=46 style= border: 1px solid #999999 14、首页图片新闻显示错乱问题的分析与解决（4845）有些所图片新闻会显示错乱，如图，如果出现以上问题，首先查找最新的图片新闻标题中是不是有引号，而这个引号恰好是拿英文输出的，如果是，先将引号改成中文格式下的输出。一般情况下，这个问题就会解决。如果确认确实不是文章标题中引号的问题（即无引号或者引号是在中文格式下输出的），可以查看是不是给标题加了相应的颜色，如果是，可在模板的相应位置添加属性（a

20、utocolor=false）来解决此问题。 pic.push(); linka.push(); text.push(); 15、建立新专题、栏目等模版时对图片命名的建议（2804）内容管理平台对除首页外的文件（css,图片等）现在采取的保存方式是全部放在images目录下，如果两个模版使用了同一个名称的图片，那么当做模版附件同步操作后，图片会被覆盖。一个网站整体的风格是统一的，图片在不同网页会重复的使用，一般不会有什么问题，但是当建立比较独立有特点的专题时，问题会暴露出来，如：一个专题头部的图片通常会被命名为banner或者logo,如果两个不同的专题的图片都被命名为banner或者logo

21、,就会出现2个专题出现了同样的头部图片，这显然是错误，为了解决文件互相覆盖的问题，给做模版的同志提出文件命名的建议，特殊专题或者页面中所使用的图片、css文件都为其加上前缀，如2010年清明节专题的头部banner图片，可以命名为2010qm_banner.jpg，其他图片可以命名遵循2010qm_*.jpg这种规则，这样可以保证个性化的模版图片不被覆盖。 16、首页取第一个带图片的新闻，其余文档按时间顺序显示标题列表（1614）前言： 在首页上面，显示完带图片的新闻后，剩余的新闻按时间顺序显示，又不想重复出现已经显示过的带图片的新闻标题主题： 对于“前言”中提出的页面显示情况，用如下方法可以

22、解决 第一步，先找到对应的栏目 第二步，在此栏目下，建立两个子栏目 第一个栏目用于存放带图片的新闻文档 第二个栏目用于存放不带图片的新闻文档第三步，此栏目用于存放所需要的所有新闻文档，然后将带图片的新闻文档镜像型引用到第一个栏目，将不带图片的新闻文档镜像型引用到第二个栏目第四步，在首页，需要显示图片的部分，就用置标获取对应栏目的第一个子栏目内的文档，需要显示新闻标题的部分，就用置标获取对应栏目的第二个子栏目内的文档在对应栏目的概览页面里，用置标获取此栏目的文档就可以了17、网站首页添加new图标的方法与素材（5009）部分网站都添加了new图标，效果如图根据这种需求，整理了如何在首页添加NEW图标的方法供各位老师参考使用。首先，整理了部分NEW图标图片，用户可以根据页面情况，选择适合的图标。其次，将相应的上传模板已提供，用户只需要使图标名称与模板中图片的名称一致即可。无标题文档三、将上传模板与图片压缩成zip包，通过模板上传方式上传。四、在首页模板中需要添加new图标处，添加相应代码 文档标题 2007-07-24 /t