Dreamweaver -Class Blog

Weave that Dream! --Where to from here?

2010-11-15T15:14:00.001-08:00

Practice Practice Practice

I have updated the SEO page, It's about Search Engine Optimization...

http://uofgts.com/dream/SEO.html

Things to consider

Don't be afraid to experiment.
Start on a "blank" web page.

Use your favorite search engine to find an answer or a tutorial on the subject with which you are experimenting...

Join a Forum and Lurk

http://groups.google.com/group/webweavers?pli=1

http://tech.groups.yahoo.com/group/adobe-dreamweaver/

http://kb2.adobe.com/cps/142/tn_14240.html

http://forums.adobe.com/community/dreamweaver

Watch AdobeTV

http://tv.adobe.com/channel/web/

Reference Books

Dreamweaver the Missing Manual

http://search.oreilly.com/?q=dreamweaver

Or, just send me an e-mail!

Practice Practice Practice

Using CSS in Dreamweaver to Center Image on a web page

2010-11-11T08:59:00.001-08:00

Here are 3 methods for centering images or any element, id or class...

(This also works for any html element, id, or class)

The problem

You want to place a "box" and an image on a web page. AND, you want them centered.

Method #1: Absolute, Auto and 0 (zero)

(Click on the image to see the web page)

SOLUTION

Make the Box and the image have the property, position and value, absolute; and Set the margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Source Below!

<style type="text/css">
body {text-align: center;
margin: 0 auto;
}#largebox {
text-align: left;
	width:500px;
	height:400px;
	background-color:#407751;
	border:dotted #000000 1px  ;
	position: absolute;
	margin: auto;
	left:0; right:0;
	top:0; bottom:0;
}
/* instead of making the image an id, you can target the image by using the descendant relationship #largebox img  {} */

#smallimage {
	background-color:#F00;
	border:solid #fff 2px ;
	position: absolute;
	margin: auto;
	left:0; right:0;
	top:0; bottom:0;
	}</style>
</head>
<body>
<h2>Method 1: Absolute, Auto and 0 (zero)</h2>
<p style="text-align:left; text-indent:5em;">Make the Box and the image have the property and value position: absolute; and Use Margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Check out the embedded source!
</p>
<p>Check to see if this works in all browsers!</p>
<div id="largebox">
 <img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" />
</div>
</body>
</html>

As Always Check to see if this works in all browsers!

------------------------------------------------------------------------------------------------------------

Method #2: The 50% Solution

(Click on the image to see the actual page)

SOLUTION

For Absolute Position, set Top, Right, Bottom and Left to to 50% Percent

Subtract from margin-top, margin-right, margin-bottom and margin-left 1/2 (50%) of the width and height of the image in pixel units. Check out the source below!

<style type="text/css"> 
body {text-align: center;}
#largebox {
text-align: left;
	width:500px;
	height:400px;
	background-color:#CFF;
	border:dotted #000000 1px  ;
	position:absolute;
/* Apply the 50% rule */
left: 50%;
	top: 50%;
	right:50%;
	bottom:50%;
/*Subtract 50% (1/2) the width and height of the image or element
the minus sigh  moves the element to the left */ 
	margin-left: -250px;
	margin-top: -200px;
	margin-right: -250px;
	margin-bottom:-200px;
}
#smallimage {
	background-color:#F00;
	border:solid #000000 2px ;
	position:absolute;
	left: 50%;
	top: 50%;
	right:50%;
	bottom:50%;
	margin-left: -100px;
	margin-top: -66px;
	margin-right: -100px;
	margin-bottom:-66px;
}
</style>
</head>
<body>
<h2>Method 2: The 50% Solution</h2><h3></h3> Using Absolute, 50% Percent and subtract 1/2 (50%) of the width and height of the image</h3>
<p style="text-align:left; text-indent:5em;">Make the Box and the image have the property and value position: absolute; set the Top, Right, Bottom and Left positions to 50% and subtract from margin-top, margin-right, margin-bottom and margin-left 1/2 (50%) of the width and height of the image in pixel units. Check out the embedded source!
</p>
<p>Check to see if this works in all browsers!</p>
<div id="largebox">
 <img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" />
</div>
</body>
</html>

--------------------------------------------------------------------------------

Method #3: Use Display: Block;

