Blog

CMairsCreate and Candyce Mairs blog about Adobe Dreamweaver, ColdFusion, Acrobat, Captivate, eLearning, Fireworks, Photoshop, Illustrator, InDesign, Livecycle Designer and all things web and mobile. Learn tips and tricks on a variety of web, PDF, and elearning in the posts below.

Creating CSS Styles Using Dreamweaver CC

Adobe Dreamweaver CC includes many changes to the Dreamweaver program and interface. The CSS Designer panel was introduced in Dreamweaver CC and offers a more visual approach to creating CSS rules within the program. This panel is very different from all previous versions of Dreamweaver, and this new panel is quite a change from the older CSS Styles panel.

You can use the shortcut Ctrl-Shift-Alt-P to go back to the old CSS Styles panel. This is a hidden shortcut that is not described anywhere within Dreamweaver CC. This shortcut toggles, so if you use it again, it will convert the CSS Styles panel back to the CSS Designer panel.

This Ctrl-Shift-Alt-P shortcut allows you to choose the panel that you prefer to use within Dreamweaver CC, so use the panel that you prefer to use.

Should I Use an HTML or PDF Form?

We all know that the only way to gather data from a user is via a form on the web. In the past a typical form was very boring due to the limitations of HTML. With the advent of new features within HTML5 and CSS3, it is much easier to create better looking forms that are much more user friendly.

HTML5 offers the ability to easily create required fields and control what is entered by the user into the form and CSS3 can make those forms look much nicer than every before. PDF forms are another alternative to HTML forms that should also be considered.

With the advent of Acrobat 8, PDF forms had the capability to be filled out and saved by anyone using the free Adobe Reader. Since that time, this capability has been expanded and a PDF form is a much nicer way to collect data from a user. Not all PDF forms are alike however, and Adobe offers 2 programs that allow you to create PDF forms. Both Adobe Acrobat and Adobe LiveCycle Designer offer PDF creation capabilities, but the 2 programs are very different in the type of PDF forms they create.

Acrobat 8, 9 and 10 installed LiveCycle Designer when Acrobat was installed, which most users were not aware of. LiveCycle Designer offers many PDF form capabilities that are not available in Acrobat including the ability to create multiple form fields and save them for reuse, Designer also allows you to create templates that include Master Pages so you can separate form field data from visual elements to simplify the creation process. You can create dynamic forms that change based on user actions using either FormCalc or JavaScript using LiveCycle Designer.

The data entered by the user is also different between the programs. Acrobat saves PDF form data as bit data, and LiveCycle Designer saves it as XML data which is easier to manipulate if you need to get the user data into other systems for storage.

Whether to use an HTML form or a PDF form is a decision that should be made based on the number of forms you need to create, how you want them to look, and if you want your forms to be easily created or printed. These capabilities should be considered before a decision is made on which type of form to use. Forms are the only way to collect user data, so be sure to consider a PDF form in addition to a standard web form. It may offer you more flexibility when storing and gathering the form data, and usually are more visually appealing for users.

PDFs are Editable in Acrobat XI

Did you know that Acrobat XI provides the ability to edit a PDF? Acrobat XI is a huge upgrade from Acrobat X because it offers the ability to edit content within a PDF, including the ability to move entire paragraphs of text. This new capability is an amazing thing, but it also brings up the fact that anyone with the program can now edit your PDF content very easily.

Be aware that your content is now able to be edited, so be sure to think about how or if you need to control this capability for your users. If so, be sure to use a password to restrict printing or changing your document before you distribute it.

The free Adobe Reader does not allow users to change content, so this is restricted to those who have Acrobat XI specifically. You now need to think about whether you should lock down editing even if you believe that only Adobe Reader users will be viewing your content. If there is any content you do not wish a user to change within a distributed PDF, you should be adding password security to your PDF documents.

Acrobat XI brings the capability to use PDFs in new ways due to the editing capability, but it should always be taken into account for every document you distribute as a PDF. I could not live without Acrobat in my daily life, but I always have to consider the PDF content and audience before I consider a PDF able to be distributed to others.

ColdFusion Builder vs ColdFusion Builder Express

What is the difference between ColdFusion Builder and ColdFusion Builder Express? ColdFusion Builder Express provides many of the features of the full version of ColdFusion Builder. Will it be enough for me?

Here is a listing of the differences between the Express and Full edition so you can decide for yourself thanks to ColdFusionism. The trial edition of ColdFusion Builder reverts to the Express version automatically once the trial period ends so you will not be left without an IDE for your ColdFusion applications.

Use this link from Adobe for a list of the features not available in the ColdFusion Builder 2 Express Edition.

Server Behaviors Panel in Dreamweaver CC

Looking for the server behaviors panel in Adobe Dreamweaver CC and can’t find it? Adobe has removed the server behaviors panel from the Creative Cloud version stating the code the panel created was not up to date. The server behaviors panel was included with a group of other panels for Dreamweaver that included the Database, Bindings, Server Behaviors and Components (ColdFusion specific) panels.

The removal of these panels has caused an uproar across the web since this was a very handy way to allow Dreamweaver to create the coding necessary for database-driven websites performing simple queries. You could insert, update or pull data from a database from or to a web page using these panels directly from within Dreamweaver.

