1.3 HTML文件的编写方式
网页文件即扩展名为htm或html的文件，本质上是文本类型的文件，网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。
由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器来打开或编辑。例如，Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。
1.3.1 使用记事本编写
HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows操作系统自带的记事本中进行编辑，其优点是方便快捷，缺点是无任何语法提示、无行号提示和格式混乱等，初学者使用困难。
实战 使用记事本制作HTML页面
最终文件：最终文件\第1章\1-3-1.html 视频：视频\第1章\1-3-1.mp4
01 在Windows操作系统中执行“开始>所有程序>附件>记事本”命令，打开记事本窗口，如图1-1所示。在记事本中按正确的文档结构编写HTML页面代码，如图1-2所示。
图1-1 打开记事本窗口
图1-2 编写HTML代码
02 所编写的完整的页面HTML代码如下。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在记事本中编写HTML页面</title> </head> <body> <img src="images/1301.jpg" width="100%" height="auto"> </body> </html>
提示
此处所编写的HTML页面代码非常简单，主要在头部的<title>与</title>标签之间输入网页的标题，在页面主体内容<body>与</body>标签之间使用<img>标签插入一张图片，并且添加了图片宽度和高度属性的设置。
03 执行“文件>另存为”命令，将会弹出“另存为”对话框，将文件保存为“源文件\第1章\1-3-1.html”，如图1-3所示。单击“保存”按钮，即可将用记事本编写的HTML代码保存为网页文件，在浏览器中预览该网页文件，可以看到网页的效果，如图1-4所示。
图1-3 “另存为”对话框
图1-4 在浏览器中预览HTML页面
提示
在将记事本中编写的HTML代码保存为网页html格式时，需要注意“编码”选项的设置。默认情况下，需要将“编码”设置为UTF-8，否则，网页中的中文在浏览器中可能会显示为乱码。
1.3.2 使用Dreamweaver编写
Dreamweaver是网页制作的主流软件，其优点是有所见即所得的设计视图，能够通过鼠标指针拖放直接创建并编辑网页文件，自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，图1-5所示为Dreamweaver软件的工作界面。
图1-5 Dreamweaver工作界面
1. 菜单栏
菜单栏中包含了所有Dreamweaver CC操作所需要的命令。这些命令按照操作类别分为“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单。
2. 文档工具栏
文档工具栏包含一些按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如单击“实时视图”按钮
可以将设计视图切换到实时视图）。
3. 代码视图
该窗口将显示当前所编辑页面的相应代码，在代码窗口左侧是相应的代码工具，通过使用这些工具，可以在代码中插入注释，简化代码操作。
4. 设计视图
该窗口显示当前所制作页面的效果，也是可视化操作的窗口，可以在该窗口中使用各种工具实现输入文字、插入图像等，是所见即所得的视图。
5. 标签选择器
标签选择器位于“文档”窗口底部的状态栏左侧，可显示当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
6. “属性”面板
用于查看和更改所选对象或文本的各种属性。选中不同的对象，在“属性”面板中会显示不同的内容。
7. 面板组
用于帮助用户完成监控和修改工作，如“插入”面板、“CSS设计器”面板。双击相应的选项卡，可以折叠或展开当前选项卡。
在Dreamweaver的代码视图中会以不同的颜色显示HTML代码，帮助用户区分各种标签，同时用户也可以自己指定标签或代码的显示颜色。总体看来，代码视图更像是一个常规的文本编辑器，只要单击代码的任意位置，就可以开始添加或修改代码了，通过代码视图工具能够非常方便地对HTML代码进行编辑和调整，如图1-6所示。
图1-6
实战 使用Dreamweaver制作HTML页面
最终文件：最终文件\第1章\1-3-2.html 视频：视频\第1章\1-3-2.mp4
01 打开Dreamweaver，执行“文件>新建”命令，将会弹出“新建文档”对话框，选择HTML选项，如图1-7所示。单击“创建”按钮，新建HTML5文档，转换到代码视图中，可以看到文档的HTML代码，如图1-8所示。
图1-7 “新建文档”对话框
图1-8 网页HTML代码
02 执行“文件>保存”命令，将会弹出“另存为”对话框，将该网页保存为“源文件\第1章\1-3-2.html”，如图1-9所示。在页面的<title>与</title>标签之间输入网页的标题，如图1-10所示。
图1-9 “另存为”对话框
图1-10 输入网页标题
03 在<body>标签中添加style属性设置代码，如图1-11所示。在<body>与</body>标签之间编写相应的网页正文内容代码，如图1-12所示。
图1-11 添加style属性设置
图1-12 编写页面正文内容
提示
在<body>标签中添加style属性设置，实际上是CSS样式的一种使用方式，称为内联CSS样式。此处通过内联CSS样式设置页面整体的背景颜色、水平对齐方式、文字颜色和顶部边距。
04 完成该网页HTML代码的编写，完整的HTML代码如下。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用Dreamweaver制作HTML页面</title> </head> <body style="background-color:#06F; text-align:center; color:#FFF;margin-top:200px;"> <img src="images/1302.png" width="400" height="332" alt=""> <br><br> <b>欢迎光临我们的网站>></b> </body> </html>
05 执行“文件>保存”命令，保存网页，在浏览器中预览该网页，可以看到网页的效果，如图1-13所示。
图1-13 在浏览器中预览页面
提示
Dreamweaver是一款专业的网页制作软件，在Dreamweaver中新建HTML页面，会自动给出HTML文档结构的基础代码，编写HTML代码还具有代码提示等功能，非常适合初学者使用。