我们经常会遇到一个有趣的问题：网站内容要丰富，而网站的版面又要新颖，那么怎样才能很好的将二者平衡呢？如果网站需要通过内容管理系统来增加图象。那么一定要先Headscape来看一下，很有帮助呢！

其实很简单。网站想要通过内管理系统来增加图像，通常他们想要的是一个吸引的，看起来并不呆板的图像（就是说他们想要圆角图像，因为这样比较流行），还要在图像的下面加上一些说明。可是，他们并不知道如何使用图像编辑工具，或者如何编辑HTML。

如果可以使用img 标签来添加图像，那该多好！添加一个包含文字说明的小标签，然后让它神奇地自动编辑。
只要把CSS和DOM 脚本结合起来就可以实现！当然，所以如果你可以改进下面的代码，请给我写一下注释评论。

步骤一：HTML

网站编辑先把图像调整到适当大小。添加一个包含文字说明的img标签，命名为"imgRight"（它可以利用类似Xstandard或者  contribute的WYSIWYG 编辑器进行添加）。还可以设置图像的宽度和高度，这点对于图像样式很重要。

步骤二：DOM脚本

以下就是我创建的脚本：
利用"imgRight" 或者 "imgLeft"找到所有要编辑的图像。
提取标签并把它嵌入到另外一个新建立的p 标签里。
然后将img 标签隐藏到div里，在图像的后面嵌入p 标签的文字说明。
将类别名从img里移除，把它添加到div里。
图像的宽度与div的宽度保持一致。这样可以避免文字说明部分超出图像的范围。
最后添加一个span 标签，用来创建圆角。

为了改进这份代码我使用了Robert Nyman 创建的getElementsByClassName功能，所以千万不用忘记在javascript文档里把它们加进去哦！

function addCaption(xClass) {
var allImages = getElementsByClassName(document, "img", xClass);
for ( var i=0; i < allImages.length; i++) {
var imageCaption = document.createTextNode(allImages[i].title);
var imageContainer = document.createElement("div");
var imagePara = document.createElement("p");
var imageWidth = allImages[i].getAttribute("width");
var spareSpan = document.createElement("span");
imagePara.appendChild(imageCaption);
allImages[i].parentNode.insertBefore(imageContainer, allImages[i]);
imageContainer.appendChild(allImages[i]);
if ( allImages[i].title != "" ) {
imageContainer.appendChild(imagePara);
}
imageContainer.appendChild(spareSpan);
imageContainer.className = xClass
spareSpan.className = "spareSpan"
allImages[i].className = "img"
imageContainer.style.width = imageWidth + "px";

}
}
// Runs all the listed functions on the loading of the window
window.onload=function(){
addCaption("imgLeft");
addCaption("imgRight");
}

步骤三：添加样式

如果通过Javacript可以输出以下的HTML：
<div style="width: 200px;" class="imgRight">
<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="img" title="The caption would go here" />
<p>The caption would go here</p>
<span class="spareSpan"></span>
</div>
你可以任意设置样式，但是还是需要有一些基本的样式，如下：
.imgRight {
float:right;
margin:0.5em 0 1em 1em;
position:relative;
}
.imgLeft {
float:left;
margin:0.5em 1em 1em 0;
position:relative;
}
.imgRight p, .imgLeft p {
font-size:0.9em;
color:#FFFFFF;
margin:0;
background-color:#4D6D80;
padding:0.5em;
}
.spareSpan {
position:absolute;
top:0;
right:0;
display:block;
width:17px;
height:17px;
background:url(/images/curvedCorner.png);
}

这种样式主要试固定右上角的位置，在上面添加一个漂亮的曲线，并且给文字说明添加一些样式。
大概就这些啦。非常希望那些更专业的人士能够给我提供一些建议。

到这里看一下操作过程吧！