Category: WebTeacherTips

What to do with Dreamweaver’s invitation to attach more than one style sheet

Do you use Dreamweaver’s built-in layouts and sample pages to start a new design? Then this information is for you.

My precise topic is the ability to add more than one style sheet when you select a CSS layout. In Dreamweaver, when you open a brand new page, go to Blank Page > HTML. You can select a built in CSS layout, such as the 2-column elastic left sidebar one shown here. Among other options on the lower right, you have the option to attach a second style sheet to your layout page when it is created.

link icon will let you browse for another stylesheet

That’s really swell, if you have another style sheet all ready and waiting. Since the CSS layouts are all just shades of gray, it would nice to have a color scheme and some font choices all ready to go and to attach them from the first step. Click the link icon, browse for the style sheet, and when you click the Create button, your new page has both attached. Easy, right?

Browse for the second style sheet to attach

But here’s where it gets tricky. What if you don’t have a style sheet ready and waiting? What if you want to use one of the color schemes built in to Dreamweaver? These are found in the new file dialog under Page from Sample > CSS Style Sheet. They sport names like “Full design Arial Blue/Green/Gray.

a page from sample in the new dialog

It will be easy to use this style sheet. The trick is that you have to start by picking this Page from Sample before you pick your CSS Layout. When you’ve picked one and click the Create button, you get this message.

locked file message

Click View. You get an untitled style sheet that you can save by any name you want. Now you have a style sheet ready and waiting to link to your CSS Layout. Go through the new dialog again, pick your layout, and attach this style sheet at the same time.

You still have some work to do integrating the rules in your two style sheets so that they aren’t conflicting with each other. But you are off to a built-in Dreamweaver start.

Tagging a PDF

If you own Adobe’s CS3 suite, Acrobat 8 Professional was bundled with the product. To buy it separately costs $449, but if you own an older version of the full Acrobat software, you can upgrade for $159. If you are interested in making your PDFs capable of use by screenreaders or small screens where the content must reflow to fit the screen, you need to use a structured document with tags added. Tags can only be added to a document with a full version of Acrobat, the Adobe Reader isn’t capable of doing this.

I’m using Acrobat 8 Professional to demo these steps. Older versions of the full Acrobat software can also tag documents.

sidebar shows no tags availableOpen the PDF in Acrobat. You can tell if there are any tags already in the file by looking at the tags sidebar. In this example, there are no tags yet.

Use the Acrobat menu to add tags to your document.

add tags using the Advanced menu

In the Advanced menu, select Accessibility > Add Tags to Document.

a recogntion report

The first screen that opens in the tags sidebar is a Recognition Report, which points out some of the missing accessibility information. Take a good look at what you’re missing here. You’ll need to address each item to make the PDF document usable and accessible for the small screen and screen readers.. Then select the tag icon on the far left side of the sidebar to move on to the tags category.

the added tags are listed in the sidebar

The complete list of tags and figures are given in the tags sidebar. Each one can be individually opened to examine.

select the item's properties to edit

To make changes in Figures, first highlight the figure you want to edit in the document window. It will be highlighted in the tags panel. Use right-click or ctrl-click to select the Properties menu for the item.

edit properties in the touch up dialog

The Touch Up Properties dialog opens. Here you can add alt text and other accessiblility features.

edit tags in the touch up dialog

Selecting any tag in the tag sidebar and going to the tag’s properties will allow you to change any inappropriately labeled tags.

When you save and close the document, the Recognition Report will disappear, but you will still have access to the Tags sidebar when you reopen the document. If you want the information, you can run various accessibility reports using the Advanced menu.

If possible, get someone with a PDA or screen reader to check your file for problems.

An explanation of the abbreviations in a DTD

If you’ve never looked at a Document Type Definition (DTD), you’ve missed one a web designer’s most interesting experiences. I’m only kidding a little bit. You can download several flavors of DTD from the W3C and read them for your edification.

You see a lot of abbreviations and not much explanation of what it all means. I’ll explain a few of the abbreviations for you. Take a look at the information in the XHTML1-transitional.dtd for the HTML element body:

<!ELEMENT html (head, body)>
<!ATTLIST html
%i18n;
id ID #IMPLIED
xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml'
>

The two items in parentheses are elements that must be included. If you see a question mark after an element listed in parentheses, it means it may be included. If you see a plus sign, it means at least one of that element must be included.

ATTLIST is attribute list. What follows is a list of attributes that this particular element can have. %i18n; is an attribute related to internationalization and means that the element can be adapted to multiple locales. The first attribute is id which is defined as ID and #IMPLIED. #IMPLIED means the attribute is legal to include but not required. If it were required, it would say #REQUIRED.

An example of a #REQUIRED attribute would be the src attribute for the element img.

