|
|
 Welcome to the DreamWeaver Tutorials
|
|
|
|
Creating Web Pages with Macromedia DreamWeaver MX 6.0 for the Mac (Without Knowing HTML!)
Edition 1: Introduction to Dreamweaver
Welcome to "Using Macromedia DreamWeaver MX 6.0 for the Mac". This guide will aid you in understanding the basic layout of the Dream Weaver program, as well as familiarize you with the basic tasks of how to create a personal web page. First off, let’s start with what type of program Macromedia DreamWeaver MX 6.0 is. Macromedia DreamWeaver MX 6.0 is a "What you see is what you get" (also referred to by the techies as a WYSIWYG, pronounced "wizzy-wig") HTML editor. HTML stands for HyperText Markup Language, and is the most basic and fundamental language used for creating web pages. Normally, in order to create a web page, you would have to know atleast basic HTML programming because all browsers (like Netscape or Internet Explorer, for example) interpret primarily HTML to display the page. In fact, you can see the "hidden" html code behind any web page by, in your browser, going to the "source code". In Internet Explorer, go to View ¬ Source (Note, whenever I use the "¬" when referring to a program, I am talking about a menu item. So View ¬ Source would mean go to the "View" File menu, and then within the "View" menu, click the "Source" menu option). Your menu should like this:
After performing these commands, you will be given a very cryptic looking page scattered with html "tags". The most common, which will be towards the top of the "source code" page, will be the <html> and <body> tags. Luckily, however, thanks to Macromedia DreamWeaver MX 6.0 you can use the WYSIWYG features of the program and totally bypass any of the html code, but still create a web page! You see, Macromedia DreamWeaver MX 6.0, has a specific layout called "Design View" where all you have to know is a few basic features of how to use the Macromedia DreamWeaver MX 6.0 program, and Macromedia DreamWeaver MX 6.0 creates the HTML code behind the scenes automatically for you! So let’s get started making a web page.
Getting Started: Creating a New Document
First you want to open the Dream Weaver program. Do so by clicking its icon from the "Internet" tab from the "Launcher" program on the Desktop. Macromedia DreamWeaver MX 6.0 will automatically create a blank document for you, entitled (appropriately enough) "Untitled Document (Untitled-1)":
You want to make sure you start off in "Design View" when creating your first web page. Do so by clicking the "Design View" button at the top of your Untitled Document shown here:
Now you are all set to create your page, but first, let’s get familiarized with Macromedia DreamWeaver MX 6.0.
At the top of your screen you will the DreamWeaver Toolbar (if you don’t see a
Toolbar like the one shown below, go to Window¬ Insert to check the Insert property of the program) shown here:
Make sure the "Common" tab is selected. This is where you will be do most of your page creation. Macromedia DreamWeaver MX 6.0 offers some advanced tabs such as "Layout" , "Text", "Tables", "Frames", etc. But the primary tab you will be using is "Common". Within the "Common" tab, there are a few buttons that you will use to create your page.
Creating a Hyperlink
First in the "Common" Tab is the "Hyperlink" button, which looks like this in the toolbar:
Use this button to turn any selected text into an html hyperlink (Hyperlinks are the, usually, blue underlined, clickable links you find on webpages that "link" – hence, the name hyperlink – you to other parts of the World Wide Web). So to create an actual hyperlink, click on the "Hyperlink" button. A text box will pop up asking you to enter some information about the link. The "Hyperlink" window looks like this:
You only need to worry about the "Text" and "Link" fields in your hyperlink. In the "Text" Field enter what you want you link to be called (which will be underlined and in blue), and then in the "Link" Dialog Box Field you want to simply type the link that you wish your hyperlink to link to. The "Hyperlink" box above creates a hyperlink called "CC Home Page" and links to the Colorado College Home Page. After entering your hyperlink, simply click "OK". You should get a hyperlink in your web page workspace that looks like the one in the window below:
Similarly, to create an e-mail link ( a hyperlink that will connect you with someone’s e-mail address) follow the same procedure as "Creating a Hyperlink", but click on the "E-mail Link" button juxtaposed to the "Hyperlink" button in the Toolbar, as shown below:
Formatting Text
Next you’ll probably want to format your link. To center your link (or any text, for that matter), highlight the text, click on the on menu, Text¬Align¬Center:
You can use this alignment trick to align any type of text for that matter. Oh, and in order to add just plain text to your web page, just start typing away in your web page workspace. Macromedia DreamWeaver MX 6.0 treats your text like it’s a word processor and converts it to the entire messy HTML behind-the-scenes for you. Also under the Text menu, you will notice options to edit the Font, Color, Size, and even Style of you text. For example, to create a title for your Homepage, you may want to select the text assign it a "Style" of "Bold" and then give it a "Size" of "7".
Adding Images
Now that you’ve got formatted, aligned, and styled text and hyperlinks on your web page, you might want to through in some graphics to spice it up. The first thing to know about images is that they take up space, a lot of it. And if you are going to be publishing your page through your Student Web folder, which is most likely the case, you’ll be maxing out of your 30 Megabyte maximum storage capacity pretty quickly, unless you use the write image file types and, of course, use your space wisely. First off, any image you want to add to your web page should be in a .gif or .jpeg format. These are the two most common image formats you’ll find on the web, mainly because they offer the best visual resolution at the smallest file size. When working with media on the web, smaller file sizes, mean faster transfer rates, which, in turn, means that viewers won’t have to wait as long for your web page to download and be viewed. To add an image to your page click on the "Image" button in the Macromedia DreamWeaver MX 6.0 Toolbar:
After clicking the "Image" Tab a dialog box will pop-up and ask you where you want to get the graphic file. Simply navigate through your folders (just as you would to open a normal file from Microsoft Word), select the graphics file, and then click "Choose". Note, your graphics file will only be accessible (or able to be "Chosen") if it has been saved in a proper web format, as a .gif or .jpeg file. If you don’t know how to save an image file in web-optimized format, I suggest going to the Web Graphics Tutorial at Webmonkey’s site. A cool trick to see how long your file will take to preview is to look in DreamWeaver’s specialized graphics dialog box. Simply select your image in the "Select Image Source" dialog box and below the preview of your image will be a download rate, as shown below:
This Image will download its 22-kilobyte file size in 7 seconds. Note that images can be formatted and aligned just as text is. Simply select the image, go to the Text menu and then select the formatting options you prefer.
Publishing your Site (Finally!)
Now that you have created a full-fledged, killer home page complete with hyperlinks, formatted text, and aligned graphics galore, you’ll want to publish your site. To save your site simply go to File¬Save, and a familiar "Save As" Dialog box will pop-up asking you to give your webpage a creative name and to save it in an appropriate location (make sure you keep the ".html" extension on the end of your document when you save, or else your browser won’t recognize your webpage!):
To get your site up on the web for your friends see from anywhere in the world, simply follow the instructions on the "How to Publish your Web Site Address on the Web" document located on the Colorado College'es Help Desk’s "How To…" page. I know referencing to After you do that your all set to start writing your web page address down and passing it on to friends so they can check out your html masterpiean institution is a bit obscure, but I feel like I should represent my college, and hey, advice is advice - right? Remember, shhh, don’t tell them you didn’t need to know a smidgen of HTML code to create, though! Come back for updates on how to Create:
|
|
|
Design: Tutorials
|
• 
