Creating Custom Objects in Ultradev

< Back to Part 1

Practial Example

Our website has been generating a lot of email recently and a lot of people are asking us who hosts our site and how much we pay for it.  Now we’re not really interested in spending our time answering questions like that - we’d rather be taking orders and helping customers get better deals from our site.  So what we’re going to do is put the information on the site so people no longer have to email us.  While we’re at it we’ll add a copyright notice too – just to try and deter those of our visitors with sticky fingers!

We’ve decided that the best method of getting this information to visitors is a small piece at the bottom of each page detailing our web hosts contact details and a small copyright notice.  This would normally mean writing the piece and then cutting and pasting it into each page.  Also we will need to paste the code into any new pages that we add to the site at a later date.  Having a Custom Object for this task would save us much time and repetition.

Step 1

OK, here comes the fun bit.  Load up Ultradev and open a new window.  Type in your footer, as you want it, not forgetting to add hyperlinks to the relevant pieces.  There is no need to insert Page Titles or Backgrounds.  Format the text in whatever manner you feel appropriate

Step 2.

Remember earlier we stated that an Object is a “specific” piece of HTML code? Well that means that our next task is to strip out any code that is not particular to our Object.  Press F10 to open the Code Inspector window. Here we see the code prior to being stripped down.  Note Line 7 specifying text colour, which is applied to the page in general.  Line 8 is the beginning of our Object – note the text command, which is specific to our code.

Step 3

Here is the code after trimming – all code that is not part of the Object has been removed. The next step is to save the Object. Click File, Save as, and then browse to the Objects folder at "C:\Program Files\Macromedia\Dreamweaver UltraDev 4\Configuration\”.  Your object will only be recognised if it is placed within one of these folders.  Its up to you where you want to save your Custom Extensions, I prefer to put all mine in a special folder so I can keep an eye on which ones I’ve got.  Just create a folder in here, name it and save the .html file in there. Give it a descriptive and concise filename – like “Host details.htm”

Step 4

Now reload Dreamweaver (to refresh the code) and your new object should be in whatever sub-directory of Objects that you saved it in.  The only problem with it is that there is no special icon for it, and so it looks a bit dull.  No problem.  Just open up your favourite art program and create an 18 * 18 gif file to represent the Custom Object, ensuring you give it the same filename (but not extension obviously) as the Object i.e. “Host details.gif”.  Now save it in the same directory.  When you reload Dreamweaver you should find that the new icon is all-present-and-correct in the Object sub menu!

Hint

To reload the Object menu only, whilst clicking the Object Palette drop-down menu, hold Ctrl and then click Reload Extensions. See picture below.

Finished

Thats it. In the next tutorial we'll look at more complex objects and discover how to create ones that rely on User-inputted parameters. Until then, goodbye.