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

I learned something interesting yesterday. All these past years, when I have to use javascript in a web page, I have always put one of these as my link to my javascript inside my head tags:

script type=”text/javascript” src=”scripts/anyscript.js”
script src=”scripts/anyscript.js”

However, in my endeavors to write cleaner pages, use new code instead of obsolete or deprecated code, and also to learn Dreamweaver CS4, I set my tag to be:

script type=”application/javascript” src=”scripts/anyscript.js”

Usually I test all my pages before I let my clients know that they’re done… but this time I didn’t. Shortly after releasing them, I found that the javascript, which I use in many pages only worked in Firefox or Safari, but it did not work in Microsoft IE.

I went through all my code trying to figure out what the deal was… you know, looking for the proverbial needle in a haystack! Couldn’t find it. Finally, it occurred to me that I had tried this new thing that Dw offered, type=”application/javascript”. I quickly changed back to my tried and true, type=”text/javascript”.

Apparently, The W3C (HTML) specification suggests using text/javascript instead of application/javascript.

I found a post by Microsoft that says, “This is an expected by-design behavior. IE currently does not have support for these media types.” This was in reference to the media type of “application/javascript” or “application/ecmascript.”

Well, this web designer is sticking to the old tried and true “text/javascript” for now. No use making more trouble in my designs.

More later…

Technorati Tags: Tips & Tricks!, Web Design

So you want to figure out how to disable any indexing that can occur on your web pages? Well, I hope to tell you, simply.

Have you ever gone to a website and typed in the wrong URL only to find a page with links to various folders? You know, one line says parent, another images, etc… I call this showing your underwear or letting your underwear hang out… Yeah! It’s embarrassing.

One day, many years ago, I learned the hard way that people could see what I had on my servers. They could browse all my file structures on my servers and copy whatever they wanted from my own server. They were able to see my “unmentionables.” It didn’t matter if I used a javascript to protect the images on a page, because they were not looking at the display page… They found my folder indexes.

It is sad but, truth. When people are offered easy access to files, they will take them. If they can get a glimpse of what you have on your servers, they can copy it.

There are a few ways that I have found that are easy fixes to hiding all my files and folders.

1. You can put a blank file named index.html in each directory.
   I don’t like this method because I have a lot of folders and it just becomes a pain. The first thing I do when I hit a blank page is try to figure out why. I usually will try to “fix” the URL thinking I must of mangled it.
2. Go into your cPanel, click on “Index Manager” and then begin going through the list of folders and mark them as “No Index.”
   What cPanel does with this process is write a line in a file called .htaccess. CPanel places that file in each directory (folder) on your server, but you have to go to each folder and click on it, click on its radio button to not have indexes and then repeat again with the next folder. So this is going down the right track, however, I have too many folders to do all this… haven’t you heard, “Time is money!” Do you have time to sit there and click on a radio button then click a link to go back up a level to go to the next? Hey, if you do, more power too you!
3. Here is what I do. It is similar to option #1, but your viewer will get a different an error page instead of a blank. Create a file named .htaccess … It MUST have the [dot] in front of the word. The [dot] makes it invisible on your server. Inside that file type in only one line.
   Options -Indexes

   Then save this file and send it over to your server.

Using the third option has it’s benefits. By doing it this way all sub-directories of that directory will also get their directory listings turned off.

Now for the word of CAUTION!

There are many programs that access this .htaccess file regularly. Microsoft FrontPage Extensions, Blogs, Calendars, the list goes on, just to name a few. It is not advisable to change the .htaccess within the folders that are accessed by these programs. However, if you are determined and want to give it a try, then make sure you transfer the already existing .htaccess file from that folder to your computer… add the line to the top of that file, save and send it back to that same folder. More than likely though, these programs would probably overwrite that file anyway.

Good Luck!

More later…

Technorati Tags: Tips & Tricks!

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 manage several websites, of which I have installed 3 WordPress blogs. I don’t know whether it is lack of experience or bugs in WordPress, or both… But earlier versions of WP had various problems that involved LOTS of extra work to setup or fix. I must say, I am impressed with this new version.

One of my websites had so many problems with the blog. It took 4 months before I was able to fix it. The final fix… uninstall completely, remove from server, and install the newest version… BUT, I had to keep the old archives, posts, comments, and images. Well, my tech support team helped out with the database part. I think they rather preferred to do that than to have me try, fail, and then have them fix a mangled database.

I wish I could have fixed this one blog before I finally did, but I am glad it got done when it did. My client, StoryConnection.net use her blog to update various aspects of her life… Workshops, education, recipes… but this time Professional Storyteller & Author, Dianne de Las Casas, tells us her experiences with Hurricane Gustav.

