Dreamweaver Exercise 1

Defining a local site in Dreamweaver is important. By defining the site, you tell Dreamweaver where to find the root directory. This allows Dreamweaver to use it's nifty organizational tools. Like changing the pathing in links when you move a file or folder.

You're going to create a local site called Favorite Creatures. First, you need to create a root directory for the site.

• open Windows Explorer (right click on the start button, hit explore)
• navigate to your flash drive
  • if you didn't bring a flash drive, navigate to the desktop.
• hit File > New > Folder
  • name the folder creatures
  • naming rules: no spaces, no caps
• close Windows Explorer

Now we're going to fire up Dreamweaver and define the site. Basically, we just tell Dreamweaver where to find the root directory.

• open Dreamweaver (start > programs > Adobe Web Standard CS3 > Dreamweaver
• Edit > Preferences > New Document > XHTML Strict 1.0
• Site > New Site
• Hit the "advanced" tab if needed
  • The category "local info" should be highlighted on the left
• Site Name: Favorite Creatures
  • There are no rules for naming the site. You may use spaces and caps.
• Local Root Folder: Click the folder icon and navigate to the creatures folder that you just created. Do not try to type in the path.
• Default images folder
  • Click the folder icon and navigate to the creatures folder
  • Hit the Create New Folder icon and create a folder called images
    • Make sure images is inside creatures
• Select "remote info" category on the left
  • Access: FTP
  • FTP Host: www.student.nvcc.edu
  • Host Directory:[leave blank]
  • Userid: nvstu/userid
  • Password: whatever
  • Test out the connection to the remote server. It should work
• That's all for now. Hit OK. You've just defined the site.
• Hit Windows > File to open the files panel (if needed)
• Notice that the name of the site, Favorite Creatures, is at the top of the files panel next to a green folder.
  • If you're not seeing a green folder, you're not in a defined site.
• Notice that the root directory, creatures, is the first directory below the column titled "Local Files." It also has a green folder.
  • The images folder should appear below the creatures folder, indented slightly.

Now we're going to make some folders and files. Do this in the Dreamweaver Files panel. The Dreamweaver Files panel works pretty much like Windows Explorer.

• Select the root directory, which is the creatures folder
  • Right-Click > New File
    • Name the file index.html
    • This will be the site's home page
    • Why do we name it index.html?
    • Why do we put index.html in the root directory, and not buried in another folder?
• Again, select the root directory, creatures
• Right-click > New Folder
• Name the folder mammals
• Again, select the root directory, creatures
  • Right-click > New Folder
  • Name the folder reptiles
• You should now have three folders in the creatures folder: images, mammals and reptiles
• Select the mammals folder
  • Right-click > New file
  • Name the file tigers.html
  • Make two more files in the mammals folder: monkeys.html and elephants.html
• In the reptiles folder, make files called snakes.html, turtles.html and crocodiles.html

Close down Dreamweaver. Open Google. Find pictures of a tiger, monkey, elephant, snake, turtle and crocodile. Be sure they are .jpg or .gif files. Save them in the images folder, which is in the creatures folder.

Open up Dreamweaver. Notice the images are in the folder. If you don't see them, click the + in front of the folder icon. If you still don't see them, click the Refresh button. If you still don't see them, better try saving them again!

Now lets put something on those empty file pages we just created:

• Double-click on the index.html filename
  • The index page should open in the document window area
  • fill in the Title: My Favorite Creatures (at the top of the document window)
  • Click once in the document window
  • In the properties panel, change the Format from none to Heading 1
    • If you don't see the properties panel, hit Window > Properties
    • Type Creatures I Adore
    • Hit enter
    • Hit CTRL-S to save the changes on the page
• Double-click on the tigers.html filename
  • the tigers file opens
  • fill in the Title: Tigers
  • Click once in the document window
  • In the properties panel, change the Format from none to Heading 1
    • Type Tigers
    • Hit enter
• Check out the code view to see how it looks.
• Now get really adventurous and drag the tiger image from the files panel onto the page.
• Easy! It looks so good, hit CTRL-S to save the page
  • Notice an asterisk by a file name means it contains unsaved changes.
• Put a title, a level one heading, and an image on each of your other creature pages.
• Save everything. Hopefully it's on your flash drive. We'll use this site again next week.

To put files on the server, you simply select the file (either the filename, or the document itself in the document window) and click the "put" blue arrow. That puts the file on the server. You can see what's on the server by changing the Files panel to "Remote View". But don't forget to change it back to "Local View" when you are done.

Be sure to show your work to me before you leave.