Back to RacerNet

Creating A Web Page

*Information in this tutorial was taken from the Using Dreamweaver MX help tutorials.

Click on the links below to navigate to that information:

Back to Table of Contents

Start A New Document

Create and save a new page Now that your site is set up, you can create web pages to populate it.

When you started Dreamweaver, a blank HTML document was automatically created. Before you proceed, close that document.

To close the default blank document: Choose File > Close.

To create a new page:

  • Choose File > New. The New Document dialog box appears.
  • In the category list on the left, select the Page Designs category. The list in the middle column of the dialog box is relabeled Page Designs. A list of pre-designed page designs appears.
  • Scroll down in the Page Designs list and choose the item named Text: Article D with Navigation. Note: There is another item with a similar name. Be careful not to choose the item named Text: Article D, which has no navigation bar. A small preview of the page appears on the right side of the dialog box.
  • Make sure the Document radio button is selected at the lower right of the dialog box. Click Create. A new page appears, using the layout you chose, in a new Document window.

If you prefer, you can create a page using any of the other provided page designs, or create a page with no preset design by choosing an item from the Basic Page category.

 

Save your document.

To save your new page:

  • Choose File > Save.
  • In the Save As dialog box, browse to the Design folder inside the site root folder. Reminder: the site root folder is the folder you created when you set up the site in Set up a local site.
  • Enter the filename index.htm.
  • Click Save.
  • The filename now appears in the title bar of the Document window, in parentheses, after the words “Untitled Document.”

Modify Page Properties

To change the title of a page: With the document open, do one of the following:

  • Choose Modify > Page Properties.
  • Choose View > Toolbar (if it isn’t already selected).
  • Right-click (Windows) or Control-click (Macintosh) in an empty area in the document, then select Page Properties.
  • In the Title text box, enter the title for the page, the press Enter or Return. If you’re editing the title in the Page Properties dialog box, click OK. The title appears in the title bar of the Document window (and in the toolbar, if it’s showing). The filename of the page and the folder the file is saved and appears in parentheses next to the title in the title bar. An asterisk indicates the document contains changes that have not yet been saved.

To define a background image or color:

  • Choose Modify > Page Properties, or select Page Properties from the context menu in the Design view of the Document window.
  • To set a background image, click the Browse button, then browse to and select the image. Alternatively, enter the path to the background image in the Background Image box.
  • Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do.
  • To set a background color, click the Background color box and select a color from the color picker.

To define default text colors, do one of the following:

  • Choose Modify > Page Properties and then choose colors for the Text Color, Link Color, Visited Links, and Active Links options.
  • Choose Commands > Set Color Scheme and then choose a background color and a color set for text and links. The sample box shows how the color scheme will look in the browser.

Using Standard View

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver allows you to manipulate columns as well as rows and cells.

  • After you create a table you can easily modify both its appearance and structure. You can do any of the following:
  • Add content
  • Add, delete, split, and merge rows and columns
  • Modify table, row, or cell properties to add color and alignment
  • Copy and paste cells
  • Note: Many designers use tables to lay out web pages. Dreamweaver provides two ways to view and manipulate tables: Standard view, in which tables are presented as a grid of rows and columns, and Layout view, which allows you to draw, resize, and move boxes on the page while still using tables for the underlying structure

To insert a table: In the Design view of the Document window, place the insertion point where you want the table to appear. Note: If your document contains no content, then the only place you can place the insertion point is at the beginning of the document.

Do one of the following:

  • Click the Table button in the Common category of the Insert bar. Choose Insert > Table.
  • The Insert Table dialog box appears.
  • Enter new values as desired.
  • You can add text and images to table cells the same way that you add text and images outside of a table.

Selecting table elements You can select an entire table, row, or column at once. You can also select a contiguous block of cells within a table. After you’ve selected a table or cells, you can do the following:

Modify the appearance of selected cells or of the text contained in them. See Formatting tables and cells. Copy and paste cells. See Cutting, copying, and pasting cells. You can also select multiple nonadjacent cells in a table and modify the properties of those cells. You cannot copy or paste sets of nonadjacent cells.

To select an entire table, do one of the following:

  • Click the upper left corner of the table or click anywhere on the right or bottom edge.
  • Click in a table cell, and then select the table tag in the tag selector at the lower left corner of the Document window.
  • Click in a table cell, and then choose Modify > Table > Select Table.
  • Click in a table cell, and then select the table tag in the Tag Inspector.
  • Selection handles appear on the selected table’s lower and right edges.

To select rows or columns:

  • Position the pointer to point to the left edge of a row or the top edge of a column.
  • When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.

