You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by gi...@apache.org on 2019/02/10 10:28:03 UTC
[incubator-netbeans-website] branch asf-site updated: Automated
site publishing by Jenkins build 591
This is an automated email from the ASF dual-hosted git repository.
git-site-role pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/incubator-netbeans-website.git
The following commit(s) were added to refs/heads/asf-site by this push:
new 3e909a2 Automated site publishing by Jenkins build 591
3e909a2 is described below
commit 3e909a297bdc4db3df3f2d02eb162094cc612519
Author: jenkins <bu...@apache.org>
AuthorDate: Sun Feb 10 10:28:01 2019 +0000
Automated site publishing by Jenkins build 591
---
.../kb/docs/webclient/html5-gettingstarted.html | 295 +++++++++++++++------
1 file changed, 214 insertions(+), 81 deletions(-)
diff --git a/content/kb/docs/webclient/html5-gettingstarted.html b/content/kb/docs/webclient/html5-gettingstarted.html
index ed2510c..58f42f1 100644
--- a/content/kb/docs/webclient/html5-gettingstarted.html
+++ b/content/kb/docs/webclient/html5-gettingstarted.html
@@ -216,9 +216,18 @@ The IDE will open the Chrome Web Store in the default browser. If Chrome is not
<p>Choose File > New Project to open the New Project wizard.</p>
</li>
<li>
-<p>Select <strong>HTML5/JS Application</strong> in the <strong>HTML/JavaScript</strong> category. Click Next.
-image::images/html5-newproject1.png[title="HTML5 Application template in the New Project wizard"]</p>
+<p>Select <strong>HTML5/JS Application</strong> in the <strong>HTML/JavaScript</strong> category. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-newproject1.png" alt="html5 newproject1">
+</div>
+<div class="title">Figure 1. HTML5 Application template in the New Project wizard</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Specify a Name and Location for the project. Click Next.</p>
</li>
@@ -228,7 +237,7 @@ image::images/html5-newproject1.png[title="HTML5 Application template in the New
<p>For this exercise the name is not important.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="4">
<li>
<p>Select No Site Template. Click Finish.</p>
</li>
@@ -238,7 +247,7 @@ image::images/html5-newproject1.png[title="HTML5 Application template in the New
<p>When you click Finish the IDE creates a new HTML5 project and opens <code>index.html</code> in the editor.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Confirm that Chrome with NetBeans Integration is selected in the dropdown list in the toolbar.</p>
</li>
@@ -246,31 +255,41 @@ image::images/html5-newproject1.png[title="HTML5 Application template in the New
<p>Click Run in the toolbar.</p>
</li>
<li>
-<p>Click Go to Chrome Web Store in the Install Chrome Extension dialog box.
-image::images/html5-offline-extension1.png[title="Install Chrome Extension dialog box"]</p>
+<p>Click Go to Chrome Web Store in the Install Chrome Extension dialog box.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-offline-extension1.png" alt="html5 offline extension1">
+</div>
+<div class="title">Figure 2. Install Chrome Extension dialog box</div>
+</div>
<div class="paragraph">
<p>When you click Go to Chrome Web Store the NetBeans Connector page in the Chrome Web Store opens in the Chrome browser.</p>
</div>
<div class="paragraph">
-<p><strong>Note.</strong> The Install Chrome Extension displays a button that you will click after the extension is installed.</p>
+<p>Note: The Install Chrome Extension displays a button that you will click after the extension is installed.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="images/html5-rerun-dialog.png" alt="html5 rerun dialog">
</div>
-<div class="title">Figure 1. Install Chrome Extension dialog box</div>
+<div class="title">Figure 3. Install Chrome Extension dialog box</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
-<p>Go to the Chrome browser and click Add to Chrome in the NetBeans Connector page. Click Add when you are prompted to confirm that you want to add the extension.
-image::images/html5-chrome-netbeanshome.png[title="NetBeans Connector page in the Chrome Web Store"]</p>
+<p>Go to the Chrome browser and click Add to Chrome in the NetBeans Connector page. Click Add when you are prompted to confirm that you want to add the extension.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-chrome-netbeanshome.png" alt="html5 chrome netbeanshome">
+</div>
+<div class="title">Figure 4. NetBeans Connector page in the Chrome Web Store</div>
+</div>
<div class="paragraph">
<p>When the extension is installed you will see a notification that the extension was added and that the NetBeans Connector icon will be visible in the URL location bar when you run a NetBeans HTML5 project in the Chrome browser.</p>
</div>
@@ -278,10 +297,10 @@ image::images/html5-chrome-netbeanshome.png[title="NetBeans Connector page in th
<div class="content">
<img src="images/html5-install-extension2.png" alt="html5 install extension2">
</div>
-<div class="title">Figure 2. Confirmation in that extension was installed</div>
+<div class="title">Figure 5. Confirmation in that extension was installed</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>In the IDE, Click Re-Run Project in the Install Chrome Extension dialog box.</p>
</li>
@@ -300,7 +319,7 @@ image::images/html5-chrome-netbeanshome.png[title="NetBeans Connector page in th
<div class="content">
<img src="images/html5-install-extension3.png" alt="html5 install extension3">
</div>
-<div class="title">Figure 3. NetBeans Connector extension is enabled in Chrome Extensions</div>
+<div class="title">Figure 6. NetBeans Connector extension is enabled in Chrome Extensions</div>
</div>
<div class="admonitionblock note">
<table>
@@ -323,11 +342,16 @@ Alternatively, you can install the NetBeans Connector extension directly from th
<p>Search the Chrome Web Store for the Netbeans Connector extension.</p>
</li>
<li>
-<p>Click Add To Chrome in the search results page and click Add when you are prompted to add the extension.
-image::images/html5-install-extension1.png[title="NetBeans Connector extension in Chrome Web Store"]</p>
+<p>Click Add To Chrome in the search results page and click Add when you are prompted to add the extension.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-install-extension1.png" alt="html5 install extension1">
+</div>
+<div class="title">Figure 7. NetBeans Connector extension in Chrome Web Store</div>
+</div>
</div>
<div class="sect2">
<h3 id="_offline_installation_of_the_extension">Offline Installation of the Extension</h3>
@@ -337,17 +361,44 @@ image::images/html5-install-extension1.png[title="NetBeans Connector extension i
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Click Not Connected in the Install Chrome Extension dialog box.
-image::images/html5-offline-extension1.png[title="Install Chrome extension dialog box"]</p>
+<p>Click Not Connected in the Install Chrome Extension dialog box.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-offline-extension1.png" alt="html5 offline extension1">
+</div>
+<div class="title">Figure 8. Install Chrome extension dialog box</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>Click <strong>locate</strong> in the dialog box to open the NetBeans IDE installation folder on your local system that contains the * <code>netbeans-chrome-connector.crx</code> * extension.
-image::images/html5-offline-extension2.png[title="NetBeans Connector extension is enabled in Chrome Extensions"]</p>
+<p>Click <strong>locate</strong> in the dialog box to open the NetBeans IDE installation folder on your local system that contains the * <code>netbeans-chrome-connector.crx</code> * extension.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-offline-extension2.png" alt="html5 offline extension2">
+</div>
+<div class="title">Figure 9. NetBeans Connector extension is enabled in Chrome Extensions</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Open the Chrome extensions page ( <code>chrome://extensions/</code> ) in your Chrome browser.
-image::images/html5-offline-extension3.png[title="NetBeans Connector extension is enabled in Chrome Extensions"]</p>
+<p>Open the Chrome extensions page ( <code>chrome://extensions/</code> ) in your Chrome browser.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-offline-extension3.png" alt="html5 offline extension3">
+</div>
+<div class="title">Figure 10. NetBeans Connector extension is enabled in Chrome Extensions</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
<p>Drag the <code>netbeans-chrome-connector.crx</code> extension into the Extensions page in the browser and click Add to confirm that you want to add the extension.</p>
</li>
@@ -357,7 +408,7 @@ image::images/html5-offline-extension3.png[title="NetBeans Connector extension i
<p>After the extension is added you will see that the NetBeans Connector extension is added to the list of installed extensions.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Click <strong>Yes, the plugin is installed now</strong> in the Install Chrome Extension dialog box to open the NetBeans HTML5 project in the Chrome browser. You will see the NetBeans Connector icon in the location bar of the browser tab.</p>
</li>
@@ -393,9 +444,18 @@ When you choose Window > Web > Web Browser in the main menu the IDE opens
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Select Embedded WebKit Browser in the dropdown list in the toolbar.
-image::images/html5-embedded1.png[title="List of target browsers for HTML5 applications in the dropdown list in the toolbar"]</p>
+<p>Select Embedded WebKit Browser in the dropdown list in the toolbar.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-embedded1.png" alt="html5 embedded1">
+</div>
+<div class="title">Figure 11. List of target browsers for HTML5 applications in the dropdown list in the toolbar</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
<p>Click Run in the toolbar or right-click the project node in the Projects window and choose Run.</p>
</li>
@@ -408,7 +468,7 @@ image::images/html5-embedded1.png[title="List of target browsers for HTML5 appli
<div class="content">
<img src="images/html5-embedded2.png" alt="html5 embedded2">
</div>
-<div class="title">Figure 4. Embedded WebKit Browser window</div>
+<div class="title">Figure 12. Embedded WebKit Browser window</div>
</div>
<div class="paragraph">
<p>You can click the icons in the toolbar of the Web Browser tab to enable Inspect mode and to quickly switch between different display sizes.</p>
@@ -427,18 +487,32 @@ image::images/html5-embedded1.png[title="List of target browsers for HTML5 appli
<p>Select File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) in the main menu to open the New Project wizard.</p>
</li>
<li>
-<p>Select the <strong>HTML5/JavaScript</strong> category and then select <strong>HTML5/JS Application</strong>. Click Next.
-image::images/html5-newproject1.png[title="HTML5 Application template in the New Project wizard"]</p>
+<p>Select the <strong>HTML5/JavaScript</strong> category and then select <strong>HTML5/JS Application</strong>. Click Next.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-newproject1.png" alt="html5 newproject1">
+</div>
+<div class="title">Figure 13. HTML5 Application template in the New Project wizard</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
<p>Type <strong>HTML5Demo</strong> for the Project Name and specify the directory on your computer where you want save the project. Click Next.</p>
</li>
<li>
-<p>In Step 3. Site Template, select No Site Template. Click Next.
-image::images/html5-newproject2.png[title="Site Templates panel in the New HTML5 Application wizard"]</p>
+<p>In Step 3. Site Template, select No Site Template. Click Next.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-newproject2.png" alt="html5 newproject2">
+</div>
+<div class="title">Figure 14. Site Templates panel in the New HTML5 Application wizard</div>
+</div>
<div class="paragraph">
<p>When you select the No Site Template option the wizard generates a basic empty NetBeans HTML5 project. If you click Finish now the project will only contain a Site Root folder and an <code>index.html</code> file in the Site Root folder.</p>
</div>
@@ -458,11 +532,20 @@ You must be online to create a project that is based on one of the online templa
</table>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
-<p>In Step 4. Tools, select only "Bower", which is the standard HTML5 dependency management tool that you can use via the IDE.
-image::images/html5-newproject3.png[title="Tools panel in the New HTML5 Application wizard"]</p>
+<p>In Step 4. Tools, select only "Bower", which is the standard HTML5 dependency management tool that you can use via the IDE.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-newproject3.png" alt="html5 newproject3">
+</div>
+<div class="title">Figure 15. Tools panel in the New HTML5 Application wizard</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic">
<li>
<p>Click <strong>Finish</strong> to complete the wizard.</p>
</li>
@@ -475,17 +558,26 @@ image::images/html5-newproject3.png[title="Tools panel in the New HTML5 Applicat
<div class="content">
<img src="images/html5-projectswindow1.png" alt="html5 projectswindow1">
</div>
-<div class="title">Figure 5. JavaScript Libraries panel in the New HTML5 Application wizard</div>
+<div class="title">Figure 16. JavaScript Libraries panel in the New HTML5 Application wizard</div>
</div>
<div class="paragraph">
<p>You can now test that your project displays correctly in the Chrome browser.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
-<p>Confirm that Chrome with NetBeans Connector integration is selected in the browser dropdown table in the toolbar.
-image::images/html5-js-selectbrowser.png[title="Browser selected in dropdown list in toolbar"]</p>
+<p>Confirm that Chrome with NetBeans Connector integration is selected in the browser dropdown table in the toolbar.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-js-selectbrowser.png" alt="html5 js selectbrowser">
+</div>
+<div class="title">Figure 17. Browser selected in dropdown list in toolbar</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="8">
<li>
<p>Right-click the project node in the Projects window and choose Run.</p>
</li>
@@ -498,7 +590,7 @@ image::images/html5-js-selectbrowser.png[title="Browser selected in dropdown lis
<div class="content">
<img src="images/html5-runproject.png" alt="html5 runproject">
</div>
-<div class="title">Figure 6. Application in the Chrome browser tab</div>
+<div class="title">Figure 18. Application in the Chrome browser tab</div>
</div>
<div class="paragraph">
<p>You will notice that there is a yellow bar in the browser tab that notifies you that the NetBeans Connector is debugging the tab. The IDE and the browser are connected and are able to communicate with each other when the yellow bar is visible. When you launch an HTML5 application from the IDE the JavaScript debugger is automatically enabled. When you save changes to a file or make changes to a CSS style sheet you do not need to reload the page because the browser window is automatical [...]
@@ -513,7 +605,7 @@ image::images/html5-js-selectbrowser.png[title="Browser selected in dropdown lis
<div class="content">
<img src="images/html5-runproject2.png" alt="html5 runproject2">
</div>
-<div class="title">Figure 7. NetBeans menu in the Chrome browser tab</div>
+<div class="title">Figure 19. NetBeans menu in the Chrome browser tab</div>
</div>
<div class="paragraph">
<p>If you select one of the default devices in the menu the browser window will resize to the dimensions of the device. This enables you to see how the application will look on the selected device. HTML5 applications are usually designed to respond to the size of the screen of the device on which they are viewed. You can use JavaScript and CSS rules that respond to the screen size and modify how the application is displayed so that the layout is optimized for the device.</p>
@@ -529,21 +621,57 @@ image::images/html5-js-selectbrowser.png[title="Browser selected in dropdown lis
<div class="olist arabic">
<ol class="arabic">
<li>
-<p>Right-click the project and choose Properties.
-image::images/html5-bower-1.png[title="bower1"]</p>
+<p>Right-click the project and choose Properties.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-bower-1.png" alt="html5 bower 1">
+</div>
+<div class="title">Figure 20. bower1</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="2">
<li>
-<p>If Bower has not been installed, you will see the tab below. Click Configure Bower. If Bower has been installed, skip to step 5 below.
-image::images/html5-bower-2.png[title="bower2"]</p>
+<p>If Bower has not been installed, you will see the tab below. Click Configure Bower. If Bower has been installed, skip to step 5 below.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-bower-2.png" alt="html5 bower 2">
+</div>
+<div class="title">Figure 21. bower2</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="3">
<li>
-<p>Click the Install Bower link and go through the steps required for setting up Bower. To use Bower, you will also need Node, NPM, and Git. All these are standard tools used in the JavaScript ecosystem. Familiarize yourself with them if needed before continuining.
-image::images/html5-bower-3.png[title="bower3"]</p>
+<p>Click the Install Bower link and go through the steps required for setting up Bower. To use Bower, you will also need Node, NPM, and Git. All these are standard tools used in the JavaScript ecosystem. Familiarize yourself with them if needed before continuining.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-bower-3.png" alt="html5 bower 3">
+</div>
+<div class="title">Figure 22. bower3</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="4">
<li>
-<p>Specify the location of the Bower installation. Click Apply.
-image::images/html5-bower-4.png[title="bower4"]</p>
+<p>Specify the location of the Bower installation. Click Apply.</p>
</li>
+</ol>
+</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-bower-4.png" alt="html5 bower 4">
+</div>
+<div class="title">Figure 23. bower4</div>
+</div>
+<div class="olist arabic">
+<ol class="arabic" start="5">
<li>
<p>Back in the Bower tab, search for the <code>jquery</code> and <code>jqueryui</code> JavaScript libraries. By default the libraries are created in the <code>public_html/bower_components</code> folder of the project. Change the <code>.bowerrc</code> file in your project, if you want the libraries to be installed in a different folder.</p>
</li>
@@ -556,7 +684,7 @@ image::images/html5-bower-4.png[title="bower4"]</p>
<div class="content">
<img src="images/html5-bower-5.png" alt="html5 bower 5">
</div>
-<div class="title">Figure 8. bower5</div>
+<div class="title">Figure 24. bower5</div>
</div>
<div class="admonitionblock note">
<table>
@@ -589,16 +717,21 @@ For this tutorial, choose the latest version of the libraries.
<div class="content">
<img src="images/html5-bower-6.png" alt="html5 bower 6">
</div>
-<div class="title">Figure 9. bower6</div>
+<div class="title">Figure 25. bower6</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
-<p>Click OK and Bower will download the JavaScript libraries and, once the process is complete, you should see them in the Projects window.
-image::images/html5-bower-7.png[title="bower7"]</p>
+<p>Click OK and Bower will download the JavaScript libraries and, once the process is complete, you should see them in the Projects window.</p>
</li>
</ol>
</div>
+<div class="imageblock">
+<div class="content">
+<img src="images/html5-bower-7.png" alt="html5 bower 7">
+</div>
+<div class="title">Figure 26. bower7</div>
+</div>
</div>
</div>
<div class="sect1">
@@ -618,23 +751,23 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<p>The ZIP archive contains two folders with files that you need to add to the project: <code>pix</code> and <code>css</code> .</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="2">
<li>
<p>Copy the <code>pix</code> and <code>css</code> folders into the Site Root folder.</p>
</li>
</ol>
</div>
<div class="paragraph">
-<p><strong>Note.</strong> If you are looking at the directory structure of the project, you need to copy the folders into the <code>public_html</code> folder.</p>
+<p>Note: If you are looking at the directory structure of the project, you need to copy the folders into the <code>public_html</code> folder.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="images/html5-fileswindow.png" alt="html5 fileswindow">
</div>
-<div class="title">Figure 10. NetBeans menu in the Chrome browser tab</div>
+<div class="title">Figure 27. NetBeans menu in the Chrome browser tab</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="3">
<li>
<p>Open <code>index.html</code> in the editor (if it is not already open).</p>
</li>
@@ -645,7 +778,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><html>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><html>
<head>
<title></title>
<meta charset=UTF-8">
@@ -666,10 +799,10 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-editor1.png" alt="html5 editor1">
</div>
-<div class="title">Figure 11. Code completion in the editor</div>
+<div class="title">Figure 28. Code completion in the editor</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="5">
<li>
<p>Remove the default ‘TODO write content’ comment and type the following code between the <code>body</code> tags.</p>
</li>
@@ -732,7 +865,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="6">
<li>
<p>Save your changes.</p>
</li>
@@ -745,10 +878,10 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-runproject3.png" alt="html5 runproject3">
</div>
-<div class="title">Figure 12. Reloaded page in in the Chrome browser tab</div>
+<div class="title">Figure 29. Reloaded page in in the Chrome browser tab</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="7">
<li>
<p>Type the following inline CSS rules between the <code><head></code> tags in the file.</p>
</li>
@@ -756,7 +889,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><style type="text/css">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><style type="text/css">
ul {list-style-type: none}
img {
margin-right: 20px;
@@ -773,7 +906,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/html5-editor2.png" alt="html5 editor2">
</div>
-<div class="title">Figure 13. Code completion of CSS rules in the editor</div>
+<div class="title">Figure 30. Code completion of CSS rules in the editor</div>
</div>
<div class="paragraph">
<p>If you open the Browser DOM window you can see the current structure of the page.</p>
@@ -782,10 +915,10 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<div class="content">
<img src="images/dom-browser.png" alt="dom browser">
</div>
-<div class="title">Figure 14. Browser DOM window showing DOM tree</div>
+<div class="title">Figure 31. Browser DOM window showing DOM tree</div>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="8">
<li>
<p>Add the following link to the style sheet (in <strong>bold</strong>) between the <code><head></code> tags.</p>
</li>
@@ -793,7 +926,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><head>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><head>
...
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>
*<link type="text/css" rel="stylesheet" href="css/basecss.css">*
@@ -808,7 +941,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<p>You can open the <code>basecss.css</code> 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.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="9">
<li>
<p>Add the following code between the <code><head></code> tags to run a jQuery script when the elements in the page are loaded.</p>
</li>
@@ -816,7 +949,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"> *<script type="text/javascript">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"> *<script type="text/javascript">
$(document).ready(function() {
});
@@ -832,7 +965,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-java" data-lang="java">$(function(){
+<pre class="prettyprint highlight"><code class="language-javascript" data-lang="javascript">$(function(){
});</code></pre>
</div>
@@ -841,7 +974,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
<p>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 <code>{}</code> inside the <code>(document).ready</code> function in order to execute only at the proper time, which is after the DOM has completely loaded.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="10">
<li>
<p>Add the following code (in bold) inside the <code>(document).ready</code> function, between the braces <code>{}</code>.</p>
</li>
@@ -849,7 +982,7 @@ image::images/html5-bower-7.png[title="bower7"]</p>
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"> <script type="text/javascript">
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"> <script type="text/javascript">
$(document).ready(function() {
*$("#infolist").accordion({
autoHeight: false
@@ -882,7 +1015,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
</div>
<div class="listingblock">
<div class="content">
-<pre class="prettyprint highlight"><code class="language-xml" data-lang="xml"><html>
+<pre class="prettyprint highlight"><code class="language-html" data-lang="html"><html>
<head>
<title></title>
<meta charset="UTF-8">
@@ -913,7 +1046,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<p>You can tidy up your code by right-clicking in the editor and choosing Format.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="11">
<li>
<p>Modify the <code><div></code> element that encloses the page contents by adding the following <code>id</code> selector and value (in bold).</p>
</li>
@@ -935,7 +1068,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/html5-cssstyles.png" alt="html5 cssstyles">
</div>
-<div class="title">Figure 15. CSS Styles window</div>
+<div class="title">Figure 32. CSS Styles window</div>
</div>
<div class="paragraph">
<p>In the CSS Rules dialog box, select <code>id</code> as the Selector Type and type <strong>infolist</strong> as the Selector. Confirm that Apply Changes to the Element is selected.</p>
@@ -944,13 +1077,13 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/html5-cssrules.png" alt="html5 cssrules">
</div>
-<div class="title">Figure 16. Edit CSS Rules dialog box</div>
+<div class="title">Figure 33. Edit CSS Rules dialog box</div>
</div>
<div class="paragraph">
<p>When you click OK in the dialog box a CSS rule for the <code>infolist</code> selector is automatically added to the <code>basecss.css</code> style sheet.</p>
</div>
<div class="olist arabic">
-<ol class="arabic">
+<ol class="arabic" start="12">
<li>
<p>Save your changes to <code>index.html</code> (Ctrl-S; ⌘-S on Mac).</p>
</li>
@@ -963,7 +1096,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/html5-runproject5.png" alt="html5 runproject5">
</div>
-<div class="title">Figure 17. The final project loaded in the browser</div>
+<div class="title">Figure 34. The final project loaded in the browser</div>
</div>
<div class="paragraph">
<p>The jQuery accordion function now modifies all the page elements that are contained in the <code>infolist</code> DOM object. In the Navigator window you can see the structure of the HTML file and that the <code>div</code> element that is identified by <code>id=infolist</code> .</p>
@@ -972,7 +1105,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/navigator3.png" alt="navigator3">
</div>
-<div class="title">Figure 18. Browser DOM window</div>
+<div class="title">Figure 35. Browser DOM window</div>
</div>
<div class="paragraph">
<p>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.</p>
@@ -984,7 +1117,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/dom-browser3.png" alt="dom browser3">
</div>
-<div class="title">Figure 19. Browser DOM window</div>
+<div class="title">Figure 36. Browser DOM window</div>
</div>
<div class="paragraph">
<p>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.</p>
@@ -1014,7 +1147,7 @@ You also specified ‘autoHeight: false’ in the above snippet. This pr
<div class="content">
<img src="images/html5-sitetemplate.png" alt="html5 sitetemplate">
</div>
-<div class="title">Figure 20. Create Site Template dialog box</div>
+<div class="title">Figure 37. Create Site Template dialog box</div>
</div>
<div class="paragraph">
<p>You can see that the site template will include the <code>index.html</code> 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.</p>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists