DW Lessons
-
Upload
toniamairead -
Category
Documents
-
view
223 -
download
0
Transcript of 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
Instructor Tonia O'Dwyer 2Adobe Dreamweaver
Objectives
Understand the Dreamweaver graphicaluser interface.
Recognise how Flash text differs fromregular text.
Define a new site.
Name, title, and save your documents.
(continued)
Instructor Tonia O'Dwyer 3Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 2
Instructor Tonia O'Dwyer 4Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 5Adobe Dreamweaver
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
Instructor Tonia O'Dwyer 6Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 3
Instructor Tonia O'Dwyer 7Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 8Adobe Dreamweaver
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)
Instructor Tonia O'Dwyer 9Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 4
Instructor Tonia O'Dwyer 10Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 11Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 12Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 5
Instructor Tonia O'Dwyer 13Adobe Dreamweaver
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
Instructor Tonia O'Dwyer 14Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 15Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 6
Instructor Tonia O'Dwyer 16Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 17Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 18Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 7
Instructor Tonia O'Dwyer 19Adobe Dreamweaver
Working with Graphics
Lesson 2
Instructor Tonia O'Dwyer 20Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 21Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 8
Instructor Tonia O'Dwyer 22Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 23Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 24Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 9
Instructor Tonia O'Dwyer 25Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 26Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 27Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 10
Instructor Tonia O'Dwyer 28Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 29Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 30Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 11
Instructor Tonia O'Dwyer 31Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 32Adobe Dreamweaver
Creating Links
Lesson 3
Instructor Tonia O'Dwyer 33Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 12
Instructor Tonia O'Dwyer 34Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 35Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 36Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 13
Instructor Tonia O'Dwyer 37Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 38Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 39Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 14
Instructor Tonia O'Dwyer 40Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 41Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 42Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 15
Instructor Tonia O'Dwyer 43Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 44Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 45Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 16
Instructor Tonia O'Dwyer 46Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 47Adobe Dreamweaver
Working with Tables for PageDesign
Lesson 4
Instructor Tonia O'Dwyer 48Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 17
Instructor Tonia O'Dwyer 49Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 50Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 51Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 18
Instructor Tonia O'Dwyer 52Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 53Adobe Dreamweaver
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)
Instructor Tonia O'Dwyer 54Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 19
Instructor Tonia O'Dwyer 55Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 56Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 57Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 20
Instructor Tonia O'Dwyer 58Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 59Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 60Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 21
Instructor Tonia O'Dwyer 61Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 62Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 63Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 22
Instructor Tonia O'Dwyer 64Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 65Adobe Dreamweaver
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, 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.
Instructor Tonia O'Dwyer 66Adobe Dreamweaver
Uploading a Website
Lesson 5
-
8/3/2019 DW Lessons
23/25
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 23
Instructor Tonia O'Dwyer 67Adobe Dreamweaver
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
Instructor Tonia O'Dwyer 68Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 69Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 24
Instructor Tonia O'Dwyer 70Adobe Dreamweaver
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
Instructor Tonia O'Dwyer 71Adobe Dreamweaver
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
Instructor Tonia O'Dwyer 72Adobe Dreamweaver
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
Adobe Dreamweaver October 2010
Instructor Tonia O'Dwyer 73Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 74Adobe Dreamweaver
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.
Instructor Tonia O'Dwyer 75Adobe Dreamweaver
Summary
In this lesson, you learned:
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