Online Dreamweaver Classes Rotating Header Image

Favorite Web Designs of Intro Students

One of the major changes in this course series is the added emphasis on best practices in web design. Although most of the design learning modules begin in the Intermediate Dreamweaver course, it is never too early to start learning design principles. Next session, we will cover some basic design rules. Once you know the rules, then you know when it makes sense to break those design rules!

In the Intro course, we start with examining effective designs. Don’t worry about the rules behind the design. The goal here is to identify designs that you think are attractive and effective. Spend some time thinking about what is it about the design that works for you.

  • Is it the colors?
  • Is it the typeface?
  • Is it the sizes of the fonts used?
  • Is it the organization of content?
  • Is it the layout of the site eg. columns, header, footer etc
  • Is it the balance between whitespace, text and images?
  • What is the feel or general impression of the design?
  • How does your eye move across the site?

Add a comment to this post about one of your favorite web designs. Write a brief paragraph about why you think this design is effective. I also encourage you to check out the web sites that your students recommend and add your own input to each other.

Reblog this post [with Zemanta]

New Dreamweaver CS course series

Starting March 2009, LVS Online is launching a new Dreamweaver CS3 and Dreamweaver CS4 course series. This series is not only designed for the hobbyist, but will provide valuable tools and resources to those aspiring to be professional web designers. The three session series will provide students with all of the knowledge and skills necessary to pass the Adobe certification exam Web Communication using Adobe® Dreamweaver®.

New for the Introduction to Dreamweaver course

  • Step by step instructions for PC and Mac users
  • Screenshots for PC and Mac users
  • Beginning preparation for the Adobe Certified Associate (ACA)
  • Addition of CS4 content, including the fantastic new CSS features, new views and image capabilities

The new series

  • Introduction (premieres 3/09)
    • Learn the basic Dreamweaver tools to create styled and interactive web pages
    • Introduction to interactive menus
    • Use CSS to style and format your web pages
  • Intermediate (premieres 5/09)
    • Move from creating single web pages to actual web sites, using best practices for web design
    • Learn how to use templates and includes to create easy to maintain and upgrade web sites
    • Create a variety of navigation systems
  • Advanced (premieres 8/09)
    • Utilize Dreamweaver to manage and test your web site
    • Create accessible, attractive and effective web sites
    • Integrate multimedia into your web sites
    • Import data into your web site

    Register now for the Introduction to Dreamweaver Course for the March session.

Learn web design and support Australian bush fire victims

The death toll  from the bush fires in Australia is 181 and counting, but you can help. Sitepoint, an Australian web designcompany,  is offering a huge sale on their excellent books. You can buy five books for the price of one and 100% of the proceeds will go to benefit the brush fire victims. The sale goes through 2/13 so you will want to take advantage of this offer quickly. The loss of home and livelihood has been staggering and the Australian brush victims are in desperate need of assistance now.

Here are some books that I think may be of particular interest for Dreamweaver students:

HTML Utopia: Designing Without Tables Using CSS, 2nd Edition

The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition

Build Your Own Web Site The Right Way Using HTML & CSS

The Ultimate CSS Reference

The Principles of Beautiful Web Design

The Principles Of Successful Freelancing

Once you have selected your books, be sure to use the form here to get the sale pricing and to make sure that all proceeds go to the brush fire victims.

50 CSS articles

Although it is only the first week of this session’s Dreamweaver CS3 course, we are already getting CSS questions. We will start working with CSS in Dreamweaver CS3 in week 2. But, if you want to get a head start on next week, check out some of the resources at Top 50 Best CSS Articles and Resources. Although none of the 50 articles listed are specific to Dreamweaver, they will provide you with a wealth of information about CSS.
If you are a CSS beginner, I recommend that you spend some time at the W3C CSS examples page. Here you can practice playing with styles and see the results on the fly. You don’t have to do anything on your own site, you can practice on theirs and see immediate results.

Register now for Intro to Dreamweaver CS3

