I JUST downloaded Windows 7 beta 7000 and installed it as a second operating system on my machine.  I know what you’re thinking “does it suck as much as Vista?”

Drum roll please….No!  In fact, I think Windows 7 will be a good solid upgrade from Windows Vista and even Windows XP, believe it or not!  There are a TON of new features and improvements from Windows Vista, and I will be sharing them with you!

I’ll be sharing problems I’ve encountered as well as fixes to those problems, as many new features as I can – good and not so good, features I’d like to see, and my thoughts on Windows 7 as a whole.

I haven’t had too much time to spend with it, just 2 hours tops, so I have a lot more to discover.  Even in this short amount of time, I’ve discovered a lot of fantastic features.

Why take my word for it, though, when you can download beta yourself and try it out for free?  It’s really not that hard, and there are many ways to do it.  You run it on a Virtual Machine (Microsoft makes a free one, google it), replace an existing operating system on a computer you don’t really ever use, or install it on a second hard drive or second partition on your existing hard drive.

I’ll give you a VERY quick walk-through on how to download and get Windows 7 Beta running the way I did.

First, visit http://www.microsoft.com/windows/windows-7/beta-download.aspx
and download the beta.  It will have you fill out a few things, but it doesn’t take that long.

The beta comes in ISO (a disk image file) format which you will have to burn to a DVD with a program that will burn them properly.  Roxio does this, but you can google “Free ISO DVD Burner” and find yourself something different if you don’t have a Roxio disc burner.  (If you do not have a DVD burner, you can still try Windows 7 beta out using a virtual machine; search for Microsoft’s free virtual machine.)

Once you have successfully downloaded the .ISO file and burned it to a DVD, you may be ready to install – unless you’re like me and you wanted to keep your previous operating system.  If that is your case, you will need to either install a new, blank hard drive, or create a partition on your existing hard drive.

To do this, follow the tutorials here in this order:

1: http://windowshelp.microsoft.com/Windows/en-US/Help/f2e9a502-e63c-413d-8804-87326ef4f4cc1033.mspx  (when doing this, make sure you shrink volume by at least 20 GB; this will leave you 20 GB worth of space to install and run Windows 7, which requires at least 10 GB – I reccomend using more than 20 GB, because by the time you’re through testing software on it, you’ll be almost full.)

2.  http://windowshelp.microsoft.com/Windows/en-US/Help/8572be9b-8580-49f7-9719-b3a4c42749fe1033.mspx

After following these 2 tutorials, insert the DVD you burned into your DVD drive and run the install.  It will ask you where you would like to install Windows 7, so choose the new partition you made.

From there, follow the instructions and you should be all set.  Now, there is a common issue I encountered when installing Windows 7 which I will cover in the next post, so stay in touch!

Take it easy,
David

Hello everyone!  A common problem for Vista users with Dreamweaver MX is the “Insert>Tables” function; it simply will not work.  I have already posted two articles on this issue providing some fixes for the issue.  In the first article, I show how to make the “Insert Table” function actually do something and that is insert a table.  The only problem with THIS fix is that it doesn’t allow you to change the specs before the table is inserted into your Document.  The second fix is a tip given by a user, and another tip given by me which has worked for a decent ammount of people, but not all (for some it only worked temporarily, then the problem occured again.)  In this tutorial, I will be giving a new fix which will make the “Insert Tables” function work like a charm.

1.  First thing is first, download, save, and extract this ZIP file:  newtable1.zip

