ADOBE DREAMWEAVER CS4ADOBE DREAMWEAVER CS4Creative SuiteCreative Suite

Dr. Joseph OttoDr. Joseph Otto

Professor, Information Systems, Professor, Information Systems,

California State University, Los AngelesCalifornia State University, Los Angeles

Build world-class websitesBuild world-class websites and applications - and applications - Adobe® Dreamweaver® Adobe® Dreamweaver® CS4 - web CS4 - web designers, web developers, designers, web developers, and visual designers.and visual designers.

Intuitive, yet powerful Intuitive, yet powerful tool to design and put up tool to design and put up

your ownyour own websiteswebsites Easy to insert any sort Easy to insert any sort

of element, whether an of element, whether an image, a Flash file or a image, a Flash file or a

piece of audiopiece of audio

Ultimate toolkit for crafting precise page Ultimate toolkit for crafting precise page layouts, creating stunning images and layouts, creating stunning images and graphics, developing eye-catching web graphics, developing eye-catching web pages and rich interactive experiences, pages and rich interactive experiences, and producing them all with utmost fidelity.and producing them all with utmost fidelity.

Create eye-catching vector graphics in Adobe® Illustrator® Create eye-catching vector graphics in Adobe® Illustrator® CS4 and powerful digital images in Adobe Photoshop® CS4 and powerful digital images in Adobe Photoshop® CS4 Extended. Deliver imaginative combinations of CS4 Extended. Deliver imaginative combinations of graphics and images in many media.graphics and images in many media.

Design for print, web, and Design for print, web, and mobile devices in a powerful, mobile devices in a powerful, integrated, and comprehensive integrated, and comprehensive creative environment. creative environment.

Innovative services for Innovative services for collaborating, finding inspiration, collaborating, finding inspiration, and mastering your design tools – share your screen to and mastering your design tools – share your screen to present, review, or brainstorm directly from within. present, review, or brainstorm directly from within. Showcase your work in a dynamic, customizable PDF Showcase your work in a dynamic, customizable PDF Portfolio that is easy to distribute and view; InContext Portfolio that is easy to distribute and view; InContext editing online service – end users can edit without your editing online service – end users can edit without your help or additional software.help or additional software.

Common interface elements – multiple documents in a Common interface elements – multiple documents in a single window – compare content, drag-copy single window – compare content, drag-copy between.between.

Software – Adobe FamilySoftware – Adobe Family

– Adobe Fireworks® CS4 - prototype websites by Adobe Fireworks® CS4 - prototype websites by importing CSS layoutsimporting CSS layouts

– Adobe InDesign® CS4 to create short and long Adobe InDesign® CS4 to create short and long documents for print or digital delivery – breaks down the documents for print or digital delivery – breaks down the barrier between online and offline printingbarrier between online and offline printing

– Adobe Flash® CS4 Professional to build engaging Adobe Flash® CS4 Professional to build engaging interactive experiences.interactive experiences.

Design your web pages under real-world browser Design your web pages under real-world browser conditions — while still retaining direct access to the code. conditions — while still retaining direct access to the code. Changes to the code are instantly reflected in the rendered Changes to the code are instantly reflected in the rendered display.display.

Support for the latest web technologies — HTML, XHTML, Support for the latest web technologies — HTML, XHTML, CSS, XML, JavaScript, multiple Ajax frameworks, CSS, XML, JavaScript, multiple Ajax frameworks, PHP, ColdFusion®, and ASP — Mac OS and PHP, ColdFusion®, and ASP — Mac OS and Windows®Windows® platforms. platforms.

Dreamweaver CS4 has incorporated support for the following Dreamweaver CS4 has incorporated support for the following technologies:technologies:

– PhotoshopPhotoshop® — Drag and drop PSD files directly onto your page and ® — Drag and drop PSD files directly onto your page and maintain a live link between the source PSD file and the optimized maintain a live link between the source PSD file and the optimized image.image.

– FlashFlash — Enjoy enhanced embedding of SWF and FLV files with — Enjoy enhanced embedding of SWF and FLV files with Dreamweaver CS4.Dreamweaver CS4.

– FireworksFireworks — Import CSS layouts created using Fireworks directly into — Import CSS layouts created using Fireworks directly into Dreamweaver.Dreamweaver.

