| Type on the Web is as tricky as it gets. It's unpredictable, you have minimal control, and if you're a designer, it's enough to drive you mad. The problem with type is that the Web browser will render it, based on your suggestions, if you're not happy with the default typeface of Times New Roman. However, there is a glitch end users can specify to their browsers how they want the fonts to appear when they visit Web sites. There are also issues with type size; for example, type on a Macintosh is about 75% of the size of type on Windows. The best way to control text, to have it appear the way that you want it to appear, is to use a cascading style sheet. Ultimately, it does help to understand how type on the Web works without a style sheet, but if you're already familiar with that, you may want to move on to Chapter 10, "Cascading Style Sheets," which covers Dreamweaver's CSS styles in exhaustive detail. Text Formats You can format text in an HTML document in several ways. The first is a heading format, which you can choose in the format drop-down menu in the Properties Inspector. A heading is created in the HTML code by using an <h1> through an <h6> tag, which is selected by choosing heading 1 to heading 6 in the Properties Inspector. These tags define type to appear in a different size; the text will appear bold and will automatically have a space or carriage return associated with it. There is no way to reduce the leading of text formatted with the heading tag. As you can see in Figure 4.9, the heading sizes gradually become smaller in size as the heading number gets larger. For example, a heading 1 tag is much larger than a heading 4 tag. Figure 4.9. Notice how the headings vary in size, although most take on a boldface attribute.
Another thing that is important to understand about headings is they don't necessarily have a font size associated with them. The typeface you are using will appear either smaller or larger, in comparison to other typefaces, when a particular heading format has been applied to it. You can set text to a heading format in two ways. The first is to highlight whatever text you want to format and in the Properties Inspector choose a heading size, as shown in Figure 4.10. Figure 4.10. You can easily apply a heading format to text using the Format drop-down menu in the Properties Inspector.
The second way to apply a heading format to text is to select the text within the document and choose Text, Paragraph Format, Heading. In the menu, you can choose any heading size from 1 through 6. In that menu, you'll also notice keyboard shortcuts, as shown in Figure 4.11. Figure 4.11. In the Text, Paragraph Format submenu are choices for heading sizes and their associated keyboard shortcuts.
Formatting Text Using Paragraph Like the heading format, the paragraph format within Dreamweaver uses a common HTML tag. In this case Dreamweaver uses the <p>, or paragraph tag. This tag is placed within the HTML whenever the Return (Mac) or Enter (Windows) key is pressed. Anything between an open <p> paragraph tag and a closing </p> paragraph tag is considered by the Web browser as a paragraph. As the browser resizes, you'll notice the only thing to change within the paragraph is how the text wraps around the body of the browser. NOTE Often, developers do not want to create a new paragraph, but perhaps a new line. If you wanted to create a line return, but not a paragraph return, press Shift+Return (Mac) or Shift+Enter (Windows). This creates a break, which is accessible also through the Insert Panel under the Characters tab. This will insert a <br>, or break tag.
When you press Return or Enter, Dreamweaver automatically adds a paragraph tag. However, if you press Return or Enter more than once, Dreamweaver adds not only a paragraph tag, but with the paragraph tag will be a nonbreaking space special character, as shown in Figure 4.12. Figure 4.12. In the HTML, Dreamweaver adds a nonbreaking space special character within the paragraph tags.
Without this nonbreaking space, the extra line space would not appear in a Web browser, despite the fact that the line space is visible in Dreamweaver. Which brings me to my next point what is a nonbreaking space? A Web browser does not recognize more than one space. For example, if you want to add more space between words, you press the spacebar a couple of times. A Web browser recognizes only one of those spaces and ignores the rest. Often, however, you might want to add more than one space. You can insert a nonbreaking space, which is located in the Insert panel Characters tab, as shown in Figure 4.13. The keyboard shortcut to insert a nonbreaking space is Shift+Command+Space (Macintosh) or Shift+Ctrl+Space (Windows). Figure 4.13. You can add a nonbreaking space by clicking the Nonbreaking Space button in the Insert panel, under the Characters tab.
However, a new feature inside Dreamweaver MX allows multiple spaces as you type, so if you press the spacebar more than once, Dreamweaver automatically inserts a nonbreaking space tag for you in the HTML code. You can set this option in the Preferences. Choose Edit, Preferences. This launches the Preferences dialog box. Inside the dialog box, be sure to have the General category selected. In the center of the dialog box in the Editing Options section, check the option Allow Multiple Consecutive Spaces, as shown in Figure 4.14. Figure 4.14. The Preferences allow for multiple spaces.
Preformatted This format is a bit old school, and I don't recommend it too much. However, you may find it useful in some project, which is why I include it here. Basically what it does is allow you to type in HTML with as many spaces as you want, in terms of pressing the spacebar several times, and the browser will recognize and render those spaces. It's a bit unpredictable, but sometimes it can be good enough to yield results that you're looking for. Figure 4.15 is an example of how the preformat can be used; notice the code as well as what is displaying in the design view. Figure 4.15. You can use the preformatted format option in the Properties Inspector to have browsers render spaces in your HTML code.
Choosing Typefaces The way typefaces or fonts work on the Web is very different from type in print. Again, many of the same problems, such as the appearance of text on other computers, will come into play when you're dealing with type on the Web. Remember, the machine you're developing on can be very different from another machine that will actually be viewing your Web site. The first thing you must realize is that for an end user to view a specific typeface, it must be installed on that person's machine. If you're using an obscure font that most people won't have when developing your site, the ultimate outcome will be a page that doesn't look like the design you intended. It's always better to use common typefaces such as Arial, Helvetica, Times, Verdana typefaces that ship with operating systems. As Figure 4.16 illustrates, you can choose from a group of fonts in the Font drop-down menu in the Properties Inspector. Figure 4.16. The default font list in the Properties Inspector.
In these font options, when you pick a typeface, you really end up picking more than one. For example, if you pick Arial, you also choose Helvetica and Sans Serif. What gives? Well, this is protection for the Web developer. If you want your type to appear in an Arial typeface, and if the end user does not have Arial installed, the Web browser will look for Helvetica, and if that is not available, it will use a default machine Sans Serif typeface. You can, of course, create your own or edit the existing font list. This next exercise will demonstrate how. Notice that the first selected font is called the Default Font. If you choose Default Font, the text will be rendered by the default font set by the end user's Web browser's preferences. The default font normally is set to Times New Roman, but it can easily be changed by an individual by accessing the font preferences of the Web browser. Edit the Font List in the Properties Inspector In this exercise, you'll edit the existing font list by adding your own typefaces to the list of options. I encourage you to use caution when selecting typefaces to add to the font list. It's very important to remember that end users will need the typefaces you select on their machines. This Edit Font List feature is best suited to developers creating intranet sites, where the developer has a better idea as to what the clients have installed in their systems. -
Open or create a new document. When the document is open, be sure to have the Properties Inspector open. If the Properties Inspector is not visible, choose Window, Properties. -
In the Properties Inspector's Font drop-down menu, choose Edit Font List. This launches the Edit Font List dialog box as displayed in Figure 4.17. Figure 4.17. You can easily access the Edit Font List dialog box by choosing the Edit Font List option in the Font drop-down menu in the Properties Inspector.
-
To create your own addition to the font list, select a typeface from the available fonts selection box in the bottom-right corner. After the font of your choice is highlighted, press the left arrow button to add the font to the Chosen Fonts box. You can add as many fonts as you like, but three or four should be enough. -
If you're happy with your font selection and would like to make additional options, click the plus sign (+) in the top-left corner. This will create a new, empty chosen fonts box, enabling you to create another option to add to the list. -
If you're unhappy with a list option, you can select it, and with it highlighted click the subtraction button to remove it from the list. -
When you are done editing, click the OK button. This will return you to the document; in the Properties Inspector, access the Font drop-down list. You'll see that your modifications have taken place, as shown in Figure 4.18. Figure 4.18. All changes made within the Edit Font List dialog box are immediately available.
|
Font Size Font size is another great challenge in Web site development. With all the different factors of platforms and Web browsers, managing the size of type is no easy task. Remember that the end user determines how large or how small fonts appear in the browser. In many cases, at least in my experience, most people don't know they can change the default font attributes of a Web browser. The ones who do know tend not to change things, except that 12-year-old girls figure out they can use a crazy looking typeface. If you decide you want to increase or decrease the size of the type, you can adjust it by using the Size drop-down menu in the Properties Inspector, as displayed in Figure 4.19. Figure 4.19. You can change the type font size in the Properties Inspector by using the Size drop-down menu.
As you can see, the options in the drop-down menu do not resemble point sizes they refer to HTML sizes. The default size for HTML text is 3, so you have the option of selecting an absolute size or a relative size. The absolute size is a straight number from 1 through 7; 1 is the smallest and 7 is the largest. With relative sizes, you can either add to or subtract from the default font size of the document. For example, if the default size is 3, you can add or choose +1, and the type will appear as an equivalent to an absolute size 4. Refer to Figure 4.20 for an example of the font sizes and how they relate. Figure 4.20. Notice the different font size options some yield the same results.
Why? That must be the question you're asking right now. There is a tag called <basefont>. The <basefont> tag will allow you to change the default of the browser, which is generally 3. If you change the base font to 5, you can use sizes to adjust the size of the text relative to the base font value. Sound messy? It can be. If you find yourself bewildered and frustrated because of the lack of text control, move on to CSS styles. Bold, Italic, and Alignment This is about as easy as it gets. If you've ever used a word processor, you're probably familiar with how these options work. If you use the bold and italic options, Dreamweaver, by default, surrounds the text with <strong> and <em>, respectively. If you prefer Dreamweaver to use the <b> and <i> tags, you can change that in the Preferences. The Preferences dialog box, which is accessible under the Edit menu, offers an option under the General category to use <strong> and <em> in place of <b> and <i>. Simply uncheck that option. The basic alignment options are also available inside of Dreamweaver. You can align the text to the left, center, right, or justify it. The buttons on the Properties look the same as every other program in the world. However, there are a couple of buttons you're probably not familiar with the Indent and Outdent buttons. These buttons are located directly underneath the Align Left and Align Center buttons. The Indent button changes the "margins" of how the text appears in the browser. It increases space between the text and the left and right sides of the browser. The Outdent button typically is used to remove any indents you might have added to your text. |
