• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 3. Getting Started: Adding Text, Li... > Creating a New Page and Adding Text

Creating a New Page and Adding Text

To create a new web page, select File, New. The New Document dialog box appears, enabling you to select the type of document you want to create. Make sure that the General tab is selected in the New Document dialog box; the other tab, the Templates tab, will be discussed in Hour 24, “Creating Reusable Web Pages: Using Templates.” This dialog box is organized into a Category column and a column that lists the pages in the selected category. Select the Basic Page category, and then select HTML as the Basic Page type, as shown in Figure 3.1. Click the Create button. A new document is created, and you can add text, images, and other objects to it.

Figure 3.1. The New Document dialog box enables you to select the type of document you want to create.

The keyboard shortcut to open the New Document dialog box is Ctrl+N (Command+N on the Macintosh). You can also create a new page from Dreamweaver's Start Page (remember the screen that is visible in the Document Window when you first open Dreamweaver?). The middle column in the Start Page is titled Create New and you can select HTML in the middle column to quickly create a web page.

Did you Know?: What Is Document Type and XHTML?

You might have noticed the Document Type drop-down menu in the New Document dialog box. By default, Dreamweaver creates an HTML type defined using the XHTML 1.0 Transitional document type, often called doctype because it is defined using the doctype tag. XHTML is the most recent version of HTML, combining HTML with XML (extensible markup language). You'll explore document type more in Hour 6, “Getting Down and Dirty with HTML.”

To enter text into the new web page you just created, you can simply type into the Document window. Type some text to serve as a heading at the top of the page, press the Enter key, and type a couple of sentences. This is the best way to add text to the web page if you are creating it in that moment. If the text exists elsewhere, however, such as in a Microsoft Word document, an email, or another type of text file, you'll want to look at the next section on copying and pasting text into Dreamweaver.

Did you Know?: Spelling and Grammar Are Important!

I like to create text for web pages in a robust word processing application such as Microsoft Word so I have the automatic spell check and grammar check. You can, of course, use Dreamweaver spell checker but there is no grammar checker in Dreamweaver. I can then copy and paste the text into a web page in Dreamweaver.

Copying and Pasting Text from a File

Often, you need to transfer text that exists as a word processing document into a web page. You can easily copy text from another application, such as Microsoft Word or even the spreadsheet application Microsoft Excel, and paste it into Dream weaver. Dreamweaver can paste text two ways: with and without text formatting. Often the formatting (font, font color, and font size, for example) in the web page is different from the formatting in the original document, so I usually paste into Dreamweaver without formatting.

To copy and paste text from a word processing program or another program, follow these steps:

Open a Word document (.doc) or other word processing document.

Select at least a couple of paragraphs.

Copy the text by selecting Edit, Copy or using the keyboard command (Ctrl+C for Windows or Command+C on the Mac).

Go to Dreamweaver and place the insertion point where you want to paste the text.

Select Edit, Paste or use the keyboard shortcut (Ctrl+V in Windows or Command+V on a Mac). The text is pasted into Dreamweaver, and it retains its formatting, including fonts, paragraphs, color, and other attributes.

If you don't want the formatting, select Edit, Undo (Ctrl+Z in Windows or Command+Z on a Mac) to remove the text you just pasted. To paste without formatting, select Edit, Page Special and one of the Paste Special options shown in Figure 3.2. This gives you finer control over what is pasted into your web page.

Figure 3.2. The Paste Special dialog box enables you to choose exactly what formatting properties get pasted along with your text into Dreamweaver.

Applying Text Formatting

The Property inspector is the panel directly beneath the Document window. You will use this panel extensively to set properties of objects on a web page. You can display the Property inspector by choosing Window, Properties. You apply standard HTML formatting to text by using the Format drop-down menu in the Property inspector. There are four basic formatting options here:

  • None— This option removes any formatting styles currently applied to the selection.

  • Paragraph— This option applies paragraph tags (<p></p>) to the selection. This adds two carriage returns after the selection.

  • Heading 1 through Heading 6— These options apply heading tags to the selection. Heading 1 is the largest heading and Heading 6 is the smallest. Applying a heading tag makes everything on the line that heading size.

  • Preformatted— This option displays text in a fixed-width, or monospaced, font (on most systems, 10-point Courier). The text resembles typewriter text. You probably won't use this format option too often.

Select the top line heading in your web page and apply Heading 1 formatting, as shown in Figure 3.3. While you are creating web pages you will use the different Heading formats and Paragraph format all of the time. These formatting options wrap the text you've selected with HTML tags. The Heading 1 format, for instance, adds the <h1> tag before the selection and the closing tag </h1> after the selection.

Figure 3.3. The Format drop-down menu in the Property inspector applies heading, paragraph, and preformatted formatting to text.

Understanding Paragraph and Break Tags

It's important to understand the difference between paragraph (<p>) and break (<br>) tags. Paragraph tags surround a block of text, placing two carriage returns after the block. You create a new paragraph by pressing the Enter or Return key. Think of the paragraph tags as creating a container for the block of text. This container is a square block that contains text. Later, in Hour 16, you'll understand how to modify this container with CSS.

The break tag inserts a single carriage return into text. You can insert a break into a web page by using the keyboard shortcut Shift+Enter or selecting the Line Break object from the Characters drop-down menu in the Text category of the Insert bar. The break tag does not create a container as the paragraph format does. This tag is best used for creating a new line within a paragraph such as when formatting an address on different lines.

It's important to understand the difference between paragraph and break tags. Pressing Shift+Enter twice, inserting two line breaks, instead of pressing Enter to create a paragraph looks identical in a web page. However, because you haven't created a paragraph container, any formatting applied to the paragraph gets applied to the entire container. This will become more important as you begin formatting portions of web pages in different ways.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint