[ LiB ] |
As a web designer, you need to work as efficiently as possible with text. This includes creating and editing it efficiently , and having a good idea what makes well-structured text.
The name of the game for good HTML is separation of form and content. Text in an HTML document is structured with tags that indicate the logical purpose of each piece of text: heading, subheading , paragraph, list, and so on. This is content. Form is how that text is presented so that its logical structure is apparent. Form can be controlled by the browser, screen reader, or other device; it can also be affected by Cascading Style Sheets, which indicate how certain logical elements should be handled.
Why is this distinction important? For one thing, it's more efficient. Setting every single heading in a website to a certain size, font, and colorreferred to as presentational markup is tedious and difficult to update. Identifying every single heading as a heading and then letting the browser or a style sheet control the formatting of all headingscalled structural markup is much more efficient.
Not only is it more efficient, but structural markup is more flexible and, therefore, more accessible. A screen reader, for instance, won't know that some large, bold text on the page is supposed to be a headingbut it does know that text structured with the h1 tag is a heading. The W3C's accessibility guidelines include several recommendations that encourage structural, as opposed to presentational, markup for text:
3.3 Use style sheets to control layout and presentation.
3.5 Use header elements to convey document structure and use them according to specification.
3.6 Mark up lists and list items properly.
3.7 Mark up quotations. Do not use quotation markup (such as blockquote tags, for instance) for formatting effects such as indentation.
For this reason, the font tag and its attributes ( size , color , and face ) have been deprecated in HTML in favor of using Cascading Style Sheets for formatting; and bold and italic ( b and i tags) are discouraged in favor of em (emphasis) and strong tags. Font, bold, and italic all relate to visual presentation only.
Dreamweaver can help you create properly structured text, but only if you work with the program.
By default, Dreamweaver is set up to do this. Whenever you use the B and I buttons in the Text Property Inspector, the program adds em and strong tags. You can change this setting in the Preferences dialog box (see Figure 4.10). Don't! The default setting is better.
The Indent and Outdent buttons on the Property Inspector look a lot like similar controls in word-processing programs, but they're not! When applied to regular paragraphs of text that aren't list items, they add blockquote tags. When applied to items in an ordered or unordered list, they create subcategories of the list. These are their correct structural uses. If you just want to indent a paragraph of text, but it isn't a block quote, use CSS to create an indented style of paragraph. If you want your list items indented farther than they are by default, use CSS to modify the li tags.
Check out Chapter 11, "Using Cascading Style Sheets," for all the ins and outs of Cascading Style Sheets. |
This is just an extension of the previous point. Think structurally when applying tags and presentationally when applying style sheets. The top level of headings in a document should be h1 , not h2 or h3 . If the h1 tag creates text that is too big for your taste, use CSS to modify its presentation instead of just not using it. Definition list formatting is only for definition lists, not to create staggered indent effects. And so forth. At least some of your visitors will thank you. You'll thank yourself when you're maintaining this document later. Your colleagues will thank you when they have to update the document the next time you go on vacation. Like eating your vegetables and buttoning up your overcoat, these are just the right things to do.
What if you inherit a page that violates these rules? Dreamweaver has a variety of tools to help you fix problems.
font tags are never a good idea. To remove one font tag, do this:
To quickly remove all font tags from one or more documents, perform a Specific Tag search, like this:
You can use another Specific Tag search to change b and i tags to strong and em . Do this:
You can use this same technique to get rid of blockquote tags, replacing them with p tags, although it's wisest to choose Replace instead of Replace All so you can examine each occurrence and make sure it's not really a quotation that needs a blockquote tag.
A multiply indented list consists of one ordered or unordered list inside another, not for the purpose of creating a sublist, but simply to increase the indent. The code looks like this:
<ul> <ul> <li>Apples</li> <li>Bananas</li> </ul> </ul>
To eliminate these occurrences one at a time, you can select any item in a list, find the double set of ul or ol tags in the Tag Selector, right-click on one of the two tags, and choose Remove Tag from the contextual menu. To quickly find and eliminate them across an entire document or site, you can perform a Specific Tag search for a ul or ol tag inside another ul or ol tag (see Figure 4.14), but you'll have to replace them one at a time and carefully examine each occurrence because the search will also find legitimate nested lists.
Whitespace is a visual concept and, therefore, is related to formatting, not structure. So why discuss it here? Because there's nothing wrong with a little whitespace, as long as it doesn't actually interfere with structure.
In Dreamweaver, pressing Return or Enter ends the current paragraph and begins a new paragraph. In the source code, this ends one block (paragraph, heading, list item, and so on) and starts a new one. In Design view as well as in the browser, all breaks between blocks are displayed with a double space. This is often called a hard wrap .
Sometimes you want a new line but don't want a new block element. You don't want the extra space or you don't want to create a new list item, for instance, In these cases, press Shift+Return or Shift+Enter. This ends the current line and begins a new line. In the source code, a br tag is entered within the current formatting block. In Design view and in browsers, it creates a new line with no extra spacing, bullets, and so on. This is often called a soft wrap .
Line breaks are very easy to abuse, however, and can cause problems if you're not careful. What happens, for instance, if you carefully insert line breaks throughout your text and the browser rewraps the text because of user settings or window size? Figure 4.15 shows what ugly results can happen.
Remember also not to use line breaks to create bad structuring. If you want no extra space between a title and its following text, for instance, don't just separate the two with a line break. This obliterates the structural difference between title and text. Instead, use CSS to eliminate the extra space, like this:
CSS control of the bottom margin doesn't display correctly in Netscape 4. x . |
A nonbreakig space ( ) is just what it sounds like: a space that is guaranteed not to wrap to the next line, no matter how the automatic text wrap happens. But it's more than that. Browsers ignore extra white-space in HTML code. But a nonbreaking space creates a space between words or other elements that the browser is not allowed to ignore. The easiest way to create a nonbreaking space in Dreamweaver is to press Shift+Ctrl+Spacebar (Windows) or Opt+Spacebar (Mac). But you can also create one by choosing the Nonbreaking Space object in the HTML Insert bar or Insert > HTML > Nonbreaking Space.
Dreamweaver also creates nonbreaking spaces for you in a few situations. Any time you create an empty paragraph, for instance, Dreamweaver inserts a nonbreaking space to force the browser to pay attention to the paragraph. (Completely empty paragraphs are considered meaningless whitespace and are ignored by browsers.) The program also inserts nonbreaking spaces into empty table cells, for the same reason that some browsers don't display empty table cells correctly.
Admit it, how many times have you done this? Hit the Return key a few extra times to create a big whitespace between page elements? Guess what? That's cheating! Dreamweaver makes it so easy, inserting those nonbreaking spaces in your empty paragraphs to make sure they display. But it's not really good structure. What's logical about a paragraph full of nothing? A much better way to add space between items is (you guessed it!) CSS.
Everybody loves lists. Whether they're bulleted lists or numbered listsunordered or ordered, in HTML-speakthey help create read-at-a-glance content for web visitors in a hurry. You can do a lot to make your lists better looking and better structured.
You don't want round black bullets in your bullet lists? You want "abc" instead of "123" in your numbered lists? This is a simple matter of setting the type attribute for the list or list item. The code looks like this:
<ul type="square"> <ol type="a">
List types can be set in Dreamweaver in the List Properties dialog box, available from the List Item Property Inspector. To make this happen in Dreamweaver, place the insertion point somewhere within the list and, in the Text Property Inspector, click the List Item button. This opens the List Properties dialog box (see Figure 4.17).
From here, you can use the List Type drop-down menu to specify what kind of list it is. Even though this is called List Type, it doesn't supply a type attribute for the list; instead, it changes the tag that creates the list:
Ordered (ol) Creates a numeric, alphabetical, or otherwise ordered list
Unordered (ul) Creates a bulleted list
Directory (dir) Creates a multicolumn directory list (this tag is deprecated).
Menu (menu) Creates a single-column menu list (this tag is deprecated).
Depending on what you choose here, different options become available in the rest of the dialog box.
To determine the list's type attribute, use the Style drop-down menu. Table 4.4 lists the possible types for different list kinds.
Kind of List | Style | HTML |
---|---|---|
Unordered | [Default] | No type attribute is added; the browser determines style. |
Bullet | type = "disc" | |
Square | type = "square" | |
Ordered | [Default] | No type attribute is added; the browser determines style. |
Number(1,2,3) | type = "1" | |
Roman Small (i,ii,iii) | type = "i" | |
Roman Large (I,II,III) | type = "I" | |
Alphabet Small (a,b,c) | type = "a" | |
Alphabet Large (A,B,C) | type = "A" | |
Directory List | ||
Menu List |
For ordered lists, you're also given the opportunity to specify where the list count starts (at 1, 2, 3, and so on). Enter a number in here, even if you've chosen a non-numeric type such as Alphabet. This adds a start attribute to the list tag, like this:
<ol start="5">
Finally, in the bottom of the dialog box, you can choose a New Style, which adds a type attribute to the particular list item you had selected when you opened this dialog box:
<ol type="1"> <li> <li type="a"> <li>
This changes the type of only that one list item.
Bullet types are nice, but what if you want graphic bullets for your unordered lists? CSS can help you! Do it this way:
Of course, this isn't the only way CSS can help you format your lists. Font, text size, color, and more can all be set using CSS. To increase or decrease the amount of indentation given to list items, or the vertical space between list items, set the margin properties (available in the Box category of the CSS Style Definition dialog box). See Chapter 11 for more.
When working with text, you will no doubt encounter a need for special characters such as accented letters , copyright symbols, or the angle brackets used to enclose HTML elements. To use such characters in an HTML document, they must be represented in the HTML by special codes called HTML entities. They take the form &code , in which code is a word or numeric code indicating the actual character you need to display onscreen. There are hundreds of HTML entities for special characters. Table 4.5 lists some of the most common ones.
Name | Appearance | Keyboard Shortcut (WIN) [*] | Keyboard Shortcut (MAC) | HTML Entity |
---|---|---|---|---|
Opening Single Quote | ' | Alt+0145 | Opt+] | ‘ |
Closing Single Quote (Apostrophe) | ' | Alt+0146 | Shift+Opt+] | ’ |
Opening Double Quote | " | Alt+0147 | Opt+[ | “ |
Closing Double Quote | " | Alt+0148 | Shift+Opt+[ | ” |
Em Dash | Alt+0151 | Shift+Opt+- | — | |
En Dash | Alt+0150 | Opt+- | – | |
Copyright Symbol |
| Alt+0169 | Opt+G | © |
Trademark Symbol |
| Alt+0153 | Opt+2 | ™ |
Registration Symbol |
| Alt+0174 | Opt+R | ® |
[*] Windows keyboard shortcuts are ASCII codes and must be entered by pressing and holding the Alt key, typing all four numbers specified, and then releasing the Alt key. The numbers must be typed using the numeric keypad, and Number Lock must be on.
Some special characters are easier to insert than others. To insert an ampersand, for instance, just press Shift+7 while in Design view, and Dreamweaver will substitute the correct HTML entity ( & ). If you know the keyboard shortcuts your operating system uses to create other characters, you can also use those in Design view, and Dreamweaver will enter the correct code. On Macintosh, for instance, Shift+Opt+] creates an apostrophe. In Dreamweaver, it creates the ’ ; HTML entity. Table 4.5 lists Windows and Macintosh keyboard shortcuts for special characters.
Automatic insertion of entities based on keyboard shortcuts might not work if your document doesn't have the default encoding scheme (Latin-1). See Chapter 3, "Creating and Working with Documents," for more on encoding schemes and Dreamweaver. |
The most commonly used HTML entities are easily accessible in Dreamweaver through the Insert > HTML > Special Characters submenu. When you want to insert one of these characters, just put the insertion point where you want it to appear and choose one of the commands here (see Figure 4.19).
If the special character you need is not listed, choose the Other Character object from the Insert bar (refer to Figure 4.19) or use the Insert > HTML > Special Characters > Other command. This opens a new window from which you can choose a special character (see Figure 4.20). When you click a character icon, it appears in the text field box at the top of the window. You also can type your own special character code into the box.
If you've got a whole page full of text in front of youor, worse , an entire site's worth of pagesthat have already been typed without the benefit of HTML entities, the last thing you want to do is hunt through it to replace items one by one. It's time for a little finding and replacing! Do it this way:
Here's a special bit of efficiency overdrive. If you find yourself doing this a lot, wouldn't it be nice to save the search criteria to make these searches easier? Do this:
Do you often use a special character that isn't on the Insert bar? Adding a simple bit of code such as a special character to the Insert bar is not difficult. It's covered in the section "Creating Object Extensions" in Chapter 29, "Creating Your Own Extensions." |
Have you ever had to build a web page out of text that doesn't exist yet? Your boss or client promised to get you that copy for the home page by Friday, but it just didn't happenand now you need to design the page. For years , designers have been using fake text, often called greeking , just to fill the spaces and indicate what the final design will look like without having any actual text. Weirdly enough, this greeking is usually created from a form of fake Latin (not Greek), always starting with the words Lorem ipsum :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
It doesn't mean anything, but it looks good. It lets you see what the finished design will look like, estimate how many words will fit in a given area, and so forth.
In Dreamweaver, stationery-based designs created from the New Document dialog box's Page Designs category are built with this greeking (see Figure 4.21). So are many of the predefined snippets available in the Snippets panel.
How can you easily put greeking into your documents? Many designers have a special text file that they just open when needed and copy from. But if you want to be a little bit slicker, you can download one of the fake text extensions available on the Dreamweaver Exchange. These include Latin Text, Insert Celestial TechnoBabble, and Insert Corporate Mumbo Jumbo.
To visit the Exchange, choose Help > Dreamweaver Exchange, or launch your browser and go to www.macromedia.com/cfusion/exchange . |
Whenever you check your spelling (Modify > Check Spelling), Dreamweaver consults its own dictionary as well as your personal dictionary. You're also given the chance to add new words to your personal dictionary (see Figure 4.22). But what if you need a lot of your own words added to your dictionary? It's no fun to add them one at a time through the Check Spelling dialog box. And you don't have to!
Dreamweaver keeps its spelling dictionaries in two places. The main dictionaries consist of a series of TLX and CLX files in the main Configuration folder, which is in the Dreamweaver application folder. The user's personal dictionary doesn't exist until you've added at least one word through the Check Spelling dialog box. So start by opening or creating a document and typing in a word that you know is not in the dictionary (such as your name or any weird made-up word). Then check spelling (Modify > Check Spelling) and, when Dreamweaver tries to correct your made-up word, click the Add to Personal Dictionary button.
Dreamweaver creates your personal dictionary as a text file called Personal Dictionary.tlx, which you can find in your personal application support folder. If you're using Windows 98, look here:
c:\Program Files\Macromedia\Common\Personal Dictionary.tlx
For any other version of Windows, look here:
c:\Users and Documents\ user name \Application Data\Macromedia\ Common\Personal Dictionary.tlx
Substitute your username where indicated here. If you're the only user on your computer, you might have to look in the Default User or All Users folder.
Unless you have Windows configured to show invisible files, the Application Data folder will be invisible. To make it visible, choose Tools > Folder Options and bring the View Options tab to the front. Select Show Hidden Files. |
If you're on a Mac, look here:
/Users/ user name /Library/Application Support/Macromedia/Common/ Personal Dictionary.tlx
Substitute your username where indicated here.
Open this file in a text editor. The contents will look something like this:
#LID 24941 Gutman i spuddlyi
Each spelling entry consists of a paragraph containing the word to be spelled. To add more words, just type them in here, separating each with a hard return. Make sure to also add a return after the last word, or Dreamweaver won't see it.
For more on how Dreamweaver is configured, see the section "How Dreamweaver is Configured" in Chapter 28. |
When you've gone to all this trouble, you might want to share your dictionary with coworkers. Just put a copy of your Personal Dictionary.tlx file into the other user's personal application support folder, using the same file paths listed here.
In this exercise, you start with a web page that has already been builtbut built incorrectly. Your job is to identify the problems and fix them as efficiently as possible, using Dreamweaver to help you. Before you start, download the chapter_4 folder from the book's website at www.peachpit.com to your hard drive. Define a site called Chapter 4, with this folder as the local root folder.
This document now has well-structured text markup. The only problem is, it doesn't look nearly as nice as it did before you started. How do you get it back to its beautiful self without compromising this structure? That's right! Apply CSS. Read all about it in Chapter 11.
[ LiB ] |