Dreamweaver CS6制作一个新闻网页首页的实例教程

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

1、打开DW，DW界面如图

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

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

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

5、在新闻网页文件夹下新建ldquo;imagesrdquo;文件，导入制作网页所需要的素材，这里所需要的素材都是图片

6、新建HTML，选择ldquo;创建rdquo;

7、在ldquo;标题rdquo;中输入ldquo;新闻网页首页rdquo;，转换到ldquo;设计rdquo;界面

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

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

10、在表格第一行第一列输入ldquo;用户名rdquo;，在第一行第二个表格插入ldquo;文件域rdquo;。然后是密码，同样的插入ldquo;文件域rdquo;。切换到ldquo;拆分rdquo;界面，选中密码对应的ldquo;文件域rdquo;，将ldquo;typerdquo;改为ldquo;passwordrdquo;

11、插入图像，不知道怎么填的话就一直选择ldquo;确定rdquo;即可

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

13、选中第二行，点击鼠标右键，选择ldquo;表格rdquo;，ldquo;合并单元格rdquo;

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

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

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

相关推荐：

Dreamweaver编辑网页预览的时候显示乱码该怎么办?

Dreamweaver怎么新建站点地图?dw编辑站点地图的方法

怎么格式化html代码? Dreamweaver格式化html代码的技巧

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!