网页设计与制作
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.4 HTML文件的编写方法

1-2 使用记事本手工编写HTML文件

HTML文件的编写方法有两种：一种是利用记事本编写；另一种是在Dreamweaver中编写。

1.4.1 使用记事本手工编写HMTL文件

HTML是一款以文字为基础的语言，并不需要什么特殊的开发环境，直接在Windows自带的记事本中编写就可以。HTML文档以．html为扩展名，将HTML源代码输入记事本并保存之后，可以在浏览器中打开文档以查看其效果。使用记事本编写HTML文件的具体操作步骤如下：

步骤1：选择“开始”→“所有程序”→“附件”→“记事本”命令，打开一个记事本，在记事本中即可编辑HTML代码，如图1-3所示。

图1-3 编辑HTML代码

步骤2：当编辑完HTML文件后，选择“文件”菜单中的“保存”命令，弹出“另存为”对话框，将它存为扩展名为．html或．htm的文件即可，如图1-4所示。

图1-4 “另存为”对话框

步骤3：单击“保存”按钮，保存文档。打开网页文档，在浏览器中预览效果，如图1-5所示。

图1-5 浏览效果

注意：任何文字处理器都可以用来处理HTML代码，但必须记住，要以．html的扩展名对其加以保存。

1.4.2 使用Dreamweaver编写HTML文件

1-3 使用DREAMWEAVER编写HTML文件

“工欲善其事，必先利其器”，虽然使用记事本可以编写HTML文件，但是编写效率太低，对于语法错误及格式都没有提示，因此，很多专门编写HTML网页的工具弥补了这种缺陷。Adobe公司的Dreamweaver用户软件界面非常友好，是一款非常优秀的网页开发工具，深受广大用户的喜爱。Dreamweaver CS5的主界面如图1-6所示。

图1-6 Dreamweaver CS5的主界面

1．文档窗口

文档窗口位于界面的中部，它是用来编排网页的区域，与在浏览器中的结构相似。在文档窗口中，可以将文档分为三种视图显示模式。

① 代码视图。使用代码视图，可以在文档窗口中显示当前文档的源代码，可以在该窗口中直接键入HTML代码。

② 设计视图。设计视图下，无须编辑任何代码，可以直接使用可视化的操作编辑网页。

③ 拆分视图。拆分视图下，左半部分显示代码视图，右半部分显示设计视图。在这种视图模式下，可以通过键入HTML代码直接观看效果，还可以通过设计视图插入对象，直接查看源文件。

在各种视图间进行切换时，只需在文档工具栏中单击相应的视图按钮即可。文档工具栏如图1-7所示。

图1-7 文档工具栏

2．“插入”面板

“插入”面板是在设计视图下使用频度很高的面板之一。“插入”面板默认打开的是“常用”页，它包括了最常用的一些对象，例如，在文档中的光标位置插入一段文本、图像或表格等。用户可以根据需要切换到其他页。

3．“属性”面板

“属性”面板中主要包含当前选择的对象的相关属性设置。可通过菜单栏中的“窗口”下的“属性”命令或Ctrl+F3快捷键打开或关闭“属性”面板。

“属性”面板是常用的一个面板，因为无论要编辑哪个对象的属性，都要用到它。其内容也会随着选择对象的不同而改变。

Dreamweaver中还有很多面板，在以后使用时，再做详细讲解。打开的面板越多，编辑文档的区域就会越小，为了便于编辑文档，可以通过F4功能键快速隐藏和显示所有面板。

使用Dreamweaver编写HTML文件的具体操作步骤如下。

步骤1：启动Dreamweaver，如图1-8所示，在欢迎屏幕的“新建”栏中选择“HTML”选项，或者选择菜单栏中的“文件”下的“新建”命令。

图1-8 包含欢迎屏幕的主界面

步骤2：弹出“新建文档”对话框，如图1-9所示，在“页面类型”列表中选择“HTML模板”选项。

图1-9 “新建文档”对话框

步骤3：单击“创建”按钮，创建HTML文件，如图1-10所示。

图1-10 在设计视图下显示创建的文档

步骤4：在文档工具栏中，单击“代码”按钮，切换到代码视图，如图1-11所示。

图1-11 在代码视图下显示创建的文档

步骤5：修改HTML文档标题，将代码中<title>标记中的“无标题文档”修改成“第一个网页”，然后在<body>标记中键入“这是使用Dreamweaver编写的第一个网页。”。完整的HTML代码如下所示：

      <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>第一个网页</title>
      </head>
      <body>
      <h1>这是使用Dreamweaver编写的第一个网页。</h1>
      </body>
      </html>

步骤6：保存文件。从菜单栏中选择“文件”下的“保存”命令或按Ctrl+S快捷键，弹出“另存为”对话框。在该对话框中选择保存位置，并输入文件名，单击“保存”按钮，如图1-12所示。

图1-12 保存文件

步骤7：单击文档工具栏中的“浏览”图标，选择查看网页的浏览器，或按下F12功能键，预览效果如图1-13所示。

图1-13 浏览器预览效果

上一章目录下一章