In this exercise you will add the project resources to the project and edit the index.html file to add links to the resources and add some CSS rules. You will see how a few simple CSS selectors when combined with JavaScript can significantly change how a page is displayed in a browser.
-
Download the project resources archive and extract the contents.
The ZIP archive contains two folders with files that you need to add to the project: pix and css .
-
Copy the
pixandcssfolders into the Site Root folder.
Note: If you are looking at the directory structure of the project, you need to copy the folders into the public_html folder.
Figure 27. NetBeans menu in the Chrome browser tab
-
Open
index.htmlin the editor (if it is not already open).
-
In the editor, add references to the JavaScript libraries that you added when you created the project by adding the following code (in bold) between the opening and closing
<head>tags.
<html>
<head>
<title></title>
<meta charset=UTF-8">
<meta name="viewport" content="width=device-width">
*<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>*
</head>
<body>
TODO write content
</body>
</html>You can use the code completion in the editor to help you.
Figure 28. Code completion in the editor
-
Remove the default ‘TODO write content’ comment and type the following code between the
bodytags.
<body>
<div>
<h3><a href="#">Mary Adams</a></h3>
<div>
<img src="pix/maryadams.jpg" alt="Mary Adams">
<ul>
<li><h4>Vice President</h4></li>
<li><b>phone:</b> x8234</li>
<li><b>office:</b> 102 Bldg 1</li>
<li><b>email:</b> [email protected]</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">John Matthews</a></h3>
<div>
<img src="pix/johnmatthews.jpg" alt="John Matthews">
<ul>
<li><h4>Middle Manager</h4></li>
<li><b>phone:</b> x3082</li>
<li><b>office:</b> 307 Bldg 1</li>
<li><b>email:</b> [email protected]</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Sam Jackson</a></h3>
<div>
<img src="pix/samjackson.jpg" alt="Sam Jackson">
<ul>
<li><h4>Deputy Assistant</h4></li>
<li><b>phone:</b> x3494</li>
<li><b>office:</b> 457 Bldg 2</li>
<li><b>email:</b> [email protected]</li>
</ul>
<br clear="all">
</div>
<h3><a href="#">Jennifer Brooks</a></h3>
<div>
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
<ul>
<li><h4>Senior Technician</h4></li>
<li><b>phone:</b> x9430</li>
<li><b>office:</b> 327 Bldg 2</li>
<li><b>email:</b> [email protected]</li>
</ul>
<br clear="all">
</div>
</div>
</body>-
Save your changes.
When you save your changes the page automatically reloads in the browser and the page should look similar to the following image.
Figure 29. Reloaded page in in the Chrome browser tab
-
Type the following inline CSS rules between the
<head>tags in the file.
<style type="text/css">
ul {list-style-type: none}
img {
margin-right: 20px;
float:left;
border: 1px solid;
}
</style>Press Ctrl-Space to use the code completion in the editor when you add the CSS rules.
Figure 30. Code completion of CSS rules in the editor
If you open the Browser DOM window you can see the current structure of the page.
Figure 31. Browser DOM window showing DOM tree
-
Add the following link to the style sheet (in bold) between the
<head>tags.
<head>
...
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
*<link type="text/css" rel="stylesheet" href="css/basecss.css">*
...
</head>The basecss.css style sheet is based on some of the CSS rules that are defined in the custom CSS style sheet in the jQuery “UI lightness” theme.
You can open the basecss.css style sheet in the editor and modify the style sheet to add the CSS rules that you added in the previous step or create a new style sheet for the CSS rules.
-
Add the following code between the
<head>tags to run a jQuery script when the elements in the page are loaded.
*<script type="text/javascript">
$(document).ready(function() {
});
</script>*
</head>jQuery works by connecting dynamically-applied JavaScript attributes and behaviors to elements of the DOM (Document Object Model). The jQuery instructions that are used in this example must be executed only after all of the elements of the DOM have been loaded by the browser. This is important because jQuery behaviors connect to elements of the DOM, and these elements must be available to jQuery in order to get the results we expect. jQuery takes care of this for us through its built-in (document).ready function, which follows the jQuery object, represented by $.
You can also use the following abbreviated version of this function.
$(function(){
});The instructions for jQuery take the form of a JavaScript method, with an optional object literal representing an array of parameters, and must be placed between the curly braces {} inside the (document).ready function in order to execute only at the proper time, which is after the DOM has completely loaded.
-
Add the following code (in bold) inside the
(document).readyfunction, between the braces{}.
<script type="text/javascript">
$(document).ready(function() {
*$("#infolist").accordion({
autoHeight: false
});*
});
</script>
</head>This code will invoke the jQuery accordion widget script that is included in the jQuery UI library. The accordion script will modify the elements within the DOM object that is identified as infolist . In this code, #infolist is a CSS selector connected to a unique DOM element that has an id attribute with the value infolist. It is connected using typical JavaScript dot notation (‘.’) to the jQuery instruction that uses the accordion() method to display this element.
In the next step you will identify an element in the page as infolist .
You also specified ‘autoHeight: false’ in the above snippet. This prevents the accordion widget from setting the height of each panel based on the highest content part contained within the markup. For more information, consult the accordion API documentation.
The <head> section of the index.html file should look as follows.
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="css/basecss.css">
<style type="text/css">
ul {list-style-type: none}
img {
margin-right: 20px;
float:left;
border: 1px solid;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#infolist").accordion({
autoHeight: false
});
});
</script>
</head>You can tidy up your code by right-clicking in the editor and choosing Format.
-
Modify the
<div>element that encloses the page contents by adding the followingidselector and value (in bold).
<body>
<div *id="infolist"*>This <div> element encloses the contents of the page (the four sets of <h3> tags and <div> tags that you added earlier in the tutorial).
You can add the selector to the element in the Edit CSS Rules dialog box. To open the Edit CSS Rules dialog box, right-click in the <div> tag in the editor and choose Edit CSS Rules in the popup menu. Alternatively, if the insert cursor is in the <div> tag in the editor you can click the Edit CSS Rules button (
) in the CSS Styles window (Window > Web > CSS Styles).
Figure 32. CSS Styles window
In the CSS Rules dialog box, select id as the Selector Type and type infolist as the Selector. Confirm that Apply Changes to the Element is selected.
Figure 33. Edit CSS Rules dialog box
When you click OK in the dialog box a CSS rule for the infolist selector is automatically added to the basecss.css style sheet.
-
Save your changes to
index.html(Ctrl-S; ⌘-S on Mac).
When you save your changes the page in the web browser reloads automatically. You can see that the layout of the page has changed and that the page now uses the CSS style rules that are defined in the basecss.css style sheet. One of the lists below the <h3> is open but the others are now collapsed. You can click an <h3> element to expand the list.
Figure 34. The final project loaded in the browser
The jQuery accordion function now modifies all the page elements that are contained in the infolist DOM object. In the Navigator window you can see the structure of the HTML file and that the div element that is identified by id=infolist .
Figure 35. Browser DOM window
You can right-click on an element in the Navigator window and choose Go To Source to quickly navigate to the location of that element in the source file.
In the Browser DOM window you can see the DOM elements in the page that is rendered in the browser and the JQuery styles that are applied to the elements.
Figure 36. Browser DOM window
When Inspect in NetBeans Mode is enabled in the browser, when you select an element in the browser window the element is highlighted in the Browser DOM window.
Saving the Project as a Site Template
You can save your project as a site template that you can use as a template to create other HTML5 sites that are based on the project. The site template can include JavaScript libraries, CSS files, images and templates for HTML files. The IDE provides a wizard to help you select the files that you want to include in the site template.
-
Right-click the project in the Projects window and choose Save as Template in the popup menu.
-
Type HTML5DemoSiteTemplate in the Name field and specify the location where you want to save the template.
-
Confirm that all the files are selected. Click Finish.
If you expand the nodes in the tree in the dialog box you can see the files that will be included in the site template.
Figure 37. Create Site Template dialog box
You can see that the site template will include the index.html file, the CSS style sheet, the images used in the project, though not the JavaScript libraries since Bower can be used by anyone using the template to manage the libraries. The site template can also include any configuration files and tests.
When you click Finish the IDE will generate the site template as a .zip archive.
When you want to create a project that is based on the site template you specify the location of the .zip archive in the Site Template panel of the New Project wizard.
