Adobe Dreamweaver October 2010

Learning the Basics

Lesson 1

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Objectives
Understand the Dreamweaver graphical user interface. Recognise how Flash text differs from regular text. Define a new site. Name, title, and save your documents.
(continued)

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Objectives
(continued)

Specify preview browsers. Specify background, text, and link colors. Put text on a page and format it. Use the Assets panel to select and apply color to text.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

The Dreamweaver interface

The major components of the Dreamweaver user interface are:
The Document window, where you create and work on your document. The Insert bar, located above the Document window, and the toolbar which contain buttons for common tools and commands. The Property inspector, located across the bottom of the Document window. Its contents change depending on the object that is selected. Various panels located on the right side of the Document window that are used to manipulate different aspects of your page as you build it.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 4

An example of the Dreamweaver interface

This figure shows the Dreamweaver user interface. Your interface may look different depending on which panels are turned on or off in your document.

Toolbars Panels Document window

Property inspector

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Define a new site

Before you can begin creating Web pages, you must define a site to hold those pages. You will create a local site on your computers hard drive to contain the local copies of the Web pages.
You begin by creating a main folder for the local site, called the root folder. All files and subfolders for the site are contained within the root.

You can also create a remote site on an Internet server to hold the Web pages published to the Internet.
The remote site will contain a mirror copy of your local site, including all folders and files.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Choose your path reference preference

There are three ways you can reference paths in your Web site in Dreamweaver. They are:
Site-root-relative Provides the path from the root folder to a document. This is a good choice for a large Web site that may span multiple servers. Absolute Provides the full URL of the document path, including the protocol, such as http://. Document-relative Provides a path for the file in relation to the current folder. This is a good choice for local links in most Web sites.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

Create a new site

To create a new site:
Click the Site menu, then click Manage Sites.
If this is your first Dreamweaver site, you will see the Site Definition wizard appear. If you have existing sites, the Manage Sites dialog box will appear. If so, click the New button, then click Site.

Assign a name to the site to help you identify the purpose or content of the site.
(continued)
Adobe Dreamweaver
Instructor Tonia O'Dwyer 8

Create a new site

To create a new site:
(continued)

Indicate if you do or do not want to use a server technology. Select the Edit local copies on my machine option and then locate the folder to store your local site. Respond to the remaining options and click OK to create the site. Click Done to close the Site Definition dialog box if open, then click Done to close the Manage Sites box.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 9

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Specify preview browsers

You can specify one or more Web browsers to use to preview your pages as you work on them. To do so:
Click the Edit menu, then click Preferences (Windows), or click the Dreamweaver menu (Macintosh) and then click Preferences. Click on a browser name in the window on the right and indicate if it is a primary or secondary browser. Add any other browsers that you want to use that are not in the list. Ask your instructor for help if you are unable to add a new browser. Click OK to close the dialog box. Your preview browsers are defined and ready for use.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 10

Save, name, and add a title to your documents

Any time you create a new document, you should save it immediately, using options on the File menu. When naming an HTML file, keep these things in mind:
Use lowercase letters so the names will work on all servers. Dont use spaces or special characters in your name. Numbers are OK, but do not start a name with a number.

You can title each page, and the title will be shown in the Web browsers title bar. To title a page:
Click the View menu, point to Toolbars, then click Document. Enter a descriptive title in the Title text box and then press the Enter or Return key.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

11

Specify color for background, text, and links

This is the Page Properties box where you can set a background color or image for your page. You can set a color to be used for text and for hyperlinks (Links, Visited and Active). To open this box, click the Modify menu, then click Page Properties. Set color for hyperlinks by selecting Links in the Category window

Set color for text Set background color Select background image

Adobe Dreamweaver

Instructor Tonia O'Dwyer

12

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Specify font settings

You can set the font settings for your web page through the Preferences
Proportional font This is the font Dreamweaver uses to display normal text (like in paragraphs, headings, and tables). Fixed font This is the font Dreamweaver uses to display text in pre, code, and tt tags. Code view This is the font Dreamweaver uses for the Code view and Code inspector

Adobe Dreamweaver

Instructor Tonia O'Dwyer

13

Add text to your Web pages

You can add text to your pages by typing it in or by copying and pasting from some other document. You can use the Property inspector to set the font style options. The Property inspector has a drop-down menu of HTML text formats, such as for paragraphs and headings.
HTML has six levels of headings. Heading 1 is the largest font size and is used for titles. Heading 6 is the smallest font size. The others decrease in size from Heading 2 to Heading 5.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

