Looking to learn a lot more?

Got some time on your hands and want to learn it inside and out, even though you may be a beginner to coding? Have I found some tutorials for you!

Build your own WordPress theme. These tutorials explain to you what you’re doing as you build your theme line by line. Learn some xhtml, css, and php in the process, as you complete the day-by-day tutorials.

I’ve been making templates to sell lately, and in the template I mention that you can space photos by adding a spacer strip to them in your graphics program. I thought it would be a good time to put a little tutorial in here about that.

I’ve got a nice little thumbnail photo of a chocolate waffle which I decided to post to a couple of blogs of mine. I like to have blog posts start with a thumbnail photo at the upper left with the text running down the right and wrapping around the photo.

I also like to have photos and other images alternate with text wrapping around them, which you can do by adding ‘align=”left”‘ or ‘align=”right”‘ to your image tag, like so:

<img src="http://myimagehost.com/image.gif" align="left">

Unfortunately, as you can see up there, the text touches the photo. That’s the default in html. There are a lot of different ways to fix this, depending on the circumstances. But if I’m editing the photo for a blog of mine or for Niteflirt, I often just add a spacer strip to save code.

Open up the photo in Paintshop Pro. Click ‘Layers/Promote background layer’ so you can work on the background layer. Now click ‘Image/Canvas size’. The following dialog box comes up.

Your image will now have a transparent margin on its right and lower sides, which will show as a checkerboard background in PSP.

Now click ‘Layers/New raster layer’. Accept the defaults in the dialog box that pops up.

Paintshop Pro has helpfully put a new transparent raster layer on top of the current layer. This is going to be our new background, so we want it beneath the current layer. Look at the Layers palette in the right sidebar. (If you don’t have your layers palette showing, go to ‘View/Palettes/Layers’ to make it appear.) Click on the transparent layer and drag it beneath the layer with your image one it.

Now, with the transparent layer still selected, click ‘Layers/Duplicate’. I said I’m going to be putting this in two blogs. One has a white background and one has a black background. I’m going to be making two different images, one with a white spacer and one with a black spacer.

I’m going to give the image a drop shadow. Click on the image layer, then click ‘Effects/3D Effects/Drop Shadow…’ The following dialog box will come up.

The window at the left shows your original. The one at the right shows what the drop shadow will look like at the current settings. You can’t see the new drop shadow here. You have to drag the picture over to see it if it’s bigger than a small button.

I generally choose a shade of gray for a drop shadow on a white background, rather than black. 7 pixels of vertical and horizontal offset is good for a photo like this. I tick the box ‘Shadow on a new layer’ because I want to be able to control whether the gray shadow shows up on my black background coming up.

Now I select white in the Materials palette and floodfill (the bucket on the toolbar) one of the background layers. Then I fill the other with black.

If you have a different background color to match, you can use a color picker to select the background color for proper matching.

If you don’t have a solid color background, you can save the image as a .png file, but older versions of IE will not display the transparency properly. It’s a tradeoff.

Select ‘Edit/Copy merged’ then ‘Edit/Paste as new image’ to create a new image with a spacer. Save the original as a .psp file to preserve its layers, and the new one as a .gif or .jpg. Note that the background is white here because the black background is hidden beneath the white background.

Now I’m going to click the little eye next to the gray shadow layer and the white background layer. This will make these two layers invisible, and the black layer will show. Again, select ‘Edit/Copy merged’ and ‘Edit/Paste as new image’.

You can’t see it here, but this image with the black background will look perfect in the blog I have with a black background.

So you want a slideshow, but you’ll be happy to get one of those ones where the pictures scroll from right to left? I will show you how to do that. It’s fast and simple.

There are a lot of different things you can do with marquees. If you want to learn more, you can look them up on the internet. But for now, because it’s the most useful and the easiest, I’m just going to show you the one on top.

Note: Firefox does not display this post properly within the main page. To see all the effects, click the entry title and view it as a single post.

Marquees for Niteflirt

It’s really pretty easy. The marquee tags to make images scroll from right to left are <marquee></marquee>
To make one image scroll, put one image between like this:
<marquee><img src="http://myimagesource.com/image.gif"></marquee>

To make two images scroll, put two images between them like this:
<marquee><img src="http://myimagesource.com/Image1.gif"><img src="http://myimagesource.com/Image2.gif"></marquee>

You can put a space between the images if you like
<marquee><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

You can even scroll text.
<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p><marquee><</marquee>

I want everybody to read my message as it scrolls across the screen.

You can even reverse direction by adding a ‘direction=”right”‘ to the first tag.
<marquee direction="right"><img src="http://myimagesource.com/Image1.gif"> <img src="http://myimagesource.com/Image2.gif"></marquee>

Warning! Never scroll text from right to left!
<marquee direction="right"<br /> <h2>I want everybody to read my message as it scrolls across the screen.</h2> <p></marquee>

I want everybody to read my message as it scrolls across the screen.

Things to remember:

• A big marquee with a lot of photos in it can take a long time to download. I saw a page yesterday in the top 10 with so many marquees and slideshows on it that I thought none of the links were working. You wouldn’t want a potential caller to go away if he thought something was wrong with your page.
• Limit your marquees to one per screen. That means that the viewer should never see more than one at a time.
• Marquees don’t display properly in all browsers consistently.
• Remember, you want a guy to think, oh, she’s sexy, not did she design my daughter’s myspace page? or worst of all I think I need reading glasses, I’m going blind!

.

There are a lot of means of “protecting” your photos, text, or site itself that can leave you vulnerable, thanks to the fact that anyone can click “View => Source” in just about any browser. Now if your security measures include javascript, commonly used to disable the right click menu—among other things—the surfer can still look at your source code to see what you’re hiding. Some people will be made more curious by the fact that you’re obviously hiding something, even though they might have right-clicked on a photo just to see who your image host is.

Also, keep in mind that javascript only works when it is turned on. Most scripts have no effect when the user turns off javascript, as many users do.

Anyway, anyone who wants your phots badly enough can always take a screenshot of your page to snag your images.

It’s best to prominently watermark all photos of any size, so at least if anybody saves them, your character name, website, contact info, etc, will always be with the photos.

Here’s a little tale of a website which had a javascript login protecting its membership area. It was a simple issue for someone with even half an idea of how javascript works to look at the code and figure out how to get in. Having a security method which is useless like that is worse than having none. Clearly they put things in the private area thinking they were secure, rather than completely accessible to anybody curious enough to look.

HACKED!