Denver Adobe Dreamweaver Training Aspen Colorado

Denver Adobe Dreamweaver Training Aspen Colorado, adobe dreamweaver, adobe dreamweaver cs3, adobe dreamweaver tutorial, adobe dreamweaver cs getting started, adobe dreamweaver software comparison, adobe dreamweaver starting, dobe dreamweaver substitute, beginning adobe dreamweaver, adobe dreamweaver templates, adobe dreamweaver training, adobe dreamweaver vs frontpage, working with layers in adobe dreamweaver cs3, adobe dreamweaver cs2 features, adobe go live vs dreamweaver, adobe golive vs dreamweaver, mastering css with dreamweaver cs3

adobe dreamweaver
adobe dreamweaver cs3
adobe dreamweaver tutorial
adobe dreamweaver cs getting started
adobe dreamweaver software comparison
adobe dreamweaver starting
adobe dreamweaver substitute
beginning adobe dreamweaver
adobe dreamweaver templates
adobe dreamweaver training, toledo, oh
adobe dreamweaver vs frontpage
working with layers in adobe dreamweaver cs3
adobe dreamweaver cs2 features
adobe go live vs dreamweaver
adobe golive vs dreamweaver
mastering css with dreamweaver cs3, adobe reader

Dreamweaver Training

Dreamweaver

Understand the function of Dreamweaver in website design

Create and manage websites

Terms

Local Computer
Remote Server

Defining a Site

Defining a website in Dreamweaver allows all of your files to work together

Create links between pages, and embed images on your pages
File changes are automatically made in every page of the website affected by the change

Important rules:

Always start by defining a website in Dreamweaver
Always move and rename files in Dreamweaver

Collect all of your site content in a folder that you will use to define the location of your site
You can use subfolders
From the Document window menu, choose Site > New Site
*** p. 7, Karlins ***

Managing Sites

Edit website properties

*** p. 14-28, Karlins ***

Duplicate a website
Remove a website from your computer
Import or export a website

The workspace

Two work environments:

Document window

Create websites
Edit websites

Files window

Tools to control your website
Tools to manage the files in your website

Site Views

Site files: a flowchart of links
Testing server: for data-driven websites
Site map: an expanded files window view

View > Site Map

Expandable joints

In our last session, we learned how to use Photoshop to rapidly prototype a website design. We learned to quickly create website design graphics.

Today we are learning how to take those website design graphics into the Dreamweaver software.

In the real world, we would probably prepare our graphics using Fireworks, however, for this
session, you can assume that our graphics have already been prepared for us. Why are we learning about Fireworks later? Because Fireworks, while very helpful, is not actually necessary for creating a website. And we want to learn about Dreamweaver before Fireworks, because Dreamweaver holds everything together.

Today we will be looking at creating six website design projects.

Dreamweaver is the glue that holds it all together, so we will use Dreamweaver in every future class.

Future sessions will cover:
Cascading Style Sheets (CSS)
Fireworks software
Flash software
Developing and using templates
Search Engine Optimization (SEO)
Electronic Commerce (Ecommerce)
The last class will be devoted to “show and tell” for our projects.

Each class builds on the previous classes.
Try to not miss classes and please bring all of your previous course materials to each future class.

Where Should we Start?

One question I get frequently is why do we have to try so hard at website design. My dad told me that anything that was really good and worthwhile in life would probably take some time to get it right. If my dad were alive today, I would probably show him a website like this
http://www.ece.umd.edu/~dilli/books/tolkien.html and then we would laugh about how bad it is from a design perspective. I mean, can you even read the well-written text? Unfortunately, the design gets in the way of the message. If we ended there, that is the point of today. Do not let the technology get in the way of your message.

Markup language: A language that has codes for indicating layout and styling (such as boldface, italics, paragraphs, placement of graphics, etc.) within a text file. HTML (Hypertext Markup Language) is a markup language.

Example:
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

Tags are like parts in your car

Tag: In HTML terms, a ‘tag’ is used to format a Web document. They are sometimes called
‘Markup Tags’. Tags are surrounded by angle brackets (< and >) to distinguish them from text. ‘Tags’ is also used to describe the code indicating index entries in embedded indexing.

All of these are HTML tags: <html> <body> </body> </html>

The two on the left are open tags. The two on the right are close tags. The slash closes the tag.

Tags are similar to all of the parts in your car. Only a code mechanic really knows what they are and how they work. If you mess around under the hood, you might break something, so save an extra copy of working pages before you try your hand at editing code.

Example of working HTML code for http://intothewestphotos.com/gallery-bw.html
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>
<script language=”JavaScript1.2” type=”text/javascript”>
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

//-->
</script>
<script language=”JavaScript1.2” type=”text/javascript”>
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

//-->
</script>
</head>
<body bgcolor=”#ffffff” onload=”MM_preloadImages(‘images/topnav_r2_c1_f2.gif’,’images/topnav_r2_c2_f2.gif’,’images/topnav_r2_c3_f2.gif’,’images/topnav_r2_c4_f2.gif’,’images/topnav_r2_c5_f2.gif’)” onload=”MM_preloadImages(‘images/black-white_r3_c8_f2.gif’,’images/black-white_r3_c8_f3.gif’,’images/black-white_r3_c8_f4.gif’,’images/black-white_r3_c8_f5.gif’);”>

<tr>
<td colspan=”6”><a href=”index.html”><img name=”topnav_r1_c1” src=”images/topnav_r1_c1.gif” width=”800” height=”102” border=”0” id=”topnav_r1_c1” alt=”” /></a></td>
<td><img src=”images/spacer.gif” width=”1” height=”102” border=”0” alt=”” /></td>
</tr>
<tr>
<td><a href=”index.html” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘topnav_r2_c1’,’’,’images/topnav_r2_c1_f2.gif’,1)”><img name=”topnav_r2_c1” src=”images/topnav_r2_c1.gif” width=”89” height=”31” border=”0” id=”topnav_r2_c1” alt=”” /></a></td>
<td><a href=”aboutus.html” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘topnav_r2_c2’,’’,’images/topnav_r2_c2_f2.gif’,1)”><img name=”topnav_r2_c2” src=”images/topnav_r2_c2.gif” width=”129” height=”31” border=”0” id=”topnav_r2_c2” alt=”” /></a></td>
<td><a href=”show-schedule.html” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘topnav_r2_c3’,’’,’images/topnav_r2_c3_f2.gif’,1)”><img name=”topnav_r2_c3” src=”images/topnav_r2_c3.gif” width=”195” height=”31” border=”0” id=”topnav_r2_c3” alt=”” /></a></td>
<td><a href=”gallery.html” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘topnav_r2_c4’,’’,’images/topnav_r2_c4_f2.gif’,1)”><img name=”topnav_r2_c4” src=”images/topnav_r2_c4.gif” width=”113” height=”31” border=”0” id=”topnav_r2_c4” alt=”” /></a></td>
<td><a href=”mailto:becky@intothewestphotos.com” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘topnav_r2_c5’,’’,’images/topnav_r2_c5_f2.gif’,1)”><img name=”topnav_r2_c5” src=”images/topnav_r2_c5.gif” width=”149” height=”31” border=”0” id=”topnav_r2_c5” alt=”” /></a></td>
<td rowspan=”2”><img name=”topnav_r2_c6” src=”images/topnav_r2_c6.gif” width=”125” height=”71” border=”0” id=”topnav_r2_c6” alt=”” /></td>
<td><img src=”images/spacer.gif” width=”1” height=”31” border=”0” alt=”” /></td>
</tr>
<tr>
<td colspan=”5”><img name=”topnav_r3_c1” src=”images/topnav_r3_c1.gif” width=”675” height=”40” border=”0” id=”topnav_r3_c1” alt=”” /></td>
</tr>
</table></div>
<div id=”content”><span class=”style1”>Black & White Photographs Gallery</span>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”800”>

