Adobe Dream Weaver Basics CS4

8/9/2019 Adobe Dream Weaver Basics CS4

1/28

Adobe Dreamweaver Basics CS4

Learn the basics of Adobe Dreamweaver by creating a new page and inserting and formatting common

HTML items such as links, images and lists.

Objectives

o Learn the Adobe Dreamweaver CS4 Interfaceo Create a Site Definition

o Add Basic Text Formatting (bold, italic, headings)

o Create Lists

o Insert Images

o Insert Links

o Validate the HTML pages

Downloading Tutorial Files

In this lesson we will be creating a new file called berlin_wall.htmwhich we will then link back to our

index page. You can download the finished index.htmpage at http://myweb.stedwards.edu/s_classfile

There are two files needed:

1. index.htm

2. berlin_wall.jpg

The final page after completing this tutorial should look similar to: berlin_wall.htm

What is Adobe Dreamweaver?

Adobe Dreamweaver CS4:

o is the latest professional web editing application for building and managing websites.

o creates professional and personal web pages that are compatible with a variety of platforms such as

Macintosh and PCs, as well as web browsers such as Internet Explorer, Netscape, Firefox, and Safari.

o is often referred to as a What You See Is What You Get (WYSIWYG) software application. This is a

term used to describe web-developing software that writes HyperText Mark-Up Language (HTML)

code based on the text, images and layout produced in a document.

Adobe Dreamweaver Basics CS4 - 1


2/28

Setting Up A Site in Dreamweaver with an FTP Connection

Setting up a site in Dreamweaver is one of the first things that should be done when working in Adobe

Dreamwaver. In order to create a new web site in Dreamweaver you will have to set up the site

definition for the site. The site definition contains two sections: Local Info and Remote Info.

After locating the icon on the desktop (PC) or the icon in the dock (Mac) you will see a screen that look

similar to the window pictured above.

1. Choose the option of Dreamweaver Site.



3/28

Site Definition - Editing Files

2. The Dreamweaver Site Definition Wizard gives a generic title of "Unnamed Site 1." However, when

working with multiple sites, such as a personal site and a work site, if each name is named "Unnamed

Site 1", "Unnamed Site 2", etc, it soon becomes hard to determine which site is which. Choose a name

that is unique and descriptive for the site that you will be working on.

For example, we can name our site for this lesson, Berlin Wall Site.

3. In the next box type the address (or URL) of your page if you know it. For St. Edward's the URL will

be http://myweb.stedwards.edu/seuloginname

4. Click Next.



4/28

5. On the next screen, select "No, I do not want to use a server technology" then click Next.

The only time that you would use server technology would be if you were creating a web application or

a site connected to a database. If so select Yes and follow the instructions.

6. Select "Edit directly on the server using local network".

The option of Edit directly on the server using local network is quite the opposite. When this option

is selected, each time you hit save the changes are immediately put into place. If there are users on

your webpage before you make a change, they will need to refresh their browser to get to thecurrent

one.

NOTE: This option is notavailable off campus (from lab computers).

Edit local copies on my machine, then upload to server when ready means each time you save

your webpage, the viewer will not see the "work in progress" changes as you work. This also prevents

the user from moving to another page and then going back to the previous page, and find that things

have been moved around.



5/28

NOTE: This is the onlyoption available off campus (personal computer).

Please see the section "Uploading your Site" for instructions on how to upload your files.

7. Click on the browse button, the folder icon circled above.

8. After clicking on the browse button, choose your Edshare drive.

9. Select a folder on your computer where you would like to save all your files. For this lesson you can

create a new folder in your EdShare home folder named BerlinWall.

10. Click on the Select button and then you are taken to the previous window with your Edshare

information in the little box located below the text of Where on your computer do you want to store

your files?"

11. Click on the Next button.



6/28

If you chose "Edit local copies..."

12. In the box below the words "How do you want connect to your remove server?" choose FTP.

