Getting Started: Adding Text, Lists, and Previewing in the Browser in Dreamweaver 8
- Creating a New Page and Adding Text
- Setting Page Properties
- Introducing Cascading Style Sheets
- Changing Text Attributes in the Property Inspector
- Aligning Text
- Creating Lists and Indenting Text
- Adding a Separator to a Page: The Horizontal Rule
- Saving Your Work and Previewing in a Browser
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
What You'll Learn in This Hour:
-
How to create a new web page and set up properties for the whole page
-
How to use the Property inspector to change text fonts and font sizes
-
How Dreamweaver creates new CSS Styles and how to rename and apply styles
-
How to align text and add unordered and ordered lists
-
How to preview a web page in different browsers
The most common elements in a web page are text and images, so this hour we'll start with text. You'll get started creating web pages with Dreamweaver by becoming familiar with adding text and setting text properties. You'll learn how Dreamweaver formats the appearance of text, modifying font attributes such as font face, color, and size, using Cascading Style Sheets (CSS). This hour introduces CSS while Hour 16, "Formatting Web Pages Using Cascading Style Sheets," gives more in-depth information into Dreamweaver's CSS capabilities.
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.
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.
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 Dreamweaver. 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.
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.
)
Figure 3.3 The Format drop-down menu in the Property inspector applies heading, paragraph, and preformatted formatting to text.
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.