Dreamweaver Archives - Page 6 of 19

Things I Learn from My Students

I’m teaching a beginning Dreamweaver class at UNM Continuing Ed this week. In Continuing Ed classes, it’s common to have adults who want to learn something new in hopes of improving their job chances. In web education classes of any kind, it’s common to have someone who’s been working in print and wants to transition over to the web. This class is no exception.

I’ve had students like that for all of the 15+ years that I’ve been teaching classes of this kind.

In class, we put a couple of rules in a style sheet to set up some font choices. We set a sans-serif font rule up for the body selector. Then we went through the heading selectors and picked a serif font. I explained a little about how everything in the body would display the sans-serif font. Then I gave a couple of minutes explanation of how the stylesheet placement of the rule for h1, h2, h3 etc. in the cascade would over rule the font set in the rule for body.

Then we moved on to something else. While the students were doing an exercise and I was walking around the room answering questions, one student told me she didn’t understand what was body text and how to style it. I reviewed what was in an HTML document body and told her we’d styled all the text with our rule for body. Then she said something that no one transitioning from print had ever said to me before. She said, “Oh, in print we always have a style for body text.”

Years of working with students who created a class called .bodytext in their style sheets and applied it to every single paragraph on a page suddenly made sense. Years of frustration telling students they didn’t need to do that because a single rule in a stylesheet took care of it flashed before my eyes. And I remembered other class names that students applied to headings and other elements that clearly were a print habit that didn’t translate cleanly to the web.

If only I had know that simple thing 15 years ago. It would make helping people transition from print to web so much easier. It gives me a more effective way to approach explaining how selectors work for those students used to print.

So I want to thank that student for removing the blinders from my eyes and helping me understand something that’s troubled me for years.

The Secret of Building a Table with Dreamweaver

It’s easy peasy to create a table in Dreamweaver. It’s not so easy to create a table in Dreamweaver that sticks to the ideal of separation of content from presentation and uses CSS rather than HTML to determine presentation.

If you want to build a table for your web page that does use best practice rules and will be responsive to every potential situation, there are a lot of things in Dreamweaver that you should not do. I’m going to show you what not to do, explain why, and give you a best practice alternative.

The insert table dialog box

Do not put anything in the table width, border thickness, cell padding, or cell spacing boxes. Do select the appropriate heading type for your table, and do enter a caption and summary if needed.

I added an X to the boxes that you should leave empty. Table width, border thickness, cell padding, and cell spacing options are all used to add HTML presentation to the table. You want to keep the width, border, and padding presentation rules in the CSS. It’s best to use percentage widths for the various table rules rather than pixels. (See Adding borders to data tables with CSS for information about adding border with CSS.)

The Document Window

When you create a table the way I just described, you see something like this in your Dreamweaver document.

Insert the cursor in the first table cell so you can enter text and Tab your way into the next table cell. As you enter text, the table expands to fit the text you’ve entered. Padding for the td cells and other width and spacing rules to make the table more attractive go in the CSS.

It’s possible to drag the borders of the table around in the document window. This is another thing you should not do. As you can see in the image below, when you drag the table borders to resize it, absolute pixel values appear and are written into the HTML. In your stylesheet, use the width property for selectors like table, th, and td to set widths in percentages or ems for your table.

The Properties panel

While you’re entering data in the table, you see table properties in the Properties panel. This is another set of options that you should not touch.

Do not enter pixel values in the width or height boxes. Do not select a background color for the table or for individual table cells. I’ve put an X in the forbidden fields in the image above. All of these options add HTML presentation to the table. You want to set these presentation values in the CSS. The image above shows the Properties panel with the HTML toggle selected. When the CSS toggle is selected, entering values into the width and height boxes also results in values coded into the HTML, not added to the style sheet as you might expect when the CSS toggle is active.

That’s it. Most of what Dreamweaver offers as table controls need to be left alone, and the majority of your work needs to happen in the stylesheet, not in the Document window. You can create a table that will work for all your users on just about any device if you learn what not to touch.

What are you telling students about DOCTYPES?

One of the classes I’ve been teaching at UNM Continuing Ed lately is Beginning Dreamweaver. The school uses Adobe Creative Suite 4 in the lab where I teach. The DOCTYPE options in DW 4 are either transitional or strict in HTML 4/XHTML 1.0.