13. Enter in the host name or the FTP Address of your website.

NOTE: Since we are working on Edshare, the host name is edshare.stedwards.edu. If you buy a

domain name, most times the company will give you the host name. Since each company is different,

you will need to consult the FAQ's for more details.

14. In the next field box, type in the words public_html.

15. In the box that is asking for "FTP Login", enter in your St. Edward's login name and password.

NOTE: For a domain you've purchased, the company will give you this information.

16. Make sure the check box for "Use Secure FTP (SFTP)" is checked for the St. Edward's Network. If

you bought your a domain, it might or might not be required to have this checked. The only way to know



7/28

is to click on the test connection button.

17. Click on the Test Connection Button.

If your settings are done correctly, it will tell you that you have connected successfully.

18. After your settings are correct, click Next.

If by chance that you forget to check the box and attempt to test your connection, it will appear with a

larger box with some possible reasons why the connection failed.

19. After you have successfully tested your connection, click Next and then choose the option of "No,

do not enable check in and check out."

The option of Check in and Check out refers to when you are working in a large group. If the option is

enabled, it allows one user full editing access and shows as "read-only" when opening the same file to

other users. If the option is disabled, it will allow each person in the group to open and edit the same

file. If one person changes and uploads the file, while a second person changes and uploads the same

file, the first person's changes are not visible, but the second person's changes are to the user.

20. Click on Done.

Creating and Saving a New File

Creating new documents is simple in Dreamweaver; before you continue, it is very important that you

save your file first! You don't want to unexpectedly lose your work. In this lesson save the file as

berlin_wall.htm.



8/28

Create/Save a New File: From the Welcome Screen, click HTML from under the "Create New" heading

For more options:

1. Select File > New. This will open the New Document dialog box, which lets you choose a template

for your new document.

2. Make sure the Basic page category is selected and then choose HTML under the Blank Page

section. This tells Dreamweaver that you want to create an HTML page. Click Create.

Exploring Dreamweaver

Dreamweaver's workspace consists of four basic elements. These elements are the Document Windo

, Insert Panel, Properties Panel, and Panel Groups. Let us take a look at each of these elements

more in depth.

The Document Window is the browser-approximate main workspace where web pages are created

and edited using the panels and toolbars.Embedded within is the document toolbar that includes three main viewing options: Code, Split, and

Design. These three viewing options help you view and manipulate your web pages.



9/28

Changing Views in the Document Window

o Code View - This option allows you to view your web page's entire HTML coding as it is generated b

Dreamweaver. Many designers use this option in order to enter or edit the HTML code.

o Split View - This viewing option divides both the Design and Code view to allow you to see the

HTML coding as you lay out your website. The upper pane displays your HTML code while the lower

pane shows you the page as it will appear in the web browser. This view allows a designer excellent

mobility between the coding and the layout. It is also best used when you want to debug or

troubleshoot a web page.

o Design View - This option is the primary view that allows you to view your web page the way it will

appear in your web browser. Take note that when you are viewing your web page in this view, all of

your HTML coding is hidden. The finished product should look the way it does in this viewing option.

Document Toolbar

1. Live View - Sometimes there are discrepancies between whe you see in Design view and what your

webpage looks like live on the Web. To preview what your page will look like live on the Web, click the

Live View button to toggle these views.

2. Title - Create a Title for your page. This is visible to visitors in the Browser and in search engine

results. Your title should be no longer than 65 characters.3. Preview in Browser - Choose what browser you preview your page in.

4. View Options - Toggle grids, guides, etc. to help you work in Design view.

5. Visual Aids - Display or hide element borders in Design view.

6. Validate Markup - Check your page to make sure your markup validates according to W3C standard



10/28

Working with Code

1. Collapse Full Tag - Collapses a chosen element.

2. Collapse Section - Collapses any highlighted portion of code.

3. Expand All - Expands all collapsed elements and sections.

