下载文档原格式
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
Dreamweaver 8基础入门教程
运行 Dreamweaver 返回
安装好以后，我们就可以使用它来制作自己的网页，这一节我们来学习如何运行Dreamweaver；
1、新建文件夹
在D:盘中给自己新建一个文件夹，文件名用自己名字的拼音字母，数量小于8个，以后自己的网页都存这里头；
其他文件夹也可以，要求基本是名称是英文，尽量不要用空格汉字等那些非标准字符；
2、启动Dreamweaver
1）点击“开始－所有程序－Macromedia－Macromedia Dreamweaver 8，
2）第一次运行会出来一个选择面板，选默认的“设计”，点“确定”即可；
3）然后出来一个激活的页面，如果有正式的序列号，点“继续”即可，也可以选择下面的30天免费试用；
正确输入序列号后，在出来的注册页面中，点“以后提醒”按钮即可；
4）接下来开始载入Dreamweaver，直到出现一个完整的窗口；
这个页面称作“起始页”，中间是新建项目，我们一般选第一个Html普通网页，新建一个空白文档；
本节学习了启动Dreamweaver的方法，如果你成功地理解并完成了练习，请继续学习下一课内容；。
