Ready to get started? Jump right in and start building your first static website from scratch.
本文来自http://www.adobe.com/devnet/dreamweaver.html，我在这里把它翻译成中文，也算是学习笔记。
文章总共分了6个章节。
使用的软件：Dreamweaver CS6
Part 1: Set up your site and project file
这一章介绍到，在Dreamweaver中，站点分本地站点和远程站点。
本节新建一个本地站点。
站点 > 新建站点
站点名称叫做"Check Magazine"，下载first_website_pt.zip，加压得到check_cs6文件夹，选择站点本地文件为check_cs6.
这样第一部分就结束了。
Part 2: Creating the page structure
一般地并不是上来就用Dreamweaver设计网页布局，而是现在纸上或者photoshop中设计一下草图，以确定符合客户要求。
Create and save a new page
在DW中 文件 > 新建，创建一个空白HTML网页，文档类型选择html5。之后保存该文件为index.html，网页的标题改为Check Magazine
Build the basic page structure
插入<div>标签
在DW右侧有插入面板，选择"插入Div标签"
插入完成后的代码如下所示：
<body> <div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="main_image">此处显示 id "main_image" 的内容</div> <div id="left_column">此处显示 id "left_column" 的内容</div> <div id="center_column">此处显示 id "center_column" 的内容</div> <div id="right_column">此处显示 id "right_column" 的内容</div> </div> </body>
Create an external style sheet
新建一个空白CSS文档。
手写如下代码
#container {
width:968px;
background:#FFF;
margin:0 auto;
padding-left:10px;
padding-right:10px;
overflow:hidden;
}
保存为style\check_cs6.css.
回到index.html文件，在右侧有"CSS样式"面板，最下方有一个附加样式表按钮，选择刚才的css文件。
Add the header content
就是在header Div里写上标题 副标题 和导航链接。
Insert the main image as background
新创建一条CSS规则，完成后的内容如下：
#main_image {
background-image: url(../images/main.jpg);
background-repeat: no-repeat;
height: 376px;
width: 968px;
}
Position the columns
完成后的代码如下：
#left_column, #center_column, #right_column {
width:316px;
float:left;
}
#center_column, #right_column {
margin-left: 10px;
}
至此第二部分内容结束了。
（2013年2月24日21:14:41：今天到此为止，未完待续）
(2013年2月25日21:47:28：继续哦)
Part 3: Styling the header and navigation menu
这一部分的目标就是把下面这个
变成下面这个
Style
the main heading and tag line
标题使用web font。
Styling the heading with an Edge Web Font
使用sarina字体，要使用此字体，在HTML中插入如下代码：
<script src="http://use.edgefonts.net/sarina.js">
</script>
在CSS中使用：
h1 {
font-family: sarina, serif;
}
Fixing the gap above the header
有一个绝对定位属性，使元素相对于包含它的区块向下向左偏移多少。
这一部分大概就是将定位，原文讲得太细了，我省略了一些内容。。。
Part 4: Inserting images and styling text
回顾一下，Part 1讲了建立一个站点，Part 2讲了用<div>建立网页基本结构，Part3讲了一些修饰。
这一部分会讲用<img>标签插入图像，给text加一个半透明背景和圆角。下图就是这部分做到的效果：
Insert Image
添加半透明背景和圆角
这部分相对没啥，略了。。。
（很对不起读我这篇文章的读者，这篇文章只是个引子吧）