dw lessons

8/3/2019 DW Lessons

1/25

Adobe Dreamweaver October 2010

Instructor Tonia O'Dwyer 1

Instructor Tonia O'Dwyer 1Adobe Dreamweaver

Learning the Basics

Lesson 1


Objectives

Understand the Dreamweaver graphicaluser interface.

Recognise how Flash text differs fromregular text.

Define a new site.

Name, title, and save your documents.

(continued)


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 applycolor to text.

8/3/2019 DW Lessons

2/25




The Dreamweaver interface

The major components of the Dreamweaveruser interface are: The Document window, where you create and work

on your document. The Insert bar, located above the Document

window, and the toolbarwhich contain buttons forcommon tools and commands.

The Property inspector, located across the bottomof the Document window. Its contents changedepending on the object that is selected.

Various panelslocated on the right side of theDocument window that are used to manipulatedifferent aspects of your page as you build it.


An example of the Dreamweaverinterface

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

Toolbars

Document window

Property inspector

Panels


Define a new site

Before you can begin creating Web pages, you mustdefine a site to hold those pages.

You will create a local site on your computers harddrive 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 containedwithin the root.

You can also create a remote site on an Internetserver 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.

8/3/2019 DW Lessons

3/25




Choose your path referencepreference

There are three ways you can reference pathsin 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 alarge Web site that may span multiple servers.

Absolute Provides the full URL of the documentpath, including the protocol, such as http://.

Document-relative Provides a path for the file inrelation to the current folder. This is a good choicefor local links in most Web sites.


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 seethe Site Definition wizard appear.

If you have existing sites, the Manage Sites dialog

box will appear. If so, click the New button, thenclick Site.

Assign a name to the site to help you identifythe purpose or content of the site.

(continued)


Create a new site

To create a new site: (continued)

Indicate if you do or do not want to use a servertechnology.

Select the Edit local copies on my machineoption

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 ifopen, then click Done to close the Manage Sites

box.

8/3/2019 DW Lessons

4/25




Specify preview browsers

You can specify one or more Web browsers touse to preview your pages as you work onthem. 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 rightand indicate if it is a primary or secondary browser.

Add any other browsers that you want to use thatare not in the list. Ask your instructor for help if youare unable to add a new browser.

Click OK to close the dialog box. Your previewbrowsers are defined and ready for use.


Save, name, and add a title toyour documents

Any time you create a new document, you should saveit 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 theEnter or Return key.


Specify color for background,

text, and linksThis is the Page Properties box where you can set a background color orimage for your page. You can set a color to be used for text and forhyperlinks (Links, Visited and Active). To open this box, click the Modifymenu, then click Page Properties.

Set color for hyperlinksby selecting Links in the

Category window

Set color for text

Set background color

Select background image

8/3/2019 DW Lessons

5/25




Specify font settings

You can set the font settings for your webpage through the Preferences

Proportional fontThis is the font Dreamweaver uses to

display normal text (like in paragraphs,headings, and tables).Fixed fontThis is the font Dreamweaver uses todisplay text in pre, code, and tt tags.Code view

This is the font Dreamweaver uses forthe Code view and Code inspector


Add text to your Web pages

You can add text to your pages by typing it in or bycopying and pasting from some other document.

You can use the Property inspector to set the font styleoptions.

The Property inspector has a drop-down menu ofHTML 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.


Add other text formatting using

the Property inspector

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

You can also format text into lists. Youcan create an ordered (numbered) listor unordered (bulleted) list. You canalso create a definition list by clickingthe Format menu, pointing to List, andthen clicking Definition List.

Unordered list Ordered list

8/3/2019 DW Lessons

6/25




Use the Assets panel to saveand access color

Every color used in yoursite is listed in theAssets panel.

You can savecommonly used colorsas a Favorite to use inother parts of your site,and you can createcustom colors.


Change font color using theAssets panel

Select the text in yourpage that you want to

change.

Select the color from

the Assets panel colorlist and click the Applybutton.


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.

8/3/2019 DW Lessons

7/25




Working with Graphics

Lesson 2


Objectives

Identify the graphics formats commonly usedon 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.


Graphic formats for Web use

Modern Web browsers all support graphic images inGIF 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 theimage 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 thepage is loaded.

8/3/2019 DW Lessons

8/25




Dreamweaver image referencingoptions