Click on the image to see the actual web page.

The Solution

Tricky... The key to centering an image on a web page is that by default an image is an inline element.

"Inline Elements always begin on the same line. Height, line-height and top and bottom margins can’t be changed. Width is as long as the text/image and can’t be manipulated!"

Unless you change the image to act like a block element using the Property and Value display:block;

You could put the image in a div, but why add a div when you don't need it? PLease report if the above works in your browsers! Thanks. The source is below...

<style type="text/css">body {text-align: center;
text-indent: 5em;
margin: 0 }
#largebox {
text-align: left;
	width:500px;
	height:400px;
	background-color:#999288;
	border:dotted #000000 1px;
	margin: 0 auto;

}
#smallimage {background-color:#F00;
background-color:#CFF;
	border:solid #fff 4px;
	display: block;
	margin: 120px auto ;
}
</style>
</head>
<body>
<h2>Centering an image using display: block;</h2>
<p style="text-align:left;">Tricky... The key to centering an image on a web page is that by default an image is an inline element. </p>
<blockquote style="text-align:left;"> <em><strong>"Inline Elements always begin on the same line. Height, line-height and top and bottom margins can’t be changed. Width is as long as the text/image and can’t be manipulated!"</strong></em></blockquote>
<p style="text-align:left;">Unless you change the image to act like a block element using the Property and Value <em><strong>display:block;</strong></em></p><p style="text-align:left;">You could put the image in a div, but why add a div when you don't need it?</p>
<div id="largebox">
<img src="../imageproc/thumbsize/200pixels.jpg" alt="A thumbnail 200 pixels wide of MoultonFalls Moss" width="200" height="133" id="smallimage" />
</div>
</body>
</html>

as always, have fun!

Inserting Video with Dreamweaver

2010-11-04T13:56:00.001-07:00

Taking advantage of HTML 5 Video

This is the source from Video 1 Inserting video the right way

Reference: "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design.

You'll note that this design does not need any script loading in the (header of the) html document

<---- Snip

<!-- This is the generic Firefox / Opera format used in the statements above

<!-- Here we're using a java based flash player JW Player http://www.longtailvideo.com/

you'll need to go to the longtailvideo site and download and install the jwplayer -->

</object>

</video><br />

<p><strong>If you can't play the video on-line <br />You may Down Load it! :</strong><br />

Closed Video Format for non-profit use only:<a href="../videoreels/Sequence2.mp4">"MP4"</a><br />

Open Video Format anyone can use it:<a href="../videoreels/Sequence2.ogg">"Ogg"</a>

</p>

---->snip

That's all you need in terms of "Markup"

Most of the work will involve converting your existing video to all of the above codecs

Video 2 Adobe's HTML 5 Video Widget

If you don't have Adobe's Widget Browser Installed, do get it. You don't need Dreamweaver CS5 to run the Widget browser or use the generated code! All you need to install is the latest version of Adobe Air and the Widget Browser

This is just a snap shot of the code generated by the HTML5 Video Widget

When you save the widget files to a folder, all the necssary files and scipts are generated and saved...

Files Generated by HTML5 Widget

In Dreamweaver CS5 it's way easier to just put your cursor where you want the video and insert it via the Insert panel: > Common > Widget

Change the path to the videos and you are done.

3 Inserting Flash Media in Dreamweaver

You want to use one the above methods if you want all browsers and all smart devices to be able to play the video.

Enjoy and have Fun!

Making Columns --A Puzzle for you to solve...

2010-11-04T09:42:00.001-07:00

Making Content Readable

The puzzle is simple... There is some text in a 'container' with the id = "content" The puzzle is to format the text into 3 columns. Why?

In the United States, a common newspaper columns measurement is about 11 picas wide (or about 1.83 inches), though this measure varies from paper to paper and in other countries. On a Computer screen the display is set at 96 pixels/inch, so 1.83 x 96 = 176 Pixels. The Physiology is that it is easier to read something and comprehend it if the reader doesn't have to move their eyes to read the article.

Click this link to download the Column Puzzle

Find a solution using CSS 2 and then check out Adobe's Widget Browser for a CSS3 solution!

As Aways, Have Fun!

Transparency using CSS in Dreamweaver

2010-11-04T00:13:00.001-07:00

