How to Create an eBay Template in Dreamweaver

This short tutorial will take you through how to create a ebay template using Dreamweaver. This tutorial describes the procedure that was taken using CS5, although it will be similar for other versions of the dreamweaver software.

1. Create a folder anywhere in your directory where you'll put all your files for this template.

2. Create a template design in Photoshop. It must have a header, a body, and a footer (make sure to designate a space for the For Search and Categories of products). For Feather Touch Hair, I made its width as 990px.

3. If you're done with the template, start slicing the images one by one. After you slice one image, double left click on it, then a small window with slice option will appear. Just put in the images' name there and nothing else. This is an easier way to name the image file once you save it later. Note: If an image is just a background image that can be repeated by itself, you can just slice that very thinly.

4. After slicing the template, its time for optimizing the images. Go to File > Save for Web & Devices

5. Select all the slices one by one and set its file type to png-8 and jpeg. Note: Don't save it yet, make sure that every slice is set to png-8 (this is smaller in file size but still has good quality) and jpeg. Note: Jpeg is usually for the images that will be repeated like body background and menu bar background.

6. Click "Save" button and select the folder you created in the first step. Type in filename and select the format to 'HTML and images', Settings to 'Default Settings', and Slices to 'All Slices' and click 'Save' button. Note: In this step, the images you slice and did not slice up will both be an image and html.

7. Go to Dreamweaver and open the html file you just saved from Photoshop. When you open it on Design view you will notice everything you have on that template is an actual image. The reason why I am not using CSS to style this template is because using CSS in ebay is a little different than using CSS on the website.

8. Now we can't keep it like this because when we put text to it, the whole look of it will be different so we have to create from scratch. Go to File > New > HTML. Then go again to File > Save As..> (choose the folder you created in step one) and set the file name to index.html

9. On our blank document of index.html, we will create tables and many more tables inside that table so that everything will be aligned well. Select the Design View. Go to Insert > Table (A small screen will appear that will allow you to set in how many tables you want to put in your html). This first table will be our base table so lets just set its setting to:

     Row: 1
     Column: 1
     Table Width: 100 percent
     Border Thickness: 0
     Cell Padding: 0
     Cell Spacing: 0
     Header: None
and click OK.

10. On the template I created from Photoshop I designed a header and also named it header.png. Its dimensions are 990 x 110 px and this is also the same size I will use in my index.html. I'm putting it to the top most portion so inside the recently created table, I created another table (Go to Insert > Table) with the following details:

     Rows: 6
     Columns: 1
     Table Width: 990 pixels
     Border Thickness: 0
     Cell Padding: 0
     Cell Spacing: 0
and click OK.

The Rows are used in the following way: 1st row: Header, 2nd row: Menu Bar, 3rd row: Space after Menu Bar, 4th row: Content of the Body, 5th row: Space before Footer, 6th row: Footer

11. Click on one of the Rows, look at the PROPERTIES tab below (If the Properties tab is not there, just go to Windows and select Properties), click the

tag and set the Align to be Center.

12. Now we'll put in the header. Click the first row, Go to Insert > Image, select the "Images" folder (where Photoshop saved all your sliced images), select the image you created for the header, click 'OK', type in the Alternate text and click 'OK'.

13. Do the same to the other photos just like what you did in header. Just make sure to always put it inside the

14. There are some parts in your template that will be a link (ex. Categories). You can still style that using css. Just put the

tag inside the first table you created. Example is the code below:


Feather Touch Hair

tag. Another thing to remember, when you are putting the background image, go to code view and put it at background tag in and not in Example:

...
...
...


15. Now, If you are done with all the images and it looks exactly the same as your template, its time to upload all the images on the server you have online. The reason we are doing this is because Ebay cannot read the images if it is link to "images/footer_bar1.png". It must be from "http://www.websitename.com/images/footer_bar1.png"

16. Another information in creating an Ebay template. Ebay has its own html that can help you to further personalize your store. You can see all the list here: http://pages.ebay.com/help/sell/stores-tags.html

Now, there you have it! Steps on how to create your Ebay-template.