· Web viewI want the word “DreamWeaver” in italic. As in other applications, just use your mouse to highlight “DreamWeaver” in the Design window (or the Code window if

The DreamWeaver IDE (Integrated Development Environment)

This is Design view. This is the WYSIWYG view, like in Microsoft Word.

(WYSIWYG = “What You See Is What You Get” and is pronounced “wizzy-wig”)

It is the easiest way to make a web page .

This is Code view. This is where you type HTML code directly.

This is the file name tab.

This is one way to close the file.


This is Split view. It shows HTML code in the top window and the WYSIWYG view in the bottom window.

The file name (currently “Untitled-1”) is shown on the “tab”:


As with most applications, there are several ways to save a file:

Method 1: Right-click on the file name tab and choose Save from the “context menu”:

Method 2: Choose Save from the File menu:

Method 3: Type Ctrl+S as the menu indicates (avoiding menus altogether).

Context menu is the geeky name for the menu that shows up when you right-click. It’s called a context menu because a different menu can appear, depending on where you right-click. Context means “in a certain situation.”

Ctrl + S means first press and hold down the “Ctrl” key, then press the “S” key.


All three methods lead to this screen:

Your file name may just show “Untitled-1”. Either way, the file will be saved as an HTML file. DreamWeaver saves the file using the “.html” file extension.

This is called the Document toolbar.

Notice that the cursor is in the same place in both the Code window and the Design window.


The highlighted region is called the document window (your web page).

Now switch to Split view and type:

I just want to see how DreamWeaver handles typing text directly in the Design window. Hit the "Enter" key once.

into the Design window (bottom window). Watch the Code view window (top window) as you type.

This region (your web page) is called the Document window.

This tells us what tag we are inside.

This tells us we are inside a tag, which is inside the <body> tag.


Typing the quote symbol results in a special HTML character in the Code window ( " ). Also, notice that all of this code is being placed inside the <body> </body> tags, as it should be:

And because our typing is being placed inside the <body> </body> tags, we see a reminder in the lower-left corner of the Document window. When we do hit the “Enter” key, we see:

DreamWeaver assumes that the text was a paragraph and place it inside tags. DreamWeaver also created a bit of padding at the bottom of our web page by inserting an empty


paragraph. The HTML special character represent a non-breaking space, which forces an empty line to be displayed in the web browser. The special character is necessary because

 

is not displayed in web browsers (it is ignored).

Let’s see how our web page displays in a web browser. It should look very similar or identical to what we see in the Design window. Choose Preview in Browser and then IExplore in the File menu (or just press the F12 key):

Just press the F12 key to preview your web page in Internet Explorer.

The blank paragraph: 


Choose Edit | Select All in the Internet Explorer window and you will see that even the blank paragraph is there:

Just close the Internet Explorer window when you are done looking at your creation.

Now one final thing. I want the word “DreamWeaver” in italic. As in other applications, just use your mouse to highlight “DreamWeaver” in the Design window (or the Code window if you wish):

There are several ways to italicize selected text, but for now I will show you one. Right-click the selected text and choose Style and then Italic from the drop-down menus:


Well, we got our italics, but DreamWeaver uses the tag for italics. The tag represents emphasis and is displayed as italics by current web browsers. I’m guessing that most of you don’t care, as long as “DreamWeaver” shows in italics.

But if you do care, just type the tag in yourself in the Code window:

The other “tag” surprise is bold formatting (try it on the word “Design”). Dreamweaver uses the tag for bold. If you find this behavior annoying (it only happens with italics and bold) then choose Edit | Preferences … in the File menu. Then uncheck the “Use and in place of and ” box:

Remember, the right-click menu is called the context menu.

Just uncheck this box if the and replacement annoys you.

Documents

· Web viewI want the word “DreamWeaver” in italic. As in other applications, just use your mouse to highlight “DreamWeaver” in the Design window (or the Code window if