下载掌阅APP，畅读海量书库
立即打开
了解并掌握HTML的基本语法是开始制作网页的基础。本节介绍网页的组成要素，以及如何直接使用HTML源代码来设计一个网页。
静态网页一般都以html或者htm作为后缀，以区别于动态网页。HTML文件实际上是一种文本文件，因此，可以用普通的文本编辑工具来查看或修改HTML文件。
一个最基本的静态网页的源代码如下：
在上面的代码中，第1行是<html>，最后1行是</html>，这两个标签组成一个完整的html元素，所有的内容都位于这两个标签之间。其中第1行表示HTML文件的开始，最后1行表示HTML文件结束。第2行是一个<head>标签，这个标签与第4行的</head>标签配对，一起组成head元素。在head元素中是一些关于本HTML文档本身的描述信息。在本例中，head元素里面有一个title元素。title元素是文档的标题信息，这个信息会显示在浏览器最上面的标题栏里。
head元素后面是<body>标签，这个标签表示文档正文的开始，而倒数第2行的</body>标签表示文档正文的结束，这两个标签组成body元素。在body元素内部，有一个p元素。p元素表示HTML文档中的段落。<p>标签和</p>标签之间的文本构成一个段落。
打开记事本程序，输入前面所示的源代码，保存为firstPage.html。然后用浏览器打开该文件，就可以看到网页内容，如图2-1所示。
图2-1 一个基本的html网页
由于每种Web服务器都可以设置资源类型的处理程序映射，因此后缀为html或者htm的不一定是HTML静态网页。
在2.1.1节中，介绍了静态网页的基本构成，以及如何用记事本来编写一个简单网页。本节介绍如何使用可视化网页设计工具Adobe Dreamweaver来创建一个静态网页，其操作步骤如下。
step 1 打开Adobe Dreamweaver CS6，选择“文件”→“新建”命令，打开“新建文档”对话框。在“页面类型”列表框中选择“HTML”选项，在“布局”列表框中选择“<无>”选项，单击“创建”按钮，关闭对话框，如图2-2所示。
图2-2 “新建文档”对话框
step 2 Dreamweaver CS6工作区的左边是文档窗口，在这里可以显示代码视图、设计视图或者两者同时显示。在文档工具栏里面单击“拆分”按钮，则文档窗口被拆分成两部分，上面一部分是代码视图，下面一部分是设计视图。在设计视图里面，输入如图2-3所示的第一行内容，然后按回车键，再输入第二行内容。在设计视图里面输入文字的同时，上面的代码视图里面的内容也随之改变。
图2-3 Dreamweaver CS6工作区
step 3 选择“文件”→“保存”命令，在出现的“另存为”对话框里面输入secondPage.html作为文件名，单击“保存”按钮，如图2-4所示。
step 4 找到刚才保存的secondPage.html文件，双击该文件用浏览器打开它，显示效果如图2-5所示。
图2-4 “另存为”对话框
图2-5 用Dreamweaver制作的网页