Dreamweaver allows you to choose how it willreference your images.

Document-relative referencing constructs the path tothe image based on the relative location of your HTMLdocument to the graphics file. Use this for hyperlinks and paths.

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

frequently within the server.


Placing an image on a page

Click in your document to set the insertionpoint, then click the Image button on theCommon category of the Insert bar.

When the Select Image Source dialog box

opens, locate and select the image in thefolder containing the image.

Click the arrow on the Relative To box andselect your referencing preference. Click OK toinsert the image at the insertion point.


Naming your image

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

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

8/3/2019 DW Lessons

9/25




Manage images using theAssets panel

All images added to a site are listed in theAssets panel.

You can categorize images as favorites andstore them in folders to locate them quicklywhen needed.

Images stored in the Assets panel can quicklybe added to any part of your site.

Before you can add images to the Assetspanel, a site cache and a site catalog must becreated. You will be prompted to create these when you

open the Access panel if they do not already exist.


The Assets panel

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

If you add animage and it doesnot immediately

appear in the list,click the RefreshSite List button.


Wrap text around images

Dreamweaver allows you to set alignment options towrap 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 Leftalign option.

If you want your image on the right side of the page and thetext to wrap to the left side of the image, choose the Rightalign option.

8/3/2019 DW Lessons

10/25




The Property inspector showingimage properties

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

You can specify aborder (in pixelwidth) around theimage in the Borderbox

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


Image alignment options

There are many image alignment options you canchoose, 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 theline.

Middle Aligns the baseline of a text line with the middle ofthe image.

Text Top Aligns the image with the top of the tallest text in atext line.

Absolute Middle Aligns the middle of the text line with themiddle of the image.

Absolute Bottom Aligns the bottom of the image with thebottom of the text line.


Add a Flash animation

Flash animations must be created before youadd them to your page. They cannot becreated 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 andclick Insert.

Select the Loop and Autoplay options in theProperty inspector. Click Play to preview theanimation, and click Stop to stop it.

8/3/2019 DW Lessons

11/25




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.


Creating Links

Lesson 3


Objectives

Define how linking works.

Choose objects to use as links.

Display linked content in a new browserwindow.

Create text and graphic links, andhotspots.

Create named anchors to jump to alocation within a Web page.

8/3/2019 DW Lessons

12/25




What is a link?

One reason for the popularity of HTML is its ability to link toanother document in the same or different site, or instantly jumpto a specific location in the current document.

This is done via hypertext links, also called hyperlinks. Text links on a page a re 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.


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


An example of a link to a Web

pageThis figure shows where in the Property inspector a link to a Web pageneeds to be defined..

Clicking the Folder icon willopen the Select File dialogbox.

8/3/2019 DW Lessons

13/25




Creating a link using a graphicimage

Using a graphic as the source of a link isnot much different than using text.

In the Document window, select the graphicto be used.

If linking to a local file, follow the same steps aswhen creating a text link.

If linking to a Web page, type the full URL of theWeb page into the Link box.


Display linked content in a newbrowser window

Normally, when you activate a link, the target pageopens in the same browser window you are currentlyin, overwriting your page with the link page.

You can force the link to open in a new window so thatthe 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 linkpage opens. Be aware that when you do open link pages in new windows, it

requires more memory usage on the users computer for everywindow you open.


Link Target value settings

The settings you can select from the Target pop-up menu for a link page are: _blank Loads the link page in a new window.

_parent Loads the link page in the parent framesetor window of the page that is the source of the link.

_self Loads the link page in the same frame orwindow as the source link.

_top Loads the link page in the full browser window,removing all frames.

Targets other than _blank only work when yourpage has frames defined.

8/3/2019 DW Lessons

14/25




Create links using image mapswith 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 hotspotfor each label so the user could v iew additional informationabout each city by clicking the city name.

An image that has hotspots defined in it is called animage map.

One image map may contain links to many differentWeb pages, to some other graphic, or to some newlocation in the current document.

You can create rectangular, circular or oval, orpolygon hotspots using tools in the Propertyinspectors Map text box.


Create a rectangular hotspot

Click the Rectangular Hotspot tool in the Property inspector Maptext box.

Drag a rectangular area around the area of the image to bedefined 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 coverthe exact area you want defined.

With the rectangle still selected, enter a description in the Alt textbox (optional).