Outside of the UNM lab, the most recent version of DW on the market is 5.5, which includes the HTML5 DOCTYPE. If the students go out and buy a commercial version of DW, they will get 5.5 and the option to choose HTML5.

Which means, when we look at the options for creating a new page in DW, we have to include HTML5 in the discussion of which DOCTYPE to choose, even though it isn’t there in the school’s DW 4 options.

Back in March, I wrote Syntax Style for HTML 5: Some Best Practice Recommendations. To summarize that article, the syntax style most like what was recommended for HTML was similar to the syntax for HTML 4.01 Strict.

I’ve been telling students two things about DOCTYPES. First, I tell them that it doesn’t really matter which one they pick as long as they pick one, because any one they pick will keep them out of quirks mode. Dreamweaver will correctly write the HTML for what ever they choose. Secondly, I tell them that if they are thinking of using HTML5 in their future work, to choose HTML 4. That instruction always feels oddly retro – go back to an older technology and forget about dealing with the seemingly more modern XHTML.

In my mind, the seemingly more modern XHTML has two drawbacks. First, it’s been abandoned by the W3C and won’t been updated. Second, the syntax for HTML 4 Strict seems a much better choice when working in HTML 5 because there’s no need to talk about XML and trailing slashes in empty elements and other things that don’t apply to HTML5. And HTML 4 Strict syntax rules match up with what was recommended as a best practice for writing under the new anything-goes rules of HTML5.

What DOCTYPE are you telling students to use these days?

Dreamweaver Accessibility

I went to Glenda Sims session at AccessU and ended up sitting by Matt May from Adobe and Dennis Lembree. You’d think with them right next to me, the iPhone camera would have done better, alas.

Glenda gave some great tips for making the most of Dreamweaver’s accessibility features. She also mentioned that WCAG 2.0 doesn’t require <th> cells to have scope=”row” or scope=”col” any longer. Instead, if the table is complex, use ids and headers.

Glenda also said that installing the WebAIM toolbar and the Worldspace plugin into Dreamweaver are two great tools to test for accessibility from within Dreamweaver.

What’s New in Dreamweaver CS5.5?

by Dhruv Kapoor

Normally with a point release you expect a couple of minor improvements but that is definitely not the case with this version of Dreamweaver. This new version has a heavy emphasis on features for multiple screen resolutions and mobile devices. This upgrade hosts a wide variety of fantastic surprises that hone most of the available features of Dreamweaver CS5.

This is definitely a must-have for anyone looking to develop applications for mobile devices and can be a great tool for advanced web designers. New features available in this release include:

FTPS support
jQuery code hinting
Full jQuery mobile support, together with over a dozen mobile widgets
A preview of pages at different screen resolutions without leaving your document window
Powerful phone gap integration that lets you use HTML, CSS, and JavaScript to create Android and IOS apps
Web font support
Total support for all CSS3 selectors
New tool for the creation of drop shadows and rounded corners in CSS3

In the New Document box, starter pages are available for jQuery mobile that enables you to make an easy web app that is compatible with all major platforms in a matter of minutes. If you want to create something a bit more complicated, you will be required to make your own code. Luckily, Dreamweaver CS5.5 provides you with full jQuery mobile and jQuery core code hinting. This streamlines the process and makes it much easier to reach your goals.

One of the most impressive features of this release is undoubtedly the phone gap integration. Simply build your app in HTML, CSS, or JavaScript and Dreamweaver will build the native version and install it into a simulator. For now, it can only be used to develop applications for the iOS and Android operating systems but there are plans to expand this capability to include other mobile operating systems later on.

Other enhancements that may not seem as major but are still infinitely useful include the ability to create image-free drop shadows and rounded corners using CSS3. Live View allows you to immediately see the effects of your design changes without switching between a browser and style sheet. It also now supports hsla() and rgba() color formats, making it much easier to use transparent effects on your web creations.

Of course nothing is perfect and Dreamweaver CS5.5 is no exception to the rule. For one, you must be careful about where you insert mobile widgets. Instead of splitting or moving outside of an element as Dreamweaver normally does, it inserts new code at whichever point you happen to be at the time. Though not a major failing, this can be highly irritating over time. It can also lead to disaster for those who are not experts at writing and understanding code.