14

Add other text formatting using the Property inspector

The Property inspector can be used to apply different formatting options to your text. You can indent and outdent using the buttons indicated below.

You can also format text into lists. You can create an ordered (numbered) list or unordered (bulleted) list. You can also create a definition list by clicking the Format menu, pointing to List, and then clicking Definition List.
Adobe Dreamweaver

Unordered list

Ordered list

Instructor Tonia O'Dwyer

15

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Use the Assets panel to save and access color

Every color used in your site is listed in the Assets panel. You can save commonly used colors as a Favorite to use in other parts of your site, and you can create custom colors.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

16

Change font color using the Assets panel

Select the text in your page that you want to change. Select the color from the Assets panel color list and click the Apply button.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

17

Summary
In this lesson, you learned: About the Dreamweaver graphical user interface. To define a new site. How to name, title, and save your documents. To specify preview browsers. To specify background, text, and link colors. How to put text on a page and format it. How to use the Assets panel to select and apply color to text.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

18

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Working with Graphics

Lesson 2

Adobe Dreamweaver

Instructor Tonia O'Dwyer

19

Objectives
Identify the graphics formats commonly used on Web pages. Insert graphics on a Web page. Use the Assets panel to manage graphics. Wrap text around graphics and work with alignment options. Insert buttons and animations from Flash.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

20

Graphic formats for Web use

Modern Web browsers all support graphic images in GIF or JPEG format. Learn when to use which format:
GIF Use when your image has large areas of solid color and no color blending.
GIF images are saved in 8-bit color mode, which limits them to 256 colors.

JPEG Use when your images are photographs or when the image contains a large color tonal range.
JPEG images are saved in 24-bit color mode and can contain millions of colors.

Both image formats are saved as compressed files, creating a small file which downloads quickly when the page is loaded.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

21

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Dreamweaver image referencing options

Dreamweaver allows you to choose how it will reference your images. Document-relative referencing constructs the path to the image based on the relative location of your HTML document to the graphics file.
Use this for hyperlinks and paths.

Site-root-relative referencing constructs the path to the image based on the relative location of the image from your site root.
Use this for very large sites or if you will be moving pages frequently within the server.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

22

Placing an image on a page

Click in your document to set the insertion point, then click the Image button on the Common category of the Insert bar. When the Select Image Source dialog box opens, locate and select the image in the folder containing the image. Click the arrow on the Relative To box and select your referencing preference. Click OK to insert the image at the insertion point.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 23

Naming your image

While it is not required, it is a good idea to name your image in the Property inspector. Enter a name for the image in this text box.

Enter alternate text for the image here that will display if the image cannot be displayed, or can be read by reader software used by people with a vision disability.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

24

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

Manage images using the Assets panel

All images added to a site are listed in the Assets panel. You can categorize images as favorites and store them in folders to locate them quickly when needed. Images stored in the Assets panel can quickly be added to any part of your site. Before you can add images to the Assets panel, a site cache and a site catalog must be created.
You will be prompted to create these when you open the Access panel if they do not already exist.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 25

The Assets panel

This figure shows the Favorites view of the Assets panel. When you click on an image to select it, a thumbnail will appear in the upper part of the panel.

If you add an image and it does not immediately appear in the list, click the Refresh Site List button.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

26

Wrap text around images

Dreamweaver allows you to set alignment options to wrap text to the left or the right of an image.
There are many alignment options that can be set for images, but only Left and Right affect text wrapping.

When choosing your alignment option, remember,

If you want your image on the left side of the page and the text to wrap to the right side of the image, choose the Left align option. If you want your image on the right side of the page and the text to wrap to the left side of the image, choose the Right align option.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

27

Instructor Tonia O'Dwyer

Adobe Dreamweaver October 2010

The Property inspector showing image properties

This figure shows the Property inspector when an image has been selected on the page. The H Space and V Space text boxes are used to add horizontal and vertical space around the edge of the image.

You can specify a border (in pixel width) around the image in the Border box
Adobe Dreamweaver

Clicking the Align list arrow shows the available alignment options for images.

Instructor Tonia O'Dwyer

28

Image alignment options