Click the Folder icon next to the Link text box and locate the filethat is the target of the link.

Repeat this procedure for every hotspot to be defined for thecurrent image map. You can mix shapes without problems, i.e.one rectangle hotspot, one circular, one polygon, etc.


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

8/3/2019 DW Lessons

15/25




Link to named anchors

In addition to linking to external documents orWeb pages, you may want to link to some spotin the current page.

To do that, you must create a jump-to point inthe document, which is called a named anchor.

After defining the named anchor, when you

select the text or image as the source for thelink, you point to the named anchor as thetarget instead of an external file or URL.


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 nameyou 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 tothe named anchor elsewhere in the document.


The Named Anchor dialog box

and the Property inspectorThe figure on the left shows the Named

Anchor dialog box where you define thename to use for the anchor. The figurebelow shows the Property inspectorwith that named anchor listed in theLink box, preceded by the # symbol toindicate it is a named anchor.

8/3/2019 DW Lessons

16/25




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 locationwithin a Web page.


Working with Tables for PageDesign

Lesson 4


Objectives

Import images to use as tracing images.

Use tables to lay out your pages.

Work with tables in Layout, Standard, andExpanded mode.

Import tabular data.

Select elements of a table and modify theirproperties.

Sort tables.

Export a table.

8/3/2019 DW Lessons

17/25




Use a tracing image

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

The tracing image is visible only inside Dreamweaver. Itis referenced in the HTML code, but will not be loadedor displayed by the browser.

When using a tracing image, your page backgroundimage or color will be hidden in Dreamweaver, but it willbe visible in the browser.


Import a tracing image

To insert a tracing image into yourDreamweaver document: Create a new document, name it, and save it.

Click the View menu, point to Tracing Image, andclick the Load option.

Double-click Images and locate the file to be used asthe tracing image. Click OK or Choose.

Adjust the Image Transparency slider to adjust theopacity of the image to where you can see theimage, but it is not a distraction. Click OK.


Tables help lay out your pages

Tables can give you greater control over where textand images appear on your Web pages.

HTML tables are similar to a spreadsheet table wherethere is a series of rows and columns.

Text and graphics can be placed inside table cells toprecisely position them on the page and in relation toeach other. Attributes of the table and the individual cells, such as cell

height and width, can be adjusted as needed. Cells can bemerged to further aid in aligning page objects.

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

8/3/2019 DW Lessons

18/25




Design tables in Layout mode

Layout mode allows you to see just the cells ofthe table that you draw.

In Layout view, you can add a layout table orjust 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 documentwindow and starts in the top-left corner.

Layout tables will have a tab at the top to helpidentify the table. It will contain columnnumbers and a column menu.


Creating a layout cell andinserting a graphic image

With a document open, use the pop-upmenu on the Insert bar to select theLayout category.

You can also click the View menu, point toTable Mode, and then select Layout.

Click the Draw Layout Cell button on theLayout category of the Insert bar.

(continued)


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 borderwill turn red to let you know which cell you are over.

If you click the red border, the cell will be selected and sizinghandles will appear that you can use to resize the cell.

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

8/3/2019 DW Lessons

19/25




Create tables in Standard view

Dreamweaver Standard table view shows youthe HTML table structure.

You can create a new table in this view or viewthe table automatically created byDreamweaver when you created a layout cellin Layout mode.

If the information to be entered in the table isstructured into rows and columns, similar tospreadsheet data, this mode is easier to workin than Layout mode.


Insert a table in Standard mode

Create a new document, name it, and save it.

Position the insertion point in the document windowwhere you want the table to start.

Click the Insert menu, then click Table to open theInsert 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.


Import data from a spreadsheet

or text document

If you have text in a spreadsheet or wordprocessing document, you can import that data

into a Dreamweaver table.

The data to be imported must be in text formatin a tab- or comma-delimited file.

Dreamweaver will automatically create thetable based on the information you supply inthe Import Tabular Data dialog box.

8/3/2019 DW Lessons

20/25




The Import Tabular Data dialogbox

This figure shows the Import Tabular Data dialog box. To open this box,click the Insert menu, point to Table Objects, and then click ImportTabular Data. Click the Browse button to find the text file to import.

After finding your file, clickthe Delimiter list arrow andselect the delimiter used inthe text file. Click the Setoption button and specifythe table width. Set otherparameters as needed. ClickOK to import the data andbuild the table.


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 selectionarrow appears. You can also click within a cell and drag downor across to select multiple cells.