2.  Right click and copy the “table.htm” file  (The code in this file was taken from an extension called “etable” that you can download from http://www.idest.com/dreamweaver/objects-fr.htm)

3.  Go to C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Objects\Common  (NOTE:  Some users may have to go there AND C:\Users\YOUR USER NAME\AppData\Roaming\Macromedia\Dreamweaver MX\Configuration\Objects\Common and repeat the following steps in both locations.  This location is “Hidden” so either enable windows explorer to view hidden files and navigate to this location, OR copy and paste the filepath into the address bar in windows explorer and replace “YOUR USER NAME” with an appropriate username.)

4.  In this folder, rename “Table.htm” to “Tableold.htm” so you can reuse this file as a backup.

5.  Now, press CTRL+V to paste the recently downloaded “Table.htm” file.

6.  Open up Dreamweaver MX and insert a table

Now, the customization feature won’t look exactly like the original, but it has all the functions – plus a little more!  If you want, you can even tweak this “Table.htm” file to do whatever you’d like.

For me, this is the best way to get Dreamweaver MX to insert tables on Windows Vista.

What Do You Think?
Did this help you?  Have you tweaked the Table.htm file to do something really cool?  Send your thoughts to david@funkytower or leave a comment below.  I look forward to hearing from you. 

Take it easy,
David Crandall

UPDATE:
I received this e-mail from Dave who has some useful information for those who may have trouble using this fix.

Just a heads up I had to change the file in all of these location in order to get it to work. Thought I would let you know in case anyone else had trouble with it. So thank you for pointing me in the right direction. The tables not working has been a huge frustration since switching to vista.

Thanks again!

C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Objects\Common

C:\Program Files\Macromedia\Dreamweaver MX\Configuration-1\Objects\Common

C:\Users\David\AppData\Roaming\Macromedia\Common

C:\Users\David\AppData\Roaming\Macromedia\Dreamweaver MX\Configuration\Objects\Common

In Dave’s case, there are 4 file paths in which he had to paste the “Table.htm” file.  This situation is pretty uncommon, but if you find yourself STILL not being able to get the ‘Insert Table” function to work, search out some new file paths that are in relation to Dreamweaver MX.

Please note, typically, when you need to paste this file in more than the two file paths is when you’ve uninstalled and reinstalled Dreamweaver MX multiple times.  When uninstalling Dreamweaver MX, Vista leaves behind the hidden “Configuration” files, thus, when reinstalling, a second Configuration folder is created.  I hope this makes sense.  Thank you, Dave, for sharing your new info with us!

Recently, I have posted the article “Dreamweaver MX and Vista: Inserting Tables Fix” which has become one of the most popular recent posts I’ve written thus far.  This post shows how to get the Insert>Tables function in Dreamweaver MX to work in Vista – specifically Vista Premium (but should work with other versions.)  This has been a huge help to readers across the globe and I am thankful that I have been able to help so many people.

As you may know, FunkyTower.Com is not just about me helping you – the goal is to get you involved by offering ideas for content, solutions to problems, etc., that are all submitted or asked about by you.  This happened recently, thanks to Phil Chave.  Phil sent me this e-mail which may solve the ever so frustrating Inserting Tables problem in its entirety:

“Hi Dave…

Thank you immensely for publishing the fix for the DreamweaverMX – Vista, inserting tables problem.

You might like to add these details into your fix sheet at some stage.

For Vista Home Premium.  Follow the locations to both files as you suggest in item 1.

In the ‘UserName’ route, the table.htm file may be empty.  If this is true, it is probably true that this is the location that Dreamweaver is searching for the location of the table data, and finding nothing to use.

Rename this file to tableOLD.htm.

Go to the other location (the program files route location) and find the table.htm and the Java file also called table.

This is where the table data is stored.  Confirm this by hovering over the file and note that it is about 4kb and 2kb respectively, and therefore has some data.

Copy both files and paste them into the Common folder at the end of the UserName route.

Open DreamweaverMX and click the insert table button.

Beautiful, it works!

Hope this helps people with Vista Home Premium.

All the best

Phil Chave

www.antiquecollector.uk.com“

I have yet to test this out, but would love to know how this suggestion went for you!  Please let me know.

The other solution in which I have come up with, which is really quite simple is this: removing and reinstalling Dreamweaver MX.  You may have already tried this – but let me propose to you an extra step.
First, uninstall Dreamweaver MX by going Start>Control Panel>Programs and Features, then right clicking on the Dreamweaver icon and clicking “Uninstall”  It may ask if you would like to “repair” Dreamweaver, but choose to completely remove it.

Secondly, remove extra data manually.  That’s right, because Dreamweaver MX is not fully compatible with Vista, it leaves behind data which is not overwritten on the next reinstall.  Click the start button and select “My Computer.”
In the address bar, type in C:\Users\YOUR USER NAME\AppData\Roaming\Macromedia making sure to replace “YOUR USER NAME” with the actual username of your PC’s account.  Delete the Dreamweaver or Dreamweaver MX Folder.

Thirdly, be safe and restart your computer.  Upon, restarting, reinstall Dreamweaver MX.  Hooray, it’s working again!  This is what I did today, which has worked for me and have yet to encounter any problems.

So, please try Phil Chave’s suggestion before taking the measures I did.  I wish I had received his e-mail before I reinstalled Dreamweaver MX, as it seems like it would have saved a significant ammount of time.

So, I challenge all who read this to take Phil’s suggestion on a test drive and let me know how it works out.  This would be a GREAT help to me and users across the globe who just can’t afford to upgrade from MX to CS3 right now.

You can send me your feedback as a comment, or send an e-mail to david@funkytower.com
I look forward to hearing from you

Take care,
David Crandall

Woah hold on now, for this tutorial, you have to see it for yourself.  So, I’ve gone ahead and made a small navigation bar that you can download and observe for yourself.  Click this link to download it: buttons.zip

Once you’ve saved it and extracted the files, we can get started!

Step 1:  Creating the buttons:

As you can see inside the folder, we have 2 images:

1.jpg

2.jpg

1.jpg is going to be the button’s original appearance; 2.jpg is what you will see when the mouse cursor is hovering over the button.  Note that there is no text: the reason is that we will use text in our HTML document and modify it with our CSS document.

In order to create buttons, start by creating one image that you think would look best as a button.  Save the image as “1.jpg”  Then, modify it to how you want it to look when the mouse cursor is hovering over the button, then save it as “2.jpg”  It is important that the overall image size does not change when saved.  Both of these images are 100 pixels wide and 34 pixels in height.  We must know the size of our images as it becomes greatly important in the overall product of our buttons.

So now we have 2 button images saved in one directory

Step 2:  Creating the HTML Document:

This step is easy.  Create a n HTML document with a link, and save it to the same directory as the button images, and name it “navbar.html” for now.  That’s it.  In this case, I wanted to show you how a navigation bar might look using the button – so I made a table of one row and 5 collumns with no size defined in the HTML, and put one link inside each column.  The reason I didn’t define a size in the HTML is because we will define the size in our CSS.

The HTML code you should have in the navbar.html file, that came with the buttons.zip file that you downloaded, should look like this:

<html>
<title>Navigation Bar with Buttons Example!</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

<body>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td class=”nav”><a href=”navbar.html” class=”nav” >Page 1</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 2</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 3</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 4</a></td>
    <td class=”nav”><a href=”link.html” class=”nav”>Page 5</a></td>
  </tr>
</table>
</body>
</html>

There are a few things to note in this code that you must do to your OWN code, if you are making your own HTML document.

1. The <td> tags class is “nav”:  This will be the name of the class we will be editing in our CSS document to modify the table cells.
2. The <a> tags class is “nav” as well, to apply the button and edit the text.
3. We are linking to an external CSS file, hence the <link href=”style.css”….> tag.  Using external stylesheet(s) should become a common practise for you, if it isn’t already.  Be sure that if you are making your own HTML document and CSS document from scratch that the “style.css” corresponds to a local stylesheet called “style.css” just like in the buttons.zip file that you can download.

Just in case you don’t know by now, “class” is like a name that can be identified on different things.  The CSS document will have these names in it, and “class” calls the names to function in the HTML document.

Step 3:  Creating Our CSS document:

Using notepad, type in your CSS code. 
If you’re following along with the buttons.zip file, here is our CSS Code in our CSS document:

a.nav {
 font-family: Helvetica, Arial, sans-serif;
 color: #FFFFFF;
 text-align: center;
 background-image: url(1.jpg);
 background-repeat: no-repeat;
 background-position: center top;
 height: 34px;
 width: 100px;
 font-size: 16px;
 padding-top: 7px;
 text-decoration: none;
 display: table;
}

a.nav:hover  {
 background-image: url(2.jpg);
 background-repeat: no-repeat;
 background-position: center top;
}

td.nav {
 height: 34px;
 width: 100px;
}

Let’s break this down.

FIRST SECTION: “a.nav”
The main properties of the button

1. font-family:  this will be the font you choose for your text.
2. color:  this is the color used for your text only
3. text-align: this is the horizontal alignment for your text; it can be left, right, center, or justify.
4. background-image:  the url of the button we want to appear when you first load the page.
5. background-repeat: leave this property as “no-repeat.”  If you change it, the picture could repeat itself, destroying the whole design of your button.
6. background position: leave this as it is too, this will center your image and align it to the top of the table cell, leaving it looking nice and clean.
7. height AND width: these properties MUST match the size of the button images!!!
8. font-size:  however big or small you want your font; it is best you choose a font that will leave the text fitting inside the button.
9. padding-top:  this is the ammount of space from the top of the table cell in which your text will appear.  In this case it is being used to put the text right in the middle of the button.
10. text-decoration:  change this to whatever you want.  I chose “none” so that there wouldn’t be an underline when we first see the button.  I personally find the underlines, typically, to be tacky.
11. display: I chose “table” because this causes the background to be displayed throughout the entire table cell.

SECOND SECTION: “a.nav:hover”
This is what we want the button to do when we put our mouse cursor on top of the button.  Because we’re only working with the button, I changed only the properties of the button image.  You can change the properties of the text, too, if you’d like.

1. background-image:  the url of the button image we want to appear when we put our mouse cursor over the button.
2. background-repeat:  same as above
3. background-position: same as above

THIRD SECTION: “td.nav”
The properties of the table cell – we only need to adjust the table cells size.  This is really only needed if you put the button inside a table cell to use as a navigation bar.  If you’re not making a navigation bar or putting your link/button in a table cell, you can skip this section.

1. height:  This is the table cell’s height which MUST match the height of our button images.
2. width:  This is the table cell’s width which MUST match the width of our button images.

These are ALL the properties we need to complete our CSS document for our button.  Save this CSS document as “style.css”  As mentioned before, we are linking to a separate stylesheet called “style.css” and this will be that stylesheet.  Save your stylesheet to the same folder/directory as your button images and HTML document.

Step Three:  Testing

Now, if you’ve followed along properly, you should have 2 button images, an HTML document with one or more links, a CSS document covering the specs of our button, the specs of our button when we hover our mouse cursor over it, and (if you’ve chosen to make a navigation bar using a table with table cells) specs on the navigation bar’s table cells.

If so, open up your HTML document (navbar.html) and see how it looks.  If you coded the CSS and HTML properly, then it should look just right!  If your button doesn’t look right, make sure you defined the size of your images in the CSS documents properly – and that they are the same.

If your button doesn’t work, double check to make sure you identified the classes properly in the HTML document, and that the images’ URLs are correct in your CSS document.

Extra Tips:

If you want to change the font-color, font-weight, and text-decoration during your hover effects, be sure you define the way you want your text to look using these properties in both “a.nav” and “a.nav:hover”  If you don’t, you could confuse some browsers and your button won’t work properly.

If you want to use crazy text font, instead of a common text font – apply that font to your button images, NOT the HTML document.  When you do your HTML document, simply type a space for a link, like so:

<a href=”link.html”> </a>

In doing this, you won’t have to worry about any text properties in your CSS document.

If you are copying and pasting code from this page into notepad, this could sometimes cause a negative effect: the best thing to do is download the buttons.zip file and work with that.  It is always best so hand-type the code.  If you use dreamweaver, use “auto-html” features, or hand type the code.  This ALWAYS works best.

That’s it!!!  Now you have a functioning button and/or navigation bar with a rollover image effect!  Pretty neat, don’t you think?  AND it was easy!!!

What Do You Think?
Was making a roll-over image type button with CSS easy?  Did you try this out and couldn’t get it to work?  Did you use this method on your website?  If you did, I wanna see it!  Let me know if you have any questions or comments about this tutorial, and I’ll be happy to get back to you!  Send me an e-mail at david@funkytower.com,  or leave a comment below! 

Take it easy,
David Crandall

Step 1 – Creating the table:

The first thing we need to do is set up our table.  I’ll make it easy for you and create a verticle, 5 collumn table.  You can customize this table any way you’d like.  You can convert it to 5 rows instead of five collumns if you prefer having a side bar.

Open up Notepad or a text editing decoder similar to notepad and create a basic HTML document with a table like so:

<html>
<head>
<title>Your Website Title</title>
</head>

<body>
<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td>Page 1</td>
    <td>Page 2</td>
    <td>Page 3</td>
    <td>Page 4</td>
    <td>Page 5</td>
  </tr>
</table>
</body>
</html>

Again, you can modify this table in any way you need to.  The only thing I suggest NOT modifying is the font, alignment, or size of the text – and do not be quick to add links to your navigation bar.  We’ll cover this in the next step.

But first, be sure that you’ve saved your work.  For now, save this document as “navigationbar.html” and continue saving your work after each step – just to be safe

Step 2 – Making our links

Instead of using the common <a href=”http://yourwebsiteurl.com”> tag, we’re going to go a different route.  Because we want the entire cell to act as a button or link, we need to modify the entire cell, not the text within it.  To do this, we’ll add a function called “onClick” inside each <td> tag.

To do this and find each <td> tag and add this function: onClick=”document.location.href=’http://www.funkytower.com’;”

Now all your <td> tags should look like this:

    <td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 1</td>
    <td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 2</td>
    <td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 3</td>
    <td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 4</td>
    <td onClick=”document.location.href=’http://www.funkytower.com’;”>Page 5</td>

Change the URL to whatever you’d like it to be so that it fits the purpose of your navigation bar.

Step 3 – CSS Properties for each button

Now that we have a dull navigation bar with no style or beauty to it, let’s work on our CSS.  Let’s first start by making our navigation bar look just how we want it.  Paste this code somewhere between the <head> and </head> tags:

<style type=”text/css”>
.nav {
 background-color:#990000;
 font-family: Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 text-align: center;
 cursor: pointer;
}
</style>

Let’s break this down:

1. .nav – This is the name of the class we will use.  Change it to anything you want like “.navbar” or “.thebar” or “.thethingie”…what ever you want
2. background-color – This, obviously, will be the background color of our cell.  Change the color to whatever you’d like!
3. font-family – This is your basic font for your text.  There are different font-families you can use.  Here are some common ones1.  Verdana, Tahoma, Arial, Helvetica, sans-serif
   2.  Georgia, Times New Roman, Times, serif
   3.  Geneva, Arial, Helvetica, sans-serif
   4.  Arial, Verdana, Helvetica, sans-serif
   5.  Courier New, Courier, Verdana, sans-serifNow, you can go online and find more fonts families, but these here are the most common – so if I were you, I’d stick to one of these. 
4. color – Simply put: the color of the text.  Again, this can be anything you want.
5. text-align – The alignment of the text.  Chose left, right, center, or justify.
6. cursor – This is what the cursor becomes when it is within the table cell.  The “cursor: pointer;” property will help indicate that the cell is, in fact, a link to another webpage by showing And it also will keep your cursor from turning into when hovering over the text in your navigation bar.

So now that we understand the basic properties of our CSS code, it’s time to add some effect to our navigation bar!

Step 4 – Adding Effect:

To do add a hover effect to your navigation bar, add the following code to your CSS style:

.nav:hover {
background-color: #CC0000;
}

“.nav:hover” indicates that we’re using the same properties as “.nav” except for the following properties (i.e, these are the properties that will change when we hover our mouse over the table cells in our navigation bar)

Note that the only property I’ve put here was the background color.  You can use/change whatever property you’d like such as ”color” for text - just ommit the “cursor” property, as it won’t matter since we covered that in the previous CSS properties.

Step 5 – Implimenting the CSS to the Navigation Bar

This step is probably the easiest step.  Simply add class=”nav” within your <td> tags.  Now your ENTIRE HTML document should look something like this:

<html>
<title>Untitled Document</title>
<style type=”text/css”>
.nav {
 background-color:#990000;
 font-family: Helvetica, Arial, sans-serif;
 color: #FFFFFF;
 text-align: center;
 cursor: pointer;
}
.nav:hover { background-color:#CC0000; }
</style>
</head>

<body>
<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr>
    <td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 1</td>
    <td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 2</td>
    <td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 3</td>
    <td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 4</td>
    <td class=”nav” onClick=”document.location.href=’http://www.funkytower.com’;”>Page 5</td>
  </tr>
</table>
</body>
</html>

Step 6 – Save it and Test it!

Upload it to your server and test it out.  Now you have a fully functional navigation bar done completely in CSS!  Final thing to do is test it out!!!

Other Tips:

Now, this is totally optional, but I would reccomend adding your CSS to an external CSS document, rather than adding the entire CSS code to the head of your HTML document. 

To do this, copy and paste all the CSS code (excluding <style type=”text/css”> and </style>) into a new notepad document and save it as style.css in the same location as your HTML document.

Now, open up your HTML document and replace ALL your CSS code, including the <style> tags, with this:

<link rel=”stylesheet” href=”style.css” type=”text/css” />

Now save your HTML document and test it. 

What Do you Think?
Did this tutorial help you??  Got any other cool tips or tricks regaurding HTML/CSS?  Need to know how to do anything else with CSS or HTML?  Let me know and I would love to help you!!!  You can e-mail me at david@funkytower.com and I’ll do everything I can to help you

Take it easy,
David Crandall

If you’ve upgraded to Windows Vista and have installed your old Macromedia Dreamweaver MX, you are bound to  run into some compatibility issues.  For many web designers, using tables is a huge asset for designing a web page.  Though you can do many of the same things using <div>, tables is fairly easy to use.  The only problem is, Dreamweaver MX and Vista = no inserting tables.  Is there a fix to this problem?  Why, yes there is.

Though, not the fix one would hope for, if you want to use the Insert>Table function in Dreamweaver MX on Vista, this tutorial will help you to use the function.  The only minor setback is this: you won’t be able to customize your table until after it is inserted into your document.  Sorry, but that’s just the way it is.  So if you’re ready to get SOME functionality into your software, here’s what you do:

1.  Locate the Tables.htm file located in the configuration folder of the program root.  This can be one of two places in Vista.

Try first THIS location:
C:\Users\YOUR USER NAME\AppData\Roaming\Macromedia\Dreamweaver MX\Configuration\Objects\Common

If there is no Table.htm document in this folder, try this location:
C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Objects\Common

In some cases, there will be a Table.htm file in BOTH folders.  If that is the case, do the following steps 2-5 to bothfiles to be sure – OR – you can delete the Table.htm in the first folder location mentioned above – I deleted mine and this method still worked fine.

2.  Make a backup copy of the Table.htm file and save it somewhere like your desktop.  You can do this simply by right-clicking the document, then click copy, right click on your desktop, and click paste.

3.  Return to the original Table.htm file and open it in notepad

4.  This file is probably empty, but if not, delete all code within it.  Now, type a basic table code inside the document like this

<table width=”100″ height=”50″ border=”0″ cellpadding=”0″ cellspacing=”0″><tr>
<td align=”center” valign=”top”>
<div align=”center”></div></td></tr></table>

You may change the dimensions and text alignment in this table to a size more suitable.  Choosing low width/height dimensions usually work best for me.

5.  Click File>Save, and then close the document.

6.  Open up Dreamweaver MX and test it.  When clicking Insert>Table, a table matching the table you coded in the Table.htm file should appear.  You can customize the dimensions of this table as you would normally after inserting it into your document.

There you have it!  Though not a perfect fix, it certainly is an alternative so that you may continue using Dreamweaver MX until you upgrade to Dreamweaver CS3.  This definately worked for me, and it should definately work for you.

What Do You Think?
Did this help you?  Did this method, for some reason, not work for you?  Have any other tips or tricks regarding Dreamweaver MX+?  Let me know!  I would love to hear about it!  Leave a comment or kindly send your thoughts to david@funkytower.com – I would love to share your ideas with the world!  I hope to hear from you all soon

Take it easy,
David Crandall

GoAnimate is free and easy to use.  They have a pretty decent selection of premade characters settings, props, sounds, special effects, and actions to choose from.  You can even import some images and sounds of your owns to use if you want to do your own voice overs or add your own background music, or use the stuff other people have imported!

When you’re done editing your cartoon, you can embed it to your blog/myspace/webpage, or get a URL to send to all of your friends.

It’s hard for me to describe everything that you can do with GoAnimate, so here’s a cartoon made with GoAnimate:

Pretty neat, huh?  And what’s great is you don’t have to do all the hard drawing and work involved in animating.  So if you’ve got a storyline and want to put some life to it….for free….then head your creative self over to www.goanimate.com and create a free account

What Do You Think?
Do you enjoy GoAnimate as much as I do?  What are some of the cartoons you made?  Do you know of any other cool websites/web-apps?  Let me know!  My e-mail is david@funkytower.com and I would love to hear from you

Take it easy,
David

<meta> tags:  When building a website, include meta tags to host a description and some key words.  Avoid being repetative and using terms like “Click Here!”  Do not use all-caps lettering, most people find it annoying - search engines like Google don’t like it either.  Make sure your description really does describe your website, and your keywords have to do with the content of your website.  Don’t use too many keywords.  Limit yourself to 10 or 12 keywords maximum.

Be Informative:  If you want to drive traffic to your website through search engines, it’s important to be informative and helpful.  When writing information on your website, be clear, detailed, and structural.  This way, when people try to find something through a search engine, your website will be pulled up earlier in the list of websites.

External Linking:  This is huge, and it could be easier than you think.  If you have a Myspace, Facebook, or other public networking account, put a link to your website on your page.  For example when spiders/search engine robots scan Myspace, they will find your link and it will be added to their database.  Also, if you’re a part of a message board, put a link to your website in your signature.  When sending e-mails, make a habit of putting a link to your website at the bottom of your e-mail.

Manual submission:  Submit your website to major search engines and major open directories.  Here are some links to do so:

1. http://www.dmoz.org
2. https://siteexplorer.search.yahoo.com/submit

Yes I know, that’s not very many places to submit your site, but Dmoz and Yahoo will send your site to various search engines – Yahoo powers alot of search engines.

Webmaster Tools/Sitemaps:  Generate a XML Sitemap and put it in the root of your online content folder (many times this folder is known as “htdocs” – it’s the folder where you store all content viewable on the internet.)  If you don’t know how to generate one, that’s ok!  Go to http://www.xml-sitemaps.com/  This website will generate one for you automatically that you can download.  Save the file as “sitemap.xml”

Now go and sign up to some webmaster tools/developer centers and submit your sitemap.  These services are free and they will help get your website in search engines sooner.  Here are a couple ”centers” that you can use:

1. www.google.com/webmasters/tools
2. http://webmaster.live.com/

There are more out there for different search engines that you can find.  Using these tools allow your website to be put in search engines faster, and having a “sitemap.xml” file on your server helps all your pages get scanned, and shows how often you would like the robots to scan your website as well.  This way, your content is updated regularly in search engines!

There you have it!!  Some good, free, and easy ways to help get your website in search engines.  If you complete all these steps in the span of a few days, don’t expect your website to be in search engines the next day.  All websites need approval before being submited, and it can take weeks, sometimes months, before a website is accepted, even if you take extra measures.  However, with my experience, I’ve never had to wait more than two weeks before my website got in search engines, and I didn’t have to pay a dime.

I do the same thing for my customers and, again, it has never taken more than two weeks before I got the websites in search engines.  So obviously, this works

Now there are measures you can take that guarantee you in the top listings in search engines, but you have to pay individual search engines for that – and it can be expensive.  So, if I were you, I’d suggest sticking with these tips – besides, what have you got to lose?   Try them, and I’m sure you’ll be in search engines in no time

What Do You Think?
How do you drive traffic to your website?  Have questions about web design?  Would you like FunkyTower to build your website?  If you have anything to say, I’m all ears – just send your thoughts to david@funkytower.com, and I’ll do all I can to get back to you

Take it easy,
David Crandall

So now that we’ve covered templating in our last tutorial, here are some other tips for making your webpage move faster.

1. Use External CSS Documents:  Rahter than implamenting your CSS into the HEAD of your local document,  link your webpage to an external CSS document.  Do this by templating your CSS in the header like normal, making sure you have the webpage looking like it should.  Then copy all the CSS code into a new notepad document and save it as “styles.css” After that, erase the CSS from the HEAD of your webpage and replace it with “<link rel=’stylesheet’ href=’styles.css’ type=’text/css’ media=’all’ />Doing this keeps browsers from having to load the same stylesheet over and over by allowing it to store one stylesheet file to reuse.
2. Validate your CSS:  Go to http://jigsaw.w3.org/css-validator/ and have your stylesheet(s)/webpage(s) validated.  If you have ANY errors in your CSS, fix them.  Browsers like IExplorer fix some CSS issues to make the webpage look like it’s supposed to, which can cause your website to move slower for alot of users.  Also it can keep your website from looking right in 3rd party browsers, like FireFox (of course, FireFox is so huge right now I don’t think I should be calling it 3rd party )
3. Validate your HTML:  Go to http://validator.w3.org/ and have your webpage(s) validated.  If there are any errors, FIX THEM.  This will help users from all different browsers to see the website as it is meant to be, giving them a pleasant and enjoyable experience.
4. Adding to other browsers, test your website in multiple browsers like IExplorer, Firefox, etc.  Different browsers decode websites differently, therefor they display them differently.  To improve your websites performance, fine-tune your code so that it is compatible with major browsers so that it looks and feels beautiful
5. Finally, make sure your content’s filesizes aren’t too big.  For example, if you have alot of pictures in your web page, lower the quality just a little bit, and (if possible) make them smaller in dimension.  The less a web browser has to load, the quicker your website will move.

If you have followed all these steps, you should have a smooth, sleek, multi-browser compatible, user-friendly website. 

What Do You Think?
Did these tips help you to build a smooth running website?  Do you have questions about web design?  Do you have any other ways to boost a website’s performance?  I want to know what you have to say – I would love to share your information with the world here at FunkyTower!  Send me an e-mail at david@funkytower.com   I hope to hear from you soon!

Take it easy,
David Crandall

Templating/Dividing with PHP:  Though sometimes a little bit of a hassle to set up, it’s well worth it in the end.  It’s really not that hard, and it doesn’t require very much knowlege of PHP programming, either. 

In most websites, the only thing that changes is the body of the web page; the header, footer, and sometimes even a sidebar, all stay the same.  Instead of a browser constantly having to reload the same thing on different page do this:

Create a full webpage template containing your header, a place for your main content, and your footer.  Include a sidebar if desired.

Use footnotes to lable the beginning and end of the different areas of your website.  To see an example, view the source of this website.  I left the footnotes in here to show how I templated this website. 

OR, here’s a little tutorial for you which I’ll be the code I copied straight from my template (without the CSS.) 

1.  First, and paste it into a text editor or your web design software like Dreamweaver, then save it as sample.html:

• HTML CODE:
  <!– Start Header –>
  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  <html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  <title>FunkyTower</title>
  </head>
  <body>
  <div id=”templateheader”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”backhead”>
    <tr>
      <td><div align=”center”>
        <table width=”1000″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”header”>
          <tr>
            <td valign=”bottom”><table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”navbar”>
              <tr>
                <td><a href=”http://www.funkytower.com” class=”navbar”>Home</a></td>
                <td><a href=”http://www.funkytower.com/webdesign” class=”navbar”>Web Design</a></td>
                <td><a href=”http://www.funkytower.com/about” class=”navbar”>About</a></td>
                <td><a href=”http://www.funkytower.com/contact” class=”navbar”>Contact</a></td>
                <td><a href=”http://www.funkytower.com/faq” class=”navbar”>FAQ</a></td>
              </tr>
            </table></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  </div>
  <div align=”center”><br />
    <!– End Header –>
   
    <!–begin body –>
    <br />
  </div>
  <table width=”1000″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”contentholder”>
    <tr>
      <td><div align=”center”>
        <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”contentholder2″>
          <tr>
            <td align=”right” valign=”top”></td>
            <td align=”right” valign=”top”></td>
          </tr>
          <tr>
            <td width=”581″ valign=”top”><div align=”center”>
              <table width=”565″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ id=”contentmiddle2″>
                <tr>
                  <td id=”contentheader”>&nbsp;</td>
                </tr>
                <tr>
                  <td id=”contentmiddle”><div class=”content” id=”content”>
                    <h1>Welcome</h1>
                    <p>Hello and Welcome to FunkyTower! </p>
                    <p>Have a great day!<br />
                      <a href=”mailTo:david@funkytower.com”>Linke Test</a></p></div></td>
                </tr>
                <tr>
                  <td id=”contentfooter”>&nbsp;</td>
                </tr>
              </table>
            </div></td><!– End Body –>
            <!– Start Sidebar–>
            <td width=”354″ valign=”top”><table width=”327″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″ id=”sidebartable”>
              <tr>
                <td valign=”top”><p align=”right”>
                  <input name=”s” type=”text” id=”s” value=”" size=”30″ class=”searchbar” />
                  <input type=”submit” id=”searchsubmit” value=”" class=”search” />
                  </p></td>
              </tr>
              <tr>
                <td valign=”top”><div id=”sidebar” class=”sidebar”><img alt=”" src=”images/archivestitle.jpg” width=”327″ height=”58″ />
                  <ul>
                    <li>July 2008</li>
                    <li>August 2008</li>
                    <li>September 2008</li>
                  </ul>
                  <img alt=”" src=”images/categoriesheader.jpg” width=”327″ height=”59″ />
                  <ul>
                    <li>Category 1</li>
                    <li>Category 2</li>
                    <li>Category 3</li>
                    <li>Category 4</li>
                    <li>Category 5</li>
                    <li>Category 6</li>
                  </ul></div></td>
              </tr>
            </table></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  <!– End sidebar –>
  <!– Begin Footer –><br /><br />
  <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footercontainer”>
    <tr>
      <td><div align=”center”>
        <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footer”>
          <tr>
            <td width=”468″>Stuff and more stuff will go here</td>
            <td width=”467″>Then we’ll have more stuff right here as well!</td>
          </tr>
          <tr>
            <td colspan=”2″><div align=”center” class=”credit”>Blah blah</div></td>
            </tr>
        </table>
      </div></td>
    </tr>
  </table>
  </body>
  </html>
  <!–End Footer–>
  

So you can clearly see where each section starts and ends. 

2.  The next step is to divide the template into four PHP documents: header.php, body.php, sidebar.php, and footer.php

To do this, Highlight, rightclick, and cut  All the code from “<!–Start Header–>” to “<!–End Header–>”
Paste the code into a new document in notepad and save it as “header.php”

3.  Next, cut all the code from <!–begin body–> to <!–End body–>
Paste this code into a NEW document in notepad and save it as “body.php”

4.  Do the same steps for the sidebar and the footer, naming them “sidebar.php” and “footer.php”.

Now you should have four separate documents for your template: header.php, body.php, sidebar.php, and footer.php
These files must all be in the same folder.

Now all that’s left to do is create a PHP file that calls all your other php files to form one page using <?php require( ) ?>

 

5.  Open up a new notepad document and paste the following code into it:

• 
  <?php require(‘header.php’) ?>
  <?php require(‘body.php’) ?>
  <?php require(‘sidebar.php’) ?>
  <?php require(‘footer.php’) ?>

6.  Save it as “test.php” to the same folder location/directory as you did all the other files, or upload all the files to one folder/directory on your server.

That’s it!  Now you should have a full web page that looks just like the “template.html” file we made!  Using this method will allow your visitors to only have to load your header, footer, and sidebar just one time! 

Now, If you want to make different web pages, copy your “body.php” file and change  the content within it, and save it as a new php file like content1.php.  Then, take your “test.php” change ‘body.php’ to ‘content1.php’ and save the document as “page1.php” or “index.php”

On top of making your website load faster, this also allows editing to be alot simpler.  Say you made a new page and had to edit the sidebar or header so that you could add a link to that page.  Well, instead of editing SEVERAL pages to have the same effect, you just have to edit one, and it effects ALL your web pages!   Cool, huh?

What Do You Think
Did this tutorial help you?  Did you learn something new?  Have more tips to make your website run smoother and faster?  Still need help?  Let me know!  Send your questions and knowlege to david@funkytower.com! I look forward to hearing from you

Continue on to Part 2 for more tips on how to make your website move fast and smooth.

The “link” tag is for the general link when it has never been clicked.  The “visited” tag is for links that have been clicked or pages that have already been viewed through that specific URL.  The “hover” tag is the coolest one; it is what happens when you put your mouse/cursor over the link.

When creating a CSS code for your links, it must look like this within your stylesheet:

a:link {
                 color: #333333;
                 text-decoration: none;
}

This makes your link have no underline and makes the color of the link a dark grey color.  You can change these to make it however you want.  You can give it a “background-color” tag and allow it to have almost a highlighter effect.

When creating your links using all three tags, they must be in order.  This means the “link” and “visited” tags must go first, and the “hover” tag must go last, like so

a:link {
                 color: #333333;
                 text-decoration: none;
}
a:visited {
                color: #333333;
                text-decoration: none;
a:hover {
                color: #333333;
                text-decoration: underline;
}

You can change any color and text decoration of all of these.  You can add “font-weight” tags and make them bold, italic, etc., or you can give them a “background-color” and more…but If the order of your code is not in the proper order, your “hover” effects will not work properly.

You can edit links in specific areas as well by giving your link a specific class id, like this:

CSS Code

links1.a:link {
                 color: #333333;
                 text-decoration: none;
}

HTML Code

<a href=”http://www.linktowebsite.com” class=”links1″>Click Here!</a>

You can also change the links of specific DIV’s and Tables by giving them id’s.  This is a little different from the last one, but what I like about it is it eliminates giving every single link you want to change it’s own class id.  For example

CSS Code:

#content a:link {
                 color: #333333;
                 text-decoration: none;
}

HTML Code:

<table width=”100px” height=”100px” id=”content”>….

OR

<div id=”content” class=”content”>….

That’s it!  I hope this helps you getting your links to match your website!

What Do You Think?

Know any cool CSS or web design tips or tricks?  Have any other questions about how to do something in CSS?  Whatever the case may be, I want to hear about it!  Let me know at david@funkytower.com!

Take it easy,
David