Dreamweaver CS3: The Missing Manual Course Syllabus & Assignment Sheet
Book: Dreamweaver CS3: The Missing Manual
Includes: Dreamweaver CS3
Estimated Completion: 60 hours
Text: Dreamweaver CS3: The Missing Manual, ©2007, 1st
Edition, David Sawyer McFarland, O'Reilly Publishing
ISBN: 978-0-596-51043-5
Cost: $31.00 - Search to see if you can find this book used.
It is recommended that you purchase additional text/reference books on each subject to further enhance your knowledge and meet your individual learning style. An Amazon store has been setup with recommended books to continue your studies.
General Notes - Before You Start the Book
Important Class Resources
Your instructor provides extensive additional resources for Web design. You should familiarize yourself with and bookmark the following sites:
- Lecture notes are available at: http://www.robinsblog.com - This site is updated several times per week. Students should check this site daily for important class announcements and updates.
- Class forum - A place to discuss Web development. Please register to use the forum.
- Web design tutorials are available at: http://www.tinkertech.net. - Spend some time getting familiar with this site, it is a collection of topics discussed in class over the last several years.
- Free Web site hosting for current students is provided at http://www.robinshosting.com support forums can be found at http://robinshosting.com/forum/index.php.
All software that you will need during class can be accessed from the Web Design folder in the Start menu.
Bookmark this Glossary of graphic design and Web page design terms and this HTML Cheatsheet.
Homework
Homework is not required for this class. However, reading your lessons at home prior to completing them in class makes your classroom time more productive. If you would like to work at home bring in a CD or Flash Drive and we can make a copy of the necessary files for you.
Backing up Your Student Files
You should periodically back up your student files to CD. Stations along the windows have CD Burners. Instructions for writing files to a data CD can be found here.
Certificates
In order to earn a certificate in Dreamweaver students must complete the Dreamweaver Final Project. This project should be completed before starting another course module.
Files, Samples, and Errata
File management skills are absolutely necessary to create and maintain Web sites. Please download and print this file management information for use in class. If you need a brush up on file management, review the tutorials that I've listed here http://www.tinkertech.net/octWeb03.htm#file.
The book has a companion Web site @ http://www.sawmac.com/missing/dwcs3/. You should bookmark this site for future reference. The site includes the sample files needed to complete the book (if you would like to work at home), completed tutorials, and a blog.
In the classroom we use a network. You will be assigned a folder on our network. To connect to your personal folder use drive O:\. Your instructor will copy a folder to your network drive called MM_DWCS3. This folder will include all of the images and files referenced in the book.
Getting Help
While we encourage you to try and problem solve any errors that you may have with your Web pages, ask for assistance if you cannot figure out the problem within a reasonable amount of time; I do not want you to become frustrated.
Cheat sheets are wonderful when you're learning to code. You will find links to numerous cheat sheets on the class forum.
Chapter Notes
Complete all exercises in the book unless otherwise noted in the chapter sections below.
Chapter 1 - Dreamweaver CS3 Guided Tour
Be sure to visit and bookmark the Dreamweaver resources that accompany the book.
Page 29 - If you want to follow along, open Dreamweaver by clicking Start > All Programs > Adobe Design Premium CS3 > Adobe Dreamweaver CS3.
Page 30 #3 - Leave the Web address blank.
Page 31 #8 - Navigate to drive O:\ and create a new folder called dreamtest to use as your local root folder.
Page 39 Note - The files have already been copied to your user folder; they are located in a folder called MM_DWCS3.
Page 43 #7 - Look for this folder on drive O:\.
Page 47 #15 TIP! Alternatively you can use shorthand hex values for certain colors. Links: #f30 Visited: #c60 Rollover: 990 Active: #f00. Red, Green, and Blue hex pairs must be the same in order to use this method; a hex value of #800080 cannot be written in shorthand.
Page 50 #3 TIP! - If you would like to try out a screen reader you can download and install Thunder at home for free.
Chapter 2 - Adding Text to Your Web Page
No notes at this time.
Chapter 3 - Text Formatting
No notes at this time
Chapter 4 - Introducing Cascading Style Sheets
Page 113 - Because you have hand coded HTML and CSS, I would recommend that you jump ahead and read Chapter 10: Under the Hood HTML page 367. I think it's important to understand how to manually edit code in Dreamweaver before you progress any further in the book. After you read chapter 10 return to chapter 4 and continue your adventure with CSS. I ALWAYS work in "Split" or "Code" view in Dreamweaver.
Page 388 - Winmerge is a useful and free utility that you should install and use on your home computers. Please do not install Winmerge on classroom machines.
Page 130 #2 - Should be - File > Check Page > Browser Compatibility.
Chapter 5 - Links
Page 164 - Using the Hyperlink object is a good idea. Accessibility guidelines recommend using the Title attribute when creating a link; the Hyperlink object allows you to easily add this attribute.
Page 184 - Additional resources for creating and editing Spry menus:
View Source: The Easy Way to Add Dynamic Elements to Web Sites
How to use Spry widgets in Dreamweaver CS3
Chapter 6 - Images
Page 202 - Some copies of The Missing Manual have an incorrect page printed on page 202. You can download the correct copy here.
Page 244-245 Tip! - Clicking the Apply button in the CSS Styles box after you complete each step on these pages (9-13) helps to see how each setting affects the image.
Chapter 7 - Tables
Page 273 - Modifying a table - It's always a good idea to save your document after you type in larges amounts of data.
Page 274 #6 - Figure 7-21 is on page 278.
Chapter 8 - Advanced CSS
Page 294 - Some copies of The Missing Manual have an incorrect page printed on page 202. You can download the correct copy here.
Page
299 Tip! Rules pane - Be sure to look at page 300 to see the screen
capture of the CSS Styles pane (Figure 8-10); it displays the icon you must click
to display the Rules pane.
Page 301 Tip! - The first paragraph on page 301 is a very cool tip for debugging CSS issues. Open the Tables site and make sure to study the CSS Styles pane and the Rules pane in particular as you click around your document selecting different paragraphs and objects.
Page 304 Note - You can always change the media type of a style sheet by switching to Code or Split view and finding & editing the link tag in the source code.
Chapter 9 - Page Layout
No notes at this time
Chapter 10 - Under the Hood HTML
This chapter should have been read before completing chapter 4.
Page 388 - Winmerge is a useful and free utility that you should install and use on your home computers. Please do not install Winmerge on classroom machines.
Chapter 11 - Forms
No notes at this time
Chapter 12 - Spry
While there is no tutorial for this chapter, I would recommend that you add each of the Spry elements described in the chapter. Practice modifying the styles described in the chapter. Open the CSS files associated with each of the Spry widgets and explore them. You will find that the CSS is very well commented and it should be easier for you to edit the format of the Spry widget.
Page 482 - You should be able to practice inserting a Spry Data Set. In Firefox use Google to search for "sample xml file". Select the file content beginning at the first XML tag (root element) through the end of the file and copy. Open Dreamweaver and select File > New > XML > Create. Position your cursor after the Prolog and press Enter and Paste the XML data. Save the file.
I decided to try out some of the Spry widgets here. Using the Spry Tabbed Panels made a very long page much more manageable for the visitor. This also gives me the ability to spotlight different success stories periodically.
Chapter 13 - Dreamweaver Behaviors
You may want to open the CSS Layout site (hydroponics.html) and the Forms site (signup.html) so you can experiment with the different behaviors described in this chapter.
If you are interested in learning more about JavaScript, consider the book DOM Scripting: Web Design with JavaScript and the Document Object Model.
Chapter 14 - Flash and other Multimedia
You can wait to complete this chapter after you learn Flash unless you have a need to insert Rich Internet Media immediately.
For a simple tutorial on creating a Flash animation visit the Adobe Design Center.
Page 541 - SwishMax is a great program for creating animations. The beauty of SwishMax is that it's also affordable, if you can't afford Flash, check it out! You can get SwishMax at Academic Superstore for just $19.95.
Chapter 15 - Introducing Site Management
No notes at this time
Chapter 16 - Testing Your Site
No notes at this time
Chapter 17 - Moving Your Site to the Internet
Page 612 #5 - If you want to use your robinshosting.com account your "FTP host" would be yourusername.robinshosting.com
Page 612 #6 - The "Host directory" field would be public_html/folder_name. You will need to use CPanel's File manager to create a folder to store your site files. Ask your instructor for help if you
Page 613 - You do not need to use passive FTP or SFTP.
Read pages 616-619 only.
Chapter 18 - Dreamweaver CS3 Power
No notes at this time
Chapter 19 Templates
You must define a site before you can work with templates. Define the Chapter19 folder as your local root folder before you begin this lesson.
Chapter 20 - Automating Dreamweaver
No notes at this time
Chapter 21 - Customizing Dreamweaver
Please do not customize Dreamweaver in the classroom.
Chapter 22 - Getting Started with Dynamic Web Sites
The rest of the book is optional. I would recommend completing these chapters after you complete the rest of the curriculum.
Page 755 - Do not download/install XAMPP in the classroom.
Use CPanel's File Manager to create a folder called php_dynamic in the public_html folder of your robinshosting.com account.
Page 764 #2 - Use the Advanced tab to setup the site. These instructions will replace the instructions on pages 764-766 #10.
Use the following information for the Local Info:
Site name: Cosmo Site
Local Root Folder: O:\MM_DWCS3\php_dynamic
Use the following information for the Remote Info:
Access: FTP
FTP Host: yourusername.robinshosting.com
Host Directory: public_html/php_dynamic
Use your own login and username
Use the following information for the Testing Server:
Server Model: PHP MySQL
Access: FTP
The rest of the information should automatically populate. You will need to edit the URL prefix. Remove public_html/ from the URL prefix so it looks something like this:
http://robin.robinshosting.com/php_dynamic/
Once you have edited the URL prefix, click the Test button to be sure that you can connect to the server. If you connect successfully, click OK to complete the Site Definition setup, otherwise, ask for help from your instructor.
Page 771 #1 - Your robinshosting.com account has PHP and MySQL capabilities:
Below are the instructions for creating databases and accessing phpMyAdmin.
Before you attempt to create your database, review the Flash movie How to create a MySQL database in CPanel.
You can access your database
management and phpMyAdmin by opening Cpanel @ yourusername.robinshosting.com/cpanel. You will
need to login to your account. Once you're logged into CPanel, click
the MySQL Databases icon. From this screen you can create a database
for use with this lesson. I would recommend that you create a single database and
that you use this for all of your class PHP/MySQL projects.
To create a database:
Type class in the Db text box, click the Add Db button as shown in the image below.
Your database will be created. Note: your robinshosting.com username and an underscore will prefix your database name like this: yourusername_class. This is your database name and you must use this name instead of catalystdb as described in step #4 on page 488 and for the remainder of the lesson. Click Go Back link.
In order to use your database you must create a username and password that is granted permission to manipulate the data and to connect to the database. This username and password is needed every time you want to connect to a MySQL database. To add a user to your database:
Type your robinshosting.com username in the UserName text box and your
password in the Password text box. Click Add User. Your user will be
created. Note: your robinshosting.com username and an underscore will
prefix your username name like this: yourusername_class. Click Go Back.
Next you have to associate your user with your database.
Select your new user account from the User drop down and the class database from the Db drop down. Then click Add User to Db. Click the Go back link. Your database is now created and ready for use.
Scroll to the bottom of the page and click the phpMyAdmin link.
Before you continue with phpMyAdmin, watch the Flash movie, Managing a MySQL database in PHPMyAdmin.
Page DRM
488 #3 - Select your yourusername_class database from the drop down menu in the left
frame. To import this file, click the SQL tab
. From the Query Window screen
click the Browse button.
Browse to the O:\MM_DWCS3\php_dynamic folder and select the cosmofarmer.sql
file. Click the Go Button.
Your
tables should be installed in your database and you should see a
confirmation page. Your database
and tables should also appear in the left menu frame.
See your instructor for additional help with creating databases and importing tables.
Page 772 #9 - Skip this step. You should use your robinshosting.com username and password throughout the lesson.
Chapter 23 - Adding Dynamic Date to Your Pages
No notes at this time.
Chapter 24 - Web Pages that Manipulate Database Records
No notes at this time.
Chapter 25 - Advanced Dynamic Site Features
No notes at this time.
Chapter 26 - Server-Side XML and XSLT
Please read this chapter only.
Additional Chapters - Frames & Animation
There are two additional chapters available in electronic format at the author's Web site. These chapters are not required, but in case you have to edit a site that uses frames or animation you should know that they're available for reference.
Project Information
Project Preparation
This project should be completed after completing the Flash and Photoshop units. Note: I want to review your work as you progress through the course, do not wait to submit required projects. I will not accept all of your projects during the last week of course or after you have completed the course.
Review these art and design resources before beginning your project.
Review the article on making your documents XHTML Compliant.
Review these resources on copyright.
Before you begin your project, visit portfolios.com and browse some of the creative talent. While you should never copy someone else's work, studying other designer's portfolios can be a great source of inspiration.
This project should be completed before you begin other units.
Students will demonstrate their knowledge of the Web planning process.
Students should complete the Project Proposal (Word document format).
Students will demonstrate their knowledge of the Adobe Suite by developing a five page Web site.
Using what you have learned about Dreamweaver, Photoshop, and Flash create a Web site using the following guidelines:
This site should be a minimum of six created pages. The content or site topic is up to you. You may want to contact a local non-profit, a neighbor, or a small business to see if they need a Web site developed.
The page design should be visually pleasing, professional, and should support the page content. The page design should be appropriate for its intended audience. The page design should be controlled with CSS and use XHTML.
The images should be well designed and complement the overall site design. The images should be created with Photoshop or Fireworks. They should not be distorted and should not include negative graphic effects. The images should be optimized and should download quickly. All images should have ALT and height and width tags. If necessary the images should be resized using an image editor and not via the image height and width tag. Images from the Web can be used as long as you have obtained appropriate permission.
Notes: The graphics should be created in Photoshop or Fireworks. The site should include rollover buttons, disjointed rollovers (link) with images, and other advanced image editing techniques.
The pages should use effective and professional layout. The layout should not be cluttered. The background and text colors should be readable. Visitors who use a 800x600 monitor should not have to scroll to the right. Font sizes should be appropriate for the audience. The page layout should be controlled with CSS.
The content on the site should be well written. The content should not contain grammatical, punctuation, or spelling errors. The content should be easy to read and use appropriate fonts. The content should be controlled with CSS.
The site should be well organized. All pages should have meaningful titles. Navigation should be obvious and easy to maneuver. Navigation should be on every page and should be easy to find. The navigation should be consistent throughout the site. Folders should be created to store necessary files.
Everything on the site should work. There should not be any missing graphics or broken links. The layout and design should work on both a PC (Internet Explorer/Firefox) and a Mac (Safari).
The site should download in a reasonable amount of time. Multimedia objects should be used with care. All images should be optimized and download quickly.
The site should include the author's name (copyright statement) and some form of contact information (a contact form). There should be no copyright infringement on the site. The author should obtain permission for all images and content that was obtained from another source. Outside sources should be credited appropriately.
The site should contain keywords and description meta tags. The site should be registered with Google. For additional information on Meta Tags and registering your site with search engines click here.
The site should incorporate a Flash movie with animation; it does not have to be a splash page. This movie may include photos, text or drawn characters and shapes. The movie should utilize start and stop buttons, tweening, sound, and other effects. The movie should be well organized; Movie clips should be used for animation, symbols should be used and stored in folders within the Library. Students should submit the original FLA file for instructor review. Here is a sample movie; this is a Flash opening that one of my former students, Shizuko Angel created for me.
The site should be XHTML compliant (transitional) and you should validate all pages prior to submitting it to your instructor. http://validator.w3.org/
Students should read the rubric before they begin their projects. This rubric defines the grading criteria for the project.
Self-evaluation and peer-evaluation
The site should be uploaded to your account at robinshosting.com. Create a folder on your account to store the project.
Before you submit your project to your instructor, use the rubric to evaluate your own site. You should also ask two of your fellow students to evaluate your site using the rubric. After self and peer-evaluation, revise your site as needed. Submit your self and peer-evaluations to your instructor along with the Project Proposal.
Submitting the Site
Submit your self and peer-evaluations to your instructor along with the Project Proposal.
Place a link from your homework page to your Adobe project. Upload and place links to the FLA files that are associated with the site on your homework page or send your instructor a link to the location of the FLA files.
Notify your instructor via email, rwood@cccoe.k12.ca.us, when the site is complete. Be sure to use the complete URL/URI in your e-mail, i.e., http://robin.robinshosting.com (always include the http:// when you send your links out in e-mail or post them on message boards).
Copyright information
Prior to creating your Macromedia project, read R. Delago-Martinez' What is Copyright? site. Be sure that you do not include images, text or code without permission from the originator. For additional information on copyright visit the following sites:
10
Big Myths About Copyright
United States Copyright Office (Be sure to read the copyright basics)
Copyright Information from
the University of Michigan
The Copyright Website
Copyright
Resources Online from Yale University
Copyright Law
from the Copyright Clearance Center
Copyright and Fair Use from Stanford
University Libraries
Legal Information
Institute - Copyrights &
Copyright Infringement
and Remedies
Additional resources http://www.tinkertech.net and http://www.putertutor.net
CERTIFICATES
Certificates are awarded to students who:
- Demonstrate effort to learn and problem solve.
- Accurately complete all required project labs (one retry is permitted per project).
- Utilize the Adobe Suite in their final project. Note: In order to receive a certificate for the Macromedia Suite you must complete the Web Design Final Project.
©2008 - Contra Costa County Office of Education -
Regional Occupational
Program - Call 925-942-3436 to enroll
