Making a Content Web Site

Site Map

Text
How do you do it?

Click to Text - Why it is important

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion
Bold Italic Underline Resize Color Font Alignment Bullet Indent

 

How to change specific text? Then how to make global changes on pages.

Dreamweaver has a powerful WYSIWYG. This web site takes advantage of it; however, it does not completely ignore that the HTML code lies behind the curtain. For text, I will give you often both the WYSIWYG way and the HTML code to manipulate your words. It's a good idea to understand some HTML code even if you don't need to use it with this program or any other HTML editor. There are four different ways to manipulate the information you want on a web page using Dreamweaver. There's the Top Menu Bar, the Properties Menu, the Right-click feature (all of which are used in the Design or Split screen mode) and lastly, there's the actual HTML code that can be added (used in the Split or Code mode). I've given you multiple choices under each way to manipulate text. Additionally, you will see the Legend to the right. It indicates when you have screen captures or videos to see how to perform the action.

legend

Bold in the "Design" mode:

Top Menu Bar Properties Menu Right-click features
  1. Highlight text
  2. Text > Style > Bold
  1. Highlight text
  2. Click the "B"
  1. Highlight text
  2. Style > Bold

Making the text bold in "code" mode:

Place either <strong></strong> or <b></b> tags around the text.

For example: Only the word first is bold in this sentence.
The code in HTML looks like:

<p>
Only the word <b>first</b> is bold in this sentence.
</p>
OR
<p>
Only the word <strong>first</strong> is bold in this sentence.
</p>

You can check this by going to your browser window. Click View>Source Code to see whether <b> or <strong> was used.

Italic in the "Design" mode:

Top Menu Bar Properties Menu Right-click features
  1. Highlight text
  2. Text > Style > Italic
  1. Highlight text
  2. Click the "I"
  1. Highlight text
  2. Style > Italic

Making the text italic in "code" mode:

Place <i></i> tags around the text. For example: Only the word second is italicized in this sentence. The code in HTML looks like:

<p>
Only the word <i>second</i> is italicized in this sentence.
</p>

You can check this by going to your browser window. Click View>Source Code to see <i> used.

Underline in the "Design" mode:

Top Menu Bar
Right-click features
  1. Highlight text
  2. Text > Style > Underline
  1. Highlight text
  2. Style > Underline

Making the text underlined in "code" mode:

Place <u></u> tags around the text.

For example: Only the word third is underlined in this sentence.
The code in HTML looks like:

<p>
Only the word <u>third</u> is underlined in this sentence.
</p>

You can check this by going to your browser window. Click View>Source Code to see <u> used.

Resize in the "Design" mode:

Properties Menu Once again, you also have Right-click and Top Menu Bar options as you did with Bold, Italic, and Underline. See the steps above to use those choices.
  1. Highlight text
  2. Click the Down Arrow beside the Size choice and choose from the options for what you might need.

You can check how all of this works in HTML by going to your browser window. Click View > Source Code to see what was used.

Color in the "Design" mode:

There are two distinct ways to change color of text. You can use the "Properties Menu" for a highlighted word or phrase or you can go to "Page properties" and change the global color of your web page's text.

Let's begin with changing just a word or two:

Our example is: One fish, two fish, red fish, blue fish
In this example, the word red is red and blue is blue.

Properties Menu
The box next to that one is used for hexadecimal codes. See Hex Color Codes for more on hexadecimal codes.

The fastest way to do this is:

  1. Highlight the text.
  2. Choose the Down Arrow of the color box.
  3. Choose the color.

To change a whole page of text globally to a specific color, you could highlight all of the text, but there is a better way.

  1. In the Properties Menu, choose "Page Properties."
  2. A window opens with choices. Amongst the choices, you will see "text color" and two boxes. the first lets you choose your color from a color palette; the second lets you insert a hexadecimal code for the color.

This is particularly useful if you have chosen an overall color scheme to your web site and want more than mere black text on a background color. Click here for an example of changing the color of text to emphasize points of your web page

Font in the "Design" mode:

Like color, there are two distinct ways to change the font of your text. You can use the "Properties Menu" for a highlighted word or phrase or you can go to "Page properties" and change the global font of your web page's text. A few things to remember: every font is not universal. Some fonts are specific to your computer and do not appear on your audience's monitor. Dreamweaver comes with several fonts that for the most part, can be viewed by the majority of browsers and computers.

