Dreamweaver Overview rev 09/13/2013

It is a Graphical User Interface (GU-E) that generates HTML. You have to define three folders: Local, Remote and Testing, together we term it a site

Start Dreamweaver

Create a new HTML page: File>New Document>HTML>None>Assign a page

title>Doc Type>HTML5>Create

Type: This is my first Dreamweaver pageSwitch among the three display options: Design Code

Split File>Save as> DwHelloWorld.htm inside Practice

Choose a workspace Choose a workspace and look how the actual screen changes

Try a few workspace options

Choose Beginner

Notice there are four ways to view Web page content: You will see 4 format options if you go through the View menu item:

Otherwise, on the document bar you will see only 3.

Try each FTPn’g Can click the up arrow on the document bar or inside Files

panel:

Note Only works if you defined a remote server

Can also FTP in Files panel:

Or select the file(s) in the Files Panel (F8) and click the up arrow:

Note:On many occasions there are two ways to accomplish something.

ExampleInsert>Image

Versus insert panel (Window>Insert)

Can move panels around, shrink to icons

The Workspace

A. Application bar

=Menu bar (Usual Windows menu bar) + workspace picker

South Side bar!

B. Document :

C. View>Toolbars>Document and Standard…see below

D.

E.F.View>Toolbars>Docum

ent and Standard

C. Document window (Your actual wysiwyg What You See Is What You Get )

D. Workspace switcher

E. Panel groups

F. CS Live

G. Tag Selector

H. Property Panel

I. Files Panel

The Document toolbar in more detail

A. Show Code View

B. Show Code and Design Views

C. Show Design View

D. Live Code View

Includes code the server creates…Important in advanced classes where you study server scripting

E. Check Browser Compatibility

Checks to see if your CSS is valid for a given browser

F. Live View

Similar to hitting F12 (Preview in Browser)

G. Cascading Style Sheet Inspector

H. Preview/Debug in Browser

I. Visual Aids

J. Refresh Design View

K. Document Title

L. File Management

M. Check Browser Compatibility

Which ones are important for us?

A,B,C,K,L

Menu Bar (Top):

File menu:

The usual file menu, new, close, save (close all and save all may be something new to you)

File>Preview in Browser (F12) shows what your page will look like when you render it.

Click F12 now Instead, select Preview in browser…you choose which

browser

Edit Menu Edit> Preferences the only ones we’ll use:

Accessibility option Preview in Browser option

View Menu

Insert menu…discussed later

Modify, Format, Commands skip

Site menu : Already saw

Window Menu

To add/remove panels Make sure File and Properties panels are open If not: Click Window>File and/or

Window>Properties

Document Toolbar

We’ll use the three views buttons, File Management (FTP (put or get ---arrows)) and title

Title: Type your first name's First Dreamweaver HTML Page

Questions re Menu bar?

Properties InspectorIts content changes reflects on content type:

Text content:

Graphic format:

.

Panels…here MONDAY

More Panel Management -Adobe

Panels are made up of tabs which can be moved, docked

Look for blue bar when docking into another location: Dock CSS Styles with Files:

Can collapse panels to icons:

Result:

Once iconized, can see their purposes though by pulling to the left

:

There are often multiple ways to accomplish something. Good example: Using menus versus panels to do the same thing

Inserting Content

Insert Panel versus Insert Menu Use either to add content to a page…images, tables, lines,

…videos

Look at the Insert>Common panel

…Window>Insert if it’s not open

The one’s we’ll use:

Hyperlink Email Link Horizontal Rule Table Insert Div Tag Images Media

Compare to Insert menu

Appears there are more options with the Insert menu item than with panel…but you’re (sort of) wrong!

Click the down arrow next to “Common” inside the Insert Panel:

Can choose Forms, Data, etc:

Summary: Can use menus or panels to accomplish a task

Property Inspector (Panel)

At the bottom of the HTML page

Remember many tags (like body) have attributes or properties. The properties/attributes for the selected object appear in the Property Inspector Panel

PracticeYour HelloWorld.htm page should be open.

Property Inspector

Shows properties of text and images

Type Hello World

Look at the Code:

Now press Enter; makes the text into a paragraph (adds <p> tag)

Recall <p> creates a box, with a blank line before and after the <p> tag

Click Split or Code button and again look at the HTML

Note: &nbsp; adds a space

Use the Tag Selector ( ) to select the <p> tag

OR

Split or Code view…to select the <p> tag

Use the Property inspector/panel and make the text be bold-italic

See the other text properties you can add/modify?

Deselect the text

Now Insert>Image and browse to cozmo.jpg (Mine was in Practice/Images)

Look at its properties…much different than for text

Single-spacing Below the picture, type This is a paragraph (Press Shift-

Enter) This continues the paragraph and is single spaced

Press Enter Look at the split code Recall <br /> single spaces

Strong = bold

Em = italics

Apply a Heading 1 (h1) format to line 1

Select the Hello World text In the Properties Inspector, click the HTML button, and

then Format>Heading 1

File > Save

Testing your page

Hit F12 to test the page. This sends your work to, then runs from, the testing server

