由於HTML网页设计的档案是标準的ASCII文字档，因此可以使用任意一个文字编辑器来打开并设计HTML档。例如Windows系统中内建的记事本．如果使用Dreamweaver等设计软体，则能以视觉化的方式进行网页的设计製作。
实例一：使用记事本编写HTML页面
操作步骤：
１.按一下＂开始>所有程式>附属应用程式>记事本＂命令，打开＂记事本＂。
２.在记事本中直接输入下面的HTML程式码：
<html>
<!--声明HTML页面开始-->
<head><!--声明HTML头部开始--></head><!--声明HTML头部结束-->
<body><!--声明HTML主体开始-->
第一个HTML文件
</body><!--声明HTML主体结束-->
</html>
<!--声明HTML页面结束-->
３.按一下记事本功能表列中的＂档案 > 储存档案＂命令，弹出＂另存為＂对话方块．
４.在＂保存类型＂中选择＂所有档＂，＂编码＂為ANSI，＂档案名＂為1-end.htm，按一下＂保存＂按钮．
５.关闭记事本，回到存档的资料夹，按两下1-end.htm档，可以在流览器中看见最终的页面效果．
实例二：使用Dreamweaver製作页面
操作步骤：
１.按一下＂开始＞所有程式＞Macromedia＞Macromedia Dreamweaver＂命令，启动软体的主程序．
２.按一下＂建立新档案＂中的HTML，进入页面编辑视窗．
在 Dreamweaver CS5 软体的主编辑环境中，视窗分為「程式码」、「分割」「设计」3种．
Dreamweaver默认进入的是程式码和设计检视，可以看到，软体上半部分的程式码视图和下半部分的设计检视是互相联繫密不可分的，在程式码视图中所做的任何修改都会影响到设计检视，反之亦然．
程式码：在视觉化网页的背后可以控制网页的原始程式码，如果想查看或编辑原始程式码，可以进入该视图．
设计：Dreamweaver是视觉化的网页编辑软体，所以设计检视是最常用的．设计检视中看到的网页外观和流览器中看到的基本上是一致的．
分割：在这种视图下，编辑视窗被分割成了上下两部分，上面显示的是原始程式码视图，下面是视觉化视图，这样就可以在选择和编辑原始程式码时即时地在视觉化视图中看到结构．
３.在空白的位置输入"Dreamweaver製作的最简单的页面＂文字，以此作為页面的正文．
４.按一下＂档案＂功能表下的＂储存＂命令，在对话方块中选择存档的位置，按照前面介绍的方法将档命名為 end.htm，然后按一下＂保存＂按钮，这样就又製作完成了一个页面．
５.关闭 Dreamweaver，回到存档的资料夹，按两下 end.htm 档，可以在流览器中看到最终的页面效果．
.png)