This week I have been working on a redesign of one of my web sites. The design of the website was acceptable by my client, but the desire was to maintain the same look of the page but make the pages more fluid. What this means is that the web page will shrink or expand based on the size of the monitor. The only limitations would be  the images themselves.

With this website, the frame looks kind of like an iPod… there are raised and rounded edges all around the header, navBar, mainContent, and footer.

This is the old layout.

So, on a screen set for 1280 px across, the mainContent was fixed at about 830px. This was driven by the top and bottom images of the frame or box.

So, with the new layout, there are several challenges.

1. Client wants a horizontal drop down navigation system, as well as a left, vertical, sidebar to carry an open navigational system.
2. Client needs a wider window for the mainContent.
3. Client wants to keep the same rounded corner look.

Ok, so I now know where my challenges are. This little tutorial does assume that you know a little about HTML and CSS. If you don’t, you can email me or you can go to the bookstore and get yourself books that can enlighten you. I will post some good titles in another post.

My first challenge is to create a page with a liquid or fluid layout. This kind of a layout is done in percentages. The only fixed items should be your images and an occasional table data that you need tight. All this is done primarily with div tags.

1. First I have to start with my container div that will hold my header, navBar, sidebar, mainContent, and footer divs. This is done with two different files, your css file, and your html file.
2. In my header div I created a table that holds my clipped images of the frame AND the logo or header art.
   1. First, you need images. I started with this:

   Create Corner Cutouts

   Cut out pixels for sides, top, & bottom

   Now, I set my Rectangle Marque tool to a fixed measurement. In this scenario, The corners are 40px X 40px & the edges I put as a thickness of 10 px and depth of 40 px.

HTML for #Header

Now here’s an image of the HTML in my #header. Because of how the different browsers work, you need to insert your images a couple of different ways. For instance, in this table data, we not only insert the image piece, but we also make it as a background image.

<td background=”images/design_elements/top-shadow.jpg” valign=”top”><img src=”images/design_elements/top-shadow.jpg” width=”10″ height=”40″ alt=”Design Element” /></td>

I found that if I d0n’t write it this way, the image won’t stretch all the way down the sides or across the top or bottom. NOTE: You don’t want to put this image in the CSS #header because you have the corners to worry about. Remember the rounded corners? If you place these images into the CSS file it will knock out the corners and make them square.

**Also this has to be written this way here otherwise your alignment to all other images will not match up.

If you have several table rows in your header, like I do, then you’ll have to make sure that your edge pieces are inserted on either side of that image. See here.

<tr>
<td width=”28″ background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg”   width=”40″ height=”10″ alt=”Design Element” /></td>
<td valign=”top”  bgcolor=”#11396a”>
<table width=”80%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ summary=”logo”>
<tr>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/Jeri-head.png” alt=”Headshot” width=”96″ height=”125″ border=”0″ /></a></td>
<td align=”center”><a href=”?content=home”><img src=”images/design_elements/title-header.png” alt=”Header Title” width=”500″ height=”160″ border=”0″ /></a></td>
</tr>
</table>
</td>
<td width=”28″ background=”images/design_elements/rt-side-shadow.jpg”><img src=”images/design_elements/rt-side-shadow.jpg” width=”40″ height=”10″ alt=”Design Element” /></td>
</tr>

Once you have that all written inside the #header tag make sure to close your table.

Completed Header

Now, the CSS file (which is external) has the #container set to 95%. My client wants as much white space that she can get & still be able to have some definition in the page. Of course, I don’t want this page to look flat or plain either. So we left just a little margin on the sides.

My next hurdle came with the horizontal drop down nav bar. My client wants this nav bar to be over on the right. However, this is not a FULL nav bar. So I had some maneuvering to do. This nav bar is made with javascript and images. So, after getting it to the right, I also had to insert my side edges. I did this by putting a table around it just like the logo/banner mentioned above. I did have to create fixed widths for the <td> around the side edge images. This helped to keep all lines and the navigation pushed over to where they need to be.

My biggest hurdle was the #sidebar and #mainContent section. I couldn’t figure out how I was going to create that edge with just these two “boxes.” Easy peasy … right? Well, not really. The problem I found was that I could build a table inside each div area that would allow for the edge, but what happens if one div area goes on and on… and the other stays small? You have a problem because one side will connect to your footer seamlessly and the other won’t. So, I had to figure out a way where ALL browsers could handle this dilemma. I am still young when it comes to CSS, I had to think outside my “table” box and think of a way that I could stretch both sides no matter if one went longer than the other. Normally, I would slap another table in there… but not sure where. I’d end up making tables inside of tables to get what I wanted… That is NO FUN…trust me!

