Last week, I gave you some ideas to start optimizing your images for web upload, looking at file size and compression type (JPEG or GIF). This time, we assume that you have your file created and uploaded, and we begin to explore the various ways you can present that image in a page, focusing on alignment and borders.
This week, Oscar the Panda is on vacation, so I have Slippy here as my assistant. Say hi to Slippy!
With the Point and Click Editor, aligning your images is quite easy, but first, you’ll need to put an image on the page. You can do that by clicking on and following the given directions.
The inserted image is displayed in what is called an inline format, meaning that it flows through with the text, as if it was just another letter (like the image of the “Insert Image” button you just saw).
In this form, you can use (the left, center, and right alignment buttons) to align it just as you would text, but this is only useful if it’s sitting alone, like the very first picture of Slippy above, which was center-aligned. What if you need the image floating beside the text, such as the image to your left right now? Then we need to move on to some more advanced options.
Right click over the image and the following menu should present itself:
Upon clicking on Image Properties, you’ll see this window:
Okay. At the very bottom of the window is the Align option. Click the dropdown menu and you’re presented with a lot of different options. For our purposes, the only ones that matter are left and right. These two handle almost all of your everyday needs, but feel free to experiment with the other options also.
You’ll notice that there is a Border option as well. You can choose to set that to do a traditional HTML border around the image. Below, you’ll see Slippy caged, in borders of width 1 through 4.
Check it out, Slippy wants to show you his Spring Break photo:
See, the center part is the entire image, as shown here:
The Polaroid effect was ALL generated in the CSS properties for that image. Here’s how it was done:
- In the Image Properties window, go to the tab.
- Click on the input box for Style
- Type in the following:
border:1px solid #ccc; border-width:1px 2px 2px 1px; background:#fff; padding: 10px 10px 50px 10px;
Let’s break it up a little. The first thing we define is the outermost border. “border:1px solid #ccc” says to do a 1 pixel-wide, solid border of color #ccc (a light gray) all around the image (Click here to learn more about colors in CSS). However, you’ll notice that we make the right and bottom edges a bit wider, to simulate a slight shadowing. To do that, we define the widths individually, with “border-width:1px 2px 2px 1px;”. The order of widths is top, right, bottom, and left. That would give us this:
Now we need the white border for the Polaroid effect. We do this by exploiting the fact that in CSS, even images have a background, typically covered completely by the image. However, if we give the image some padding, this background reveals itself. Therefore, “background:#fff” sets the background color to white. Then, “padding:10px 10px 50px 10px” sets the width of the padding on each edge, again in top, right, bottom, left order. And thus we get our final result!
One last thing. Earlier, we used “border:1px solid #ccc” to make our outermost border. A question many people ask is, “What can I do other than solid?” Here are some options:
Now that you’ve got all that down, it’s time to go experiment, meaning…
That’s it for Slippy and me for today! As always, contact me with all your questions and interesting ideas, or leave a comment here. Thanks!