Additionally, it has a way to go with HTML5. Though full HTML5 code hinting is available, you can only insert HTML5 parts by making code in Code View. Some also consider the $199 upgrade price to be a shortfall of this release since it is still a bit behind Netbeans and PHP storm. Of course, those options require hand coding so many users may consider the price difference to be worth it. Love it or hate it, Dreamweaver CS5.5 is a point release that offers the benefits of a full upgrade.

This Guest Post is by Dhruv Kapoor. Dhruv is an employee of Offshore Ally, a company providing the best virtual assistants and link builders online. He is passionate about gadgets, graphics, and technology in general. Connect with him via Twitter.

Big News from Adobe

In Introducing Adobe Creative Suite 5.5 Product Family, Adobe made some announcements important to educators.

First, they are moving milestone releases such as CS3, CS4, and CS5 to a two year cycle. The in between years will get updates like the just announced CS5.5. Here’s what they are doing to the web suite.

For Web folks: huge updates to HTML5 and Adobe Flash authoring tools, enabling designers and developers to deliver mobile applications on Android, BlackBerry Tablet OS, iOS and other platforms — and create rich browser-based content across screens. All the big HTML5 checkboxes are ticked in Dreamweaver CS5.5: jQuery mobile framework integration for browser-based content, PhoneGap’s in, as well as WebKit engine updates. We’ve also launched Adobe Flash Builder 4.5 Premium and the Flex 4.5 framework now includes mobile support. Now hundreds of millions of mobile devices can be targeted with content and apps, created through our web tools. Remember, Adobe tools support the development of both HTML and Flash content, don’t let crazy headlines make you think otherwise.

Secondly, they announced a subscription plan that means users will always have access to the most up to date version of the software for a monthly subscription fee. The Adobe announcement page does not show specific subscription pricing, but an article I linked to yesterday in a Useful Links post does gave a chart of subscription pricing.

Both these announcements are important to web educators, especially the news that Dreamweaver will come equipped to write HTML5.

HTML/Text editor recommendations

I got this email the other day:

I have a rather odd request to ask. I am trying to learn how to write web pages for fun and maybe more down the road. At present I have several different editors to choose from, and was wondering if you could give me some advice as to which one I should use as my primary editor. I have: Dreamweaver CS4, Notpad++(sic), TopStyle Pro 4.0.0.85 and UEStudio ’10 as my potential editors. The thing is I really want to learn hand coding from the ground up. I have both of your books, Intergraded (sic) HTML and CSS and Mastering Intergraded (sic) HTML and CSS for my learning the basics. I also have PDF books on learning JavaScript and HTML5, more books than I know what to do with.

I haven’t seen anyone talking about editors on a blog for a long time. Because of that, I thought I’d give a rather lengthy answer. And a lengthy answer sounds like a blog post, does it not? Here’s how I answered the email.

Each of those tools has its own pros and cons. If you are serious about hand coding, you might find UEStudio, with its excellent HTML text editor UltraEdit as a good choice. Coupling that with TopStyle Pro for help with writing CSS and you have the basics covered.

UltraEdit beats out Notepad in my book because you have color coding, search and replace, FTP, and much more that isn’t available with Notepad.

Dreamweaver – which can be used as a text editor in Code View – adds another dimension you don’t get from other tools. If you aren’t great at typing or spelling, which your email hints might be the case, using Code View in Dreamweaver to type code is pretty typo-proof. There are many site management tools in Dreamweaver: link management, validation tools, site-wide search and replace, built in JavaScripts, FTP, CSS tools, image editing and more. Plus you have the WYSIWYG view if you want it.

Any one of these tools can get the job done. Which do you feel most comfortable working in? Which one makes the most sense to you? That one is probably the right choice for you.

I have dozens and dozens of web design books at my house, too. I’ve read them all. I’ve given away sacks and sacks of them to Freecycle folks. There are more books to come. In this field, there’s always something new, always something more to learn. Get the basic building blocks of HTML, CSS, and JavaScript under control and that gives you the foundation to build on.