This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Content
Adding content to your pages is pretty easy, and similar to adding content in any other kind of software that deals with text or images. The hard part comes only in making the pages look and act exactly as you want them to. Let's start by adding text, and then insert tables, images, and links.
To place text
- Just start typing!
- Press Enter (Return) to make a paragraph break, or press Shift+Enter (Shift+Return) to make a line break (
Figure 3.18
).
Figure 3.18 Type or paste whatever text you like in the Document window. After the first line, I pressed Enter (Return) to create a paragraph break; the breaks between the next five lines are line breaks (Shift+Enter).
)
You can also copy text from another program and paste it into the Document window.
To create a heading
- Select the text you want to make into a heading by clicking within that paragraph (
Figure 3.19
).
Figure 3.19 Click within the line you want to make into a heading.
- From the Property inspector's Format drop-down menu, select a heading from 1 (largest) to 7 (smallest) (
Figure 3.20
).
Figure 3.20 Select a heading size from the Property inspector.
The heading will become bold and its size will change ( Figure 3.21 ).
Figure 3.21 Now my text has become a heading, and I've selected some lines to make bold.
)
)
)
To make text bold or italic
- Select the text you want to modify.
- Click on the Bold or Italic button on the Property inspector.
The text will change appearance ( Figure 3.22 ).
Figure 3.22 I've made the selected text bold.
)
TIPs
- Dreamweaver offers common commands, such as copy, cut, paste, and undo, in the Edit menu (
Figure 3.23
) and on the Standard toolbar (seen in Figure 3.5).
Figure 3.23 The Edit menu offers common commands such as copy, cut, paste, and undo.
- For more about formatting text in Dreamweaver, see Chapter 8 and Chapter 9.
- By default, Dreamweaver uses the <strong> tag for bold text and the <em> tag for italic text. See Using Text Styles, in Chapter 8, for more on the difference between these tags and the <b> and <i> tags. You can also choose which tags to use in the General panel of the Preferences dialog box.
)
Laying out a page with tables
On my example page, I'm going to insert a table. Tables are covered in more detail in Chapter 12. Once you insert a table, you can insert, paste, or drag content into its cells.
To insert a table
- From the Document window menu bar, select Insert > Table. The Insert Table dialog box will appear (
Figure 3.24
).
Figure 3.24 The Insert Table dialog box shows the commonly used table settings. For a brief rundown, see the Tips, this page.
- Type the number of columns and rows you want to appear in your table. For our example, I'm going to use three columns and two rows.
- Specify the width of your table by typing a number in the Width text box, and selecting either pixels or percent from the drop-down menu. To use the table as a page layout, I'm going to specify the width as 100 percent (of the browser window).
- Click OK. The Insert Table dialog box will close, and the table will appear on your page (
Figure 3.25
).
Figure 3.25 A table appears, based on the settings I entered.
)
)
Shaping your table
You can resize your table, change the size of the columns and rows, and even consolidate rows and columns to make bigger table cells. These cells are what hold the content within a table, whether it occupies the entire page or just part of your design. I like to use borders when I'm just getting started, but after you've got stuff in your table, you can hide the borders.
To change the layout
- Mouse over a border between two cells or around the outside of the table, and the pointer will turn into a double-headed arrow you can use to drag the borders.
- To change the height of the table (
Figure 3.26
), drag the bottom border.
Figure 3.26 You can set a table height by dragging the bottom border down. The table will also expand if you place content into it.
To change the height of the two horizontal rows, drag the border ( Figure 3.27 ).
Figure 3.27 You can drag the border between rows to create a smaller top row. See Figure 3.30 to see how I've modified the table layout.
Figure 3.30 Here's my page in progress, where I've combined the cells in the top row.
- To change the width of the columns, drag their borders (
Figure 3.28
). You can readjust them at any time.
Figure 3.28 You can drag the border between columns before or after you put content in them.
- To combine two or more cells, first click and drag to select them (
Figure 3.29
).
Figure 3.29 I dragged to select the top three cells so that I can merge them into one big cell.
- Then, in the lower-left of the Property inspector, click the Merge button to combine them
. Your cells will merge (
Figure 3.30
). - You can select your text and drag it or cut and paste it into the appropriate table cell.
)
)
)
)
)
)
Adding images and media
Images and media files are not embedded in a page; rather, the Web page contains links so the browser knows where to go get the files, and information on spacing and layout that tells the browser how the images should fit on the page. In Dreamweaver, you simply place the image where you want it to go on the page, and the coding is taken care of for you.
To place an image
- Click to place the insertion point where you want the image to appear. I'm going to click within a table cell.
- From the Document window menu bar, select Insert > Image. The Select Image Source dialog box will appear (
Figure 3.31
).
Figure 3.31 Insert an image into your page by selecting its image file in the Select Image Source dialog box. This is the Windows version; the Mac view is shown in Figure 3.45.
Figure 3.45 The Select Image Source dialog box, like an Open dialog box, lets you browse through your computer's files to select an image.
Browse through the files and folders on your computer and select the image file. The image pathname will appear in the URL text box.
- Click OK (Choose). The Select Image Source dialog box will close, and the image will appear on the page (
Figure 3.32
).
Figure 3.32 After I inserted the image, the table resized to accommodate it. I can resize either the image, the table, or both.
)
)
)
To find out more about images and image properties, see Chapter 5. Inserting media objects is very similar, and I cover that subject in Chapter 7.
Linking to other pages and sites
Creating a link isn't complicated at all. You simply highlight the text or image that you want your visitors to click. Then, you tell Dreamweaver what the browser should open when that link is clicked: another page in your site, or a Web site out on the Internet, for starters.
To make a link
- Select the object (text or image) to which you want to add a link (
Figure 3.33
).
Figure 3.33 Highlight the text you want to make into a link.
- In the Link text box on the Property inspector, click Browse
, and select a file from your local site.
or
Type or paste the URL of an Internet link or a directory or page on your site, and press Enter (Return) ( Figure 3.34 ).
Figure 3.34 Type the link in the Property inspector's Link text box, or click on Browse to choose a file. Either way, the text will become linked and the link will be displayed in the Property inspector. The tag for a link is <a>.
Either way, the object will become linked. If it's text, it'll become underlined and change colors. Your link will be clickable if you preview it in the browser window or upload it onto the Internet.
)
)
)
){kind=link}
For more about links, see Chapter 6, which includes instructions on email links, links between places on the same page, media files, and so on.