Learn something new everyday!

I didn't think it was possible to make background colors and images with varying degrees of transparency!

These two web pages explain how it's done.

From w3schools tutorials you can even use their "try-it-out feature!
Transparency/Opacity at w3schools

and here's what's to come in CSS3

From the web site css.flepstudio.org

Okay! Have Fun!

Forms -- Class 5 review

2010-11-03T22:47:00.001-07:00

Mail Forms

You'll find really good tools to make forms in Dreamweaver. You'll find excellent Extensions too. You can even find terrific wizards or form generators on-line, like Accessify's quick form builder.

With this link you can download Huggins' script, sample forms and instructions Version2.2.3 Huggins%20Email%20Form%20Script

At first, the contents in the Huggins' folder might look intimidating and hard to install, but it isn't at all. Just read the "manual" and follow the instructions.

If you go to the class web site's contact page, on that page you'll find a link that will download all the files that make the class form...

Here's another example web page
that uses Huggins' E-mail Script and form. See if you can spot what's different about those forms!

For some tips and information about forms read the class about forms page

Free Video Converter --Offer Good until November 4

2010-11-02T16:28:00.001-07:00

Do you want to insert video on your web pages?

You'll need to convert the video so that it will play on a smart phone, iphone, ipod, ipad, internet capable TV and a desktop computer!!!

WinX is offering a Free Converter until November 4
License Codes for Mac or Windows versions are on the download page
WinX HD Video Converter Deluxe
Note: No free update or technical support is provided.
http://www.winxdvd.com/giveaway/

In class this week we will learn how to insert the video and other media on your web pages

Dream Weaver --Week 4 Review The Templates Issue

2010-10-29T17:54:00.001-07:00

Howdy

I hope you aren't having as many Dreamweaver CS5 problems as I am.

It's probably my installation of Dreamweaver CS5 on my Snow Leopard Mac...

Turns out I can make the template pages in Dreamweaver CS4, in CS5 there are issues; basically the templates do NOT behave the same as in CS4 as in CS5

You can help me sort this out... If the templates work in YOUR version of Dreamweaver CS5, then I need to figure out what is going on with my computer. Otherwise it's Adobe's fault.

I put all the Template files in a folder and Zipped them. You can make that folder a "site" or just copy the unzipped folder and its content into your site folder.

You can down load the files by clicking this link. Download Template Files

There's another "link" behaviour for you... generally a browser will down load a file if it has the extension .zip or .pdf rather than try to display it... With older browsers you have to right click the link...

One thing I forgot to tell you about was that before you can make an editable region on a template page you need to put all the CSS into an external text file with the extension .css

It's not hard to do...
Copy the css statements between

<style type="text/css"> and </style>

into a blank page and save the file as a text file with the extension .css

You need to delete the style statements then add a link command that tells the browser where you put the .css file

<link href="styles/classpages.css" rel="stylesheet" type="text/css" />

Just look at the files in the zipped folder...
You can read about Basic CSS from the Classes main page under the CSS tab.

This takes you to page 1 of Making Templates...

How to make an editable region is here

And how to make repeatable regions is here
I'm looking forward to hearing about YOUR successes with Templates!

Have a great week end

Dreamweaver --Not working resolved.

2010-10-28T13:07:00.001-07:00

I mentioned this in class.
The problem I was having was that I'd insert or highlight some text and format it as a heading in Dreamweaver. Didn't matter if I did this in Design View, or in Code view...

IFormat the text as a heading and it would the disappear... making it kinda hard to work on a web page in Design View!

No one was finding a solution, even on the Adobe Dreamweaver Forum

I had uninstalled Dreamweaver, re-installed it, deleted the config file, Ran Permissions on my Mac, re-built the directory... all to no avail.

Then I decided that maybe there was something wrong with the font. So I opened the Macs font Utility program Font Book app and wonder of wonders not only was there a problem with the default Dreamweaver font New Times Roman, there was problems with a bunch of others... mostly there were duplicates of the same font that wouldn't "validate". I deleted all the fonts that weren't validating.

So far, problem fixed!

Why there were duplicates of the fonts? That I don't know.

Next up... What I should have showed you all in class..
How to make Templates.
How to make editable regions.
How to make repeating editable regions...
As 3 different subjects...

