The reason we are doing this is because Ebay cannot read the images if it is link to "images/footer_bar1.png". 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.
EBAY WEB SLICES CODE
Another thing to remember, when you are putting the background image, go to code view and put it at background tag inġ5. Just put the tag inside the first table you created. There are some parts in your template that will be a link (ex. Just make sure to always put it inside theġ4. Do the same to the other photos just like what you did in 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'.ġ3.
EBAY WEB SLICES WINDOWS
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ġ2. 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ġ1. Rows: 6 Columns: 1 Table Width: 990 pixels Border Thickness: 0 Cell Padding: 0 Cell Spacing: 0 and click OK. 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: Its dimensions are 990 x 110 px and this is also the same size I will use in my index.html. On the template I created from Photoshop I designed a header and also named it header.png. Row: 1 Column: 1 Table Width: 100 percent Border Thickness: 0 Cell Padding: 0 Cell Spacing: 0 Header: None and click OK.ġ0. This first table will be our base table so lets just set its setting to: 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). 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. Then go again to File > Save As.> (choose the folder you created in step one) and set the file name to index.htmlĩ. 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. 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.Ĩ. When you open it on Design view you will notice everything you have on that template is an actual image. Go to Dreamweaver and open the html file you just saved from Photoshop. Note: In this step, the images you slice and did not slice up will both be an image and html.ħ. Type in filename and select the format to 'HTML and images', Settings to 'Default Settings', and Slices to 'All Slices' and click 'Save' button. Click "Save" button and select the folder you created in the first step. Note: Jpeg is usually for the images that will be repeated like body background and menu bar background.Ħ. 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. Select all the slices one by one and set its file type to png-8 and jpeg. After slicing the template, its time for optimizing the images. Note: If an image is just a background image that can be repeated by itself, you can just slice that very thinly.Ĥ. This is an easier way to name the image file once you save it later. Just put in the images' name there and nothing else. After you slice one image, double left click on it, then a small window with slice option will appear.
If you're done with the template, start slicing the images one by one. For Feather Touch Hair, I made its width as 990px.ģ. It must have a header, a body, and a footer (make sure to designate a space for the For Search and Categories of products). Create a folder anywhere in your directory where you'll put all your files for this template.Ģ. This tutorial describes the procedure that was taken using CS5, although it will be similar for other versions of the dreamweaver software.ġ.
EBAY WEB SLICES HOW TO
This short tutorial will take you through how to create a ebay template using Dreamweaver.
0 kommentar(er)
