Using the Properties panel with text

In Lesson 1, I mentioned that one of the optional display areas is the Properties panel. If this is not displaying when you are in your document work area, select Window from the menu bar and click on Properties. The name that Dreamweaver documentation often gives to this window is the Property inspector, but I will normally use Properties panel.

Especially if your monitor is set at 800 pixels width, you will probably want to collapse the display of the site files to the right. This gives you more space in the document area.

We will discuss in later lessons how the Properties panel can be used for links, lists, and graphics. For this lesson, you will use the panel to change text traits. If text is already in your document, you can select the text and use the Properties panel to change traits. On a blank screen, you can also select a particular trait (like font size) and then type in text. That selected trait is applied to the text as you type. In this sense, it is similar to selecting text options in a word processing program.

Headers in your web document

Dreamweaver is creating HTML coding for you, as you work with your documents. The coding syntax, however, comes from the World Wide Web Consortium, web site of www.w3.org . The codes used to create web documents were first created in 1990. One of the earliest codes was for headers.

There are six header tags, <h1> through <h6>. <h1> is the largest and <h6> is the smallest. Most tags have a code that turn on the feature and turn off the feature, and the header tag is like this. The header tags must use an ending tag </h1>, </h2>, </h3>, etc. These header tags should only be used in the "top" area of a document when it displays in a browser, or for subsequent headings in each new section of a document. It should NOT be used to format paragraphs. Header tags, especially the larger header tags, appear to be bold faced. Browsers will display headers with "a blank line" between the header and subsequent text. You can change traits associated with headers by creating style rules.

These are what the headers look like:

This is placed in a H1 or heading 1 tag

This is placed in a H2 or heading 2 tag

This is placed in a H3 or heading 3 tag

This is placed in a H4 or heading 4 tag

This is placed in a H5 or heading 5 tag

This is placed in a H6 or heading 6 tag

In the early days of the web, the HEADER tag was the only way to change font sizes. However, that is no longer true. Whether you use HEADER or just use font sizes will depend on your personal preferences and the type of document you are creating. For example, for various College publications my office puts on the web, for documents which can run several "pages", we use HEADER tags to label sections of the document. For other documents, I do not use HEADER tags.

In Dreamweaver, you can select HEADERs using the Properties panel, under the Format option. I am using the term HEADERS since that is the official name of the tag, but the Dreamweaver drop-down list calls these headings.

Select existing text and then select a HEADER size you want to apply to that text. If there is no text and you select a HEADER tag, then what you type is in that header. Go to the next line and turn off the HEADER tag by selecting either Paragraph or None from the Format drop-down listing. Besides using the Properties panel, you can find these same options under Text on the menu bar, and then selecting Paragraph Format.

Even though you should not apply a HEADER to an entire paragraph, Dreamweaver will let you do this, if your cursor is sitting within a paragraph when you select that header.

General comments about color in your web document

In general, colors for text and backgrounds in web documents are expressed in hexadecimal codes. A pixel of color on the monitor is made up of three projected colors of light that mix optically (in your eye). The three colors are red, green, and blue, and these are combined differently to produce different colors.

The hexadecimal value used to reference a particular color has no "inherent" meaning to the average person.

The six numbers and/or digits used for the color code represent the saturation levels for red (first two codes), green (middle two codes), and blue (last two codes). All colors on the screen are made up by combining red, green, and blue (RGB). The hexadecimal value is made up of combinations of digits (0 through 9) and letters of the alphabet (a, b, c. d, e, f). It does not matter if the letters of the alphabet are lowercase or uppercase.

Later in this lesson I will talk about selecting a color using the Properties panel. As you select colors, the color is expressed in the window as a hexidecimal code.

As you start to use colors on your web pages, remember that your site visitors do not have the same computer hardware as you do. Therefore, colors do not appear the same. Limitations in using color stem from various factors:

• Various computer monitors have different color calibration and gamma default settings.
• Operating systems affect the way colors are displayed (Mac are not the same as older Windows or newer Windows machines).
• Different browsers affect the way colors are displayed.

For this reason, the web industry has created lists of colors labeled browser safe or web safe colors, officially 216 colors but Dreamweaver only uses 212. Where do the web safe colors come from? PC monitors (if color) display 256 colors at a minimum. Mac monitors display also 256 colors, but not the same set. The colors that are found on both the PC monitor and the Mac monitor are called the web safe colors. If it is important to have colors the same on different monitors, you need to select your colors from the web safe colors.

What happens if you use some color other than the web safe color? If you create your web page using colors not found in the web safe set, when a user with a monitor with only 256 colors views your page, he/she will see a color made up of dithering. That is, dots from two or more colors (from the web safe set) are combined to make the color not found on the monitor.

If a certain amount of dithering occurs in a color photo (on a photo with thousands of colors but being displayed on a 256 color monitor), it may not be disasterous. However, general advice from graphic artists is any color you use on flat areas of your document (like the background, text, blocks of the screen, or areas in a "flat" clipart image) should be selected from the web safe palette unless you are quite certain that your audience has newer monitors.

