Dreamweaver怎么制作一个网页,如何保存网页?

如何用DW制作网页并保存网页呢?我就在这里教给大家最基础的创建网页和保存网页。

操作方法

  • 01

    启动软件后,在左上角点击【文件】,在下拉菜单中点击【新建】。

  • 02

    在弹出的窗口中选择【html】,文档类型可以根据需要选择,在这里我选择【html5】,然后点击【创建】按钮。

  • 03

    点击创建后,软件就会自动为你创建一个网页必不可少的代码,网页的框架和内容都要写在<body></body>标签中间。

  • 04

    我们点击顶部中间的【拆分】,可以把中间编辑的部分分成两屏,下面是代码,上面是预览图,方便我们查看在下面编写代码的效果。在这里我写入一个DIV标签为例<div>这是一个DIV</div>。上面就会显示出内容效果。

  • 05

    然后我们可以为DIV标签写一个样式【<div style="width: 100px; height: 100px; background: #ff0000;">这是一个DIV</div>】。width代表宽、height代表高、background代表背景,#ff0000代表颜色色值。我们可以看下上半部分显示的预览效果。

  • 06

    我们还可以给我们创建的网页起一个名字,名字写在<title></title>标签中。如下图

  • 07

    如果我们想直接在浏览器中查看制作的效果,可以点击右下角的小图标,在上拉列表中点击浏览器名称,或按快捷键【F12】。

  • 08

    按快捷键【F12】后,会弹出一个保存的窗口,因为我们刚才创建网页后还没有保存过网页,所以需要先保存一下。直接点击【是】,选择好要保存的位置,填写好名字,点击【保存】。

  • 09

    点击保存后,网页会自动保存,然后会直接跳出浏览器,打开你刚才保存的网页,这时就可以看到我们编辑的网页的真实效果啦,浏览器顶部标签位置也会显示出刚才我修改的网页标题名称。

  • 10

    如果在预览之前你想先保存网页,可以在顶部菜单中选择【文件】-【另存为】,然后把网页文件保存到你想保存的位置。这时候再按【F12】就不需要再次保存了,会直接跳转到浏览器中打开你创建的页面哦

(0)

相关推荐

  • html网页制作入门:怎么制作一个网页?

    html网页制作入门,怎么制作一个网页呢?下面我们就来看一下详细的操作吧. 操作方法 01 想要做一个网页,首先要找到一个合适的代码编辑软件,我这边使用的是Notepad++. 02 打开软件之后,点 ...

  • 使用记事本快速制作一个网页

    用系统自带的记事本,输入简单的代码,来制作一个网页的全过程. 操作方法 01 在桌面的空白处单击右键,会弹出一个快捷菜单,我们选"新建", 02 此时会弹出新建的下拉菜单,在这里我 ...

  • Dreamweaver CS6 制作一个简单网页

    以实例说明Dreamwaver CS 6版本的应用.即使现在用很多有关DreamwaverCS6版本的书籍资料,但是资料太过复杂,反而不知道从而下手.这篇将以本人说说Dreamwaver CS6 的使 ...

  • html网页制作入门:[1]怎么制作一个网页?

    我们每天上网,每天都用搜索找到很多网页,是不是觉得很高深莫测,您知道这个网页是怎么开发制作的吗?其实很简单,跟着小编一起开启您的网页制作之路吧! 操作方法 01 首先我们在电脑桌面或者硬盘的任意位置右 ...

  • 用记事本如何制作一个"网页"?

    你有在学校遇到过有人用记事本编写网页的吗?可能大家还不清楚,今天小编就教大家如何通过代码生成一个网页,下面就教大家,一起去看看吧! 操作方法 01 首先,你需要新建一个记事本,我这里在磁盘的某个文件夹 ...

  • 如何用html制作一个网页(怎么做html网页)

    把txt文件变成html网页文件如果您看过<HTML是什么?--零基础自学网页制作>这篇教程,请按照其中说明创建一个txt文件.具体过程如下:step1:在您方便的磁盘中建立一个文件夹,命 ...

  • 怎样快速制作一个网页

    有时候我们遇到一些问题要咨询一下朋友,例如制作班服的方案,总得搜罗一下各种风格的班服图片给各位同学看一看,说不定还得一些配上文字说明.这时总不可能把图片一张一张的发给人家吧,乱七八糟的.不过可以配成一 ...

  • Axure RP Pro怎么制作一个网页展示原型?

    开发前端功能,少不了原型设计,一个好的工具,帮助我们设计更好的原型——合适的页面展示,流畅的页面跳转.页面交互. 1.创建你所需要的页面,并将你需要完成的原型,画在空白区域内,选择要添加的组件:其中需 ...

  • 使用Dreamweaver CS 6 制作动态网页需要了解的

    如果你对Dreamweaver 一无所知,或者在链接数据库制作动态网页时遇到了麻烦,那你在使用之前你可能要了解DW CS6不适合制作动态网页 操作方法 01 如果你想用Dreamweaver cs6 ...