Posts in Category "Real World Use"

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: Windows XP computers shutting down or restarting when trying to launch Dreamweaver CS5.5

We’ve been hearing from some users that their computers (running Windows XP) are shutting down or restarting when they try to start Dreamweaver CS5.5. Some users are also seeing a blue or black error screen prior to the shut down or restart.

The solution for this issue is to install the Service Pack 3 for Windows XP. For more information, see this 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!

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

Optimal CSS Tiled Background Image Size

I have recently analyzed several web pages for Dreamweaver customers that complained about slow page loading times. A trend that I have noticed is images used for tiling backgrounds with a width or height of 1 pixel. I have even seen some 1×1 images used for tiling. Yikes!

“Tiling” refers to using a CSS background image that repeats in the X and/or Y directions to fill a page or element.

While it’s generally best to make images as small as possible, one exception to that rule is for tiling images. The smallest download that browsers can do is 1K bytes, so the best size for tiling image files that can be made to be under 1K in size is “as close to 1K without going over”. This can significantly reduce the amount of tiling that Dreamweaver and browsers need to do, which improves page loading performance.

For example, consider a 1×1 image versus an equivalent 10×10 image. The size of both images is under 1K, so the download time is the same, but the smaller image is tiled up to 100 times more than the larger image, which requires more time to render.

This argument also applies to non-tiled images, but those can easily be combined in a single file using the CSS Sprite technique.

Adobe announces the HTML5 Video Player widget

HTML5 has received a tremendous amount of buzz, much of it driven by the potential for plugin-free video. However, the limited browser support for the HTML5 <video> tag has forced web designers to scramble for a solution that would work across platforms as well as browsers.  To help customers overcome these challenges, Adobe has released an easy-to-use, totally CSS-customizable solution that shifts gracefully from the HTML5 <video> tag to the Flash Player when the tag is not supported. The shift takes place regardless of the screen—from phone to monitor to TV.

The HTML5 Video Player widget, now available through the Adobe Widget Browser, works with or without Dreamweaver CS5. Code generated from the widget plays video in the best possible player for the requested platform using a range of video codecs. Based on the Kaltura open source library, the HTML5 Video Player widget is fully cross-browser compatible with support for Internet Explorer, Firefox, Safari, Chrome, and Opera. Moreover, the player is completely customizable with industry standard CSS techniques.

You can run the Adobe Widget Browser directly from within Dreamweaver and, once you’ve set it up, insert the generated code and files for the HTML5 Video Player widget with point-and-click simplicity. But if you’re not a Dreamweaver user (shame on you), you can also download the Widget Browser independently. (You’ll need to install Adobe AIR first.)

If you’re new to the Widget Browser, you can get up to speed quickly with this video from Lynda.com.

Adobe Web Fonts

Adobe introduced Adobe Web Fonts, a specialized subset of fonts from the Adobe Type Library. They look great on screens and are easy to add to your website. Now, with the help of our partners from Typekit, you can deliver type to your website that is searchable, editable and viewable with the high performance and selection that you demand for your viewers.

For more info, visit: http://www.adobe.com/type/webfont/info.html

Dark Background Color in Dreamweaver Code View

In Dreamweaver, you can manually change the Code Coloring colors that are displayed in Code View in the Code Coloring Category of the Preferences dialog.

This is easy when you just want to tweak a few colors, but changing your entire coloring scheme to a dark background requires changing many different settings, which can be a lot of work.

Fortunately, I found the Dark Code Colorization for Dreamweaver extension written by Tom Sramek which does the work for you. Thank you for sharing, Tom.

Tip for using Live View Inspect Mode in CS5

Dreamweaver CS5 introduces the Inspect Mode in Live View. This can be turned on (among other ways) using:
  View > Inspect
Once you are in Inspect mode, the element under the mouse in Live View is “inspected”. Box Model highlighting is displayed in Live View for the inspected element, the element is selected in Code View (both static and Live Code) and in the Tag Selector, and element details are displayed in all Panels that track selection (such as the CSS Panel Current Mode).
This allows you to move the mouse around the page to quickly discover the page structure. Click in the page to feeze the inspection (i.e. selection) on the current element. Click again to exit Inspect Mode.
This feature uses the Live View “hover” mechanism to determine the current element. This makes it impossible to inspect any container element where the container has no padding and has only 1 child, and the child element has no margins. There are no pixels over which you can hover the mouse to choose the container element for inspection.
To handle this case, simple keyboard navigation is provided using the left-arrow and right-arrow keys:

  1. In Inspect Mode, place mouse over any element.
  2. Without moving mouse, press left-arrow key to change inspection to parent element.
  3. You can keep navigating to the parent all the way up to the <body> element.
  4. Pressing right-arrow key returns inspection to previous child element. Once the mouse is moved to a different element, then the list of “previous” child elements are forgotten.

Give this a try and let me know how this works for you.
Thanks,
Randy