What's New Here? - Wow!TEMPLATE
The term slicing refers to dividing something in small manageable pieces and the term coding here could refer to reverse engineering that particular object, to make it look custom built. Now apply these to a web template and you would be recreating your own master piece from an already existing web template to be used anywhere.
Easier said than done you might say? OK, then let's stop beating around the bush and get straight down to business. You would need readymade tools for slicing and then coding; Adobe's Photoshop comes with an easy to use slicing tool ideal for a beginner, no fuss and quite graphical to use. For coding your sliced template, Dream Weaver is an easy to grasp tool for new comers. First off, let's tackle how you would go on slicing a template.
Slicing A Template
For slicing purposes, you would require an already existing web template; a quick search on Google would reveal numerous websites that offer free templates to do with them whatever you want. Bearing in mind that you are a novice at this, pick one that is not too complexly designed and contains a logo, some simple text and banner, and save the template on your hard drive.
Now fire up Adobe Photoshop; from open file menu locate the saved web template. Once opened, locate the slice tool from the tool bar and click on it. The cursor will change to a scalpel and by using the scalpel, draw a box around logo. You will notice that logo is being cut or sliced from the template. Do the same for text and the banner. If you have done this right, you will have three slices ready. Now, save the sliced images by selecting the slice tool again and double clicking the slices, name them logo, text and banner respectively for easy reference. Once images are saved, export them to JPEG format for web use and save them to desktop. All done with slicing! Let us proceed to coding.
Coding The Template
Fire up Dream Weaver; choose HTML option from create new section. This will all be displayed in the New Document Setup window. Now, look at the lower right hand corner of the screen and locate the file tab. Click desktop items and then locate the sub folder options. Locate the folder on the desktop, where you saved the sliced images and the original ones. This enables Dream Weaver to import the sliced images into Dream Weaver. You are now free to place the logo, text and banner wherever you like using the designer platform.
Where is the coding in all of this you might ask? That is the beauty of Dream Weaver. As you import the images and drag and drop them according to your liking, Dream Weaver is behind the scene generating all the HTML code necessary without you worrying about it. Now imagine doing the same using HTML purely; surely that would be a cumbersome task indeed.
You have now learned how to first slice a template using Photoshop and then code it using Dream Weaver. Congrats your very first template is ready!
