（2）AdobeDreamweaver
Adobe Dreamweaver，简称“DW”，是一款集网页制作和网站管理于一身的所见即所得网页编辑器（图3-11、图3-12）。DW让那些对计算机语言不是特别精通的视觉传达设计师也能轻松实现网页制作，利用它可以轻而易举地制作出跨越平台和浏览器限制的、充满动感的网页，是专业级网页制作程序。它支持HTML、PHP、CSS以及ASP等众多脚本语言，同时提供了模板套用功能，支持一键式生成网页框架功能。DW是初学者或专业级网站开发人员必备工具。
图3-11
图3-12
我们之前说到网页视觉设计师能将平面的模板转换为能用浏览器观看的HTML文件，就是利用了DW的这些功能。那么，直接在网上观看PS做好后上传的网页图片和用DW上传的网页图片有什么区别呢？
首先，PS完成的图片较大，如要上传通常是用.PNG或者.JPG的文件格式。用户在等待图片显示的过程中会有种焦躁的心情，这种感觉相信很多人都有体会，其直接后果也许就是不耐烦地关掉这个网站，那么这个站点就失去了一位浏览者，不仅如此，还无法实现信息传递的功能。这是所有网站都无法接受的失误。而DW在上传过程中，图片被切成很多小片，这样可使上传的速度加快，并且还可多张图片同时上传；另外，具有相同颜色的背景图片能直接以代码形式命令，不用上传原图；含有文字的图片直接在DW里输入文字即可显示，文档文件比图片文件节省大量的上传时间，所以浏览者无须等待就可体验网络畅游的乐趣。
DW还能实现友好的用户体验。例如，读者想要保存网页中的某些文字和图片，可以直接下载，同时还能实现超级链接效果，也就是说，当读者想要了解网页中某一个点的内容时，可以直接点击进去，实现文字、图片或者网页间的跳转，非常方便和人性化。网页中的图片还能以动态的方式显示，这将大大吸引那些现代读者。另外，网页可以节约人力、物力资源，方便修改和及时更新，支持快速储存和信息搜索、归纳、整理，它具有传播覆盖面广泛、时效性和交互性能卓越等特点。这些都是与新型媒介和传统的平面媒介最显著的区别。
网页界面设计完成之后，需要通过Photoshop和Dreamweaver进行编辑。用Dreamweaver软件制作一般的静态网页非常简单、快捷，具体操作如下。
①打开Dreamweaver工具（图3-13）。在Dreamweaver选项中，选择新建一个HTML文件，这是制作网页的前提（图3-14）。
图3-13
图3-14
②进入Dreamweaver主界面后，可以看到生成的标题、TITLE、BODY的相关代码，这是软件自动生成的，可以直接使用（图3-15）。
③在Dreamweaver代码的主界面中，选择代码、拆分、设计这三个选项卡中的“拆分”，因为这样可以更好地看到代码与相关设计表格的调整问题（图3-16）。
图3-15
图3-16
④选择“插入”命令中的表格选项（图3-17）。待选项框出现后，根据个人需要选择表格的行与列，还可以选择相关的标题、摘要。如图3-18所示，选择的是五行五列。(https://www.daowen.com)
图3-17
图3-18
⑤单击“确定”按钮后，界面会分成上、下两个部分，上面是代码区域，下面是相关表格区域（图3-19）。
图3-19
⑥表格制作好后，可根据个人需要对表格进行调整，用拖动鼠标的办法来调整表格的大小（图3-20）；也可以在代码中调整网页表格的大小，通过修改长与宽的数值来实现（图3-21）。
图3-20
图3-21
⑦最后在表格中插入需要的文字、图片、视频等元素，编辑相关属性，完成对网页的设置，最终实现网页效果。
⑧保存文件。在PS中将文档储存为“HTML”格式（图3-22）。在DW中打开文档，你会发现切片均已被转换成了“表格”（图3-23）。
图3-22
图3-23
⑨文件保存好后，可在Dreamweaver页面中按“F12”键浏览网页效果（图3-24）。
图3-24
