Session One

The Dreamweaver Workspace

 

On the Macintosh, Dreamweaver provides a floating workspace layout, in which each document is in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows. Windows "snap" automatically to each other, to the sides of the screen, and to the Document window as you drag or resize them.

 

Note: You can customize your workspace by rearranging panels and panel groups

 

Session One: continued pg. 2

The Welcome window provides tips on setting up your workspace for various purposes, and information on new features for those who have used previous versions of Dreamweaver.

 

The Insert bar contains buttons for inserting various types of "objects," such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.

 

The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

 

The Document window displays the current document as you create and edit it.

 

The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties.

 

Panel groups are sets of related panels docked together under one heading. To expand a panel group, click the expander arrow at the left of the group's name; to undock a panel group, drag the gripper at the left edge of the group's title bar.

 

The Site panel allows you to manage the files and folders that make up your site. For more information, see Set up a local site. It also provides a view of all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

 

Dreamweaver provides many other panels, inspectors, and windows not shown here, such as the History panel and the Code inspector. To open Dreamweaver panels, inspectors, and windows, use the Window menu.

 

 

 

 

 

 

 

 

Session One: continued pg. 3

Menus overview

 

This section provides a brief overview of the menus in Dreamweaver.

 

The File menu and Edit menu contain the standard menu items for File and Edit menus, such as New, Open, Save, Cut, Copy, and Paste. The File menu also contains various other commands for viewing or acting on the current document, such as Preview in Browser and Print Code. The Edit menu includes selection and searching commands, such as Select Parent Tag and Find and Replace, and provides access to the Keyboard Shortcut Editor and the Tag Library Editor. The Edit menu also provides access to Preferences, except on the Macintosh in Mac OS X, where Preferences are in the Dreamweaver menu.

 

The View menu allows you to see various views of your document (such as Design view and Code view) and to show and hide various kinds of page elements and various Dreamweaver tools.

 

The Insert menu provides an alternative to the Insert bar for inserting objects into your document.

 

The Modify menu allows you to change properties of the selected page element or item. Using this menu, you can edit tag attributes, change tables and table elements, and perform various actions for library items and templates.

 

The Text menu allows you to easily format text.

 

The Commands menu provides access to a variety of commands, including one to format code according to your formatting preferences, one to create a photo album, and one to optimize an image using Macromedia Fireworks.

 

The Site menu provides menu items to create, open, and edit sites, and (on the Macintosh) to manage files in the current site.

 

The Window menu provides access to all of the panels, inspectors, and windows in Dreamweaver.

 

The Help menu provides access to Dreamweaver documentation, including help systems for using Dreamweaver, creating extensions to Dreamweaver, and reference material for a variety of languages.

 

In addition to the menu-bar menus, Dreamweaver provides many context Session One: continued pg. 4

menus, which give you easy access to useful commands pertaining to the current selection or area. To display a context menu, right-click (Windows) or Control-click (Macintosh) an item in a window. All items in context menus can also be found in menu-bar menus.

 

About sites

In Dreamweaver, the word site is used as shorthand to refer to any of the following things:

•   A website: a set of pages on a server, to be viewed by a visitor to the site using a web browser.

