The Ten Commandments of Spry Menubars

Read here: http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#comment-1129

My fellow Adobe Spry Forum member put us onto this one...

Meet Your Adobe Community Professional

I, Zabeth69 aka Beth Marshall, have been invited to be an Adobe Community Professional, a pre-release and 'behind the scenes' and so forth presence with Adobe. I am one of 300+ ACPs, and although I can say nothing beyond that, I was nominated by an online colleague to this position of distinction.

On another note, I am also a Community Help Moderator for Dreamweaver. So if you press the "help" button on Dreamweaver, and are taken to a Dreamweaver Help page, you will be able to write a comment at the bottom of the page if you need more explanation than the subject matter on the page gives you. I am one of the people who moderates those comments, answering and guiding the commenter to useful information.

I hope you are all using the resources on the Adobe website: www.adobe.com is your friend.

Great online Adobe CSS video

I watched this great Adobe video on CSS and it does a great job explaining CSS formats for us who think more graphically.

Here's the link;

http://tv.adobe.com/watch/digital-design/introduction-to-css

Temporarily Online

A simple and fast way to get a website temporarily online, if you don't have access to a webserver is to use Dropbox.

You can get it for free here, instructions here

I got this information from the Adobe Dreamweaver Forum

Welcome to the Fall Dreamweaver class!

We had a lively first night at the Fall Dreamweaver class. Welcome to Sarah, Laura, Travis, Kate, and Gergana!

After defining sites...a few times...we set to work on the Whirlwind tour that McFarland includes in Chapter 1. We hit on a lot of aspects of Dreamweaver that we will now proceed to actually learn in a more deliberate way!

I remind everyone in the class to review the class calendar at http://www.gravenimagedesign.net/PAE/dwcs4.html. Click on each part of the next class day's schedule to see the message about the material we will cover. Read through the book...don't forget that you can see it online at safarionlinebooks (link on the class website)...Chapters 2 and 3 for Wednesday.

As always, if you find anything on my website or this blog that doesn't function, send me a message and I'll fix it. I invite you to stroll through other postings on this blog, and to post something yourself, if you have a question, an answer, or a comment! I especially like hearing about your "aha" moments and successes.

Have at it!

HTML data sources for Spry Framework dynamic pages

Here's a very exciting video:

http://tv.adobe.com/#vi+f15383v1041

Use a well-structured html page as source data for a dynamic presentation...sortable columns in a table, or master/detail, or several other layouts. They are very flexible. Once you have the Spry Data link set up (first button on the Spry insert toolbar), you can actually add columns and they will be automatically included, ready for use.

In my test table, I have text, a column of prices (set up as numeric format), images, and even the html code for PayPal buttons. All were brought in without a hitch to the presentation page.

Each different layout has a specialized .css file that is, of course, fully customizable to your site.

So watch the video, then go to Dreamweaver, create a data page and a presentation page, and set up Spry Data. You'll love it!

Baxter School is no more

Or so I hear; at least, Portland Adult Ed is no longer there and on its way over to PATHS for the summer.

It's been a good and friendly place for the past academic year...one class of Dreamweaver CS3 and three of Dreamweaver CS4.

We even got to do an Adobe bingo/multiple choice quiz on the last day of class. However, not all the answers as given were correct or corresponded to the CS4 revision of Dreamweaver. I think I'd like to have class members sort through the sample questions and query Adobe on the ones that are out and out wrong!

Update: http://portlandadulted.myphotoalbum.com/view_album.php?set_albumName=album10

Roll the ball right into the pocket ... absolute positioning in a nutshell

Elaine had a very good question about positioning, to wit:

scenario: table with background image in a cell. Background image has an area pre-determined for overlaying text.

question: how to best set in the text so that it appears in the area determined for it?

answer: use absolute positioning within a div that is within a positioned div. Position, in this case, is an attribute and may be defined in a css style.

solution: don't bother with the table, it only confuses the situation, then

1. set up a div with a class or id defined with the attribute {position: ppp;} where ppp is relative, absolute, or fixed.
2. on this 'containing' div, set
   {background-image: [url];}
   and set the height and the width of the div to the dimensions of the image
   {width: xxx; height: yyy;}.
3. set a div inside the containing div with the following attributes:
    {width: [width of text area];
   height: [height of text area];
   top: [distance from top of div in pixels]px;
   left: [distance from left edge of div in pixels]px;
   position: absolute;}
4. By using a background image, the surface real-estate is still available for the text div to be positioned and populated with the desired text; the image will not push the new div out of the way.

Here's an example file:

http://www.gravenimagedesign.net/PAE/positiontest.html

If you really want to use a table, go ahead, but you will still need a containing div within the data cell and a positioned div within the containing div.

Don't forget to set position: relative|fixed|absolute (choices) on the containing div; use position: absolute on the positioned div. 

