Website Designers and Webmasters

As I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called “skins”. “Skins” usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:

Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy’s “skins” Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel=”stylesheet” type=”text/css” href=”asset/stile.css” title=”metrostation” media=”screen” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”asset/cielo.css” title=”cielo” />

This is the javascript that needs to be included in the page:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
     if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
       a.disabled = true;
       if(a.getAttribute(“title”) == title) a.disabled = false;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick=”setActiveStyleSheet(‘cielo’, 1);return false;”

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I’ll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders

Beginners Note: The main purpose of CSS, or Cascading Style Sheets, is to add color and life to a website. The main use for HTML, or Hyper Text Markup Language, on the Internet is to create the format or layout of your website. (Note: It is quite possible to create two identical websites, one in only HTML, and one with almost no HTML formatting and lots of CSS.)

Many Search Engine Optimizers will tell you that the more CSS you use the better. The reason for this is simple: If you created a web page only in HTML, a search engine would have to index 300 lines of code (lets say), while on the other hand, if the same website was formatted with lots of CSS, you would only have 50-100 lines of HTML for the search engine to index. So the search engine would index almost only textual information, and very little code. And in theory, the search engine will think that you are a much more important resource for it to index.

As any Website designer will tell you, Internet browsers can react very differently to the same piece of CSS code. And since a vast majority of the public use Internet Explorer, it’s very important for your website to look good in that browser. Unfortunately, this browser doesn’t listen to CSS directions as rigidly as FireFox, the next most popular Internet browser. (Internet Explorer Vs. FireFox)

Now for the Internet Explorer CSS Tip:

Lets say you have this piece of CSS code:

.text {
padding-top: 5px;
}

And this is your HTML:

<div>Welcome to the HTML Class</div>
<div class=”text”>Today we will be learning about HTML</div>

And for some reason the freaking Interent Explorer won’t listen to your css. No matter what, it just refuses to add padding in between the two <div>s. There are many things you can try to get it to work. You can change it to “margin” or change the distance to 70px. Nothing happens. Believe me… one of the most frusturating things in the world… second only to stupid people… maybe.

Through years of programming websites and Internet database software, etc. I’ve decided to work mostly with PHP. PHP is a server-side scripting language that helps to create interactive websites. It is very useful for creating dynamic pages. (Pages that have one format but fill in different information depending on what information it is given.) This is common in any online store. Every product has the exact same layout, but it has different pictures, and words.

A great thing about PHP is it’s free. It’s largest server-side scripting language competitor, Microsoft’s ASP, isn’t. The PHP syntax is widely used and is very similar to C and Perl.

If I ever have a question about PHP or need information, I always go to http://W3Schools.com. It’s also a great place for beginner programmers to get their foot in the door.

Here is how to us PHP code to make 301 Redirects:

301 Redirect: Moved Permanently
This code is for page redirecting. If you ever change a page name on your website, or take it down, you need to redirect that link to another page. This is because if you’ve had that page up for any period of time, the search engines like google.com or yahoo.com still think that it’s there. Or another site may be linking to it. This will save visitors from getting lost and never seeing your site when they cliked on your link.

Here is the PHP code:

<?
header(“HTTP/1.1 301 Moved Permanently”);
header(“location: http://websitedesign.websitesinaflash.com/”);
exit();
?>

301 Redirect to “www.”
This code I programmed because I wanted to make sure that whenever someone comes to my site, they come to the “http://www.websitesinaflash.com” (NOT: “http://websitesinaflash.com“) So now whenever someone types in my website name without the “www.” It will automatically redirect.

“Who Cares if there is a ‘www.’ in front of your website or not?
The biggest reason for this is so that search engines don’t index two version of the same page. For example, if a Search Engine’s bot find a link to my sight that doesn’t have the “www.” It will index the entire site without it. And if that happens, I’ll have two exact duplicates of my website.

“Wouldn’t that be a good thing?”
No. Search Engines will ding you if you have duplicate content. They see it as an attempt to cheat the system. I knew a man who changed the hosting and domain name for his website. But he didn’t take down his old site. After a couple months, his old site which had had 3-4 Google Page Rank, now had 0 (zero). He realized this and took down his old site, and after half a year, he was back to normal.

Here is the PHP code:

<?
if($_SERVER['HTTP_HOST'] != “www.websitesinaflash.com”)
{
header(“HTTP/1.1 301 Moved Permanently”);
header(“location: http://www.websitesinaflash.com” . $_SERVER['REQUEST_URI']);
exit();
}
?>

And there’s my two cents on 301 Redirecting with PHP.

-Enjoy
-Ashton Sanders

For the last 4-5 years I have been using Dreamweaver MX for most of my website design and Internet work. It was a great program in the beginning because I could create a page using tables in the design view, and then I could look at the code, and Dreamweaver MX would tell me the code that they used to create the page.

So if you are looking at learning HTML and how to make websites with tables, Dreamweaver is a great choice.

I recently upgraded to Dreamweaver 8. There are a number of key difference in this upgrade which make it 10x better than it’s predecessor: Dreamweaver MX.

Websites Transfer:
The first thing that I noticed when I opened my Dreamweaver 8 for the first time is that it saved all of my sites from my earlier Dreamweaver, so I didn’t have to spend a couple hours transferring all of my sites to the new Dreamweaver. I didn’t actually have to do anything to start working on my website design or making corrections on the Internet. It was good to go.

File Activity Box:
The second this is when you are uploading something using MX, you can’t do anything else. So if you have a couple videos to upload, a pop up window appears and you can’t use Dreamweaver at all as long as that pop up window is in your way. You have to wait for them to finish uploading before you can do anything. In Dreamweaver 8, the window that pops up is entitled “Background File Activity.” And it is just that. It works in a separate screen allowing you to edit open documents and continue working. (Note: Your computer can only have one connection to an FTP site at a time, so while you are uploading something you can’t do anything else with the same or another remote server.)

Server Disconnection Notice:
On of my biggest annoyances with Dreamweaver MX, is that while I was working on a website design or Internet page, the connection to the remote server would get lost, and it would lag my whole computer for a couple seconds and then give me a pop up that read: “You have been disconnected to the remote server.” Then when you clicked the cancel button, it would try to connect again. Truly a large waste of time for everyone. Thankfully, they removed this pop-up window in Dreamweaver 8. Now your connection to a remote host can last for hours, and if you get disconnected, the button will become unselected, and thats it!

Use of stylesheets:
As any Search Engine Optimizer knows, tables and commands can be some of the worst things for a website as they can clutter up your code, and make it difficult for search engines to index your entire site. In this new Dreamweaver 8, not only does it understand CSS very well in the website design view, but it you can tell it to format your page with CSS or depending on your preference. This is a great tool, because Email Newsletters should not use CSS includes, as they will sometimes get lost. So if you’re doing a newsletter, you can just switch over to the tag for any visual work you need to do in the design section. It also knows all of the CSS commands, making it easier to learn new CSS!

Error Detection:
Dreamweaver 8 now has a great HTML error detector. It will tell you almost immediately any obviously incorrect tags you have on your page. A great tool for creating HTML and CSS Valid Pages.

So as you can tell, if Dreamweaver MX was okay, Dreamweaver 8 is AMAZING! and I can’t wait to see what Adobe has in store for us with Dreamweaver 9! On that note, I cannot believe that Adobe has bough Macromedia! One of the two largest Internet program creator are now one. From PDF’s to Flash, you get it all from Adobe now… But thats a subject for another post.

Until Then,
-Ashton Sanders