To select a single cell, do one of the following:

  • Click in the cell, and then select the td tag in the tag selector at the lower left corner of the Document window.
  • Click in the cell, and then choose Edit > Select All. Tip: Choose Edit > Select All again when a cell is selected to select the entire table.
  • Click in a table cell, and then select the td tag in the Tag Inspector.

To select a line or a rectangular block of cells, do one of the following:

  • Drag from a cell to another cell.
  • Click in one cell, and then Shift-click another cell. All of the cells within the linear or rectangular region defined by the two cells are selected.

To select nonadjacent cells:

  • Control-click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.
  • If each cell, row, or column you Control-click or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’s removed from the selection.

Using Layout View

One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use for layout, however, because they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the problems that often occur when creating table-based designs using traditional means. For example, in Layout view you can easily draw layout cells on your page, then move the cells where you want them. You can also easily create both fixed-width layouts and layouts that automatically stretch to the full width of the browser window.

About layout cells and tables In Layout view, you can lay out your page before adding any content. For example, you could draw a cell along the top of your page to hold a header graphic, another cell on the left side of the page to hold a navigation bar, and a third cell on the right to hold content.

(Another approach is to draw each cell only when you’re ready to put content into it. This approach allows you maximum flexibility; it leaves more blank space in the layout table for a longer time, which allows you to move or resize cells more easily.)

When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

Drawing layout cells and tables You can draw layout cells and tables on your page in Layout view. When you draw a layout cell that isn’t inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table.

To draw a layout cell:

  • Make sure you are in Layout view (see Switching into and out of Layout view), then click the Draw Layout Cell buttonin the Layout category of the Insert bar. (In the Dreamweaver 4-style floating workspace, with a vertical Insert bar, the layout-related items appear at the bottom of the panel, rather than in a separate category.) The pointer changes to a plus sign (+).
  • Position the pointer where you want to start the cell on the page, then drag to create the layout cell. To create multiple cells without having to click the Draw Layout Cell button each time, create each layout cell by Control-dragging (Windows) or Command-dragging (Macintosh).
  • The cell appears outlined in blue on your page. (Blue is the default outline color for layout cells. To change the outline color, see Setting Layout view preferences.) The width of each cell is displayed in the column header area at the top of the column, if layout table tabs are showing (see Setting Layout view preferences). For more information on column widths, see Setting column width.
  • A light grid of lines appears, extending from the edges of the new layout cell out to the edges of the layout table that contains it. These lines help you align new cells with old cells, and help you visualize the underlying HTML table’s structure.
  • Dreamweaver automatically snaps the edges of new cells into alignment with nearby edges of existing cells. (Layout cells cannot overlap.) Cell edges also automatically snap to the edges of the containing layout table if you draw a cell close to the edge of a table. To temporarily disable snapping, hold down Alt (Windows) or Option (Macintosh) while drawing the cell.

To draw a layout table: Make sure you are in Layout view. Then do one of the following:

  • To draw one layout table, click the Draw Layout Table button in the Layout category of the Insert bar. The pointer changes to a plus sign (+).
  • To draw more than one layout table without having to repeatedly click the Draw Layout Table button, Control-click (Windows) or Command-click (Macintosh) the Draw Layout Table button. When you finish drawing a layout table, you can immediately draw another one.
  • Position the pointer on the page, then drag to create the layout table. If there’s no other content on the page, the new table is automatically positioned at the upper left corner of the page.

The table appears outlined in green on your page. (Green is the default outline color for layout tables. To change the outline color, see Setting Layout view preferences.) A tab labeled Layout Table appears at the top of each table you draw, to help you select the table and distinguish it from other elements of your page.

The width of the table (in pixels, or as a percentage of the page width) is displayed in the column header area along the top of the table, if layout table tabs are showing (see Setting Layout view preferences). For more information on table and column width, see Setting column width.

Adding content to a layout cell You can add text, images, and other content to layout cells in Layout view just as you would add content to table cells in Standard view. Click in the cell where you want to add content, then type text or insert other content.

You can insert content only into a layout cell, not into an empty (gray) area of a layout table, so before you can add content, you must first create layout cells (see Drawing layout cells and tables).

A layout cell expands automatically when you add content that is wider than the cell. As the cell expands, the column that the cell is in also expands, which might change the sizes of surrounding cells. The column header area for that column changes to show the width that appears in the code, followed by the visual width of the column (the width as it appears on your screen) in parentheses. (For more information about column widths, see Setting column width.)

To add text to a layout cell:

  • Place the insertion point in the layout cell where you want to add text and do one of the following:
  • Type text into the cell. The cell automatically expands as you type, if necessary.
  • Paste text copied from another document. Use the Paste command. For more information, see Inserting and formatting HTML text.

