Archive for September, 2011

Getting rid of blue borders around image links

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.

 

Adobe recommends: CSS Inspect

Over the past week, we publicized some high-value content from adobe.com and  other community sites. Hopefully you enjoyed these posts and found the resources useful. This will be the last post in the “Adobe Recommends” series (for now!)

Continuing our trip along the CSS highway, we have this recommended video by Dreamweaver Product Manager, Scott Fegette:

Dreamweaver CS5 — CSS Inspect

This video shows you how you can use CSS Inspect in Dreamweaver’s Live view to inspect and edit your CSS structure.

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over  the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the “Adobe Recommends” series.

Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:

Enhanced support for CSS3 in Dreamweaver CS5.5

This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.

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

Adobe recommends: Automatically attaching style sheets to new documents

Here’s another one from the great David Powers:

Automatically attaching a style sheet to a new document

This article shows you how to attach style sheets to new documents that you’re creating in Dreamweaver — no need to fuss with the attachment process afterwards!

Adobe recommends: New CSS features in Dreamweaver CS5

Continuing our trip along the CSS highway, our next recommendation is a video by Dreamweaver superstar Brian Wood:

New CSS features in Dreamweaver CS5

The video demonstrates some of the most exciting new CSS features in Dreamweaver: new CSS layouts, CSS inspect, and CSS enable/disable.

Adobe recommends: CSS page layout basics

Continuing on our quest for great layout tips, our next recommendation comes from yours truly:

CSS page layout basics

This article takes you through the A-Z of what makes up a basic CSS layout. It also shows you how to use some of the CSS layouts that come packaged with Dreamweaver.

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.