网页开发与制作 初识HTML5 1-1建站.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 2 PAGE 3 接下来使用Dreamweaver CS6来创建一个HTML5页面。具体步骤如下： 打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”，如图1-3所示。 执行“文件”→“新建”命令 新建HTML5默认文档 点击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-4所示。 HTML5文档代码视图窗口 修改HTML5文档标题，将代码title与title标记中的“无标题文档”，修改为“第一个网页”。然后，在body与/body标记之间添加一段文本“这是我的第一个HTML5页面哦”，具体代码如例1-1所示。 example01.html !doctype html html lang=en head meta charset=UTF-8 title第一个网页/title /head body 这是我的第一个HTML5页面哦 /body /html 在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出来的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件。例如，本书将文件命名为example01.html，保存在D盘“HTML5+CSS3”文件夹下“教材案例”的“chapter01”文件夹中，如图1-5所示。 “另存为”对话框 在谷歌浏览器中运行example01.html，效果如图1-6所示。 第一个HTML5页面效果 此时，浏览器窗口中将显示一段文本，第一个简单的HTML5页面创建完成。 注意： 由于谷歌浏览器对HTML5及CSS3的兼容性支持较好，而且调试网页非常方便，所以在HTML5网页制作过程中谷歌浏览器是最常用的浏览器。本书涉及的案例将全部在谷歌浏览器中运行。