•   A remote site: the files on the server that make up a website, from your (the author's) point of view rather than a visitor's point of view.

•   A local site: the files on your local disk that correspond to the files in the remote site. In the most common Dreamweaver workflow, you edit the files on your local disk, then upload them to the remote site.

         •        A Dreamweaver site definition: a set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.

 

Creating a site: workflow overview

When creating your own sites, you can follow whatever workflow is most comfortable for you.

 

To create a website:

1 Plan and prepare, including setting up a Dreamweaver site (by Defining a Dreamweaver site).

2 Create pages, adjust their layout, and add content

3 Edit the code as needed

4 Link pages together

5 Preview and publish your site

 

 

 

 

 

 

Session One: continued pg. 5

To define the Dreamweaver local folder:

 

1 In Dreamweaver, select Site > New Site.

 

The Site Definition dialog box appears.

2 If the wizard is showing, click Advanced.

3 In the Site Name text box, enter GlobalCar - PHP.

 

The name identifies your site within Dreamweaver.

4 In the Local Root Folder text box, specify the folder in the GettingStarted folder that contains the PHP sample files.

 

You can click the folder icon next to the text box to find and select the folder. In Windows, the folder should be as follows:

 

C:\Sites\GettingStarted\Develop\php

 

On the Macintosh, the folder should be as follows:

 

Hard Drive:Documents:Sites:GettingStarted:Develop:php

5 Leave the Site Definition dialog box open. You need to define a web server folder as a Dreamweaver remote folder next.

 

 

Working with Tables

 

The Tables tab in the Insert bar allows you to insert table-related tags.

 

 

Table places a table at the insertion point. A dialog box allows you to specify table attributes, such as number of rows and number of columns.

 

Table, Table Row, Table Header, Table Data, and Table Caption each insert a pair of table-related tags (table, tr, th, td, or caption) at the insertion point.

 

Inserting a table

 

Use the Insert bar or the Insert menu to create a new table. For information on Session One: continued pg. 6

 

creating accessible tables in Dreamweaver, see Authoring for accessibility.

 

To insert a table:

1 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.

2 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.

3 Enter new values as desired.

 

 

Adding content to a table cell

 

You can add text and images to table cells the same way that you add text and images outside of a table.

 

For more information, see Inserting and Formatting Text and Inserting Images.

 

When you add or edit content in your table, you can save time by using the keyboard to navigate the table.

 

To move from one cell to another using the keyboard, do any of the following:

•   Press Tab to move to the next cell.

 

Pressing Tab in the last cell of a table automatically adds another row to the table.

Session One: continued pg. 7

 

•   Press Shift+Tab to move to the previous cell.

•   Press the arrow keys to move up, down, left, or right.

 

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. 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:

1 Position the pointer to point to the left edge of a row or the top edge of a column.

 

 

 

 

Session One: continued pg. 8

 

2 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.

 

 

Session One: continued pg. 9

 

Viewing and setting table properties

 

When a table is selected, the Property inspector lets you view and change table properties.

 

To view table properties:

1 Select the table.

2 Choose Window > Properties to open the Property inspector.

 

To view all table properties:

 

If the Property inspector isn't expanded, click the expander arrow in the lower right corner to see all properties.

 

To format a table in the Property inspector:

1 Select a table.

2 Choose Window > Properties to open the Property inspector.

3 Change the table's formatting by setting properties.

 

Setting table properties

 

This Property inspector allows you to set properties for tables.

 

To set table properties:

1 Set any of the following options:

 

Table Id is an ID for the table.

 

Rows and Cols are the number of rows and columns in the table.

 

W and H are the width and height of the table in pixels, or as a percentage of the browser window's width.

 

Note: You usually don't need to set the height of a table.

 

 

Session One: continued pg. 10

 

CellPad is the number of pixels between a cell's content and the cell boundaries.

 

CellSpace is the number of pixels between adjacent table cells.

 

Tip: When you don't explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

 

Align determines where the table appears, relative to other elements in the same paragraph such as text or images. Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with text appearing above and/or below the table). Default indicates that the browser should use its default alignment.

 

Tip: When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content, use Left or Right alignment.

 

Border specifies the width, in pixels, of the table's borders.

 

Tip: When you don't explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To view cell and table boundaries when the border is set to 0, choose View > Visual Aids > Table Borders.

 

Clear Column Widths and Clear Row Heights buttons delete all explicitly specified row height or column width values from the table.

 

Convert Table Widths to Pixels and Convert Table Heights to Pixels buttons set the width or height of each column in the table to its current width in pixels (also sets the width of the whole table to its current width in pixels).

 

Convert Table Widths to Percent and Convert Table Heights to Percent buttons set the width or height of each column in the table to its current width expressed as a percentage of the Document window's width (also sets the width of the whole table to its current width as a percentage of the Document window's width).

 

 

Session One: continued pg. 11

 

Bg Color is the table's background color.

 

Brdr Color is the color for the table's borders.

 

Bg Image is the table's background image.

If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

 

 

Working with Images

 

Replacing an image placeholder

 

An image placeholder is not a graphic image that displays in a browser. Before you publish your site you should replace any image placeholders you've added with web-friendly graphic files such as GIFs or JPEGs.

 

If you have Fireworks MX, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver. For information about creating a replacement image in Fireworks MX,.

 

To update the image source:

1 In the Document window, do one of the following:

◦   Double-click the image placeholder

◦   Click the image placeholder to select it, then in the Property inspector (Window > Properties), click the folder icon next to the Src field

The Image Source dialog box appears.

2 In the dialog box, navigate to the image you want to replace the image placeholder with.

3 Click OK.

 

The selected image appears in the document.

 

Aligning an image

 

Use the image Property inspector to set the alignment of an image in relation to other elements in the same paragraph or line.

 

Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications

 

Session One: continued pg. 12

 

You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.

 

Default generally specifies a baseline alignment. (The default may vary depending on the site visitor's browser.)

 

Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.

 

Top aligns the top of an image to the top of the tallest item (image or text) in the current line.

 

Middle aligns the middle of the image with the baseline of the current line.

 

TextTop aligns the top of the image with the top of the tallest character in the text line.

 

Absolute Middle aligns the middle of the image with the middle of the text in the current line.

 

Absolute Bottom aligns to the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).

 

Left places the selected image on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line.

 

Right places the image on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line.