Dreamweaver Week 1

Web Overview

What is “The Internet”?

1. How do we define what it is and what it is used for?
2. How do you get from your PC to a web site?
3. Who invented it? When? Why?
4. What is the display technology that makes the Web possible?
5. What is a “browser” and what does it do?
6. What is the connection between a browser and HTML?
7. How fast is the Internet?  For example, how long will it take to send a message to somplace on the other side of the world and back again?

Try this link to see for yourself:

http://www.tracert.com/cgi-bin/trace.pl

In order to work with DW, we have to start by defining a site. This enables many of the important functions of DW and should be done every time you start to work with DW.

• Site>Manage Sites

 

• Start by selecting a folder for the Local Root Folder. This is the most important step because DW needs to know where your files are. They need to be all in one place…ONE FOLDER ONLY!
• Select the Remote Info tab and enter the account information…if you have a web hosting service. Otherwise leave this area blank.

 

 

• Once you complete this step you are ready to work with DW.
• We will take a look a t each of the items on the Dreamweaver standard screen and in the process create a simple web page.

 

.

 

1. To start with make a folder that you will be saving your work in, and define your site. Go to GDStudent Docs and find the BCC_Images folder and choose a few images. Copy them to your folder.
2. Use File|New or Control+N to create a new blank page.
3. On the top type “The Web is fun...” or something equally profound.
4. From here, we will go through each item on each tab of the tool bars along the top of the page. Make sure you understand what each tab is for and what each item is. At this point we are aiming for familiarity. We will take each section in detail later on to master the capabilities of each object.
5. Highlight both the text and the line. Click on the HTML Source button. (<>) Note the code that appears in the window. This is what Dreamweaver is really doing…writing HTML for you. You work visually and DW does the nerd work for you.
6. Find the Properties Bar along the bottom. Using the various features, change the text size and other qualities such as Bold and text alignment.
7. Add some more text and format it.
8. Go to Modify|Page Properties and change the background color.
9. Add other elements in the Object pallet;

• an image
• a table with both images and text (set align to center in properties)
• change the background color in various table cells
• add a line
• a line break
• email link
• date
• Flash button
• Flash rollover
• regular rollover

Don’t worry about the end result; we are going to throw this away. You need to be comfortable adding elements to the page, editing and viewing them. Experiment!

Remember that Dreamweaver is a tool for formatting a layout for the Internet. It is much more like Quark than Photoshop. The trick to Dreamweaver is learning <how> to get it to do what you want. Often times there is no straight path to what you want to see on-screen. You have to learn how to outsmart Dreamweaver.

Use File|Preview or F12 to use the Browser to see your work.

---

In-class Project - Week 1

Since the object of this course is to enable you to create your own portfolio site, we will break that process up into 3 segments. To begin with we will work on a pure Dreamweaver based site. In future weeks we will work on Photoshop/ImageReady based sites, and Flash based sites. Your final project will be to create your own hybrid site that combines all 3 styles in your own design.

You will need to keep your in-class work each week and continue to develop it and add elements the following weeks. Be sure to back your work up!

Dreamweaver Site - Week 1

Use Photoshop to create a 750x200 (aprox.) banner for your site.

• Create and link 3-4 pages each of which contains:
• Table to contain all content
• Heading
• Image
• Descriptive Text
• Buttons or Rollovers to go back to the Main Menu or from the Main Menu to each page.