Editing A Custom Template With Nvu

It is real easy to edit a custom template using Nvu. For this example I am going to use one of my templates. There are custom templates found here on the DOUA site also you may want to try this with.
First we want to open up Nvu. Then we go to the tool bar and select File, Then we select Open Web Location.

The location of the custom template I am using for this example is: http://4u2go2.com/Ebay_Templates/framed_image_template003.html
So I am going to paste that URL into the Create a new document or template pop up menu

Now we click the Create button and Nvu will open the web page up as a composer page that you can edit any way you wish. You do not need to worry too much about whether you select Create in New tab or New Window. Usually I leave it set to new tab as it will not create a new tab until at least one is in use.

You should now be looking at the template in a composer window with Nvu. It will look very similar to your regular browser.

Now this part is optional but if you do not do it you will eventually come to regret it. The very first thing you should do is create a folder somewhere on your computer where you will be able to easily find it and save the file. I save in increments. After every change I make I save my work. I usually don't go to a lot of trouble with names until I have finished and start out by saving it as 1.html , then 2.html and so on. Now this is where I find one minor annoyance with Nvu and all the other WYSIWYG (what you see is what you get) HTML Editors. When you go to File then save it will save the file just as you have it with all the images having a full path to the image location. If your image is located at: http://www.myimages.com/mypic.jpg it will save it that way. If you use the save as command it will save the images to the local folder the html file is located at and truncate the full path to the image down to mypic.jpg. This is no real problem as it is easy to fix the image location once you have completed your template, web page, or auction page. It is a little more complicated with background images in tables but I will show you how to fix that also.
For that reason I am not going to discuss changing the background image on this template until the end.

If you have already done your homework and have a title and description done it will be even easier to make changes to the template as we can use copy and paste commands.
The first thing we need to do is to replace the page title. You can either type in a new title or copy one in either one.

If you want to change the color see this tutorial on color changes

Now lets put your item description in. Again if you have it ready you can simply copy it and past it into the description area. One tip to remember. If you use word or word pad to create your text for your web page you may wish to paste the text into notepad and then recopy it as this will loose any formating word places in the text.

Now we need to add an image to your auction page. You can do this in several ways. You can simply remove the link and delete the image. Right click on the image and from the drop down menu select Remove links.

Now we can right click on the images and the select delete.

Alternately we can simply right click on the image and select Image Properties and then change the location of the image, the alternate text, then the dimensions and the hyper link. I am not going into this right now as it will bring up the exact same Image Properties pop up menu we will get when we go to Insert Image in the next step.

We now go to the tool bar at the top of Nvu and we are going to select Insert and then from the drop down menu select image.

We now get the Image Properties pop up menu. Under the location tab we are going to place the complete path to the image location. This means place the images URL into the Image location box at the top. Make sure you use the complete path to include the http part. Then the next then we do here is add our alternate text for the image. This helps image impaired users know what the picture is and is also cataloged by most major search engines.

Still in the Image Properties pop up menu click the Dimensions tab and we can set the images size. If you just want the actual size image you do not need to change anything here just leave the Actual Size button checked. If you want to change the size of the image displayed on the page check the custom size button. Make sure that you have the Constrain Image button checked before you change image sizes. With the constrain image button checked you only need to change either the height or width and the other one is set automaticly to make the image stay in skew.

If you use a large image on your web host and then resize it via HTML then you can have a hyper link to the full size image. This allows the potential customer to look at finer details on your image easier. To do this while in the Image Properties pop up menu you go to the last tab. Link and past the complete URL of the image and when the user clicks the image it takes them to the full size version instead of your html scaled down one.

If you need more than one image then just add all you want. If you want to place your Images into tables see this link for more information on this subject

Now we will need to change the terms to your terms. You can either highlight the text you want to change or simply delete it all to replace with your own. Highlighting and right clicking brings up a pop up menu that has many options including delete.

There are two links That I have place in the template to my other auctions and my ebay store.
To change the view my other auctions to your auctions you need to get the URL to your auctions. I highly reccomend that you copy the url as it is easy to mess up one letter in urls like these.
the we want to highlight the link text and right click with our mouse to bring up the Link Properties pop up menu.

Unless you have an Ebay Store we can just delete the next link. We want to first highlight the link text and right click to bring up the pop up menu and select Remove Links, Then simply delete the remaining text.
Or if you want to use the link to your ME page you can get that link from your Ebay me page and using the highlight text/right click select Link Properties and place the URL to your me page in the link location , click ok and then type in the link text. Something like "Visit my Me Page".

Now you will notice in my template I already have a DOUA image placed into the template.
Please do not "hotlink" to my website. Any images you use on yor pages should be hosted on your phothosting and not my website or anyone elses that you do not have permission to use. It is bandwidth theft and if your images are on my site I could move or delete them and never know I had messed up your auction page.
If you want to know more about hotlinking please read here.

Ok one last thing I nearly forgot. The background image in the table. Nvu doesn't handle table backgrounds easily as a WYSIWYG application but we can very easily change the image background by going to to View then select HTML Source. This will bring up the actual code that has been generated. In this template the background image for the table is roses01.jpg. We can use the Find command that is located under Edit on the tool bar if we can not find it but I have comments above the background image so it is easy to find.
Replace the location of this image with the location of the image you want to use for your auction. You can find thousands of free images to use on the web or you may download this one if you want but again Please Do Not HotLink to Any Image on my site.