– Ajax frameworksAjax frameworks — Put the extended coding functionality of — Put the extended coding functionality of Dreamweaver CS4 to work by incorporating popular JavaScript Dreamweaver CS4 to work by incorporating popular JavaScript frameworks, including jQuery, Prototype, and Spry.frameworks, including jQuery, Prototype, and Spry.

– Version control systemsVersion control systems — Update your site and check in modifications — Update your site and check in modifications using a repository within Dreamweaver.using a repository within Dreamweaver.

– Server models Server models — Design and code in a tool that supports most of the — Design and code in a tool that supports most of the leading web development technologies, including PHP, ColdFusion, and leading web development technologies, including PHP, ColdFusion, and ASP.ASP.

Database managementDatabase management Dynamic lists and forms for website administrationDynamic lists and forms for website administration Make sure your site is up to date by using dynamic lists and forms. Make sure your site is up to date by using dynamic lists and forms.

Insert, update, and delete content or manage business logic from a Insert, update, and delete content or manage business logic from a single page. Use search and sorting capabilities to easily manage a single page. Use search and sorting capabilities to easily manage a large number of records. large number of records.

Upload files and images – object orientedUpload files and images – object oriented Build image galleries and file management systems, and use Build image galleries and file management systems, and use

database tables to store and manage filenames and locations. database tables to store and manage filenames and locations. Resize pictures to fit your page design, create and display Resize pictures to fit your page design, create and display thumbnails, or limit the image size.thumbnails, or limit the image size.

Manage database information in your browserManage database information in your browser Manage database content by using dynamic HTML lists and forms. Manage database content by using dynamic HTML lists and forms.

Insert, update, and delete content or manage business logic directly Insert, update, and delete content or manage business logic directly from the web browser. Benefit from advanced form validation and from the web browser. Benefit from advanced form validation and error-handling capabilities to ensure data integrity is error-handling capabilities to ensure data integrity is preserved.preserved.

Client-side form validationClient-side form validation

– Validate user input directly in the browser and avoid page Validate user input directly in the browser and avoid page reloading to see if the data is correct. The JavaScript form reloading to see if the data is correct. The JavaScript form validation is backed up by a complex server-side validation validation is backed up by a complex server-side validation module that helps prevent incorrect information from being module that helps prevent incorrect information from being saved or entered.saved or entered.

Fresh interfaces and CSS customizable skinsFresh interfaces and CSS customizable skins

– Adobe Dreamweaver Developer Toolbox offers revolutionary Adobe Dreamweaver Developer Toolbox offers revolutionary skin support that blends right in with the look and feel of your skin support that blends right in with the look and feel of your website. Changing the skin of your dynamic lists and forms website. Changing the skin of your dynamic lists and forms is performed in a single move from a centralized interface is performed in a single move from a centralized interface and takes effect in all your pages.and takes effect in all your pages.

–Hide details of HTML – non-coders – create Hide details of HTML – non-coders – create web pages and sitesweb pages and sites

–Disadvantage – file size can be larger than if Disadvantage – file size can be larger than if hand-coded – table-based layout – convert to hand-coded – table-based layout – convert to layers/containerslayers/containers

–Sometimes does not comply with W3C Sometimes does not comply with W3C standards but better with later versionsstandards but better with later versions

–Can preview in many browsers as long as Can preview in many browsers as long as installed on their computers: Explorer - 72%, installed on their computers: Explorer - 72%, Opera - .71%, Firefox - 19.48%, Safari - 6.39%, Opera - .71%, Firefox - 19.48%, Safari - 6.39%, Netscape - .68%, Chrome - .26%, Mozilla Netscape - .68%, Chrome - .26%, Mozilla - .09%, Lynx - non-graphical- .09%, Lynx - non-graphical

–Can use extensions – add functionalityCan use extensions – add functionality

–Insert elements – image, Flash file, audio, etc.; Insert elements – image, Flash file, audio, etc.; moved around or sized very easilymoved around or sized very easily

–CSS – more templates, comments to explain CSS – more templates, comments to explain how it works and how to use it - how it works and how to use it - www.csszengarden.comwww.csszengarden.com

–Wizards for everything – form generation, Wizards for everything – form generation, remembers interface information – prefilled; remembers interface information – prefilled; widgets, custom masks, cascading menus, widgets, custom masks, cascading menus, editable drop-down menus, etc. - best possible editable drop-down menus, etc. - best possible user experienceuser experience

Questions???Questions???