Dreamweaver: Create A Basic Page & Text Formatting

Text Format and Creating Basic Pages

Now it\'s time to begin working on your first page. Before you begin with the page it\'s best to define properties of the page, such as Colors and the Title. This can be done with the Page Properties dialog.The Page Properties can be found in the Modify menu, or with the keyboard shortcut Command-J or CTRL-J.

Title: container tag.The title is what appears on the top of the browser bar. For this page the title is \'Dreamweaver Tutorial: Part 3\'. The title is also what appears inside the

In the \'Background Image\' field you can specify a tiling image to use for your background. One can specify a Background color in the \'Background\' field. This number must be a hexadecimal value or one of the standard colors. If you are unsure about the hexadecimal value, you can pick from Dreamweaver\'s Web Safe Color Palette.You can also specify colors for Text, Links, Visited Links and Active Links in the corresponding fields. The Left Margin, Top Margin, Margin Width and Margin Height fields are all used to determine how far the body of the page is from the edge of the browser. This must be a number in pixels.As you can tell if you use 0 for all your margins, there no spacing between the edges of the browser window and your content.

The Document Encoding field is where you select the Character Set for your page. If your page is in English you should leave this at the default - Western (Latin1).

Colors in Dreamweaver

Dreamweaver handles Hexadecimal values and HTML standard color names:

• Black
• Maroon
• Green
• Olive
• Navy
• Purple
• Teal
• Gray
• Silver
• Red
• Lime
• Yellow
• Blue
• Fuchsia
• Aqua
• White

Dreamweaver also offers many of its own built-in tools to allow color selection to be much easier. These can be accessed from many places within the program by clicking on this button:

This brings up the standard palette as well as a color picker. The color picker can be used to pick a color from elsewhere on the screen, including other open windows. All one must do is click on a color and that will become the active color for the element selected.

There are other tools available, such as the Color Dialog. This can be accessed from the Text Menu by choosing Color. It can also be accessed from the Color Palette:

Click on the circled icon to access the Color Dialog Box.

From this dialog one can choose from all the colors in the bar (most of them are web safe). RGB values can also be entered. This is useful when working with graphics programs such as Photoshop or Fireworks.

These colors can also be added to the \'Custom Colors\' so that they may be used again. To do this simply select an empty (white) box under Custom colors, choose your color and click on the \'Add to Custom Colors\' button. This color can now be used from the Color Dialog anytime.

Text Format

In Dreamweaver text is divided into several different formats, all of which can be changed from the Properties toolbar. There is the standard paragraph (default), headings from 1-6 and preformatted text.

You can change the format by choosing one of the options from the pop-up list of the Properties toolbar. These formats apply to the entire paragraph, so you can change the format without having to highlight the text. You also cannot have more than one format in the same paragraph.

There are 6 different headings available, numbered 1 through 6. 1 is the largest and 6 the smallest. Here is an example of all 6 headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The last option is preformatted text. When this is chosen text can be modified exactly as if it were in a text editor. The drawback is that it is displayed in a monotype font such as Courier.

   # of Pork and Beans in stock

   ----------------------------

      Pork   Beans   Total

5/1     1      2       3

5/2     2      5       7

Text Formatting

In Dreamweaver most text is formatted with the Properties Toolbar and the Text menu. We will discuss how to format text as one would in a word processor with the Properties toolbar.

Text can easily be bolded or italicized by clicking on the respective B (CTRL-B) and I (CTRL-I) buttons.

Text can be sized by using the \'Size\' pop-up list of the Properties toolbar.

Many other programs such as word processors and page layout programs scale text using \'points.\' Not so in HTML. There are 7 sizes of text in HTML, with 7 being the highest. To change text size in Dreamweaver, you can choose the size from the menu or you can enter a number in the box.

You can also scale text using + (plus) and - (minus) symbols. If you would like your text to be a certain number lower than the default size, you can choose -1. If you want it a little larger, you can choose +1. This is different from using absolute numbers, such as 2 or 3, because the relative point is the default font size. Some users might decide to change their default size to a larger font. Using -1 would scale it down from the size they have specified.

You can change the color of text by using the Text Color field. Here you can enter a hexadecimal color code (or one of the default colors) in the field or you can pick from the color picker.

Choosing Fonts

We all want to use our favorite fonts in our HTML documents. Unfortunately one of the limitations of the web is that a font will only be displayed if the user has it installed on his/her computer. With all the different operating systems and platforms on the web, there is no guarantee that the font one chooses will be what is used to display the page.

HTML allows one to give a list of fonts. If the first font is available, that font is used. If not, the browser checks for the next font on the list, and so on until a font has been found. If no fonts are found that match, the browser will render the text using the default font of the computer. This can be Times New Roman on some configurations, Geneva on others, and Courier on others.

Dreamweaver also allows one to choose a list of fonts and has plenty \'safe\' combinations built in.

To choose the font for your text to be displayed, you may enter it in the Font field on the Properties toolbar or you can choose from Dreamweaver\'s list of \'safe\' fonts:

As you can see, each selection has 2 or 3 fonts listed. These are all fonts that are similar in nature but are common on different platforms. For example, Arial is a sans-serif font that is common on PC platforms. Helvetica is very similar to Arial, but is more popular on Mac platforms. If a web designer chooses \'Arial, Helvetica; sans-serif\' he or she can be reasonable confident that the font will appear as intended.

