Monday, November 15, 2010

Weave that Dream! --Where to from here?

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

 

 

 

 

 

Thursday, November 11, 2010

Using CSS in Dreamweaver to Center Image on a web page

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!

 

 

Thursday, November 4, 2010

Inserting Video with Dreamweaver

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

<!-- first we try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise       -->

<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! But it's fixed in iOS4.0  -->

 

<video width="320" height="240" controls>

<!-- MP4 must be first for iPad's to play the video! WebKit Browsers video codecs are listed first  -->

 

<source src="../videoreels/Sequence2.mp4"  type="video/mp4"  />

<source src="../videoreels/Sequence2.3gp"  type="video/3gp"  />

 

<!--  Next we list Non web kit browsers: like Firefox. You can convert to webm or Video ogg videos formats using a web site called Firefogg  You need to use Firefox as your browser to make this on-line service work as it is a plug-in for Firefox  http://firefogg.org/make/index.html# -->

<source src="../videoreels/Sequence2.ogg"  type="video/ogg"  />

<source src="../videoreels/Sequence2.webm" type="video/webm" />

 

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

<source src="__VIDEO__.MP4" type="video/mp4" />

<source src="__VIDEO__.OGV" type="video/ogg" /> -->

<!-- If all else fails (all the above video players don't work) the fallback to use a Flash player -->

<!-- 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 width="320" height="240" type="application/x-shockwave-flash" data="../jwplayer/player.swf">

 

<!-- Firefox Flash uses the `data` attribute listed above, IE/Safari uses the 'param' listed below-->

<param name="movie" value="../jwplayer/player.swf" />

<param name="flashvars" value="controlbar=over&amp;image=../videoreels/Sequence2.jpg&amp;file=../videoreels/Sequence2.mp4" />

<!-- Add a fallback image. note the title field below, put the title of the video there -->

<img src="../Videoreels/Sequence2.jpg" width="320" height="240" alt="Shel visits ECC" title="Sequence2.mp4, No video playback capabilities, please download the video below" />

</object>

</video><br />

<!-- you *must* offer your client a download link as they may be able to play the file locally. You can customize this bit all you want -->

<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

html5video.jpg

 

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

Files Generated by HTML5 Widget

videowidgetfiles.jpg

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...

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

ColumnPuzzle.jpg

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

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 w3schoolsScreen shot 2010-11-04 at 12.14.46 AM.jpg



and here's what's to come in CSS3

From the web site css.flepstudio.org

Okay! Have Fun!





Wednesday, November 3, 2010

Forms -- Class 5 review


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.

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 Huggins' Free E-mail Form Script!

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...

class contac page.jpg


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

Tuesday, November 2, 2010

Free Video Converter --Offer Good until November 4

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





Friday, October 29, 2010

Dream Weaver --Week 4 Review The Templates Issue

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

Thursday, October 28, 2010

Dreamweaver --Not working resolved.

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?


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
realtedfiles.jpg


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...
ruler.jpg


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



Thursday, October 21, 2010

Dreamweaver Class #3

#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.

Monday, October 18, 2010

Navigation/Menu's and Forms in Dreamweaver

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...

Screen shot 2010-10-18 at 2.22.58 PM.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

or

 

Screen shot 2010-10-18 at 2.23.35 PM.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

"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.

Screen shot 2010-10-18 at 11.51.14 AM.jpg

 

 

 

 

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

 

Screen shot 2010-10-18 at 12.02.43 PM.jpg

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

Adobe Wiidget ERxchange

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

Widget Browser.

Screen shot 2010-10-18 at 12.26.57 PM.jpg

 

 

 

 

 

It'll look like this...

 

Screen shot 2010-10-18 at 12.27.52 PM.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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!

Screen shot 2010-05-06 at 5.04.59 PM.jpg

 

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...

 

 

 

 

 

 

Sunday, October 17, 2010

Font Relief

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...

 

Screen shot 2010-10-18 at 12.13.09 AM.jpg


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!"

 

Screen shot 2010-10-18 at 12.35.01 AM.jpg

 

 

 

Thursday, October 14, 2010

Dreamweaver Week 2 Review

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













Saturday, October 9, 2010

Class Tip #2 --Test Early, Test Often

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!

Preview.png


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.

Screen shot 2010-10-09 at 2.50.43 PM.jpg

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!



Friday, October 8, 2010

Dreamweaver -Tip #1

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!

Thursday, October 7, 2010

Class #1 Review and Notes

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



  1. The Banner
    1. Contains: Logo, Web Page Name, a tag or "motto, " background graphics...
  2. Navigation menus
    1. A list
  3. The Subject
    1. Contains: headlines, text summaries, graphics and photos
  4. Interactive Forms
    1. Site search, Newsletter signup, or join-up Forms
  5. Contact info
    1. NEVER make it hard for anyone visiting your site to contact you.
  6. A Footer
    1. 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...



 













Thursday, May 13, 2010

PhotoshopElements Deal, Amazon.com May 13, 2010 only

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 Photoshop 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



Wednesday, May 12, 2010

Be a Commercial Star!

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

CTCmap.gif

Monday, May 10, 2010

Dreamweaver -Day 3 Homework

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
w3schools try it set up for CSS
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

Site point learn and play interface











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!

Thursday, May 6, 2010

Dreamweaver - New Spry Widgets Browser

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

Adobe Wiidget ERxchange

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

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

 

Widget Browser Editor

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Screen shot 2010-05-06 at 5.04.59 PM.jpg

 

 

 

Dreamweaver -Day2 Homework

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

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!

 

 

 

 

 

 

 

 

 

Tuesday, May 4, 2010

Day 1 --Part 2 Homework

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

Monday, May 3, 2010

Dreamweaver Class - Week 1 notes

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...