Introduction To Dreamweaver
Menu Options
At the top of your screen is a list of menu options. The list consist of File, Edit, View, Modify, Text, Window and Help. We will begin our lecture on Dreamweaver my examining each of these options.
The File Menu
Open up Dreamweaver on your computer and click on the word File at the top of the screen. What you will see is the figure below.
The File command allows you to create a new presentation, open an existing presentation, save presentations and exit the program. These commands are similar to the File options in Word or many other programs.
The Edit Menu
Now click on the word Edit at the top of your screen. What you will see is presented in the figure below.
The Edit menu allows you to undo and redo commands, along with the standard cut/copy/paste options. It also allows you to find (and replace) strings of text.
The View Menu
Now click on the word View at the top of your screen. What you will see is presented in the figure below.
This list of menu options allows you to view the actual HTML code, just the design of the webpage (like what you are reading now) or split the screen and view both at the same time.
The Code View Options will allow you to view your code with line numbers. This is helpful when debugging JavaScript errors. The Visual Aids option will be helpful when we are creating tables and image maps.
The Insert Menu
Clicking on the word Insert at the top of your screen will bring you to the list of options presented below.
The Insert options allow you to insert images, rollovers, multimedia such as Flash and Shockwave files, horizontal rules, links to your email address as well as applets, forms, and anchors.
The Modify Menu
The Modify Menu is displayed below. Under this menu you can modify various page properties, including the background color, link colors, add a title, etc. You will also be able to modify existing tables, framesets and align text/images/tables.
The Text Menu
The text menu allows you to edit text in a variety of ways. You can indent, align, format (via headings and list), change the color, style (bold, italics, etc,) and size. You can also check your spelling.
The Commands Menu
The Commands menu offers several options, which are printed below.
If you are using Microsoft Word and saving the file as an HTML document, you can use the Clean Up Word HTML option to clean up some of the unnecessary attributes that Word adds into the document as it is created. When I used this command on a file I created in Word, the following box appeared. Please note that if you use this option on an HTML Word document, it takes a few seconds for Dreamweaver to complete its task.
None of the tags that were removed affected how the web page was displayed.
The Site Menu
The Site menu allows you to establish the structure of your website through Dreamweaver. This is an important feature because it also allows you to simultaneously update all of your links, in all of your pages. We will discuss this feature in more detail when we being our first exercise.
The Window Menu
The Window menu allows you to set view various windows of your current Dreamweaver document. Two of these windows, the objects and properties windows, appear when you first open up Dreamweaver.
The Objects Window is displayed below.
The Properties Window is displayed below.
NOTE: You can also get the Properties Window from the Modify Menu. Just select Modify >> Selection Properties.
The Help Menu
Finally, the Help Menu will enable you to use the help options in Dreamweaver.
Some HTML Information
HTML documents are broken down into to parts, a HEAD and a BODY.
The HEAD portion of an HTML document contains the TITLE of your webpage (what appears in the blue bar at the top), any META information you want to include (such as author, copyright and refreshing) and any SCRIPTS you want to include.
The BODY of your HTML document contains what actually appears in your browser.
Any HTML code that appears between a < and a > symbol is called a tag. For example, <HTML>, <HEAD> and <BODY> are all tags. Attributes are commands we add to tags to make the tags do something that is not the default value. For example, if we want to change the background color of our HTML document, the command is
<BODY bgcolor="#rrggbb>
where bgcolor="#rrggbb" is the attribute that changes the background color of the BODY of your document. You would replace the letters rrbbgg with the hexidecimal color you desired.
Now that you have a basic introduction to the menu options in Dreamweaver, let's proceed to establishing your local site.