1.7 编写第一个HTML文件
1.7.1 HTML文件的编写方法
编写HTML文件主要有如下3种方法。
手工直接编写
由于HTML语言编写的文件是标准的ASCII文本文件，所以我们可以使用任何的文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。
使用可视化软件
Microsoft公司的FrontPage、Adobe公司的Dreamweaver和GoLive等软件均可以可视化的方式进行网页的编辑制作。
由Web服务器一方实时动态生成
这需要通过后端的网页编程来实现，如ASP、PHP等，一般情况下都需要数据库的配合。
1.7.2 手工编写页面
下面先使用记事本来编写我们的第一个HTML文件。操作步骤如下。
（1）选择“开始/程序/附件/记事本”命令，打开“记事本”程序，如图1.3所示。
图1.3 记事本
（2）在记事本中直接输入下面的HTML代码。
<html>
<head>
<title>简单的HTML文件</title>
</head>
<body text="blue">
<h2 align="center">HTML初露端倪</h2>
<hr>
<p>让我们一起体验超炫的HTML旅程吧</p>
</body>
</html>
（3）输入代码后，记事本中显示出代码的内容，如图1.4所示。
图1.4 显示了代码的记事本
（4）选择记事本菜单中的“文件/保存”命令，弹出如图1.5所示的“另存为”对话框。
图1.5 “另存为”对话框
（5）在对话框中选择存盘的文件夹，然后在“保存类型”中选择“所有文件”，在“编码”中选择ANSI，这里将“文件名”设置为1-2.htm，然后单击“保存”按钮。
（6）最后关闭记事本，回到存盘的文件夹，双击如图1.6所示的1-2.htm文件，可以在IE浏览器中看到最终页面效果，如图1.7所示。
图1.6 保存出的htm文件
图1.7 页面效果
1.7.3 使用可视化软件制作页面
Adobe Dreamweaver CC是一个全面的专业工具集，可用于设计并部署极具吸引力的网站和Web应用程序并提供强大的编辑环境以及功能强大且基于标准的WYSIWYG设计表面。Adobe Dreamweaver CC新版本使用了最新的技术加入了多屏幕预览、jQuery集成、CSS3/HTML5支持、尖端的实时视图渲染、移动UI构件、FTPS支持、智能编码协助集成FLV内容等全新功能。下面以Adobe Dreamweaver CC中文版为例，说明使用可视化网页编辑软件制作页面的方法。操作步骤如下。
（1）选择“开始/所有程序/Adobe Dreamweaver CC”命令，启动软件的主程序，其主界面如图1.8所示。
图1.8 Adobe Dreamweaver CC主界面
（2）在Adobe Dreamweaver工作区中可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使用户可以快速更改文档。Adobe Dreamweaver CC工作区布局如图1.9所示。
图1.9 Dreamweaver CC工作区布局
A——应用程序栏：应用程序窗口顶部包含一个工作区切换器、几个菜单（仅限Windows）以及其他应用程序控件。
B——文档工具栏：包含一些按钮，它们提供各种文档窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
C——文档窗口：显示用户当前创建和编辑的文档。
D——面板组：帮助用户监控和修改工作。例如，“插入”面板、“CSS样式”面板和“文件”面板。若要展开某个面板，可双击其选项卡。
E——标签选择器：位于文档窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
F——属性检查器：用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在编码器工作区布局中，属性检查器默认是不展开的。
G——文件面板：用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。文件面板还使用户可以访问本地磁盘上的全部文件，类似于Windows资源管理器（Windows）或Finder（Macintosh）。
（3）如图1.10所示，单击文档工具栏中的“拆分”按钮，在这种视图下，编辑窗口被分割成左右两部分，左侧显示的是源代码视图，右侧是可视化视图，这样可以在选择和编辑源代码的时候及时地在可视化视图中看到效果。这两部分是互相联系、密不可分的，在代码视图中所作的任何修改都会影响设计视图，反之亦然。
图1.10 代码视图和设计视图
（4）在如图1.11所示的位置输入“让我们一起体验超炫的HTML旅程吧”作为页面的正文。
图1.11 输入正文
（5）在如图1.12所示的位置输入“HTML初露端倪”作为页面的标题。
图1.12 输入标题
（6）选择“文件/保存”命令，在如图1.13所示的对话框中选择存储位置，将文件命名成1-1.html，然后单击“保存”按钮。
图1.13 保存页面
（7）双击1-1.html文件，可以在浏览器中直接看到运行后的效果，如图1.14所示。
图1.14 1-1.html页面效果
1.7.4 使用浏览器浏览HTML文件
不同公司有不同的浏览器，最著名的是微软公司的Internet Explorer。使用浏览器最核心的功能就是查看我们编写的HTML文件效果以及查看其他网站页面的源代码。下面将以Internet Explorer为例来讲解一下使用Internet Explorer浏览器浏览HTML的过程。
（1）启动Internet Explorer浏览器后，打开刚才所建立的HTML文件。
（2）选择“文件/打开”命令，然后在弹出的“打开”对话框中单击“浏览”按钮，如图1.15所示，找到硬盘中存放的网页文件，然后单击“打开”按钮，如图1.16所示，即可显示出编写的网页效果了。
图1.15 “打开”对话框
图1.16 选择要打开的文件
1.7.5 HTML开发的明日图书网
明日图书网的前台网页制作就是应用HTML编写完成的。下面我们来具体看一下实现明日图书网前台网页的源文件。查看源文件的步骤如下。
（1）打开浏览器，在地址栏中输入“http://www.mingribook.com”，然后按Enter键。
（2）页面显示了明日图书网的首页面。
（3）选择浏览器菜单栏中的“查看/源文件”命令，如图1.17所示。
图1.17 选择“查看/源文件”命令
（4）这样，系统自动地使用记事本来显示页面的源文件，如图1.18所示。
图1.18 页面的源文件