Dreamweaver Basics.docx          rev 09/08/10 

Review so far  Configured USB drive  JMA260/Assignments/Images 

JMA260/Client/Images 

JMA260/Classwork/Images 

And network drive   Pub/JMA260/Assignments/Images 

Pub/JMA260/Classwork/Images 

Pub/JMA260/Client/Images 

Used Notepad to create an HTML index page with a table containing three rows (<table>, <tr> and <td> tags). 

Used FTP to upload the page and a banner graphic to your pub folder within your network drive. 

Past Common mistakes include:  Incorrect directory structures (Placing HTML pages inside Images 

folder) 

Incorrect quotation mark‐types… 

Creating the page directly on the Z: drive, instead of on your USB Drive 

Not making the img src name match what you called your banner. ( Maybe you saved as mybanner.gif, but your  img src tag specified banner.gif) 

New Terms: 

Hyperlink  WYSIWYG 

Uploading 

Objectives for today (and next lecture)

Define: What is a Web Site 

Define: What is Dreamweaver 

 Create  three  Dreamweaver sites 

Exporting site definitions   Selecting objects  Using the Properties Panel/Inspector  How to link pages  How to FTP from within Dreamweaver 

What is a Web site? 

To the average user, a Web site is simply a collection of several related Web pages. However, to Web Developers a site is quite different... 

A site is simply two folders.   

1. Local folder -- This is a folder on your computer where you will build and test your pages. For this class, you will ALWAYS use your USB drive for your local folder. You develop your site on the local folder(s)

2. Remote folder -- This is where your pages will be made available to the public on a Web server. DON'T specify Z: Will use FTP from within Dreamweaver… just click an icon to FTP

Note: When naming folders, files, avoid spaces and special characters. Spaces are hard to keep track of. Also, they will be converted to %20. For example, jma 260 will end up as jma%20260. Special characters have meaning to the Web Server. For example, we have seen / used in HTTP and FTP addresses.

The folders contain HTML (Hypertext Markup Language) pages, and typically an Images child folder  

Dreamweaver Site Definitions 

Dreamweaver is sometimes called a WYSIWYG (pronounced wiz e wig) editor

You build pages using tools. What you see on the screen is what you will get because Dreamweaver creates the HTML code based on what you see

The HTML page is being built as I’m designing it…What You see is What You Get

It’s just an editor that generates HTML

Recall from week 1, that we have three site folders created on our local USB drive, and on our network drive (inside pub/jma260). We will now use those folders.

First, we must provide Dreamweaver with some site information.

A Dreamweaver Rule: Always do Site Definitions before working on pages.

What is a Site Definition? 

A Site Definition tells Dreamweaver where your Local and Remote folders are. It specifies FTP information as well.  

Recall what a root folder is. The root folder is the highest folder in your site’s hierarchy. When setting your Site Definitions, it is important that the Local and Remote Root folder names match up. 

Start Adobe Dreamweaver CS4.

Defining our Classwork Dreamweaver Site We’ll use Dreamweaver from now on to manage our Classwork site. 

. . and the other two 

Site > New Site 

Select the Advanced tab. 

 

Category: Local Info:   Assign a Site name of your choice…maybe JMA260 Classwork Site. The 

name is only of use to you: Dreamweaver and Windows could care less what you name it 

Local root folder: Browse to your jma260 /Classwork folder on your USB drive 

There seems to be a bug in CS4: You need to append classwork to the path: 

Should see something like this: 

 

(I had to type the word classwork manually)  

Be sure to click Select button 

  

Note: Never set the Local or Remote root folder to your Z: Drive. This will end 

up deleting your files. 

Click Remote Info Fill out the information as shown below:

We created the network classwork folder (and two others) during the first week of classes

1. Let's look at this screen: Access: use FTP. FTP Host: This is what Dreamweaver calls the server's FQDN. Host directory: This is simply the rest of the path on the server to your site folder: Classwork in the example above. Login: Your JMA username. It must be jma\username Password: Your JMA password.

2. Click Test to make sure it connects to the server. 3. Click OK. 4. Here are some common errors you might encounter:

1. Wrong host computer (FQDN) 2. Folder name or path wrong 3. Account information wrong

 

Exporting Site Definitions 

The default location to store your Site Definitions is the C: drive on the computer where you created it. If you later login to the same computer, your Site Definitions should be available.  

We occasionally reformat the lab machines…no more site definition. Also, what if you sit at a different computer? Again, no site definition. 

To save yourself the time (and aggravation) of re‐doing this site definition process, you can export your site definition to your USB drive 

1. Site > Manage Sites... 2. Select your site 3. Click Export... 4. Select the top option:

5. Click OK 6. Save it to your USB drive inside /Classwork

This saves your Site Definition (as a .ste file) ONLY. It does not save actual files or folders.

If you ever lose your site definition (maybe you sit at another computer), you Import your site and your site definition will be recreated.

Create your client and assignments sites now. 

 Export each definition. 

Switch back to Classwork site 

Dreamweaver Workspace  Not going to go over each item in detail, will spend more

time as needed

A. Menu bar

South Side bar!

B. Document (html page) toolbar

C. Document window

D. Panel groups

E. Workspace switcher

F. HTML tag selector

G. Properties inspector

H. (Files) panel (look at the tab)

The Document toolbar in more detail 

A. Show Code View

B. Show Code and Design Views

C. Show Design View