4. Select Parent Tag - highlights the element where the cursor is.

5. Line Numbers - Toggle the display of line numbers (shown by default).

6. Highlight Invalid Code - checks for code that won't validate by W3C standards.

7. Move CSS Rules - Relocated highlighted CSS rules on a page.



11/28

Insert Panel

This toolbar is called the Insert Panel, which allows you to create new objects (anything that is

manually inserted onto your Document Window). The buttons found in this toolbar are organized into

categories. Select catagories using the dropdown menu. The different categories appear above the

icons.

Properties Panel

The Properties Panel is a toolbar located beneath your Document Window. This toolbar contains a

series of buttons for examining and editing attributes of any page element that is currently selected on

your web page. Take note that your Properties Panel buttons and options may change to reflect any

attributes of any selected element.



12/28

Status Bar

The Status bar is small panel located at the bottom of your Document Window. The Status bar in

Dreamweaver consists of three things: the Tag Selector, Window Size menu, and Document

Size/Estimated Download Time.

o Tag Selector - Shows your entire HTML tags as located and selected in your Document Window.You can also quickly select any HTML tag by simply clicking on any of the tag symbols. This is best

when web pages become more dynamic and elaborate, you can keep track of all of your HTML tags.

o Window Size menu - This allows you to view your Document Window's current dimensions in pixels

i.e. 1058 x 700). These numbers can change when you resize your Document Window or you can set a

specific dimension by manually resizing the window or by selecting a dimension from its drop down

menu.

o Document Size/Estimated Download Time - Shows your web page's current size in kilobytes (K)

and the approximate amount of time in seconds it would take to download the page over a 28-Kbps

modem. (i.e. 4K/1sec).

Panel Group

Panels in Dreamweaver are grouped together into panel groups. Each panel group can be dragged out

to become its own floating window by clicking on tab and dragging/dropping the tab, as done with the

Files panel group in the above screenshot.



13/28

CSS Styles Panel

The CSS Styles Panel lets you track the cascading style sheet rules and properties that affect acurrent page element (Current Mode), or the entire document (All Mode). A toggle button at the top of

the panel allows you to switch between the two modes. You can also modify the CSS properties in both

All and Current mode.



14/28

Files Panel

You use the Files Panel to view and manage the files in your Dreamweaver site. When you view sites,

files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or

collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the

remote site, or the testing server as a list of files. When expanded, it displays the local site and eithe

the remote site or testing server. The Files panel can also display a visual site map of the local site. Fo

Dreamweaver sites, you can also customize the Files panel by changing the view-either your local or

remote site--that appears by default in the collapsed panel.



15/28

Workspace Layouts

Dreamweaver CS4 provides 8 preset workspace layouts designed to suit different types of developers

or projects. To switch workspace layouts, select a layout from the workspace switcher, in the top-right

corner of the application window, as shown in the screenshot. "Classic" refers to the layout of

Dreamweaver CS3.

Creating a Custom Workspace Layout:

In addition to using the default workspace layouts, you can also arrange the workspace to your specific

needs and save that layout for later use.

1. Arrange the panels and toolbars in the workspace as desired.2. From the workspace switcher menu, choose "New Workspace". The "New Workspace" dialog box

opens.

3. Enter a descriptive name for the workspace and click OK. The new workspace name appears at the

top of the application window.

You can rename or delete custom workspaces by choosing "Manage Workspaces" from the workspace

switcher menu.

Saving a New File

3. Click the Code button in the Document toolbar to change to Code. (If your Document toolbar isn't

visible, select View > Toolbars > Document to make it visible.)

4. Click the Design button in the Document toolbar to return to the default Design view of your page.

5. In the Document toolbar's Title text field, type [name of your website]. Press Enter (Windows) or



16/28

Return (Mac). This will define the page title for this page. The page title appears at the top of the

browser when the page is being viewed and is the name used by browsers when this page is

bookmarked.

