[置顶] 实习项目总结
国家海洋局南海分局项目
1.顶部和头部要分开来写再嵌进各页面中，对于其背景图片比浏览器的可视窗口还要宽的时候，背景图片样式设置时，需要设置其高度，不用设置宽度，background:url() no-repeat center top;
<iframe width="100%" height="100%" src="<CMSPRO_CHANNEL CODE='top' FIELD='url'></CMSPRO_CHANNEL>" frameborder="0" scrolling="no" allowtransparency="true"></iframe>2.清除浮动的方法一：clear:both;
方法二：overflow:hidden;(外部盒子无高度宽度时，里面是浮动元素当这样设置外部盒子才会被撑开）
3.分页效果（page.js、page.css)
<div class="pagediv" id="page_div">
<span class="arrow"><a href="pic_list.shtml">首页</a></span>
<span class="arrow index_num">1</span>
<span class="arrow"<a href="pic_list_2.shtml">2</a></span>
<span class="arrow"><a href="pic_list_2.shtml">下一页</a></span>
<span class="arrow"><a href="pic_list_2.shtml">末页</a></span>
<span class="pagination_index_last">第 1 页 转<input id="pagination_input" name="pagination_input">页<a onclick="pagination_go('pic_list','shtml','2')" href="#">GO</a>共 5 条 共 2 页</span>
</div><!--pagediv结束-->4.背景比较复杂时，可以在内部多嵌几个标签分别设置背景进行相互覆盖。
5.切设计稿的图片时可以相应设置图片背景的透明度，关闭可视设置
6导航背景图片是渐变背景图片时，若导航文字过长时，可将背景用颜色来表示，对于标签的宽高尽量不要设计，设置相应的padding值，让其自由撑开。
7当栏目为图片logo时记住使用栏目logo的插件
<a href="<CMSPRO_CHANNEL CODE='' FIELD='url'></CMSPRO_CHANNEL>" class="Icon"><img src="<CMSPRO_CHANNEL CODE='' LOGOINDEX='0'>栏目标题</CMSPRO_CHANNEL>" /></a>8、首页头部和列表页头部、内容页面头部背景图片不一样时用js控制
<script language="javascript"> function QueryString(qs) { var s = location.href; s = s.replace("?","?&").split("&"); var re = ""; for(i=1;i<s.length;i++) if(s[i].indexOf(qs+"=")==0) re = s[i].replace(qs+"=",""); return re; } p=QueryString("link"); if(p=="index"){ document.getElementById('top').style.backgroundImage = "url(../xhtml/images/top_index.jpg)"; //更换头部背景图片 } </script>9.手动录入稿件时习惯使用一键排版
，保证稿件内容排版与当前网站风格一致
10.切图注意事项
1)网页格式的图片既要以清晰美观为主，同时要兼顾浏览下载速度快的效果。是以尽量采用大的色块图。
2)模板切割时，以文字 + 样式 为主。
3)禁用大幅的图片背景。
4)辅助布局和线条类的图效以css的样式描述为主。
5)按钮类的图片以gif格式为主。
6)图片优先选择jpg格式。
广州市协作办公室
1用ul li的时候 IE6 7会出现 比较多的间隙，这时候在ul里面加上overflow:hidden; zoom:1;
2做静态页面时最基本的是要测兼容性 最起码IE7以上要测
3在写信息列表(包括新闻标题和发布时间），注意将span标签设置为float:right的同时将span标签写在a标签前面，在IE7中才可以兼容
<li><span><CMSPRO_DOCUMENT FIELD=" publishedTime " DATEFORMAT="yyyy-MM-dd">发布时间</CMSPRO_DOCUMENT></span><CMSPRO_DOCUMENT FIELD="title" AUTOLINK="true" LINKALT="true" LINKALTTEXT=" " NUM="42" TRUNCATEDTIP="..."><a href="#">信息标题</a></CMSPRO_DOCUMENT></li>4、当前页面没有用到的js不要把其加载到该页面会消耗资源
5、加插件以后出现以下bug时，即对应栏目后台还没录稿件时出现的提示错误，可以加上下面一句<CMSPRO_NOTEXISTSDATA> </CMSPRO_NOTEXISTSDATA>没有稿件时读取为空
![[置顶] 实习项目总结_第1张图片](http://img.e-com-net.com/image/info5/e09fbb5370a84d8f8ca7c7faaefc21f3.png)
<ul>
<CMSPRO_DOCUMENTS DOCUMENTTYPE="0|1|2|3" NUM="4" STARTPOS="0" CHANNELCODE="tpxw">
<li><a href="<CMSPRO_DOCUMENT FIELD='url'></CMSPRO_DOCUMENT>" target="_blank"><CMSPRO_APPENDIXS MODE='IMG' STARTPOS='0' NUM='1'><img src='<CMSPRO_APPENDIX FIELD="path"></CMSPRO_APPENDIX>' /></CMSPRO_APPENDIXS></a><span class="txtbg"><CMSPRO_DOCUMENT FIELD="title" AUTOLINK="true" LINKALT="true" NUM="21" TRUNCATEDTIP="..." LINKEXTRA="class='txt'">标题</CMSPRO_DOCUMENT></span></li>
**<CMSPRO_NOTEXISTSDATA> </CMSPRO_NOTEXISTSDATA>**
</CMSPRO_DOCUMENTS>
</ul>6、内容页面中的上一篇下一篇设置，加上以下插件，并引进js文件
<ul>
<li>
<CMSPRO_DOCUMENTNAVIGATION TYPE="PREV">上篇 <CMSPRO_DOCUMENTNAVIGATION>
<CMSPRO_DOCUMENTNAVIGATION TYPE="NEXT">下篇 <CMSPRO_DOCUMENTNAVIGATION>
</li>
</ul>
引入js文件<!--<script src="js/page.js"></script>-->7、在写信息列表的时候假如标题是以两行来显示，发布时间跟在后面，这时候span标签不能设置为float:right(在IE7不兼容),此时span标签写在a标签后面，然后将span标签设置padding-left的值span{color:#999999;display:inline-block; padding-left: 6px;}
代码如下：
<ul><li><a href="#">稿件标题</a><span>发布时间</span></li></ul>8、要实现如图所示效果
<div class="home_jzfp">
<div class="hd">
<ul>
<li><a href="#">栏目标题</a></li>
<li><a href="#">栏目标题</a></li>
<li><a href="#">栏目标题</a></li>
<li><a href="#">栏目标题</a></li>
<li><a href="#">栏目标题</a></li>
</ul>
<span class="more">
<a href="<CMSPRO_CHANNEL CODE='jzfp' FIELD='url'></CMSPRO_CHANNEL>">+MORE</a>
<a href="<CMSPRO_CHANNEL CODE='zsyz' FIELD='url'></CMSPRO_CHANNEL>">+MORE</a>
<a href="<CMSPRO_CHANNEL CODE='zsjg' FIELD='url'></CMSPRO_CHANNEL>">+MORE</a>
<a href="<CMSPRO_CHANNEL CODE='dcyj' FIELD='url'></CMSPRO_CHANNEL>">+MORE</a>
<a href="<CMSPRO_CHANNEL CODE='shzc' FIELD='url'></CMSPRO_CHANNEL>">+MORE</a>
</span>
</div>
<div class="bd">
<ul><li><span>发布时间</span><a href="#">信息标题</a></li></ul>
<ul><li><span>发布时间</span><a href="#">信息标题</a></li></ul>
<ul><li><span>发布时间</span><a href="#">信息标题</a></li></ul>
<ul><li><span>发布时间</span><a href="#">信息标题</a></li></ul>
<ul><li><span>发布时间</span><a href="#">信息标题</a></li></ul>
</div>
</div><!--home_jzfp结束-->
<script id="jsID" type="text/javascript"> jQuery(".home_jzfp").slide({autoPlay:true,trigger:"mouseover",easing:"easeInQuint",delayTime:0}); /*更改属性时去当前网站调好然后拷贝过来*/ jQuery(".home_jzfp").slide({targetCell:".more a",delayTime:0,triggerTime:0}); </script>民政厅后台数据表单的静态模板制作
对于表格的宽度不要固定宽度直接用100%,同时第一行中的每一列设置宽度用百分数来表示，对于每一个td内加入有input标签则将input的宽设置为100%，注意colspan、rowspan属性的使用。若td内加入单选框则需要加入vertical-align:middle;属性设置使内容垂直居中。
广州财政局
头条的插件，只有1条稿件
<div class="singlePage">
<CMSPRO_DOCUMENTS NUM="1" DOCUMENTTYPE="0|1|2|3">
<CMSPRO_DOCUMENT FIELD="content">内容</CMSPRO_DOCUMENT>
</CMSPRO_DOCUMENTS>
<CMSPRO_DOCUMENTS DOCUMENTTYPE="0|1|2|3" NUM="1" STARTPOS="0" CHANNELCODE="">
<CMSPRO_DOCUMENT FIELD="content">内容</CMSPRO_DOCUMENT>
</CMSPRO_DOCUMENTS>
</div>2头部底部嵌进去
<iframe width="100%" height="100%" src="#" frameborder="0" allowtransparency="true"></iframe>3、解决IE10，IE9引用外部样式CSS不起作用，在IE10兼容性下，IE8，IE7又可以的兼容性问题
只有在html头让其用IE8方式进行渲染，在<head></head>之间添加：
<META http-equiv="X-UA-Compatible" content="IE=8" />4、注意h1~h6的默认样式有margin/padding，在写样式时应该去掉其中的外边距和内边距，margin:0px;padding:0px;
广州荔湾政府总结
1、飘窗效果可以参照广州荔湾政府首页
<!--飘窗-->
<script type="text/javascript" src="js/AdMove.js"></script>
<div id="pc1">
<div>
<a href="http://121.33.234.170:8802/"><img src="images/sypc.jpg" /></a>
</div>
</div>
<script type="text/javascript"> var ad1 = new AdMove("pc1", true); ad1.Run(); </script>
<!--飘窗 end-->2、底板的信息以通过获取稿件内容来读出
3、搜索部分代码如下：
<div class="searchBox">
<input id="keyword" name="keyword" type="text" value="" class="SearchTxt"/>
<input type="button" value="" class="SearchBtn" onClick="search()"/>
<script> function search(){ var url="" url='http://www.lw.gov.cn/sofpro/search/search.jsp?keyword='; key=encodeURI(document.getElementById('keyword').value); //把字符串作为 URI 进行编码 window.open(url+key); } </script>
</div>4、换肤操作可参考荔湾政府
5、获取当前日期时间星期几可参考广州市食品药品智慧监管云平台
<script type="text/javascript"> function showLocale(objD) { var str,colorhead,colorfoot; var yy = objD.getYear(); if(yy<1900) yy = yy+1900; var MM = objD.getMonth()+1; if(MM<10) MM = '0' + MM; var dd = objD.getDate(); if(dd<10) dd = '0' + dd; var hh = objD.getHours(); if(hh<10) hh = '0' + hh; var mm = objD.getMinutes(); if(mm<10) mm = '0' + mm; var ss = objD.getSeconds(); if(ss<10) ss = '0' + ss; var ww = objD.getDay(); if ( ww==0 ) colorhead="<font color=\"#FF0000\">"; if ( ww > 0 && ww < 6 ) colorhead="<font class=\"datecolor\">"; if ( ww==6 ) colorhead="<font color=\"#008000\">"; if (ww==0) ww="星期日"; if (ww==1) ww="星期一"; if (ww==2) ww="星期二"; if (ww==3) ww="星期三"; if (ww==4) ww="星期四"; if (ww==5) ww="星期五"; if (ww==6) ww="星期六"; colorfoot="</font>" str = colorhead + yy + "年" + MM + "月" + dd + "日" + " " + ww + colorfoot + " 在线时间：" + hh + ":" + mm + ":" + ss; return(str); } function tick() { var today; today = new Date(); document.getElementById("localtime").innerHTML = showLocale(today); window.setTimeout("tick()", 1000); } tick(); </script>
广州荔湾政府运维
1、修改了哪个模板就上传哪个，选择要上传的根目录，不要把整个文件夹进行上传，这样会消耗大量资源
2、修改栏目显示顺序就把对应栏目的稿件的排序更改
3、要在后台平台中搜索一条稿件，需要将平台切换成运维视图，选择“稿件”，输入要搜索稿件标题即可，搜索栏目同理，如下图：
4、Flash图片新闻，参考荔湾区环保局的首页相关代码
5、使用<marquee></marquee>标签实现消息滚动效果，参考区直属机关党工委站点
广州开发区科技创新和知识产权局
1、后台录稿件时注意使用IE浏览器才可以使用常规黏贴
稿件正文部分上传附件时不支持docx格式，应该用wps将其转换成doc格式再进行上传
广州开发区机关单位站点
1、在新版平台上，上传模板时先要建立模板组，在网站管理-模板组管理那里，对应站点下新建模板组，填写序号，模板组名称可任意，路径要与站点代号一致，一定要是英文，同时上传的模板文件夹命名与站点代号一致，是否共享，是否显示一律选是
2、解决IE浏览器的透明度兼容性问题
.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;} filter:alpha(opacity=50); //This is for IE
广州市番禺职业技术学院的项目
1、注意在旧平台中模板打包上传后还需要一个个新增进去才可以发布
2、注意ul,h2,p的默认padding,marggin值;注意在IE浏览器中td的align值默认为center,在其他；浏览器默认为left;
3、注意更改稿件排序的时候，后台随时拖动一个稿件的顺序按下保存排序才起效
4、注意栏目头条的应用
<CMSPRO_DOCUMENTS DOCUMENTTYPE="0|1|2|3" NUM="1" STARTPOS="0" CHANNELCODE="">
<CMSPRO_DOCUMENT FIELD="content">内容</CMSPRO_DOCUMENT>
</CMSPRO_DOCUMENTS>5、注意稿件录入时可以通过代码视图更改一些样式，对于swf格式文件需要用火狐浏览器才可以保存下来
6、注意js文件不使用外部引入时需要如下：
<script type="text/JavaScript"> $(function(){ $(".menu").click(function(){ $(this).next(".dropDown").toggle(); }) }) </script>7、注意以下代码是取当前栏目下的第一个一级子栏目
<CMSPRO_CHANNELS CODE='' CHILDLEVEL='1' STARTPOS='0' NUM='1' CHILDTYPE='0'>
<area href="<CMSPRO_CHANNEL CODE='' FIELD='url'></CMSPRO_CHANNEL>" shape="rect" coords="403, 27, 443, 41">
</CMSPRO_CHANNELS>8、注意以下代码表示取当前栏目下的第一个一级子栏目下的8条稿件
<CMSPRO_CHANNELS CODE='' CHILDLEVEL='1' STARTPOS='0' NUM='1' CHILDTYPE='0'>
<CMSPRO_DOCUMENTS DOCUMENTTYPE="0|1|2|3" NUM="8" STARTPOS="0" CHANNELCODE="">
<tr>
<td width="23"> </td>
<td width="14" valign="top"><img border="0" src="images/news_list.gif" width="14" height="14"></td>
<td height="25"><CMSPRO_DOCUMENT FIELD="title" AUTOLINK="true" LINKALT="true" NUM="20" TRUNCATEDTIP="..." >标题</CMSPRO_DOCUMENT></td>
<td height="25" width="81"><CMSPRO_DOCUMENT FIELD="publishedTime" DATEFORMAT="yyyy-MM-dd">发布时间</CMSPRO_DOCUMENT></td>
</tr>
</CMSPRO_DOCUMENTS>
</CMSPRO_CHANNELS>9、如图：后台的稿件编辑页面中的”显示标题”指的是副标题
![[置顶] 实习项目总结_第2张图片](http://img.e-com-net.com/image/info5/fd94a6e937324d15bf6c9ac641d0bb9a.jpg)
10、Z-index 仅能在定位元素上奏效（例如 position:absolute;）
11、信息滚动参照科技技术处网站（信息横向滚动也可以参考全国人大代表网站）
scrollamount设定字幕滚动的速度，单位pixels
height设定活动字幕的高度
width设定活动字幕的宽度
direction设定活动字幕的方向
更详细参考网址：http://www.360doc.com/content/12/0818/16/8351655_230872993.shtml
http://www.jq22.com/jquery-info2166
<marquee scrollamount="2" width="100%" height="110" direction="up" onMouseOver="stop()" onMouseOut="start()" style="height: 110px; width: 100%;">滚动的内容
</marquee>12、添加开发运用
调查征集和在线咨询以稿件形式录入，用iframe嵌入相关jsp,同时通过读头条形式展示
浏览次数，可参考省疾控（现以管理学院为例）
<FONT color="#4f4f4f">
欢迎您进入番禺职业技术学院管理学院网站,您是本网站第<iframe id="f1" name="f1" height="22" src="" allowtransparency="true" width="100" frameborder="0" scrolling="no"></iframe>位访问者。</FONT>
相关js代码
<script> document.getElementById("f1").src="/siteapps/webpage/info_count/cate_count.jsp?siteCode=glxy&url="+window.location </script>
/*头部导航链接地址更改-针对稿件页点击导航目录多了一级站点目录*/
var pageUrl = parent.document.location.href;
var indexSplit = pageUrl.lastIndexOf("/");
var indexShtml = pageUrl.lastIndexOf(".shtml");
if(indexSplit!=-1&&indexShtml!=-1&&indexSplit<indexShtml){
var manuscriptId = pageUrl.substring(indexSplit+1,indexShtml);
if(manuscriptId.length == 32){
$("#nav a").each(function() {
var oHref = $(this).attr("href");
if(oHref.indexOf("../")!=-1){
$(this).attr("href","../"+oHref);
}
});
}
}
上面的代码添加到头部文件中，且要添加jQuery文件，注意在内容页中耶要添加jQuery文件
/*在需要被include的文件中，图片或者其他文件的路径需要用到静态路径*/
/jzglz/xhtml/images/top.jpg
广州地税项目
当录入一篇外链的稿件时，将外链地址放到高级属性中的重定向内
当一个站点发布了撤销发布是不能更改站点代号的需要复制一个站点出来再改
广东省民政专题项目
兼容各浏览器的swf视频短片代码（其中gdmz为站点代号）
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="972" height="201">
<param name="movie" value="/gdmz/xhtml/images/ztzl_fzjz/fzjz-banner.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="/gdmz/xhtml/images/ztzl_fzjz/fzjz-banner.swf" width="972" height="201" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
参考广东扶贫济困日
省民政网办大厅页面修改
<iframe width="100%" height="680" src="http://wsbs.hp.gov.cn/gsmpro/web/zxts/kxj_zxts.jsp" frameBorder="0" scrolling="no" allowtransparency="true"></iframe>温馨提示：以后同时维护测试，正式平台的模板，不能直接替换，因为模板中可能配置了不同的运行环境参数。
其他公用js
(1)设为首页
<a href="javascript:void(0)" onclick="SetHome(this,window.location)" title="设为首页">设为首页</a>
// 设置为主页
function SetHome(obj,vrl){
try{
obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl);
}
catch(e){
if(window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}
catch (e) {
alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。");
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage',vrl);
}else{
alert("您的浏览器不支持，请按照下面步骤操作：1.打开浏览器设置。2.点击设置网页。3.输入："+vrl+"点击确定。");
}
}
}(2)收藏本站
<a title="收藏本站" href="javascript:void(0)" onclick="shoucang(document.title,window.location)">加入收藏</a>
// 加入收藏 兼容360和IE6
function shoucang(sTitle,sURL) {
try
{
window.external.addFavorite(sURL, sTitle);
}
catch (e)
{
try
{
window.sidebar.addPanel(sTitle, sURL, "");
}
catch (e)
{
alert("加入收藏失败，请使用Ctrl+D进行添加");
}
}
};（3）固定飘窗
<!--微信-->
<div class="gov_weixin_share">
<div><a href="http://www.beijing.gov.cn/sy/rdgz/t1368123.htm" target="_blank"><img src="/images/weixin20140925.jpg" alt="首都之窗微信号" title="首都之窗微信号" /></a></div>
<div class="closeBtn">关闭</div>
</div>
<script type="text/javascript" language="JavaScript"> $(function(){ //二维码飘窗 function rigScroll(){ var winWidth=$(window).width(); if(winWidth<1024){ $(".gov_weixin_share").css({"right":10}) }else{ var winRig=(winWidth-1005)/2-120; $(".gov_weixin_share").css({"right":winRig}) } $(".closeBtn").click(function(){ $(".gov_weixin_share").hide() }) } rigScroll() $(window).scroll(function() { rigScroll() }); $(window).resize(function() { rigScroll() }); (4)简体、繁体js
<script type="text/javascript" src="jzf.js"></script><a href="javascript:ClickObject1()" target="_parent">简体版</a>
<a href="javascript:ClickObject2()" target="_parent">繁体版</a>市政府项目
信息公开部分：
栏目属性中的扩展属性可以到信息资源-代码表-信息来源中查看，当不起作用时点开编辑框右击属性在url中可查看codeId
省民政主站项目
（1）站点图标
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon"/>部署方法：为了更好的兼容性，正确的做法应该是在header添加如下的META申明
<head>
...
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="bookmark" href="images/favicon.ico" type="image/x-icon" />
...
</head>此外还可以弄一个动态的网站图标，申明方法如下：
<link rel="icon" href="/favicon.gif" type="image/gif" />但是不是所有的浏览器都支持这种申明，可以自己测试看看。
广东省地税
注意以后模板中使用的图片后缀习惯使用小写，有时后台会识别不了。
广州财政正式版
友情链接尽量不要使用select标签，选择dl，dt ,dd结合js进行编写,具体参考相关代码
信息公开部分可参照其他网站
头部选中效果可参考龙岗在线网站