This post will be all about how I setup my templates in Netbeans. Please feel free at the end of the post if you have any other suggestions or ideas on improving the work flow. The first thing I do when I go into the template manager is change the HTML, CSS templates. I also add a Reset CSS and HTML 5 template as I pretty much use them in every project I use. *NOTE* I am assuming you have read my first part of this series How to customize your Netbeans template files. Most the work will be done in the template manager and I won’t be going over how to open/edit the template files.
How I setup my Netbeans templates
Let’s first start with HTML Files:
- Click on HTML Files and hit rename button.
- Rename it to “HTML 4 File”
- Click the “Open In Editor”
There are two extra lines I add. The “reset.css” and “default.css”. files.
<#assign licenseFirst = "<!--"><#assign licensePrefix = ""><#assign licenseLast = "-->"><#include "../Licenses/license-${project.license}.txt"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=${encoding}"><link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"><link rel="stylesheet" href="css/default.css" type="text/css" media="screen"></head><body>TODO write content</body></html>
The next template we will need to create. It will be for HTML5. Don’t worry it’s not very hard to do. 🙂
We are going to have to create a folder. From here on in I will refer to it as the the custom template directory. You can put the template directory anywhere.The code you will need to paste will be at the bottom of the steps list.
- Open My Computer
- Go to: “C:\Users\<user>\.netbeans\” *Note* replace <user> with your profile username
- Create a folder called “custom templates”
- Copy the code at the end of this section and paste it into an brand new file.
- Save the file as html5.html in the Custom Templates folder.
- Inside Template manager make sure you are in the “Other” folder
- Click “Add…” button.
- Select the HTML5.html file you just created. Press Ok.
- Single click the new template.
- Hit the “rename” button.
- Rename the template “HTML5 File”
- You now have create your first customized template 🙂
<#assign licenseFirst = "<!--"><#assign licensePrefix = ""><#assign licenseLast = "-->"><#include "../Licenses/license-${project.license}.txt"><!DOCTYPE html><html lang="en"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=${encoding}"><link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"><link rel="stylesheet" href="css/default.css" type="text/css" media="screen"><link rel="stylesheet" href="css/html5.css" type="text/css" media="screen"><!--[if IE]><script src="javascript/html5.js"></script><![endif]--></head><body>TODO write content</body></html>We are next going to create reset.css, html5.css, html5.js. Copy this code and save it into blank files in the template folder. Save each file accordingly:
reset.css
/* RESET CSS FILE */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0; outline:0; vertical-align:middle; background:transparent; margin:0; padding:0; font-family: Verdana, Geneva, sans-serif;}* {margin:0; padding:0; }a img { border:0; }/*This is called the clearfix "hack" to prevent container from colapsingin on itself when all the elements inside are floated elements.Make sure to add --[ class="container" ]-- to any object that youdon't want to colapse.*/.container:after { visibility: hidden; display: block; font-size:0; content: " "; clear: both; height: 0; }/* start commented backlash hack \*/* html .container { height: 1%; }.container { display: block; }/* close commented backlash hack *//* Easy way for me to float items */.floatleft { float:left; }.floatright { float:right; }.floatmiddle { margin: 0px auto; }html5.css
header, section, footer, aside, nav, article, figure {display:block;}
html5.js
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()Now that these extra file are created, we are going to create 3 new templates in Netbeans.
- Open Netbeans Template Manager
- Click “Add…” button
- Select each file and click ok
- Rename the file to something a bit more descriptive
The only thing you will have to remember going forward is that in the templates I have taken for granted that you will you my folder structure convention. You will have to create both a “css” and “JavaScript” folder in the same location where the file is. In both of those folders you would need to use the template to easily create the needed CSS or JavaScript files.
Now that you have those templates created you could just as easily create templates for things like jQuery. I hope this post will help eliminate the mundane and boring setup we all go through on each file we create!
Share this:
andy says
how i am able to work with html 5 in netbeans.html 5 tag like video ,audio etc does not show in intellicenes of netbeans php 6.8 editor.pls help me .
Antonio says
Thank you for your useful tutorial, but is possible to set a template in order to have one or more prompts to allow a parametric creation of the file?
I work with PHP version.
Thank you in advance.