Thursday, July 17, 2008

Dreamweaver Training Tips

Below we've listed some of the basic considerations you should be aware of when creating or managing a web site. Keep in mind that it's not absolutely necessary to use Dreamwever but the alternative is essentially hand coding...that is knowing all the technologies involved so well you can write the code yourself.

Static or Dynamic?


Web sites come in two basic "flavors": static or dynamic.

A static web site is one where the content you put on the pages: text, graphics, etc., doesn't change until you change it and update the web site.

A dynamic web site is one where the content changes "dynamically" typically based on user input. Think of Amazon.com, say you're interested in a book but you forgot the title but remember the author's name. You go to Amazon and you type in the author's name and hit "enter". After a second or two a list of all the books by that author appears on the page. That information is typically being pulled onto the page from a database or some other external data file, such as an XML file. (An upcoming post will have more information about how XML files may be used in web sites.)

Dynamic web sites are cool but the techniques and technologies used in them represent a leap above the technologies used in static web sites. If you're interested in dynamic websites you still need to master the techniques and technologies needed to create static web sites. (We hope to post an article soon here on dynamic web site technologies.)

When creating a Dynamic Website typically you also need to pick an application server and scripting language. The reason for this is that pages in dynamic web sites typically have code in it that executes on the server, unlike html pages on static websites. Because the pages are doing more on a dynamic website, you need an application server that knows how to interpret the code that's on the page.

Below a quick reference to other techniques and technologies you will use in creating any web site, whether static or dynamic but don't be intimidated by that, in almost every case Dreamweaver will create the code you need for you and please note that all of them (except creating graphics, which is a separate class) are covered in our Dreamweaver Web Design class: http://www.multigroup.com

Graphics

Dreamweaver (or any other product that allows you to create or manage web sites) does not create graphics. You'll need some other application to create graphics for the web. Again, we're some what biased but Adobe does produce the industry-leading products in this regard, too.
Photoshop, Illustrator and Fireworks can all be used to create graphics for the web. (See our post on Fireworks but keep in mind Photoshop and Illustrator are also great products for creating graphics for the web though if I had to pick one product it would be Fireworks, then Illustrator and then Photoshop.. in my opinion and given my proclivities. (We hope to devout an upcoming post on the differences between Photoshop and Illustrator.)

Both Photoshop and Illustrator have their strengths and weaknesses and in the best of all possible worlds if you're serious about designing for the web and print you would use both.

Graphics formats that are supported on the web are: gif files, jpeg files and png files.

All of the above listed products can output these files.


HTML and XHTML

Web pages are basically html files, each html file is another page. Dreamweaver writes the html for you, strictly speaking no knowledge of html requited but in practice a little knowledge of html helps. (We provide html basics in our Dreamweaver class.)

Keep in mind that html is not a programming language, it's a mark up language and relatively simple to understand and use. Years ago I worked in a publishing company and I would watch the typesetters sitting in front of dedicated computers used only to set type for a magazine.

If they wanted to indicate to the computer that a word should be bold they would put the word inside of a bold tag. When printed by the computer those words would appear bold. Well that's exactly how html works, except it's the browser that makes the words bold when it sees the appropriate html tags around the word.

Note that html was not what was used way back when I worked for the publishing company with the dedicated typesetting machine. However that language was one of the sister languages to html created from SGML (Standard Generalized Markup Language).

For More information SGML and how it relates to HTML see the Wikipedia article:

http://en.wikipedia.org/wiki/SGML#Original_uses

XHTML is html's younger brother. For all intents and purposes you can simply think of it as the latest version of html and it is recommended that you use it. (The latest version of Dreamweaver will write xhtml for you by default and there is no practical reason that I can think of why you shouldn't.

For more informaton on XHTML see the Wikipedia article:
http://en.wikipedia.org/wiki/XHTML

Cascading Style Sheets

Cascading Style Sheets (CSS) are a required supplemental technology in creating and maintaining web sites these days. (See our blog entry on using CSS to format text.)

We provide substantial information about using
CSS both to format web pages and to create layouts with div tags, and you're in luck again because Dreamweaver will write the CSS code for you too, and CSS while not exactly a mark up language is also fairly simple. Here's a sample of CSS code designed to format paragraphs (note the reference to "p") with the Aral font, but keep in mind that Dreamweaver will write the CSS code for you.

p {
font-family: Arial, Helvetica, sans-serif;
}

Javascript

Javascript is another supplemental technology that may or may not be used on web sites today.
One common example of using Javascript on a web page would be to create a rollover effect: the user moves their cursor over a button and it changes (color, size or shape). That's typically done with Javascript. (Note Javascript is not the same as the programming language Java though it is a scripting/programming language... but have no fear-

Dreamweaver comes to the rescue again: it will write and create some of the more frequently used Javascripts for you without you having to write the code yourself, but keep in mind the Javascript that Dreamweaver writes for you is typically created by using the Behavior panel in Dreamweaver and it represents a subset of some of the more frequently used Javascript functions, not the entire universe of Javascript functions.

You can hand code it all if you're proficient with xhtml, CSS and Javascript, (for a static web site, dynamic web sites also require server-side scripting) or you can use Dreamweaver, the swiss army knife of web design.

Any questions about any of the issues raised here please email me at: kdurso@nmultigroup.com