Viewing Edits with Firebug

I’ve been finding that design view in Dream Weaver isn’t complete accurate to how my site actually appears on the web. Likewise, clicking the “Preview in Browser” button will only give you a slight idea of what the site will look like when uploaded to the web because images won’t appear.

Where to find "preview in browser" in DW

What I see on Firefox Page

Instead of my page with a photo of the beach (you can view it here) I just get the word that I used for an alternative name.

So, that brings me to my next suggestion, to upload your site as is and use Firebug to make slight edits. This way, your page will appear as is, and if you want to move an image or mess with the colors of your css, you don’t have to keep re-upping your page every time you want to view the changes.

Assuming you already have Firefox and Firebug , I will go on to explain how to use Firebug. It appears in the right hand corner of your browser and you can click on it to pull up a window. Now, let’s say I want to edit my css. I will choose the “css” tab and then click “edit.”

Here you can change anything you want to in the css simple by selecting the area you want to change. I think this is a great feature if you don’t feel like opening and constantly upping your site to DW or are on a computer without DW but still want to spend some time experimenting with your site.

For example, let’s say I’m curious to see what my site would look like if I changed the background color to midnight blue and if I put a dotted border on my image. Here are the two edits I could make:

color change

Edit image border and padding

By doing this, I can also see something weird is going on with my padding, and I might want to go back into DW to see if I can fix this problem. Remember, changes in Firebug are only temporary and you will have to go into DW to make the changes permanent. But it can be a fun and easy way to mess around with color and style outside of the program.

– Merritt


~ by mlw53 on September 26, 2010.

%d bloggers like this: