Posts in Category "General"

Dreamweaver CC: Your all-in-one tool for creating, publishing, and managing websites and mobile content

Posted on June 18, 2013 by Tareq Aljaber | Comments (0)

We are pleased to announce the release of a modernized and streamlined Dreamweaver. Dreamweaver CC is the all-in-one visual tool to efficiently and intuitively create, publish and manage websites and mobile content.

New in Dreamweaver CC:
Create immersive web experiences with the new CSS Designer and visually apply CSS properties such as gradients, box shadows, and more. Dreamweaver CC is committed to producing clean, web-standards code, enabling you to design without the need to hand-code.

Dreamweaver CC also includes enhancements to its responsive design framework, Fluid Grid Layouts. We’ve addressed key usability issues to improve the design workflow, and to help you visually construct and build responsive websites that render properly on multiple screen sizes and devices.

Responsive Design in Dreamweaver CC

Responsive Design in Dreamweaver CC

By removing deprecated features and technologies, we are clearing the way to provide optimized features that support the latest and most relevant web technologies and standards. Our aim is to provide the ultimate user experience – a collection of productive and modern visual development features in a single tooling environment.

We have just begun the modernization process and invite you to voice your opinion. We are committed to taking action on customer feedback and remaining as transparent as possible about our future plans. More details will follow on what the modernization effort entails in Dreamweaver CC, and we eagerly await your feedback.

Over the past 12 months, we have been expanded Dreamweaver’s integration with many Creative Cloud services and tools. One of the many benefits to being part of the Creative Cloud is that you can access the vast and ever-growing Adobe Edge Web Fonts library. Also, with web technologies evolving rapidly, Dreamweaver CC helps you keep up by implementing features and addressing issues quickly. Creative Cloud members will receive regular updates to Dreamweaver.

Adobe Edge Web Fonts

Adobe Edge Web Fonts

Another benefit of integration with Creative Cloud is Sync: Dreamweaver CC lets you sync both site settings and preferences, streamlining your creation workflow. Sync in seconds and start creating without the need to recreate or manually copy and paste files. With Dreamweaver CC & Creative Cloud, the creative world is at your fingertips.

5 Myths about Adobe Creative Cloud

Posted on March 26, 2013 by Preran Kumar | Comments (32)

Because of the recent changes to the Creative Cloud policy, I am redirecting this page to the official Adobe post

http://terrywhite.com/5-myths-about-adobe-creative-cloud/

This will help keep the post current and in sync with the latest announcements at Adobe. If you have visited this post in the week later to March 06, please read the updated blog post from Terry White. Apologize for any confusion.

Dreamweaver Creative Cloud update (12.1) – FAQs

Posted on October 4, 2012 by Preran Kumar | Comments (22)

Why did Adobe re-organize the Insert panel?

In broad terms, Insert options have been added, deprecated, or re-organized to streamline workflows, reduce clutter, and ensure compliance with the latest and most popular trends in web design. To help you focus on the page and avoid distraction from colorful elements in the user interface, color options for Insert icons have been deprecated.

While you may need to re-familiarize yourself with the user interface changes in the short term, we are confident that you will recognize their value as you get up to speed with the new workflows.

The reasons for re-organizing the Insert panel in this update are listed below.

  • Sync the ordering of options in the Insert panel with the Insert menu to improve speed of their discoverability.
  • Deprecate Insert options that required multiple-clicks. These options can be quickly and easily configured using the Property Inspector or the Code view.
  • As part of enhanced HTML5 support in Dreamweaver, new HTML5 elements introduced in the Insert options. Options that have ceased to be important or are no longer part of best web practices have been deprecated.
    For example, the table options under Layout category have been moved to Common because tables are no longer used for layout.
  • Similar options available under multiple categories have been moved to a single category that best relates to the options.
    For example, some of the Spry options were previously available under the Data category as well.  Such Spry options have been removed from the Data category.
  • Options that were rarely used have been deprecated.
    For example, the placeholder option for Insert option has been deprecated because of its limited usage.
  • Streamline workflow for Insert options such that the experience is the same irrespective of the mode in which you insert the option.
    For example, in Dreamweaver CS6, different dialog boxes were displayed when you insert Text Area based on whether the focus was on the design or code view.