LVS Online Introduction to Dreamweaver CS3 is a fun and informative instructor led 6 week course. Lessons begin on 1/10/08. Learn how to create standards compliant websites with Adobe Dreamweaver.

7 Free Dreamweaver Videos for Beginners

Sometimes you need to do more than just read something to understand how it works. Here is a list of 7 free video tutorials to supplement your learning experience.

  1. Setting up a site in Dreamweaver CS3 requires Quicktime
  2. Dreamweaver’s Property Inspector requires Quicktime
  3. Utilizing the Assets panel in Dreamweaver
  4. Styling a navigation bar with CSS requires Quicktime
  5. Creating Rollovers requires Flash
  6. Making a Spry Menu
  7. Make a tabbed panel in Dreamweaver

LVS November Session Dreamweaver News

Registration opened on Monday for the November session of LVS Online. Many of you have noticed that the Intermediate Dreamweaver Course is on hiatus. Adobe is getting ready to release a new version of Creative Suite, including Dreamweaver CS4.  I need to start working on the lessons for the new version and I can’t teach a full course load while trying to write new courses. So, all of my intermediate level courses are on hiatus next session. I have been so busy teaching that I haven’t had a chance to really work with the beta version.

I am also going to be restructuring the courses, so you could take the  series of course as preparation for the Adobe  Web Communications Associate certificate.   This can be a big advantage for those of you that are wanting to do web sites professionally.  It will take me some time to put it all together so I appreciate your patience.

Don’t worry, I am not abandoning courses for Dreamweaver CS3. There are some major changes in the next version. In particular, CSS is much more integrated and there are some interface changes to make Dreamweaver more integrated with the other Adobe projects. Until I really start working with the beta version, I don’t know if I will be combining the versions into one set of courses or if I will be separating them out. Either way, we WILL be offering courses for Dreamweaver CS3 as well as Dreamweaver CS4 with the new year.

Attention LVS Students

Attention LVS Students!
Tell us who you are and which class(es) you are enrolled in. Let us know how LVS classes has affected your life in your professional field and/or in your personal life. We enjoy hearing of your experiences. Thanks for sharing with LVS staff, fellow LVS students and our blog visitors!

If you’d like to view other students experiences at LVS Online Classes, visit the main LVS Blog and click the Blogroll links.

Why should I rename a Spry CSS file?

OK, let’s say you’ve just used Dreamweaver’s Spry tab and inserted a horizontal Spry menu to your page. At this point you are trying to save the document. The first time you save after adding Spry, DW copies the files (a spry javascript “.js” file and a CSS file named SpryMenuBarHorizontal.css) into your SpryAssets folder in this site. DW doesn’t ask you anything about the save, it just uses the default file name for those files and drops them into your SpryAssets folder. AND, what’s more, DW automatically adds lines to your document’s <head> section to point to those two files. (Remember to upload those SpryAssets files along with your page when it’s time to publish your website.)

You then spend several minutes (hours?) adjusting the style (colors, etc.) for that horizontal menu. Good work! Looks great! Those changes were all automatically entered into the file SpryMenuBarHorizontal.css mentioned above. Thanks, Dreamweaver, for knowing where to save my stylin’ work!

Now imagine this….  what if you wanted to create several pages with horizontal-style Spry menus. DW doesn’t remember you’ve previously added one elsewhere, so it goes ahead and copies the files into the SpryAssets folder each time. But DW doesn’t know you spent all that time adjusting the file. It doesn’t know enough to name each new instance differently, so the second time you add a horizontal-type menu, DW would actually overwrite the files that were saved there from the first time you inserted that style of menu…. unless you RENAME the first spry files BEFORE YOU SAVE the second document (remember, DW copies those files in there at the point of “Save”).

Summarizing the above:
- Upon first save, DW saves a file called SpryAssets/SpryMenuBarHorizontal.css
- That’s the stylesheet for this one menu.
- Next time you add a horizontal menu (“SpryMenuBarHorizontal”), DW is going to want to save a copy of that file AGAIN.
- To avoid overwriting the first CSS horizontal menu file when you place a second horizontal menu, you should rename the CSS file you used for the first one.

