width:163px
height:105px
margin-right:0
margin-top:0
background-image:url(images/t_06.jpg)}#right a{position:absolute
display:block
width:108px
height:26px}#right a:hover{
border:1px solid #ffcc00
}/*定义hover时的样式*/
#right .one a{top:10pxright:110px
} /* 第一个热点链接位置的*/
#right .two a{top:40pxright:110px
}/* 第二个热点链接位置的*/
#right .three a{top:70pxright:110px
}/* 第二个热点链接位置的*/
在html中加入以下<body<div id="top"
<li id="right"<ul<li class= "one " <a href= "# " 第一个热点</a </li
<li class= "two " <a href= "# " 第二个热点</a </li
<li class= "three " <a href= "# "第三个热点 </a </li</ul</li</div</body
注：top是整个页面上部分的定义，这个是接上面的一部分，主要是讲解添加热点。在网站制作的过程中是很使用的一块，可以根据情况做些改动。
1、首先打开dw，点击设计；
2、然后用鼠标点击你想要加热点的图片，点击选中以后，用鼠标点击左下角划热点的一种矩形工具；
3、选择工具以后就可以在要加热点的图片上划热点了；
4、划上热点以后在左下角添加上链接。
在html中显示如下：
<body><img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>
<map name="Map1">
<area shape="rect" coords="50,50,100,100" style="cursor:hand" href="login.jsp" />
<area shape="rect" coords="0,0,50,50" style="cursor:hand" href="main.jsp"/>
</map>
</body>
快速可视化制作CSS推荐使用第三方工具，推荐如下：1、Bootstrap的可视化制作工具：Jetstrap：
Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的页面，它会自动适配手机端和 Pad 端（响应式设计）。
2、Bootstrap可视化编辑器工具-LayoutIt
简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站？是的，LayoutIt 是一个 Twitter Bootstrap 界面生成器，能够帮助你快速制作出网站和界面模型，同时能够下载生成的网站代码。
3、Bootstrap的可视化制作工具：bootswatchr
bootswatchr是从地面上创建一个自定义的BootStrap主题的可视化工具。最大的方便就是 我们可以在左侧修改css或者html代码，然后修改结果会直接会显示在右侧。更重要是一个在线编辑和免费生成Bootstrap主题的酷站。
