Uploading and Editing Your Course Web PageCM210 Multimedia Storytelling I
Fall 2008 Downloading the Web Page Template
I have created and styled a simple Web page that everyone can use as the index page of your CM210 Web site.
•In Firefox, navigate to wwwi.mcpherson.edu/~claryb/cm210/weekly.html. Scroll down
to the description of our agenda for Wednesday, Sept. 17, and click on download this zipped file. The downloaded and unzipped file, “web_boilerplate.html” will appear in the download stack in your Mac OSX 10.5 dock.
•Click and hold on “web_boilerplate.html” in the Download stack and drag the file to your
•Now create a new folder named “cm210” in the “Sites” folder that already existsyou’re
your user account. Navigate your way to your “Sites” folder. With the “Sites” folder selected, in the Finder menu choose File > New Folder.
•Rename the new folder. Click twice slowly in the new “untitled folder” and rename the
•Now drag the file “web_boilerplate.html” into the new “cm210” folder you just created.
Rename the template to “index.html” by clicking twice slowly in old file name and typing the new file name. This is your new home page!
•With the “cm210” folder still highlighted in the Finder window, create two more new
folders inside of “cm210.” Name the first folder “assets” and the second folder “images.”
•If you have successfully completed all of the steps above you should have a directory
Setting up Your Site in Dreamweaver CS3
We’ll use Dreamweaver CS3 to edit and manage your Web pages.
•Navigate to the Applications folder and locate the Adobe Dreamweaver CS3 folder.
Select the folder.
•Click and hold the Dreamweaver program file (the one with the square green icon) and
drag the program onto your dock. (Now Dreamweaver will always be accessible from your dock and you won’t have to hunt for it in the Applications folder again.)
•Open Dreamweaver by clicking the green DW icon in your dock.
•Upon first opening Dreamweaver, you may see a Welcome window. Go ahead and close
this window. I recommend setting your preferences (Dreamweaver > Preferences) to turn off automatic opening of the Welcome window.
•With Dreamweaver open and the main menu visible at the top, choose Site > New Site.
This opens a window with two tabs, “Basic” and “Advanced.” Choose “Advanced.”
•The local root folder is the “cm210” folder you just created in the “Sites” folder. Click
the folder icon to the right of the text field to browse your way to Sites/cm210.
•In the same way, browse to the Sites/cm210/images folder that you just created to set the
Default images folder.
•Switch from the Local Info category to the Remote Info category.
•Click the Access dropdown and select FTP. This opens up the remaining fields to
•Students’ FTP host is “bulldog.mcpherson.edu/~username” where “username” is the
same username you use to log in to all your McPherson College accounts.
•Your host directory is “public_html”
•Login is your college-assigned username once again.
•Password is the password you use to access your email and other college accounts.
•Check the Use Secure FTP (SFTP) check box.
•Test your remote setup by clicking the “Test” button. If all has been done correctly, you
should receive a popup message announcing your successful connection to the server. If you do not successfully connect, check your “Remote Info” setup for errors.
Editing Your Web Page in Dreamweaver
•Your File manager in Dreamweaver should now show that you are working in the cm210
site you have created.
•Double-click the “index.html” file. Dreamweaver
will open the template page that you downloaded from our course Web site.
There are at least two changes to the template you should make right away.
•Click inside the Title text area in Dreamweaver’s
main toolbar. Insert your name in place of the holder text.
•Similarly, replace the holder text for your name in the header in the document.
•Select File > Save.
You are now ready to upload your course Web site to the server.
Uploading Your Web Site to the Server
Uploading your site is easy once all the site definition settings have been accurately entered.
•In Dreamweaver’s file manager, highlight Site
cm210 at the top of your site directory.
•Click the blue-colored up arrow. Dreamweaver
will ask you if you are sure you want to upload the whole site. You can answer “Yes” because the site is small at this point and will upload almost instantaneously. Toward the end of the semester when you have several multimedia projects that
are a part of your site, you may prefer to upload only those files that have been edited so as to avoid waiting for files to upload that you have previously put on the server.
Keeping Your Site Updated
There are two keys to keeping your site updated.
1.Save all your edited multimedia projects in the “cm210” that is the local root folder for your Web site. In the case of the audio project, you will have only the single MP3 file to upload. Save this file in your “assets” folder. Audio slideshows will involve many files organized in their own folder system. You will be saving the contents of a project folder insider the “cm210” folder. I’ll give further instruction on this as you finish your first audio slideshow.
2.Link your multimedia projects to your new home page (index.html).
•If you want, change the appropriate link to a title for your multimedia project.
•Highlight the link (in the example below, “Bob Johnson: Inside an F-16”).
•Click and hold on the crosshair to the right of the Link text field in the Inspector bar at
the bottom of the open page.
•While still holding down on the mouse button, drag from the crosshair to the MP3 file
that you saved in the “assets” folder—“audio_story.mp3.”
Dreamweaver will automatically create the link from your index.html page to the audio story in the MP3 file.
IMPORTANT: Changes you make to your site are not available to Web users until you upload your site to the server. File > Save does not upload a file. You must select changed files (or the entire site) in Dreamweaver’s file manager and click the blue up arrow to put saved files on the server.