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. Another thing to remember, when you are putting the background image, go to code view and put it at background tag in |
