Dreamweaver Tutorial: Format Text

  Email to a Friend

This Dreamweaver tutorial will show you how to format text in a variety of ways using the Text sub-menu and the Property Inspector.

In previous Dreamweaver tutorials you learned how to Create a Web Page, to Add Paragraphs and Headings, and to Align Paragraphs and Headings. Once it is placed on your Web page, you can format the text in many ways. You can change the font style, font size, font typeface, text color, and the alignment of the text. You can also indent or outdent paragraphs of text to make it stand out from the rest of the page.

You can apply individual formatting to any text on your page. It could be a character, a word, a sentence, or a paragraph. Dreamweaver provides an HTML Style menu item to facilitate formatting text.

Bold and Italic are the two most common types of styles. The Strong style has the same effect as Bold and Emphasis has the same effect as Italic. By default, Dreamweaver uses the <strong> and <emphasis> tags when you format text to be Bold or Italic. Like a word processor, there are other styles available such as Teletype, Underline, Strikethrough, and the others shown below.

This is an example of normal text. This is an example of a Bold style using the <strong> tag. This is an example of the Italic style using the <emphasis> tag. This is an example of the Teletype style using the <tt> tag. This is an example of the Underline style using the <u>tag. This is an example of the Strikethrough using the <s> tag. This is an example of the Code style using the <code> tag. This is an example of the Variable style using the <var> tag. This is an example of the Sample style using the <samp> tag. This is an example of the Keyboard style using the <kbd> tag. This is an example of the Citation style using the <cite> tag. This is an example of the Definition style using the <dfn> tag. This is an example of the Deleted style using the <del> tag. This is an example of the Inserted tag using the <ins> tag.

Dreamweaver Tutorial: Change Font Style

Highlight the text to be formatted on the web page. Right-click the highlighted text or click on the Text menu and then click Style. From the Style sub-menu select the style type you want to apply to the selected text. Dreamweaver applies the style to the text.

You can combine styles to create more complicated effects. For example, you can apply Bold and Italic to get Bold Italic.

You can also select the Text menu from the Insert Menu options. The Text menu will appear with several options for formatting text.

Note: The most commonly used styles, the Bold and Italic style have shortcuts on the Property Inspector and the Text sub-menu.

In the Property Inspector, click on B for Bold text or I for Italic text.

Dreamweaver Tutorial: Change a Font Typeface

With the text selected, click on a font family from the Font drop-down menu in the Property Inspector. Dreamweaver applies the font family to the selected text.

You can also right-click the highlighted text and choose Font from the menu, then select a font family to apply to the text.

Dreamweaver Tutorial: Change Font Size

he <font> tag has been deprecated in the HTML standards. Most browsers still accept the <font> tag and render it properly, but it is better to use CSS styles to set font size. If your Dreamweaver preferences are set to use CSS instead of HTML, then you must use CSS to change the font size. The fonts sizes will be not be available if you've selected CSS in your Dreamweaver preferences.

Using the Property Inspector, you can set a relative font size by choosing x-small, medium, large and so on. Small is normal. You can set a specific size measured in pixels by selecting the pixel size from the Size drop-down list or by typing a value in the Size box in the Property Inspector. To specify the size using something other than pixels, such as points or picas, select the measurement from the second drop-down list.

Dreamweaver Tutorial: Make Text Bold, Italic, or Underlined

To make selected text bold or italic, click the Bold or Italic button in the Properties Inspector. To underline selected text, choose Text, Style, Underline from the menu bar. Think twice about using the Underline style on your web page. Most web site visitors expect underlined text to be hyperlinks. You may confuse them if they yours are not.

Dreamweaver Tutorial: Change Text Color

You can change the color for part of the text on your Web page such as characters, words, or paragraphs. Dreamweaver provides an easy to use palette of Web-safe colors that you can apply to selected text. Web-safe colors are those that display accurately in any browser on any platform and monitor setting the viewer uses.

You can choose the color of your text by clicking on a color chip from the color palette or you can enter the color's hexadecimal code.

,

View a related Dreamweaver tutorial:

• Create a Web Page
• Add Paragraphs and Headings
• Align Paragraphs and Headings

Enter your search terms Submit search form

Web Guides&Tutorials.com Guides&tutorials.net

 

 

Home | Submit Tutorials | Contact   

Dreamweaver 8 Tutorial Titles Dreamweaver Video Tutorials Dreamweaver Store All Dreamweaver Tutorials The Dreamweaver 8 Workspace Overview of the Workspace Using The Insert Toolbar Show or Hide Windows Using the Properties Inspector Customize the Document Window Creating a Web Site Create a Basic Webpage Creating a New Web Site Managing Web Site Definitions Creating Basic Web Pages Creating New Web Pages Opening and Saving Web Pages Closing Web Pages Previewing Web Pages Using Text Add Paragraphs and Headings Align Paragraphs and Headings Formatting Text Inserting Special Characters Inserting Hyperlinks Create Hyperlinks Create Named Anchors Create Email Links Refresh Page & Redirect Users Linking to files Using Graphics Image File Types Inserting Images Cropping and Resizing Images Changing the Brightness and Contrast of an Image Setting Image Properties Change Image Size Using HTML Tables About HTML Tables and Table Modes Inserting Tables Selecting Tables, Rows, Columns, and Cells Formatting Tables and Cells Importing Tabular Data Using Table Design Schemes to Format a Table Setting Table Colors Web Site Management Managing Links Changing Links Sitewide Finding and Fixing Broken Links Site Reports Using the Files Panel Getting and Putting Files Checking In/Out Files Synchronizing Local and Remote Sites Cascading Style Sheets Cascading Style Sheets Creating CSS Styles Defining CSS Styles Using the CSS Panel Applying and Removing CSS Styles Using Layers Creating Layers Moving and Resizing Layers Setting Layer Properties Nesting Layers Using the Layers Panel Behaviors Creating Behaviors Default Behaviors in Dreamweaver Targeting Browser Behaviors Deleting Behaviors Downloading Behaviors from the Internet Creating a Rollover Image Using Forms Understanding Forms and Scripts Creating Forms Inserting Text Boxes Inserting Hidden Fields Inserting Check Boxes Inserting a Radio Group Inserting a List Menu Inserting Jump Menu Inserting a File Field Inserting Buttons