<tr>

<td rowspan=”2”><a href=”javascript:;” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘blackwhite_r3_c8’,’’,’images/black-white_r3_c8_f2.gif’,1);”><img name=”blackwhite_r2_c2” src=”images/black-white_r2_c2.gif” width=”100” height=”100” border=”0” id=”blackwhite_r2_c2” alt=”” /></a></td>
<td rowspan=”5”><img name=”blackwhite_r2_c3” src=”images/black-white_r2_c3.gif” width=”14” height=”415” border=”0” id=”blackwhite_r2_c3” alt=”” /></td>
<td rowspan=”2”><a href=”javascript:;” onmouseout=”MM_swapImgRestore();” onmouseover=”MM_swapImage(‘blackwhite_r3_c8’,’’,’images/black-white_r3_c8_f3.gif’,1);”><img name=”blackwhite_r2_c4” src=”images/black-white_r2_c4.gif” width=”100” height=”100” border=”0” id=”blackwhite_r2_c4” alt=”” /></a></td>
<td rowspan=”5”><img n

Viewing The Code

If we had to understand how every part in our cars was made and how they all work together, most of us would never drive. And so it is with website design. There’s really a lot going on under the hood of a website. And so we drive our cars, and our websites, with minimal knowledge of what’s really under the hood. We can open the hood and look at all of the parts but we’re just as happy to close the hood, hop behind the wheel and drive away. This document is my attempt to tell you what you need to know about building webpages and websites using Dreamweaver.

We can view the HTML source code in most browsers by choosing VIEW > SOURCE CODE.

In Dreamweaver there is a CODE view, and a SPLIT view where we can also see the HTML code.

Using a simple template

Try this in Dreamweaver:
1. File > New
2. Click on “Blank Template” (see diagram below)
3. In the layout column, choose any template.
4. Click the Create button.
5. Learn how to:
a. Change some of the text on this webpage
b. Save the page and view the it in a browser
c. View the code

Local Root Folder Area

As a web site designer, you need to collect all of your web site content into one folder, a local root folder on the hard drive of your computer, not on the network.
You can have subfolders within the outer folder for things like: images, media, etc.
You should have subfolders in order to stay organized.

Examples of content:
Web site design graphics
Logo
Writing
Business Graphics (like charts and graphs)
Photographs

Please remember, that your web site design graphics, logo, business graphics and photographs may need to be prepared, sized, enhanced, cropped, or color corrected before they are imported into Dreamweaver.

Lot’s of people say that Dreamweaver is a program for web site design.

I say that Dreamweaver is for web site building.

Photoshop and Fireworks are for web site design, because that’s where the real
designing takes place. Creating a web site design in Dreamweaver only assures that you will have a boxy web site with little or no design at all. Why? Because
Dreamweaver is great at placing graphics and text but not so great at creating
graphics. Good design is about planning as much as good aesthetics.

FTP (File Transfer Protocol)

File Transfer Protocol. This is the language used for file transfer from computer to computer across the World Wide Web. A very common method of moving files between two Internet sites. FTP is a way to login to another Internet site for the purposes of retrieving and/or sending files. FTP was invented and in wide use long before the advent of the World Wide Web and originally was always used from a text-only interface.

FTP information consists of:
User Name, Password, Hostname. Usually the hostname is the website address.
Absent from FTP is the URL or full path name to the webpage being updated.

Basic: Defining a Local Site