For comprehensive information on changes to Insert options in Dreamweaver 12.1, see Changes to Insert options | Creative Cloud

Is Adobe biased towards subscription users?

From the page Adobe Creative Cloud / FAQ 

Is Creative Cloud a replacement for Adobe’s traditional creative products and suite editions?

Adobe believes that Creative Cloud is a better way to get your desktop tools because you get access to the latest updates and features as soon as they’re available, plus services that tie the new publishing workflows together. Adobe will continue to develop and sell individual CS products, and customers can purchase them through the Adobe online stores and select retail and online stores.

Are there any differences between the Creative Suite software included in my Creative Cloud membership and the software I buy in the box?

Yes, the software included in Creative Cloud membership is different from the software you buy in the box. It gives you everything in the traditional licensed version plus exclusive access to new features. This means that as soon as our engineering teams can finalize new features — such as the features we recently released for Illustrator, and many other new features to come — we will release them through special software editions available only to paying Creative Cloud members. So no more waiting between major releases to get new features.

Why don’t I see my previously installed Extensions?

See the blog post Dreamweaver extensions don’t appear after updating Dreamweaver to 12.1

Missing custom keyboard shortcuts and Favorite icons

Your custom keyboard shortcuts and Favorites in the Insert icon panel are lost after an update. For icons, you will have to note down your Favorites before you update, and add them again after you complete installing the update.

For keyboard shortcuts, ensure that you export them before you install the update.

  1. Select Edit > Keyboard Shortcuts
  2. Click “Export set as HTML” button.

After you upgrade, refer to the exported file to set the shortcuts again.

HTML keywords not localized in Property Inspector

  • HTML keywords are no longer localized in the Property Inspector. They appear in English only.

Dreamweaver extensions don’t appear after updating Dreamweaver to 12.1

Posted on October 3, 2012 by Preran Kumar | Comments (5)

The menu items in Dreamweaver are listed in the menus.xml file. When you add an extension, an entry for the extension is made in the menus.xml file.

Menu organization is changing in this release because a new menus.xml file will overwrite the previous menus.xml file. Because the previous menus.xml file – which contained Dreamweaver extensions – will be overwritten, menu entries corresponding to these extensions will no longer be displayed after the update.

To display previously installed extensions, do the following:

1. Click Help > Manage Extensions.
2. In the Adobe Extension Manager, use Ctrl-click or Shift-click to select extensions that you want to enable.
3. Right-click and select Disable.
4. Right-click again, and select Enable.

Adobe announces CS6/Creative Cloud

Posted on April 23, 2012 by jvarese | Comments (1)

Today Adobe announced one of its most ambitious releases yet—Adobe® Creative Suite® 6 and the Adobe Creative Cloud™. For Dreamweaver users, this means yet another powerful version of Dreamweaver that will be available as a standalone product, as part of the familiar Web Creative Suite, or as part of the new Adobe subscription service offered by the Creative Cloud.

Adobe Dreamweaver® CS6 addresses the challenge of responsive Web designs with the ability to build fluid grid layouts replacing the tedious manual process of creating and configuring separate CSS-based interfaces for phone, tablet and desktop.

Through direct integration with Adobe’s recently announced PhoneGap Build service, Dreamweaver CS6 also helps round out Web professionals’ skill sets and enables them to produce native mobile applications for multiple platforms.

For a full list of new features in Dreamweaver CS6, along with links to instructional content and videos, see What’s New in Dreamweaver CS6.

PhoneGap Build extension for Dreamweaver CS5.5

Posted on April 4, 2012 by jvarese | Comments (18)

Adobe regrets to inform the Dreamweaver Community that the PhoneGap Build extension for Dreamweaver CS5.5 (released last week) is no longer available for download. For a number of reasons, we have had to pull the extension from public availability.

The functionality of the extension, which integrates PhoneGap Build with Dreamweaver, will be available in the upcoming version of Dreamweaver CS6.

Adobe would like to extend apologies for any inconvenience this might have caused.

Trouble importing your Dreamweaver site?

Posted on December 15, 2011 by jvarese | Comments (4)

