Posts in Category "Features"

Adobe recommends: Layout 101

Here’s one from Dreamweaver veteran Gary White: Layout 101

This resource contains some outdated information (about Macromedia Dreamweaver!) but some of the basic concepts around CSS layout are still relevant and clearly presented. Useful for total newbies!

Adobe recommends: Spry Menu Bar resources

Here is another great resource for all you Spry Menu Bar widget users: Ryan Grabenstein’s Spry Menu Bar Resources.

This resource page contains a number of different types of tips and tutorial pieces (including video) for creating, editing, and customizing a Spry Menu Bar widget in Dreamweaver.

Adobe recommends: Customizing a Spry Menu Bar widget

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what’s been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.

Our second recommendation is a piece by David Powers:

Customizing a Spry Menu Bar widget

The tutorial takes you through some of the most common styling tasks for the difficult-to-style Spry Menu Bar widget in Dreamweaver.

Give it a spin and let us know what you think!

Editing an existing remote website in Dreamweaver

Here is one of the most frequently asked-about situations for new Dreamweaver users:

“I have just inherited a website from another person. The files for the website are on a remote server that I’ve never worked with or accessed. How do I get the web (HTML) files from that other server, onto my own computer so that I can edit them in Dreamweaver?”

The short answer:

Establish a connection to the website’s remote server and download the files to your computer.

The long answer:

You’ll need two main things in order to “get” files from someone else’s remote site:

  • A local Dreamweaver site. This is the place on your computer where you’ll store local versions of the web site’s HTML files.
  • A connection to the remote site. The remote site is the place out on the web where the website you need to edit is currently living. (Literally, it is a folder on the computer that is running the web server.) Someone else has put that website out there and now you need to edit it. Before you can edit the site, however, you need to connect to the appropriate remote server so that you can access the files.

STEP 1: Set up a local Dreamweaver site

This is the place on your computer where you’ll store the local versions of the web site’s HTML files. (You always want to edit files on your local computer, never live on the remote server.)

For instructions on setting up a local site in Dreamweaver, see Set up a local version of your site in Dreamweaver Help. 

STEP 2: Connect to the remote server

Once you’ve set up a local repository on your computer for the HTML files, you need to establish a connection to the remote site that’s out on the web. The idea is to transfer a copy of the files from the remote site to the local version of the site (on your computer). Once the files are local, you can edit them, and then repost them to the web.

See Dreamweaver Help for instructions on connecting to a remote server.

There are numerous ways of connecting to a remote server; we could give 50 examples here and still not cover every permutation. You will likely need to work with a server administrator or an ISP (Internet Service Provider) to create a successful connection. The server administrator (for example, someone who works at the company whose website you now need to edit) needs to provide you with some important pieces of information, namely:

  • The type of connection method you need to use. (Most often it’s FTP.)
  • The root directory for the website you need to access. (This is the main folder on the remote server where the website “lives”)
  • Your username and password, which will give you access to the remote server

Once you have all of the information you need from the server adminstrator, you’ll fill out the Site Setup dialog box in Dreamweaver. (Instructions for how to do so, according to particular connection methods, are detailed in the Help link above.) When you’re finished, your Site Setup dialog box should look something like this. (You can click on the below image to expand it.)

Use the Test button in the Site Setup dialog box to test your connection. If you connect successfully, you are ready to move on. If you can’t connect successfully, you need to keep adjusting the settings in the Site Setup dialog box until you establish a connection.

STEP 3: Connect to the remote server

The Test button in the Site Setup dialog box does not actually “connect” you to the remote server. Once you know the connection works, you just need to do that manually in Dreamweaver.

  1. In the Files panel make sure your new local site is showing.
  2. Click the Connect to Remote Host button in the Files panel.
  3. The connection icon should turn green, indicating that you have an active connection.

STEP 4: Get the remote files

Once you’re connected, you can get (literally transfer) copies of the files that are on the web to your local computer.

  1. In the Files panel, click the Expand to Show Local and Remote Sites icon.

    Doing this expands the Files panel so that you can see both the remote site and the local site simultaneously. The remote site appears on the left side of the Expanded Files panel; your local site files appear on the right.
  2. Select the files in the remote site that you want to get. Usually, if you need to get an entire site, you select the directory that holds all of the site files. (You can click on the below image to expand it.)
  3. Press the Get button and wait for the remote files to download to the local version of the site on your computer.

Once you have the files on your local computer, you can edit them in Dreamweaver. You can then repost the new versions of the files back to the server, or you can set up another remote site in relation to this same local directory, and post the edited files to a different server entirely.

Adobe recommends: Packaging mobile apps with Dreamweaver CS5.5

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what’s been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.

Our first recommendation is from your truly:

Packaging web application as mobile apps using Dreamweaver CS5.5

The tutorial provides a sample mobile application and shows you how to compile the files in Dreamweaver. The end-result is a debug build that you can test in iOS or Android emulators on your computer.

Give it a spin and let us know what you think!

Late-breaking issue: Put/Get not working for some Dreamweaver CS5.5 users

We’ve been hearing rumblings from some users about the upload (put) and/or download (get) process failing during FTP file transfer in Dreamweaver CS5.5. If you are having trouble uploading your files to or downloading your files from you server, consult this tech note for a number of possible solutions. You’ll want to make sure you step through the recommended solutions in order as you troubleshoot your upload/download problem.