Select one or more cells Click in a cell and drag down oracross other cells to be selected. Or, click in one cell, press andhold 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.


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 tableor to add a row before or after the current row.

Delete a row Click in a row, click the Modify menu, point toTable, then click Delete Row.

Span columns and rows Drag to select multiple cells, thenclick Merge Cells on the Property inspector.

Splitting a cell Select the cell and then click Split Cell on theProperty inspector.

8/3/2019 DW Lessons

21/25




Set or change cell attributes

You can modify cell attributes to format thetable 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.


Sort table data

You can sort the data in the table on one or twocolumns: In Standard mode, select the table, click the Commands

menu, then click Sort Table.

Select the column for the primary sort key and select asecondary 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.


The Sort Table dialog box

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

Set the check boxoptions as neededto control your sortoperation.

8/3/2019 DW Lessons

22/25




Export a table

You can export the data in your table as a textfile, which can then be imported into a wordprocessing program, spreadsheet, ordatabase. 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 systemthat the file will be accessed by.

Click the Export button to open the Export Table Asdialog box, name the file, select the .txt file type,and click the Save button to export the data.


Summary


How to import images to use as tracing images.

To use tables to lay out your pages.

To work with tables in Layout, Standard, andExpanded 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.


Uploading a Website

Lesson 5

8/3/2019 DW Lessons

23/25




Objective

Understand the purpose and uses of the Sitewindow

Use site management functions within the Sitewindow

Understand the difference between a local siteand a remote site

Learn how to customise the Site window

Learn how to set up a connection to a remotesite

Learn how to copy files to and from a remotesite


Using The Site Window

The Site window displays the file and folderstructure of your site.

You can add and delete files or folders,rename files and folders, and move files andfolders.

By doing file maintenance within the Sitewindow, you are assured that your link

information stays correct. Conversely, if youmake file or folder changes within WindowsExplorer (Windows) or Finder (Macintosh),Dreamweaver doesnt recognize the changesand cant keep your links correct.


The Site Window

Connect/Disconnect: Connects to ordisconnects from the remote site. Bydefault, Dreamweaver

disconnects the remote site if it hasbeen 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 localsite, overwriting any existing local

copies. The files remain available onthe remote site for other teammembers to check out.

8/3/2019 DW Lessons

24/25




Adding New Files or Folders to YourSite

You can easily addnew pages andfolders to your sitedirectly from the Sitewindow.

In the Local Folderpane of the Sitewindow, right-clickand context menuopens


Opening Files from the Site Window

You can open a page for editing fromeither the site map or the site files list.

To open a file in the Site window:

In the Local Folder pane, double-click onthe required file

The document opens and is available formodification


Renaming Files in the Site Window

If you need to change the name of one ofyour files, change the name in the Sitewindow.

This preserves the link informationmaintained by Dreamweaver.

To rename a file in the Site Window, right-click on the required file, make the namechanges then press enter

If you change the file name outside of Dreamweaver in either a HTML file orgraphics file, Dreamweaver has no way to track your changes. If you make thechange within the Site window, Dreamweaver updates all pages that link to the

file or contain the graphic.

8/3/2019 DW Lessons

25/25



Connecting to a Remote Site

Youve been working in the local site, developingpages 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 specifiedby your Web administrator or client, but it could alsobe on a local network.

After creating your local site, you choose which remotesite to connect to and the attributes of that remote site.

Your instructor has setup an account to enable youtoexperiment with the Get and Put functions during class

without the possibility of corrupting an actual remotesite.


Uploading Files

In the Site window, click Connect to connect to theremote server Connect logs you on to a remote server.For this class youve defined a local folder; thereforethe Connect

button is not active.

Click Put File(s) to upload only the selected files to theserver. The Dependent Files dialog box opens

Your choices are Yes, No, or Cancel.

Yes sends the images on the selected page, along with the HTMLpage, to the server.No sends only the HTML page.If you have made changes only to the HTML page and the imagesare already on the server, there is no reason to re-send the imagesso you would click No.If you have modified an image or added an image to the page, youwould click Yes.


Summary


The purpose and uses of the Site window

How to use site management functions withinthe Site window

The difference between a local site and aremote 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

dw lessons

Documents