Some users have reported trouble importing their Dreamweaver site settings. One important thing to remember is that differing file structures on Macintosh and Windows machines can often cause this problem.

When you export a Dreamweaver site to an .ste file, that .ste file stores not only the FTP settings for your site, but also local file settings. The native file structure on Windows is completely different from that on Mac OS. The Import and Export features in Dreamweaver enable you to move site definitions from one computer to another (for example from XP to Windows 7), but not from one operating system to another. 
 
The solution: Since .ste files are XML documents, you can open them and edit the attributes in the <localinfo> tag to match the new folder structure on your Mac or Windows machine.

Backing up and restoring Dreamweaver site definitions

Posted on November 2, 2011 by jvarese | Comments (18)

We often hear from people: “I’m on a new computer. How do I get all of my Dreamweaver sites over to the new computer as well?”

Variations on this theme include: “My computer got wiped out; how can I get my sites back?” as well as “I had to reinstall Dreamweaver and lost all of my sites. How can a restore them?”

The answer to all of these questions is that you must import Dreamweaver site definitions (information that is kept in an .ste file) in order to restore a previous site. As Adobe Community Expert David Powers says, “Losing your site definitions in Dreamweaver can be a disaster, but it does happen sometimes. The best way to prepare for such an eventuality is to back up your site definitions on a regular basis.”

Create backups of your site definitions

You can back up all of your site definitions in a single operation:

  1. In Dreamweaver, choose Site > Manage Sites.
  2. In the Manage Sites dialog box, Shift-click to select all site names.
  3. Click Export.
  4. Dreamweaver asks if you want to include passwords and login details (this is the default option). Whichever option you choose will be applied to all sites, so if you want to export passwords/login details for some sites and not others, click Cancel and then export your sites in two sets by using Ctrl/Cmd-click to select them.
  5. Click OK.
    Dreamweaver asks where you’d like to save the exported site definitions. Navigate to a suitable location, leave the File name field unchanged, and click Save. Although only one site name is listed in the File name field, Dreamweaver exports all of the site definitions as .ste files in a single operation.

NOTE: This process backs up only the details of your sites, such as the location of the root folder, FTP details, and so on. It does not back up the actual files in your site, such as .html (or .php, .asp, .cfm) files, images, and style sheets. It’s a good idea to use your normal file backup routine on your actual files from time to time, as well as exporting the site definitions.

Restore site definitions

In the event of losing your site definitions in Dreamweaver or moving to a new computer, open the Manage Sites dialog box (Sites > Manage Sites), and use the Import button to navigate to your backup .ste files.

For more detailed step-by-step instructions you can consult the Import site settings documentation in Dreamweaver Help.

Thanks to David Powers, who posted the original version of this topic on the Adobe Dreamweaver forum.

Navigation bars — to Spry or not to Spry?

Posted on October 31, 2011 by jvarese | Comments (4)

The Dreamweaver and Spry forums are flooded with requests for help on editing the notoriously difficult Spry Menu Bar widget. The widget is Dreamweaver’s built-in solution for dragging and dropping a navigation menu to your web page.

Sometimes, however, a Spry Menu Bar widget might not be entirely necessary for your navigation, especially if your navigation is going to be a single row of “buttons” (links) without any dropdown menus.

Dreamweaver moderator and Community Expert Nancy O. offers one template that gives you an idea of how easy it can be to create a navigation out of an unordered list and some CSS styling. Below is Nancy O.’s code for a page with such a navigation. Copy the code below and paste it into a blank document. All of the CSS is in the head of the page (no external style sheets) so you can see how everything works. The sample also provides a marvelous example of a basic 2-column CSS layout.

NOTE: Nancy’s original source doc is at: http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 2-column, Fixed-width, Centered Template</title>
<link href="../alt-style/MyFooter.css" rel="stylesheet" type="text/css" />
 
<style type="text/css">
 
/*
 
 
==========================================
Layout by Alt-Web Design and Publishing
http://www.alt-web.com   
July 2010
==========================================
 
 
*/
 
/*
 zero out default browser values on everything
*/
* {margin:0; padding:0; line-height:100%; font-size: 100%}
 
