List of Tutorials

Centering Images

To center an image we will be refering to elements in Borders/Margins/Padding and Layout pages.

First you will place the code for your image into your HTML page as described in on the images page. Then you will go into the CSS and make sure you have added a height and a width to the image, as well as the container holding it. You will then want to make the image a block element, and add a margin with the number of pixels or a percentage, first, that you want for your top and bottom margins, and then second write auto.

Gradients

Yes, you can add a gradient to your website. There are a few ways to do this. There is the code way, and the older way. I am going to tell you about the older way because it is currently more friendly in terms of cross-browser compatibility. Create a gradient in any image editing program, then take a small slice of it and save it out. You will use this as a background image for whichever element you want to have a gradient. In order to see how to set a background image read the tutorial on changing the background.

Image Loading Time

The larger a file is the longer it takes to load, the larger the quality and dpi of an image, the larger the file. When saving your images you should compress them to get the lowest possible quality, without actually harming your image. You can do this in Photoshop by going to save for web and devices. If you click on the four-up option, this will allow you to compare the loading time and quality for various settings. If you are unsure of the dpi of your image, you may want to go into the screen to resize images, here you can change your dpi under the term resolution. This will not change pixel size of your image, even though it may appear to. What it will change is your print size, so make sure not to overwrite your original file.