Let's begin with changing just a word or two:

Our example is: One fish, two fish, red fish, blue fish
In this example, the word one is in one font and two is in another. Some font choices are obvious, some not.

Properties Menu
Why is changing the font good to know? An example is on the Text Examples page: Click here.

The fastest way to do this is:

  1. Highlight the text in question (haven't you done this a lot lately?)
  2. Use the down arrow for Font and change the font.

If you do not see the font you were looking for, you will have to add it to the list of fonts to choose from. To do this, after clicking the Down Arrow, go to Edit Font list and add the font you want. Note that all computers do not have the same font catalog, though some of the font styles are standard and common. Be sure to check your web page on other machines for compatibility. See the Content section of this site for more information.

Knowing the code to change the text on a web page can be important. Once you've read through this web page, it should becoming obvious that HTML tags can be found by going to "Code" mode or even better "Split" mode to see what is going on in the background. On the other hand, there is a point when learning HTML defeats the purpose of learning how to use the WYSIWYG and making the web page in a reasonable amount of time while concentrating on the big picture - getting the content communicated to the audience.

Remember our goal here is to get you and your students to make content-based web pages - not necessarily to turn you into genius webmasters. Additionally, the goal is the content and the communication of it - not to be super-proficient at using Dreamweaver.

Alignment in the "Design" mode:

You can align text four ways:

Left Right Center Justified
We, the People, in order to form a more perfect Union, establish Justice and ensure Domestic Tranquility, provide for the Common Defence, promote the General Welfare and secure the blessings of Liberty to ourselves and our Posterity to ordain and establish this Constitution for the United States of America.
We, the People, in order to form a more perfect Union, establish Justice and ensure Domestic Tranquility, provide for the Common Defence, promote the General Welfare and secure the blessings of Liberty to ourselves and our Posterity to ordain and establish this Constitution for the United States of America.
We, the People, in order to form a more perfect Union, establish Justice and ensure Domestic Tranquility, provide for the Common Defence, promote the General Welfare and secure the blessings of Liberty to ourselves and our Posterity to ordain and establish this Constitution for the United States of America.
We, the People, in order to form a more perfect Union, establish Justice and ensure Domestic Tranquility, provide for the Common Defence, promote the General Welfare and secure the blessings of Liberty to ourselves and our Posterity to ordain and establish this Constitution for the United States of America.
Top Menu Properties Menu Right-click
  1. Highlight the text
  2. Align>Choose your poison
  1. Highlight the text
  2. Click the icon choice
  1. Highlight the text
  2. Align>Choose your poison

In addition to aligning text, you may want extra spaces between paragraphs and lines of text. There are two keyboard strokes to help you with this situation: Shift-Enter and plain Enter.

The Enter key by itself will allow you to put space between your paragraphs. The Shift-enter allows you to place the next line of text directly under the previous line of text. Click here to see how it is done in HTML.

Bulleted Lists in the "Design" mode:

Alignment can also take the form of bulleted lists. Remember, bulleted lists are important in web design because they can reduce the amount of superfluous text on the screen. This improves the view your audience is seeing, making them more likely to stay on your web page, navigate through the rest of the site and even bookmark it.

Properties Menu
  1. Click the bullet button
  2. Type in the first item
  3. Click Enter and the program automatically adds a bullet under the first.
  4. Type in the next line of text until you are done.

If you want numbers, choose the numbering button instead.

You can also highlight lines of text, then click the bullet buttons.

Indent in the "Design" mode:

OK, there is no true tabbing function in web design, so we have to just deal with that little situation. There is, however, indent which can be very useful. The code is really <blockquote>, which makes logical sense for those of us who write research papers. Like this paragraph, it is indented a bit from the left side.

This sentence is indented twice. It can allow you to do really neat designs easily if you plan it right. The steps to do this are below.

Properties Menu
  1. Place your cursor at the beginning of your text paragraph
  2. Click the Indent button.
  3. Optional: Repeat to indent farther.

So, what have you learned? You can manipulate text in a web page by:

Remember: get all of your text on the page first before you begin to change the color, alignment, font, size, etc. In the long run, it will save you time and effort to plan ahead. It's like the old adage: Measure twice; cut once. Type in the content then change it.

Practice? Want some practice? I've set up a little practice page for you to test yourself on the skills above.

You are now ready for Images.

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

Making a Content Web Site

Site Map

Text
How do you do it?

Click to Text - Why it is important