During this “learning” curve that I have gone through with WordPress blogs, I have been learning so much about plugins and widgets… also learning a lot about using themes and how to tweak them.

I am not what I would consider ‘experienced’ with blog installation and management, but I am getting there. Let me know what you think of my new theme.

More later…
Heidi

Technorati Tags: Blogs

Well, I finally took the time to “re-install” my Macromedia FlashPaper 2.0… After all the work I took to uninstall Flash and all it’s bits, I had hoped that I would be able to reinstall my program.

The first thing I did BEFORE this reinstall was to set a new restore point. Sometimes having a restore point on your Window XP can be very helpful. (Sometimes its not.) Anyway, I ran the install and STILL ended up with the same error message.

At this point, I have given up using this product. It is clear to me that Adobe will NOT be upgrading or supporting this product any longer. It is really too bad because I loved this product!

Meanwhile, I have googled (Don’t you just love that word? It sounds nasty… you’ve been googled.) .doc to .swf or .doc to flash, as well as .doc to .pdf and have found that there are other products on the Internet that will do the similarly to FlashPaper. One product I have found is SWF Printer Pro. I am not yet convinced that this will create as nice of a document for the web as FlashPaper… but I am still looking.

More later…

Technorati Tags: Flashpaper

What’s the importance of having a website anyway?

I have been a Web Designer for a number of years. I have contemplated how I would explain the importance of a website for businesses that I encounter everyday. I have had numerous comments that I have voiced, but never have I written it down to read. Here is my chance.

We are in a technical age now. Everyone is using computers, cell phones, hand held devices… they are talking Bluetooth this and IR that. Have you ever heard this one, “Hey beam me your stats!” …Beam my what? Where do I look like I’m from, Starship Enterprise?

It’s true; I wear a Bluetooth in my ear and a cell phone on my hip every waking moment. I have a laptop and a desktop at my disposal. I consider myself web savvy. If I need to find a business, I jump on the web to find them. If I am driving and need a phone number, address, or directions, I use my cell phone to call up my best friend, who in turn does a lookup on her computer. Lately, I have called Google’s new 800-GOOG-411 which connects me automatically.

It doesn’t matter where you are in the world, everyone asks that pertinent question, “Do you have a website?” or “How about an Email address?” It is a sad moment when you hear the reverberating, “No.”

I live near a University town and everyone is ‘wired’ up here. Students look for apartments or homes that are ‘wired’ for Internet. When I first moved here, I moved from a very large city to a very tiny city. I call it “Podunk, Idaho.” I remember the first few days we moved up here, I would search the Internet for restaurants that would deliver to my home. Just local restaurants; it didn’t matter that I wasn’t able to order online. All I wanted was a menu to see my choices, or the possibility of finding discount coupons just for using the Internet.

No business is too small for a website. Do you hand out business cards? How important are business cards to your business? Do you have an advertisement in the Yellow Pages? I remember a time in my childhood hearing my father working out the details of advertising his business in the Yellow Pages. The bigger the Ad, the more business he had. Having a website is just as important as these are, if not more.

The Internet is a very useful advertising and marketing tool. It is purported that Internet marketing is now a major, multi-billion dollar industry. People are becoming more confident in using the Internet for all their shopping needs. I do! Living in “Podunk, Idaho” driving to a city that has a large department store or even a grocery store becomes time consuming. Buying gifts for Christmas, Birthdays, and Valentine’s Day couldn’t be easier!

An Internet presence, if only to say who you are, has become a necessary means to good advertising.

Ok, so now you want a website, what do you need?

The first thing you need to do is find yourself a web designer who can sit down with you and get a feel for you and your business.

Your website must:

• Describe your business.
• Describe your services or products.
• You NEED contact information available. (Web forms are useful tools for gathering information.)
• If you’re a performing artist, you need a Media Kit, also known as a Press Kit.
• Do you teach? Describe your programs or workshops

If you offer a service, it is important to elaborate on the service or services that you offer. For instance, are you a public speaker? Use your website as a forum to speak out to your clients. Are you an artist? Show some examples of what you have done in the past. Sell your work using a small store setting, displaying your products for all to see.

Use your website like a canvas or a billboard. Make it interesting and exciting to visit.

Once your Website is functional, remember to update.

One very important thing to remember is to keep you website fresh! You need to add new information and remove old information, regularly. Make sure that people want to come back to your website. Keep your pages clean and easy to navigate. Add features to your website like newsletters, calendars, and photo albums for starters. Offer specials on your products from time to time. Add reviews from previous customers whether they are in-house or through email. Remember, your website is a work in progress!

Welcome to the 21st Century!

More Later!

Heidi

Technorati Tags: Advertising, Marketing, Web Design