/*
adds scrollbar to short pages in Mozilla
*/
html {font-size:90%; height:102%; margin-bottom:1px; }
 
body {
background:#330000;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
 
#Wrapper {
width: 970px; /*
width in px, % or ems
*/
margin:12px auto 0 auto; /*
centers page
*/
border: 10px solid #990000;
overflow:hidden; /*
float containment
*/
/*
header and footer get their background color from this rule
*/
background-color: #CC6666;
}
 
#Header {
width: 100%;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
#Header h1 {
padding: 12px;
font-size: 2.25em;
text-shadow: #330000 0.1em 0.1em 0.2em;
color: #FFF;
}
 
#Header h2 {
padding: 0 12px;
letter-spacing: 3px;
text-transform:uppercase;
}
#Header address {
color: #FFF;
font: bold oblique 14px/1.2em Arial, Helvetica, sans-serif;
line-height: 1.5em;
padding: 12px;
}
 
/*
TOP MENU
*/
#navlist {
font-size: 12px;
font-weight: bold;
text-align: center;
background: #330000;
padding: 0.65em;
width: 100%;
}
 
#navlist li{
list-style: none;
margin: 0;
display:inline;
}
 
#navlist li a {
text-decoration: none;
background: #330000;
padding: 1em;
border-left: 1.2em solid #CC3333;
line-height: 2em;
}
 
#navlist li a:link { color: #CCC999; }
#navlist li a:visited { color: #CC6666; }
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus{
text-decoration: underline;
background-color: #990000;
}
 
#navlist li a.current {
color: #FFCC00;
border-left: 12px solid #FFCC00;
}
/*
end top menu
*/
 
 
/*
Right side
*/
 
#rightSidebar {
float:right;
width:32.5%;
margin:0;
padding: 0 0 0 20px;
border-left: 2px dotted maroon;
background:#FFFFBD;
min-height: 32em;
}
/*
 Main
*/
#MainContent {
text-align:left;
color:#663333;
background: #EAEAEA;
margin: 0;
padding: 0;
}
 
#MainContent ul, #MainContent li {
margin-left: 18px;
padding-bottom: 5px;
padding-left: 10px;
list-style: square outside;
}
 
#MainContent blockquote {
font:italic 1.2em Georgia, "Times New Roman", Times, serif;
color: #996666;
}
 
#Footer {
text-align: center;
padding: 10px 0;
color: #FFF;
height: 1%;
font-weight: bold;
font-size: 0.65em;
margin: 0;
}
 