Dreamweaver Question - How do you center a horizontal menu bar?

2010-10-28T00:25:00.001-07:00

You need to give the bar a width... and then set margin: auto;

The procedure

1.Look at the top of the dreamweaver layout and select SpryMenuBarHorizontal.css from the related files list

2. In the code view look for


 ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width:100%;
}

3. You'll need to figure out how wide your menu is...
Turn on the Ruler  
Menu: View > Rulers > Show

Place your cursor to the left of the menu in the Ruler. 
Hold down the mouse button and drag to the right... 
You should see a vertical "green" Line as you drag it to the end of the menu bar

You should see something like this...



3. Now change margin to auto and width to 706px or however long your menu bar is...


 ul.MenuBarHorizontal
{
	margin: auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width:706px;
}


4. save the file. press the F5 key... you should see the menu bar centered

more details here
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.html

Dreamweaver Class #3

2010-10-21T14:26:00.001-07:00

#1 Managing Sites

Menu (Site > Manage Sites... )
setting up ftp (Sftp) for remote site [Text Book page 478]
ftp address, login, password
Path to root folder

#2 Managing Site Files

The Files Panel [Chapter 4 pp67 - pp79]
The Assets Panel

An excellent video on Managing your site is available from the classes home page in the tab "File Management"

#3 Working with CSS Styles Panel [Chapter 9]

All
Current
Catagory View
List View
Set Properties
Attach Style Sheet
New CSS Rule
Edit Rule
Add Property

Links, and Navigation Menus

I have updated the "Links" tab on the class home page

A Note:

Dreamweaver CS5 has dropped support for The Navigation Bar.
It has been obsoleted (depreciated) by the new Widget "spry" and CSS menus available from the Widget Browser

There is a link to a tutorial I put together on "How to style default links" ...

Lots to read, Lots to do...
Got a question, send that e-mail.

Navigation/Menu's and Forms in Dreamweaver

2010-10-18T14:53:00.001-07:00

The 2 hardest things to insert on a web page correctly.

1. Navigation Menus

You can spend a lot of time learning the rules so you can style your own links to look "fancy." So a good place to start is to use an extension or widget to do the work for you. Once you become familiar with the styling rules, you can add your own styles... or make your own menus.

A styled navigation menu is really a fancy looking list. The first, and most famous wizard was something called List-O-Matic at Accessify.com

There is a Free Dreamweaver Extension called List-O-Rama 2 available at DMXzone.com

Yes, you'll have to register first. The choices are limited, but they are free...

There are some menu schemes available as a Widget...

We'll look at these alternatives in class.

2. Forms

You'll find really good tools to make forms in Dreamweaver. You'll find excellent Extensions too. You can even find terrific wizards or form generators on-line, like Accessify's quick form builder.

But, none of them tell you how to implement the form without incurring a lot of spam, ensuring that the form is secure, and it actually works delivering to you usable information. Except for Huggin's E-mail Form Script! Scroll down the page and you'll find the link to download everything you need. Look for a red arrow and "Download Huggin's Email Form Script - 2.2.3"

At first, the contents in the folder it might look intimidating and hard to install, but it isn't at all. Just read the "manual" and follow the instructions.

Here's an example web page that uses Huggin's E-mail Script and form. I'll show you how to install a Huggin's script and form in class.

The Widget Browser --Dreamweaver and Beyond

2010-10-18T12:15:00.001-07:00

"Let the Computer do the work."
AJax Coded by Adobe so you don't have to...
Server Side XML/Java Effects for your Web Page

With the Widget Browser, you can:

Preview and download all of the OpenAjax widgets available on the Adobe Exchange
Work with widgets inside Adobe Dreamweaver CS5, so that you can easily insert them in your web pages
If you Don't have Dreamweaver CS5 you can Edit and Export widgets for use in ANY other HTML editing tool.

In Dreamweaver CS5

If you haven't registered with Adobe now is the time to do so...

You need to "install" the widget browser. You can do this directly from the Applications Bar. On the Mac you may have to turn the Applications Bar on

(Mac only Menu: Window > Applications Bar) The Applications bar is always on in PC's.

In Dreamweaver CS5 the widgets are available from inside Dreamweaver in the "Insert" Menu & Panel. And from the Applications Bar.

Dreamweaver CS4 and other web editor users

