Join James Williamson for an in-depth discussion in this video Setting a default browser, part of Dreamweaver CS4 Essential Training.
One of the things that you realize early on in working with web sites is your code is always at the mercy of the user's browsers. It's a crowded browser market today with Internet Explorer, Firefox, Safari, Opera and Google's Chrome browser being only a few of the browsers that your page might encounter. As such, it's always a smart idea to test your page in as many as browsers as you can, when you're developing your site. This can prevent rendering errors from one browser to the next and help you ensure a consistent experience, all that is there to your site. Dreamweaver also allows you to set up multiple browsers for testing and gives you an internal testing environment using Live View.
So here we have our photos.htm page open from our Lifestyle sub-directory and I want to go ahead and check out Live View before we move on to testing in browsers. I'm going to go over to my panels and I'm going to collapse this down to icons so that I have got a little bit more screen real estate here. And I'm going to go up to my Document tool bar and turn Live View on. Now Live View uses the Webkit Rendering Engine, so that's the same engine that Safari and Chrome uses. So previewing here gives you a good idea as to what it might look like in those browsers. The thing I love about Live View of course is that all the interactivity is built into it. So you can check out all of your Java scripting and things like that including CSS Virtual libraries here in Live View without having to preview in the browser.
So I'm going to turn Live View off. Now if I did want to preview this in the browser, I can stay right on the Document tool bar, grab this little icon where the planet is and preview in any browser that I have set up, in this case, I can preview it in Firefox. And I can check the functionality in Firefox to make sure that it was still doing what I expected to do, which it is. You may have noticed that previewing in Firefox has a function key beside it. So I could hit F12 and automatically preview without having to come to the menu which is really nice but how you set things like that up and how do you set up multiple browsers, maybe I have got another browser that I want to use. How do I set that up? Well we do that by using Dreamweaver's Preferences. So again on the PC, we are going to go to Edit, Preferences, and on the Mac, you guys would go to Dreamweaver Preferences. And there's a long list of Categories on the left hand side. I'm going to go to Preview in Browser. So here I can see that Firefox and Internet Explorer are the only two that are currently set up. Well I'm going to add Google's Chrome browser. If you have got multiple browsers installed on your Hard drive, you can choose anyone you want like Opera or Safari or whatever you would like that you don't see listed here. Feel free to go ahead and download some of those browsers, they all are free, and as I have mentioned before testing in as many browsers as you can is a really good idea. So I'm going to click +, and now I have got to go find Google's Chrome browser.
So I'm going to hit Browse. And it's not always in the easiest place to find either. I'm going to go up and I'm going to keep going up until I'm on my Local Disk and I'm going to find Users, and there I'm. And I'm going to go to my Application Data, if you don't see this on Windows, you might actually make sure in your File View options that Hidden Files are turned on. So I'm going to go to Appdata, Local, Google, Chrome, Applications, you have to keep going until we find it. And we choose Chrome. Now at the time of this recording, there was no Chrome browser for the Mac, but I'm sure one is coming so if you're on a Mac, and you have downloaded a version of Chrome browser, you'll probably find that in your Applications folder. So I'm going to find Chrome, click Open and why don't I just go ahead and make that my Secondary browser. So I'm go ahead and click OK here. And notice that, that one now has a hot key of Ctrl+F12 and on the Mac your Secondary browser will be Command+F12. So I'm going to click OK. Now that the Secondary browser is set up, I can just hit Ctrl+F12 and that's going to launch that in Google's Chrome browser, and again I can test functionality here and it's working out as fine as well.
Now in every browser I have tested so far, in the Webkit Rendering Engine, in Chrome, and in Firefox, my page is looking and acting exactly the same which gives me a lot of peace of mind about how users are going to experience my site. Previewing your pages as you're working on them will help you prevent small errors from becoming bigger errors later on and help ensure a consistent experience for all of your users.
- Understanding current web design practices
- Learning and customizing the Dreamweaver interface
- Adding text and structure to an XHTML document
- Implementing layouts and designs with CSS
- Controlling all aspects of typographic presentation
- Working with images, Flash, and video
- Using behaviors and Spry widgets
Skill Level Beginner
Q: In Dreamweaver CS4, is it possible – or recommended – to use a table within a form, in order to line up the fields?
A: Using tables to layout forms is a common web design practice. There are drawbacks to doing so, because it reduces the accessibility of the form, but many, many designers use this technique. There are many ways to layout forms using CSS that don't require tables (see Chapter 8, "Styling Forms" in the Dreamweaver CS4 with CSS Essential Training title), but the forms will work fine should one choose to do so.
Q: How do I direct a link to an FLV movie to open in new browser window, using Dreamweaver CS4?
A: To link to an FLV in a new browser window, create a separate HTML page with nothing but the Flash video on it. Set the video to “autoplay = true”, since clicking the link will be all the input needed by the viewer to play the video. Align the video to the center of the page. (Use a div tag and center the div tag on the page). Make sure the new window opens to the size of the video player, making sure to allow for the browser;'s title bar, menus, chrome, etc. Also, if desired, offset the video byadding left="" and top="" attributes to the behavior. Enter the pixel amount for left and top offset or the window will always open aligned to the top left of the screen.
Q: The author states that the Mac OS version of Dreamweaver CS4 does not support the direct insertion of Word files, and that copy and pasting text from a Word file will format the text as links. How does one add and format text in Dreamweaver CS4 on a Mac, without turning the text into links?
A: Although the Mac version of Dreamweaver does not support the direct insertion of Word files, you can copy and paste from Word into Dreamweaver (as is recommended in the tutorial for Mac users). To control how the text is formatted, go to Dreamweaver > Preferences and select the Copy/Paste category. From there, Mac users can access the same controls that Windows users get when inserting a Word file. Just remember to select the proper preference before copying and pasting from Word.
Q: Is there any way to change a nested template from a two column structure to a single column structure? As explained in the "Working with nested templates" video, it appears that the nested template must maintain the same basic structure as the main template. If one is using a template with a header, footer, main content area, and sidebar, is it possible to create a template without the sidebar?
A: Making these changes is possible, and there are a few ways of doing it. First, one could make the sidebar an optional region. For info on that, check out the “Creating optional regions” video of the Dreamweaver CS5 Essential Training title. (The technique works the same in CS5 and CS4).
Q: Upon selecting Edit in Flash for a SWF in Dreamweaver CS4, an error message appears that says:
Unable to launch Macintosh HD: Applications:Adobe Extension Manager CS4:Adobe Flash CS4:Adobe Flash CS4.app. Please be sure that this application exists and that there is enough memory to run it.
Ctrl-clicking the SWF in the Design view and choosing Go to source file from the contextual menu and then selecting the FLA file from the list will enable the Edit button, but the file opens in Flash independently and not via Dreamweaver. What is causing this error?
A: Unfortunately, Dreamweaver's round-trip workflow is somewhat buggy, so there are several possible explanations.
The lynda.com exercise files are not structured the same way a normal website would be, so redefining sites and moving files around as you do from lesson to lesson can cause problems.
Usually the Edit button will be grayed out if Dreamweaver doesn't know where the original FLA file is located (as can happen when they are in different directories). This can also happen if the FLA and the SWF have different names. ("file1.fla" publishs "mymovie.swf" for example.)
One possible solution is to set the source in the Properties Inspector. Another is to re-establish the link to the source file via the point-to-file icon. If the problem persists, browse for the FLA file if prompted by Dreamweaver. This should establish a link between the SWF and the FLA file.
Unlike the PSD integration, Dreamweaver does not import the FLA file, but the SWF, so Dreamweaver has to be able to "see" the source FLA file in order to make the round-tripping work. As the files are moved around between multiple programs, they go through several rounds of compression. This alone can cause features like this to result in an error.
To test if the problem is with the system and not the software, delete the SWF file from the page, re-import it using the Insert panel or menu, and then save the page. This should clear out any caching problems with the old SWF file and re-establish the link.
Q: I am unable to recreate the exercise enabling me to make new CSS rules for the body and header text, as shown in "Understanding Element Selectors." The headers don't update after I enter the H1 rule.
A: The most likely explanation is that the wrong option is selected in the CSS Rule Definition dialog. Make sure the pull-down menu says Tag for the selector type, not Compound, which it tends to default to. That should resolve the problem, and all for new CSS styles to be created.