I created a drop down menu with Dreamweaver CS3 ( I am waiting to upgrade soon. )

Your directions were great. When I F12 the page to preview it, it looks awesome!

However, when I upload the page, does not look the way it should or function at all.

I have searched the internet high and low for answers to no avail.

Do you have any suggestions, or a quick fix?

Thank you so much for you help.

Shari

Hi Shari,

When you create a drop-down menu with the Spry features in Dreamweaver, Dreamweaver generates the HTML and CSS code, as well as the scripts that make it all work.

Those scripts are usually saved in a folder with a name like SpryAssets and you need to upload the scripts for your drop-down menu to work.

Look in the Files panel for a new folder created by Dreamweaver that has .js files in it (these are JavaScript files). Upload the entire folder to your server with the HTML page that has your drop-down menu and everything should work on the server, just like it does on your hard drive.

You can learn more on my site about creating a drop-down menu in Dreamweaver, as well as editing a drop-down menu in Dreamweaver.

Hope that helps you solve the problem,

Janine

If you choose Appearance (HTML) DW uses the HTML attributes, which are no longer recommended.

Janine

Even if you haven’t read those authors, you can quickly appreciate that Marquez was a master at magic realism, which is quite different from the science fiction and horror that Stephen King is famous for in books like Carrie and The Shining. To further complicate matters, the way many of us write CSS has changed over time. William Shakespeare is still considered a master, but few teachers would recommend you write the way he did anymore. Similarly, even well-written CSS, if it’s a few years old, may read like Old English today.

ThemeForest and Woo Themes are considered some of the better sources for templates and WordPress themes, but as soon as you find yourself reviewing someone else’s CSS, you have to take into consideration that every author has their own style, that there are many ways to create the same design effects with CSS, and that if you really want to write the cleanest, best code possible, you’ll spend hours on the details — in much the way a great writer can spend an afternoon looking for just the write word.

The more you learn about CSS, the better you’ll get at writing (and reading) it, but at the end of the day, some of the differences in style sheets come down to, well, style.

You can learn more about the basics from my CSS training videos.

Janine

I have watched all of your Dreamweaver and CSS training videos numerous times and worked all of the projects, and I am getting the hang of css styles and rules, etc.

However, I have noticed that the pre-made CSS templates in Dreamweaver have <style> in the CSS panel, which I presume is an “internal” style sheet.  You keep saying in your training that adding an “external” <style.css> to the html page is better, but where do these “external” style sheets come from?

Is there a basic external style sheet you can attach?  Can you change the internal style sheet that came with the template to an external style sheet?

Thanks,

Tom

Hi Tom,

Yes, you can change an internal style sheet into an external style sheet. Here’s what you do.

1. Create a new CSS file by choose File > New, then in the New dialog, choose Blank Page on the left, and choose CSS, and then choose Create.

2. Save that file by choose File > Save, and name it style.css, or main.css (or something like that)

3. Open the HTML page that has the internal styles (the ones that are in the <styles> tags), and attach the new blank external style sheet to that HTML page. You can do that by choosing Format > CSS Styles > Attach Stylesheet.

Now you should see the blank external style sheet in the CSS Styles panel, just above or below the list of styles in the page.

4. To move the styles into the new blank style sheet, just click and drag them in the styles panel from the internal style sheet to the external one, as you see in this screenshot.

Note, you can Shift+Click, or Cmd + Click, to select multiple styles and drag them all at once.

After you move all of the styles into the external style sheet, save the CSS file, and you can then attach that new external CSS file to any or all of the other pages in your site to apply the sames styles to every page.

If you already have internal styles on a page that are the same as the styles in the external style sheet, make sure to delete them — having duplicate styles can cause conflicts.

I hope that helps you finish your site.

Janine

While adding pages to my site, I have been organizing them via subfolders locally on my hard drive. This results in web pages URL’s appearing long and messy. Is there a way to enter a tag, style, or code to change the display URL on my website?

Thank you for your time,
   Mike 

Hi Mike,

If you want to create a photo gallery in Dreamweaver today, here are a few options…

You can still create galleries using Flash and then insert them into Dreamweaver, but you need have Flash, and know how to use it, to do that yourself. (You’ll find an article about how to use Dreamweaver to  insert a flash file once you’ve created a gallery in Flash here.)

You can download gallery tools from Adobe. Many people use the extensions to Dreamweaver from the Adobe Exchange site. You can add gallery extensions to enhance the features in Dreamweaver and create a variety of different kinds of galleries.

This link will take you to the search results for Dreamweaver gallery extensions.

You can, of course, create custom galleries in Dreamweaver yourself with the page creation tools, and you can create templates, to make adding and updating pages more automated in Dreamweaver. In that case, you have to decide if the gallery want to create will have two pages or twenty or more, and how much control you want over the design. (You can get started learning Dreamweaver in the Dreamweaver Training Center.)

As a general rule, the more automated the system, the more the design needs to be consistent from page to page. If you learn how to use Dreamweaver to create, link, and optimize pages, you can use the template features in Dreamweaver to creating custom designs more effiiently, but that does require some experience with Dreamweaver.