Although many webmasters do not worry about using the web safe colors anymore, because newer color monitors are so common, this really depends on your projected audience and how new their equipment is. Also some of the latest hand-held devices which allow access to the web and have color may be limited to 256 colors.

Whether or not you use only web safe colors is your decision. If consistent color display across monitors is important to you, you need to limit yourself to the web safe colors. There are situations, however, where you may not be able to limit yourself. For example, at our University of Arizona, if people want to use the specific red and blue used for the "school colors" on a site, they cannot limit themselves to web safe colors. The specific colors used in print for red and blue are not web safe colors, although one can pick colors which are close in color.

Don't get carried away with colors. Too many different colors in one document are a distraction to the user. Color can be one of the components that identify your web site "theme", so pick two or three colors and use them consistently.

As you start to use color on your pages, keep in mind that some people seeing your site are color blind. Color blindness is the inability to perceive colors in a normal fashion. The most common form of color blindness is red-green (inability to distinguish red and green).

Because there is no single form of color blindness, it is difficult to not use colors that some of the audience cannot see. In general it is how these colors are used, particularly if they are used against each other, that causes problems. Furthermore, do not use color as the only means of conveying information. For more information about color blindness, see Tip #9.

General comments about font size and font face

Besides text color (and you may decide to leave all of your text black), two other font attributes which you will change are font size and the font face (the type of font displaying). However, if you are not already aware of this, recognize that site visitors can change the font appearance when they look at your documents on their local computers. See a supplemental document about how fonts can be changed in the two most common browsers.

Compared with any word processor, the options for font size are very limited, as you can see if you click on the size listing. The smallest font is font 9 and the largest is font 36. If no font size is specified, normally a size of 12 is displayed. There are only 7 font sizes in this listing, so this is quite different from word processors.

You can also use what is called relative sizing. This means that you select from the listing under the numbers, such as xx-small, larger, or xx-large. When you use a relative size option, the browser looks at the nearby font size, and adjusts the new font accordingly. If the bulk of your text were using a font size of 12, and you used a font size x-large, that is being expressed in terms of the "base font."

In a way, relative font sizing is deceptive, because you still only have seven font sizes. The largest font from the listing is 36. If you start with a font of 36, for example, and then select xx-large for other nearby text, it still remains 36 in size.

I encourage you to consider using relative font sizing. This is one of the recommendations from the World Wide Web Consortium, so that someone can change the default font size (on their browser) and still see text that you want to emphasize (by your selection of a "larger" option from the listing) and text that you want to un-emphasize (which would be one of the "smaller" options in the listing).

The font (for font face) attribute specifies the style of lettering. This is the least "dependable" attribute to use, since users will not have all the same fonts as you do on your machine. As an example, if you create a web document and use a font of Elephant, if a user seeing your page does not have that font on his/her local computer, then the local computer displays the text using a different font. And the user can turn off your font style through browser settings. When you start playing with font faces through Dreamweaver, you will see that the software lists fonts with three or four specific font names in one group. When displaying your text, the browser works it way through these font names, from left to right. If the first font is not on the local computer, one of the others will be. If you use the option of Default Font in Dreamweaver, then the default font in the local user's browser will be used. In most cases this is either Times or Times Roman.

Font attributes using Dreamweaver

You can select bold or italic through the Properties panel.

If you go to Text on the menu bar and then pick Style you will see additional choices there, that are less commonly used. Underline is found here, and not in the Properties panel. That is because you should avoid using underlines if the text is not a link. Using underlining for text other than links is apt to confuse users.

You can pick font size using the Property inspector window. As stated previously, there are only 7 specific font sizes from the drop-down display. Relative size options are also found in this drop-down listing.

You can pick from font options using the Properties panel, to change the style or appearance of the font.

Alignment of text is controlled using the Properties panel as well. Notice that the choices are left justified (the default if nothing is selected), center, right justified, and full justification. These traits have to apply to the entire line or the entire paragraph. You cannot have part of the line left justified and part of the line right justified, as you can with a word processor (unless you use a table with lines turned off and put text in different cells).

Text color can be changed using the Properties panel.

In the Property inspector window, there is a square which probably is showing white. But it has a small triangle in the lower right hand corner of the box. If you click on this triangle, a color swatch pops up, such as the one to the left.

The Color Swatch options which appear may be the web safe colors previously discussed. When working in this Color Swatch window, your mouse becomes an eyedropper. As you move the eyedropper mouse over various colors, the hexidecimal coding displays in the top center part of the swatch display. You can use the eyedropper to pick a color from the Color Swatch or from anywhere in your document. This eyedropper is a convenient way for you to select the same color that is already being used elsewhere in your document or even a color that is part of a graphic.

There are three small icons in the upper right of this Color Swatch display. Their meaning is described below.

