其实很多人一听到“建网页”这三个字，第一反应就是得学代码、得懂编程，脑子里浮现的全是密密麻麻的英文和符号。但真相是，早在二十多年前，Adobe公司就出了一款叫Dreamweaver的神器，简称DW，它最大的价值就是让你不用写一行代码，也能把网页弄出来。你打开它，界面跟Word差不多，左边是设计视图，右边是代码区，你可以在设计视图里直接拖拽图片、打字、调颜色，DW会自动帮你生成背后的HTML代码。你就像在拼乐高，只要把部件摆好，剩下的苦力活DW替你干完。

不过我得先泼盆冷水：DW虽然能省掉写代码的麻烦，但想用它建出真正能上线的网站，你至少得搞明白三件事——域名、服务器、还有网站结构。域名就是你的网址，比如你的名字.com；服务器是你放网页文件的地方，相当于你在网上租了个硬盘；而网站结构，说白了就是你打算把首页、关于我们、联系方式这些页面怎么串起来。很多人第一步就卡在“我该从哪里打开DW”这种问题上，其实你下载安装好后，新建站点就行了，DW会帮你自动生成文件夹，你只要在里面放文件。

具体操作起来，第一步是打开DW，点“站点”菜单里的“新建站点”。这时候弹出一个窗口，让你填站点名称和本地文件夹路径。站点名称你自己随便起，比如“我的第一个网站”，但本地文件夹得选一个你电脑上容易找到的位置，比如桌面上新建一个叫“myweb”的文件夹。这一步特别重要，因为DW会把这个文件夹当作你所有网页文件的老家，以后你写的页面、放的图片、用的样式表，全得塞在这里面。你要是随便乱放，后面链接一断，网页上的图片就全变成红叉叉了。

站点建好之后，你就能看到DW右边有个“文件”面板，里面空空如也，就一个文件夹图标。这时候你要新建一个首页文件，右键点文件夹，选“新建文件”，文件名必须叫index.html。为啥？因为服务器默认第一个找的就是index.html，你叫别的名字，别人打你网址进去看到的会是404错误页面。双击这个index.html，DW会打开一个空白文档，上面有“设计”和“代码”两个标签。你点“设计”，就能像在Word里一样直接打字、插图片了。比如你想写个“欢迎来到我的个人网站”，打字，调字体大小、颜色，DW的工具栏里都有。

不过光打几个字也没意思，你得学会用表格来排版。在DW的设计视图里，点“插入”菜单里的“表格”，设成一行一列，宽度设成800像素，边框设成0。这个表格其实就是个无形的框，用来把你的内容固定住，不让它们随着浏览器窗口大小乱跑。你在表格里打字、放图片，整个页面看起来就规规矩矩的。你要是想做个多栏布局，就设成一行两列，左边放导航菜单，右边放正文内容。这些操作都不需要你碰代码，DW把表格的HTML结构全自动生成了。

但问题来了，你做的这个页面只是在你自己的电脑上能打开，别人根本看不到。你得把它上传到服务器上。DW自带一个叫“同步”或“上传”的功能，你点“站点”菜单里的“管理站点”，选中你的站点，点“编辑”，在弹出的窗口里找到“服务器”分类，点加号添加一个远程服务器。这里你需要填服务器的FTP地址、用户名和密码，这些东西你的域名商或者服务器提供商都会给你。填好后点“测试”，如果连接成功，你就能把所有文件从本地文件夹拖到远程服务器上了。这一步其实就跟你用百度网盘上传文件一样，只是服务器地址换成了FTP。

上传完之后，你打开浏览器，输入你的域名，就能看到你做的页面了。如果你发现图片显示不出来，别慌，十有八九是因为图片路径写错了。DW里插入图片时，最好把图片先复制到你的站点文件夹里，比如在myweb文件夹里再建一个叫images的文件夹，把图片放进去，然后在DW里点“插入”菜单里的“图像”，选中images文件夹里的图片。这样生成的路径是相对路径，比如“images/logo.jpg”，不管你把网站搬到哪台服务器，只要文件夹结构不变，图片就永远能显示。

说到这里，你可能觉得好像也不难，但真正让你头疼的其实是排版和样式。DW虽然有设计视图，但它的样式控制能力有限，你想要的细线、圆角、阴影这些效果，设计视图里做不出来，得在代码视图里写CSS。不过你别怕，DW有个很聪明的功能叫“CSS样式面板”，你在设计视图里选中一段文字，点右键选“CSS样式”，弹出来的窗口里可以调字体、颜色、背景、边框等等。每调一个属性，DW都会自动在代码里生成对应的CSS代码。你甚至不用理解什么是选择器、什么是属性值，因为你操作的是图形界面。

举个例子，你想让导航栏的背景色是深蓝色，文字是白色，鼠标悬停时变成浅蓝色。你可以先给导航栏的每个链接文字套上一个类，比如叫.nav-link，然后在CSS样式面板里设置背景色、文字颜色，再点“悬停”状态设置另一个颜色。DW会把所有这些写成一段CSS代码，放在页面的head部分。你只要复制粘贴，就能用在其他页面上。这比手写CSS省了至少一半的时间，而且不容易出错。

等你把首页做得差不多了，接下来就是做子页面。比如“关于我”页面、“作品集”页面、“联系我”页面。你可以在DW里右键站点文件夹，新建文件，分别叫about.html、works.html、contact.html。每个文件都按照首页的布局来，把表格、导航栏、样式都复制过去，然后改正文内容。导航栏里的链接要互相指，比如首页的导航栏里有个“关于我”链接，点开应该跳转到about.html。这个链接怎么加？你在设计视图里选中“关于我”这几个字，点“插入”菜单里的“超链接”，在链接框里输入about.html。DW会自动生成一个标签，指向那个文件。