netbeans 可以写html5,HTML5 应用程序入门

在本练习中，您会将项目资源添加到项目，并编辑 index.html 文件以添加指向资源的链接，然后添加几个 CSS 规则。您可以看到，将一些简单的 CSS 选择器与 JavaScript 结合使用即可显著更改页面在浏览器中的显示。

下载项目资源归档文件并提取内容。

Zip 归档文件包含两个文件夹，其中带有需要添加到项目的文件： pix 和 css 。

将 pix 和 css 文件夹复制到站点根文件夹。

*注：*如果要查看项目的目录结构，需要将文件夹复制到 public_html 文件夹。

Figure 19. Chrome 浏览器标签中的 NetBeans 菜单

在编辑器中打开 index.html(如果尚未打开)。

在编辑器中，通过在

左右标记之间添加以下代码(粗体)来添加引用，指向在创建项目时添加的 JavaScript 库。

*

*

TODO write content

您可以在编辑器中使用代码完成功能来获取帮助。

Figure 20. 编辑器中的代码完成功能

删除默认的 TODO write content 注释，并在 body 标记之间键入以下代码。

Mary Adams

• Vice President

• phone: x8234
• office: 102 Bldg 1
• email: m.adams@company.com

John Matthews

• Middle Manager

• phone: x3082
• office: 307 Bldg 1
• email: j.matthews@company.com

Sam Jackson

• Deputy Assistant

• phone: x3494
• office: 457 Bldg 2
• email: s.jackson@company.com

Jennifer Brooks

• Senior Technician

• phone: x9430
• office: 327 Bldg 2
• email: j.brooks@company.com

保存所做的更改。

保存更改时，将在浏览器中自动重新加载页面，其外观应该类似于以下图像。

Figure 21. 在 Chrome 浏览器标签中重新加载的页面

在文件的

标记之间键入以下内联 CSS 规则。

ul {list-style-type: none}

img {

margin-right: 20px;

float:left;

border: 1px solid;

}

添加 CSS 规则时，在编辑器中按 Ctrl-Space 可使用代码完成功能。

Figure 22. 编辑器中 CSS 规则的代码完成功能

打开 "Browser DOM"(浏览器 DOM)窗口可以看到页面的当前结构。

Figure 23. 显示 DOM 树的 "Browser DOM"(浏览器 DOM)窗口

将以下样式表链接(粗体)添加到

标记之间。

...

**

...

``basecss.css`` 样式表基于在 jQuery "UI lightness" 主题的定制 CSS 样式表中定义的一些 CSS 规则。

可以在编辑器中打开 basecss.css 样式表并修改样式表，用于添加在之前步骤中添加的 CSS 规则或者为 CSS 规则创建新样式表。

在

标记之间添加以下代码以便在加载页中的元素时运行 jQuery 脚本。

*

$(document).ready(function() {

});

*

jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM(文档对象模型)元素连接在一起。本例中使用的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，以便得到预期结果。jQuery 通过其内置的 (document).ready 函数帮助实现此目的，该函数在 jQuery 对象之后，由 $ 表示。

还可以使用此函数的以下缩写版。

$(function(){

});

jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字面值来表示参数数组，且必须置于 (document).ready 函数内的花括号 {} 之间，从而只在合适的时间执行，也就是在 DOM 完全加载后。

在 (document).ready 函数的花括号 {} 内输入下面的代码(粗体)。

$(document).ready(function() {

*$("#infolist").accordion({

autoHeight: false

});*

});

此代码将调用包含在 jQuery UI 库中的 jQuery 折叠窗口部件脚本。折叠脚本将修改标识为 infolist 的 DOM 对象中的元素。在此代码中，#infolist 是一个 CSS 选择器，连接到一个唯一的 DOM 元素中，该元素有一个值为 infolist 的 id 属性。它使用典型的 JavaScript 点表示法 (“.”) 连接到使用 accordion() 方法的 jQuery 指令，以显示此元素。

在下一步中，将页中的元素标识为 infolist 。

*注：*您还在上面的代码片段中指定了 autoHeight: false。这样可以防止可折叠面板窗口部件根据标记内包含的最高内容部分设置每个面板的高度。有关详细信息，请参见可折叠面板 API 文档。

index.html 文件的

部分应该类似于以下内容。

ul {list-style-type: none}

img {

margin-right: 20px;

float:left;

border: 1px solid;

}

$(document).ready(function() {

$("#infolist").accordion({

autoHeight: false

});

});

通过在编辑器中单击右键并选择 "Format"(格式化代码)可以清理代码。

通过添加以下 id 选择器和值(粗体)，修改包含页面内容的

元素。

此

元素包含页面的内容(在本教程前面部分中添加的四组

标记和

标记)。

在 "Edit CSS Rules"(编辑 CSS 规则)对话框中，可以将选择器添加到元素。要打开 "Edit CSS Rules"(编辑 CSS 规则)对话框，请在编辑器中右键单击

标记，然后在弹出式菜单中选择 "Edit CSS Rules"(编辑 CSS 规则)。或者，如果插入光标位于编辑器中的

标记内，则可以在 "CSS Styles"(CSS 样式)窗口("Window"(窗口)> "Web" > "CSS Styles"(CSS 样式))中单击 "Edit CSS Rules"(编辑 CSS 规则)按钮 ( )。

Figure 24. "CSS Styles"(CSS 样式)窗口

在 "CSS Rules"(CSS 规则)对话框中，为 "Selector Type"(选择器类型)选择 id ，然后为 "Selector"(选择器)键入 infolist。确认选中了 "Apply Changes to the Element"(应用对元素的更改)。

Figure 25. "Edit CSS Rules"(编辑 CSS 规则)对话框

在对话框中单击 "OK"(确定)时， infolist 选择器的 CSS 规则将自动添加到 basecss.css 样式表。

将更改保存到 index.html (Ctrl-S；在 Mac 上为 ⌘-S)。

保存更改时，Web 浏览器中的页面将自动加载。可以看到，页面的布局已更改，现在页面将使用在 basecss.css 样式表中定义的 CSS 样式规则。将打开

下的一个列表，但其他列表现在折叠。可以单击

元素以展开列表。

Figure 26. 最终项目加载到浏览器中

jQuery 折叠函数现在将修改 infolist DOM 对象中包含的所有页面元素。在 "Navigator"(导航器)窗口中，可以查看 HTML 文件的结构以及由 id=infolist 标识的 div 元素。

Figure 27. "Browser DOM"(浏览器 DOM)窗口

可以在 "Navigator"(导航器)窗口中右键单击某个元素并选择 "Go To Source"(转至源)以快速导航到该元素在源文件中的位置。

在 "Browser DOM"(浏览器 DOM)窗口中，可以查看在浏览器中呈现的页中 DOM 元素以及应用到这些元素的 JQuery 样式。

Figure 28. "Browser DOM"(浏览器 DOM)窗口

如果在浏览器中启用了 "Inspect in NetBeans"(在 NetBeans 中检查)模式，则在浏览器窗口中选择某个元素时，将在 "Browser DOM"(浏览器 DOM)窗口中突出显示此元素。