You'll need to Register with Adobe (even if you don't have any adobe products) and install Adobe AIR 2 (It's Free) and the Widget Browser.

This link will take you to Adobe's "Air" web page...

This link takes you to the Widget Browser Page

When you start up the widget browser you'll see all of the widges available from the Adobe Exchange... You have to download and install them... For now most of them are free, but more sofisticated ones in the future will have a price tag on them.

There are now 28 widgets available for download!

The Exchange view looks like this

After you download a widget you can preview and edit a widget right in the

Widget Browser.

It'll look like this...

Her's a web page that uses the above "Accordion" widget...

Save the files to a folder and then add them to your web editor of choice!

Some of these widgets will replace the older "depreciated" widgets in Dreamweaver know as Spry's. The widgets are easier to work with and style to adapt to your web pages... In class we'll look at the alternatives available to you...

Note: If you have a Mac, you may have a problem running the widget.

You can find a solution here...

http://forums.adobe.com/thread/681569?tstart=0

Installer #2 worked for me...

Font Relief

2010-10-17T12:34:00.001-07:00

Adding More Fonts

You can never have enough fonts! --Anon

There are several ways to add more fonts to your web page...One is to use a font you already have, and hope that the "client" visiting your web page also has that same font. Another is to use Fonts that are in the public domain and are "free" to use on your web page. Yet another alternative is to use "free" fonts or purchase them from a font foundry for web use.

Common Fonts

1. Code Style did a Windows-Mac-Linux font survey and lists the most common fonts across those platforms.

This web page at Code Style lists the most Common Fonts. If you visit the web site you'll find they list "common" font stacks to use for your web pages.

Now all you have to do is hope your client has the fonts listed in your font stack on their computer.

font-family: Zapf Chancery, Brush Script MT, cursive;

Public Domain - Free Fonts

2. The best place to start is with Google's Font Directory (it's in Beta)

But, they only list 23 fonts... so far... Google provides you with the Markup that you'll need to snip and paste to embed into your web pages. Google is working with Type Kit to make some of the fonts available.

You don't get to "download" the fonts... Instead you paste a script (the emedded markup) that goes out and gets the font from Googles servers so that your client's browser can display 'em...

Professional Fonts

2. Buy the fonts from a font foundry. TypeKit offers a service that links you up with font foundries and the fonts of course...

TypeKit also offers "free" fonts for your use... You can use the Free service to try it out...

You'll have to sign up for an account, but the result may be "Font Relief!"

Dreamweaver Week 2 Review

2010-10-14T00:16:00.001-07:00

Making a Web Page banner and Laying out a web page

I have broken down what we did in class into a few steps...

All of the material can be accessed from Lesson 2 at this URL
http://uofgts.com/dream/lesson2.html

You'll find several links on that page to side notes and links to the 5 Steps...

Here are the main links
http://uofgts.com/dream/BasicCSS-1.html
http://uofgts.com/dream/BasicCSS-2.html
http://uofgts.com/dream/BasicCSS-3.html
http://uofgts.com/dream/BasicCSS-4.html
http://uofgts.com/dream/BasicCSS-5.html

Once you have created the layout make 4 copies rename them
index.html
product.html
about.html
and
contact.html

and you'll have the beginnings of a web site!

have fun!
practice, practice, practice

Class Tip #2 --Test Early, Test Often

2010-10-09T15:12:00.001-07:00

Sometimes when you make a change or add an element to a web page, and you Preview it in a browser to test it, the change doesn't show up!

Now what?

This occurs more often than it should, and can be quite frustrating. It happens after you have previewed the web page at least one previous time.

What happens is this... your browser has decided that you have viewed the page earlier, so instead of "loading" the newer version it displays the older version that is in the browsers cache.

The solution? First use your browsers refresh button or use it's keyboard shortcut. For Firefox, Chrome and Safari It's Command R (Mac) or Control R (Windows). For Internet Explorer it's the function key F5

If that doesn't work just Close the browser and run it again. More than likely you won't have to empty the browser's cache.

With that in mind go and visit the class home page, http://uofgts.com/dream/ I added 2 new tabs... if you can't see what I added, click that refresh button!

Dreamweaver -Tip #1

2010-10-08T14:18:00.000-07:00

Clear the clutter Use the F4 key

