利用Dreamweaver调试HTML5代码
Dreamweaver是首套针对专业网页设计师和制作人员的视觉化网页开发工具，利用该工具可以非常轻松地制作出复杂功能的页面，历经多个版本的迭代，从之前的Dreamweaver1.x到现在的Dreamweaver CC 2017，功能逐步完善与强大。
接下来就带领大家走进Dreamweaver的世界，一起开发功能强大和界面优雅的页面。
利用Dreamweaver开发HTML5页面非常简单，只需要经过以下3个步骤，就可以开发出一个已添加好基本格式的HTML文件。
1点击Dreamweaver程序图标，进入开发工具的主界面，在界面中，点击“文件”菜单中的“新建”选项。
2点击“新建”选项按钮后，在弹出的对话框中，首先，选择需要创建文件的类型是“HTML”，然后，再从中间区域中的文档解析类型中选择“HTML5”，最后，点击“创建”按键完成。
2当在“创建文档”对话框中点击“创建”按钮后，便创建了一个名称为“Untitled-1”的HTML5页面文件。
在打开的代码开发主界面中，整体包括三个主要部分，代码开发区、站点与文件管理区、代码查看与管理区，接下来介绍下各区的功能。
（1）代码开发区负责整个页面文件代码的编写，左边的快捷图标为代码编写过程中使用的相关功能，如格式化、注释代码等。
（2）站点与文件管理区负责项目文件的打开，定位、增加、删除、重新命名等文件的操作，并且站点的全部文件都可以在该区域中查看到。
（3）代码查看与管理区负责源文件中代码结构的查看、标签的增加、删除；资源文件的查找、删除；同时，在该域还可以执行指定框架的函数。
4完成新建HTML5页面后，进入代码开发，开发过程中要不断保存源码文件，在保存之前，需要创建一个新的站点，将源码文件保存到该站点文件夹中，因此，先在开发主界面中点击“站点”菜单的“新建站点”选项。
5点击“新建站点”选项后，弹出站点新建的对话框，在该对话框中，选择“站点”，并输入站点的名称，如“我的网站”，同时选择保存站点页面的文件夹。
6在新增站点的界面中，点击“保存”按钮后，便在站点管理区域显示新建站点文件夹中的文件列表，此时，点击“文件”菜单中的“保存”按钮，将新建的“Untitled-1”文件重命名为“h3_1”，并保存至站点文件夹中。
后面项目中的所有页面将都保存在该站点文件夹中，在文件夹中还可以再新建子类文件夹，分级管理项目的图片、JavaScript、CSS样式文件。
1 功能需求
在新建名称为h3_1.html的页面中，以红色字体，居中方式显示“hello，强大的HTML5!”字样内容，根据上述功能。

2实现效果
页面文件h3_1.html在chrome浏览器执行后：
3源码分析
在上述示例的代码中，

根据上述功能，如果以元素使用

根据上述功能，如果以页面使用标签引入的方式来实现该功能，那么，在新建的名称为h3_2.html的页面文件中。

在上述中，通过link元素引入了另外一个名称为style.css的样式文件，该文件的功能是实现需求中指定样式的效果，因此，在HTML5文件下，新建一个名称为“css”文文件夹，在该文件夹下，创建一个名称为style.css文件。
/* CSS Document */
body{
background-color:blue;
font-size:13px;
color:white;
text-align:center;
}
2. 实现效果
添加样式后，页面文件h3_2.html在chrome浏览器执行后：
3. 源码分析
需要说明的是，上述三种添加样式的方法，仅是方式不同，实现的代码都是相同的，“background-color”属性用于设置“body”元素的颜色为“blue”,而“font-size”属性用于设置“body”元素中文字显示的字体大小为“13”,“px”为字体单位。
4. 案例实践
在页面中，使用link>标签引入样式的方式，实现一个红色背景，白色字体的长方形，并在长方形中，以居中的方式显示“漂亮，HTML5！”的字样。
与使用CSS类似，在页中使用JavaScript也有三种方式，分别是使用script>标签内部编写、使用事件属性直接绑定、使用script>标签外部导入，接下来分别以案例的方式来介绍。
1功能需求
在页面中，使用script>标签内部编写的方式添加JavaScript代码，代码的功能是在页面中输出“JavaScript是页面交互语言！”的字样，根据上述功能，新建一个名称为h3_3.html的页面文件。

2实现效果
添加样式后，页面文件h3_3.html在chrome浏览器执行后
3源码分析
在页面中，通过添加script>标签来声明编写JavaScript代码的区域，即script>标签中包含的内容是JavaScript代码。
在代码中，“//”为注释符，该符号后的代码不执行，只是用于显示和说明，“document”表示页面文档，“write”为输出内容的方法，“document.write”表示向页面文档中输出括号中指定的内容，由于是字符内容，因此，加上双引号，也可是是单引号。
4案例实践
在页面中，使用script>标签内部编写JavaScript代码的方式，实现向页面中输出两行指定任意文本内容的功能。
1 功能需求
在页面中，使用事件属性直接绑定的方式编写JavaScript代码，当点击一个按钮时，它变为灰色，即不可用，根据上述功能，新建一个名称为h3_4.html的页面文件。

2 实现效果
添加样式后，页面文件h3_4.html在chrome浏览器执行后：
3 源码分析
在上述页面的代码中，“onClick”是按钮元素的事件属性，表示按钮的“单击”事件，属性值表示事件触发时执行的代码，其中，“this”表示按钮元素本身，“disabled”表示不可用，“this.disabled=true”表示按钮本身不可用是真的，即按钮不可点击了。
4 案例实践
在页面中，使用事件属性直接绑定的方式编写JavaScript代码，实现当点击按钮后，按钮中显示的文字发生变化的功能。
1 功能需求
在页面中，使用script>标签外部导入的方式，在指定的标签位置中，向页面输出“这是导入JS文件后显示的内容”的字样，根据上述功能，新建一个名称为h3_5.html的页面文件。

在页面中，需要从外导入一个名称为js_5.js的JavaScript文件，它的功能是实现向页面中输出指定内容的字符内容。

2 实现效果
导入文件后，页面文件h3_5.html在chrome浏览器执行后
3 源码分析
在名称为js_5.js的JavaScript文件代码中，“var”表示定义变量的关键字，空格后为定义的变量名称“HTML”, “=”等号为赋值语句，“var HTML=”表示定义了一个名称为“HTML”的变量，并将引号中的字符内容赋值给这个变量。
此外，“document.write”方法中允许输出变量，而字符变量可以使用标签名与字符内容混合编写，因此，名称为“HTML”变量值为“h3>这是导入JS文件后显示的内容”
4. 案例实践
在页面中，使用script>标签外部导入的方式编写JavaScript代码，实现在页面中指定元素位置，输出带字体颜色功能的标签内容。
更多内容请添加微信：madongweikai，或扫描下方二维码添加