首先声明，本方法有点笨，不适合扩展，还有几个小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基础才能做