Dave's Site - Millions Served.
Confused about getting a
.com? Answers are here.

Dave's Web Design 
Tutorial & Guide: Tips and Tutorials

Web Design Guide: Tips and Tutorials

Design Chapter 06

Basic Web Technologies and Website Design Software


HTML + CSS

HTML was the file format that the first web site (ever) was written in. Over a decade later, it is still the format all web sites depend on. Even sites like YouTube and MySpace rely on HTML codes to load their videos, pictures, and music. HTML instructs the computer on how to load it all for you. It's very easy and relatively quick to learn.

I wrote a tutorial on HTML several years ago. You should definitely check it out if you don't know how to code yet.

http://www.davesite.com/webstation/html/

While HTML holds the text and tells the browser software how to load the pictures, videos, and audio files, a CSS (cascading style sheet) file tells the browser software what fonts to use, what size to make fonts, what colors to use on the page, all that great stuff. HTML makes the web page, CSS makes the make page look good.

Proper CSS usage can even allow an entire web site to be changed style wise with just modifying one CSS file. Definitely a huge time saver. (See Chapter 1.1 : Basics of CSS Formatting to see how it can save time.)

Learn CSS after you learn HTML from another great tutorial I wrote.

Web
Design Basics Dave has a New Course for your iPad!
Download HTML and CSS Web Design Basics Right Now!
Or Search for "Web Design Basics" in AppStore!
Web-design-1d


(A few lines of CSS can make your web page into double space instead of single space if you need it longer to hand in as an assignment. I'm NOT joking.)

Java and JavaScript

Java is a programming language that allows a web designer to make mini-applications called applets. JavaScript is a scripting language that allows for HTML and CSS to become interactive on a web page. Java and JavaScript are different things, although they both require programming or scripting skills.

Flash

Adobe's Flash is a great program to make effective multimedia sites with a low bandwidth/transfer usage. It was originally used for small, line-designed (vector) based sites, but can now be used to include videos among other things. Flash isn't a must for a designer, but it can be useful in a lot of circumstances.

There are several other programming and design technologies you will discover as you make sites, including AJAX, ASP, PHP, CGI, Perl, and MySQL. They are beyond the scope of this guide and all have many books and websites dedicated to them.

Software Technologies

Dreamweaver - once you know HTML and CSS you can make your life easier by getting your own copy of Dreamweaver. This application was originally made by Macromedia and is now sold by Adobe.

Dreamweaver is a visual designer that does a lot of the HTML coding and CSS coding for you behind the scenes. Remember our HOME link and bottom links example from Chapter Three? With Dreamweaver you can make a template to include those on it. Imagine you have a 30 page web site, and decide to modify a few of the bottom links. If it's part of your template, you just edit the template, click modify all pages, then Publish it. You just changed 30 pages in a few clicks. Pretty nice.

NVU

NVU is is a free, open-source editor. I own a copy of Dreamweaver so I haven't dabbled in NVU much, but it's available for Linux in addition to Windows and Macintosh. This makes a great free alternative to Dreamweaver.

Photoshop

Adobe's Photoshop may just well change your life -- at least digitally. This is the application I use most for web design. It's great to edit photographs, make original graphics, and create visual mock-ups of your web site. The full version can be expensive, but you can get a copy of Photoshop Elements bundled with a Wacom USB Drawing Pad for less than $100.

Paint Shop Pro

Corel's Paint Shop Pro is a great alternative to Photoshop if you only design in Windows. (I design on a Mac so Photoshop was a better choice.)

The GIMP

The GIMP is a great image editor for those on a budget. It's a free download, and it's available for Windows, Macintosh, and Linux.

Photoshop is only available for Windows and Mac. Paint Shop Pro is only available for Windows. If you're using Linux, or just want a free alterative on Windows or Mac, consider giving The GIMP a shot.

continue to next chapter >

davesite.com home ----- Copyright © 2009 dave kristula. all rights reserved.