Adobe® Dreamweaver CS5.5 Website Design Program
By Howard Berenbon
Dreamweaver has had many incarnations beginning with its development in 1997 by Macromedia, Inc. with version 1.0. By September 2005, version 8.0 was released, and Macromedia, Inc. was acquired by Adobe Systems, Inc. Last year they introduced their better than ever version CS5, and now just 6 months plus later, they are offering their new and improved version CS5.5. Adobe just can’t stop making improvements, well, because some are requested by users and others just evolve as they improve their Web design engine. So, now we are at the cross roads of CS5 to CS5.5 and so get ready for more really nice new features.
About Dreamweaver
Dreamweaver has evolved into the best and most widely used Website design program available. Professional designers use it because you can develop your Web-based projects with ease, and you can build them fast with their pre-designed functions. It also offers the beginning or intermediate designer the ability to develop a full-featured site very quickly, without the knowledge of HTML coding. If you want to modify the raw HTML, or for some applications you will need to change or add code in their code view, it’s there for you.
Dreamweaver uses memory-efficient coding so your pages will load faster for your visitors. In the more recent versions, with the support of CSS layouts (cascading style sheets) and JavaScript programming, designers have more control over the look of their pages. For example, tables previously popular for building page structure (columns with content) have, for the most part, been replaced with cascading style sheets for formatting. These CSS style sheets can allow for instant global changes to your pages including color, font and page structure. You just modify a section or two in your style sheet (or sheets) and those changes will go into effect for all the pages using that style sheet. Another unique use of CSS is to build 3-D graphics quality navigation buttons using unordered lists (bullets). They look and act like graphics buttons with rollover effects and more, but they’re just text based lists formatted with a style sheet, and use a lot less memory (see Listomatic for some very creative designs, offered by some very creative designers).
Adobe Dreamweaver CS5.5 New and Enhanced Features
Dreamweaver is now more versatile than ever before covering desktop computers, smartphones, tablets, and other mobile devices. Also includes support for the new CSS3 and HTML5 formats.
CSS3/HTML5 support
Style with the CSS panel, updated to support CSS3. Design view now supports media queries, applying different styles as you adjust screen dimensions. Code for the future with HTML5, with code hinting and Design view rendering support. Live View now includes support for <video> (with QuickTime) and <svg> tags.
jQuery Mobile integration
Add advanced interactivity with jQuery code hinting. jQuery is the industry-standard JavaScript library, making it simple to add a wide range of interactivity to web pages. Get a jump start with starter templates for mobile phones.
Native Android and iOS apps with PhoneGap
Build and package native apps for Android™ and iOS with new PhoneGap functionality. Convert your existing HTML to a mobile phone application within Dreamweaver using the open source PhoneGap framework.
Adobe BrowserLab integration
Preview dynamic web pages and local content with multiple viewing, diagnostic, and comparison tools. Dreamweaver integrates with Adobe BrowserLab, an Adobe CS Live online service that accurately tests web content across browsers and operating systems.
Design for many different types of mobile devices
Use the Multiscreen Preview panel in Adobe® Dreamweaver® CS5.5 software to simultaneously design for phones, tablets, and computers. Use media queries to write and render separate styles for each device.
Multiscreen Preview panel
Design for smartphones, tablets, and personal computers with the Multiscreen Preview panel. With media query support, developers can style and visualize rendering for a range of devices in a single panel.
Cutting-edge Live View rendering
Check your page with Live View, now with an updated WebKit rendering engine. Preview designs for multiple devices with real-time media query support. HTML5 and CSS3 capabilities and enhancements make designing for mobile devices even more efficient.
Integrated CMS support
Enjoy authoring and testing support for content management system (CMS) frameworks like WordPress, Joomla!, and Drupal. The Dynamically Related Files feature provides direct access to a page's related files, even for dynamic pages, and Live View Navigation offers accurate previews of dynamic applications.
FTPS, FTPeS support
Deploy files more securely with enhanced FTP support. Dreamweaver CS5.5 now adds native support for the FTPS and FTPeS protocols.
Site-specific code hinting
Benefit from code hinting on nonstandard files and directories in Dreamweaver CS5.5, enabling enhanced hinting support for third-party PHP libraries and CMS frameworks such as WordPress, Drupal, and Joomla!.
Adobe Creative Suite integration
Save time and reduce the number of steps required to complete projects with intelligent integration across Adobe Flash® Professional, Fireworks®, Photoshop® Extended, and Adobe CS Live online services.
Adobe Business Catalyst integration
Take your sites live with Adobe Business Catalyst®, the all-in-one hosting platform that works hand in hand with Dreamweaver. Build everything from amazing websites to powerful online stores, with no need for back-end coding
Extended Dreamweaver community
Learn and share with an extensive Dreamweaver community. Benefit from the online Adobe Design Center and Adobe Developer Connection, training and seminars, developer certification programs, and user forums.
Support for leading technologies
Design and develop in an environment that supports most leading web development technologies, including HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, Adobe ColdFusion® software, and ASP.
Work on the cutting edge
Accurately test your web pages across browsers and operating systems thanks to integration with Adobe BrowserLab.1,2 Deliver clean code with integrated World Wide Web Consortium (W3C) live validation.
W3C validation
Use the W3C's own online validation service to ensure the accuracy of your standards-based web designs.
Subversion support
Store your files more securely with support for Subversion® software, which has been updated to the version 1.7 protocol.
CSS inspection
Visually display the CSS box model in detail and easily toggle CSS properties without reading code or needing to use a separate utility.
Intelligent coding assistance
Write clean code with confidence. Take advantage of code hinting with HTML, JavaScript, and Ajax frameworks such as Spry, jQuery, and Prototype. Get direct insight into core PHP functions with dynamic PHP code hinting.
PHP custom class code hinting
Build and maintain PHP applications and get direct insight into core functions, methods, and objects with dynamic PHP code hinting.
Simple site setup
Set up a site with ease using the retooled Dreamweaver Site Definition dialog box. Add multiple servers with custom names to utilize staged, networked, or other site types.
CSS starter pages
Jump-start your standards-based website design with updated and simplified CSS Starter Layouts. You can now choose from a wider selection of templates that incorporate CSS best practices and easy-to-understand selectors and rules.
Comprehensive CSS support
Design and develop websites with powerful CSS tools. Visually display the CSS box model without requiring separate utilities, and reduce the need to manually edit CSS code — even in external style sheets.
Integrated FLV content
Add FLV files to any web page with point-and-click ease and standards-compliant coding. Preview your movies with FLV playback capabilities in Live View.
Subversion support
Store your files more securely with support for Subversion® software, which has been updated to the version 1.7 protocol.
CSS inspection
Visually display the CSS box model in detail and easily toggle CSS properties without reading code or needing to use a separate utility.
Designing a Site
Before firing up Dreamweaver, you’ll need to outline your site structure beginning with the names of navigation buttons linked other pages in your site, a rough idea of what text and graphics you’ll place on each page. The most import information should be on your home page and then the links will offer other information your visitors will need for more details. If you missed a page or two, you can easily add new ones later. Website publishing has much more flexibility than any other media, and with Adobe Dreamweaver CS5.5, it’s easy to update your pages daily, or even hourly.
Here are a few simple steps to help you build your first Website. Start by selecting, Create New HTML Web site, and a blank page will appear in the left half of your screen, called the Stage. You now have the option of viewing the HTML code, or just design without knowing the code, in Design view. There’s also a split screen view so you can see both the Design and the HTML code at the same time, Live Code and Live View is next, plus the new Inspect button. To the right of the Stage you’ll see the Panel Groups and some new panes for Adobe Browser Lab (part of CS Live online services) and Business Catalyst (helps build and host your sites). You can start building your site from scratch, or get some assistance using one of the several pre-designed page forms or templates (2 or 3 columns, elastic or fixed, with or without footers and headers) and a corresponding CSS style sheet for formatting. If you want all your pages to have some of the same content, you can start by building a template, so when you make changes to that page, those changes will appear on all pages that are built with the template. You can also start by building a standard page, and make that into a template. For navigation, I’d use one of the CSS-based unordered lists designs from Listomatic mentioned above. It’s easy to modify their size, shape and color by changing the appropriate data in your style sheet. Dreamweaver offers lots of flexibility but you may need study a few tutorials (video or written) to get up to speed.
Once you run through a few of Adobe’s free online video tutorials from Adobe TV, designing a simple site will be a snap. Click on New Document, click HTML page at the top of the list and select Layout <none>. Then build your page using CSS Div Tags, or Table Objects to create areas for your text and graphics and save it as your Home page named “index.htm”. Once you complete your layout, you can save it as a template and use it throughout your site. For example, a horizontal Table, or Div Tag Element, across the top of the page will hold your logo and a vertical Table or Div Tag, on the left border can be spot for your navigation buttons. Add a Div Tag Element or Table at the bottom of your page for your footer with name and address, and a second navigation structure. A quicker way to start your design is to select any of pre-designed layouts with columns, footer and header already defined. So, of you want a 3 column design with header and footer, pick the “3 column liquid, header and footer” layout. Now, add Tables or Div Tags in between for graphics, text boxes or even Flash animations. Once you have your navigation structure, with links to the pages within your site, add your content in the form of text, graphics, forms, tables, charts, databases, Flash video, animation, audio and more. Each object, whether text or graphics, or a form, etc., will have its properties available and listed in a box below the Stage (your page work area). To see each object’s properties, click on the object and all relevant data will appear including its name, size, font and position. When you’re ready, you’ll upload your completed design, graphic by graphic and page by page using the Put command under the File Management menu in Dreamweaver.
Dreamweaver CS5.5 includes all necessary tools to complete your design, but it’s not really for the beginner. You might be able to build a simple site with a navigation structure, text content and your logo on every page, but if you have a more complex design in mind, like Flash movies, interactive applications, fancy animation with sound, or a database to collect customer data, then you’ll need some help. If this an important business project, you might want to hire a professional to build the structure that you can later modify when you’re up to speed. Dreamweaver is a powerful program, but using the power can require experience.
Adobe Dreamweaver CS5.5 sells for $363 (upgrade is $199) and will run on any multimedia PC, Intel Pentium 4 or AMD Athlon 64 processor, 512 RAM, 1 GB available disk space with Windows 7, XP/Vista/Enterprise, 1280x800 display and a DVD-ROM drive. It will also run in the Apple Mac OS X v10.5.8 or v10.6, Multicore Intel processor with 512 MB RAM, 1.8 GB available disk space, 1280x800 display and a DVD-ROM drive. For more information, or to order, visit Amazon.com.
Software Companies Mentioned
Adobe Systems Incorporated
345 Park Ave
San Jose, CA 95110-2704
URL: www.adobe.com
800-833-6687