So, here’s what I came up with. First, remember we have a #container that holds all of our other elements. SO, why not create another container (#container2) that only contains your #sidebar & #mainContent divs and is within the main #container tag? So I set up this script inside my CSS file.

#container2 {
width: 100%;
margin: 0;
padding:0;
background:#11396a;
background:url(../images/design_elements/lt-side-shadow.jpg) repeat-y left;
background:url(../images/design_elements/rt-side-shadow.jpg) repeat-y right;
}

So what I’ve done is created my container at (#container2), inside the main #container tag.I have set the width to 100% of the #container with no margins or padding. What I had thought about was how to get the images in there to stretch.. So I did a background: url() of each image, telling it to repeat-y and where to put it, right or left. When I ran this through all the browsers, the only one that did not like this syntax was Microsoft IE. So what I had to do then was to go into my HTML file and create a table inside the #container2 tag.

<div id=”container2″>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td background=”images/design_elements/lt-side-shadow.jpg”><img src=”images/design_elements/lt-side-shadow.jpg” border=”0″ width=”40″ height=”10″ alt=”Design Element” /></td>
<td>

<div id=”sidebar”>

I found that if I created a table with a <td> for my left edge, and then a second <td> for my #sidebar and #mainContent and a third for the right edge, closing the #container2 div after my #mainContainer div, then IE could complete itself!

By doing it this way, you allow more flexibility in you #sidebar & #mainContent divs. You don’t have to worry about putting a height tag in there. (Not all browsers understand the ‘height’ variable in a <table> tag.)

The #footer div should be laid out just like the #header div.

Now, I found that in most cases here, I had to remove all padding and margins for this to work. If I need padding for this project, I will add it to the HTML of each div later.

Here is what the final page looks like.

Final Look of Page

Good Luck on your project. I hope this tutorial help you. Please leave a comment and let me know.

– More Later

Technorati Tags: Tips & Tricks!, Web Design, Web Pages

The other day, I received a very courteous email from a webmaster looking to increase the rankings of his web pages. I have spent the last few days contemplating his request.

First, what are Link Exchanges & Link Farms?

Link farming is the process of exchanging reciprocal links with web sites in order to increase search engine optimization. The sole purpose of any link farm is to get search engine rankings. They typically have web pages that consists of 50, 100 or even more unrelated links on it.

Link Exchanges (also known as a banner exchanges) are a confederation of web sites that operates similarly to a web ring. It is a  method of exchanging links on a large scale (usually automated) specifically for the purpose of improving search engine rankings, not user-experience.

It used to be common practice to exchange your links like this. Typically exchanges & farms involve either manually or automatically setting up pages or directories of links to other sites and partners that link back to your site. These types of spam-filled pages or directories often have no value to the visitor.

I had a client, several years ago, who had links from anyone who asked to be linked to their site. When I went through all the links I was surprised to find dead links, links that lead down bunny trails of pop up ads, & even pornographic pages. When we found this, we immediately took the page down. Why would anyone want to read a page of links?

Personally, I practice what I like to call, “Organic Exchanges.” An organic exchange is posting links on your web site that pertains to your web site. For instance, I surf the net often, looking at tutorials, or gaining advice on subjects just like this that I am writing about. I have blogs I love to read daily… So, what I do is put a link on my web site or my Favorite Web sites over on the sidebar so that you too can enjoy some of my favs. There are no strings attached. If I list you, you don’t have to list me.

You say I’m shooting my page ranks down? No, I don’t think so. You see, search engines like my fav, Google are changing every day. They are smart to our ways of trying to get high page rankings. So, I want them to see that all my external, as well as internal links go hand in hand with my business.

Keywords are very important to have for all web pages. Search engines put a high value on external links that link to pages that have keywords that are pertinent to the web site. So, if you do choose to put my web site URL on your web site, make sure you list me under web design, web hosting, or something along those lines. That way I get an honest page rank.

My point is this; exchange links organically, naturally. Make sure they are meaningful to your business. Don’t go for those automated exchanges or farms that don’t know you. They don’t know your business. All they will do is get you removed from Google. That is not a good thing.

The main reason for avoiding link exchanges, is because search engines like Google consider it a manipulative technique for gaining page ranks. Google has been known to remove sites for trying to artificially inflate their rankings. Google’s Webmaster Guidelines state that spam link exchange tactics are deceptive or manipulative behavior. You can read more here.

So, don’t write me & ask me to post a link to your web site. I won’t do it unless I actually use your site and find it useful. Don’t send me to your web page where you’ve listed my web site in amongst other links that you’ve farmed. It isn’t help either of us!

– More Later

Technorati Tags: Marketing, Search Engines, Tips & Tricks!, Web Design, Web Pages

The last couple of days I have spent looking for just the right image or just the right music to fit the web sites that I am building. As you’re aware, it is a REALLY BAD IDEA to steal artwork or music from another website. People frown upon you stealing their work… So, I spent the better part of today and yesterday looking for royalty free stuff. It can be really tough to look for just the right piece.

I have to explain to people that I build websites for, and to those that I just consult that it is very bad form to right click on an image and save it for use at a later date. Now, there are a lot of websites out there on the Internet that allow you to use their clip art, but you have to be very careful to read the disclaimers on the sites.

This time, I had to search for music. You can’t just use music off your CD without the artist’s permission… So, I decided to browse some “Royalty Free” websites that will sell you their music clips for a reasonable price. No problem there. I started with Google to give me a list of sites to browse, and as I began my search, I tweeted about what I was doing. I received multiple tweets back from people who either shop for royalty free stuff or they own the sites… but it was cool to find all these sites to peruse. (You can follow me on Twitter.)

Here are some sites that I visited and found some very useful, royalty-free stuff. This is not free stuff… you still have to buy it, but the license allows you to use it on your websites.

iStockphoto
Audio Micro
Premiumbeat
Freeplay Music
Music Bakery
Accent Music Productions

Well that’s just a few… Have fun!

– More Later!

Technorati Tags: Tips & Tricks!, Web Design, Web Pages

Many who know me, know that I do all my web designs with straight code. Many would call me a “coder” although I think that is a bit extreme. I started web designing back with Netscape Navigator had a WYSIWYG editor called Composer. You would drag and drop images into place and the program would write the HTML code. However, Composer was horrible! It always had a lot of ‘bloat’ that it would put into its pages. Bloat is extra script that is inserted to guarantee that your object remained in it’s place. This became a problem when you put it onto your server and looked at it in your browser… All that bloat took time to load!

When I realized what was happening, I decided that I had to learn how to do the code myself. I bought reference books galore to help me learn. I even used Composer to teach me the tags necessary to do what I wanted. I would do the WYSIWYG and then go into the code and rip out everything that was extraneous. What a pain!

A few years later, a colleague of mine turned me on to this product called, “AceHTML.” I used that editor for a very long time, but it has its limitations too. When you open it up, you are in a text editor. It has a tab that you can click on to see what you’ve done. Therefore, you don’t need to open your browser up so often to see your work. Well, for the most part…. You still have to open your document up into all the main browsers to confirm compatibility. I loved that AceHTML would help to check my code. It would alert me to missing tags. Other editors that I tried out, didn’t have this feature.

Over the years though, I felt like I was outgrowing AceHTML. I started writing Cascading Style Sheets (CSS), JavaScript, PHP (limited amounts), and I wanted to begin learning AJAX. AceHTML wasn’t growing with me. I don’t think it has upgraded in 3 or 4 years. It doesn’t check your CSS, PHP, or JavaScript very well at all. In fact, forget about AJAX… that isn’t included either.

Over the last two years I started looking into Adobe’s Dreamweaver (Dw). I test drove it when it was CS2 and found I just didn’t like it! It was a memory hog and it was confusing. So I tossed it. Then when CS3 came out, I test drove it too.. Still not much fun for me. There was still a lot of confusing stuff there. I just didn’t have the time to go through a learning curve and still work. CS3 was very close to what I had hoped for in an editor it could check my code, all of it. However, the time on the test drive just wasn’t long enough for someone busy like me. It still seemed to be a memory hog too… So I tossed that too, falling back on my trusty AceHTML.

At this point, I was feeling very limited with my trusty tool, AceHTML. I just couldn’t stop considering Dreamweaver. I spoke with several people who used it. They had plenty to say about how it simplified their work. Wow! That would be so cool. Maybe it would be like cloning myself.. Hmm.. Anyway, I finally looked to some of my coder purist friends … the diehards. When they finally told me that the broke down and got it, I thought maybe I should reconsider.

Adobe has this irritating thing they do with their products. They put something into their programs that makes it impossible to re-test their products. The only way I found to get around it was to rebuild my machine. (I’m sure there are other ways, but this was very efficient.) This made it difficult to test drive their newest version, CS4 because I wasn’t due for a rebuild. So the only decision I could make was to buy it.

Adobe is one company that, although their products are pricey, they offer a money back guarantee, even if you test drive their products. So, I took them up on it and I bought Dreamweaver CS4.

The day came where Dreamweaver arrived. I installed it on my computer and began to play with it. It felt like Christmas! I spent all day playing with it. I watched their videos on all the new things that you can do with Dreamweaver. So far, I have not been disappointed. Of course, I refuse to look at how much memory it uses. I always leave me email program running, I use Quickbooks (for its timer), and then I use Photoshop at the same time too… Not to mention all those chat programs running in the background… Skype, ooVoo, Yahoo, MSN Messenger, AIM… All heavy hitters in memory. My system has crashed only once since installing Dreamweaver. My husband affectionately calls me his ‘High Bandwidth Broad’ because I run so much while I design pages and I use up all the bandwidth.

I am very impressed by the way Dreamweaver CS4 is working. I was able to keep my workload going even though I have not learned everything…not by a long shot. Although I work with the code, primarily, I have found myself sneaking into the WYSIWYG tool… sliding objects around and then checking to see if there is any bloat… no problem. Of course, if you want to look for things that are irritating, you’re going to find them… but so far, I am impressed! Great job Adobe!

One feature that is totally cool… “Live View!” This allows me to see a web page just like I am looking at it in a browser. All the CSS, JavaScripts, Ajax, work in Live View. They also put another function on there that is called “Live Code.” What this allows me to do is to run Live View and see the code as it changes. So if I see something in the view window that I don’t like, I can pause the view and find that specific code to change it. Pretty cool!

Well, I suppose it is time for me to get back to work.

More later!

Technorati Tags: Web Design, Web Pages

I have several programs that I use with my business that helps to create various flash objects. A couple months ago I began experiencing problems with one of my programs, Macromedia FlashPaper.

It first started when my browser told me that a new version of flash was available. Like a good robot, I updated without question. Shortly after, I found that my FlashPaper would try to reinstall itself whenever I right clicked on other programs (unrelated to FlashPaper). I found this to be very frustrating.

After checking for viruses, spyware, or adware, I went to Adobe for support. The first time I called in, I was told that they don’t do phone support for FlashPaper… but since it involved Flash; he would see what he could do. He had me uninstall FlashPaper and then he had me navigate on my computer to C:\WINDOWS\system32\Macromed\Flash\ where we located my flash.ocx file. I then changed this file to flash-old.ocx and reinstalled FlashPaper.

Well, that worked for a while. The latest episode was the reason for my blog entry.

This time, Flash Objects weren’t showing up in my Microsoft IE. Any product that used IE to view web pages wouldn’t show them either. Odd… Firefox still showed these objects. (Yeah Firefox!)

I figured that both the IE problem and the FlashPaper reinstalling itself were related. So, instead of calling Adobe, (I knew they wouldn’t help me on the phone), I “googled” the error message I was getting whenever FlashPaper would try to reinstall itself.

Error 1904.Module
C:\WINDOWS\system32\Macromed\Flash\Flash.ocx
failed to register. HRESULT -2147220473. Contact
your support personnel.

I found some very interesting articles that I felt would be useful to anyone who “googled” the same error message and needed to see a more current report. It is frustrating to search for fixes only to find they are two years old.

Make sure you read these thoroughly before doing any work on your computer; otherwise you’ll be doing it twice.

• Error 1904: flash.ocx failed to register (Flash Player, Flash Paper) – This article is the main article that was directly related to the problem I had with FlashPaper. This last time that I came to this problem, it didn’t work like before, probably because it had the IE problem too.

• Troubleshoot Adobe Flash Player installation for Windows. This article explains how to uninstall Flash.

• Flash Player Support FAQ

• Download SubInACL from Microsoft to fix permission issues that prevent the Flash Player installation

• How to uninstall the Adobe Flash Player plug-in and ActiveX control

All of these articles are linked to each other.

With the help of these articles, I was able to completely clear out Flash. Add/Remove Programs in your control panel does not do this completely. Once it was removed completely I was able to reinstall Flash and ActiveX successfully.

Now, I have not reinstalled FlashPaper… Wonder if I should?

More later…

Heidi

Technorati Tags: Plugins, Web Pages