>> More NetBeans IDE/Certain Functionality Documentation

Developing NetBeans IDE/Certain Pack Content for netbeans.org Publication (This title must match the string in the title tag.)

Contributed and maintained by your name here
March 2007
[Revision number: V1-2]
This publication is applicable to NetBeans IDE/Certain Pack 5.0 and 6.0 releases

Download PDF


This document is meant to assist NetBeans IDE/Certain Pack content contributors during the development process. In its initial form, the document will contain content examples to be used by content developers.

For more information about working with NetBeans IDE, see the Support and Docs page on the NetBeans web site.

Note: Wherever you see the icon, you can click to view a detailed interactive demonstration of the steps that are described in the tutorial.

Warning: This box is intended for warnings or notices that are related to drafts posted for customer review.

Expected duration: xxx minutes

Contents

  Content on this page applies to the NetBeans 6.0 IDE

Tutorial Requirements


intro-paragraph

Before you proceed, make sure you review the requirements in this section.

Prerequisites

Note the knowledge that the user needs to complete the tutorial. If better resources are available for beginners, link to them.

This tutorial assumes that you have some basic knowledge of, or programming experience with, the following technologies.

Software Needed for This Tutorial

List all the software that is needed and where to download it. For NetBeans builds, just link to http://www.netbeans.info/downloads/index.php. If the user can build on an example project, link to it here as well. Just include the example project in the zip file you send to the web team, and we will post it with the correct link.

Before you begin, you need to install the following software on your computer:

Notations Used in This Tutorial

If you use any variables, such as <NETBEANS_HOME> or <PROJECT_HOME>, list them here.

top

First H2 Heading


intro-paragraph

Subheading

Intro for subheading.

Note: A subheading at this level is not required. See Second H2 Heading for an example.



To Create Numbered Lists

  1. This is step 1. The new netbeans.css file has been updated to create double-spacing for list items.
  2. This is step 2. This line has one <br> tag to go to the next line for the feedback statement.
    This is feedback for step 2.
  3. This is step 3. This line has one <br> tag to go to the next line for the feedback statement.
    This is feedback for step 3. This line has two <br> tags at the end because a set of substeps follows.

    1. This is step a.
    2. This is step b.
  4. This is a step with a set of nested bullets.

    • This is a bullet item using the class tutorial to ensure the same spacing as the other <li> items.
    • This is a bullet item using the class tutorial to ensure the same spacing as the other <li> items.


To Place an Image Below a Step

  1. If the image is not wider than 600 px, place it directly under the step.

    • The image is enclosed in a center-aligned <p> tag, and the <li> tag is closed after the closing </p> tag.
    • Make sure you use the alt attribute on the <img> tag to provide alternate text for the image.

    Figure 1: Image in div Tag With Caption Text: Left-Aligned Image With Caption

    caption text

    Figure 2: Image in div Tag With Caption Text: Left-Aligned Image With Caption and Click to Enlarge

    caption text - Click to Enlarge
    Click to enlarge

    Figure 3: Image in div Tag With Caption Text: Center-Aligned Image With Caption and Click to Enlarge


    Click to enlarge

    The following code is used for the center-aligned placement of the image, with line breaks for readability.

    Code Example 1: Code for the Placement of the Center-Aligned Image
    <p align="center">
    
    	<img src="../../images/articles/nbentpack-tuts/sample_image_nolink.png"
    	alt="Sample image that does not require a link to the full version because the width of the image is not more than 600px">
    </p>
    
  2. If the image is wider than 600 px, you must scale-down the image so that it is not more than 600 px wide. You must then place the scaled-down image below the step, and use the image as a link to the full-size version of the image.

    • This image is wider than 600 px. This means that you have to create a resized version of the image and place the scaled down version directly in the text. The scaled down version of the image must provide a link to the full-size image.
    • The <a href> link and <img> tags are enclosed in a center-aligned <p> tag, and the <li> tag is closed after the closing <p> tag.
    • Use the title attribute on the <a href> link tag to provide text for the link, for example, title="Click to view full size image." Do not use an alt attribute on the <img> tag, because browsers override this tag if it is enclosed in a link tag.

    The following code is used for the link and the placement of the scaled-down image, with line breaks for readability.

    Code Example 2: Code for the Link and the Placement of the Scaled-Down Image
    <p align="center">
    
    	<a href="../../images/articles/nbentpack-tuts/sample_image_needslink_small.png" title="Click to view full size image">
    	<img src="../../images/articles/nbentpack-tuts/sample_image_needslink.png">
    </p>
    

