如何个性化BB9.1课程界面

首先声明，本方法有点笨，不适合扩展，还有几个小bug

需要更好的效果只有通过二次开发的方式，让课程加载自己的css文件才能更好解决。

操作之前需要先在bb中建好课程栏目

1、将做好的html首页和images及css文件都放到平台的课程资源下面

2、首页链接index.html已经可以直接访问了，我们需要做的就是将课程的主页直接跳转到这个页面：

新建空白页－>在编辑HTML状态用javascript实现跳转：top.location.href='',指定链接到刚刚上传的首页

个性化课程的原理是将自己的css通过javascript的方式在页面加载完之后再载入进来，覆盖系统自带的样式

index.html的代码：

<div id="container">
     <div id="topnav">
        <ul>
            <li>
            <a  href="http://202.116.45.238/webapps/portal/execute/myPlaces?newWindow=true" target="_top">我的位置</a>
            </li>
             <li>
            <a href="http://202.116.45.238/webapps/login?action=logout" target="_top">注销</a>
            </li>
            <li>
            <a  href="http://202.116.45.238" target="_top">平台首页</a>
            </li>
            </ul>
    </div>
<div id="main"></div>
<ul id="nav">
<li><a href="content/1.html" class="li1" target="_parent"> </a></li>
<li><a href="content/2.html" class="li2"> </a></li>
<li><a href="content/3.html" class="li3"> </a></li>
<li><a href="content/4.html" class="li4"> </a></li>
<li><a href="content/5.html" class="li5"> </a></li>
<li><a href="content/6.html" class="li6"> </a></li>
<li><a href="content/7.html" class="li7"> </a></li>
<li><a href="content/8.html" class="li8"> </a></li>
 
</ul>
<ul id="subnav">
<li ><a href="content/9.html" class="li1" > </a></li>
<li><a href="content/10.html" class="li2"> </a></li>
<li><a href="content/11.html" class="li3"> </a></li>
<li><a href="content/12.html" class="li4"> </a></li>
<li><a href="content/13.html" class="li5"> </a></li>
</ul>
<div id="foot">
<span class="footer">  © 版权所有 2011</span>
</div>
</div>

　　content文件夹中每个文件都将通过iframe的方式加载一个课程栏目：

1.html的代码，其中iframe的src需要自己手动获取栏目的链接，详细请自行研究js部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>信息技术与课程整合示范课程</title>
<link type="text/css" rel="stylesheet" href="../images/style.css"/>

<script language="javascript">
function reinitIframe(){
		var iframe = document.getElementById("demo");
		try{
		var bHeight = iframe.contentWindow.document.body.scrollHeight;
		var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
		var height = Math.max(bHeight, dHeight);
		iframe.height =  height;
		}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
function attach() {
	var cssPath="http://202.116.45.238/bbcswebdav/courses/EIT002/new/images/style.css"; 
	var id = window.frames["demo"].document.getElementById("editModeToggleLink");
	if (id == null){
		attachFile("demo",cssPath, "css");
	}else{ 
		var spans = window.frames["demo"].document.getElementById("editModeToggleLink").getElementsByTagName("span");
	
		if(spans[0].innerHTML=="关闭"){
	 		attachFile("demo",cssPath, "css");
		}
	}
	
 };
 
function attachFile(iframeId,filename, filetype)
{  
var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
if (filetype=="css"){ //判断文件类型 
   var fileref=window.frames[iframeId].document.createElement("link"); 
   fileref.setAttribute("rel", "stylesheet") ;
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("href", filename);
} 
if (filetype=="js"){ //判断文件类型 
   var fileref=window.frames[iframeId].document.createElement('script');//创建标签 
   fileref.setAttribute("type","text/javascript");//定义属性type的值为text/javascrip
   fileref.setAttribute("language","JavaScript");    
   fileref.setAttribute("src", filename);//文件的地址 
}

if (typeof fileref!="undefined")   

head.appendChild(fileref);
if(window.frames[iframeId].frames["contentFrame"]){ 
var subhead;
 subhead= window.frames[iframeId].frames["contentFrame"].document.getElementsByTagName('head').item(0);
 subhead.appendChild(fileref);
}
}
	</script>
 </head>

<body onload="attach()">
<div id="container">
    <div id="topnav">
        <ul>
            <li>
            <a  href="http://202.116.45.238/webapps/portal/execute/myPlaces?newWindow=true" target="_top">我的位置</a>
            </li>
             <li>
            <a href="http://202.116.45.238/webapps/login?action=logout" target="_top">注销</a>
            </li>
            <li>
            <a  href="http://202.116.45.238" target="_top">平台首页</a>
            </li>
            </ul>
    </div>
    <div id="header"></div>
    
    <iframe  src="http://202.116.45.238/webapps/blackboard/content/listContentEditable.jsp?content_id=_15264_1&course_id=_108_1&mode=reset&courseTocLabel=%E7%AC%AC%E4%B8%80%E8%AE%B2+%E6%A6%82%E8%BF%B0" frameborder="0" name="demo" id="demo" width="100%" scrolling="no" onload="attach()"/> 
    
</div>
</body>
</html>

　　加载进来的css文件，需要使用firebug或chrome浏览器查看html是由哪种样式控制，例如：

左边导航部分是由class为navPaletteContent控制，下面还有ul>li元素，我们重新设计后的css如下：

.navPaletteContent{
	border:none;
}

.navPaletteContent #controlPanelPalette_contents{
	border:1px solid #555;
}

div.buttonCm div.navPaletteContent{
	background:url(nav_bottom.jpg) left bottom no-repeat;
	padding-bottom:50px;
}

div.buttonCm div.navPaletteContent ul.courseMenu{
	padding:120px 18px 0 18px;
	background:url(nav_top.gif) left top no-repeat;
}


div.buttonCm div.navPaletteContent ul.courseMenu li{
	background:none;
	margin-right:2px;
	/*
	padding:7px 18px 4px 15px;
	*/
	margin-left:2px;
	border-bottom:2px solid #eaeaea;
}

div.buttonCm div.navPaletteContent ul.courseMenu li a{
	display:block;
	text-decoration:none;
	font-size:14px;
	letter-spacing:2px;
	background:url(ico.gif) right 70% no-repeat;
	padding:0;
	margin:0 0 3px 5px
}

div.buttonCm div.navPaletteContent ul.courseMenu li a:hover{
	background:url(ico2.gif) right 70% no-repeat;
}

#courseMenuPalette div.navPaletteContent ul li a, #courseMenuPalette div.navPaletteContent ul li a span{
	color:#3e3e3e;
}

#courseMenuPalette div.navPaletteContent ul li a:hover, #courseMenuPalette div.navPaletteContent ul li a:hover span{
	color:#045988;
}

　　

ps.因为时间关系，详细不解释，需要有一定的css基础才能做

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ly6532406/p/2529561.html