Adobe Dreamweaver CS5 . September 2010 . Vol. 16 No. 9

Cyber News and Reviews is a monthly column published for parents, teachers & business owners featuring kids educational software reviews, business software reviews (small business & home business), games and entertainment articles, a free resource since 1995.

August 2010 --Adobe Photoshop CS5 Extended, InDesign CS5 and Adobe InCopy CS5


Adobe Dreamweaver CS5 and Microsoft Office Professional 2010

By Howard Berenbon

Adobe Dreamweaver CS5

Dreamweaver CS5 is the newest incarnation of the most popular and versatile Website production design program from Adobe Systems Inc. targeting the professional Website designer. Although our review in March 2009 revealed a whole new set of improvements and enhancements from Dreamweaver CS3 to CS4, Adobe again steps up with more new features and enhancements.

A Little History

Macromedia, Inc. developed Dreamweaver and released version 1.0 in December 1997.  By September 2005, version 8.0 was released, and Macromedia, Inc. was acquired by Adobe Systems, Inc. I first reviewed Dreamweaver in February 2004 when it was part of Macromedia Studio MX, and it’s just been improving by leaps with every new release.

Using Dreamweaver

Dreamweaver has been used for years by professional Website designers who can hand code sites without an editor, but prefer Dreamweaver because it speeds up the process. Beginning or intermediate designers benefit because it will help you design professional looking sites with all the necessary features, very quickly, without the knowledge of HTML coding.  If you want to modify the raw HTML, or for some applications you may need to modify the code, it’s easy to access by entering into CODE VIEW, or SPLIT VIEW.

Because Dreamweaver is more graphics oriented, it’s not as easy to use as some of those design programs offering various templates with navigation structure already built.  However, once you get cozy with Dreamweaver and its functions (which may require a few books or some free online learning—try Adobe TV for some excellent video tutorials), your design will look and function much better than any competing Website design program. Dreamweaver uses memory efficient coding (unlike some of the editors), so your pages will load faster for your visitors.   In the most recent versions, with the support of CSS (cascading style sheets) layouts 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 been mainly replaced with cascading style sheets for formatting. When these style sheets are set up as separate .ccs pages on your server, and called from your Web pages for formatting, they can allow for some instant global changes. So, if you want to make quick color changes, or modify column widths, you just edit one or two style sheets.

Adobe Dreamweaver CS5 New and Enhanced Features

Integrated CMS support new

Enjoy authoring and testing support for content management system frameworks like WordPress, Joomla!, and Drupal.

Experiment with HTML5

Follow along as Principal Scientist Jorge Taylor demonstrates how the Dreamweaver CS5 HTML5 Extension Pack provides more creative options to Adobe Creative Suite 5 users.

Dynamically Related Files Feature

Helps you access files and update pages faster and simplify management tasks for complex sites.

Integration with Adobe BrowserLab new

Preview dynamic web pages and local content with multiple viewing, diagnostic, and comparison tools.

PHP custom class code hinting new

Display proper syntax for custom PHP functions to help you write code more accurately.

Integration with Business Catalyst new

Leverage integration between Dreamweaver and the Adobe Business Catalyst® service (available separately) to build and host everything

Maintain consistency across media

Insert any native Adobe Photoshop® or Illustrator file® into Dreamweaver, all part of Creative Suite 5 Web Premium, to create a Smart Object. Keep up with evolving web trends such as HTML5 and CSS3.

Subversion support enhanced

Manage site files more effectively in collaborative, version-controlled environments with enhanced support for Subversion® software.

Site-specific code hinting new

Benefit from code hinting on nonstandard files and directories in Dreamweaver.

Simple site setup enhanced

Set up websites faster than ever, even with multiple servers for staged or networked sites.

CSS inspection new

Visually display the CSS box model in detail and easily toggle CSS properties on and off without reading code or needing to use a separate utility.

CSS starter pages enhanced

Jump-start your standards-based website design with updated and simplified CSS Starter Layouts.

Comprehensive CSS support enhanced

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.

Adobe Creative Suite integration enhanced

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.*

Integrate FLV content enhanced

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.

Extended Dreamweaver community enhanced

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.

Installation