Linking to Example Code in a Separate File

Reminder: Use the NetBeans Documents and Files tool to make your code example files available from the NetBeans site.

The following code shows a link to a file with example code. View the source of this file to copy and paste an example without line breaks.

Code Example 3: Code for a Link to a File With Example Code
<p>For this example you can use the
<a href="http://www.netbeans.org/files/documents/full-path-to-your-file">Filename.ext</a> file ...

</p>

Linking to a Flash Demo

Reminder: Use the NetBeans Documents and Files tool to make your .swf files available from the NetBeans site.

The following example code shows a link to a flash demo. View the source of this file to copy and paste an example without line breaks.

Code Example 4: Code for an Example Without Line Breaks
<p align="center">

	<a href="full-url-to-your-htm-file-that-references-the-swf-file.htm"
	target="demoWin"
	onClick='demoWin=open(this.href,this.target,"resizable=yes,menubar=yes,status=yes,toolbar=no,height=600,width=830,scrollbars=yes");
	demoWin.focus();return false'>
	<img src="../../images/articles/your-tutorial-dir/flash_demo_button_med.gif" border="0">

	&nbsp;View&nbsp;Demo</a>
</p>

The pop-up window that contains the flash demo should not have the navigation wrapper. If you open a file in a pop-up window, you can add a special metatag to remove the default navigation wrapper.

Opening a File in a Pop-Up Window

Use the following code to open an HTML file in a pop-up window.

Code Example 5: Code to Open an HTML File in a Pop-Up Window
<a href="yourfilename.html" onclick="return open_popup('myfilename.html')">Project
      Types Compared</a>

Add the following metatag to a file if you do not want the file to use the default navigation wrapper. The metatag is useful if you want to open a file in a pop-up window. You should also include this metatag if the file is used to display an SWF file [Linking to a Flash Demo].

Code Example 6: Metatag to Be Included if the File Is Used to Display an SWF File
<meta name="nb-nav-wrap" content="N">

Style Guidelines


To be completed.

top

Second H2 Heading


intro-paragraph



To Do Something

  1. This is step 1. The new netbeans.css file has been updated to create double-spacing for list items.
  2. This is step 2. This line has one <br> tag to go to the next line for the feedback statement.
    This is feedback for step 2.
  3. This is step 3. This line has one <br> tag to go to the next line for the feedback statement.
    This is feedback for step 3. This line has two <br> tags at the end because a set of substeps follows.

    1. This is step a.
    2. This is step b.
  4. This is a step with a set of bullets.

top

Third H2 Heading


intro-paragraph

Subheading

your-text

 

top

Summary


A set of bulleted summary points can be useful for longer tutorials. You can also summarize in paragaph format.

top

Next Steps


Provide the user with a learning path to take steps through and get an answer to the "I've finished this tutorial, what do I do now?" question.

See Also


Provide the user with links to background information or similar tutorials.


About the Send Us Your Feedback link: If you do not have a See Also section, place the Feedback link immediately above the final "top" link on the page. In this template, the Feedback link would immediately follow this paragraph (the paragraph that you are reading).

Use the following code for the Send Us Your Feedback link in your tutorial.

Code Example 7: Code to Use for the Send Us Your Feedback Link
<br>
<div class="feedback-box"><a href="/about/contact_form.html?to=5&subject=Feedback:%20your-tutorial-title">Send Us Your Feedback</a></div>

<br style="clear:both;">

Send Us Your Feedback

top

>> More NetBeans IDE/Certain Functionality Documentation