Fiddle around with negative numbers of pixels when you do the positioning (from top, from left; could do from right or from bottom; don't do more than 2) dimensions. Talk about working outside the box!

Have fun!

Building Your Cabin

By now, you should have done some thinking about your class project.

Have you done an outline?

1. Title/name of site
2. Mission/intention/topic of site
3. Pages (you need five)
   a. Home page (index.html)
   b. A page focusing on something you want the reader to know or do, relative to your topic
   c. More in depth information or auxiliary possibilities (I am being purposefully vague)
   d. Associated ideas
   e. etc. Links to sites that support your thesis or illustrate something about your topic
   f. You can be very creative with pages...don't rely on any of my lists!
   g. Something about yourself, or the organization or company you are making a site about
4. For each page
   a. Links
   b. Navigation (between pages) ideas
   c. Images
   d. Text/content
5. For the site
   a. Color ideas (see http://kuler.adobe.com/ for some fun with color)
   b. A diagram of how your pages will link to each other
   c. A sketch of the home page or of a basic page layout...on paper in crayon or marker or colored pencil or in Photoshop or Fireworks or Illustrator or the program of your choice
   d. Ideas of how you want the type to look (fonts, sizes, colors, etc.)
   e. A diagram of file names and file structure (could be combined with b above)
   f. Features you would add if you knew how
       i. videos
       ii. rollovers
       iii. sound effects
       iv. visual effects

I hope you get the idea...do a lot of thinking before you start twiddling bits on Dreamweaver. You'll be happy you did.

Client review of web pages

If you don't want to upload a site to the web, copy your root folder (and all site files within it!) to a CD.

That way, the pages can be looked at in a browser and won't be vulnerable to being changed readily. If your pages work well locally, that is, in Dreamweaver, then the site will be accessible simply by double-clicking on the index.html file on the CD.

It is okay be leery of uploading pages and sites to the web, but the best solution is to have a "sandbox" area on your own webspace (and to HAVE your own webspace!). That way, you don't have to physically create a CD and deliver it.

For instance, I routinely have copies of sites on which I am working resting on my webspace. As they sit in their own root folders, they are accessible for those to whom you give the URL. You need not have them linked to your own site; in fact, it's probably better if they are NOT linked to your own site, unless you want all and sundry to be looking at works in progress.

When you have more than one site in your webspace, make sure that each is self-contained in its own root folder. The only index.html file that you want to show up by default when someone "goes to" your domain is the home page for the site. 

To wit: 

• My webspace (defaults to my home page, index.html, when my domain URL is called): 
  http://www.gravenimagedesign.net/
• Located within my webspace root might be other sites:
  http://www.gravenimagedesign.net/PHA/ (which would load the index.html page for my PHA 'sandbox' site)
  http://www.gravenimagedesign.net/PAE/ (which would load the index.html page for a PAE 'sandbox' site, if there were one)
• File structure would be as follows:
  home page and files of gravenimagedesign.net (webspace as a whole =  root folder)
  PHA/index.html all PHA files live in the PHA folder, which is ITS root folder
  The URL for this site would be: http://www.gravenimagedesign.net/PHA/{not necessary to add the pagefile name, unless you are not showing an index page}
  PAE/index.html   all PAE files live in the PAE folder, which is ITS root folder {again, not necessary to add the pagefile name to the URL, unless you are not showing an index page}
  The URL for this site would be: http://www.gravenimagedesign.net/PAE/

I need WHAT? to see your site?

Yesterday, we had a couple of vivid examples of flashy exciting websites becoming totally inaccessible to users in ways the designer probably had not imagined.

First, the nye site http://nyelabs.com/ required plugins and recent versions of Flash player that the school network had not installed. Bummer. It's a cute site, and it might be fun to investigate all the features that it incorporates...if only we could actually SEE it!

Second, the BOOK site http://www.lookatbook.com/ used some obscure links (available only to the terminally curious) to get to the "about us" pages (and obscure backlinks), as well as a popup for their "shop," which would certainly not be visible to those who have blocked popups.

All in all, our analyzing websites session was instructive, and (I hope) fun to see a tiny bit of what is out there on the web, in the interest of learning how to make better websites.

Don't Make Me Think!

The best reference I can suggest for usability and accessibility philosophy is Steve Krug's book, "Don't Make Me Think."

Google it or look it up on Amazon. You can pick it up used for not much money. 

http://www.sensible.com/

Steve has a sense of humor and if you can develop your intuition to include his philosophy, you will be well on the way to understanding your users and how to design websites for them.

Look him up!

Changing a site from old Dreamweaver to New

I want to update my web site from an html site to css, but don't want to hurt my well established standing in the search engines -- especially Google. I plan to keep all of the page names, meta tags & descriptions the same through the change. I have heard that Google likes css. In the past whenever I redesigned the site and uploaded the new pages it seemed to take Google time to recognize it and I lost visits -- and business. Suggestions?

Welcome!

A hearty welcome to the Spring Dreamweaver CS4 class.

Please feel free to read back posts and comments, and to post and comment yourself.

Project Website

Hello, my project website for the CS4 class is www.duanepatricio.com - it is a website I developed for my neighbor who is an artist who custom builds furniture specifically mirrors, tables, and frames from old boards salvaged from Maine coastal homes and barns.

Your sites

Marybeth has asked whether other class members would post their sites and let us know the URLs. If you can do that, please also write a brief blog entry with an explanation.

Hope all is going well with you all!

How can I make a back button?

What kind of link, behavior can I add to a button (when clicked) will return to the page last viewed?  ie: back button

Thanks,

Rick

Browsers

Just wondering if anyone is having difficulty with their websites looking different from browser to browser, for some reason some links in particular PDF links and some links in my spry menu are not working in IE but working fine in Chrome, Firefox and safari.
I seem to be having most of my problems with IE as I noticed Firefox, Safari and Chrome are very similar with small differences but IE seems to work completely different from the other three

Disjointed rollovers without javascript

Using pure CSS, it is entirely possible to make disjointed rollovers. 

I just discovered an explanation with one example being extra-intriguing (but still very simple!).

Take a look at: http://pmob.co.uk/pob/animated.htm

and http://pmob.co.uk/pob/disjointed1.htm

Color Blindness

When you design for the web, you must consider legibility a high priority.

Contrast between text and color blocks/background images is paramount to creating an easily-read page.

Consider your color-blind viewers, and check out your pages at http://colorfilter.wickline.org Bring this page up on your browser and look at your pages one by one (you enter the URL at the page) through special filters designed to mimic the page as seen by a person who is colorblind. Several different colorblind conditions are mimicked; you can click between them while viewing a rendering of your page.

This resource may help you steer clear of pages that are difficult to read.