Using Web-site Templates

webportio_source_97_eample_Eng

How are templates useful?

Templates are useful because they reduce the effort required to build your own web-page, or ultimately base an entire web-site upon their layout and functionality where applicable.  This template above, I got from the Fireworks exchange site.  They are png. files with web-content.  Truly though, any ‘layer based’ program should be able to properly open a layered png. file.  Each segment is an active area.  Templates are an excellent alternative for taking the rocket science out of building your own site; unless you want to do the rocket science?

I replaced the large text up top, with English, and recolored “Adobe Firefox” red for effect, using the property Inspector within Firefox CS3.  Simply place the text tool at the end of the text, and backspace it to the beginning of the text box using either the very same font, or your computer’s closest match, using the text tool (A);  Isn’t it amazing!  I filled in both sets of text on the green button as well…  It’s easier to do than you think, if you’ve never attempted this.  Templates truly uncomplicate how you might choose to set up a web-site!  All those buttons have to lead somewhere.  Yes?

And look, real picture place holders!

That’s right.  Just make a picture size of 150 px. by 100 px., save it where you’ll remember to fetch it from.  Then click the rectangle place holder with the select tool (black arrow).  It will then be surrounded by the place holder.  Simply choose File/place, go get the file, and it will fit itself nicely into the rectangle you selected.  Then you must change the text at the bottom to English.  It’s the same procedure as explained above.

Go to Adobe Exchange or Google search it if unfamiliar.  At the bottom of the page, you’ll see “Fireworks”  Choose that…. Look through the whole place, and choose what you like, save them to a Firefox Png Folder, to your Picture folder, because that’s where Firefox opens up to. Or test it. Your system may differ from mine.  Anyway, templates give you a much clearer idea about how you might want to structure your site as well…

Everything from there is perfectly legal to use, commercially.  http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=6&loc=en_us  You have to register with them to download their stuff, yet it’s well worth the effort!  Many programs carry their own templates.  Be sure and check them out.  You might find something useful…

Then all you have to do is provide links to all the active parts of your web page, that lead to secondary pages with more information, or even forms to fill out..  Then buy a domain name, find a good deal where they have programs that will upload your website for you…  Making it this way, would be much less mind-numbing though.  Why reinvent the wheel?  Right?  Research Dreamweaver has an easy pointing system for linking s ‘slice’ or hot-spot, to connect to another page on your site.  Be sure and prepare the files first, that you wish to link to.  You’ll need a credit card or a Pay-Pal account.  And don’t worry; Firefox is very user friendly, even just by they way they spread out your web-slicing tools on the tool-bar.

Why Firefox?

Firefox helps you prepare files for function within Dreamweaver by saving a corresponding html (instruction file) for any slice you make and save in png format.  This applies to any image you surround with the slice tool as well.  Dreamweaver need then only organize them for further refining.  Every slice is a hot-spot you must design in Firefox using various “states” a users mouse will trigger, depending on what the user does with your button…  We’ll dive deeper into what slice tool is for what, and how to make your various active states functional next time in part 2 of: ‘Using Web-site Templates.’

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s