Intro to Dreamweaver

Before you open Dreamweaver, create a folder on your desktop. Name it with your last name. You will save your web page and all associated files (jpgs, css style sheet, etc.) into this folder.

When you've finished your web page, you'll upload this folder and its contents to the JMC web server to make your web page accessible and viewable on the web.

From the Welcome screen (see above), select the "More" folder. That will take you to the "New Document" menu page, where you can explore and choose from several design options.

If the Welcome screen does not appear, go to the file menu and select "New" to bring it up.

Dreamweaver offers several options for creating a web page, from the "build it from scratch and hand code it" approach...to a variety of web page templates. I'll outline two of those options below.

Option 1 is a simpler, more automated approach. You select a ready-made "theme" or starter page and add your own content in the areas provided.

Option 2 is a more "hands-on" approach to creating a web page. You choose a basic template and build it out, adding your own content as you go. If you choose Option 2, skip the Option 1 steps below and proceed to Option 2 - Getting Started.

Option 1: Select "Page from Sample" in the far left column and Starter Page from the Sample Folder column. Then scroll through the list of sample pages in the right column to find one that you like.

Consider using a "catalog page" -- this template option offers you a preset photo-and-caption layout that you can easily use to link to your projects for this class.

When you select a starter page and click on the "create" button in the bottom right of the dialog box, you'll be asked to name and save your page. Name it "mylastname.html" (e.g., mccune.html) and save it to the "mylastname" folder you created on your computer's desktop.

(If you haven't yet created a folder for your web page, click on the "new folder" button in the bottom left of this dialog box. Set up your folder, then save your web page.)

When you click on the "save" button to save your web page, another dialog box will come up asking if you want to "copy dependent files" to your folder. You do, so click on the "copy" button.

In Dreamweaver (DW), you have three "view" options: code view, split view and design view. I recommend using the "split" view so that, as you're working, you can see the html code and what the page looks like. That will help you avoid accidentally deleting a necessary piece of html code.

Notice that the title is still listed as your theme page's default -- in this case, as "Catalog." Since you're not creating a catalog page, you'll need to change that. Simply click in the title box to change it.

Your title should help identify your web page. The title is what shows up in a browser, and it's how a page is listed if you bookmark it. So you want your title to reflect the content. For example, I titled mine "Cynthia's MCom 63 Web Page."

In the header area of your new web page, highlight "insert website name" and type in the headline you want to appear at the top of your blog. Then add a tagline below it.

Do the same where the text says "PAGE NAME HERE" -- highlight the existing text and type in a name for your page. I'd suggest something like "My Class Projects."

Notice that when you highlight any text on your web page, it is also highlighted in the "code" section of the split page view.

In the link bar under your web page's header, highlight the word "home." You're going to create a hyperlink to the class blog. Click on the "chain link" icon in DW's "insert menu bar (you may have to click on the "common" tab to get to it) to bring up the "hyperlink" dialog box shown above.

In the Text box, type in the text you want to serve as your link (e.g., "class blog"). In the Link box, type or paste the blog's url. Add a title to the Title box (the title will appear if someone hovers their cursor over this link). When you're done, click "OK."

Notice that the blog's url now appears in the code part of the split view layout page. You can also edit it there.

Click on the first photo placeholder on your web page. Note that the image is supposed to be 110 x 110 pixels. You'll need to use PhotoShop to resize a photo to this size.

Make the first photo represent your blog. Take a screenshot of some element of your blog (the title or your photo, etc.), resize it to 110 c 110 pixels, and save it for "the web and devices." Make sure you save the resulting jpg file to your "mylastname" folder (see above).

Notice the other image files already saved in your folder, including: mm_dashed_line.gif, mm_spacer.gif, mm_health_nutr.css, etc. (Note: The names will vary according to the template you've selected.) These are the image and css files that make up your web page, and Dreamweaver included them with your html page when you first named and saved your file.

Your photo is in your folder; now you need to link to the image. This time, instead of using the "chain link" tool to create a link, you're going to edit the html directly.

So, click on the photo placeholder and then look for the highlighted html code above the "split." Where it says "img src=" you're going to replace the link to the existing image, "mm_product_sm.gif", with the filename of your 110x110 image. (And, since your image is already saved in the same folder where your web page is saved, they'll be able to "find" each other.)

In the example shown above, you can see that I have replaced:
<img src="mm_product_sm.gif" alt="small product photo" width="110" height="110" border="0" /> with <img src="myblog.jpg" alt="My Blog" width="110" height="110" border="0" />.

Note that I also replaced the existing "alt" (which shows up when someone runs their cursor over the image) with "My Blog" since this is now an image from my blog.

Now that you've made some changes, save your web page! Then preview it in a browser by clicking on the "globe" icon at the top of the web page template.

Before you leave, be sure to copy your folder onto a flash drive so you don't lose your work.

In the next session, you'll add a couple more photos and links to your web page (to your InDesign pages, for example) and upload your folder to the web server.

Option 1: Click on "Blank Page" in the far left column and HTML in the "Page Type" column, then explore the page layout options in the "Layout" column. I'd recommend selecting a "liquid" layout, which means the layout will automatically adjust to git the width of the user's Web browser window.