HTML & CSS tips and tricks.

This area is designed for those of you who know little about HTML and CSS. I have tried to make these instructions as basic and simple as possible.

First get yourself a good ordinary text editor. NOT frontpage, dreamweaver or any of the wisiwig editors. They write a lot of redundant code into your document and it is very likely if you make a mistake you as a beginner will never find it. As an experienced web designer I shake my head in disgust when I look at a doc produced by any of these editors.

Yes you can use notepad (which is free and is included with your windows software) however there are better free choices.



Araneae would be my first choice and it is FREE. Why choose this free software over notepad? Because it allows you to color code the syntax (code tags) in your document. This feature is very handy if you have to edit a large document. It is especially handy if you edit any of my documents because I try and comment them well enough for the beginner (who knows little of HTML or CSS) to follow without wanting to give up.



Another thing you might want to notice is the sidebar that tells you what line in the document you are on. Another very handy feature.

Araneae features:

• Syntax highlighting
• Support for HTML, XHTML, CSS, JavaScript, PHP, Ruby, and more
• Instant browser preview, even without saving
• Insert customizable quick clips
• Tabbed multi-document interface
• Drag and drop support for files and images
• Downloadable extensions

If you are new to HTML & CSS this will be fine for your use for years to come. The young man developing the software adds new features every once in a while and unless you really want to become a web designer this will do all that you want. For those who want to move into bigger times I use CoffeCup HTML Editor ... it has a lot of bells and whistles of which I only use a few. It is nice to know the others are available should the whim grab me some late night. :)

I DO NOT recommend the CoffeeCup "Visual Site Designer" for the same reasons mentioned above plus a couple more.

How do I change an image in my gallery page?
This page is not inside the shopping cart. It is an extra page created for my gallery site.

Entering or changing an image anywhere in a document is the same be it a static page (not in your shopping cart) or any html document.

Open your document in your text editor. Find the image you want to change. Notice the part of the tag that tells you where the image will be stored and the name of the image. In this case images/spacer.gif. This tells you the document is looking for the image inside a folder called images and the image itself is called spacer.gif. You will place your image inside the images folder and all you have to do is change the image name to whatever it is called. yourimage.gif (keep in mind what kind of image you have created).



Notice the image line (tag) also tells you information about the image like width and height. This particular gallery is set up for images that are 111px by 111px with 3 images across. If you wish larger images you will have to delete one of the gallery cells in each row to accommodate larger images. So lets say you want images 250px by 250px. This requires a little more effort on your part.



First you have to change the size in the image line (tag).

Notice above the sizes to both of the first 2 images have been changed. It is best to have your images all the same size. It will look better than a page of many different sizes.

Next look at the area of the document that is surrounded in the red border. All of this will simply be deleted to give you a row of 2 images across. Note further all rows must also be altered the same or you will end up with one row of images large and the rest squeezed into 3 images across your page. It can be done if you do not change the image size in the rows below but it will probably not look great.



Notice the purple section has been altered for 2 images per row and the red section still has 3 images per row.

We are not quite home free.

Notice what is in the red comment tag for the 3rd image we just deleted:

If you have larger images (2 times 264px wide is all that will fit) you must delete one cell per row between these comment tags.

What this means is you can have 2 images up to 264px wide. So next open your CSS file in the text editor and look for the #album.



This ID or Class with either be in your style sheet or could possibly be in a style tag at the top of your page.

Change the height and width to match that of your image. Save the documents and upload to your server. This should finish the gallery pages to suit your need.