Normally, there are two versions of a web site:
1. The local copy on your computer where you create content.
2. When that content is ready for the public you upload it to the remote server using FTP.
Here are the steps to defining a local site using the basic tab.
1. Start Dreamweaver CS3
2. Choose Site > New Site. The site definition dialog box opens.
3. At the top of the dialog, click the Basic tab to have Dreamweaver prompt you for each response.
4. What would you like to name your site?
5. What is the HTTP Address (URL) of your site?
http://www.coloradoclubs.org/
6. Click “Next”
7. Click “No I do not want to use a server technology”
8. Click “Next”
9. Click “Edit local copies on my machine, then upload to the server
(recommended)”
10. Where on your computer do you want to store the file?
11. Click “Next”
12. How do you connect to your server? FTP
13. What is the hostname or FTP address of your server: www.coloradoclubs.org
14. What folder on the server do you want to store your files in?
15. What is your FTP login?
16. What is your FTP password? Mgd@141
17. Click “Test Connection”
18. Click “Next”
19. Click “No, do not enable check in or check out”
20. Click “Done”

Advanced: Defining a Local Site

This is the Advanced method which gives the same results as the Basic method. The Advanced tab shows box show all of the options at once, compared to the Basic tab which prompts you for answers each step of the way.

1. Start Dreamweaver CS3
2. Choose Site > New Site. The site definition dialog box opens.
3. At the top of the dialog, click the Advanced tab to see all of the options at once.
4. In the site name box, enter the friendly name of the site, a name that will remind you about the name of the project. No one else will see this name online. It is for your reference only.
5. In the Local root folder area, click the folder icon at the right and navigate to the folder in which you saved all of your files.
6. If you want Dreamweaver to automatically save images in one folder, you can navigate to this folder using the folder icon. Let’s leave this blank for now.
7. Choose the Link relative to Document radio button. This is the most efficient and reliable way to generate and update links between files, and to define links for embedded images.
8. Enable the cache check box. In other words, check it. This enables the Asset panel in Dreamweaver which displays all of the site content.
9. With the local site defined, click OK. Dreamweaver is now ready to organize your files for you.

The DIV tag
and manipulate. You can use the <div> tag when you want to center a block of content or position
a content block on the page. The <div> tag is a very powerful tool for Web developers.
tips:
The <div> tag is a blocklevel element
The <div> tag can contain nearly any other tag
The <div> tag cannot be inside <p> tags
The <div> tag is not a replacement <p> tag. The <p> tag is for paragraphs, only,

<p> tags with <div> tags.
place the contents within the element.
If you nest your <div> tags, be sure that you know where your content is going (in

Three Types of DIV tags
Class ID: Used for consistent formatting of elements, like text or borders on pictures, for instance.
The same class can be used many times. Formatting elements require class IDs.
DIV ID: Used for positioning sections of a web page, like top, content, bottom. You can nest

cause a browser error.
Common Traits: In short, common traits to used in more than one item can be put in class. Styl
ing that applies to only one item should be put in an ID.
read and a lot easier to edit. That was actually a lot of information right there.
AP DIV:
point within its container, and it cannot move from this position. When you draw a
your page. An AP div is positioned on a page wherever the top and left declarations
tell it to be. You can also use the bottom and right properties to position an element,
although this may prove to be buggy and is not something I would recommend.
position of an AP div is not affected by any other page elements. Though it may
cover up or be covered by other elements, it is very much an entity to itself.

Starting a New Web Page
2. Choose Modify > Page Properties to set options for the entire page. Dreamweaver will automat
In the appearance category, you can set the font face, size and color. For example,
Notice the code window has added a style tag and some CSS information:
<style type=”text/css”>
<!

fontsize: small;

>
</style>

Creating a DIV ID Wrapper
the Common or Insert Tool bars.
Type “wrapper” in the ID section, as shown above.
Then click “New CSS Style”
diagram on the next page.

Creating a DIV ID Wrapper
of the screen.

New CSS Style
Click on “Advanced (IDs, pseudoclass selectors)
The selector should automatically say #wrapper

The position we want is centered on the screen, or centered in the background.

Click the word “box” on the left side of the dialog box and enter

Margin right: auto
Margin left: auto

Client Materials

We are building websites for six clients:
Global Security Source
Into The West Photos
Unity Star Jewelry
Walls of Distinction
The client materials are located online here:

Cascading Style Sheets

Two and Three Column Layouts
Top Ten CSS Tutorials