Welcome to Dreamweaver
Dreamweaver is a hybrid WYSIWYG (What You See Is What You Get) and code-based web design and development application; a visual web editor. Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it possible for non-coders to create web pages and sites. from wikipedia
Perhaps the most daunting feature of Dreamweaver, when you first start working with it, is its interface, it contains many features. We will work with a few of its features, so don't panic. We'll focus on the Toolbars, the Insert panel, the Property inspector and a few of the floating panels. We will not dig too deeply into the interface but still it is a good idea to view the tutorials below to get a sense of the Dreamweaver interface. We'll walk through this in class. Dreamweaver CS4 is closely integrated with other Adobe products, particularly Photoshop, Fireworks, and Flash. Our focus will be how these applications can work together in a single workflow.
Like Fireworks Dreamweaver can be used as a prototyping environment. If your interested in web application development take a look at Device Central CS4
Dreamweaver Tutorials
Go through the following tutorials before we begin working with Dreamweaver in class.
Getting started understanding Dreamweaver
- Introducing Dreamweaver CS4 [6:36]
- Become familiar with the workspace and creating new documents. See how you can style text using CSS, preview and edit files, and manage files.
- Getting Started: 01 What is Dreamweaver? [4:54]
- Get an overview of what Dreamweaver can do. Create web pages, structure and declare text, and place images on the page. Use CSS to format a web page.
- Getting Started: 02 Defining Sites [6:16]
- Plan websites for optimal layout and organization. Define a site from multiple locations. Use the Site Definition interface to connect to a server.
- Getting Started: 03 Rapidly Building Layouts [4:32]
- Design pages using Dreamweaver's prebuilt starter pages. Choose between one-, two-, and three-column layouts. Add headers, footers, and sidebars
- Getting Started: 04 Adding Text and Images [5:05]
- Personalize a website with custom text and images. Add assets using multiple workflows. Integrate Word, Excel, and Dreamweaver.
- Getting Stared: 05 Styling Text [6:11]
- Use CSS rules to style web pages. Write contextual or descendant selectors to change the size, color, and font of text. Duplicate rules for subheadings.
a little more on using Dreamweaver...
- Using Starter Layouts - part 1 [13:21]
- Greg Rewis builds on this Adobe Dreamweaver CS4 tutorial by teaching you how to convert Photoshop files into standards-based HTML webpages.
- Using Starter Layouts - part 2 [11:57]
- Greg Rewis continues showing you how to convert a Photoshop layout and starter CSS framework into a finished website.
- Using Starter Layouts - part 3 [10:18]
- Learn how to balance the look of a multicolumn website using a technique called faux background. Greg Rewis walks you through the process in this Dreamweaver CS4 Tutorial.
- Dreamlab Dreamweaver CS4 Episode list. 6 episodes [various]
- Javascript, Code Navigator, Dtataset Wizard, Web Widgets, Live Preview, Related Files.
- Send me any good tutorials for Adobe Dreamweaver you find useful.
Dreamweaver Help
The online help guide for all of the Adobe applications we will use this semester is always available from within the specific application under the "Help" menu.
Additionally, most applications in the CS4 package load a "Start page" - in Dreamweaver CS4 called the "Welcome Screen" - when you first launch the application. This screen contains links such as "Getting Started", "New Features, "Resources", and "Dreamweaver Exchange". Do a little poking and prowling to investigate the areas available for the Welcome Screen.
"When you start Dreamweaver without opening a document, the Dreamweaver Welcome Screen appears in the work environment. This screen gives you quick access to Dreamweaver tutorials, recent files, new templates, and Dreamweaver Exchange, where you can add new capabilities to some Dreamweaver features. To disable the start page, click Don't Show Again when the Start page opens." You will receive an alert box explaining how to turn the Welcome Screen on again.
To turn the Welcome Screen on again, check "Show Welcome Screen" from the General category in the Dreamweaver Preferences.
The direct link to Adobe Help on the Web for Dreamweaver CS4 is: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/index.html?trackingid=DYNPV
Dreamweaver Terms & Features
SPRY: SPRY is an AJAX framework. For example, many frameworks provide libraries for database access, templating frameworks and session management, and they often promote code reuse. What all that means for us is that the AJAX framework in Dreamweaver has a series of pre-defined functions and abilities that you can add to your web sites with a single click. For example a drop menu, etc.
File Management: Dreamweaver understands your web site, both the local (stored on your local machine) version that you work on during development and the version that lives on your web server (the remote version). Dreamweaver file management abilities save you time in testing and helps rapid and consistent updating across your web site. Read more about Creating and Managing Files online.
DW Extensions: Dreamweaver Extension do just that, extend Dreamweaver's ability. They are small code packages that allow you to add functionalities to Dreamweaver. For example, there is a jQuery extension that adds Twitter capabilities to a website. There are dozens available. Read more about Dreamweaver Exchange Home
DW Widgets. Widgets are small applications that do one thing. For example there is a Dreamweaver widget for Nokia WRT phones, another, Lightbox Gallery for displaying images sets. Read more about Dreamweaver Widgets at Dreamweaver Widgets Home
Workflow: A workflow consists of a sequence of connected steps. The modern history of workflows can be traced to F. W. Taylor and H. Gantt. Together they launched the study of the deliberate, rational organization of work in the context of manufacturing. Today the term ia applied to any organized sequence of activities leading to the desired result. A sample workflow starting with Fireworks, and using Dreamweaver, Creating simple interactive content using Fireworks, Flash, and Dreamweaver [a step-by-step guide]
