1.5 创建HTML文件
4 HBuilder X编辑HTML文件-2
一个网页可以简单得只有几个文字，也可以复杂得像一张或几张海报。任意文本编辑器都可以用于编写网页源代码，当前比较流行的网页编辑器是HBuilder。使用HBuilder编辑HTML文档的操作非常简单。在HBuilder的代码窗口中手工输入代码，有助于设计人员对网页结构和样式有更深入的了解。
下面通过使用HBuilder网页编辑器创建一个只有文本组成的简单页面，来学习网页的编辑、保存和浏览过程。
1.创建Web项目
①打开HBuilder，单击工具栏中的
按钮，在弹出的下拉列表中选择“Web项目”选项，如图1-6所示，弹出“创建Web项目”对话框，如图1-7所示。
图1-6 创建Web项目
图1-7 “创建Web项目”对话框
②单击对话框中的“浏览”按钮，打开“浏览文件夹”对话框，选择用于存放网站页面的盘符或事先建立好的文件夹，例如，这里选择D盘，如图1-8所示。单击“确定”按钮后，返回“创建Web项目”对话框，在“项目名称”文本框中输入项目名称，例如，输入“web”，如图1-9所示。单击“完成”按钮，Web项目“web”创建成功。
图1-8 “浏览文件夹”对话框
图1-9 设置结果
2.创建栏目目录
当一个Web项目创建成功后，会自动生成一个默认的主页文件index.html和用于存放网站图像、CSS样式和JavaScript脚本的目录，如图1-10所示。
一个Web项目中可以包含多个应用栏目目录。例如，在上面建立的Web项目（其路径为D:\web）中建立一个目录ch1，其对应的路径为“D:\web\ch1”，专门用于存放本书中第1章的所有案例。
①在Web项目上单击右键，在弹出的菜单中单击“新建”菜单项，接着在弹出的子菜单中单击“目录”菜单项，如图1-11所示。
图1-10 Web项目包含的默认内容
图1-11 新建目录
②打开“新建文件夹”对话框，输入要建立的文件夹名称“ch1”，如图1-12所示。单击“完成”按钮，生成的目录如图1-13所示。
图1-12 Web项目包含的默认内容
图1-13 生成的目录
以此类推，后面的章节也会建立用于存放该章节案例的目录。
3.创建HTML文件
①在栏目目录ch1上单击右键，在弹出的菜单中单击“新建”菜单项，接着在弹出的子菜单中单击“HTML文件”菜单项，如图1-14所示。打开“创建文件向导”对话框，在“文件名”文本框中输入要建立的文件名，例如，“first.html”，如图1-15所示。
图1-14 新建HTML文件
图1-15 “创建文件向导”对话框
②单击“完成”按钮，生成HTML文件first.html，代码窗口中的默认代码如图1-16所示。在代码窗口中输入简单的HTML代码，内容如图1-17所示。
图1-16 新建HTML文件的默认代码
图1-17 输入简单的HTML代码
③单击工具栏上的
按钮，保存网页。
4.浏览网页
单击工具栏上的谷歌浏览器按钮
，启动浏览器，网页的显示结果如图1-18所示。
图1-18 网页的显示结果