Web Design

Everything you need to design a website

June 11, 2009 By CDT Leave a Comment

Assuming you have basic HTML/CSS skills, you can find everything you need on the web available at no cost to design a nice looking, professional website.

First we will start with some web design tutorials.

Next you need a grid system to hold up your site structure. Try the 960 Grid. Very good, very free.

960 Grid

Then you need a color palate. For the best custom color palates that always look good, use the Color Scheme Designer.

Color Scheme Designer

Now some graphics. Now that you have an awesome color theme, find some graphics to match. Some free stock photo resources are listed here.

Maybe you want a drop down menu. Try the suckerfish family. It has been built on and improved so many times, you should easily find something suitable. Here is a link to Son of Suckerfish.

How about some cute icons? RSS, twitter birds, download, etc. can all be found by the hundreds from any graphic or web designer that is trying to get web traffic. Smashing Magazine has a post with some really high quality free icons. Here is another good resource for free icons.

Free Icons

If your graphics and icons are looking a little clunky next to each other, you can edit them with Gimp. Gimp is a free image editing program along the lines of Photoshop.

Gimp

At this point, you have everything you need to be able to put together a reasonable looking, valid xhtml/css-based website.

W3C Validation Service

Filed Under: Web Design Tagged With: download, free, how to, Web Design, web site

How to add a transparent favicon

May 4, 2009 By CDT 3 Comments

Your favicon should be viewable across multiple browsers. Different browsers read things differently, so using two separate favicon images will assure the graphic will have a transparent background in all of them.

Create a new 16×16 pixel document with a transparent background in Photoshop. Draw or paste a graphic into the space. Part of a logo or image that carries the brand is best.

Save the file as Windows .ico format into the images folder of the website. In Photoshop CS4, the save as .ico format option is built in. CS3 and below requires an additional free plugin to have .ico as an available format.

Next, use the same imge and save for web. This time use a .png 8 format and 16 colors. Put it in the images folder again.

Put this code in the between the head tags of each page you want the favicon to show up on. If you are using a template or include file, better yet. You only have to do this once.

<link rel="shortcut icon" href="/http://yourdomain.com/images/favicon.png" 
type="image/x-icon" />
<link rel="shortcut icon" href="http://yourdomain.com/images/favicon.ico" />

That’s it! You have a new transparent favicon. If it isn’t working, make sure you uploaded all of the images and the pages.

Filed Under: Web Design Tagged With: favicon, featured, how to, transparent

Absolute vs. Relative Links

May 2, 2009 By CDT 1 Comment

A link which shows the full URL of the page being linked at. Some links only show relative link paths instead of having the entire reference URL within the a href tag. Due to canonicalization and hijacking related issues it is typically preferred to use absolute links over relative links.

Example absolute link

<a href=”http://customdesigntools.com/folder/filename.html”>Cool Stuff</a>

Example relative link

<a href=”../folder/filename.html”>Cool Stuff</a>

Filed Under: Web Design Tagged With: absolute, featured, Links, relative

Web Design Classes

October 15, 2008 By CDT 3 Comments

These classes are available through the Skills and Technology Training Center in Fargo, ND. Check the STTC schedule for class availability.

Dreamweaver
Photoshop Web Production

Web Design Links

These should help with learning web design.

W3

Dreamweaver Extensions

Browsers

CSS

Additional Resources

Suggestions?

If you know of a good resource that should be listed here, email me.

Filed Under: Web Design Tagged With: class, design, Links, web

Everything you need to design a website

How to add a transparent favicon

Absolute vs. Relative Links