| |
Dreamweaver is a wysiwyg HTML text editor. It allows you to design
a web page without writing HTML code, the program does the coding for
you. DW does allow you to jump between the design view and the code
view of the document so you can always get into the code to make modifications.
Dreamweaver is currently the most widely used wysiwyg editor employed by web
design professionals.
For additional help with the following lesson obtain a Studio MX
2004 text and go to Lesson 1 for Dreamweaver. The text will provide
screen shots that will help you set up your site. Turn to page 4 -
Dreamweaver Basics.
You can download a free 30 day copy of Dreamweaver MX by going to
the Macromedia web site.
1. Open dw. Be able to identify the following parts of the dw working
environment:
-
Title Bar - blue bar at the top of the screen that shows the application
name and the name of the file your are currently working on.
-
Document Window - this is the large white space in the middle
of the screen. This is where you create your document. You can work
in the document window in one of three ways:
-
Design View - shows what the page would look like in a web
browser.
-
Code View - shows the code that is being used to create the
web page.
-
Cove View and Design View - splits the page in two showing
both code and design.
-
To change between these three different views click on the buttons
found just below the save button on the tool bar. Move your mouse
over the buttons until you find the three buttons described above.
Be able to move between these three different modes.
-
Panel Groups and Panels - panels (on the right hand side of your
window) provide easy access to tools and functions for dw. These
panels can be collapsed or expanded by clicking on the triangle
next to the panel name. Practice expanding and collapsing each panel.
List the names of the all of the panels displayed
on the screen. (there should be about 7 panels - hint they
are not all in the same location)
-
The Insert and Properties panels are stand alone panels. The insert
panel allows quick access to all of the different types of HTML
elements we have discussed so far. The properties panel is context
sensitive, it changes the information displayed depending on what
item you have selected in the design window. List
four properties that can be changed in this window.
-
Status Bar - this is displayed at the bottom of the document window
and displays the following information:
-
Tag Selector - lists all of the tags in a hierarchical display.
Allows the user to select a tag and apply specific properties
to that tag and all of its contents.
-
Window Size - click on this display, a list of possible window
sizes is displayed.
-
Document Size and estimated download time - shows you the
current size of the page and the estimated download time. The
download time is calculated based on the page size and a default
download speed of 28.8kbps.
-
Go to the Help pull down window and select Using Dreamweaver.
What shortcut key can you also use to access
the Using Dreamweaver information? Do a search for Status
Bar. If you need help it is only a click away.
Open the Dreamweaver screen shot and label
the numbered items. When you have answered the above questions and labeled
the screen items ask for teacher check.
|