D. Live View

E. Live Code View

F. Page title

G. File Management...use to FTP the current page

(Skip rest)

H. Preview/Debug in Browser

I. Refresh Design View

J. View Options

K. Visual Aids

L. Validate Markup

M. Check Browser Compatibility

Which ones are important for us? 

A,B,C,F,G

Workspace Switcher 

Try different options Go back to Designer Compact

Menus and Panels 

Are often multiple ways to accomplish something. Good example: Using menus versus panels

 Example of a menu and a panel 

Insert Panel/Insert menu  Use them (either) to add content to a page…images, tables,

lines,…videos 

Look at the Insert panel…Widow>Insert (Note: You can use the Insert menu item, OR the Insert panel): 

 

For us: 

Email Link Table Insert Div Tag Images Media

Insert menu instead 

 Summary: Can use menus or panels to accomplish a task 

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

Creating a simple HTML page 

Open your Classwork site, if necessary File > New>Blank Page > HTML > none > Create

OR

Right-click in the Files panel and choose New File File > Save As... I know, it’s blank

o Save this (blank) page as helloworld.htm (No spaces)

o Since you created your Local Site Definition before starting, Dreamweaver will save your file to that local site folder.

To see what extra “stuff” Dreamweaver creates, click split, or Code view

All that for a blank page! Conforms to some industry standards

Type Hello World! Then press Enter, makes the text into a paragraph Click Split or Code button and look at the HTML Look at Tag Selector

OR

Split view…you’ll see the <p> tag

Page Title 

Just above the Document Window is the Title text box. Type your first name's First Dreamweaver HTML Page.

Check out the 3 main views again : Design, Code, Split (both)

 

Click Split  Click View>Split Vertically 

 

&nbsp ( I deleted it from my HTML side) (In split view, note: the &nbsp; It stands for non breaking 

space…causes a space to be inserted. To make "this phrase" turn 

into "this      phrase," several &nbsp's need to be inserted between 

"this" and "phrase" in the HTML.) 

 

Apply a Heading 1 format 

Select the 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 tests the page locally, not on the 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 to the server.

Next to the Title field, there is a double arrow (File Management).

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.

However, this will not put any linked files. Say Yes, this time, although it doesn’t really matter—we have no dependent files

Now, let's test the page in a browser. The address should look like this: http://www.jma.duq.edu/users/username/pub/jma260/classwork/helloworld.htm

Insert Options using a panel or menu…again…this time we will actually insert stuff:  

 

OR use

Insert menu

 

Let’s use the panel

Insert an email link:

 

Fill in the information:

 

Insert a horizontal line:

 

Make it 5 pixels thick (Height):

 

Insert a 2 x 2 table, 50% of the page

Many other objects may be inserted…more next class…

 

Properties Inspector …again… 

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

Type “Welcome” Press Enter

Selecting Objects 

You can select an object in two ways:

1. Select the object on the Design view…or… 2. Select the associated HTML tag in the tag selector.

Select the text you just entered

Format Drop down box 

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

Practice with Paragraphs 

1. Select your Hello World text. 2. Since we want to see the HTML properties, make sure HTML

is selected, not CSS.

3. Notice the Format dropdown. It should have Heading 1

selected, because that’s what we previously added 4. Select and delete the “Welcome” text 5. Type your first name's First Page. 6. Hit Shift-Enter. This enters a line break, not a paragraph. 7. Type Please enjoy my site! 8. Hit Enter and type “I did this in JMA260”

9. See the difference between Enter and Shift-Enter?

Properties Inspector­­­for text 

Properties Inspector Description

Format; text will take on this format until you

hit Enter

Bold and Italics

Lists…are created via the Properties Inspector 

Ordered and unordered 

Properties Inspector Description

Unordered List; list items use "bullets"

Ordered List; list items use a numbering system

Text Indent; go to sub-list; also like hitting the Tab key in Microsoft Word

Text Outdent; go to parent list; also like removing a Tabbed space in Microsoft Word

 

Practice with lists: 

 Add the following to your HelloWorld.htm page: 

Here are my favorite movies:

 (add your own. You CAN’T copy/paste because there are no paragraphs…it’s one big paragraph)

Avatar

Titanic

Terminator

T1

T2

Star Wars

Select the movies Click the unordered list tool

You should see:

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

Tool:

Result:

Save

Creating Links 

A link is simply a "clickable" object (usually words), 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:

Note: Here is the Classwork index.htm page we (you) created

And here is our Helloworld.htm page

Link Page2.htm (a new page we will create) to Helloworld.htm index page

Link the index.htm Dreamweaver Practice link to Helloworld.htm Add a new link on the index.htm page to Page2

Start a new page File>Save>As >page2.htm Type Page 2 (to identify the page)…make it bold, italic,

Heading 3

Press Enter to start a new paragraph Type Go to Hello World! Press Enter Type Home, press Enter

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

the user to the helloworld.htm page In the Properties Inspector, 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

Now, link the Home text to your index.htm page that you did for homework.

1. On your Hello World page, start a new paragraph. 2. Type Go to page 2 3. Select the text. 4. Link it to Page2.htm 5. Add a Home link that links to index.htm

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

6. If necessary, link your index page’s “Dreamweaver Practice” link . . . now a null link . . . (first item in the list) to helloworld.htm

7. Test and upload your pages.

Next class: The workspace again and formatting around Images