/*
test Links
*/
a{font-weight: 700; text-decoration: none}
a:link {color:#FF0000;}
a:visited {color:#CC6666;}
a:hover,
a:active,
a:focus{text-decoration: underline}
a img{border: none;}
 
/*
Text styles
*/
h1,h2,h3,h4,h5 {
font-size:1.2em;
line-height:1.8em;
padding: 10px 20px;
}
p {font-size: 1em; line-height: 1.5; padding:5px 20px;}
 
 
/*
RE-USABLE CLASSES
*/
 
/*
text align
*/
.left {text-align: left}
.center {text-align: center}
.right {text-align: right}
 
/*
floats and clearing
*/
.floatRight {
float:right;
width:32.5%;
height:auto;
margin:0;
padding: 0 0 0 20px;
}
 
.floatLeft {
float: left;
width: 65%;
height:auto;
margin:0;
padding: 0;
}
 
.clearfloat {
clear:both;
height: 1px;
visibility: hidden;
}
</style>
 
<!--[if IE]>
<style type="text/css">
/* CSS Conditional Comments */
body {font-size: 76%; zoom:100%}
</style>
<![endif]-->
 
</head>
<body>
<div id="Wrapper">
 
<div id="Header">
<div>
<h1>CSS Basic 2-column, centered layout </h1>
<!--end floatLeft --></div>
 
<div>
<p>#header</p>
<h2>COMPANY NAME </h2>
<address>address, city, region <br />
Phone and Fax Numbers </address>
<!--end floatRight --> </div>
 
<!--IMPORTANT! clear floats after they are no longer needed with p, br or hr class -->
<hr />
 
<!--end header --></div>
 
 
<!--BEGIN menu-->
<div id="navcontainer">
<ul id="navlist">
<li><a href="#MainContent">Skip to Content&gt; </a></li>
<li><a href="#">Current Page </a></li>
<li><a href="#">Menu Item 2 </a></li>
<li><a href="#">Menu Item 3 </a></li>
<li><a href="#">Menu Item 4 </a></li>
<li><a href="#">Menu Item 5 </a></li>
</ul>
<!--end navlist -->
<!--end navcontainer -->
</div>
<!--end top menu -->
 
 
<!--Begin MainContent -->
<div id="MainContent">
 
<!--BEGIN left column -->
<div>
<p>#mainContent</p>
<p>This layout  tested and works  well in  Firefox 3+,  Chrome 9+, Safari 3+, IE6, 7, 8 &amp; 9.</p>
<p> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
<h3>View Page Source in Browser to see the CSS and HTML code.</h3>
<h2>Heading 2</h2>
<p>Your content goes here. Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. </p>
 
<h3>Heading 3</h3>
<p>Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima.</p>
<p>End #mainContent </p>
<!--end left column -->
</div>
 
<!--BEGIN right column -->
<div id="rightSidebar">
<p>#rightSidebar</p>
 
<h3>Blockquote</h3>
<blockquote>
<p>&quot;Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. &quot;</p>
</blockquote>
 
<h3>Blockquote</h3>
<blockquote>
<p>&quot; Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. &quot;</p>
</blockquote>
<p>Unordered List  links</p>
<ul>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
</ul>
<p>end #rightSidebar</p>
<!--end rightSidebar -->
</div>
 
 
<!--IMPORTANT! clear floats after right column with a p, br, or hr class -->
<hr />
 
<!--end MainContent --></div> 
 
<!--Begin footer -->
<div id="Footer">
<p>#Footer &copy; 2011, Your footer text goes here</p>
<!--end Footer --></div>
 
<!--end page Wrapper --></div>
 
<!--remove Myfooter from your web page -->
<div id="Myfooter">
<div>  
<h3>Help Feed the Kitty</h3>
<p>Your support helps us continue these efforts.</p>
 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" />
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="1006004" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="Donate Button" />
<img alt="Credit Cards Accepted" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
<p>&nbsp;</p>
</div> <!--end floatRight -->
 
<div>
<p>&copy; 1995-2011 | <a href="http://alt-web.com/">Alt-Web Design &amp; Publishing</a> | California</p>
<p> Web : Graphics : Print : Media Specialists</p>
<p><a href="../index.shtml">Home</a> | <a href="../links.shtml">Links</a> | <a href="../tools.shtml">Tools</a> | <a href="../Free-CSS-Templates.shtml">Templates</a> | <a href="../contact.shtml">Contact</a> </p>
<br />
 
</div> <!--end footertext -->
</div><!--end Myfooter -->
 
</body>
</html>

Getting rid of blue borders around image links

Posted on September 23, 2011 by jvarese | Comments (9)

Here’s a really annoying problem that we often hear people asking about: how do I get rid of a blue border that surrounds an image when I make the image a link?

Annoying blue border around a linked image

Annoying blue border around a linked image

Some people will tell you to simply set a zero border in the Dreamweaver Property inspector, but according to David Powers, you should really use CSS instead.

Here’s how to do it:

  1. Create a new CSS rule for linked images, either in the head of the document or in an external style sheet. (We recommend the latter.)
    The new rule looks like this:
    a img { border: none; }
    Note: If you don’t know anything about creating CSS rules, you’ll need to read up on some basic CSS info first.
  2. If you’ve created the rule in a <style> block in the head of your document, you don’t need to do anything else. If you’ve created the rule in an external style sheet, make sure the sheet is linked to the page that’s displaying the annoying border.

Creating a CSS style to remove borders automatically removes the blue border from ALL images that you’ve turned into links. If you use an external style sheet, and link it to all the pages in your site, the same rule affects every image link in your site. This is a much more efficient method of eliminating those pesky borders than adding zero to the border property for every image in your website!

Thanks to David Powers, who originally posted this helpful tip in the Adobe Dreamweaver Forum.