dreamweaver

toc = = =Creating a Web Site Using Adobe Dreamweaver CS3=

What is Dreamweaver?
Dreamweaver software is used to create web sites. It features many of the tools needed to make a complete, dynamic web page. In many respects, it works like a word processor; you simply add text and graphics to a page. Dreamweaver also features site management tools to help organize and synchronize pages. The beauty of it all is that Dreamweaver does not require any knowledge of HTML.

What is HTML?
HTML stands for HyperText Markup Language. In essence, it's the language of the World Wide Web. In the early days of the Web (lo those 12 years ago), designers had to know HTML to make pages. HTML consists of chunks of text called tags. The tags tell your web browser how to draw the page. In fact, you can make a web page with nothing more than a text editor like Notepad, Word Pad or Word. Unfortunately, that process is cumbersome.

Here's what you would need to type to make a link to the AAHS web page:

Altoona Area High School

Imagine creating an entire page using that method. It would take hours to make a very simple page.

The Process
When you set out to make a page, it is best to follow a specific plan:
 * 1) Planning
 * 2) Organization
 * 3) Content
 * 4) Upload
 * 5) Maintenance

Planning
What is your site about? Who will be viewing the site? What will it look like?

These are all important questions. Think of it as a trip; before you start driving, you need to know where you will end up.

Consider the following before you begin to create resources:


 * purpose (inform, entertain, persuade)
 * audience (parents, students, peers)
 * look and feel (color scheme, fonts, navigation style)
 * text content
 * graphics

I highly recommend creating text content in Word. You can concentrate on the message rather than the worrying about how the web page looks.

Organization
Everything that makes up your site must be stored in one central folder. That folder is called the root folder. Items stored outside of the root folder (on the desktop, for example) will not display on your site.

Fortunately, Dreamweaver reminds you if you have included content that's outside of the site's root folder. It will even move things to the root folder for you! How cool is that?

The root folder can be organized in two ways: by content area or by content type; examples of each are shown below.




 * Keep the following in mind:**
 * All of the site's content must be saved in the root folder
 * Only pages named index.html will automatically load in a browser
 * It is possible to include index.html files in each subject area folder
 * For example, including an index.html file in the chorus folder will load that page if someone navigates to aahs.aasdcat.com/chorus

Content
In short, content is king. If you don't have useful, insightful or entertaining information on your site, no one will want to view it. More importantly, if that content isn't current, your site will be quickly dismissed.

It is possible to include live information from other sites on your page. This can give the appearance of a recently updated site while saving you valuable time. Look for RSS feeds that relate to your page.

Upload
Once your site is ready, it needs to be sent to a server. The server is called the host. In most cases, you will be provided server space on a AASD web server. Dreamweaver has the ability to send the pages to the host server. Gloria Sprankle will normally provide you with the specific information needed to connect to the server.

Maintenance
One the site is live, you will need to maintain it. Simply make changes in Dreamweaver; it will synchronize files with the server. If you change a page, the changed page will be sent to the server. If you make a new page, it and all of its resources will be sent to the server.


 * Important:** Make sure the clock and calendar on your computer are correct. If not, Dreamweaver may fail to correctly manage the files.

The Dreamweaver Workspace
The workspace is the name given to the program's interface. It has many tool bars, menu bars, panels and pallets. You can [|learn more about the workspace] from Adobe's excellent online documentation.



Adding Text
To add text to a page, simply type the text on the page as you would using a word processor. Alternately, you could copy and paste content from Microsoft Word. Dreamweaver has a spell checker, but it does not find mistakes on the fly. To check spelling, choose Text > Check Spelling.

Formatting Text
All text formatting options are available from either the text menu or the properties inspector. You can also create bulleted and numbered lists. Do not adjust the style settings for text; the style is used for cascading style sheets (CSS).

Good question. Because all people browsing your site must have the font you use installed on their computer, the font choices are limited. The available fonts are safe for PC, Macs and Linux computers.
 * Where are all of my fonts?**

Inserting an Image
Before you place an image, please keep the following limitations in mind:
 * You must use a graphic that is saved in JPEG, GIF or PNG format
 * Images are inserted just like a piece of text
 * They will not float like they do in Microsoft Word


 * 1) Choose Insert > Image.
 * 2) Find the image you would like to use. Keep the above limitations in mind.
 * 3) If the image is outside of the root folder, Dreamweaver will move it there for you.
 * 4) Be sure to provide alternate text.
 * 5) Click OK.

You can modify how the image looks by adjusting its properties in the properties inspector.

Creating a Link
Links can be made to other pages in your site (internal links) or to pages outside of your site (external links). Both graphics and text can be linked to other pages.

Text Links

 * 1) Highlight the text that will become the link.
 * 2) In the properties inspector, locate the link field.
 * Internal Links
 * Click the folder icon to the right of the link field.
 * Choose the file that represents the page.
 * Click OK.
 * External Links
 * Type the entire web site address, including the http:// into the address field.
 * You may find it easier to copy and paste a web page's address from your browser, especially with longer addresses.

Graphic Links

 * 1) Click the graphic you would like to use as a link.
 * 2) Use the same procedure detailed above.

Testing Your Page
Now it's time to take a look at the page.
 * 1) Choose File > Save.
 * 2) Navigate to a folder. Remember, the file must be saved somewhere inside the root folder.
 * 3) Click Save.
 * 4) Choose File > Preview In Browser. Pick a browser.
 * 5) Check your work.

Free Images
[|Free Clipart from Discovery Education]

Where to go for help?
Contact Mike Baker [|Adobe's Online Dreamweaver Documentation] [|thesitewizard.com]