The server behaviors panel still exists but you need to install it manually as an extension for Dreamweaver CC using the Extension Manager. The Extension Manager is a separate program automatically installed when you install Dreamweaver or any CC product. This program allows you to extend the capabilities of Adobe products including Dreamweaver, Fireworks, Illustrator, InDesign and others in the Creative Suite. Installing this extension gets you back in business building database driven websites and letting Dreamweaver do most of the work for you.

To install the panel, download the extension at the link below and double click it once downloaded. The Extension Manager will open and you agree to the license and the program does the rest.

If you want to get up to date with many other extensions, download the new Extension panel to easily browse and access other great extensions for Dreamweaver. This will get you using the server behavior panel within Dreamweaver CC once again. You can download the Adobe Exchange panel to get the server behavior panel for Dreamweaver CC and learn more about it at the link below.

Download the server behavior panel for Dreamweaver CC

Creating Responsive Images and Icons

I have been involved in an interesting discussion on how best to create responsive icons for a website. There are various methods available, and each of these has its pros and cons. What started the discussion was a post by Specky Boy Design showing an example of responsive icons using SVG images.

This example displays a method of using the CSS property of @media to pull in different images based on the screen size of the device. This allows the icons to display at an appropriate size for each device.

The pros of this method is that the browser automatically displays the correct icon sizing for the device, however you have to create all the various icons to display for each size. That becomes a lot of extra graphics work when building the website.

Another method is to use a single SVG image, which is a vector based graphic available in all modern browsers. Because an SVG image is vector based, it can scale without losing quality in the image. These images can be created using Adobe Illustrator.

You could also use CSS and the @media property to display a CSS sprite, and adjust the position of the image to show the correct icon for the screen size. Since icons are smaller images to begin with, using a sprite makes sense provided the download time is small for the sprite image.

Adobe just introduced a new JavaScript framework called Snap.svg which allows you to work with SVG images and JavaScript to accomplish a variety of image features. Check out Snap at http://snapsvg.io/.

What method is the best method for you to use? You have to weigh the various options that are available, and more and more methods for accomplishing the same task are being created everyday.

Web designers have a more difficult job in the modern web. You have to focus on the website audience and each specific website’s needs in order to determine the best method for that site design. More and more methods are being introduced weekly, and it is the web designers job to stay on top of the various methods available. You can no longer create every website in the same way as the previous one you created.

Adobe ColdFusion Training Course – Educator.com

Start building dynamic database-driven websites using Adobe ColdFusion in this video trianing course by Candyce Mairs! Educator.com now offers a way to get started using ColdFusion, a server-side language that can connect to a database. What makes ColdFusion unique is its ability to work with any web server and any database. If you know HTML and CSS, this is the next step to creating websites that work with any type of system.

ColdFusion comes complete with a web server, database and application server built into the software. Learn how to use those systems to understand the basic concepts for any database driven website. ColdFusion requires less coding than any other server-side language, which also means less time correcting issues on your web pages.

Let Adobe Certified Instructor Candyce Mairs show you how easy it is to pull data from a database and build a dynamic website. Learn the basics of Adobe ColdFusion in this video training course now!

View free lessons and more

Get Photoshop Designs Converted into Code the Easy Way!

This video course at Educator.com teaches you how to convert Photoshop PSD files into HTML and CSS web pages. Anyone who uses Adobe Photoshop to create web designs can benefit from this course by Candyce Mairs! This course teaches you how to expand your graphic design skills beyond Photoshop and into web pages.

Learn the concepts of CSS positioning and page layout working in a program you are familiar with. Learn how to set up your designs within Photoshop and get those designs into code the easy way. Become familiar with how a browser understands your design layouts before you move them into code to make the transition an easy process.

Adobe Certified Instructor & Expert Candyce Mairs will walk you through the transition process and get you working on the web in no time!

View Free Lessons and Learn More

ColdFusion Development is Free!

Did you know you can develop ColdFusion applications completely free? Adobe offers a developer edition of ColdFusion, which includes the ColdFusion server, an Apache Tomcat web server, an Apache Derby database and CFML (ColdFusion Markup Langauge) completely free for developers. The developer edition is completely free, contains everything you need to develop ColdFusion applications, and never expires. Download ColdFusion 10 and get working in ColdFusion using your favorite IDE.

Adobe has 2 different software options for developing ColdFusion pages. You can use Dreamweaver which is included in Creative Suite or a Creative Cloud subcription, or you can use the product developed by Adobe specifically for ColdFusion called ColdFusion Builder. Download a trial version of ColdFusion Builder and get started. Once the trial version expires, the program will become ColdFusion Builder Express which offers most features needed for ColdFusion Development. Get working in ColdFusion using ColdFusion Builder now!

Adobe Dreamweaver CC Video Course Now Available!

This new Adobe Dreamweaver CC video course at Educator.com will get you building websites in no time! Learn to build websites the easy way from Adobe Certified Instructor Candyce Mairs. Educator.com offers a unique interface for learning unlike any other video training. Follow along as if you are in the classroom and get those websites built.

This new 22+ hour video course gets you familiar with Dreamweaver for those new to the program, and goes beyond the basics adding additional features that extend the program. Learn how to work with the new CSS Designer, HTML5, CSS3, and the built-in layouts within the program. Learn how to add JavaScript features such as slideshows using jQuery and become familiar with jQuery Mobile.

Candyce Mairs – Adobe Certified Instructor