Dreamweaver's many panels or palettes provide quick access to tools to edit your pages. To de-clutter your work area use the F4 key, this shortcut toggles the panels on and off.

To turn switch on/off individual panels , use the keyboard shortcut. You can find the shortcuts using the Menu: Windows

You can find and edit keyboard shortcuts, or export an html web page that lists All the shortcuts from within Dreamweaver

On the Mac Keyboard Shortcuts
Menu: Dreamweaver > KeyBoard Shortcuts...
On the PC Keyboard Shortcuts
Menu: Edit > KeyBoard Shortcuts...

Or Shrink'em and stack'em --the Panels that is

To gain more space on your monitor but still have access to the panels you can Shrink'em and stack'em
Clicking on the "icon" expands the panel so you can use it.

Save your screen setup using the menu Menu: Window > Workspace Layout > New Workspace...

In the popup menuName it and click save!You can always reload the default layout if you get lost...Have Fun!

Class #1 Review and Notes

2010-10-07T13:23:00.000-07:00

Welcome to the world of Dreamweaver and making web pages.

When you make a web page you add html (in our case xhtml) elements. Those elements make up the content of the web page.

What kind of content? The basics are

The Banner

Contains: Logo, Web Page Name, a tag or "motto, " background graphics...

Navigation menus

A list

The Subject

Contains: headlines, text summaries, graphics and photos

Interactive Forms

Site search, Newsletter signup, or join-up Forms

Contact info

NEVER make it hard for anyone visiting your site to contact you.

A Footer

Links to a sitemap, Legal, Privacy, and copyright info.

Your content will also include graphics. logos, photos, backgrounds and more...

You will need to collect these items. That means you'll need a new folder of "collected web page parts" placed in their appropriate folders. I call my parts folder "WebStuff" and it contains folders with photos, graphics, backgrounds, gradients and other "stuff" that I think I might use on a web page.

To help you with your homework... writing out the "content" of your web page and finding the "parts" you need please read Lesson 1. You'll find it at this URL http://uofgts.com/dream/lesson1.html

Some folks use software like Photoshop to layout the "look" of their web site. Others just use a pencil and paper.

If you don't have Photoshop you can find free drawing tools on-line.

Check out:

SumoPaint http://www.sumopaint.com/home/ just click on "Open Sumo Paint" It sure looks like and feels like Photoshop!

If you need a program that helps you organize your images and modify them take a look at the freeware program XnView http://www.xnview.com/en/index.html

Just remember

Practice, Practice, Practice

Next class we will convert your content to xhtml...

PhotoshopElements Deal, Amazon.com May 13, 2010 only

2010-05-13T09:40:00.001-07:00

I found this on Mike Johnson's Blog, The Online Photographer

Adobe Photoshop Elements for $34.99

Amazon's Gold Box Deal of the Day today (in the U.S. only) is Adobe Photos hop Elements 8 for Mac or PC for $34.99 after mail-in rebate.

Elements has always been a somewhat strange product to me...it's Photoshop with some key features missing, but it's still loaded with complexity and isn't optimized strictly for photographers. It's cheap today, though. A tip: Elements is a nice, inexpensive way to get the latest version of Adobe Camera Raw (ACR) if your older version of Photoshop doesn't support it.

Mike

Be a Commercial Star!

2010-05-12T23:44:00.001-07:00

Howdy
Seems Clark College wants to make a commercial with me demoing Photoshop as part of a larger commercial

I need and Clark College needs some volunteers to participate in the commercial!

It will be "shot" (filmed) at CTC (Clarl Technology Center) between 1-3 on Saturday, May 22. Cast call is at 12:45 PM in room 339/

I've been told that you (the volunteers) to not to wear bright colored or white clothing. Also avoid logos or insignias on the clothes...

Directions to CTC

From Vancouver:
Take State Highway 14 east to the 192nd Ave. exit. Turn left (north) on 192nd Ave. to Mill Plain Blvd. Turn left (west) on Mill Plain Blvd. and travel approximately one block to Clark College at Columbia Tech Center. The building is on the right (north) side of the road.

Or just go east on Mill Plain ... the building is on the left, below Walmart and across the street from Lowesl

e-mail me if you want to join in on the fun

Dreamweaver -Day 3 Homework