Note: Before you continue, it is very important that you save your file first! You don't want to

unexpectedly lose your work. In this lesson save the file as berlin_wall.htm.

Saving the New File:

6. Browse to File on the menu bar and down to Save.

7. In the Save As Dialog Box type a desired file name; in this lesson berlin_wall.htmwould be

appropriate.

Adding and Formatting Text

Formatting text in Dreamweaver is the same as using a standard word processor, such as Microsoft

Word. You can:

o set formatting styles (such as Paragraphs, Heading 1, Heading 2, Heading 3) for a block of text,o apply text styles such as bold, and italic.

NOTE: Other formatting options such as changing the font, size, color, and alignment of a selected tex

should be done in cascading style sheets , instead of the Properties Panel in Adobe Dreamweaver.

Text is entered into Dreamweaver by either typing directly onto the Document Window or inserting the

text directly into the code using the Code view. Once this text is in the Document Window you can

format it very similar to most word processors. Pressing Enter (Windows) or Return (Macintosh) create

a new paragraph. You can start a new paragraph by inserting a line break. The following are some ofthe most important formatting tools found in Dreamweaver.

Text Format in the Property Inspector

Dreamweaver contains three basic paragraph styles: paragraph, heading, and preformatting. They

are applied using the Format drop-down list in the Property Inspector panel.

o Paragraph - This format ignores white space, so extra spaces within the paragraph appear as only

one space when viewed in a browser. Paragraph format uses the HTML code
, which
indicates the text will automatically wrap.

o Heading - Headings are used to identify different sections of content on a page. They range from

largest and boldest to smallest . Headings are applied to the entire paragraph, so you can't

mix heading styles within the same line of text.



17/28

o Preformatted - The preformatted format enables you to space text exactly as you want, including

using white space and line breaks. Text doesn't automatically word wrap, so you must press Enter to

end a line.

Adding a Heading with the Property Inspector

1. Place your cursor in the Document Window in the desired location.

2. Select from the Property Inspector under Format, Heading 1

3. Type the desired text for your Heading 1. In this lesson type a informative heading like "The Berlin

Wall".

Adding Paragraphs

1. Press Enter (Windows) or Return (Macintosh) after the Heading 1 or previous text.

2. Pressing enter idesignates any following text as a plain paragraph until formatted differently. Type

any desired text, for this lesson you can type an introductory paragraph about Berlin like the one above

Note:Dreamweaver always assumes that any inserted text is one complete paragraph. Unless you

apply a proper format, then the text found within the
tag pair will appear as one complete
paragraph.

Adding Line Breaks

The use of white space is important in the design and readability of any website. In Dreamweaver,

when you press Return (Enter) key, a new

is inserted.

Follow any of these simple steps in order to insert a line break. In the Code view, the screenshot above



18/28

is what the line break will look like.

o Press Shift + Enter (Windows) or Shift + Return (Macintosh).

o In the Text category of the Insert bar, select Character and click the Line Break icon.

o Select Insert > HTML > Special Characters > Line Break.

Note:Dreamweaver will also assign a new HTML paragraph for non-breaking space "&n bsp;"

between the opening and end tags. If you type on this new line, the non-breaking space is replaced

with your content. However, if you leave it blank, that non-breaking space will remain there. Because

the tag is not empty, web browsers automatically interpret this paragraph as a blank line.

Spell Check

Use the Check Spelling command to check the spelling in the current document. The Check Spelling

command ignores HTML tags and attribute values.

By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary,

select Edit > Preferences > General (Windows) or Dreamweaver > Preferences > General (Macintosh)then in the Spelling Dictionary popup menu select the dictionary you want to use. Dictionaries for

additional languages can be downloaded from the Dreamweaver Support Center at

www.adobe.com/go/dreamweaver_support.

1. Select Commands > Check Spelling or press Shift+F7. When Dreamweaver encounters an

unrecognized word, the Check Spelling dialog box appears.

