Uploading and Editing Your Course Web Page

Transcription

1 Uploading and Editing Your Course Web Page CM210 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 desktop. 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 folder cm210. 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 window inside your Username/Sites folder that looks like this: CM210 Multimedia Storytelling I 1

2 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. Give your site the name cm210. CM210 Multimedia Storytelling I 2

3 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 complete. 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 and other college accounts. Check the Use Secure FTP (SFTP) check box. CM210 Multimedia Storytelling I 3

4 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. CM210 Multimedia Storytelling I 4

5 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. CM210 Multimedia Storytelling I 5