If you want to see an example of a custom photo gallery created with Dreamweaver templates (using the .dwt file type), you can check out a site I created for Photographer Jasper Johal. That site is featured in my book, Web Sites DIY For Dummies, and you can download the templates that come with the book to create the same design yourself if you like that site. (Warning: this link goes to Jasper’s live site, which does include some nude art photos. http://jasperphoto.com/ I used a simplified version in my book.

Here’s another custom gallery site created with Dreamweaver’s template features for an artist to showcase her work: http://www.inplainsightart.com/. I’m planning to use that site in a new book and video soon.

Another approach to creating photo galleries is to use an online photo hosting service. Because photographers are such a big market, there are several sites that specialize in photo galleries and even selling prints with templates and plugins and everything you need for a monthly fee. Among those options, I believe http://www.zenfolio.com/ is especially popular for professionals and, of course, you can use www.flickr.com for free.

I hope that helps you find the best solution for your gallery,

Janine

I am working my way through my Dreamweaver CS3 Total Training lessons, and I am stuck on this one issue in Lesson 6, Topic 7. I do great up until I apply the style to float the Story div left. Once I apply that, my Sidebar content jumps out of the Sidebar div and is in the Story div. I’ve been spinning my wheels on this since yesterday. I’ll attach a few screen captures for you (not sure if they’ll help). I also see the empty Sidebar div between the story and sidebar content in the code.

One other problem I am having is that my pages will not open in Firefox. I can preview in Opera and Safari, but the pages are jumbled though they look perfectly fine within the program. I am running CS3 as I said, but with current browsers. Could this be a compatibility issue?

Thank you so much for any help you can send my way!

Kitty

Hi Kitty,

Good questions. I can see you’re getting into more advanced issues as you combine CSS styles, but that’s also where you can start running into conflict. As you get more advanced with CSS and Web design, you’ll quickly learn that there are multiple ways to get into, and out of, style conflicts:

Here are a couple of things to check for:

If you align a div to the left or right (a common way to create a multi-column design), beware that the alignment of one element can affect others. Also note that the positioning of open and close div tags is important. I often change to Split View, as I can see you’ve done in this screenshot, so I can make sure I have only the content I want in a div tag. Sometimes just copying and pasting the content you don’t want in one div into another can solve a problem.

Here’s another scenario I’ve run into: I often want an image and a caption together, aligned to the left or right so text wraps around both of them. If you’re just aligning an image with a text wrap, a simple align-left or align-right style is handy, but if you want to include a caption, you may want to create additional styles. In that case, I usually create two class styles named right-caption and left-caption.

There are a few ways to apply these styles and make sure you have all the divs you need in the right place.

You can first insert the div, then assign the right-caption class style, and then insert the image and text within it. The style for the div that positions the image and caption should have a width set to about the width of the image and an alignment to the right or left (set as Float=right or left in the Block Category of the CSS Rules window in Dreamweaver).

One thing to watch out for. If you’re like me and you start building a page by putting some text in a div and then adding an image and aligning it, and then you realize you want to add a caption… well, at that point, you can insert a new div and drag the image into it, or you can select the image and choose Insert>div set to Wrap About Selection and even apply the class style as you add the div. That trick works beautifully when it goes well, but sometimes when I do that, Dreamweaver grabs some of the text already on the page — like it’s trying to help me out but it didn’t quite understand what I had in mind. If that happens, I just use code view to copy and paste the text where I want it, making sure the caption is in the div with just the image, and the rest of the text is outside that div so it can wrap about the image and the caption.

Advanced tip: If you’re aligning an image with a caption and you’ve already aligned the image to the right before you add a div around the image that is also aligned, sometimes that’s just too much floating to the right. Remember, you can (and should) remove styles you don’t need as you add new ones — that’s always good practice.

If you align an image and caption with a class style that has a float right, for example, take a moment to remove the float-right style that you already applied to the image (you can select an image and use the Style drop-down in the Properties Inspector at the bottom of the screen to change the class style setting to None). This removes the style and often solves style conflicts.

As for the differences between Firefox, Safari, and Internet Explorer, you’ve hit on the biggest challenge of Web design. My best advice for that is to write clean code, watch out for conflicts, and test in as many web browsers as possible.

Here’s a link to an article about testing browser differences:
http://www.digitalfamily.com/dreamweaver/resources/web-browser-test.html

I hope that helps you with your more advanced questions, but let me know if you want to go another round.

And finally, I’m thinking about offering an Advanced Class for students like you. Would you be interested in enrolling in a small online class with me and a few other students at your level? Please let me know.

Thanks,
Janine

I have recently upgraded to CS5 from CS3, and have also upgraded to your CS5 Dummies book.

In CS3 I frequently used Insert Media Flash button, but it doesn’t seem to be there in CS5, nor can I find any reference in your book. Has this function been moved, or has it been removed, which wouldn’t be good for me! If it has gone, do you have any suggestions as to what I can use instead for my link buttons?

Thank you for your time.
Ken

Hi Ken,

Thank you for buying my book. Sorry to confirm your fears, but the Flash button feature was removed in version CS4. Today, most professional Web designers use CSS to create visual effects for links. You’ll find a tutorial on a common technique for this on my Web site (these CSS features work the same in CS3, CS4, and CS5):

http://www.digitalfamily.com/dreamweaver/css-tutorials/css-navbar.html

I wrote another tutorial for Layers magazine that shows off a few variations on these techniques:

http://layersmagazine.com/use-css-to-style-your-lists-in-dreamweaver-cs34.html

I hope that helps you find the best solution for your links and I wish you all the best with your Web site,
Janine