Intermediate
UPDATED!How to create a rollover button
In this lesson we'll be explaining the steps involved in creating a rollover button and how to add it to a page on your site. Please note, this lesson requires a basic knowledge of adding HTML code to your site. Let's get started! A rollover button provides an eye-pleasing option to your site as an alternative to a standard hyperlink. When a user hovers their mouse over the button image it magically changes - a great party trick to impress all your friends! There are a variety of methods for doing this but the way we will describe it here avoids having to use Javascript (which some users block) and avoids the flickering you sometimes get with rollovers. There are three aspects to this process: Creating the image Adding the HTML to the page Adding some new styles to the CSS file Step 1 – Create the image What you need to do is create a single image that includes y... read more »
How to make a round cornered box
So you want some nice friendly round corners on your website's boxes, do you? Round cornered boxes are hugely popular amongst web designers. They're also surprisingly tricky little fellows to create. In this lesson I'm going to show you a good method for creating nice flexible round-cornered boxes that won't bloat your page with excessive amounts of code. For this lesson I'm going to assume that you know how to write a bit of HTML and how to add CSS to your page. If you're wanting to do this in Dreamweaver or another web authoring software, it will be faster if you switch into “code” view to do this. Before you start you're also going to need four small images for your corners. I've created mine in Photoshop by creating a rounded rectangle (that looks roughly like I want my final round-cornered box to look like) and then cropping it so that I've got one corner. I save that corner ... read more »
How to move your pages with 301 redirects
Imagine you've got a page on your website that has attracted a whole lot of good links, and is attracting a lot of traffic, but you need to move it to a different place on your website. What can you do? Obviously you don't want to delete the page and simply recreate it somewhere else... you'll lose all those great links and all that PageRank as well. The solution is the 301 redirect. This takes all traffic and links arriving at your old page and redirects them to the new page. Your links are safe, your pagerank is safe, and your visitors get to where they need to be. To make one, you just need to paste this piece of code into your .htaccess file (if you're using an Apache server, which you probably will be.) Make sure you've created your new page first! Redirect 301 /oldpage.html http://www.example.com/newpage.html Save this, upload, and your redirect should be in place! E... read more »
Robots.txt - Telling the search engines what they can and cannot index
So your site has made it into the search engines — you've got the Googlebot, Yahoo Slurp, MSNBot and a whole host of other spider-like creatures crawling through your site on a regular basis. People can now find your site by typing something into the search engines... although you probably won't be showing up on the front page for your best keywords just yet. But what if you've got sections of your website that you don't want indexed? Remember that search engine spiders basically just wander around the internet, following links and inputting whatever they find into their giant databases. If there's a link to the page... the spiders will index it. They don't know that those photos are strictly friends and family only, or that there are certain pages in your website that you'd really rather not have popping up in the search engine listings or being archived by that pesky internet ar... read more »
URL Canonicalization – To www or not to www?
Most people would consider www.example.com and example.com to be the same website. I don't know about you, but for me including "www" in web addresses is something I do when I'm feeling energetic, or when I've had a few coffees. I very rarely visit www.youtube.com, or www.google.com. It's youtube.com and google.com all the way for me. What most people don't realize is that an address with a WWW at the start is not the same as an address without a WWW. The WWW isn't an optional extra... it's an essential part of the address. This is why you'll sometimes type an address into your browser and get the smackdown of "this page doesn't exist", but if you add or remove the WWW the page suddenly springs back into existence. A lot of the time a web server will be configured so that it doesn't really matter what someone types in — they'll still get there. So it's not usually such a problem... read more »
More video lessons in Intermediate »
Sitemaps
Date scripts
Simplifying navigation with PHP includes
How to hide your affiliate link with redirects
Anatomy of a web page 2
Don't know where to start?
Suggested order to follow for site building lessons.
- Intermediate
- Anatomy of a web page 2
- Date scripts
- How to make a round cornered box
- Simplifying navigation with PHP includes
- How to hide your affiliate link with redirects
- Sitemaps
- URL Canonicalization – To www or not to www?
- Robots.txt - Telling the search engines what they can and cannot index
- How to move your pages with 301 redirects
- How to create a rollover button
