Dreamweaver创建网页步骤详解(跟着做一学就会出活)

发布日期： 2025-11-02 阅读量： 作者： admin

行，今天折腾了半天Dreamweaver，琢磨着给大伙儿分享下从头建个网页的详细过程。咱就实话实说，按我实际操作的时间线来，一个步骤一个步骤捋，保证大伙儿跟着做就能出活。

第一步：打开家伙事儿，新建文件

我先双击桌面那个Dreamweaver图标，这玩意儿启动不算快，等它加载那会儿功夫我都泡了杯茶。进去之后，左上角找“文件”，点开，再戳“新建”。

弹出来个框，一堆选项。我直接选最上面那个“HTML”，下面什么“文档类型”咱先不管，默认的“HTML5”就成，保准错不了。然后最底下有个“创建”，戳它！一个崭新的空白页面就蹦出来了。

空文件有了，但得先给它找个“家”，专业点叫建站点。为不建站点，后面图片啥的容易找不着。还是点“文件”，下拉找“新建站点”。

又弹个框出来，左边选“站点”，右边填东西。

站点名字：瞎写就行，我输入“我的测试站点”。
本地站点文件夹：这个关键！点右边那个小文件夹图标，跳出来个对话框。我在D盘现建了个叫“测试用”的文件夹，选中它，然后点“选择”或者“确定”。（记住你选这个文件夹在哪！待会东西都存这里）

下边还有个“服务器”啥的，现在不用管，直接点最下面“保存”。搞定，站点算是有个窝了。

回到刚才那个空白的编辑页面，默认已经有点基础代码了。鼠标直接点在代码区里面，开始敲。

我先在 <body> 和 </body> 标签中间敲，这儿就是页面显示内容的地儿。

光有文字不行，得弄张图。我先提前把一张叫“测试图.jpg”的图片，复制到刚才建站时那个“测试用”文件夹里。

回到Dreamweaver，把鼠标光标放到刚才那段文字后面，打算把图插在这儿。顶部菜单找“插入”，点开，下拉找“图像”，再点“图像”。

蹦出来个框，让选图片。因为建了站点，它会自动跳转到你那个站点文件夹（就是“测试用”文件夹）。在里面找到“测试图.jpg”，选中，点“确定”。

注意！我这儿还报了个错！它问我啥“缺少替换文本”（Alt文本）。这玩意儿是给看不到图片的人听的描述。我随手在对话框里输入了“这是一张测试用的图片”，再点“确定”。

搞定！页面设计视图上，文字下面立马显示出图片了，代码里也多了一行 <img src="测试图.jpg" alt="这是一张测试用的图片">。

写也写了，图也加了，总得看看在浏览器里啥样子？Dreamweaver右上角找那个带小地球仪的图标（或者直接按F12），点它下拉菜单，选“预览在IExxx”(或者你常用的浏览器，比如Chrome也成)。

哗一下，浏览器就打开了，清清楚楚显示着我刚才敲的大标题、那段话和下面那张图。感觉还挺像那么回事！

差点忘了最重要的！点顶部菜单“文件”，点“保存”。又弹框，它自动定位到咱建站点的那个“测试用”文件夹了，在文件名那儿输入“我的第一个网页.html”，点“保存”。大功告成！到文件夹里一瞧，文件好端端在那儿。

折腾这一圈，感觉Dreamweaver对新手还挺友好的，尤其那个设计视图能实时看效果，边写代码边看，心里踏实不少。最关键就是建站点那步别省，图片文件往站点文件夹里丢就对了。真按我上面这些动作一步一步来，你也马上就能鼓捣出自己的小网页！别忘了存盘前在浏览器瞅一眼效果，那种成就感，啧。