Adobe has further identified particular failures amongst those using GoDaddy as their web host. The failure is usually indicated by the message “File activity incomplete” in the Background File Activity window, and the FTP Log in Dreamweaver showing an error similar to the following: “An FTP error occurred – cannot put ‘/index.html’. Access Denied.”

The issue seems to be affecting only those files you might be trying to put to/get from the root folder of your FTP server. For example, you may be able to put files to the /wwwroot/css/ subfolder, but not to /wwwroot/. The problem also occurs despite the fact that you can perform the same action (e.g. uploading a file) using another FTP client, such as FileZilla or an older version of Dreamweaver.

If you are a GoDaddy user and experiencing this issue, see Solution 3: Move or delete any symbolic links in the above referenced tech note.

CSS3 Transitions

As part of our wind-down from CS5.5, the Dreamweaver Team has started thinking about how we can deliver a world class experience for building CSS3 Transitions for the web.  In the coming weeks, the Dreamweaver Team will be conducting surveys and asking for your input on how we can do just that, so we’re bringing it to our fans directly through our social media outlets.  This week we want to see examples of CSS3 Transitions (or animations).

So send us links to your sites showing off your CSS 3 Transitions skills!

Adobe announces Creative Suite 5.5/Dreamweaver CS5.5

Today Adobe announced the release of the latest and greatest version of the Creative Suite family: Adobe Creative Suite 5.5. As part of Creative Suite 5.5 Web Premium, Dreamweaver CS5.5 certainly stands out as one of the many jewels in this crown. The focus for this release is decidedly on mobile devices, and streamlining your HTML5/CSS3 workflow in this as yet Wild West-like land of opportunity. True to its history and the spirit of collaborative development, the Dreamweaver team has listened to its user base once again, and has delivered a show-stopping tool that now lets you easily develop and package web apps for mobile devices.

“One of the neatest things in Dreamweaver CS5.5,” says Randy Edmunds, Senior Computer Scientist at Adobe, “is the new Media Queries dialog box, which lets you specify CSS style sheets for different devices, so that your web page can look the way you want it to look on any screen. The feature eliminates something we see a lot of—the chances for typos and errors—and is going to remove a great deal of headache for people who want to target multiple screens.”

In addition to CSS Media Queries, Dreamweaver CS5.5 also supports multiscreen preview (where you can literally see in one window exactly what your page will look like on different devices), CSS3 and HTML5 code-hinting, and jQuery mobile integration, which includes drag-and-drop jQuery mobile application widgets, as well as jQuery mobile starter pages to get you up and running in seconds. “This release means rapid development for mobile apps,” Edmunds says. “And that’s good, since everything is about rapid these days.”

One of the most enticing features of Dreamweaver CS5.5, however, is the new Native Mobile Application packager, which lets you build and emulate native mobile applications for Android- and iOS-based devices. Dreamweaver CS5.5 now uses seemless integration with PhoneGap—an open-source development framework for building cross-platform mobile applications—and together the two bring a new level of ease to building apps for mobile devices.

“We wanted to remove all of the pain and confusion from the process of building mobile applications,” says Jung Yun Choi, Software Quality Engineer on the Dreamweaver team. “Our goal was to make it so easy that even someone who doesn’t know anything about mobile apps could step through the process and build one within minutes.”

And the Dreamweaver team has done just that. Building a mobile application for iOS- and Android- based devices is now as simple as installing the iOS or Android SDKs, specifying a few configuration settings, and selecting “Build and Emulate” from a list of menu choices.

To learn more about all of the new and exciting features in Dreamweaver CS5.5, check out Dreamweaver Product Manager Scott Fegette’s What’s New in Dreamweaver CS5.5, and the Dreamweaver CS5.5 feature overview on Adobe TV.

You can also read more about individual features in the What’s New section of the Dreamweaver Help system.

Packaging widgets with the Adobe Widget Browser

This tutorial by Scott Richards on the Adobe Developer Connection shows how to package an existing HTML and JavaScript widget using the Adobe Widget Browser so that it can be shared with other users of the Widget Browser. Read the full article here:

http://www.adobe.com/devnet/dreamweaver/articles/packaging-widgets-with-widget-browser.html

CS5 Updates to Style Rendering Toolbar

In Dreamweaver CS5, the Design View Style Rendering Toolbar was given a couple new features.

Note that the Style Rendering Toolbar is not displayed by default, so you may need to turn it on using the View > Toolbars menu.

Text Size

These are buttons to quickly adjust the font size on the page. This is a temporary adjustment to emulate font zooming as done in browsers so you can quickly see how this may affect the layout of your page.

Increase, reset, and decrease text size buttons

  • Increase Text Size (by 15%)
  • Reset Text Size to original size
  • Decrease Text Size (by 15%)

Pseudo-class Rendering

These radio buttons are used to temporarily change the filtering of CSS pseudo-class styles in your page. By default, browsers display the :link styles and hide all of the other pseudo-class styles until a certain action takes place. This is a temporary change in the way styles are cascaded so you can quickly see how the other pseudo class styles are rendered in your page.

Pseudo class buttons

  • :l – :link
  • :v – :visited
  • :h – :hover
  • :a – :active
  • :f – :focus

Notice that it’s not possible to hover over more than 1 link at a time, so this feature can cause your page to render in a state that can never be seen in a browser. This is just for doing a quick, temporary check of how styles are rendered, not to represent valid link states in your page.

All of the Style Rendering Toolbar functionality is also available through the View > Style Rendering menu.