Sunday, September 25, 2011

Introduction To Dreamweaver

Hello Students,

This week we begin our introduction to Dreamweaver, a powerful website creation program, often referred to as a WYSIWYG editor, as in "what you see is what you get". This program operates much like a simple graphic/text editing program and creates html code behind the scenes. We will begin by getting used to the interface and move on to creating rich graphic based websites.

With our previous assignment we created text files, change them to HTML and wrote text that we formatted with HTML tags, all by hand. Now we have a program that will write the HTML tags for us!

When we create websites, we refer to text, images and graphics as elements. The windows and menu's in DW are there to help edit, transform and stylize those elements.

The toolbar contains shortcuts to preview (preview/test your page in a web browser) and display features. Here you can specify the title of your page. You can also switch between Code View, Design View and Split View.

Menu Bar:
Aside from containing the standard menu's for saving, editing, etc... the menu bar contains many of the commands available in other pallette's.

Insert Bar:
Shortcuts for importing/inserting different elements.

Properties Inspector:
Also called the Tag Inspector, shortcuts for formatting text, document settings such as colors, background images, alignment etc.

Document Window/Panels
Document window provides an explorer type window for setting up, organizing and creating website elements. File organization, file naming conventions and clean site creating is very important. Advanced functions are accessed through other panels, such as CSS (Cacading Style Sheets) settings.

Get familiar with DW's interface, test all the features you can find and share your discoveries with your neighbors.

Introduction To Dreamweaver Assignment:
Create a single HTML page with dreamweaver that shows the following elements:
  1. Email Link
  2. External Link
  3. Examples of all Header Sizes
  4. Colored Background
  5. Colored Text
  6. Paragraph Text Formatted Left, Center and Right alignment
  7. Ordered List
  8. Unordered List
  9. Embedded Image
When complete, zip your files and email to me at

- Mr.W