Can also choose File>Preview in browser>Choose any browser installed on your computer

Save often!

FTP’g the current page

As with most things in Dreamweaver, there are several ways to FTP>Put this file (page) to the server.

Find the double arrow (File Management).

Click the up arrow (put). This sends the current page to the server computer

What if it’s grayed out? Means you don’t have a remote site defined

Click the arrows, and choose > Put

…or…

Select the helloworld.htm file in the Files Panel > click the up arrow

After you use one of the options to Put your page to the server, it will give you a box that says "Put Dependent Files?"

This gives you the option of uploading any images, videos and other objects on that page to the server as well as the page itself.

Say Yes, this time, to also send up the picture

Now, let's test the page in a browser. The address should look like this:

Practice using Insert panel/menu to add content Start a new HTML page named

DreamweaverPractice.htm (be sure to save right away, and NO SPACES!) inside the Practice folder

It will look something like this when we are finished

Let’s use the panels to insert content. And then link HelloWorld.htm and DreamweaverPractice.htm pages to each other. Start with typing “Welcome to my practice page”…make

it an H1 format Enter the same text as the page titleInserting an email link:

Fill in the information:

Click Enter

Inserting a Horizontal Rule from the Common panel:

Make it 5 pixels thick (Height): and Align Left

Its properties are deprecated (may be deleted at some date…use CSS instead (later)…use CSSInserting a Table

Insert a 3 rows x 2 columns table, 50% of the page

Enter data:

Changing a Table’s attribute Select the first row

Set the background color (Find the tool in the Property Panel) to a pale blue

Save again

Properties Inspector …again…now that we have more content

Its properties/format change based on what is selected (called context sensitive) .

1.

2.

Text Properties

Select the “Welcome” text you just entered by clicking the <h1> tag in the tag selector (bottom left corner)

Format Drop down box

The Format drop down lets you make some limited format changes. Cascading Styles Sheets (CSS) provide almost unlimited formatting options

Practice with Paragraphs and HTML formatting

After the table, type “This was created by your name here Hit Shift-Enter. Recall this enters a line break, not a

paragraph. Type Please enjoy my site! Hit Enter and type “I did this in JMA260”, click Enter

See the difference between Enter and Shift-Enter?

Save again

More Properties for text

Select the last line you entered Look at Property Panel Note HTML and CSS options HTML attributes are limited, basically Bold, Italics, lists

Make the last line be bold and italic

Creating lists

Recall from HTML lectures: Ordered and unordered, also indent and outdent

Use:

Practice with lists:

Add the following text : (You can’t copy/paste because there aren’t any Enter keystrokes after each item)

Here are my favorite movies: AvatarTitanicBlack Swan

TerminatorT1T2T3Star Wars

Select all the movies Click the unordered list tool

You should see:

Now, use the indent tool to indent T1, T2 and T3 to make them into sublists

Tool:

Result:

Save

So, we have two main pages: Helloworld.htm and DreamweaverPractice.htm

Let’s link the pages to each other

Creating Links

A link is simply a "clickable" object (usually text ), also known as a hyperlink, that loads a new page in the current browser window, or opens a new page.

What we’re going to do:

Our Goal

Link Helloworld.htm to DreamweaverPractice.htm and Link DreamweaverPractice.htm to Helloworld.htm

Switch (open) to DreamweaverPractice.htm page

Type Go to Hello World! Press Enter

Select the text Go to Hello World We want this to be a link <a href> that when clicked takes

the user to the HelloWorld.htm page In the Properties Panel, find the link box. There are three

ways to enter a link:

1. Type Helloworld.htm . This method is not recommended because of possible typos. However, you must use this method if you are linking to an external site. For example, if you want to link to the Pittsburgh Penguins' site, type into the box http://pittsburghpenguins.com/ You must include the http

2. Drag the Point to File tool to HelloWorld.htm in the Files Panel.

3. Click the browse button and browse to HelloWorld.htm

Choose one of the three methods and link the selected text to Helloworld.htm

Switch to HelloWorld.htm Add the words Dreamweaver Practice Make the words link to DreamweaverPractice.htm

(on your own)

Note: The Target options

_blank: loads the page into a new browser window.

_self: loads the page into the current window. This is the default and normally does not need to be selected.

_parent and _top we will won't discuss

Finally, see if you can link your index page to practice.htm:

Test and FTP your pages. File>Save All File>Close all

Next class: Text and CSSFor Extra Credit (20 points)

Complete the three pages (index, practice and helloworld) so they look like the pages in this document. In the practice page be sure you have:

Head 1

Title

Email link

Horizontal rule

Table with 3 rows, 2 columns, blue background, with sample data in it

A list with indent

The index page links to practice.htm, practice.htm links to helloworld.htm

Finally, make practice.htm also link back to index.htm

FTP all three pages (Use the File panel and the up arrow)

Send the GA an email containing your index URL. It will look this way:

http://www.jma.duq.edu/YourName/pub/jma260

Note: He may ask you to submit via Blackboard

I Guess the most important point is the linking, so be doubly sure all three pages