如何用dw软件制作网页的小网站

打开DW，DW界面如图

2

分析所制作的网页的需求，明确目标

3

明确需求。如果是建议一个网站，需要建立一个站点，方便管理并使制作步骤更为有条理。

4

新建站点弹出来的窗口。在这里我输入的是“新闻网页”，放在Dreamwaver CS6文件夹下的新闻网页文件夹

5

在新闻网页文件夹下新建“images”文件，导入制作网页所需要的素材，这里所需要的素材都是图片

6

新建HTML，选择“创建”

在“标题”中输入“新闻网页首页”，转换到“设计”界面

根据制作网页需求插入表格，只是在行列有所变化，下面的“表格宽度”以下选项根据图设置

插入表格如图，选择表格，会看到表格边框变红，选择之后变黑。在属性中对齐选项选择“居中对齐”

在表格第一行第一列输入“用户名”，在第一行第二个表格插入“文件域”。然后是密码，同样的插入“文件域”。切换到“拆分”界面，选中密码对应的“文件域”，将“type”改为“password”

插入图像，不知道怎么填的话就一直选择“确定”即可

插入按钮，同上面插入图像的处理方法那样处理，如果不知道填什么就一直“确定”，无妨。在属性栏里的值改为“登录”。然后插入图像“谷歌logo”，附上效果图

选中第二行，点击鼠标右键，选择“表格”，“合并单元格”

在第二行插入图片。完成页面制作。保存HTML文件。然后在站点“新闻网页”可以看到保存的HTML文件

点击制作好的HTML文件，选择用360浏览器打开，输入用户名和密码，然后会看到如下情况：用户名课件，密码不可见，符合实际

步骤阅读

当然也可以在Dreamwaver CS6 的实时视图中完成第15步

如何使用Dreamweaver CS6编写PHP程序，如何使用DW创建PHP站点

我们都知道，DW即Dreamweaver的缩写，这是个非常优秀的可视化的网页制作工具，但是你知道吗？它现在早已经超出了早前版本的功能了，针对不同的WEB开发者，它都有相应的集成环境，下面我们就一起来学习一下吧。

1、今天我们以DW CS6为例，演示一下创建一个动态站点。由于DW CS6为Adobe公司最新版的DW，所以，其对动态语言增加了很多友好的支持，例如：代码补全、代码提示、语法检查等，那么用它来编写PHP程序已经很给力了。

2、首先运行你桌面上的这个东西：

Dreamweaver CS6图标，然后：

3、单击菜单上的这个“站点”-“新建站点”

4、可以看到这个对话框：

5、这个时候，我们给站点起一个名称，例如：MyPHPWebSite，在本地站点文件夹中选择一个路径

由于我的PHP环境安装的是集成的Appserv（我使用的版本是AppServ 2.5.9），所以，我在选择站点根目录的时候，直接选择了Appserv目录下的www目录，注意，如果你使用的是其他集成环境，或者你是自己单独配置的PHP运行环境，那么，你可以选择你自己的站点根目录。

6、选择好以后，点击下方的“保存”

还有一个需要说明的是：一般我们的站点根目录下会有很多网站，有时候我们为了区分这些网站，又设置了子目录，比如www下有site01、site02、site03……多个站点，所以为了不让网站文件混杂在一起，我们建议也设置子目录

然后再点击保存按钮，这样我们点击面板上“文件”按钮，就可以看到我们新建的站点了：

7、如此一来，我们就正确建好了PHP站点，这时，我们就可以新建文件和目录开始编写程序了，如图，在站点上右击“新建文件”

就可以新建一个php文件，但是我们实际发现，新建了一个untitled.html文件

8、这说明我们的站点还只是静态站点，不能直接新建php文件，这个用户体验很不好，如果不嫌麻烦，可以直接右击untitled.html重命名，连同扩展名一起改，直接改成index.php，也不是不可以，但是这样实在不爽（我们一般修改文件不随意修改扩展名，防止误改，因为过一段时间，这个文件原来是什么扩展名又不记得了，改了扩展名，还容易打不开）。下面我们完善一下这个不方便之处。

9、我们依次点击菜单上的“站点”-“管理站点”

10、会弹出一个管理站点对话框，我们找到刚才我们新建的MyPHPWebSite，然后点击下面的“编辑”图标

11、这时候，在弹出的站点对话框中，点击“服务器”

12、然后点击这个

13、弹出一个看上去很复杂的层。

14、这里，服务器名称任意写，自己取名，连接方法我们选择本地/网络，因为我们是做测试，PHP环境是安装在本地，（如果你有FTP，你可以使用FTP）。

16、然后切换到高级选项

我们选择一个服务器模型，由于我们使用PHP编程，本例我们选择PHP MySQL，这里还有其他选项

我们要根据自己的WEB开发语言来选择，如果你使用的JSP，那么请你选择JSP。是什么语言就选择什么语言。选好后点击“保存”。

17、然后就可以看到我们配置好的服务器站点了

18、我们为了编码方便，就选择一个风格，我选择“编码人员（高级）”风格

19、然后在文档中开始编写代码，如果你嫌弃DW生成的那几行代码碍事，全选，直接删了也无妨。

20、写好，保存（ctrl+s），然后直接按F12键就可以预览效果了

Dreamweaver CS6 制作一个简单网页

以实例说明Dreamwaver CS 6版本的应用。即使现在用很多有关DreamwaverCS6版本的书籍资料，但是资料太过复杂，反而不知道从而下手。这篇经验将以本人经验说说Dreamwaver CS6 的使用。这里举的例子是“新闻网页首页”的制作。

打开DW，DW界面如图

分析所制作的网页的需求，明确目标

明确需求。如果是建议一个网站，需要建立一个站点，方便管理并使制作步骤更为有条理。

新建站点弹出来的窗口。在这里我输入的是“新闻网页”，放在Dreamwaver CS6文件夹下的新闻网页文件夹

在新闻网页文件夹下新建“images”文件，导入制作网页所需要的素材，这里所需要的素材都是图片

新建HTML，选择“创建”

在“标题”中输入“新闻网页首页”，转换到“设计”界面

根据制作网页需求插入表格，只是在行列有所变化，下面的“表格宽度”以下选项根据图设置

插入表格如图，选择表格，会看到表格边框变红，选择之后变黑。在属性中对齐选项选择“居中对齐”

在表格第一行第一列输入“用户名”，在第一行第二个表格插入“文件域”。然后是密码，同样的插入“文件域”。切换到“拆分”界面，选中密码对应的“文件域”，将“type”改为“password”

插入图像，不知道怎么填的话就一直选择“确定”即可

插入按钮，同上面插入图像的处理方法那样处理，如果不知道填什么就一直“确定”，无妨。在属性栏里的值改为“登录”。然后插入图像“谷歌logo”，附上效果图

选中第二行，点击鼠标右键，选择“表格”，“合并单元格”

在第二行插入图片。完成页面制作。保存HTML文件。然后在站点“新闻网页”可以看到保存的HTML文件

点击制作好的HTML文件，选择用360浏览器打开，输入用户名和密码，然后会看到如下情况：用户名课件，密码不可见，符合实际

当然也可以在Dreamwaver CS6 的实时视图中完成第15步