Dreamweaver Tutorial: Format Text

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.

Dreamweaver Format Text

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

Dreamweaver Format Text

Dreamweaver Text Sub-menu

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

Dreamweaver Format Text

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

Dreamweaver Format Text with Property Inspector

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 change font typeface

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 Change Font Size

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 Format Text in Property Inspector

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.

Dreameaver Change the color of text,

View a related Dreamweaver tutorial:

 


Search for Tutorials
 

Dreamweaver 8 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
Creating a New Web Site
Managing Web Site Definitions

Creating Basic Web Pages
Create a Basic Webpage
Creating New Web Pages
Opening and Saving Web Pages
Closing Web Pages
Previewing Web Pages in a Browser

Using Text
Add Paragraphs and Headings
Align Paragraphs and Headings
Formatting Text
Inserting Special Characters

Inserting Hyperlinks
Create Hyperlinks
Using Named Anchors
Create Email Links
Refresh Pages or 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

Site Build It!

This site proudly build with Site Build It!

Powered By SiteBuildIt

 

Bluehost.com Web Hosting $6.95 

 

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

 

[?] Subscribe To This Site

XML RSS
follow us in feedly
Add to My Yahoo!
Add to My MSN
Subscribe with Bloglines