After installing the program from the included DVD (or DVDs if part of a suite), get ready to get creative. The main screen looks like the other programs in the collection with access to all the working menus including File, Edit, View, Insert, Modify, Format, Commands, Site, Window and Help.  Below that, the screen is split into five areas where you can Open a Recent Item, Create a New page in various formats including HTML, ColdFusion, PHP, ASP VBScript, XSLT, CSS, JavaScript, Dreamweaver Site and more.  To the right of Create New you can access their Top Featured videos (new to CS5) with CSS Inspect Mode, CSS Enable/Disable Mode, Dynamically-Related Files, Live View Navigation, Browser Lab Integration and a MORE menu button. If you click on MORE, it takes you to Adobe TV where you can view their featured Dreamweaver episodes, or browse all their Dreamweaver video tutorials and jump right into some serious learning. Below the featured videos you can click on Adobe® CS Live online services for more about their online services. For anyone new to Dreamweaver, some very important navigation buttons allow instant access to help at Adobe.com including Getting Started, Resources, New Features and Dreamweaver Exchange. Clicking on “Getting Started” can get you started at the Dreamweaver Developer Center for suggested tutorials, some sample sites, access to Downloads and the Adobe community. Some of the titles include Create Your First Website, Getting started with Dreamweaver CS5, Build Your First Dynamic Website and Working with Dreamweaver CS5.

Designing a Site

Before you begin your Website design, you’ll want to take some time for planning, and get your ideas in order.  First, make an outline of your site structure with names of navigation buttons to link to the pages in your site, a rough idea of what text and graphics you’ll place on each page, and then start creating.  If you’ve missed a page or two, you can easily add new pages later, or quickly delete the ones you don’t need. You’ll find Website publishing has much more flexibility than any other media, and with Adobe Dreamweaver CS5, it’s easy to update your pages daily, or even hourly.

Here are a few simple steps to help you build that first Website with Dreamweaver.  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 start your design without a template, you’ll have to design and build your site one page at a time.  But, if you like what you’ve designed, you can make the design into a template.  Dreamweaver offers lots of design flexibility but you just have to know what you’re doing.  For graphics navigation buttons, you can use Fireworks, or to conserve on memory and speed page loading, you can use text navigation buttons. In fact, I found some great, free, stylish CCS designs at Listomatic that you can easily modify to your page requirements.  And it’s easy to change the size, shape, font and colors by making changes to your style sheet.

Designing a simple site isn’t that difficult, even from scratch.  Click on New Document, click HTML page at the top of the list and select Layout <none>.  Then layout your page using CSS Div Tags, or Table Objects to create areas for your text and graphics.  Once you have your design, 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.  You can also select any of the layouts with the 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 text for your links to the pages within your site, you can start adding pages until your site is complete.  Next, you’ll add content, like text, graphics, forms, tables, charts, databases, Flash video, animation, audio and more.  When you’re ready, you’ll upload your design, graphic by graphic and page by page using the Put command under the File Management menu in Dreamweaver.

To begin your design, you’ll probably want to start with your home page, or index.html and build from there.  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.  Add your logo and company name to the top of your index.html page, and then build your graphics navigation buttons using Fireworks, or use the pre-designed Listomatic text buttons. 

Although you have all the necessary tools to design any type of Web site, Dreamweaver CS5 is not really for the beginner. You may 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 more experience (the Adobe tutorials can help).  If this an important business project, you may even have to hire s professional Website designer to get it going, and then you can take it over to make future changes. It’s a powerful program, but using the power can require experience.

Adobe Dreamweaver CS5

Adobe Dreamweaver CS5 sells for $399 (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 and a DVD-ROM drive. It will also run in the Apple Mac OS X v10.5.7 or v10.6, Multicore Intel processor with 512 MB RAM, 1.8 GB available disk space and a DVD-ROM drive. For more information, or to order, visit Amazon.com.

Microsoft Office Professional 2010 with Word 2010, Excel 2010, PowerPoint 2010, Publisher 2010, Outlook 2010, Access 2010 and OneNote 2010

By Howard Berenbon

Microsoft Office 2010 is the newest edition of one of the most widely used business suites for the PC.  It’s just about all the applications you’ll need to make your office “sing” including Word 2010, for almost any type of document, simple or graphical, Excel spreadsheet to record, manipulate and analyze data, PowerPoint for that perfect graphical presentation and Outlook, for Internet e-mail communication with calendar, contacts, time management, Access for business data management and more.  Over the years, various incarnations of Microsoft office applications have become a mainstay for any business, small or corporate, in this age of personal computers.  It’s hard to imagine using a mechanical typewriter to create documents and presentations, but before Microsoft and other early word processors, that was it.   Now, you wouldn’t think of running a business without a personal computer.

I originally reviewed Microsoft Office Professional 2007 in July of 2009 (we reviewed Office 2000 in April 2001), with their controversial and bold new re-design using The Ribbon interface with Tabs to access commands, which I found very easy to use, but different from what I was used to in their earlier office products. Now, the new Office 2010 looks and feels a lot like Office 2007, but with lots of improvements and a correction or two. 

Click to continue Microsoft Office Professional 2010

Software Companies Mentioned

Adobe Systems Incorporated
345 Park Ave
San Jose, CA 95110-2704
URL: www.adobe.com
800-833-6687

Microsoft Corporation
One Microsoft Way
Redmond, WA 98052
Phone: 1-206-882-8080
URL office.microsoft.com