There is also a list for Serif fonts such as Times New Roman, and monotype fonts such as Courier. If one uses these selections, they should appear similarly to how they were intended.

Using the presets is great for offering a little customization, but isn\'t always enough. Everyone has their favorite fonts, most of which are usually unique. What if one decided they wanted to display their text in Optima or Tekton? This is where the Edit Font List dialog can be used.

With this dialog you can either add more font choices to the list of presets or create your own. The Font List box at the top of the dialog are fonts already in the preset list. The \'Chosen Fonts\' box are fonts you have chosen for the new listing. The \'Available Fonts\' are fonts that are installed on your computer. There is also a text field below the Available Fonts box where you can manually type in a font name.

To add fonts to the \'Chosen Fonts\' you can either find them from the \'Available Fonts\' list and double click on them or click once and then click on the arrow pointing to the left. You can also enter a name into the Text Field and hit enter when you are finished. Once you have selected a list of fonts, you can simply click on OK and it is now a part of Dreamweaver.

If you want to use a unique font, such as Comic Sans you might wish to find some fonts that are similar first. For example, Tekton is a similar font on the Macintosh platform. So you may wish to choose Comic Sans first, Tekton second, and perhaps a standard font such as Arial or Helvetica third.

Aligning Paragraphs

Text can be aligned within Dreamweaver from the Properties Toolbar. You can choose Left, Center, or Right aligned.

When you choose an alignment, it is applied to the entire paragraph you are working with. You can change alignment if you start a new paragraph.

Paragraphs can be created in Dreamweaver by hitting the Enter (or Return) key in the document. This will create a blank line and will then create a new paragraph.

You can also create a line break in Dreamweaver by hitting SHIFT-ENTER. This is the equivalent of the
tag in HTML. Instead of creating a new paragraph, you will break to a new line and continue on the same paragraph. Here is an example:
There was a break, but this text is still in the same paragraph.

You cannot change alignment of a single line by using a line break.

Other Text Features

There is plenty else you can do with text within Dreamweaver. For example, you can Indent or Outdent Text using 2 buttons on the Toolbar:

The button pointing to the left will Outdent the text. The button pointing to the right will Indent the text. Here is a sample:

This text is indented

This text is indented some more.

This text is now outdented.

This text is now normal.

The ability to Indent and Outdent gives the author more flexibility of presenting the content. If you are quoting out of a book, it\'s a good idea to indent once. Using indents also makes the document a little easier to read.

Note: The HTML tag used to indent text is the

tag.

 

Text can also be indented and outdented by using the Text Menu or keyboard shortcuts. The shortcuts are as follows:

Indent: CTRL (or Command) ]
Outdent: CTRL (or Command) [

There are plenty other Text Options that can be accessed in Dreamweaver by using the Text Menu. For example, you can give your text more \'Style\' than what is available on the Properties Toolbar. By going to the \'Styles\' submenu (not to be confused with \'CSS Styles\' or \'HTML Styles\') of the Text Menu, you have other formatting options. Here is an example of the other options and how they render in the browser:

Underline (we recommend against using this because many users will mistake it for a link)
Strikethrough
Teletype
Emphasis
Strong
Code
Variable
Sample
Keyboard
Citation
Definition

Here are some of the HTML Styles that are built into Dreamweaver. These are accessed from the Text Menu under the \'HTML Style\'s submenu. Most of these are applied to an entire paragraph, so be careful how they are used.

Bold

Caption

Copyright

Emphasis

Fixed Width

Headline

Normal

Red

You can add your own custom \'HTML Styles\' by choosing \'New Style\' from the HTML Styles submenu. You define the style by choosing a Font, a Font Size, and a text attribute (Bold, Italics, etc.) If you wish to change the text to your style, simply select it from the HTML Styles submenu.

You can also change the format, alignment, font, size and color with the Text Menu.

Dreamweaver also offers you the ability to Check the Spelling of your document. The spell checker can be accessed from the Text Menu or with the keyboard shortcut SHIFT-F7. The Spell Checker is very similar to other checkers you\'ve seen in other programs. It will scan the document and compare all words to word in its dictionary. If it finds a word it thinks is misspelled, you will be prompted and given a list of words Dreamweaver suggests it might be. You can change to one of those, fix it by changing it in the text field, or you may ignore it.

Horizontal Rules

A good way to divide text or other HTML elements is by using Horizontal Rules. You can insert a Horizontal Rule from the Insert Menu. Here is an example:

---

You can further modify the rule by highlighting it and using the Properties Toolbar. As you can see, the Properties toolbar changes when the Horizontal Rule is selected.

You can change the width of the Rule by entering a number in the \'W\' field. This can be a number in pixels or a percentage. The default is pixels, and you will have to change the default from the menu to the right of the field. For example, if you wanted a Rule that was 10 pixels wide, it would look like this:

---

If you wanted a rule that spanned 80% of your work area, it would look like this:

---

You can also change the alignment of the rule by using the Align menu at the right of the Properties Toolbar. The default alignment is centered.

As you can see, the Rule is also given a slight shading. You can change this by clicking inside the \'Shading\' checkbox. This will turn the shading off. Here is a sample without shading: