downinfo:
file size and
download time
Creating and Managing Content - INTERACTIVE DEMO
Roll your mouse Over the images in the left column of the above illustration - INTERACTIVE DEMO
Above is the Document Window with some new areas defined for you. When you explore the Dreamweaver 4 interface you'll see a lot of buttons, windows, toolbars, panels, etc. Every button or icon element is also accessible through the Menus Toolbar on the top of the Document Window. I'd like to introduce you to a few of the most used interface tools now so that you can organize and format some content on your pages.
Title Bar
When you save a file, the title bar will change to display the Web Page Title Name followed by the file name in parenthesis. In the browsers, the Web Page Title will be displayed in the title bar such as "Lesson 3". The file name will be the last part of the URL address such as "www.something.com/filename.html".
In addition to the title bar, menu bar, and toolbars that I mentioned in the beginning of this lesson, there are a few things to notice on the bottom status bar of this window.
Tag Selector
The bottom left of my example shows two html tags: body and paragraph tags. If you click or select one of the tags, it will select or highlight the appropriate content that's contained within that tag. The Body tag would select this everything you can see in the design view that I've typed so far. The P tag would select just the paragraph in which the cursor is currently placed. When you have more elements on your page, more tag selectors will be displayed. You can use the Tab Selector to quickly select different elements in the Document Window.
The Property Inspector
Aha, you might have wondered when we would introduce the Property Inspector. Well here it is in both it's compact and expanded states. Toggle the small white triangle on the bottom right to expand or collapse the bottom pane of the Property Inspector. The following Property Inspector reflects the properties for a Table Cell.
 |
 |
The property inspector will be your most familiar friend while you learn to format content in Dreamweaver. The Property Inspector is a context sensitive inspector which means the fields and text will change depending on what you currently select.
The Property Inspector is not visible when you launch Dreamweaver for the
first time but I think you know where to go and find it. It lives in the Windows Menu - Window>Properties or Control+F3 (command+F3
for MacOS). Now that you know how to add things to your launchers, you could add
the Property Inspector to the launcher too! If you do, you might recognize a
familiar symbol if you use Director: the white "i" in the blue circle.
I like to leave my PI expanded so I can see the options available to me for every selection. Take a good look at the lower image of the inspector above. You may not have realized that the images of the Property Inspectors above are laid out using a table structure. The bottom image is inside a cell of its own. Table cells are one way to format your content on a page. Since my cursor was inside a Table Cell when I captured the image of the Property Inspector, the bottom (expanded) part of the PI displays all the properties relating to a table cell. More on table cells later.
You can see the icon of a table cell on the lower left, the word Cell, the Horz and Vert alignment drop down menus, the Width and Height text boxes, No Wrap, Header, Bg field with the now-famous point-to-file icon next to the folder, the Bg for color and Brdr for border color.
The top part of the PI functions in a similar manner to a regular word processing toolbar with menus and buttons to format Paragraphs and text according to pre-packaged Headings, fonts faces, font sizes, font colors, font styles of Bold and Italic, left align, center align, right align, bulleted and numbered lists, indent and outdents. For linking text, images, or other elements, there is a field for a hyperlink with a drop down menu that displays all previously used links for this site, the point-to-file button, a folder for browsing for your destination file, and the target field.
There are also 2 small icons in the top right. A question mark for help and a small pencil for the new Quick Tag Editor. Don't worry about the Quick Tag Editor right now. It's useful if you know some HTML.
When you enter data into the PI, the changes are usually automatically reflected in the Document Window. Some properties may require that you click outside their field or press the Tab key to reflect the changes. We're going to get starting formatting some text and images using the property inspector in just a few moments.
Before we do that I'd like you to go back to the top of this page. When you roll over the images on the left, the display changes in the main window. This technique does not use image rollovers. It's based on the visibility property of layers and Cascading Style Positioning with JavaScript Behaviors.
We'll have an introduction to layers towards the end of the course but I want to illustrate some of Dreamweaver's features as you do the lessons. CSS-P are part of Dreamweaver's dynamite tools for creating dynamic content and popup, flyout, and dropdown menus in html. The above layer code will work in all 4.0 browsers. If you don't see anything on this page, let me know.
Speaking of html let's take a look at the source code for this page. Go to View>Source. For those of you who are programmers I'm sure you can decipher the JavaScript with ease. Not me! I don't code JavaScript but I can often repurpose simple code and decipher DW javascript behaviors.
For more info on HTML, ISP, etc: go to:
http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/
I hope this conveys to you that creating exciting cutting edge websites using dynamic content is a reality with the proper skills and tools even if you're not a programmer. So stick with me because after you get through the basic 4-5 lessons, you're going to have fun making content appear and disappear, move across the screen, and flash in front of your eyes!
Now let's get back to our content.
mouse over the images in this column
