1.5 创建HTML文件

一个网页可以简单得只有几个文字，也可以复杂得像一张或几张海报。任意文本编辑器都可以用于编写网页源代码，当前比较流行的网页编辑器是HBuilder。使用HBuilder编辑HTML文档的操作非常简单。在HBuilder的代码窗口中手工输入代码，有助于设计人员对网页结构和样式有更深入的了解。

下面通过使用HBuilder网页编辑器创建一个只有文本组成的简单页面，来学习网页的编辑、保存和浏览过程。

1.创建Web项目

①打开HBuilder，单击工具栏中的按钮，在弹出的下拉列表中选择“Web项目”选项，如图1-6所示，弹出“创建Web项目”对话框，如图1-7所示。

②单击对话框中的“浏览”按钮，打开“浏览文件夹”对话框，选择用于存放网站页面的盘符或事先建立好的文件夹，例如，这里选择D盘，如图1-8所示。单击“确定”按钮后，返回“创建Web项目”对话框，在“项目名称”文本框中输入项目名称，例如，输入“web”，如图1-9所示。单击“完成”按钮，Web项目“web”创建成功。

2.创建栏目目录

当一个Web项目创建成功后，会自动生成一个默认的主页文件index.html和用于存放网站图像、CSS样式和JavaScript脚本的目录，如图1-10所示。

一个Web项目中可以包含多个应用栏目目录。例如，在上面建立的Web项目（其路径为D:\web）中建立一个目录ch1，其对应的路径为“D:\web\ch1”，专门用于存放本书中第1章的所有案例。

①在Web项目上单击右键，在弹出的菜单中单击“新建”菜单项，接着在弹出的子菜单中单击“目录”菜单项，如图1-11所示。

②打开“新建文件夹”对话框，输入要建立的文件夹名称“ch1”，如图1-12所示。单击“完成”按钮，生成的目录如图1-13所示。

以此类推，后面的章节也会建立用于存放该章节案例的目录。

3.创建HTML文件

①在栏目目录ch1上单击右键，在弹出的菜单中单击“新建”菜单项，接着在弹出的子菜单中单击“HTML文件”菜单项，如图1-14所示。打开“创建文件向导”对话框，在“文件名”文本框中输入要建立的文件名，例如，“first.html”，如图1-15所示。

②单击“完成”按钮，生成HTML文件first.html，代码窗口中的默认代码如图1-16所示。在代码窗口中输入简单的HTML代码，内容如图1-17所示。

③单击工具栏上的按钮，保存网页。

4.浏览网页

单击工具栏上的谷歌浏览器按钮，启动浏览器，网页的显示结果如图1-18所示。