Creating a CSS website layout in Dreamweaver can be super simple and save you a lot of time.

The tutorial pros over at TutVid.com put together a nice video tutorial to show exactly how this is done. It is a little bit on the long side (like 30 min.), but after watching and perfecting this, you will save tons of time on your future projects.

Technorati Tags: CSS, dreamweaver, tutorial, website layout

It’s amazing what you can accomplish CSS. Now I’m not simply referring to styling-wise or design-wise.

I’m also talking about resource-management-wise.

There are very efficient ways to optimize your sites with CSS allowing them to load faster and cleaner.

In today’s edition of FriDizeo Soup we wanted to share some very helpful and insightful CSS tutorials and cheatsheets.

50 Extremely Useful And Powerful CSS Tools | CSS | Smashing Magazine

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little.

Top 10 CSS buttons tutorial list

I was just recently looking for some inspiration on css buttons, and found some of these, but not all. Nice job. 3 - Melbourne Hotels on Jul 9, 2008, 2:52 am:. Great resource! Loving the scalable buttons. 4 - Todd on Jul 11, 2008, …

10 Resources for When You Need Help with CSS | Vandelay Website Design

From time-to-time there will probably be situations where you could use some help or guidance with CSS during your web design and development work. While there are plenty of great CSS resources available, I would like to point out 10 …

The Last Guide to CSS Layout You’ll Ever Need :: Searchlight Digital

The first thing to decide when you come to convert your design to XHTML and CSS is whether you’re going to make it fixed or fluid. Nowadays, it’s increasingly rare to find fluid-based layouts, simply because they reduce the control you …

CSS Cheat Sheets and Quick Reference

Modifying CSS or creating CSS is always a painful task. It required lot of patience and utmost care and precision. To make a slight change in the layout of your website somtimes seems to be herculean task and frustrating also. …

Improve your css skill, right now!

Styling css is just follow the rules, if you run with the rule, you can get a good working, but sometime, you forgot that in these rule, you miss something that can make you better in styling css. This entry is just a bit experiences i …

Rapid CSS Development Tools | Blog Oh Blog

Most of the coders like to write CSS manually, but sometimes the availability of useful tools can make coding simpler and easier. These tools can prove to be helpful if you want to do some rapid CSS development. …

Creating easy and useful CSS Sprites | CSS Globe

Let’s start with the basics. What are CSS sprites? CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them.

How to: CSS Large Background | Web Designer Wall

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites.

Technorati Tags: cheatsheet, CSS, sprites, tutorial

I came across this excellent post by David Perel over at Design Shard entitled “Get More Traffic with Good Web Design”.

It explains how some excellent design skills, coupled with some marketing know-how (i.e. submitting the design to web design galleries), can really get some awesome traffic results.

Check out their post…and maybe you’ll get some ideas for your own site as well as some SEO tips.

Technorati Tags: seo, traffic, web design

Adobe Dreamweaver is a great tool to help you build websites.

Although many a web designer/coder prefers to code by hand in a text editor, using Dreamweaver can be very time-effective as it helps you by suggesting code and providing a WYSIWYG editor.

Ever wish you could get a little more from Dreamweaver?

Here are 10 top-notch tutorials that can help you do that.

Adobe Dreamweaver Tutorial | External Style Sheets | Print Web …

Set up your external style sheets to print pages effectively with your web style sheets.

Dreamweaver Tutorial - CSS Basics

http://www.hyperteach.com - See over 70000 high quality video tutorials on Dreamweaver, Photoshop, InDesign and 1000s of other subjects.

How to Create a Menu in Dreamweaver – List Menus

List Menus and Drop Down Menus are a great way to save space on your site if you have a lot of links. You can create these menus in Dreamweaver and this tutorial will walk you through the steps of creating List and Drop Down Menus.

Dreamweaver Tutorial: Flash Text-Use Your Own Fonts in Web Design

flash text in dreamweaver! remember to check out http://www.tutvid.com for more videos and downloads! tags: how to start a web design business, web design and development, professional web site design, web site design.

Dreamweaver Tutorial Build a nice Tabbed Navigation bar!

View this video at a higher quality here: http://www.tutvid.com/tutorials_pages_subs/DREAMWEAVER/onsiterials/nav_bar.html?v=zVhKBI_UKp0. Learn how to build a tabbed navigation bar using Dreamweavers Navigation Bar builder. …

Free Spry Menu Download - Bonus Website Evaluation HTML Form …

The How to Add Button Image to Dreamweaver Spry Menu tut unveiled the fact that people are looking for something more than a tutorial. I wouldn’t dare call the.

Dreamweaver Tutorial - CSS Positioning

postioning an image with css in dreamweaver. correctly positioning an image with css against a block of text can be quite challanging to the novice web designer. fortunetly it’s very easy to accomplish, and in this dreamweaver tutorial …

Adobe Dreamweaver Tutorial | Creating Rollovers | Rollover States …

Rollovers let your users know that they are interacting with the web page. In this tutorial, we will use Photoshop to create images to be used in both states of the rollovers and Dreamweaver to create the rollovers themselves.

Dreamweaver: How To Link Thumbnail Images | Dreamweaver Tutorial

