This week we have two big goals:
First a little melodrama: These are exciting times. Not only are we going to learn how to use one of the most popular tools in the world for website creation, we're also going to put documents on the World Wide Web where everyone in the whole wide world can see them. Are you up to the challenge? Ready or not, here we go...
Before we begin, you should read these notes:
Note: This lesson gives specific examples of how to use Dreamweaver to accomplish the same goals that we accomplished by typing the code by hand. If you have access to Dreamweaver, you can follow along in Dreamweaver as you read. If you don't have access to Dreamweaver, just read carefully and take a close look at the illustrations provided. If you are going to be using the trial version of Dreamweaver for your assignment, it would probably be a good idea to not activate it yet, because you'll only have 30 days left, which won't leave you any time at the end of the semester. Some of the campus labs have Dreamweaver installed, so you may want to go there to practice the concepts in this lesson.
Note: You are students, so you qualify for the student discount rate if you decide to buy Dreamweaver. Don't pay full price. Look in the syllabus for information about places to order the software online at the student rate.
Ok. Are you ready for some Dreamweaver action? Great. Let's get started. If you are on a Windows computer, Dreamweaver will ask you if you want to run in the Designer Mode or the Coder mode when you start the program for the first time. Macintosh users don't get to make a choice, for some reason. Dreamweaver just assumes that Mac users want to work in Designer mode. Most of you will want to work in the Designer mode. Coder mode is mostly for people who like coding HTML by hand. If you fall into that category, then choose Coder mode. Otherwise choose Designer mode. You can change the mode later by going to Window > Workspace layout.
Once you've chosen which mode to work in, you'll see a "start page" that I usually just ignore, but apparently some people like it or else they wouldn't put it in the program. If you want to turn it off, just click in the bottom left of the start page. The following screenshot shows what Dreamweaver looks like when you first start it.
Note: Most of the screenshots used in this tutorial show the Macintosh version. The Windows version works in the same way, even though it looks slightly different.
Now we're going to get Dreamweaver set up to create your web site. To do this, go to the "Files" panel on the right side of the screen and select "Manage sites..." from the drop-down list. You can also go to the main Dreamweaver menu and select Site > Manage Sites... Once you do this, you should see a dialogue box pop up. Click on "New" and select "Site."
http://portfolios.gmu.edu/youraccount/ in
the box asking for the HTTP address of your site (but put your
account name in the part that says "youraccount"). For
example, if your account is "jsmith", you would put "jsmith"
there.
Set up FTP: On the next screen, select "FTP" from the drop-down list. FTP stands for File Transfer Protocol.
Fill in the information as shown and explained below.
portfolios.gmu.edu.
You should leave the next line blank. 
If your connection fails here, you've got to fix it somehow. Read through the instructions again carefully and see if you did something wrong. If you did everything correctly, you may have to contact the server administrator (I am the server administrator for the Portfolios accounts.
Assuming that the test was successful, click on the "Next" button. You do not need to enable the "check in/check out" feature for your web site. If this were a larger site, with more than one person working on it, it would be a good idea to enable this feature, but since you're the only one editing your web site, you do not need this enabled.
On the next screen you should see a summary of your site setup. Before closing this window, let's change one more setting. To do this, we have to select the advanced menu (on the top of the dialogue box). Within that menu, select "Local Info" on the left hand list.
It's a good idea to set up a default images folder, so go ahead and do that. The most common way of doing this is to create a folder called "images" or "graphics." In my case, I like to create a folder called "media" and put a folder inside that one called "images." I do this so that I can create other folders within the "media" folder called "videos" or "audio." I like to keep all of my media together within the same folder, and then organized in subfolders within that one. You don't have to do this, but it's one option that you might consider.
It's probably a good idea to use case-sensitive link checking. Unix servers
have case-sensitive file names, so index.html and Index.html are considered two different files. When you enable case-sensitive
link checking, Dreamweaver can keep track of differences like these.
Note: As a general rule, it's usually best to keep all of your names in lower-case letters.
Once you've done all of that, you're ready to go. There are other features and preferences that you can set, but most of them don't apply to what we're doing for this class.
We've made a lot of progress, but we're not quite ready to create our first HTML file in Dreamweaver. Almost, but not quite. First we have to set the preferences to that they match the type of files that we're going to create in this class.
Go to Edit > Preferences (in Windows) or Dreamweaver > Preferences (in
Mac). In the "Category" list of options, choose "General," if
it's not already selected. Make sure that the option to "Use <strong> and <em> in
place of <b> and <i> is selected. All the other options are probably fine the way they are.
Now select the "Accessibility" category. Make sure that all of the options here are checked. This will cause Dreamweaver to prompt you to include accessibility features for objects as you insert them into the web page.
Note: There are some additional accessibility features in the Windows version. These are mainly for use by people with disabilities who use screen readers. If you're not going to use Dreamweaver with a screen reader, don't worry about these settings.
Now select the "New Document" category. Change the "Default Document Type (DTD)" to XHTML 1.0 Strict." All of the documents we create for this class will comply with the XHTML 1.0 Strict specification.
Now select "Preview in Browser" from the list of categories on the left. You should see a list of the browsers installed on your computer. You can assign one of the browsers to be your "Primary browser" to preview your website before actually sending it to the web server. You can also set a "Secondary browser" to do the same thing. Later on you'll be able to use a keyboard shortcut to activate the preview feature. The keyboard shortcut for activating this feature is shown in the dialogue box (the keyboard shortcuts are different for Windows and Mac computers). If you don't see any browsers listed, or if you don't see all of your browsers listed, you can add browsers by clicking on the plus symbol.
The last preference we're going to set is the Validator preference. Set it to check for XHTML 1.0 Strict compliance.
You can also change other settings in Dreamweaver, though most of the others will be merely a matter of personal preference.
Now that we've set up our site and set our preferences, we can create our first web page in Dreamweaver. Excited? Good. Go to File > New. You will see a dialogue box pop up with a lot of options. If you've set your preferences as explained above, you shouldn't have to change anything. We're going to create a "Basic page" of "HTML." Make sure that the Document Type (DTD) is set to XHTML 1.0 Strict. If the dialogue box doesn't contain these options, it might mean that you're in the "Templates" tab at the top of the box. Make sure the "General" tab is selected. Click "Create."
Your screen should now look something like this (this time I'm using a Windows screen shot taken from the Dreamweaver help files):
Just for the fun of it, type something in the Document window, such as "Hello
World!" Save the document (File > Save) as "index.html" and
put the file on the web by clicking on the arrow pointing up in the top of the "Files" panel.
If you've set up your site correctly, it is now on the web. I'm sure you'd
like to see it, so go to your website and check it out. Go to http://portfolios.gmu.edu/youraccount/ (remembering
to put your own account name in the place of "youraccount). If you see
your "Hello World" message,
then you've succeeded, and you can skip to Part 2, which gets into
the details of using Dreamweaver. If you see something else then, well, you've
failed. But there are ways of fixing failures.
If you don't have any errors at this point, you can go on to part 2 of this topic:
Topic 4, Part 2: Creating Content in Dreamweaver
The most common error is "File not Found" (error 404).
This error could occur for a number of reasons. First of all, if you didn't
name your file "index.html" that's probably the problem.
Go back and rename your file to fix this. Or, if you typed the full address,
including the file name, it should look like this:
http://portfolios.gmu.edu/youraccount/index.html
Make sure that you spelled everything correctly, and that you didn't leave
of a letter somewhere. (Again, replace "youraccount" with your account's
name.) You could also create a file with a different name, for example test.html,
and then type in the full address of the file like this:
http://portfolios.gmu.edu/youraccount/test.html
Another possible source of a "File not found" error is that the file was never uploaded at all. If the upload failed in Dreamweaver, then it will not be on the internet. Your site has to be set up properly in Dreamweaver and your FTP connection has to be working properly for this to work. For FTP problems, you probably need to contact the server administrator. I am the server administrator for the Portfolios accounts.
If you're using a different account on a different server, you'll need to contact that server's administrator.
If you have other errors or problems with the setup procedure, contact the server administrator.