There are many image alignment options you can choose, such as:
Baseline or Bottom Aligns the bottom of the image with the baseline of a text line. Top Aligns the image with the top of the tallest item in the line. Middle Aligns the baseline of a text line with the middle of the image. Text Top Aligns the image with the top of the tallest text in a text line. Absolute Middle Aligns the middle of the text line with the middle of the image. Absolute Bottom Aligns the bottom of the image with the bottom of the text line.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 29

Add a Flash animation

Flash animations must be created before you add them to your page. They cannot be created in Dreamweaver. To add one to your page:
Position the insertion point, then click Flash on the Assets panel. Locate the animation in the Favorites panel and click Insert. Select the Loop and Autoplay options in the Property inspector. Click Play to preview the animation, and click Stop to stop it.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

30

Instructor Tonia O'Dwyer

10

Adobe Dreamweaver October 2010

Summary
In this lesson, you learned: How to identify the graphics formats commonly used on Web pages. How to insert graphics on a Web page. To use the Assets panel to manage graphics. How to wrap text around graphics and work with alignment options. How to animations from Flash.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

31

Creating Links
Lesson 3

Adobe Dreamweaver

Instructor Tonia O'Dwyer

32

Objectives
Define how linking works. Choose objects to use as links. Display linked content in a new browser window. Create text and graphic links, and hotspots. Create named anchors to jump to a location within a Web page.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 33

Instructor Tonia O'Dwyer

11

Adobe Dreamweaver October 2010

What is a link?
One reason for the popularity of HTML is its ability to link to another document in the same or different site, or instantly jump to a specific location in the current document. This is done via hypertext links, also called hyperlinks.
Text links on a page are usually displayed in a color and are underlined. Graphic links may have a colored border around them.

An HTML link consists of two parts:

There is the text or the graphic that serves as the source or trigger for the link. The link is activated when the text or image is clicked. The path to the target file or an URL if the link target is a Web page.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

34

Create a hypertext link using text

To create a link to an external document:
Open a Dreamweaver document and select a word, sentence, or even a paragraph to use as the link. In the Property inspector, click the Folder icon next to the Link box. Locate the file that is the target of the link in the Select File dialog box. Select the file and click the OK button. The name of the file you selected will now appear in the Link box.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

35

An example of a link to a Web page

This figure shows where in the Property inspector a link to a Web page needs to be defined..

Clicking the Folder icon will open the Select File dialog box.
Adobe Dreamweaver

Instructor Tonia O'Dwyer

36

Instructor Tonia O'Dwyer

12

Adobe Dreamweaver October 2010

Creating a link using a graphic image

Using a graphic as the source of a link is not much different than using text.
In the Document window, select the graphic to be used.
If linking to a local file, follow the same steps as when creating a text link. If linking to a Web page, type the full URL of the Web page into the Link box.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

37

Display linked content in a new browser window

Normally, when you activate a link, the target page opens in the same browser window you are currently in, overwriting your page with the link page. You can force the link to open in a new window so that the user still has full access to your site. You use the Target pop-up menu in the Property inspector to set options that determine how the link page opens.
Be aware that when you do open link pages in new windows, it requires more memory usage on the users computer for every window you open.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

38

Link Target value settings

The settings you can select from the Target popup menu for a link page are:
_blank Loads the link page in a new window. _parent Loads the link page in the parent frameset or window of the page that is the source of the link. _self Loads the link page in the same frame or window as the source link. _top Loads the link page in the full browser window, removing all frames.

Targets other than _blank only work when your page has frames defined.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 39

Instructor Tonia O'Dwyer

13

Adobe Dreamweaver October 2010

Create links using image maps with defined hotspots

You can define hotspots in an image to act as links.
For example, an image that is the map of a state may have several cities labeled on the image. You can create a hotspot for each label so the user could view additional information about each city by clicking the city name.

An image that has hotspots defined in it is called an image map. One image map may contain links to many different Web pages, to some other graphic, or to some new location in the current document. You can create rectangular, circular or oval, or polygon hotspots using tools in the Property inspectors Map text box.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

40

Create a rectangular hotspot

Click the Rectangular Hotspot tool in the Property inspector Map text box. Drag a rectangular area around the area of the image to be defined as the hotspot.
A translucent blue-green area with sizing handles will appear where you dragged. Select the Pointer Hotspot tool and resize the box, or drag it to cover the exact area you want defined.

