Topic 1 . css精灵
就是图片整合技术，就是将一系列小图整合到一张大图之上
又称之为：CSS雪碧、CSS sprite
大图称之为精灵图或雪碧图
核心技术：背景图定位
一般我们看到背景图的定位是负数的话那么一般就是使用的精灵图；
背景图的单个属性如下 ：
背景图定位：background-position
背景色：background-color
背景图：background-image
背景图平铺：background-repeat
我们来用一张精灵图来写拼出来我的姓氏，我姓王，
精灵图如下：
网页如下：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css精灵</title>
<style type="text/css">
*{margin: 0px; padding: 0px; list-style: none; border: none; }
.w{width: 150px; height: 119px; background: url(zimu.jpg) -126px -846px; float: left; }
.a{width: 130px; height: 117px; background: url(zimu.jpg) -8px -47px; float: left; }
.n{width: 111px; height: 122px; background: url(zimu.jpg) -293px -440px; float: left; }
.g{width: 107px; height: 160px; background: url(zimu.jpg) -110px -241px; float: left; }
</style>
</head>
<body>
<div class="w"></div>
<div class="a"></div>
<div class="n"></div>
<div class="g"></div>
</body>
</html>
注意我们的这个背景的图的定位先是宽，然后是高，大部分的css都是这个顺序；
超链接的显示模式时行内，所以他在人为设置宽高的时候不生效 我们要想人为设置宽高要么浮动要么改变显示模式 ；
我的margin-left：n px；（其他的也可以这里以left为例 ）也可以取负数 ， 当取负数的时候相当于 向左移npx；
Topic 2 . 网页和网站
网页：包含文字、图片、超链接、声音、视频
网站：很多网页的集合
1. 网站的制作流程：
定义站点，明确建站目的（就是明确自己建的站是用什么的是电商还是企业什么的）；
建立网站的结构图：绘制流程图（就是画一个树状图，网页之间来回跳转到那个）；
首页的设计和制作（这个大概占一个网站的70%左右的工作量）；
其他页面的设计和制作（遵循主页的风格来设计其他页面）；
测试（一般不归设计开发人员来做）；
发布和维护（发布：直接上传就行； 维护就是归设计人员来的）；
2 . 网站内部的页面类型
首页 --- index.html ；
列表页（也叫二级页面）--- list.html ---- 从首页主导航点击进去的页面是列表页 （只有主导航才算）--- 数量和主导航链接数量一样；
详情页/文章页（三级页面） --- detail.html --- 数量不可估计 --- 除了主导航的超链接都是详情页面 ；
3 . 站点
站点就是DW软件对网站文件的一个虚拟的管理功能
重点：学习对站点的增删改查
新建站点：菜单栏 -- 站点 -- 新建站点 -- 输入站点名称（名称可以为中文，但内部文件一律不允许为中文）和网站根目录路径 -- 完成
站点的操作：增加删除修改文件和本地根目录是同步的 但是在dw删除站点的时候那个自己电脑上的文件夹是不会被删除的；
管理站点 -- 管理谁就双击谁 ---- 修改站点；
管理站点 -- 选中站点名称（想要删除的） -- 点击减号 ---- 删除站点
站点中的任何文件都不能中文的（浏览器是不支持中文的） 站点的名称可以是中文；
Topic 3 . 锚点链接
我们本来学过的有文字链接和图片链接；
锚点链接就是可以从底部跳转到顶部的那种链接；
就是你要在你想跳转的地方写一个锚点就好了；
直接代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点</title>
</head>
<body>
<a name="top" id="top">锚点的测试顶部</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!------跳转到本页面的top锚点的位置--------------->
<a href="#top">锚点的测试尾部</a>
</body>
</html>
Topic 4 . 热区链接
热区链接一般只能使用在插入图上 ；
制作热区链接我们可以在设计视图上制作（我的表格也是在设计视图上完成的）；
热区链接的图片一般不允许加超链接了；
制作热区链接的方法：
设计视图 -- 选中图片 -- 属性面板 -- 选区绘制工具 -- 绘制选区 -- 小黑选中选区添加跳转地址（1、人为相对路径查找；2、有站点的情况下，拖拽准星到目标文件即可）
图片示例：
注意左下角就是我们需要用到的 热点选区工具和小黑 ；
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>热区链接</title>
</head>
<body>
<div>
<img src="images/img.jpg" alt="" width="800" height="728" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="518,368,594,440" href="henan.html" target="_blank">
<area shape="circle" coords="682,443,12" href="上海.html" target="_blank">
</map>
</div>
</body>
</html>
文件夹结构示例：
用热区链接跳转到河南和上海；
Topic 5 . 模板
1 . 模板的作用为：
化简重复劳动；
统一网站风格；
批量生产页面；
模板页面的可编辑区域设置的快捷键是ctrl + alt + v ；
2 . 创建模板
写好html页面之后 -- 菜单栏 -- 文件 -- 另存为模板 -- 模板站点是否正确、模板命名（template） -- 完成 -- 切记：选择更新链接
3 . 创建模板的可编辑区域：
选中想要编辑为可编辑区域的代码 -- 菜单栏 -- 插入 -- 模板对象 -- 可编辑区域（ctrl+alt+V） -- 确定
4 . 使用模板：
可以窗口里找（也可直接看图标如下图所示）资源面板 -- 左侧图标倒数第二个为模板 -- 如果可见模板缩略图即可使用模板，
使用模板的反法是：先创建一个html文件然后把模板拉到代码框里然后点击应用即可；
如果无法看见缩略图，表示模板不可用，需要重新另存 -- 拖拽缩略图到目标文件内部即可
注意： 创建可编辑区域就是你各个使用模板写成的网页需要变化的地方；