Adobe Dreamweaver I, GRDSN 172

Welcome to the Dreamweaver CC course.

Welcome to GRDSN 172 Dreamweaver I. This course will explore the basic functions and operations of Adobe's web site application, Dreamweaver. We will be learning the tools and concepts while creating projects, using the Against the Clock textbook, Dreamweaver CC: Professional Portfolio.

This course will work through the first five projects to give you working knowledge of the toolset. The second Dreamweaver course, GRDSN 174, covers the remaining projects, which deal with more advanced tools and problem solving.

The textbook is available for checkout while you work in the lab. If you have Dreamweaver on your own computer and wish to work outside the labs, you can purchase the book from the Bookstore.

At this stage you should logged on to the Canvas Learning System, looked over the Syllabus/FAQ page, found the Lessons page (linking to these instructions, the quizzes, and the file turn-in items), and have started up a computer with Dreamweaver CC installed.

Working Tips

Please pay attention to these instruction pages. If problems and errors are found in the textbook, they will be listed for each lesson.

Read and work through the project in the Against the Clock book. You will use the sample files provided by Against the Clock.

The projects ask you to use the Against the Clock fonts. If you are on a computer that does not let you install fonts, feel free to substitute a similar font from your computer.

The Source Files

The project and font files are also stored on the server in the graphics labs, AVA-Disciplines/GRDSN/Against_the_Clock. If you work outside the lab, files can be downloaded by following the instructions on the inside back cover of the book.

You have several options for storing your class files at SFCC.

  • You have a network account Home Directory with 8 gigabytes of storage space. This can be accessed from any computer you log in to on campus, but cannot be accessed off campus.
  • You can use a USB flash drive or portable hard drive to save your work and access your work from any computer you plug this device into.
  • If you are working on a Mac, a set of secure folders are created in your “User directory”. These exist only on the machine you have logged onto, and they remain there all quarter. No one but you will be able to access these files. If you return to the same machine day after day you could store working files on the machine. Be forewarned that these machines are not immune to hard drive crashes and other dire events. You could lose everything stored on a computer; this applies to any computer, anywhere. You should always save a backup of your files to the network or a portable device.
  • In a pinch, if you have an email account that allows large attachments, you can email yourself an archive .zip file of your lesson. The archive process is explained later.
  • Consider saving your completed work onto CD or DVD disks. These are not read-write media, but they are a cheap and stable place to keep backups of files, in case of system problems. It is wise to keep your backup disks at home or another safe place...not a in a backpack or in your car.

As you work with Dreamweaver througout this course, remember that it creates HTML files. These are sets of instructions to web browsers, describing what images, text, and other parts will be placed on a page. The HTML file contains the text but not the images. If you submit only the HTML file, it won’t work! You always need to provide the HTML instructions and the related files; images, style sheets, etc.

Make yourself a new folder to store your work. In the Finder, use File>New Folder and rename it from Untitled folder to 172-interface-My name. (Rename a folder by selecting it and pressing Return. The name will turn blue and you can type the new name).

The Exercises

Begin by reading the Gettting Started and User Interface sections in the book. Follow the instructions and try out the panel layout options. Create your customized “Portfolio” workspace and set up the test ATC site and do the operations as directed.

Take two screenshots of your work, one of the Dreamweaver window after you have saved your "Portfolio" workspace, and another screenshot of the Files window showing the ATC site you set up.

To take a Screen Shot

On the Macintosh, press the Command+Shift+3 keys and a .png image of the screen will be saved on your Desktop, named "Picture".
On Windows, the Print Screen key will copy the screen image to the clipboard and you will have to paste into a document, for example a Word, Paint, or Photoshop file. You may have a screen capture utility program, depending on the version of Windows you have.

Once you have settled in with the interface and the sample files and the work station, you will be ready to tackle the first project.

What to turn in

Move or copy the screenshots of your interfaces (see above instructions) into your new folder:

  • Your screenshot of your customized workspace.
  • Your screenshot of one of the sf-arts web pages.

Create a compressed .zip archive of your folder. The zip files are a very safe way to move collections of files over the internet, and they usually reduce the file size.

Use the Macintosh Finder’s File>Compress "Filename”, or Windows’ “New>Compressed (zipped) Folder” tools to create a .zip archive of the folder. Remember to save a copy of your work folder onto your personal storage device.

Name your archive "172-interface-My name.zip" .

Attach your .zip file to the Canvas turn-in item

Take the quiz

Go to the Assignments section in Canvas and take the project quiz. You are allowed to retake the quizzes only twice. You might review and print the quiz before starting the project and locate the answers as you work.

You are done learning the Interface!

 

 

top of page