Dreamweaver at Radford

In COMS 326, we normally work in "raw HTML" and CSS "doing things the hard way" before launching into Dreamweaver, but you are welcome to explore things in any order if you have picked up some Dreamweaver skills already or own the software. I'll add specific tips here as issues come up in class.
- Tip#0: Get your own copy of Dreamweaver, at least for the last month of class. Adobe offers a free 30-day trial of all of its products, as well as a large education discount for student purchases. More on Adobe sales. Or see my Other ways to save money, below
- Tip#1: While working in the lab, PLEASE make the "code view" text size larger so that the professor can read it; 12 or 14 pt should do. The menu setting is at: Dreamweaver:Preferences:Fonts:CodeView
- Tip#2: The "View" menu gives you the option of splitting the code and design views horizontally or vertically. (A horizontal split works better on small monitors; on big-screen iMacs, use your personal preference.)
- Tip #3: Like all Adobe products, Dreamweaver originally came in a box with a big, printed book. Now that text is part of the "Help" system inside the program, but you can also access "UsingADOBE® DREAMWEAVER® CS5 & CS5.5" as an HTML Help file from the Web, or download it as a PDF file. DO NOT HIT PRINT! Yes, it is 661 pages long!
Pages I've made about Dreamweaver:
- Getting Started: Using Dreamweaver Quickly
- Assignment: Learning from Dreamweaver Classroom in a Book
- Dreamweirder: Make a Page Layout Your Own (four versions of a page started with a Dreamweaver layout)
- Fixing Broken Links (actually applies to all HTML editing, not just Dreamweaver)
- Creating a Spry Tabbed page
Our library has the e-book edition of Dreamweaver CS Five Classroom in a Book among many Safari Books Online resources.
Before getting too far into Dreamweaver, you should read about some of Dreamweaver's limitations (for designers and journalism students).
Some of the links below were created before our lab was upgraded to Dreamweaver CS Five. Let me know if you find an out-of-date reference that I've missed. (Some things are the same in CS Four and CS Five, but others have changed.)
For visual learners, Adobe has video as well as text-and-pictures tutorials online; some use sample files that are downloadable from the website

AdobeTV: Learn Dreamweaver CS Five (more than two hours of short videos)
Understanding Style Sheets in Dreamweaver CS Five (3 minute video), a CSS page layout basics essay, and a video explaining how the CS Five "starter page" layouts were planned (and how they have changed from the CS Four versions).
Highly recommended: A video on managing CSS styles with the Properties Inspector panel in Dreamweaver (6 minute video). That video includes a good example of how you can accidentally change more styles than you mean to -- a good reason to keep an eye on the "code view" too.
Using WordPress or another Content Management System? Dreamweaver has added features for Working with CMS Frameworks. That 12 minute video explains the "huge leap forward" in Dreamweaver CS Five when working in a locally-hosted WordPress blog and a "testing server" or "staging server."
Adobe Design Center Video Tutorials (for Photoshop, Dreamweaver and other Adobe products)

IF you have used Dreamweaver CS Four to setup and manage whole sites, you will find that the process of "defining a site" has been simplified in CS Five. This six-minute video demonstrates the CS Five site-setup changes.

Defining a site with Dreamweaver

While "defining a site" (five-minute video tutorial) is not an essential part of using Dreamweaver as an HTML editor in our lab, it can be very helpful -- and it's even more valuable when you use Dreamweaver to manage a site from your own (home) computer. That's because the "define a site" process lets you keep a "mirror" copy of your whole site on your computer, manage your assets (13 minute video tutorial) for a complicated site, test the relationships between your pages and graphics offline, then upload all of the changes at once. You also can use your computer as a "testing server" for more advanced pages if you move on to using PHP and other Web technologies.
Most important skill: Learn how the "Properties" panel in DW allows you to control both HTML and CSS; see Classroom in a Book or Using Dreamweaver.
Two more five-minute videos: One on Rapidly Building Layouts (and learning CSS at the same time) with Dreamweaver's pre-built starter pages, and another about creating and modifying CSS styles using Dreamweaver dialogue boxes, menus and control panels.
Dreamweaver has extensive documentation online, including the full text of the book Using Adobe Dreamweaver, a 664 page book that you can download as a PDF or read online. For direct links while running Dreamweaver, see the "Help" menu at the top of the screen and the circled question marks on some of its control panels.

Similar: Adobe's Dreamweaver Getting Started site (or jump to Part 1 of "Creating your first website...") and Learn to work with CSS.
The Web design site LayersMagazine also has exceptional Dreamweaver tutorials, including this one for turning a simple list into a colorful menu
Experimental page: Here's a test file I'll use to explore additional Dreamweaver features, such as its Spry widgets, and Web techniques like Server Side Includes and variable style sheets.

Local Knowledge

To define your Radford website with Dreamweaver using SFTP, the server address is "ruacad.radford.edu," accessed with your usual account name and password. (In the past, some student accounts were created without SFTP access. I send IT a list of COMS326 students at the beginning of the semester to make sure their accounts are setup properly, but sometimes late arrivals fall through the cracks.)
You may define your whole "public_html" folder as a site, or just define one folder, such as your "com326" folder, as a site -- if all the files your pages use, including CSS and javascript, are in that folder.
PERMISSIONS: A hidden benefit of using Dreamweaver's built-in file manager, but use with caution: You can set Web page "permissions" for a page from inside the file manager -- no need to login on the MyRU portal's "My Accounts" page. You can also accidentally remove YOUR ability to edit your pages. For major site updates, using the MyRU accounts page may be quicker and less prone to mistakes.
To set permissions from within Dreamweaver, you must be using the "file manager" feature. Right-click or ctrl-click on a file name in the "Remote Site" column of the file manager and scroll down to the "Set Permissons" item on the menu. The settings you want are "Read" for everyone and "Write" only for you. ("Execute" isn't necessary for text files, but is permissible for everyone.) This similar to setting file access permissions with the "chmod" command in unix. HOWEVER, be sure to set the permissions of all new files, including any .css or .js files. If using Dreamweaver with off-campus Internet-provider sites, Dreamweaver may be the preferred method for setting permissions. On campus, using the MyRU accounts page may be simpler.

Miscellaneous

Want to jump into an advanced topic? Try this article on designing with Dreamweaver and "apDIV" tags -- CSS absolute placement of DIVisions of your page-- instead of using templates or tables. CSS with drag-and-drop! Amazing!
Other ways to save on software: A simpler version of Photoshop, not included in the Creative Suite bundles, is available: Photoshop Elements, only $50 from discounters like Amazon. Combine that with the $149 education-priced Dreamweaver and you may have all the tools you need. Note: No free program has all the functions of Dreamweaver, but you can do a lot with KompoZer. See its features list. You also might want to explore the free GNU Image Manipulation Program, GIMP, which has many of the features of Photoshop. Both of these programs are maintained by volunteers and supported by donations, so you don't get as fancy or well-documented a system as you do from commercial programs. But if you are on a budget, they are worth a try!