The next attribute you see is xmlns (xml namespace) which is defined as %URI;. Since this is preceded by a percent sign and followed by a semi-colon, the URI will be replaced by a declared value. In this particular case, the value is #FIXED 'http://www.w3.org/1999/xhtml'. In most other situations, a URI would not be fixed.

Two other abbreviations you may see are CDATA and PCDATA. The first, CDATA, means character data. In English, that means what ever string of letters you put there. For example, class CDATA #IMPLIED, tells you that the class can have character data as a value. On the other hand, PCDATA stands for parsed character data. This means not merely a string of characters, but some entities that may have to be escaped or interpreted by the parser (browser) to have special meaning. So you see things in a DTD like this: !ELEMENT script (#PCDATA).

Finally, you may see hyphens and zeros. For example, !ELEMENT UL - - (LI)+ . The hyphens (and/or zeros) travel in pairs and represent the requirements for a starting and ending tag. So - - means both a starting and ending tag are required, while - 0 means a starting tag is required, but an ending tag is optional. So in the example, !ELEMENT UL - - (LI)+ , a ul requires a starting and ending tag. But the br element, !ELEMENT BR - O EMPTY requires no ending tag.

Presentation: Ten Checkpoints of a Web Standards Based Curriculum

I presented this at HighEdWebDev 2007 today. It was presented as a powerpoint presentation. My narrative explained that this presentation was mainly about what sort of student learning outcomes I would expect to see in an institution where web standards were part of the curriculum. I did touch on a couple of important overall considerations as well.

I have captured only the slides and converted them into a movie. There is no sound. Please return to this post if you have comments or questions.

View the movie.

Technorati Tags: , , , , , ,

Presentation: New CSS features in Dreamweaver CS3

I gave a presentation for my local Adobe Users Group this week. Here is the presentation in your browser.

I’m making the presentation available to teachers. It is not meant to be used in a browser, but presented in a classroom in Dreamweaver. I added a link to a zip file to the presentation, so you can download the whole thing and use it in Dreamweaver in your own classroom. There is a readme included in the zip file that explains a bit about how to show the new CSS features in Dreamweaver CS3 while doing a classroom demo in Dreamweaver. I’d love your feedback if you use the presentation.

Technorati Tags: , ,

The definition list

Definition lists are the neglected step-children of list elements. Many people struggle with how to code something, going through all sorts of complications when all they really need is a definition list. A definition list is meant to include a term and its definition or definitions. But that can be stretched quite a bit, and has been. Definition lists are used for dialog, FAQs, navigation, and photo galleries.

Here is the syntax, which uses dl (definiton list), dt (definition term) and dd (definiton data) to build the list:

<dl>
<dt>a term or title or label</dt>
<dd>some data about the term</dd>
<dd>other possible data about the term
<p>perhaps even a block level element such as this paragraph</p></dd>
</dl>

That renders like this:

a term or title or label
some data about the term
other possible data about the termperhaps even a block level element such as this paragraph

As you can see, the default style shows the dt, with the dd indented under it. I used two dd elements to show that a dt can have more than one dd. The fact that a block level element can be nested inside a dd is handy to know, especially if you are using the list to write dialog and a character needs to speak for a number of paragraphs.

So much for the default style. If you add CSS, you can do some of the magic I mentioned before. There is an older but highly relevant article at MaxDesign called Definition Lists: misused or misunderstood that you should read. It gives you some philosophical overviews of the semantics of using definition lists in various ways, but more importantly, it provides a large set of styled definitions list examples. Be sure to look at the examples.

Tip: Using cite in HTML

It’s true, cite can be confusing. It is an element and it can also be used as an attribute. Here’s what the W3C says:

CITE:
Contains a citation or a reference to other sources.

What’s the proper semantic way to markup a citation of a book title or a magazine title? The answer is with the HTML cite element. The cite element causes the title to be rendered in italics.

How does that “reference to other sources” part work? Well, you use
cite as an attribute in those cases. Here are some examples that will make it easier to explain.

Cite: the element

Suppose you read this article in The New York Times. You want to refer to the name of the newspaper in a reference to the article. In other words, you want a citation for The New York Times. Here’s how to use cite as an element to create the citation.

<p>I read in <cite>The New York Times</cite> about Google selling ads for mobile phones.</p>

Cite: the attribute

Suppose you want to quote something from the article, perhaps as a blockquote? Here’s how to do that. It shows the use of both the cite element and the cite attribute.

<p>According to <cite>Google to Sell Web-Page Ads Visible on Mobile Phones</cite> in today’s <cite>New York Times</cite>, </p>

<blockquote cite=”http://www.nytimes.com/2007/09/18/technology/
18google.html?_r=1&ref=technology&oref=slogin”>The company said that its new product, AdSense for Mobile, would establish a cellphone advertising network in which Google would match ads with the content of mobile Web pages, much as it does online.</blockquote>

Note that the URL for the article source is given in a cite attribute in the blockquote. A cite can also be used as an attribute in other block level elements such as p.