Dreamweaver Tutorials from Classroom in a Book -
Getting Started
Read Page xiii of the text Jumpstart as this is the method we will be using for all tutorials. You MUST read pages 2 to 35 of the text BEFORE working on the tutorials. You should also watch the videos in Section 2 of the DVD that is included with the textbook, especially video 2.5, 2.6, 2.7, and 2.8
Tutorial One - On your own
This is Chapter 3 - CSS Basics - from your text. You should be able to complete this in 30 minutes. It will give you a basic understanding of how CSS works.
1. Information Architecture
2. Formatting Text with CSS
Copy the files for lesson 3 from the CD to your jump drive or download this zip file to your jump drive and extract it, then delete the zip file. Regardless of the method used you will now have a folder named lesson 3 on your jump drive.
Tutorial Two - Week 3
This is Lesson 4 - Getting a Quick Start - from your text book and starts on page 54. This should take about 90 minutes to complete. You need to copy the lesson 4 files from your CD to your jump drive or download this zip file to your jump drive and extract it, then delete the zip file. Regardless of the method used you will now have a folder named lesson 4 on your jump drive.
Tutorial Three - Week 4
This is Lesson 5 - Creating a Page Layout - from your text book and starts on page 81. You are to read pages 81 to 87 BEFORE starting on this tutorial. You will be required to create thumbnail layouts and wireframes for all websites you create in this course. This lesson should take about 90 minutes. You need to copy the lesson 5 files from your CD to your jump drive or download this zip file to your jump drive and extract it, then delete the zip file. Regardless of the method used you will now have a folder named lesson 5 on your jump drive.
This is what you will create - notice the navigation bar on the left side
Tutorial Four - Week 5
This is Lesson 6 - Working with Cascading Style Sheets - from your text book and starts onpage 104. This is one of the MOST IMPORTANT topics in the text. It will take at least 2 hours to complete this topic. You need to copy the lesson 6 files from your CD to your jump drive or download this zip file to your jump drive and extract it, then delete the zip file. Regardless of the method used you will now have a folder named lesson 6 on your jump drive.
This is what you will create - changed the background on the vertical nav bar and added effects to horizontal nav bar
Tutorial Five - Your website Template - Week 6
You can create your portfolio website from any ONE of these templates. Three of these represent the layout in the textbook, and the other three are a new look provided by Projectseven.
The navigation in website 1 is created with Dreamweaver Spry Menu Bar (which is too much work and difficult to modify). All other navigation menus are from Projectseven Pop Menu Magic 2 (PMM). User friendly, quick to set-up and modify, but it's not free
Now for these templates. They all include a main template that you will learn to modify (see pages 135 to 138 of the text), and creating child pages based upon the template (see page 138 bottom to 139).
Website 1 - vertical navigation - created with DW Spry . It looks like this.. Get the zip file from here
Website 2 - vertical navigation - created with PMM.. It looks like this. Get the zip file from here
Website 3 - horizontal navigation - created with PMM. It looks like this. Get the zip file from here.
Website 4 - vertical navigation - created with PMM. It looks like this. Get the zip file from here
Website 5 - vertical navigation - created with PMM. It looks like this. Get the zip file from
here
Website 6 - horizontal navigation - created with PMM. It looks like this. Get the zip file from here
Important: The template has already been completed and is in a folder named TEMPLATE. DO NOT move this file from the template folder. Each site has a page named index.html. This is your home page DO NOT RENAME index.html to any other name. All web servers look for the first page of a webstie to be index.html or index.htm.
Before you start working on your website in Dreamweaver YOU MUST define a site so the program knows where your site is located. At Seneca it will be on your jumpdrive and in the folder named website. Refer to page 56 of the text or this webpage.