2010-05-10T13:44:00.001-07:00

Homework?

Here'a a review of Adobe's new Dreamweaver CS 5
Well, I know you do want to build a web site with Dreamweaver...
To style your web site you NEED to use CSS. With CSS you can style any xhtml element, AND any thing you name as a class or an id...
To begin learning CSS you need a good resources. There are 2 that are on-line...
W3Schools CSS Tutorial
This set of tutorials has a nifty "try it" feature...
it looks like this

You start off with their example, then you can edit the styles on the left and see the results on the right.

Sitepoint.com CSS Reference
Sitepoint also has a section called Learn and Play Where you can see what the sample looks like and you can change the
CSS and immediately see the results... it looks like this

All of these will help you learn the CSS Rules and the many different ways you can "style"!

Styling in Dreamweaver

At the class web site is a short tutorial that shows you how to use the CSS Styles panel to style!
This link takes you to the pages of the tutorial...
If you want to load the pages for the tutorial into Dreamweaver you can get them here
Because the linked file has the extension .zip your browser will automatically download the zipped file... unzip the file and you'll get a folder named "cssmenu"
Copy that to your master folder and open "simpmenu-01.html" into Dreamweaver...
Follow the steps... The example shows you how to add some simple styles to a menu list... using the CSS Style Palette

Codeburner

You can put a reference interface on your desktop called "Code Burner" It links to all the sitepoint online references.
You can find the links here at the sitepoint.com's website
They have been promising a Dreamweaver Extension for a long, long time...

Some Tips

When you are starting to learn CSS styling and layout it is much easier to start with either Dreamweavers Starter pages... or other 3rd party starter templates...
There are a couple of "Starter Templates" at the Adobe Exchange... Just do a key word search CSS Layout or check out these web pages
Layout Gala
Fixed width Layouts

CSS Articles

CSS Tips and Tricks
Building your First CSS Site

*** Practice, practice, practice ***
good luck and when all else fails 'holler!

Dreamweaver - New Spry Widgets Browser

2010-05-06T17:11:00.001-07:00

New Release from Adobe...

From the Widget Browser web page...

With the Widget Browser, you can:

Preview and download all of the OpenAjax widgets available on the Adobe Exchange
Add widgets to Adobe Dreamweaver so that you can easily insert them in your web pages
Export and package widgets for use in any other HTML editing tool

To make this work you'll need to Register with Adobe and install Adobe AIR.

This link will take you to Adobe's "Air" web page...

This link takes you to the Widget Browser Page

If you get Dreamweaver CS5 the widgets will be available from inside Dreamweaver in the "Insert" Menu & Panel.

But you still can use the widgets in any Version of Dreamweaver or OTHER web Editor!

When you start up the widget browser you'll see all of the widges available from the Adobe Exchange.... You have to download and install them... For now most of them are free, but more sofisticated ones in the future will have a price tag on them.

On Monday there were 13 widgets, there are now 18!

The Exchange view looks like this

After you download a widget you can preview and edit a widget right in the

Widget Browser. It'll look like this...

Save the files to a folder and then add them to your web editor of choice!

Dreamweaver -Day2 Homework

2010-05-06T10:10:00.001-07:00

Homework

On the Class Dreamweaver Home page

Just Read the information available at the following Tabs

XHTML

5 simple rules

CSS

Basic CSS definitions and information... I'll show you how to apply CSS on Day 3

Links

What makes the internet work..

Sprys --"AJax Coded by Adobe so you don't have to..."

Note: The spry's have evolved. The new and way easier method of dealing with Sprys will be detailed in the next post... But, this page will give you an idea how it used to be...

Form Mail Script

Check with your "Host" and ask or look for in their control panel a Form Mail Script

They may provide you with a ready made contact form or a "Guest Book" or a CGI or a "pearl" script to handle your form mail.

Day 2 - Extensions

2010-05-06T00:07:00.001-07:00

Dreamweaver Extensions

Extensions are plug-ins that will make your life easier... Especially for beginning users... I recommend that you install them and give them a try.

List-O-Rama Version 2 from the DMX Zone

CSS Form Designer From DMX

also get the

Google Search form from Webassist

Adobe Browser labs has an extension that let's you compare your web pages in 2 different browsers side by side, on both the Mac and PC platform