2. Select the appropriate option based on how you want the discrepancy handled:

Add To Personal - Adds the unrecognized word to your personal dictionary.Ignore - Ignores this instance of the unrecognized word.

Ignore All - Ignores all instances of the unrecognized word.

Change - Replaces this instance of the unrecognized word with text that you type in the Change To

text box or with the selection in the Suggestions list.

Change All - Replaces all instances of the unrecognized word in the same manner.



19/28

Bolding Text with "Strong" Tag

1. In the Document Window select the text that you would like to bold.

2. In the Property toolbar, click on the bold icon. Inside the Document Window in Design View, you

will notice that the highlighted text is now bolded.

Italics with the "Emphasis" Tag

Similar to bolding text, it's simple to format text as italics.

1. Select the text that you would like to italicize.

2. In the Property toolbar, click on the Italics icon. Inside the Document Window in Design View,

you will notice that the highlighted text has been italicized. The screenshot above shows the emphasis

tags that were inserted when the Italics icon was clicked.

Adding a Second Heading and an Unordered List

Before you can add a list, you will need a title, something to describe your list. Type the title for your lis

and highlight the text, and select Heading 2 or an appropriate heading level from the Properties Pane



20/28

Click on the unordered list icon (circled above) or bulleted list icon in the Properties Panel.

Type in the first item in your list. After doing so, click enter, and there is a second bullet created below

the first.

Finish the list with as many items as you like. To change from a list to a plain paragraph press enter

twice.

Changing from Unordered List to Numbered List

With the unordered list already typed out, highlight the completed unordered list.

In the property pane, click on the ordered list icon. This icon is next to the unordered list icon in the

Properties Panel.

The numbered list button will convert the unordered list to an ordered list. Click away from the list to

see the final result.

Adding a Third Heading

Before our next step where you'll add an image, you might want to add a title - something to describe

your image.

Type the title for your text, select the text and, select Heading 3 or an appropriate heading level from

the Properties Panel.



21/28

Adding an Image

1. In the Insert Panel, choose Common from the drop-down menu (if not already open).

2. Under the Common menu, choose the icon with a little tree - it should say Images next to it. After

clicking on the icon, an open dialog box will appear.

3. Navigate to where the image is located.

In the instance where the picture is located on your hard drive but not in the site folder, then a pop-up

dialog box will appear. If you are prompted with this box, you will want to click on yes. After doing so,

Dreamweaver will create a copy of the file, and place it into your root directory (the place where your

images will be saved).



22/28

Alternative ("Alt") Text

After clicking on "yes" to the "files outside of the root folder " (if you happen to get this screen) or

after hitting OK, you will be brought to this page.

An alternative text is helpful for those using an external device such as a screen reader, or those who

have images disabled. If images are disabled, then it will display the alternative text.

When testing your page and you happen to see that you have misspelled something in the alternative

text, you can easily correct it by clicking on the image and using the Property Toolbar. You can

change the alternative text in the alt field of the toolbar.

Image File Formats



23/28

Creating a Relative (Internal) Link using Text

The capability to link to pages and sites is what makes the Web dynamic. You can create text or image

hyperlinks using the Properties Panel to associate the text with a specific file or web page. The

following are steps on how to create hyperlinks using text or images.

1. Type the text you would like to become the link text, such as "Back to my Homepage."

2. Select this text.

3. Click the Browse for File icon, next to the Link option, in the Properties Panel. Select an HTML

page from your web site, for example your index or home page. Click OK. This text is now linked to an

HTML page within your Web Site.

4. Hit enter to make the selected text a link.

This link is called a Relative Link. It is relative simply because its linked to a document within this site,

not to an external Web site.

Creating an Absolute (External) Link

An absolute link is defined in XHTML because it begins with an "http://" header and includes a full

address.

The process is almost identical to creating a relative link:

1. Select the text that you want to become a hyperlink.

