Topic 1 : DW的代码片段 ：
代码片段的作用类似于我们的模板，只不过呢，他只是存储的一段代码，这样可以较少我们的工作量 ；
我们在这里先定义两个代码片段：
1 . 设计网页三步准备工作 ；
2 . 实体化一个盒子：（就是他的宽和高还有background ：pink；设置一背景色好区分区域）；
定义代码片段：
先复制想要定义代码片段的代码 -- 菜单栏 -- 窗口 -- 代码片段 -- 不选中任何一个文件夹右击 -- 新建代码片段 -- 新建面板中输入名称、保证代码已经加载进来 -- 确定 ---然后编辑代码片段的快捷键 （默认的是tab+什么）；
Topic 2 : header分区 ：
像这种头部和导航分区都有渐变背景还都是通栏效果的情况下：
我们可以截一个背景图 我们把这个背景图给他的父级body（直接把背景添加上就ok了 不用考虑宽和高的问题了）；
我们调整搜索框里的光标的方式和调整里面的光标的方法是一样的；
网页示例：
代码示例：
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的华为</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<h1>
<a href="#">
<img src="images/logoR.jpg" width="257" height="43" alt=""/>
</a>
</h1>
<div class="headerR">
<p>
<a href="#">Worldwide</a> | <a href="#">登录</a> | <a href="#">个性化服务</a> | <a href="#">心声社区</a>
</p>
<div class="search">
<input type="text" class="text"/>
<input type="image" src="images/search2.jpg"/>
</div>
</div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
body,div,a,span,img,p,h1,h2,h3,h4,h5,h6,input,ol,li,ul,dl,dt,dd{margin: 0px; padding: 0px; list-style: 0px; border: none; }
body{ font-size: 12px; font-family: "宋体"; color: #646464; background: url(../images/header1.jpg) repeat-x ; }
a{color: #666; text-decoration: none; }
a:hover{ color: #bb0000; text-decoration: underline; }
.header {width: 980px; height: 60px; margin: 0px auto; }
.header h1{float: left; width: 257px; height: 43px; margin-top: 9px; }
.headerR{width:430px ; height:19px ; margin-top: 21px; float: right; }
.headerR p{float: left; line-height: 19px; }
.search{float: right; }
.search input{float: left; }
.search .text{ width:130px; height:19px; background: pink;background: url(../images/search1.jpg); padding-left: 9px; line-height: 19px;}注意：两个表单标签一般是不会自动对齐的，（就是你的搜索的文本框（input标签）和搜索按钮不会在一条线上），要想对齐我们就通过浮动来
我们调整搜索框里的光标的方式和调整里面的光标的方法是一样的；
表单标签想要和表单标签或普通标签对齐，唯一的途径就是所有盒子左浮动，因为浮动之后的标签是没有间距的左对齐和顶对齐
Topic 3 : news分区精灵图的制作 ：
1 . 我们把这个分区做成精灵图：
做成的效果如下：
我们制作的时候： 首先确定大图的尺寸，然后ctrl+N 新建一个画布（就是对应大图的尺寸），然后把四个小图切片导出，用FW打开如下图所示：
然后分别把小图从他自己的页面拖拽到大图的页面排列完成即可；
Topic 4 : 华为官网：
华为首页的设计 网页示例如下（不太完整差一个footer分区）：
代码示例：
.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的华为</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<h1>
<a href="#">
<img src="images/logoR.jpg" width="257" height="43" alt=""/>
</a>
</h1>
<div class="headerR">
<p>
<a href="#">Worldwide</a> | <a href="#">登录</a> | <a href="#">个性化服务</a> | <a href="#">心声社区</a>
</p>
<div class="search">
<input type="text" class="text" />
<input type="image" src="images/search2.jpg" />
</div>
</div>
</div>
<div class="nav">
<ul>
<li><a href="#">行业洞察</a></li>
<li><a href="#">方案与产品</a></li>
<li><a href="#">技术支持</a></li>
<li><a href="#">关于华为</a></li>
<li><a href="#">加入华为</a></li>
<li><a href="#">华为商城</a></li>
</ul>
</div>
<div class="banner_wrap">
<div class="banner">
<a href="#">
<img src="images/bannerT.jpg" width="1100" height="396" alt=""/>
</a>
</div>
</div>
<div class="news_wrap">
<div class="news">
<p class="newsL">
<strong>新闻：</strong>华为发布业界首款传送网SDN控制器技术样机，引领传送网步入可编程新时代
</p>
<div class="newsR">
<p>关注我们</p>
<div class="icons">
<a href="#" class="a1"></a>
<a href="#" class="a2"></a>
<a href="#" class="a3"></a>
<a href="#" class="a4"></a>
</div>
</div>
</div>
</div>
<div class="con_wrap">
<div class="con">
<dl>
<dt>
<img src="images/con1.jpg" width="110" height="137" alt=""/>
</dt>
<dd>
<h3>谈华为的管道战略</h3>
<p>
华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con2.jpg" width="110" height="137" alt=""/> </dt>
<dd>
<h3>中国移动点亮TD-LTE市场</h3>
<p>
从世博会TD-LTE业务演示，到杭州TD-LTE试验网发布，到全球首次LTE TDD/FDD漫游互通，中国移动迈出了TD-LTE的坚定步伐。
</p>
</dd>
</dl>
<dl class="dl3">
<dt>
<img src="images/con3.jpg" width="110" height="137" alt=""/>
</dt>
<dd>
<h3>《营赢》第14期</h3>
<p>
本期封面：Bharti Airtel的LTE网络已正式商用，对印度而言，LTE是否行之过早？其网络业务总监Jagbir Singh并不这么认为。。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con4.jpg" width="112" height="137" alt=""/>
</dt>
<dd>
<h3>四核芯3D见证不凡时刻</h3>
<p>
华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。
</p>
</dd>
</dl>
<dl>
<dt>
<img src="images/con5.jpg" width="111" height="137" alt=""/>
</dt>
<dd>
<h3>互联网视频，竞还是合？</h3>
<p>
优酷土豆无线运营部高级总监费溢群分享了在互联网视频领域，其与运营商、华为间的三方合作模式。
</p>
</dd>
</dl>
<dl class="dl6">
<dt>
<img src="images/con6.jpg" width="111" height="137" alt=""/>
</dt>
<dd>
<h3>统一存储，大道智简</h3>
<p>
OceanStor T系列统一存储产品，搭载Smart系列软件，实现完美统一管理，按需自如存取。
</p>
</dd>
</dl>
</div>
</div>
</body>
</html>
.css
@charset "utf-8";
/* CSS Document */
body,div,a,span,img,p,h1,h2,h3,h4,h5,h6,input,ol,li,ul,dl,dt,dd{margin: 0px; padding: 0px; list-style: none; border: none; }
body{ font-size: 12px; font-family: "宋体"; color: #646464; background: url(../images/header1.jpg) repeat-x ; }
a{color: #666; text-decoration: none; }
a:hover{ color: #bb0000; text-decoration: underline; }
.header {width: 980px; height: 60px; margin: 0px auto; }
.header h1{float: left; width: 257px; height: 43px; margin-top: 9px; }
.headerR{width:430px ; height:19px ; margin-top: 21px; float: right; }
.headerR p{float: left; line-height: 19px; }
.search{float: right; }
.search input{float: left; }
.search .text{ width:130px; height:19px; background: pink;background: url(../images/search1.jpg); padding-left: 9px; line-height: 19px;}
.nav{width: 980px; height: 48px; margin: 0px auto; }
.nav li{ float: left; padding:0px 25px; margin: 16px 32px 0px 0px ; font-weight: bold; }
.banner_wrap{height: 396px; background: #000 ;}
.banner {width: 1100px; height: 396px ; margin: 0px auto; }
.news_wrap{ height:36px;}
.news{ width: 980px; height: 36px; margin: 0px auto; }
.newsL{ line-height: 36px; font-weight: bold; float: left;}
.newsL strong{color :red; }
.newsR{ float: right; width: 168px; height: 20px; margin-top: 8px;}
.newsR p{float: left; line-height: 20px; font-weight: bold; }
.newsR a{width:20px; height:20px; background:url(../images/icons.fw.png); float: left; margin-left: 6px; }
.newsR .icons .a1{margin-left: 16px; }
.newsR .icons .a2{background-position: -20px 0px; }
.newsR .icons .a3{background-position: -40px 0px; }
.newsR .icons .a4{background-position: -60px 0px; }
.con_wrap{height:315px; background: #DCDCDC;}
.con{width: 980px; height: 296px; margin: 0px auto ; }
.con dl{width: 316px; height: 137px; background: #fff; float: left; margin: 10px 15px 0px 0px; }
.con dt{ float: right; }
.con dd{ margin: 17px 10px; width: 184px; font-weight: bold; }
.con dd h3{ margin-bottom: 12px;}
.con .dl3{ margin-right: 0px;}
.con .dl6{ margin-right: 0px;}
注意：
1. 在banner分区中那个图片并不是就是980px的 他的左边多了60px 那么我们让他右边也多60px 这样做的好处就是可以把这个图片水平居中； 你可能会想到右边不多哪60px，通过加外边距来实现，这样是不行的因为我们的banner分区是一个通栏的效果要是加了外边距，分辨率改变外边距是不会改变的就达不到居中的效果了；
2 . 行内块会保持文字特性：
行内和行内快可以识别一个空格 也可以把一个回车是别成空格
a是行内手动定义宽高没意义
解决办法转为行内快
有空格那个可以用浮动
因为浮动是没有距离的左对齐和顶对齐
浮动以后的盒子会变成行内快 所以浮动可以解决这两个问题 所以可以改变他的显示模式 只浮动就好了
3 . 表单标签的对齐问题
两个表单标签一般是不会自动对齐的，（就是你的搜索的文本框（input标签）和搜索按钮不会在一条线上），要想对齐我们就通过浮动来
表单标签想要和表单标签或普通标签对齐，唯一的途径就是所有盒子左浮动，因为浮动之后的标签是没有间距的左对齐和顶对齐
4 . 我们调整搜索框里的光标的方式和调整里面的光标的方法是一样的；