I’d rename it something that will really identify it for you in the future, like “SpryMenuBarHorizontalGreenPage.css” (something that tells you which page in your site that particular horizontal menu is on).

AND THEN, you also have to change the <link href=”../SpryAssets/etc… reference to that file in the HTML code in the <head> section of your document, so that DW knows which stylesheet you want this page to use (among the several that will eventually be collecting in your SpryAssets folder).

A couple of notes to follow up on this.

(1) EXCEPTION: You don’t have to rename the CSS file, just let DW do its thing each time IF you do not plan to change even one little thing in the menu’s stylesheet. That is, you can just keep letting DW overwrite that CSS file IF really do want ALL the horizontal-type spry menus exactly the same in this site — the original Spry default design (i.e., fairly ugly in my opinion).

(2) If you plan to have IDENTICALLY STYLED horizontal-style menus throughout your site, but you want to customize the style (colors, etc), you must still rename your SpryMenuBarHorizontal.css file before you save another page that contains a newly placed horizontal-style menu. Why? Again, so that your changes to the CSS file don’t get overwritten. In this case, you could rename it something like SpryMenuBarHorizontalPhotoSite.css. (This time I’m naming it to identify which whole site it’s being used on, rather than which page.)
AND THEN…
Each time you place a new instance of the Spry Horizontal Menu on any of your pages, all you’d have to do is go to the <head> section of the document and change the name of the CSS file in this tag: <link href=”../SpryAssets/SpryMenuBarHorizontalPhotoSite.css” rel=”stylesheet” type=”text/css” />

Dreamweaver is powerful in the many things it does for us automatically, but it’s like having any good assistant, we have to sometimes make small adjustments to the work it does for us. Working together, hand in hand, with DW.

Update your Spry!

When Dreamweaver CS3 first came out, the buzz was all about Spry Widgets. Spry Widgets were configurable components to add interactivity to your web site like data displays, tabbed panels and accordion panels. Like most releases when they frist come out, there is a bug or too. The Spry version 1.4 had more than one or two bugs and most were related to how Spry displayed in Internet Explorer. Adobe released Spry 1.6 a year ago and Spry 1.6.1 last spring but Spry updates were not part of the original release of Dreamweaver CS3.

MAKE SURE THAT YOU HAVE CURRENT SPRY FILES THE THIRD WEEK OF THE INTRO CLASS AND THE FIRST WEEK OF THE INTERMEDIATE CLASS!!!

Depending on when you purchased your Dreamweaver CS3, you may have out-dated Spry files. Go to Site > Spry Updater. If you don’t see Spry Updater in that Site menu, you definitely need to update! To have your Spry updated routinely, you will need to do a one-time download of the new Spry Updater.

  1. Go to the official Spry page at Adobe.
  2. Click on the Get the Spry Updater for Dreamweaver CS3 now link
  3.  Log in to the Adobe web site. You use the same username/password that you used to register your Dreamweaver product. If you can’t remember it, use their help link. If you haven’t registered your product, you can create a new AdobeID now.
  4. Once logged in you should be directed to the Spry download page.
  5. Click on the Spry PreRelease 1.61 link not the extension download link.
  6. Once you have downloaded the zip file, unzip it.
  7. Drill down to the Dreamweaver folder and double click on the Spry161Updater.
  8. This will open up Extension Manager and walk you through the process of installing the updater.
  9. You will be instructed to close and restart Dreamweaver.
  10. You might see a dialog box about Spry when you restart, just click Ok.
  11. Go to Site on your toolbar, at the bottom of the menu you should now see Spry Updater.
  12. Click on it and it will show you all of the Spry files and if any needed to updated for that site.

Updating Spry files is site specific. If you have just started the Intro to Dreamweaver class, that might not make sense yet, but it will be the end of the first lesson.

The download also includes a number of samples and demonstration files that you will want to keep for reference.