Lesson 3 - Text and Paragraph Formatting


DW Cover


The Property Inspector

It's time to introduce the Properties Inspector. This is the most used Panel in my DW interface. See it below in both its compact and expanded states. Toggle the small white triangle on the bottom right to expand or collapse the bottom pane of the Property Inspector.

Abbreviated Property Inspector

Property Inspector

The PI will be your most useful panel while you learn to format content in Dreamweaver. The Properties Inspector is a context sensitive inspector which means that the fields and text will change to reflect your current selection in the Document Window. I like to leave my PI expanded so I can see the options available to me for every selection.

The top part of the PI functions in a similar manner to a regular word processing toolbar, with menus and buttons to format paragraphs, text and headings using CSS Styles, Bold and Italic text, various text alignments, different fonts, font sizes and colors, and indents and outdents. You can also include bulleted and numbered lists. For linking text, images, or other elements, there is a Link field with a dropdown menu that displays all previously used links for this site, the point-to-file button, a folder for browsing for your destination file, and the Target field.

In Dreamweaver CS4, HTML and CSS functions have been separated. On the far left you will see the two buttons for selecting the modes. In the image above you see the functions that are associated with HTML, formatting, Class selection, paragraph formatting, and links. Below is the CSS view and in it you may select fonts, alignments, and create CSS rules that may be applied throughout your page. This will be covered in the CSS lesson.

PI CSS View

There are also 2 small icons in the top right, a question mark for help and a small pencil for the Quick Tag Editor. Don't worry about the Quick Tag Editor right now. It's useful if you know some HTML.

We're going to get starting formatting some text and images using the PI soon. But first, I just want to remind you to work in Split view sometimes in order to familiarize yourself with HTML and code source tags. While it's not necessary to know HTML to use DW, you will have more control over your sites if you at least understand what is happening under the hood.

DW comes with a Reference Panel - a dictionary of terms from HTML and several other web site related languages. Go to the Window Menu > Results > Reference or simply expand the Results Panel to display this panel. The info is from O'Reilly and is sorted by language, tag and description options. The Book: drop down menu allows you to choose the language you are interested in, while the Tag: dropdown menu lets you reference information about the tags in that language, including which versions of which browsers (NN or IE), and which version of HTML support the tag. The image below displays the Reference Panel for the HTML anchor tag.

PI Reference

For more info on HTML, ISP, etc. go to: http://en.wikipedia.org/wiki/Main_Page


Formatting with the Property Inspector

Open the index.html page you created for homework 2 in Dreamweaver. It should have links to all your other pages and the name(s) of your code reviewer(s). Insert your cursor at the end of the text and press the Enter or Return key several times to create some space between your cursor and the links. Type some content into the Document Window or copy from another program and paste into the Document Window.

I have some Latin text that printers often use as a placeholder text. The actual content for this lesson doesn't matter for this exercise. Here is my unformatted file.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat.

And furthermore

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. 1. this and such. 2. that and such 3. this and that 4. that and this. 5. on and on 6. more and more 7. over and over

As usual there are several ways to accomplish one task in Dreamweaver. If you know how to use a word processor, try some of the same methods for selecting content as you use in Word, WordPerfect, etc. Here are some ways you can work with element selections.

You can copy and paste text from another application. I will teach you how to retain styles, font, and color formatting when copying from MS Word and Excel later in the course.


Bulleted Lists

Here's how I just made the unordered list of bullets above. An unordered list usually has bullets or discs preceding the content. An ordered list uses numbers. In DW, you can select a graphic to use in place of the standard bullets enabling you to customize your lists with your colors and themes.

