Web Design for Artists

Here’s a helpful site that helps you learn css positioning in a very clear way.

This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float.

Check it out here.

Here is a link to all the class video tutorials: http://webstudio.blip.tv/posts?view=archive&nsfw=dc

New screencasts will be added on a weekly basis.

Here’s a new video on how to layout a web page using HTML, CSS and Dreamweaver.

There are multiple approaches to layout with Web Design. Most methods are based on your site’s content, look and feel and design. Here are some more example of layouts that may match your design.

Layout Packs

Several common fluid-width layout frameworks.
http://css-tricks.com/layout-packs/

FLEXIBLE WEB DESIGN
Creating Liquid and Elastic Layouts with CSS
http://www.flexiblewebbook.com/files.html

Web Fonts

The Google Font Directory, Free web Fonts.
http://code.google.com/webfonts

Type Kit. The Easiest way to use real fonts on your website.
http://typekit.com/

Font Spring, Premium Web Fonts
http://www.fontspring.com/

SimpleViewer

SimpleViewer is a free, customizable image gallery. It allows you to display your images on any web page in a professional and intuitive way.
http://www.simpleviewer.net/simpleviewer/

Perfect Full Page Background Image

Looking to use a background image to fill your entire screen.
Check out this nifty tutorial.
http://css-tricks.com/perfect-full-page-background-image/

Sprites:

Spriting made easy with http://spriteme.org/

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

Here are a few excellent books that I highly recommend if you are looking to further expand your web building capacities.

Stunning CSS3 by Zoe Mickley Gillenwater
A PROJECT-BASED GUIDE TO THE LATEST IN CSS

Learn when and how to add CSS3 to your web site designs, by working through a series of practical yet eye-catching examples. All the well-supported, useful, and popular pieces of CSS3 are covered, along with workarounds for older browsers.
http://stunningcss3.com/

FLEXIBLE WEB DESIGN
Creating Liquid and Elastic Layouts with CSS
http://www.flexiblewebbook.com/

Photoshop is a great tool for creating the look and feel of your web site. Here’s a great tutorial for Creating the Photoshop Mockup.
http://css-tricks.com/video-screencasts/16-creating-the-photoshop-mockup/

If you are looking to do more with Photoshop, check out this useful video.
Hodgepodge of Photoshop Tricks:
http://css-tricks.com/video-screencasts/49-hodgepodge-of-photoshop-tricks/

Here are some very useful videos that do a great job at explaining some of the basics in website development. Please check out the HTML and CSS videos for a clearer idea of how web design works.

Google: HTML, CSS, and Javascript from the Ground Up:

Visit google code: http://code.google.com/edu/submissions/html-css-javascript/

Please check out css-Tricks video on the very basics of how html and css work.
This is a very useful video and should give you a better understanding of how HTML and CSS communicate.

HTML & CSS – The VERY Basics: http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/

Hello everyone. I am happy to bring you another screen cast. In this 3 part session we will be covering CSS and learn how to effectively use it to render your HTML pages. Please visit our Web Studio blip.tv page for more screen casts.

Getting Started with CSS Part 1



Getting Started with CSS Part 2



Getting Started with CSS Part 3

After spending way too much time typing out tutorials for class I am finally set up to bring you video tutorials. I think this will be a great improvement for getting a better understanding of class demo’s. You can work at your own pace and take your time with these lessons. I will be adding more every week, so be sure to check back here or visit our Blip TV site:
http://WebStudio.blip.tv/

Screen Cast #001 Getting Started With Dreamweaver

In this screen cast we will have a look around at Dreamweavers interface and learn how to create new files.

Screen Cast #002 Setting Up Your Site in Dreamweaver

In this tutorial we will learn how to manage our web projects using Dreamweaver’s interface.

Here are some very useful videos that do a great job at explaining some of the basics in website development. Please check out the HTML and CSS videos for a clearer idea of how web design works.

Visit google code here.

This is the best example of a ipsum site I have seen and it’s formated for HTML. If you’re mocking up a web site and need some ipsum text for a paragraph list or form this is the place to go: http://html-ipsum.com/