At work I recently upgraded to Adobe Dreamweaver 5.5. I forgot that I added the HTML5 Pack via Adobe Extensions to DW, but was quickly reminded when I created new files and no longer had CSS reset or dom.ready in my files. I soon found that the HTML5 Pack is ‘included’ with the defaults of DW5.5, except my default files were all lame and empty.
[I already know that most 'professionals' poop all over DW, but it is the program I learned to code in and mocking me will not get me to change my mind]
This led me to learn how actually customize the default files for DW and eventually I created a nice little stripped down DW Boilerplate for myself. I didn’t find any good documentation, so I figured I use the moment of inspiration to write a post.
Setup the default html file
- Summary: HTML5 Template with generic links to styles, scripts, etc
- 1. Set DW to open your html files with the HTML5 doctype.
– Dreamweaver -> Preferences -> New Document -> Default Document Type (DDT):
– change the setting to HTML5
This will give you a nice little naked HTML5 file, but we can make it better. - 2. Build you preferred HTML template that will open each time you open a new html document.
– In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.html
Open the file in DW, then just type or copy/paste in your new html template. Save, then open a new html file, and you should see exactly what you just added!
Setup the default javascript file
- Summary: basic js file with jQuery doc.ready and window.load ready to rock
- 1. Build you preferred javascript template that will open each time you open a new javascript document. Really, the html file is the hardest to to, because it is two steps.
– In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.js
Open the file in DW, then just type or copy/paste in your new javascript template. Follow the same process for testing.
Setup the default css file
- Summary: default css file with reset, author comments, indexing and device widths
- 1. HTML5 is sweet, JS is ok, but the CSS is where I really pat myself on the back.
– In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.css
Thats it, you are good to go.
So now knowing these principles, you know where every default file template is in DW and you can customize all the templates you use.
As for more details about my boilerplate. I found other boilerplates to be informative, but bloated. I was always removing things or noticing things I forgot to remove. I wanted to come from the other direction. Just the proper basics that will provide the things I need and save me time. This is my first draft of these files, but this shit is organic and will evolve, so feel free to take mine and use them as your starting point.
- HTML: HTML5 document with title tag, favicon link, screen/mobile/print css linked, html5 shiv, some base html tags (header/content/footer), js file linked.
- js: I always find myself using jQuery, so the file has the standard doc.ready and window.load functions
- css: This is the file that I really appreciate. It starts with project details, including the math my heights & widths are based on (used for my mobile specific css). It is followed by a basic index, I do this because css files always become a mess if you don’t stay on top of them. Then we roll into Eric Meyer’s reset css with html5 selectors included (I remove the body {line-height} css because it causes me more problems that it solves). It then has the comments that match the index setup. Finishing with some CSS Media Queries for device width. This has it’s own index for all my testing devices and then the corresponding widths breaking down the devices again. Like I said above, I’m pretty proud of this file, makes my life easier.
Download the files(html, css, js)[8kb]
I would love to hear how other folks start there projects off. Their default files.