• The left button is the strikethrough button. To clear the current color without selecting another color, use this strikethrough button.
• The middle button is the Palette icon and it opens the (computer) system Color Picker. You will have millions of colors (on most computers) to pick from if you go to the system color display.
• The right most button is a triangle. Clicking here brings up a list of options, as is shown above. At the bottom of this list there is a Snap to Web Safe option. If this option is selected with a checkmark in front, then, no matter what color you pick, the closest web safe color is really used. This could give you a different color, especially if you were trying to match a color found on a graphic.

Creation of styles

As is demonstrated in the video Basics in Text Traits, as you apply text traits in the Properties panel, Dreamweaver 2004 creates a style using those traits. This facilitates easily repeating the same text traits elsewhere in the same document.

The concepts of stylesheets or styles is a powerful feature to help give consistency within a document and between documents (if an external style sheet is created). A very brief explanation of CSS is found in Tip #8.

The default settings on Dreamweaver 2004 have you using styles as you apply font traits. You can go to Edit, then Preferences and turn off this feature (boxed in the screen capture to the left), if you want to use the FONT traits and coding used in earlier releases of Dreamweaver. However, if you open up a document created in another, older release of Dreamweaver that uses FONT HTML coding, Dreamweaver 2004 does not change the coding.

Page colors

The same colors that can be applied to text can also be applied to a page. Page settings are found under Modify on the menu bar, then Page Properties.

The same Color Swatch display that comes up for text coloring comes up through this menu. Be careful when selecting a page color that your text still clearly shows against the background. Also test how your page prints on a black and white printer. You may also need to use this same Page Properties dialog box to change colors for links, or pick a size or font face for text in your document. This will not change font traits which have been already set in your document. The advantage of using Page Properties for text is that it changes all text on a given page to a color or size or style of font. It would be better to use the Page Properties window to make global changes for a document, before starting, rather than having to change coding constantly to a particular size or color or font style.

Even if you do not use a different color for your page, be sure the hexidecimal code for white is entered here #ffffff. If no page color is entered, then some of the versions of Internet Explorer display the page color as grey.

Spacing and indenting

One of the ways that Dreamweaver is significantly different from a word processor is that you cannot use the space bar to put multiple spaces in a line as you type. (You may have discovered this during Lesson 1 as you typed in paragraphs in your initial document.) If you want to have multiple spaces, you have to use a special character &nbsp;, which stands for non-breaking space. This character can be entered through Insert, then HTML, then Special characters, then Non-Breaking Space as many times as you want "spaces". As you type, you can enter spaces by holding down these keys at the same time: Ctrl, Shift and the space bar.

If you have used non-breaking spaces, and split your screen to see the HTML coding, you can see the reference to the non-breaking space code. This code has to be there for browsers to add more than one space between words or items.

There certainly are situations in which you may want to put more than one space. You can also create the illusion of extra space between items by using a table for your text layout, as you will see in Lesson 5.

As you were typing in the Document window, you may have also discovered that pressing the TAB key has no effect. There is not really any code that works across multiple versions of browsers that lets you indent the first line of a paragraph. Cascading Style Sheets allow for indention of the first line, but this command does not work consistently with different browsers. The Properties panel does have two icons for indenting text (the entire paragraph) and outdenting text. This is demonstrated in the video Indenting Options when Using Dreamweaver. This command affects all lines in a paragraph area, not just the initial line in a paragraph.

For those of you who have worked with HTML coding already, the code being placed in the document is BLOCKQUOTE. You can have multiple blockquotes in a section, to "indent" the section further.

Special characters

Periodically you will need to use special characters in your HTML documents, such as a degree symbol, the greater than symbol, a cent sign, the copyright symbol, or accented vowels, to name a few. According to the HTML specifications, HTML uses the ISO 8859-1 (Latin 1) character set. In order for your information to display properly, you should use this character set to specify special characters which you wish to use. This code is placed in the "head" area of your document automatically when you create a new document in the 2004 release, so you don't have to worry about manually adding this code.

The video Using Special Characters in Dreamweaver demonstrates adding a few special characters. You simply select Insert, HTML, Special Characters to see some common choice. The last item in the list is Other, which displays the window shown to the left.

Importing text

Dreamweaver can open web documents created by other software, but the coding may have to be adapted/edited.

If you have existing text in other applications, primarily as Word or WordPerfect files, you can copy the text in your word processing document, and then use Edit, Paste to paste the text into a document in Dreamweaver. In Dreamweaver 2004, the same type of paragraph structure in your original document should be found in the "pasted" text, although the resulting formatting code may not be exactly the same (for example size of the font or the type of font face).

If your word processing document has information in tables, the text will "come over" but the table structure will not. This is also true if there is "tabbed" information in the word processing document. We will talk in Lesson 5 about importing data from files (like comma delimited text files or a spreadsheet).

Whether you import text created by others, or type the text yourself, you have the option to run a spell checker from within Dreamweaver. The checker is found under Text on the menu bar, then Check Spelling.

There is a supplemental tip dealing with copying and pasting from a word processor document. Go to the tips section of the site to find Tip #2.

This document is part of a series of lessons on Dreamweaver Basics for the 2004 release, given by Linda Ffolliott, College of Agriculture and Life Sciences at the University of Arizona.