you can get the browserlab extensions here

http://labs.adobe.com/downloads/browserlab.html

You'll have to "join" or sign up for the above but I think you'll find these free extensions very useful!

Day 1 --Part 2 Homework

2010-05-04T17:32:00.000-07:00

The most important part of a web page is your content.

Your homework...

1. write out your content on the Dreamweaver Design page... Don't worry about formatting it... We'll work on that in class.

2. Read the link Planning A Website and the tab "Aids" You should have already set the defaults we worked on in class.

See you in Class

Dreamweaver Class - Week 1 notes

2010-05-03T14:40:00.000-07:00

Class updates, and unanswered questions..

Setting up Web Site Publishing (uploading to your remote site)
Web site info you need. (Bring to class)
Username: username@yourdomainname.com (usually your e-mail address)
Password: password

ftp address ftp:
ftp.hostsdomainname.com
Port number (default is port 21)
sFTP Port number (default is port 22)

If COMCAST is your Provider/host

the ftp address is:
ftp.upload.comcast.net
Port Number (may be different than the default)
If Quest is the Provider/host

the ftp address is:
ftp.users.qwest.net or (if it has changed... let me know what the ftp address is... )
Port Number (MAy be different than the default)

If you connect via Webdave, or Local/Network or PDS
get the info from your IT person...

Here's an Adobe video about File Management

THE APPLICATIONS BAR
Can be turned on and off if you use a Mac use the menu

Menu
- Window > Application Bar (It'll appear at the Top of the Page --Let's you switch workplace settings... manage your "sites" and access the extensions manager )

More Homework to follow...

Dreamweaver -Class Blog

Weave that Dream! --Where to from here?

Practice Practice Practice

Things to consider

Using CSS in Dreamweaver to Center Image on a web page

SOLUTION

Make the Box and the image have the property, position and value, absolute; and Set the margin: auto; but set the Top, Right, Bottom and Left positions to 0 (zero). Source Below!

Inserting Video with Dreamweaver

This is the source from Video 1 Inserting video the right way

Video 2 Adobe's HTML 5 Video Widget

3 Inserting Flash Media in Dreamweaver

Enjoy and have Fun!

Making Columns --A Puzzle for you to solve...

Making Content Readable

As Aways, Have Fun!

Transparency using CSS in Dreamweaver

Learn something new everyday!

Okay! Have Fun!

Forms -- Class 5 review

Mail Forms

Free Video Converter --Offer Good until November 4

Dream Weaver --Week 4 Review The Templates Issue

Dreamweaver --Not working resolved.

Dreamweaver Question - How do you center a horizontal menu bar?

Dreamweaver Class #3

#1 Managing Sites

#2 Managing Site Files

#3 Working with CSS Styles Panel [Chapter 9]

Links, and Navigation Menus

A Note:

Navigation/Menu's and Forms in Dreamweaver

The 2 hardest things to insert on a web page correctly.

1. Navigation Menus

2. Forms

The Widget Browser --Dreamweaver and Beyond

﻿"Let the Computer do the work."

Server Side XML/Java Effects for your Web Page

In Dreamweaver CS5

Font Relief

Adding More Fonts

Common Fonts

font-family: Zapf Chancery, Brush Script MT, cursive;

Public Domain - Free Fonts

Professional Fonts

Dreamweaver Week 2 Review

Making a Web Page banner and Laying out a web page

Class Tip #2 --Test Early, Test Often

Dreamweaver -Tip #1

Class #1 Review and Notes

PhotoshopElements Deal, Amazon.com May 13, 2010 only

Adobe Photoshop Elements for $34.99

Be a Commercial Star!

Dreamweaver -Day 3 Homework

Homework?

Styling in Dreamweaver

Codeburner

Some Tips

CSS Articles

Dreamweaver - New Spry Widgets Browser

New Release from Adobe...

Dreamweaver -Day2 Homework

Homework

Form Mail Script

Day 2 - Extensions

Dreamweaver Extensions

List-O-Rama Version 2 from the DMX Zone

CSS Form Designer From DMX﻿

Google Search form from Webassist﻿

Day 1 --Part 2 Homework

Dreamweaver Class - Week 1 notes

"Let the Computer do the work."

CSS Form Designer From DMX

Google Search form from Webassist