Dream Weaver Reference Guide
-
Upload
anselm-joseph -
Category
Documents
-
view
219 -
download
0
Transcript of Dream Weaver Reference Guide
-
8/8/2019 Dream Weaver Reference Guide
1/15
Ohio University
Computer Services CenterJanuary, 2006
Dreamweaver MX Introduction Reference Guide
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
1
Introduction to the Internet
The Internet is a worldwide network ofnetworks. Government, education, andbusinesses are joined by individual computerusers accessing the Internet. Individuals as wellas businesses can also publish information onthe Internet.
Web pages are viewed in a Web browser, andstored on another computer, called a Webserver. The Web server contains folders, andfiles much like your own computer. A viewer
accesses a document by typing a URLoraddressinto a browser.
The pages you view on the Web are createdusing the Hypertext Markup Language, orHTML. The documents contain text, graphics
and links to other files, plus the HTMLtags.The viewers browser will interpret the tags anddisplay the page. When you click on ahyperlink, the viewer goes to a new page, or tonew location.
The software you will need for web authoringincludes:
A Web browser to view the page, A text editor to edit the HTML file, An FTP program to upload the page
Planning Web Sites
When creating a Web site, it is helpful to dosome planning before starting work inDreamweaver.
First think about the purpose of your Website. What do you want your Web site todo?
After that, think about who will visit yoursite. Are they new to the Internet orexperienced Web surfers?
Next, start to organize the content. Whattopics will you have on your site?
The next step is to group topics into pages.Create an outline or diagram for your site.How will the information flow? How will
visitors navigate the site?
Finally, think about what you want the siteto look like. Looking at other Web sites can
be helpful in choosing what colors you touse, and other design ideas.
Introduction to Dreamweaver
The Dreamweaver work environment makes iteasy to build Web pages. You can visually layout your pages using techniques similar tothose youd use with a word processing or pagelayout program. In addition, you access toolsdirectly related to Web content.
The Dreamweaver working environmentcontains many of the same features as any other
Windows application, but it also has someadded elements.
-
8/8/2019 Dream Weaver Reference Guide
2/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
2
Menu BarThe top bar, the Menu bar, is similar to other
word processing menu bars with the additionof a few extra menus: Modify, Text,Commands, and Site.
Insert BarThe Insert bar contains tools that allow you toadd a wide variety of content to your pages.The default category in the Insert Bar is theCommon category, which contains a numberof buttons that allow you to add variouselements to Web pages, including images,hyperlinks, tables, rules, and objects such asFlash or Shockwave files. In addition, the tabsacross the top of the Insert Bar allow youaccess to other categories such as:
The Layout category contains tools forworking with tables.
The Text category contains additionalbuttons to apply formatting to your pages.
The Tables category lets you add rows andcolumns to a table while working with theHTML code.
The Frames category contains buttons thatassist you in building a frameset.
The Forms category contains tools to helpyou build forms.
The Templates category includes tools forcreating a template.
The Characters category lets you addtypographic characters to your pages.
The Media category can be used to addobjects such as Flash files or Java applets.
The Head category lets you add meta tagsto your pages.
The Script andApplication categoriesallow you to add scripts and databasefeatures to your Web pages.
Document ToolbarThe Document toolbar contains buttons totoggle between different views, as well as filemanagement commands.
Status BarThe Status bar contains the Tag Selector, the
Window Size drop-down list, and theDocument Size and Download Time field.
Property InspectorThe Properties inspector contains settings thatallow you to specify the properties of text andother objects that you place on Web pages.The settings in the Properties inspector change
to reflect the particular object you are workingwith. You can use the Properties inspector toformat text, set table borders, specify linkdestinations, and specify many other attributesof page objects.
Panel GroupsThe panel groups on the right to let you viewand change information about the pages andtheir contents. There are Design, Code,
Application, File, and Answer panels. You will
work with a part of the Files panel group calledthe Site panel.
-
8/8/2019 Dream Weaver Reference Guide
3/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
3
Site PanelThe Site panel allows you to view and managethe various files that comprise the site. Inaddition, you will use the Site panel to uploadfiles to a Web server.
Preview a PageWhen you build pages directly inDreamweaver, you can see what they will looklike as you work with them. However, in orderto test the various page links or view anyJavaScript or Flash or Shockwave files, youneed to actually preview the pages in a Webbrowser. You can set multiple browsers to beavailable in the Preview in Browser in the Filemenu.
Examining a Page
1. From the Start button, go to Programs,
then choose Macromedia andfinally launch
Dreamweaver MX.
2. Choose File and Open. Navigate to the
Example folder in the Dreamweaver MXfolder.
3. Select the index.htm file,and clickOpen.The page opens in Design view.
4. Choose File and Preview in Browser and[Installed Browser].
5. Click the Store Info text linkat the bottomof the page.
6. Close the browser to and return to
Dreamweaver.
Dreamweaver Views
As you build your Web page, DreamweaverMX generates the HTML code for a browserto read the Web file that you create. You can
choose from three Views:
In Design view, you see the page as itwould look like to the viewer, but the linksare not live.
In Code view, you can see and edit theHTML and other code on the page.
In Code and Design view, your screen issplit so that you can see the HTML codecreated, and you can see the changes onthe page as you alter the code.
You can also work with the HTML code usingthe Tag Selector in the Status bar.
Looking at HTML Code
1. On the Document toolbar, click the Show
Code Viewbutton.
2. On the Document toolbar, click the ShowCode and Design Views button.
3. On the Document toolbar, click the ShowDesign Viewbutton.
4.You can use the tag selector in the StatusBar to select parts of your document. In theStatus Bar, click on the first
tag. Theentire first paragraph is selected.
5. Close the index.htm document. ClickNoto discard the changes.
-
8/8/2019 Dream Weaver Reference Guide
4/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
4
Creating a Web Site
In Dreamweaver, a defined Web site is thefolder containing all of the files necessary forthe sites operation, including HTML,
graphics, and other files. Before you create aWeb page you must create the Web site for it.
When defining the site, you can set up certainsite attributes, and leave others to be set up at alater time. For example, you do not have tospecify remote settings that you will need foruploading when you initially set up the site.
You will now define the Edens Gardens site.
Defining a New Web Site
1. Choose Site menu and New Site.A dialog
box appears. Make sure the Basic tab is active.
2. Type Edens Gardensfor the site name. Thesite name is used only by Dreamweaver.
3. Click Next.
4.You will not use advanced server technology(ASP or ColdFusion) in this Web site. Click on
the No, I Do Not Want To Use A Server
Technologybutton,then clickNext.
5.While developing the site, you will edit the
site files locally. Make sure the Edit Local
Copies Directly on my Local Machine radiobutton is selected.
6.You now need to select the folder where youwill store the site files for the Edens Gardenssite. Click the folder icon to select the local
folder.A dialog box appears.
7. Navigate to the Dreamweaver MXfolder.
Double click the Edens Gardens folder and
clickSelect. Then clickNext.
8.You will add the remote server information
at a later time. From the Remote Server drop-
down list,choose None. ClickNext.
9. You now see a summary screen. ClickDone
to complete the site definition.
Creating a Basic Web Page
You can add and edit text in a Dreamweaverdocument using the same basic techniques that
you would use in a word processer. You willnow begin building the Web site by creating asimple Web page that contains storeinformation for Edens Gardens.
Adding Text
1.You will create a new store information page
for Edens Gardens. Choose File menu andNew.A dialog box appears. Make sure the
General tab is active. Choose the Basic Page
category if necessary, and choose the HTML
page.
2. ClickCreate.
3. Type the following text, pressing Enter atthe end of each line:
Store Information
Edens Gardens
567 Nursery Lane
Atlanta, GA 30089
Phone:
(717) 5551234
E-mail:
Store Hours:
Mon-Sat 7am - 9pm
Sun 9am - 7pm
-
8/8/2019 Dream Weaver Reference Guide
5/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
5
4. Each time you press Enter, you create blanklines. This is because you are actually insertinga paragraph break. You will remove the extraline by using line breaks instead of paragraphbreaks.
Click to the left of Atlanta and pressBackspace.You have removed the paragraphbreak.
5. Hold down Shift and press Enter. Thisinserts a line break.
6.You will also remove the paragraph breaksbetween the store hours lines, the "phone"lines, the "email" line. Then replace them withline breaks.
Edens Gardens
567 Nursery Lane
Atlanta, GA 30089
Phone:
(717) 5551234
Email:
Store Hours
Mon-Sat 7am-9pm
Sun 9am-7pm
Text Formatting
To bold or to italicize text, press the B orthe I button in the Properties inspector.
Font SizeWhen you select the size for text, those sizesare based on the default size in each viewers
Web browser. You can select from two types of
sizes: absolute and relative.
To select absolute sizes, you can choose thevalues 1 through7 from the Size drop-down list in the Properties inspector. A 1 is
the smallest size, and 7 is the largest. A valueof 3 is the default font size.
You select relative sizes by choosing thevalues-7 through+7 in the Size drop-down
list in the Properties inspector. The relative sizeof +2 is two sizes larger than the default size,which is an absolute size of 5.
Paragraph FormatsYou can also apply sizes to headings andparagraphs using the Format drop-down list inthe Properties inspector. There are six headinglevels, with Heading 1 being the largest. The
various heading formats will change sizes andbold. In addition, you can select theParagraph format which uses the default textsize set in the browser.
Font StyleWhen selecting a font style for text, use fontsthat are likely to be installed on the viewerscomputer. The default font is Times NewRoman or Times. You apply fonts to selectedtext by choosing a font set from the Font list inthe Properties inspector.
Font ColorThere are 216 Web safe non-dithering colors.These colors will display the same in anybrowser and any platform. You can select acolor by choosing it from the palette or typingin the 6-digit hexadecimal value in theProperties inspector.
Formatting Type
1. First, Clickto place the insertion point inthe text Store Information. In the
Properties inspector, choose Heading 2 fromthe Format drop-down list.
-
8/8/2019 Dream Weaver Reference Guide
6/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
6
2. Select Edens Gardens. In the Properties
inspector, click theBold button.
3.You will also set an absolute size for the
text. In the Properties inspector, choosethe
4 fromthe Size drop-down list.
4 Next you will select a font style. With theEdens Gardens text still selected, chooseVerdana, Arial, Helvetica, Sans-Seriffromthe Font drop-down list.
5.With the Edens Gardens text stillselected, choose the fourth blue color in the
first column from the Color palette in the
Properties inspector (#000099).
Edens Gardens567 Nursery Lane
Atlanta, GA 30089
Phone:
(717) 5551234
Email:
Store HoursMon-Sat 7am-9pm
Sun 9am-7pm
Page Properties
The Page Properties submenu of the Modifymenu allows a number of settings that youapply to the entire page. For example, the textcolor, and the background color.
Page TitleA Web page may contain a title that is separatefrom the actual name of the file. The title willappear in the title bar of the browser windowand be used for the bookmark.
Page BackgroundYou can change the page background. You canselect a solid color or a background image. If
you use a background image, it will tile to fillthe current page size. Web pages can display
two types of images: GIF andJPG formats.
Saving Web Pages
When you save a Web page and name it, the
file name should only include lower casecharacters, and no punctuation and spaces. Thefile should end with a .htm or .html.
Specifying Page Properties
1. Choose Modifyand Page Properties.Adialog box appears.
2. In the Title field, type: Store
Information.
3. From the Background drop-down list,type
in #669900. ClickOK.
4. Choose File and Save. It should save it inthe Edens Gardens folder.
5. In the File Name field, typestore. Click
Save. Dreamweaver will add the .htm.
Close the store.htm file.
-
8/8/2019 Dream Weaver Reference Guide
7/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
7
Adding Content to a Page
Lists
There are three types of lists available on the
Web: ordered lists, unordered lists, anddefinition lists. In an unordered list, each item
is preceded by a bullet. In an ordered list, eachitem is preceded by a number. In a definition
list, each alternating item is formatted as aterm or its definition. In addition, you can usethe Text Indent and Text Outdent buttons toindent list items. This allows you to have sub-items in a list.
Creating a List
1. Using the Site panel, open the store.htmdocument.
2. Select thetextfrom "Edens Garden"
through Store Hours.
3. First format the selection as an ordered list.
In the Properties inspector, click the Ordered
List button.
4. Now with the text still selected, in theProperties inspector, click the Unordered
List button.
Edens Gardens567 Nursery Lane
Atlanta, GA 30089
Phone:(717) 5551234
Email:[email protected]
Store HoursMon-Sat 7am-9pm
Sun 9am-7pm
Images
Graphic File TypesThere are two types of graphics you may use on
your pages: GIF and JPEG. GIF images arelimited to 256 colors, and are most useful forimages with few colors. In addition, GIFimages support transparency, so you can havepage backgrounds show through parts of theimage.
JPEG images use compression to greatly
reduce file size, allowing for fasterdownloading. JPEG images are best forphotographs and other images that containmore than 256 colors. These images do notsupport transparency.
Inserting Images
Adding an image to a page is simple. You caneither use the Image button in the Common
pane of the Insert bar, or you can choose the
InsertImage command. An inserted imageis placed at the insertion point on the page.The HTML establishes a link from the Webpage to the image file. The image itself is aseparate file.
Inserting Images on a Page
1. Clickto place the insertion point after
Directions and press Enter.
2. Choose Insert and Image command.Adialog box appears.
3. Navigate to the graphics folder inside the
Edens Gardens folder. Select directions.gif,
-
8/8/2019 Dream Weaver Reference Guide
8/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
8
and clickOK. The image is inserted at theinsertion point.
Image PropertiesOnce you add an image to the page, you canchange the way the image will display on thepage. You can specify the display height and
width of the image, its alignment, spacingbetween the image and other page elements,and an alternate text label.
Image SizeThe Width and Height fields in the Propertiesinspector allow you to control the display sizeof the image on the page.
Image SpacingYou can place blank space vertically orhorizontally around an image by entering a
value in the V Space or H Space fields. Thevalues are expressed in pixels.
AlignmentYou can set the horizontal alignment of animage using the Alignment list in theProperties inspector. The default alignment willalign the bottom of the image with the baselineof the surrounding text.
Image LabelIt is helpful to the viewer to have a label for theimage that appears along with a placeholder.The alternate text is also used by software thatreads Web pages aloud. To specify a label, you
type it into the Alt field in the Propertiesinspector.
Setting Image Properties
1.You will begin by labeling the image. Make
sure the directions image is selected. In the
Properties inspector, typeMapin the Alt
field and press Enter.
2.You will also add horizontal spacing around
the image. In the Properties inspector, type10 in the H Space field, and press Enter. Tenpixels of space is added to the left and rightside of the image.
3. In the Properties inspector, choose
Middle from the Align drop-down list. Next,
in the Properties inspector, choose Right
from the Align drop-down list.
4. Return the alignment setting to Default.
Save and close store.htm.
Tables
It can be difficult to place elements on the pagewhere you want them. As the viewer resizestheir browser window, text and images willmove within the borders of the browser
window. Many authors use tables to placepage elements in specific places, and to controltext flow.
-
8/8/2019 Dream Weaver Reference Guide
9/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
9
Creating TablesTo add a table to a page, you can click on theInsert Table button in the Insert bar, or you
can choose the Insert and Table command.Then, you select how many rows and columns
will be in the initial table. In addition, you canset the tables width, the cell border, cellpadding, and cell spacing.
Table WidthWhen you select the width for a table, you canset a specific width in pixels, or a width inpercentage of the browser window. If youchoose a pixel width, the tables width is fixed.If you choose a percentage width, then if the
viewer widens their browser window, the table
will also widen.
Cell BordersThe Cell Borders setting puts borders betweenthe table cells and around the outside of atable. The larger the value in the Cell Bordersfield, the thicker the border. If you do not
want borders for the table, set the Cell Bordersvalue to 0.
Cell Padding and Cell SpacingThe Cell Padding setting controls the spacebetween the edge of the cell and its contents.The larger the value in the Cell Paddingsetting, the further the distance between thecells edge and its contents.
The Cell Spacing setting controls the amountof space between table cells. The larger the
value in the Cell Spacing setting, the larger thespace between the cells.
Inserting a Table
1. Using the Site panel, open the index.htmfile. Place the curser below the logo.
2.You will place a table in the file.Click on
the Common tab in the Insert bar.
3. Then, click the Insert Table button.Adialog box appears.
4. In the Rows field, type 3. In the Columns
field, type 2.
5.You will set a width for the table that is apercentage of the screen. From the Width
drop-down list, choose Percent, and in the
Width field, type 80.
6.You will set the Cell Padding to 0 and Cell
Spacingare set to 5. ClickOK. .
7.You will now type some text into the table.
Clickin the cell inthe first column and thirdrowof the table. Type:
Welcome to Edens Garden. We havebeen around since nearly thebeginning of time, when Adam, Eveand later their sons decided to turntheir love for flowers and for helpingpeople into a business.
For more information, click on one of
the images above.
You may expand the column to fit the text, bygrabbing the border and dragging it.
Welcome to Edens Garden. We havebeen around since nearly thebeginning of time, when Adam, Eveand later their sons decided to turn
their love for flowers and for helpingpeople into a business. For moreinformation, click on one of theimages here.
-
8/8/2019 Dream Weaver Reference Guide
10/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
10
Inserting Graphics in Table
8. Next you will place an image into the table.
Clickin the cellin the first column and first
rowof the table.
9. In the Insert bars Common panel, click
the Image button. In the dialog box, navigateto the graphics folder,choose flower.jpg, and
clickOK.
10.You will now label the image you just
placed. Make sure the image is selected, andtypeflowerin the Alt field in the Properties
inspector.
11.You will add another image to the table.Widenthe second column bydraggingtheborderseparating thefirst and second columns.Now click in the second column.
12. Then, in the Insert bars Common panel,
click the Image button. This time,choose
monthly.jpg, and clickOK. Type monthlyin
theAlt field. In thesecond row, insert the
imagewhats.jpgand store.jpg. Type their
names in theAlt field.
13. Before finishing, we will merge the two
cells of the last row together. First, select the
entire row. Now click the Merge Cell button
in the Properties inspector.
14. Save the index.htm file.
15. Go to the File menu and choose Previewin Browser and then select Installed Browser.
Adding Hyperlinks
Types of Links
When you click on a hyperlink, whether it istext or an image, you are sent to a newlocation. It could be to a new file in a new site,or to a new file in the same site, or to a namedspot in the same file.
Types of Addresses
Just like there are three types of links, there arethree different types of addresses you may needto specify.
The Absolute address (URL) is thecomplete address that includes the domainor server name, the folder or directoryname, and the file name.
The Relative address in the short addressthat only includes the folder or file name.
The Anchor address is the address to anamed location within a file.
So when do you use each of these? When your
link refers to a file on a different server, youspecify the absolute address. When your linksrefer to files within the same Web server andfolder (directory) you do not need to specifythe domain name and folder. Or, simply use
-
8/8/2019 Dream Weaver Reference Guide
11/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
11
the name of the file as the link. Finally, whenyour link refers to a named location within afile, you must use # (pound sign) followed bythe anchor name you gave it.
How to Create LinksYou will now create the various links in yoursite. Once you select the text or image that you
want to use as the link, you can use one of thefollowing methods to create links:
Type links manually into the Link field ofthe Properties inspector.
Use the Hyperlink button in the Insert barand enter information in the dialog box.
Use the Browse for File button in theProperties inspector.
Creating Relative Links
1 Nextyou will add some relative links to theindex file. Open the index.htm file.
2. Clickto place the insertion point after thetable. Press Enter.
3. Type: | Flower Info | Monthly Pick |
Whats New | Store Info.
4. Place the insertion point at the beginningof the lineyou just typed.
5. From the Common tab on the Insert bar,
click the Hyperlinkbutton on the Insert bar.
A dialog box appears.
6. Type Homein the Text field.
7. Click the Browse for File button to the
right of the Linkfield.A dialog box appears.Navigate to the Edens Gardens folder,and
select index.htm. ClickOK. ClickOK again.
8. Select the text Flower Info. In the
Properties inspector, click the Browse for
File button to the right of the Linkfield. Inthe dialog box, find and selectflowerinfomain.htm. ClickOK.
9. Select the text Monthly Pick. Click the
Browse for File buttonto the right of the
Linkfield. In the dialog box, find and choose
monthlypick.htm. ClickOK.
10. Select the text Whats New. Use any
method tocreate a linktowhatsnew.htm.
11. Select the text Store Info anduse any
method tocreate a linkto the store.htm.
12. Save the file.A dialog box appears.
13. On the File menu, click the Preview in
Browser and choose Installed Browser.
14 Click on the Store Info link.Click the
Backbuttonto return to the page.
15. Click on the Home link. Close the
browser and return to Dreamweaver.
-
8/8/2019 Dream Weaver Reference Guide
12/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
12
Absolute Hyperlinks
You can use the Link field in the Propertiesinspector to link to external Internet resources,such as Web pages on other sites, e-mail
addresses, etc. When adding an external URLlink, you need to type the complete, absoluteURL in the Link field in the Propertiesinspector. When adding an e-mail link, you cantype the complete e-mail address in the Linkfield, or you can click the Insert E-Mail Linkbutton in the Insert bar.
Creating Absolute Links
1. Use the Site panel to open the store.htm
document.
2. Click to place the insertion point to the
right of the map and press Enter and type:Here are directions to Edens Gardens.
3. Select the text Directions.
4. In the Properties inspector, click in the
Linkfieldand typehttp://www.directionz.com
and press Enter.
5. Previewthe page in the browser. Click the
Directionz link..
6. Go back to Dreamweaver.
Creating E-mail Links
7.You will now create an E-mail link, whichwill produce an E-mail form.
8. Select the E-mail address:[email protected]. Click the Email Link
button on the Insert bar.A dialog box
appears. The contents of the Text field will bethe underlined link.
9. In both the Text and E-Mail fields, type
[email protected]. ClickOK.
10. Save and close the file.
Note: If you type an e-mail address in the Linkfield, make sure to type mailto: in front ofthe e-mail address.
Anchors
Each of the links you have created so far jumpsto a new page, whether to this site, or toanother site. An anchor lets you create a linkthat jumps to a particular spot on a page,
instead of to the top of the page.An anchor is
a name to a specific position in a file. Then youcan link to the anchor. You will create anchorswithin the annuals.htm.
Creating Anchors
1. Use the Site panel to open the store.htmpage.
2. Position the insertion point before theEdens Garden text.
3. On the Insert bar, click the Named
Anchor button. A dialog box appears. Type
edensgarden in the Anchor Name field.Anchor names are case sensitive, so rememberhow you typed the name.ClickOK.Ananchor icon appears.
-
8/8/2019 Dream Weaver Reference Guide
13/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
13
4. Now that you have named the anchor, youwill create the link to the anchor. Select thetext Edens Gardenthat appears after the map.
5.A link to a named anchor is preceded by a #
sign. Type #edensgardenin the Link field inthe Properties inspector, and press Enter.
6. Save the store.htm file and previewit in
the browser. Close the browser after testingthe anchor links.
7. Close and save any other open files.
Uploading a Web Site
The Site Map
The site mapgives you a graphicalrepresentation of your site files, allowing you tosee the sites structure and various filedependencies. You can display a site map
within the Site panel.
Using the Site Map
1. Click the Expand/Collapse button in the
Site panel.
2. Click the Site Map button,and choose
Map and Files from the Site Map drop-downlist.The site map appears in the left pane, withthe site files appearing in the right pane.
3.You will now view the dependent files for
the store.htm page. Click the + symbol next to
store.htm page.A list of all the pages thestore.htm page links to appears.
4.You can view the structure of linked pageswithin the current pages list, as well. Click the+ symbol next to index.htm under store.htm.
The files linked to the index.htm page appear.Click the symbol to collapse the sub-list.
5. Choose View andShow Dependent Files.The site map now lists any images that are used
on the page as well.
6. Click the Expand/Collapse button to
collapse the Site panel. The Site panel displaysthe file list once again.
Checking Links
Before uploading a site, you should verify thatall links are functional, and that all the files youneed will be uploaded when you upload thesite. You can perform a check of broken links,external links, and orphaned files (do not haveany links associated with them). You can vieweach of these categories by choosing them fromthe Show drop-down list in the Results panel.
-
8/8/2019 Dream Weaver Reference Guide
14/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
14
Checking Links for a Site
1. In the Site panel, choose Site and Check
Links Sitewide. The Results panel appears atthe bottom of the screen.
2. The Broken Links category currently
appears in the Results panel in the Showlist.In the Link Checker tab,choose External
Links from the Showlist. The two links fromthe store information page are displayed.
3. In the Link Checker tab,choose Orphaned
Files from the Showlist.The files that do nothave any links to them are displayed.
4. In the Results panel, choose Close PanelGroup from the dropdown list at thetop-right corner.
Uploading a Site
Once you have checked the links, you are readyto set up the site for uploading.In order to transfer the files to your server, youneed several pieces of information. An ISP willissue a user name and password with youraccount, and will give you the FTP address. If
you want to place site files within a sub-directory, you must also know that directorypath. Before you transfer site files to your Webspace, you will edit your remote site
information:
1. In the Site panel, choose Site and Edit
Sites.
2. In the dialog box, select your site, then clickEdit.
3. In the dialog box, click on theAdvanced
tab, and select Remote Info.
4. Choose FTP from theAccess drop-down
list. Enter your FTP address in the FTP Hostfield.
5. If you want your site files to be placed insidea sub-directory within the remote sites rootfolder, type the sub-directory path in the HostDirectory field.
6. Type your user nameand password in theUser Name and Password fields.
You are now ready to upload your files to yourWeb space. You can also specify thisinformation when defining your site for thefirst time.
For this course, you will create a test folder onyour hard disk to move the files.
Uploading to Test Folder
1.You will now upload the entire EdensGardens site. First you will specify a folder tohouse the remote site. Choose Site and EditSites.A dialog box appears.
2. Click on Edens Gardens in the Site list and
clickEdit.A dialog box appears.
3. Click on the Advanced tab, and select
Remote Info in the Categorylist.
4. Choose Local/Networkfrom the Accessdrop-down list.
5. Click the Browse for File buttonto theright of the Remote Folder field.A dialog box
-
8/8/2019 Dream Weaver Reference Guide
15/15
__________________________________________Computer Services Central Technology Services
www.ohio.edu/technology/
15
appears. Navigate to the Dreamweaver MX
folder.Click the New Folder button.A newfolder appears. Name the new folder Test
Site.
6. Make sure the Test Site folder is selected,and clickOpen. The Test Site folder appears in
the Select field. ClickSelect.You return to theprevious dialog box.
7. ClickOK.You return to the previous dialog
box. ClickDone.
8. Click to select the root folder in the Site
panel. By selecting the root folder, you signifythat you want all of the files within the Sitefolder to be added.
9. Click the Put Files button at the top of the
Site panel. This tells Dreamweaver to load allyour pages to the remote site.
10.An alert box appears, asking if you want to
upload the entire site. Click OK. The files aretransferred to the Test Site folder. If you wereuploading the site to a Web server, clicking thePut Files button would upload the files.
11. Click the Expand/Collapse button in the
Site panel to expand.
12. Click the Site Files button to view the
files in the remote location. The files havebeen uploaded to the Test Site folder.
13. Click the Expand/Collapse button tocollapse the Site panel.
Uploading Changed Files
If you make changes to your site on yourcomputer, you must upload those changed filesto your Web server. You would choose Edit
and Select Newer Local from the Site panel.Only the changed files are selected. At the topof the Site panel, click the Put Files button.
A dialog box appears. ClickYes to uploadthe
dependent files along withthe changed files.It uploads the changed files to the Test Sitefolder.