In this video, a web assist, is introducing a new way on How To Link Thumbnail Images. She is going to tell you what are the things and manuals that are require.

Dreamweaver Tutorial Designing with Divs, Layers, & CSS Styles!

Watch the dreamweaver video and learn designing with Divs Layers & CSS styles.

Once you’ve watched, read, skimmed through these tutorials I recommend that you leave a comment on their respective websites. Thank these people for the time that they’ve put in producing them.

If you have a tutorial you’d like to share with us…drop us an email or comment on this post.

Technorati Tags: CSS, dreamweaver tutorials, html, Tutorials

I know there’s a big debate whether to use Adobe Illustrator, Photoshop, or Fireworks to layout your web design.

I can’t really say that one’s better than the other. Personally, I love using Illustrator. It’s been good to me.

As I was stumbling, I came across this interesting tutorial on VectorTuts entitled “Use Adobe Illustrator to Create a Clean Website Layout”.

It’s broken up into 22 easy to follow steps to create a clean website layout. And while you’re there I recommend you subscribe to their RSS feed as their are an excellent web design resource.

Technorati Tags: adobe illustrator, tutorial, web design

Planning and writing out a web design contract is a straight up pain in the butt. But it is downright necessary! (Unless of course you want to get shafted every once in awhile.)

More than likely, you want to get paid. Paid the correct amount…on time.

What should you include in your contract? What verbiage should you use? Where do you start?

Start by looking at what other web design companies have done. Here is a list of some web design contract examples that you can maybe glean some ideas from.

http://www.wilsonweb.com/worksheet/pkg-con.htm

http://www.zenfulcreations.com/resources/worksheets/design_contract.htm

http://www.justintimedesign.com/pdf_lnk.php?web_design=web_design_contract

ftp://ftp.hwg.org/pub/archives/docs/legal/consult-remove.txt

http://www.docstoc.com/docs/2665843/Sample-Web-Design-Contract

http://www.roostergraphics.com/ADMIN/forms/FwebDesign.html

http://graphixwebdesign.com/design_contract.htm

http://www.siteimpressions.com/contracts/contract_frsite.htm

http://www.holtwebdesign.net/websitedesigncontract.pdf

http://www.hitech-solutions.com/Contract_webdesign.asp

http://www.northstate.org/wdcon7.html

http://www.orion-hitek.com/WDContract.pdf

http://www.gallantrywebdesign.com/contract.html

http://www.site-maker.com/website-contract.htm

http://www.geekartist.net/sample-contract.html

Of course after looking through these, should you decide to use some of them, you might want to run it by an attorney just to make sure that it’s ok.

If you like this post please comment below.

Technorati Tags: contract example, web design contract

In this tutorial I will teach you how to make an image rollover using CSS and Adobe Illustrator. It’s pretty straightforward and shouldn’t take you more than a couple of minutes. I’ve included the HTML, CSS, and image below the video.

If you like this tutorial please make it known by bookmarking it and commenting below.

index.html

<!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>Home Button</title>
<link type=”text/css” rel=”stylesheet” href=”style.css”>

</head>

<body>

<a class=”homebutton” href=”#”>Home</a>

</body>
</html>

style.css

@charset “UTF-8″;
/* CSS Document */

a.homebutton {
display:block;
width:120px;
height:40px;
text-indent:-5000px;
background:url(images/homebutton.jpg);
text-decoration:none;
}

a:hover.homebutton {
background-position: -120px 0;
}

Technorati Tags: adobe illustrator, CSS, html, image rollover, web design tips

I remember when I first tried to create a professional web design portfolio for myself. Man…that was tough! I would do a “print screen”, then have to open it in an image editor, crop it, resize it, and resave it.

Ok…maybe doing all that wasn’t “the end of the world” tough, “but there has to be an easier way to save my websites as images”, I thought.

And there was.

It’s an easy-to-use plugin for Firefox called Screengrab!. Screengrab! allows you to capture the full website, the visible portion of the website, or a specific selection and save it as an image by simply pressing a button.

It’s super easy to use. Wanna see? Then watch the video below.

Technorati Tags: firefox add-on, portfolio, screengrab, screenshots, web design tip

I’ve had some pretty artsy clients before. They had a contemporary style and wanted their web design to show that.

Of course I would tell them that it was my specialty and that I would come up with a design that would knock their socks off. I would then go home and sweat bricks. How would I come up with contemporary designs? Would I have to draw everything on paper first? I’m not that great at drawing so that wasn’t an option.

What if there was a website I could download graphics from and then tweak them to use them in my projects? Well, I found just that site (in fact, one of many, but this one’s my favorite). Wanna know what it is?

Watch the video. (hint: it’s a great way to get free vector graphics).

Technorati Tags: free graphics, vecteezy, vector art, vector graphics, web design tips

I came across this web design tool awhile back and it has proven to be invaluable. It has taught me alot about web design as it has allowed me to take a sneak peek at other peoples’ coding and design techniques.

This tool is the Web Developer Toolbar for the Firefox, Flock, and Seamonkey browsers. Take a look at this video to see how this can be a very invaluable web design tip for you:

Technorati Tags: browser, firefox, flock, seamonkey, web design tips, web developer toolbar