Editing a Template with Nvu or Mozilla Suite's Composer


I have been asked how to use Mozilla for composing or editing HTML and I thought I should share this with everyone. I now use Nvu instead of Mozilla's composer but they both work the same the biggest difference is Nvu is more powerful. I am going to use Nvu but both have the same commands.

Mozilla is a browser/email client that has a very good composer built into it. 
Get Mozilla For Free Here
Nvu is a stand alone html editor. You can get it for free here.
To use it first we open it up then from File we open a new composer page. Then you can start writing whatever you wish for a web page and it will display as a web page. Alternately if you want to edit a page you already have you can open the file on your computer or you can open a web page in a composer window. I find this command very useful. Let's say for instance you wanted to edit the template I placed on my website for DOUA users. we would open Nvu, we should now be looking at an blank composer window Now we want to Open a web location.
Now along the top is the commands File, Edit,View, etc.
we want to click File.(first one on left along the top)
Under File you should see the command , Open Web Location.
Open/click Open Web Location then either type or paste the URL http://4u2go2.com/Ebay_Templates/Ebay_Auction_Template.html into the box at the top. (or any page you want to edit on line or have saved locally)
Now you should have a window open to with a template from one of my earlier auctions.
The first thing we would now do is put your Auction Title in.
To do this Left click your mouse at the beginning of the text and while holding the left button down pull your mouse untill you high lite all the text you want to change.Either cut/delete or simply leave it high lighted. Now you can type your text there to replace what I had.
Don't like the color, font or size? We can change it.
High lite the text you want want to change ( use your mouse Place the cursor at the beginning again and while holding the left click button down pull it over until you have all the text in the blue high lite
Now just above the page you are working on You will see at the second box from the left 2 little boxes almost directly over each other The top one is the text color (blue in this example) click the text box (blue one) and you will get a drop down menu with colors to choose from. we can choose any color from this box or enter a binary number. Click ok and we have now changed the color.
The next tool over is a highlight text tool, If you want text to be highlighted while it is highlighted (from the mouse) clcik the little pen looking icon and choose a highlight color. Click OK and you have just placed a highlight to your text.
next one is an "A" with a down arrow this will make all highlighted text smaller.
The "A" with the up arrow increases the text size
"B" makes text bold
"I" changes text to Italics
"U" underlines the text. (try to limit underlined text as most of the time this signifies a link)
Next ones over control bulleted list, then numbered list, outdent (move left), Indent (move right) , Align left( all text aligns to the left), Align center, Align right, and justified.
That is basically all your text commands.
Now you would go through the description and change

Now for inserting a link and a picture.

there are a couple of ways we can do this
lets start with the "View My Other Auctions" link I have in there.
Highlight the text "View My Other Auctions" then right click with your mouse. we should now have a drop down menu scroll down the box until you see the command ; Link Properties, remove the link in there and replace it with the url (address of your auctions).
This is easiest done by by going to one of your auctions then click the view sellers other items link and copying the link from the address bar, (Copy highlighted text either with the right click then copy , or use the Ctrl C command {hold control down and hit "C"} ) now We paste the URL (universal resource locater) /link address into the Link Location box.( we paste by either right click and using the paste command or we use Ctrl V )

Click ok and you have just changed the "view my other auctions" link to a link to your other your auctions

If you want to place your link elsewhere on the page move the mouse cursor to the location you want the link then along the tool bar at the top is the command "INSERT" click insert then click link
This will open a box that says: Link properties, It has two boxes in it. The top box is link text (what you want the link to say)
The second or lower box is Link Location (the actual link to the page)
Type what you want the link to say in the top box (Link Text)
Then type or paste ( Personally I recommend Pasting) the url into the link location box
click ok and we have just inserted a new link

To insert an Image
Along the tool bar at the top we again click Insert then we click Insert Image
This opens up another drop down menu
in here we put the URL (physical location of the image) into the Image Location Box
Where it says Alternate Text we put keywords to describe the image (we can choose no alternate text but this is not a good practice)
if you do not want the image to be a link or need to change the size of the image we will be done
click ok and we have now inserted an image.

I am going to give an example using the DOAU logo with a link like we would use for your ME page (ebay frowns on links in our selling page)

Move your pointer/cursor to where you want to place the image
Click Insert then from that menu we click Insert Image
We should now have a new box that says image Properties.
In Image Location I am going to paste the URL ; http://www.doua.org/tc/images/header/doua_logo.gif
In Alternate Text I am placing DOUA,disabled online users association

Next tab over says Dimensions I am going to click dimensions as I think the size is too large to fit my page neatly
I click the button Custom Size (make sure that Constrain Image is checked) and I am going to change the width to 200
this automatically changes the height to 51
We are going to skip the appearance tab and now go to the Link tab
Here I am going to paste the URL http://www.doua.org/ into the weblocation
'Click ok and we now have the DOUA logo and when a user clicks the image it will take them to the doua home page

Don't Like anything you just did or made a mistake?
Along the tool bar at the top we click Edit then Undo no we just undid the last step we made.

One more thing and I am going to try and let you soak up this information;
I usually use keywords in the page itself so we go to
Format along the tool bar at the top then click; Page Titles and Descriptions
in this box we want to put the item description as our title then in description(bottom box) place keywords about your item

Now when we go to the sell your item page in ebay you can paste all the html ( this is easily gotten to from the tool bar View then VIEW HTML SOURCE) into the describe your item box on Ebay when you are listing

I will explain later how to change the background image in the table this is easiest done by viewing the source code and changing the <table
background="http://www.4u2go2.com/ebay/background/bluFlowerBG.gif"
cellpadding="40" cellspacing="10"> to reflect the location of your image

I hope this has helped you and not overwhelmed you. Play with it if you make a mistake , don't worry about it as it will take some trial and error.
I recommend making a folder where you can find it and moving in small steps
First I save the original I am working with
then when I change something and am happy with it I save it with another file name ( I usually go 1, 2 , 3, 4 ,5 . and so on till i get to the point I am satisfied.)
This way if you do mess up and can't undo it just go back to the last file you were happy with and start from there.

best wishes and do not hesitate to ask more questions,
Click Here to return to the previous page.
Navigation Sales Flowers & Poetry inquisitiveidiot DOUA HELP email me letter image