Agenda: Day 2

Day 2: Introduction to Dreamweaver

Review Day 1
Test how much you remember from Day 1: Presentation Review (pdf)

Setting up a Dreamweaver Site
At this time we are going to set up a couple Dreamweaver sites. This will give you plenty of practice and allow us to switch between the practice site and your own.

• Site Setup (4:38) This will cover how to make this folder into a web site that we can upload using the Dreamweaver's FTP capability.
  Activity: Set up the following folders into Dreamweaver sites and then practice switching between them.
  • lesson01 (Classroom in a book)
  • dreamweaver_practice
  • your_personal_site
• Dreamweaver FTP Tutorial (6:43)
  If you haven't tried using Dreamweaver to FTP yet, upload the Classroom in a Book lesson files. Test them and then delete them from the remote server. To test them type in the following:
  • http://www.schooladz.com/~student? replace the ? with the letter of your username!

Getting to know the Dreamweaver work area

• Dreamweaver Interface (10:25)

Templates Part 1

• Create a Home Page (index.html) (13:48)
  In this tutorial you are going to create a home page for our practice site using a pre-made template. During the process you will add the content from the homepage.txt file and adjust the format using Cascading Style Sheets (CSS).
• Formatting with CSS (9:03)
  In this tutorial you will format the text while learning more about creating new CSS styles and editing exsisting rules. You will format the table on the page and move the embedded CSS to an external style sheet.
• Color Scheme (don't forget the # sign!)
  • Head Color: #82A80C (Dark Green)
  • Side Bar: #BCF511 (Light Green)
  • Table Head: #F59611 (orange accent)
  • Brown: #A867OC (Nav bar)

Lorem Ipsum: A simple text generator for placement text.

Lunch

Fireworks

• Nav Bar with Roll Over (9:05)
  In this tutorial you will create a navigation bar with two frames and the "add simple roll over behavior" command.
• Adding Drop Down Menus (6:11)
  In this tutorial you will add two drop down or "pop-up" menus and format them.
• Optimizing for the Internet and Exporting (4:37)
  In this tutorial you will select the optimal export settings and then export both the images and html for your nav bar with drop down menus.

Inserting Drop Down Menu into Dreamweaver (1:27)
This quick little tutorial will show you how to insert the Fireworks HTML into your index page.

Wrap Up