To create a list:

  1. Create each list item as a separate paragraph (separated by the Enter
  2. Select the entire group of list items.
  3. Click on the icon for unordered list in the PI. Dreamweaver will create the List Items without paragraph spaces between them.

    PI Unordered List

 

If you'd like to add more space between the lines, place the cursor at the end of one List Item and insert 2 Line Breaks by going to the Insert Menu - Insert>HTML>Special Characters>Line Break or by pressing Shift + Enter or Shift + Return twice.

You can also click either of the List Buttons before entering your text and then simply start typing. When you want to create a new bullet point, press the Enter or Return key.

For now, I'll show you how to format with the Property Inspector and the Tag Selectors at the bottom left of the page. I've made a copy of the unformatted text below and I am going to start by formatting the 3 headers in the document.

It will be best if you create at least 3 paragraphs with header text for each paragraph so you can follow along with me on your computers.


Headings

Headings are helpful for organizing the content of your pages. It's been proven that readers scan online screen documents and only absorb about 30% of the content. Chunking content and formatting with headings is one way to maintain focus on the most important features. Headings are also helpful to users with disabilities. Screen readers change the tone of the words that are headings, placing emphasis so that the user knows that a new topic is beginning.

  1. Select the first Lorem ipsum text.
  2. Go to the Format dropdown menu on the top left of the the PI (HTML mode) and select Heading 1. Does your text look like this?

    Notice the cursor insertion point between the
    p and the s. I did not have to select the entire word in order to apply formatted heading.

  3. Change this heading to one of the other 6 pre-packaged headings.

    Lorem ipsum - This is Heading 6. So you see that with Headings in Dreamweaver, the higher the number, the smaller the size. You'll also note that Headings are always bold and include a paragraph space before and after the heading.
  4. Cycle through the 6 headings to see their effect on the selected font. Return to Heading 1.

Font Attributes for Selected Words:

Select a group of words in your first paragraph but not the entire paragraph. In the PI select CSS mode. To keep things simple go to the 'Targeted Rule' dropdown menu and select <inline style>. This will keep the CSS Rule window from popping up when we select attributes. I will discuss the 'Targeted Rule' dropdown menu in detail when we get to Cascading Styles Sheets (CSS). Next, change the font face to arial, the size to 18, Your formatting should look like this sentence. DW has enhanced support for CSS and using the PI to change font attributes is one of the easiest ways to create new styles.

PI CSS Inline Style

This illustrates the basics of text formatting using the PI. You can select a paragraph and click the Indent Button in HTML mode, or any of the alignment buttons, etc. I'm going to finish formatting the content in the example below for you to review.

Lorem ipsum-
(H1)default or left aligned

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit.

Lorem ipsum dolor sit amet
(H2)centered

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat.

And furthermore
(h5 right aligned)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat.

Indented Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat. UT wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl UT aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero Eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt UT laoreet dolore magna aliquam erat volutpat.



Dreamweaver's other Word Processing Features:

Dreamweaver comes with many other features for word processing. You can find some of these features in the Format Menu. Click on the Format Menu and then take some time to view all the submenus to see some of the hidden features Spell Checkis a handy one but that is located under the Commands Menu. Now if they only had a grammar check, I'd be in great shape!

Spell Checker

Find and Replace is in the Edit Menu along with Cut, Copy, Paste, Copy HTML, Paste HTML.

Find and Replace can be set to Find text, source code, tags or advanced. It can search the current document, the entire site, selected files or a specific folder.

Find and Replace


Creating Text Links Using the PI

While we're here with all this text, let's link some text to other pages in our website. This is known as Hypertext and you've already created Hypertext in previous lessons: by using the Hypertext icon on the Common category of the Insert Panel. Now you'll create hypertext using the Properties Inspector. Make sure you are in HTML mode.

  1. Select some text that relates to something on one of your other pages. It may be one word, one letter, a string of words, or an image. (Remember we inserted an image at the beginning of the lesson).

  2. Since you've already created links to several other pages in this website for the prior lesson you can use the Link dropdown menu to link to one of those pages.
  3. From the PI go to the link field and select the 'Browse for File' folder icon to the right of the 'Point to File' button to browse your hard drive for a destination file to which you wish to link. In the Select File dialog window, set the Relative to: dropdown menu to Document. The Relative To: dropdown menu is at the bottom of the Select File window.

    Link File

  4. Upon selecting a destination document, the relative link will show up in the property inspector whenever you select the words that you linked. The words themselves will be underlined and when viewed in a browser the cursor will turn into a hand when it rolls over the text. The text has become a hyperlink to another file.

I will select this string of words. I don't want to send you to another webpage from this link since it's an illustration of a technique. To make it have the functionality of a link without taking you to another page, I just put "javascript:void(0);" in the link field. This is known as a "null" link and will be useful when we learn about assigning behaviors later in the course.

To remove a link, select the text that is linked, go to the property inspector and select the link in the link field and press delete. The underline will be removed and the text will no longer be linked.

The 'Point to File' icon in the property inspector can also be used to assign links. In order to use the point-to-file from the property inspector you have to have both the Site Window and the current document open and positioned so that you can drag the point-to-file from the PI to the file in the site map. You can position the Site Files and the current document side by side or split your screen with one above the other so you can effectively point and link.

You can also use the Modify Menu - Modify>Make Link (or Control + L) or Modify>Remove Link, Open Linked Page... , or Linked Target. I'm not a menu user but I love the keyboard shortcuts. You can select your text (or image) and press Control+L to open the Select File window and link a file to the text. You can also right click on your selection and select Make Link from the context sensitive menu.

You create image links by following the same procedure as text links. Select the image by clicking on it or on the <img> tag in the tag selector and use any of the above methods to set the links. Try selecting an image and then using the keyboard shortcut of Control + L. See how simple it is?

We're going into more detail about images in the lesson on images. At that time we'll review the PI for images and I'll show you how to do image rollovers, client side image map, and how to create a nav bar from within dreamweaver. I'll also show you a simple way to get control over layout of images with text.

Some very important things about links:

Links come in two flavors: Absolute and Relative

  1. Absolute links include the entire path to a URL outside of your site. Absolute links are used to link your site to documents outside of your site. Absolute links need the protocol such as the http:// or ftp:// to be entered into the Link field of the PI. Some web browsers allow you to type just the www.something.com but Dreamweaver requires the entire protocol as http://www.something.com..

    Absolute links are an entire URL such as:
    http://www.adobe.com/cfusion/showcase/index.cfm or
    http://www.anyone.org/someone/anything.html or
    ftp://something.com/somefile.html
  2. Relative links are used to reference documents within your local site.

    All the pages within the directory you selected when you defined your site can be linked using relative links. This means they will have the name of the file such as page1.html in the link field. Please don't submit any finals with pages named page1.html, page2.html, etc. Name them something meaningful and descriptive. If the pages in your site are grouped within different folders you may have ../ or just / before the name of the folder and/or page name but these are still relative links.

    In Dreamweaver you have the choice of using a document-relative path or a root-relative path. For beginners, please use the document-relative setting.

    The Dreamweaver Manual (you all have one right?) provides a great explanation and illustration about document-relative paths. You need to understand folder hierarchy in order to properly manage your site. Until you totally understand these procedures please follow these steps:

    • Always define a site (I know I've said it 100 times already).
    • "Always save a new file before creating a document-relative path. You need to save the file in order to create a starting point from which to relate to your destination link. If you create a document-relative path before saving the file, DW temporarily uses an absolute path beginning with the file:// until the files is saved; when you save the file, DW converts the file://path into a relative path."
    • Use document-relative paths until further notice.

We now know how to link to internal pages in our website and external pages using the absolute path with the complete protocol and domain name. There are 2 more types of links we can create. One is a link to a specific place in a specific html document in our site. This is called a named anchor link. The other is an email link.

Named Anchor Link

The HTML tag for a hypertext link is called an Anchor Tag and is coded within angled brackets as:

<a href> and the closing tag is </a>. The simplest use of a Named Anchor is to send users back to the top of your page on a page that scrolls vertically. So right about here would be a good place to add a link back to the top of the page. Follow along so you can insert a Named Anchor Link on one of your pages. If your page currently doesn't scroll, copy and paste my Lorus Ipsum text a few times to take up some space, enough to require scrolling. For an Anchor Tag to work you need the linked text and a Named Anchor.  The linked text will be my "back to top" text. The Named Anchor is invisible code identifying a place towards the top of my document where I want the page to display when the user clicks "back to top".

Named Anchors are a Two-Step Process

Step 1

Move the cursor to the place in your page where you want to link. I call this the destination or target of the link. I'm going to move up to the top of the page and place my cursor to the left of the opening sentence before the words: "Open the default page you created..." Now I want to create an anchor to which I'll link in step 2. I'll then go to the Common category of the Insert Panel and click the Anchor icon or go to the Insert Menu - Insert>Named Anchor.

Anchor

A dialog box will open and I will type a name for the anchor. I will enter the name top but you can choose any meaningful name that is short, letters or number(s). When I press the OK button, an invisible anchor icon will appear where I inserted the cursor.

The icon is blue when selected and yellow when deselected. Double click on this tag to view or modify the Anchor Name in the Properties Inspector. When you deselect this tag, the PI returns to it's more familiar display.
PI Named Anchor

Step 2

Return to the area of the page where you'd like to insert the link which will return a user to the top of your page. Select the text or image that you'd like to link. I'll do that right here by selecting: return to top. In the Link field of the property inspector, enter the hash or pound sign # followed by the name of the anchor we set at the top of the page = #top

PI Named Anchor Link

To link to a named anchor in another document within the same folder, type filename.html#top.


Email Link

Email links are super easy using DW! Email links will open a new window in the mail program associated with the user's browser if the user has configured their browser and email client to work together. When you create an email link, the To: field will be populated with the info you enter in the link field. You can link selected text or a selected image to an email link.

Select the text you'd like to use as an Email Link. I'll use "email me at me@anywhere.com". Fill in the email address preceded by mailto:. Do not leave any spaces between the mailto: and the email address. It should look like this:

mailto:me@anywhere.com

PI Mailto

Another way to insert an Email Link is to click the Email icon of the Common categories on the Insert Panel. This will open the Email Link Dialog Box where you can enter the text and the email address *without* using the mailto: part of the address. You do *not* need to select the text first using this method. You can create the text within the dialog box by clicking the cursor where you want the text to appear in the document, clicking on the button, and filling out the text in the dialog box.

Email

Position and click the cursor in the document, click on the Insert Email Link, create the text and the link within the dialog box and the text will magically appear on the page where you clicked the cursor. You can also access this method through the Insert Menu - Insert>Email Link.

To add a subject to the email the Subject parameter is used. In the following example:

Email: info@example.org?Subject=My Special Subject

info@example.org email address
?Subject= Subject parameter
My Special Subject Value of Subject parameter which is the text that will be displayed in the subject line. In this case, My Special Subject. If the spaces are being ignored then add the URL encoded hex value for a space, %20.

 

* Hold the SPAM, please!

SPAM is junk mail that shows up in your email box from unwanted sources. Folks who send SPAM often create software robots or web-bots that visit web sites and harvest email addresses from them, looking especially for addresses in an HTML "mailto" link. For more information, see http://spam.abuse.net.

For this reason, some people don't like to use an email link in their webpages and prefer to use an HTML form with a contact textarea.  The form requires some server side program like a cgi script or php to process and parse the data.  We cover this in our lesson on forms. Another option people are using is writing their email addresses in this format: me at somewhere dot com.  I can't guarantee this will get the spammers off your trail.  It's worth a try!


The Link Checker

It can be very frustrating if links don't work. Dreamweaver provides you with the tools to verify all links. One tool is the Link Checker.

Go to the File Menu - File>Check Page>Links. The results will be posted in the Link Checker tab in the pane below the Property Inspector pane.

Link Checker Results

There are no broken internal links on this site; if there had been, information on the broken links would appear in the white box. The Show: dropdown menu offers a choice between reporting on broken links on the local site, on external links, or on orphaned files.

If you click the save icon on the left of the Results pane you'll get a text file showing you a report of the links in your site.

Another tool you can use is the Update Link Prompt which I showed you when I changed the files names of page1.html, page2.html, page3.html to content.html, etc. When you set this option in the Preferences>General Category, DW will notify you when links need to be updated. This feature only works if you have defined a site. I recommend that you define a site for every project. (OK, so now I've said it 101 times!)

Preferences: Update Link Prompt

These are some of the powerful site management . Let's finish up this lesson learning a few more things about Link Colors and Page Properties so that you can add some variety to your homework.


Link Colors

By convention and default, web browsers display links as a blue color and underline the text. Visited links are often a blue-purple color by default. These link attributes can be assigned by the author of the site, and the user can override the settings in their browser preferences. As an author of the site, you can set the link color and decoration, hover color and decoration, active and visited link colors and decoration in the Page Properties under the Modify Menu - Modify>Page Properties or from the Page Properties... button on the Properties Inspector. Open Page Properties of your document and select Links from the left pane of the window.

Page Properties Links

Experiment selecting different properties for the Links Category and click the OK button. Preview your work in the browser to see if you like your selection. Try some other Underline styles and rollover settings. Make the Link font: Bold or Italic, or both. Preview in browser. For this homework, use different Link settings on different pages. On a real site you would maintain consistency among your pages, but I just want you to explore the varieties of settings for this homework.

Think carefully about removing the underline from links. If you do, the cursor will still turn to a hand to indicate to the user that they are at a link. But many users will scan a page and identify links by their underlining, and if you've removed the underlining, they may miss the link. Think of other ways to make your links noticeable.


Links in a Jump Menu

The following dropdown Jump Menu uses links and JavaScript Behavior. I'll show you how to do this later in the course. This menu currently links to other sites. The links are not null.

We'll cover Jump Menus in our Forms and/or Behavior Lesson later in the course. Go ahead and try this drop down link menu. The Menu is available in Dreamweaver but this particular one is an extension from Project VII. Thank you Al. http://www.projectseven.com

DW Tip: How do you know if you've saved your current page?
Look in the title bar. If an * asterisk follows the file name, you haven't saved yet.

Save File

Up Arrow Top