With the rectangle still selected, enter a description in the Alt text box (optional). Click the Folder icon next to the Link text box and locate the file that is the target of the link. Repeat this procedure for every hotspot to be defined for the current image map. You can mix shapes without problems, i.e. one rectangle hotspot, one circular, one polygon, etc.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

41

The Map text box in the Property inspector

This figure shows the Map text box at the bottom of the Property inspector.

The Hotspot tools Pointer

Rectangle

Oval

Polygon

Adobe Dreamweaver

Instructor Tonia O'Dwyer

42

Instructor Tonia O'Dwyer

14

Adobe Dreamweaver October 2010

Link to named anchors

In addition to linking to external documents or Web pages, you may want to link to some spot in the current page. To do that, you must create a jump-to point in the document, which is called a named anchor. After defining the named anchor, when you select the text or image as the source for the link, you point to the named anchor as the target instead of an external file or URL.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 43

Create a named anchor

To create a named anchor:
Position the insertion point in front of the text or graphic that you want to jump to. Click Named Anchor on the Common category of the Insert bar to open the Named Anchor dialog box. Enter a name for the location and click OK.
Dont use spaces or special characters in the name. Named anchors are case sensitive in many browsers.

Select the text or image in the document that is the source of the link. In the Link text box of the Property inspector, enter the name you assigned to the anchor preceded by a pound or number sign (#), such as #anchor1.

When you click on the source of the link, you will jump to the named anchor elsewhere in the document.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

44

The Named Anchor dialog box and the Property inspector

The figure on the left shows the Named Anchor dialog box where you define the name to use for the anchor. The figure below shows the Property inspector with that named anchor listed in the Link box, preceded by the # symbol to indicate it is a named anchor.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

45

Instructor Tonia O'Dwyer

15

Adobe Dreamweaver October 2010

Summary
In this lesson, you learned: To define how linking works. How to choose objects to use as links. How to display linked content in a new browser window. How to create text and graphic links, and hotspots. How to create named anchors to jump to a location within a Web page.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

46

Working with Tables for Page Design

Lesson 4

Adobe Dreamweaver

Instructor Tonia O'Dwyer

47

Objectives
Import images to use as tracing images. Use tables to lay out your pages. Work with tables in Layout, Standard, and Expanded mode. Import tabular data. Select elements of a table and modify their properties. Sort tables. Export a table.
Adobe Dreamweaver

Instructor Tonia O'Dwyer

48

Instructor Tonia O'Dwyer

16

Adobe Dreamweaver October 2010

Use a tracing image

If you have a graphic image you want to use as a page design, you can import it into Dreamweaver and use it as a tracing image to create your page.
The image must be JPEG, GIF, or PNG format.

The tracing image is visible only inside Dreamweaver. It is referenced in the HTML code, but will not be loaded or displayed by the browser. When using a tracing image, your page background image or color will be hidden in Dreamweaver, but it will be visible in the browser.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

49

Import a tracing image

To insert a tracing image into your Dreamweaver document:
Create a new document, name it, and save it. Click the View menu, point to Tracing Image, and click the Load option. Double-click Images and locate the file to be used as the tracing image. Click OK or Choose. Adjust the Image Transparency slider to adjust the opacity of the image to where you can see the image, but it is not a distraction. Click OK.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

50

Tables help lay out your pages

Tables can give you greater control over where text and images appear on your Web pages. HTML tables are similar to a spreadsheet table where there is a series of rows and columns. Text and graphics can be placed inside table cells to precisely position them on the page and in relation to each other.
Attributes of the table and the individual cells, such as cell height and width, can be adjusted as needed. Cells can be merged to further aid in aligning page objects.

Dreamweaver has three modes for designing tables, Layout, Standard, and Expanded modes.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

51

Instructor Tonia O'Dwyer

17

Adobe Dreamweaver October 2010

Design tables in Layout mode

Layout mode allows you to see just the cells of the table that you draw. In Layout view, you can add a layout table or just add layout cells to the page.
If you draw just a cell, Dreamweaver will create a layout table for you. The layout table is as wide as the document window and starts in the top-left corner.

Layout tables will have a tab at the top to help identify the table. It will contain column numbers and a column menu.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

52

Creating a layout cell and inserting a graphic image

With a document open, use the pop-up menu on the Insert bar to select the Layout category.
You can also click the View menu, point to Table Mode, and then select Layout.

Click the Draw Layout Cell button on the Layout category of the Insert bar.
(continued)

Adobe Dreamweaver

Instructor Tonia O'Dwyer

53

Creating a layout cell and inserting a graphic image

(continued)

Place the pointer on the page and drag to draw a cell.

The cell will be outlined in blue, and the table (created by Dreamweaver) will be outlined in green. If you move the pointer over the border of the cell, the border will turn red to let you know which cell you are over. If you click the red border, the cell will be selected and sizing handles will appear that you can use to resize the cell.

Open the Assets panel and locate the graphic to insert in the cell. Drag it from the folder to the cell.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

54

Instructor Tonia O'Dwyer

18

Adobe Dreamweaver October 2010

Create tables in Standard view

Dreamweaver Standard table view shows you the HTML table structure. You can create a new table in this view or view the table automatically created by Dreamweaver when you created a layout cell in Layout mode. If the information to be entered in the table is structured into rows and columns, similar to spreadsheet data, this mode is easier to work in than Layout mode.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 55

Insert a table in Standard mode

Create a new document, name it, and save it. Position the insertion point in the document window where you want the table to start. Click the Insert menu, then click Table to open the Insert Table dialog box. Enter the number of rows and columns for the table. Set the table width and define a border. You can also set Cell Padding and Cell Spacing values if desired. Click OK to close the dialog box and display the table.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

56

Import data from a spreadsheet or text document

If you have text in a spreadsheet or word processing document, you can import that data into a Dreamweaver table. The data to be imported must be in text format in a tab- or comma-delimited file. Dreamweaver will automatically create the table based on the information you supply in the Import Tabular Data dialog box.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 57

Instructor Tonia O'Dwyer

19

Adobe Dreamweaver October 2010

The Import Tabular Data dialog box

This figure shows the Import Tabular Data dialog box. To open this box, click the Insert menu, point to Table Objects, and then click Import Tabular Data. Click the Browse button to find the text file to import. After finding your file, click the Delimiter list arrow and select the delimiter used in the text file. Click the Set option button and specify the table width. Set other parameters as needed. Click OK to import the data and build the table.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

58

Select table cells

You can select cells in several ways:
Select a row or column Position the pointer at the left margin of a row or at the top of a column and click when the selection arrow appears. You can also click within a cell and drag down or across to select multiple cells. Select one or more cells Click in a cell and drag down or across other cells to be selected. Or, click in one cell, press and hold down the Shift key, and click in another cell to select all cells within a rectangular region defined by the two cells. Select noncontiguous cells Press the Ctrl or Command key and hold it down, then click in each individual cell to be selected.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

59

Modify table cells

You can modify existing cells and add new table cells:
Resize cells Move the pointer over a border and drag. Add a new row Click in the last cell of a row and press Tab.
There are also operations to insert a row in the middle of the table or to add a row before or after the current row.

Delete a row Click in a row, click the Modify menu, point to Table, then click Delete Row. Span columns and rows Drag to select multiple cells, then click Merge Cells on the Property inspector. Splitting a cell Select the cell and then click Split Cell on the Property inspector.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

60

Instructor Tonia O'Dwyer

20

Adobe Dreamweaver October 2010

Set or change cell attributes

You can modify cell attributes to format the table as you want it to appear:
You can set the horizontal and vertical alignment of the cells contents. You can change the width and height of selected cells. You can set a background image or color for a cell. You can change the border for a cell. You can set text wrapping options for cells. You can format a header row for the table.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

61

Sort table data

You can sort the data in the table on one or two columns:
In Standard mode, select the table, click the Commands menu, then click Sort Table. Select the column for the primary sort key and select a secondary key if desired. Select the desired sort order for each key. If your table has a header row, leave the Sort Includes First Row check box unselected. Set other options as desired and click OK to sort the table according to your settings.

You cannot sort a table with merged cells.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

62

The Sort Table dialog box

This figure shows the Sort Table dialog box. The Sort By box indicates the primary sort field. You can specify a secondary sort column in the Then By box. Choose the sort order in the Order box for each sort key.

Set the check box options as needed to control your sort operation.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

63

Instructor Tonia O'Dwyer

21

Adobe Dreamweaver October 2010

Export a table
You can export the data in your table as a text file, which can then be imported into a word processing program, spreadsheet, or database. To do so:
Select the table, click the File menu, point to Export, then click Table. Select the delimiter type to use for the export file (tab, comma, space, etc.). Select a Line Break option for the operating system that the file will be accessed by. Click the Export button to open the Export Table As dialog box, name the file, select the .txt file type, and click the Save button to export the data.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 64

Summary
In this lesson, you learned: How to import images to use as tracing images. To use tables to lay out your pages. To work with tables in Layout, Standard, and Expanded modes. How to import tabular data. Different methods of selecting elements of a table and modifying their properties. How to sort tables. How to export a table.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

65

Uploading a Website
Lesson 5

Adobe Dreamweaver

Instructor Tonia O'Dwyer

66

Instructor Tonia O'Dwyer

22

Adobe Dreamweaver October 2010

Objective
Understand the purpose and uses of the Site window Use site management functions within the Site window Understand the difference between a local site and a remote site Learn how to customise the Site window Learn how to set up a connection to a remote site Learn how to copy files to and from a remote site
Adobe Dreamweaver
Instructor Tonia O'Dwyer 67

Using The Site Window

The Site window displays the file and folder structure of your site. You can add and delete files or folders, rename files and folders, and move files and folders. By doing file maintenance within the Site window, you are assured that your link information stays correct. Conversely, if you make file or folder changes within Windows Explorer (Windows) or Finder (Macintosh), Dreamweaver doesnt recognize the changes and cant keep your links correct.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 68

The Site Window

Connect/Disconnect: Connects to or disconnects from the remote site. By default, Dreamweaver disconnects the remote site if it has been idle for more than 30 minutes. Use Edit > Preferences to change the time limit. Refresh: Refreshes the local and remote directory lists. Get File(s): Copies the selected files from the remote site to your local site, overwriting any existing local copies. The files remain available on the remote site for other team members to check out.

Adobe Dreamweaver

Instructor Tonia O'Dwyer

69

Instructor Tonia O'Dwyer

23

Adobe Dreamweaver October 2010

Adding New Files or Folders to Your Site

You can easily add new pages and folders to your site directly from the Site window. In the Local Folder pane of the Site window, right-click and context menu opens

Adobe Dreamweaver

Instructor Tonia O'Dwyer

70

Opening Files from the Site Window

You can open a page for editing from either the site map or the site files list. To open a file in the Site window: In the Local Folder pane, double-click on the required file The document opens and is available for modification

Adobe Dreamweaver

Instructor Tonia O'Dwyer

71

Renaming Files in the Site Window

If you need to change the name of one of your files, change the name in the Site window. This preserves the link information maintained by Dreamweaver. To rename a file in the Site Window, rightclick on the required file, make the name changes then press enter
If you change the file name outside of Dreamweaver in either a HTML file or graphics file, Dreamweaver has no way to track your changes. If you make the change within the Site window, Dreamweaver updates all pages that link to the file or contain the graphic.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 72

Instructor Tonia O'Dwyer

24

Adobe Dreamweaver October 2010

Connecting to a Remote Site

Youve been working in the local site, developing pages and testing links. For visitors to see your Web pages, however, you need to copy them to a remote site. Typically, the remote site is on a server specified by your Web administrator or client, but it could also be on a local network. After creating your local site, you choose which remote site to connect to and the attributes of that remote site. Your instructor has setup an account to enable youto experiment with the Get and Put functions during class without the possibility of corrupting an actual remote site.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 73

Uploading Files
In the Site window, click Connect to connect to the remote server Connect logs you on to a remote server. For this class youve defined a local folder; therefore the Connect button is not active. Click Put File(s) to upload only the selected files to the server.
The Dependent Files dialog box opens Your choices are Yes, No, or Cancel. Yes sends the images on the selected page, along with the HTML page, to the server. No sends only the HTML page. If you have made changes only to the HTML page and the images are already on the server, there is no reason to re-send the images so you would click No. If you have modified an image or added an image to the page, you would click Yes.
Adobe Dreamweaver
Instructor Tonia O'Dwyer 74

Summary
In this lesson, you learned: The purpose and uses of the Site window How to use site management functions within the Site window The difference between a local site and a remote site How to customise the Site window How to set up a connection to a remote site How to copy files to and from a remote site
Adobe Dreamweaver

Instructor Tonia O'Dwyer

75

Instructor Tonia O'Dwyer

25