2. Type the entire the URL, such as http://www.stedwards.edu into the Link option in the Properties

Panel and press Enter (Windows) or Return (Mac).Alternately, for long URLs you may choose to copy the entire URL from the address bar of an open

browser then paste the URL into Dreamweaver.

3. Click OK. This text is now linked to an HTML page within your Web Site.



24/28

Creating an Image Link

1. Select an image that you want to become a hyperlink.

2. You can create an Absolute Link to an external website by typing the URL, such as

http://www.stedwards.eduor in our example http://www.berlinwallart.com/into the Link option in the

Properties toolbar and press Enter (Windows) or Return (Mac). This link is an Absolute Link,

because it begins with an http header and includes the full address.

Creating an E-mail Link

Aside from creating links to pages, you can create email links that send you correspondence directly to

any email account. Creating an email link is easy; first type the text that you want to appear as a

hyperlink. When users click on this text, the user's default email application (Eudora, Outlook, etc) will

automatically launch a new email message with your email already addressed in the To: field.

The following steps are ways to create an email link:

1. Drag-select the text Email YourName. This will highlight the text.

2. In the Properties Panel, type in the command "mailto:" then an email address. Watch your spelling!

3. Hit the Enter key.



25/28

Adding Special Characters

There are times when your text may contain special characters and diacritical marks. Dreamweaver

provides most of these special characters such as the copyright symbol(), trademark(), registered(

), or an em dash(-).

To add special characters to your text:

1. Position your cursor where you want these special characters on your Document Window.

2. From the Insert Panel, choose Text from the drop-down menu and click on the Characters icon

(circled above). By default, the Copyright symbol is chosen. Clicking the downward-pointing triangle wi

give more options.



26/28


27/28

Quick Tag Editor in the Tag Selector

Tag Selector:

On the left side of the status bar, there is a listing of HTML tags. The Tag Selector keeps continuous

track of where you are in a document by displaying the tags surrounding your current cursor position.

Quick Tag Editor:

To edit code while in Design view, highlight the content you'd like to edit and right-click (Control-click on

a Mac) on the correct tag in the Tag Selector (#1 in the screenshot). Choose "Quick Tag Editor" from

the menu to get a small dialog box that says "Edit tag". From here, you can modify the code.

Alternately, if the tag you'd like to edit is the last one listed in the status bar (the inner-most nested tag)

like in the screenshot, use the keyboard shortcut Ctrl + T to bring up the Quick Tag Editor dialog box.

If you click anywhere in Design view and use Ctrl + T, an "Insert HTML" dialog box will pop up, allowing

you to insert any code as if you were writing it in Code view.

Previewing in Browser from the Design Window

In the Design view there are multiple ways to access the Preview in Browserfunction.

1. Select a shortcut key for your primary and secondary browsers. This can be set in the Preferences

(see previous step) but most likely will be F12 for the primary browser and CTRL + F12 (Windows) or

Command + F12 (Mac) for the secondary browser (if set).

2. At the top of the Design Window on the Document Toolbar there is also a Preview in Browser icon.

By clicking the drop down menu any of the browsers set up previously can be chosen. (pictured above)

3. Navigate to File > Preview in Browser and choose a browser.



28/28

* Always test your webpages in multiple browsers as there are many differences on how each browser

might interpret the HTML code.

Validating your Page

After building a page we can make sure it is up to standards by validating it with an HTML validator.

Web pages can be validated by many different validators available online.

A common validator can be found at: http://validator.w3.org.

1. Click on the Validate by File Upload tab and then click on the browse button.

2. Navigate to your Edshare folder, or where ever the file is located and select the index.htm or otherHTML file you want to check.

3. Click on the Check button to continue the validation. The validator will return information on whether

the page is valid or the errors that prevent it from validating correctly with descriptions.

Adobe Dream Weaver Basics CS4

Documents

Transcript of Adobe Dream Weaver Basics CS4