To add an image to a layout cell:

  • Place the insertion point in the layout cell where you want to add the image.
  • Do one of the following: Click the Insert Image button in the Insert bar’s Common category. Choose Insert > Image.
  • In the Select Image dialog box, select an image file.

Moving and resizing layout cells and tables To adjust your page layout, you can move and resize layout cells and nested layout tables. (The outermost layout table can only be resized.)

Layout cells cannot overlap. You cannot move or resize a cell to make it cross the boundaries of the layout table that contains it. A layout cell cannot be made smaller than its contents.

A layout table cannot be resized to be smaller than the smallest rectangle containing all of its cells. A layout table also cannot be resized so that it overlaps other tables or cells.

To resize a layout cell:

  • Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.
  • Selection handles appear around the cell.
  • Drag a selection handle to resize the cell.
  • The cell edges automatically snap to align with other cells’ edges.

To move a layout cell:

  • Select a cell by clicking an edge of the cell or by Control-clicking (Windows) or Command-clicking (Macintosh) anywhere in the cell.
  • Selection handles appear around the cell.
  • Do one of the following: Drag the cell to another location within its layout table. Press the arrow keys to move the cell 1 pixel at a time. Hold down Shift while pressing an arrow key to move the cell 10 pixels at a time.

To resize a layout table:

  • Select a table by clicking the tab at the top of the table.
  • Selection handles appear around the table.
  • Drag the selection handles to resize the table.
  • The table edges automatically snap to align with the edges of other cells and tables.

To move a layout table:

  • Select a table by clicking the tab at the top of the table.
  • Selection handles appear around the table.
  • Do one of the following: Drag the table to another location on the page. Note: You can move a layout table only if it’s nested inside another layout table. Press the arrow keys to move the table 1 pixel at a time. Hold down Shift while pressing an arrow key to move the table 10 pixels at a time.

Inserting A Picture

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

To insert an image: Place the insertion point where you want the image to appear in the Document window, then do one of the following:

  • In the Common category of the Insert bar, click the Image icon. In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
  • Choose Insert > Image.
  • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
  • Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
  • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
  • In the dialog box that appears, do one of the following: Choose File System to choose a graphic file. Choose Data Source to choose a dynamic image source.
  • Browse to choose the image or content source you want to insert.
  • If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path
  • In the Property inspector (Window > Properties), set properties for the image.

Creating Links

You can create several types of links in a document:

  • A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
  • A named anchor link, which jumps to a specific location within a document.
  • An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in.

To Create An External Link

Do one of the following:

  • Click on the Link Icon in the Common Toolbar.
  • Fill in the name for the link and the link URL. (http://www.yahoo.com).
  • Click OK. OR...
  • Highlight the text or image to be linked.
  • Click in the Link box in the Property Inspector & type in the link URL. (http://campus.murraystate.edu)

To create an e-mail link using the Insert E-Mail Link command: In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.

Do one of the following to insert the link:

  • Choose Insert > E-Mail Link. Select the Common tab in the Insert bar, and then click the Insert E-Mail Link button.
  • The E-Mail Link dialog box appears.
  • Complete the dialog box.
  • Click OK.

Previewing A Web Page

It’s a good idea to test your pages by previewing them in browsers often throughout the design and creation process. By using this strategy, you can catch errors early and not copy or repeat them.

You can preview a document in your target browsers at any time; you don’t have to save the document first. All browser-related functions work, including JavaScript behaviors, document-relative and absolute links, ActiveX controls, and Netscape Navigator plug-ins, provided that you have installed the required plug-ins or ActiveX controls in your browsers.

You can define up to 20 browsers for previewing. All the browsers you define appear on the Preview in Browser menu. It’s a good idea to preview in the following browsers: Internet Explorer 4.0, Netscape Navigator 4.0, and at least one text-only browser, like Lynx.

To preview your document in a browser, do one of the following:

  • Choose File > Preview in Browser, then choose one of the listed browsers.
  • If you haven’t selected a browser yet, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then select the Preview in Browser category on the left to select a browser (see Setting the Preview in Browser Preferences options).
  • Press F12 to display the current document in the primary browser.
  • Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser.

To test links in a browser:

  • Choose File > Preview in Browser or press F12.
  • Click the active links to verify that each one works properly.

To set or change preferences for your primary and secondary browsers:

  • Do one of the following to open the Preview in Browser options: Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), and then select Preview in Browser from the category list on the left. Choose File > Preview in Browser > Edit Browser List.
  • The Preferences dialog box appears with the Preview in Browser options.
  • Make changes as necessary.
  • Click OK.

*Information in this tutorial was taken from the Using Dreamweaver MX help tutorials.