Foreign Language Website Shells Outline
|
|  Yüklə 89 Kb.
|
| Foreign Language Website Shells
Outline
I. Introduction So you're ready to begin creating and maintaining a website for your foreign language course. While at first this may seem to be a daunting and difficult task, it really isn't. Sit back, take a deep breath, and get ready to create a simple website for a course of your choosing. These shells, or templates, make it fast and easy to create a website, and even easier and faster to maintain it and add content. First thing first, however, we have to make sure you're ready and have the right software to get this going. II. Requirements To fully make use of these shells, it is recommended that you have a copy of Macromedia Flash 4. Flash 4 is a web-development tool that provides users with the ability to create multimedia rich content without extremely large file sizes. The downside is the price, about $300 for normal users. But there is an exception! Being that you probably are affiliated with a school, you can buy the education version for only $150! Believe me, once you own Flash 4, you won't only be using it for this project, but many others to come. NOTE: If you do not have Flash and cannot or do not want to purchase it, it is possible to use these shells as strictly static html. Read in the important tips section for how to do this. Also recommended is some sort of HTML editor such as Macromedia Dreamweaver 2, Claris Homepage 3, Netscape Composer, or Adobe GoLive. If you are familiar with HTML then you can use whatever html code editor you're used to, but if you've never done this before you might want to go with one of these "what-you-see-is-what-you-get" web authoring programs. To use these shells, it is expected that you have some kind of idea on how to use these programs, at least basically how to enter text and pictures. Ok, now that we know what you need, lets look at some structure aspects. III. Getting familiar with the file organization You may not already know this, but a website is a series of html pages, images, Flash movies, etc., all put into one. The way that these files are organized is really important. But worry not, for in these shells all the organization is done for you. First things first, copy the Spanish, French, or German folder onto your computer. This folder is now your website- fully created, just in need of some editing and personal touches. You may rename this folder to whatever you like, but I recommend something like "201" or "312," corresponding to the course number you are teaching. This is probably a good time to bring up a really good idea. Whenever naming a file, use all lowercase, do not exceed 8 characters, DO NOT PUT SPACES IN THE FILE NAME, and always include a 3 character extension after a decimal point. Here are some examples. This would be a good file name: home.htm This would be a bad file name: that place that I went.html Got it? Good. Ok, on to the organization. You'll notice that inside your newly named folder you have three things- two folders and a file called home.htm. From now on, DO NOT CHANGE FILENAMES. Since the site is already organized for you, you can't change filenames without affecting the structure and flow of the site. This file, home.htm, is the main page of the site, the enter page. This is the page that you'll have people go to first when they visit your site. The two folders are html and menus. As a rule, you will only edit the files inside of the menus folder when first setting up your site. After that, they need not be tampered with. The files inside of the html folder are the most important for you. Inside this folder you'll find several new folders and several files. The files are individual components of your site- including your syllabus (syll.htm), your information about conferencing (conf.htm), useful links (link.htm), your introduction page (intro.htm), and your resources page (reso.htm). These are the pages you will edit when you need to- adding homework to your syllabus or new resources to the resources page. The new folders inside of the html folder are your resource folders. There are 6 folders, named unit1 through unit6. It is important to note that although they are called units, they do not necessarily have to be units, they could be chapters, sections of your course, whatever. Just don't change the filenames. Inside each of these folders is 10 resource pages and a main unit resource page. The main unit resource page links off to each of the 10 resource pages. You'll see this in person next. Ok, so now that we've looked at the contents of the folders, let's look at what the website LOOKS like right now. Start up your web browser (Netscape or IE), and open up the home.htm file located in your newly named folder. You'll notice that there are two links, one to a page with Flash 4 and one to a page without. Make sure you have the Flash 4 plug-in or Shockwave 7 plug-in installed in your browser (if not, click the get shockwave button to download it), and click the "Enter with Flash" link. A page will load that is green on the top and left side with a large blank white screen on the right. This first white screen is your introduction page (intro.htm from the html folder). Click the buttons on the left to navigate your empty site. Notice that when you click resources, a page comes up (reso.htm) that has links so several pages. These links all link off to the main unit resource page in each of the unit folders. If you click one of these, another page comes up with links, these links going to the individual resource pages located in each unit folder. Well, that about does it for organization. Feel free to navigate the site some more, getting familiar with how it feels and how to get to where you want to go. Now it's time to start customizing your page to your class. You ready? IV. Intro page changes It is best to start off easy. Remember that first page you saw when you opened the site up in your browser? Let's edit that. Open up your web-authoring tool (Dreamweaver, Homepage, Composer). Now open the home.htm file in this program. Change "Spanish 000" (or French or German depending which one you picked) to say what course the site is for. For instance, if you are teaching Spanish 404, change the title to "Spanish 404." Next change "Teacher's name" to your name. That is it for this page unless you have a fun image to include or something. Customize as much as you want, but realize that things like text color should not be changed unless you want to risk the aesthetic value of the site. Also, do not change where the links point to. You can change what they say, but DO NOT CHANGE WHERE THEY POINT TO. Ok, on to some more difficult stuff. V. Changing the menus This section consists of two parts: changing the flash menus and changing the static html menus. The flash is the more difficult part (unless you've already used flash), so we'll start with that. NOTE: If you are making your site strictly static html, skip this part about flash and move on to changing the html menus. If you are using both flash and html, you MUST do both parts of this section. A. Changing the Flash menus This may seem difficult, but it is actually really simple. Start up the Flash program and then open a file in the menus folder of your site called menu.fla. If you've never used Flash, simply follow my instructions to the letter and you'll be fine. You now have the file open. It looks just like the menu on the left side of the page we looked at earlier (because it is!). Toward the upper right corner of the program, there are two buttons. One looks like a movie slate and the one to its right looks like a red circle on top of a yellow square on top of a green triangle. (Notice when you mouse-over this button a little text box comes up that says, "Edit symbols"). Click the circle/square/triangle button and a list of symbols comes down. Choose "title with course #" from the list. Now you will see "Spanish 000" on a green background. Double click these words and then change the text to reflect what you changed on the intro page (for instance, change "Spanish 000" to "Spanish 404"). Also, if you don’t agree with the word chosen for any of the menu buttons (for instance if you don't like the word "temario" for "syllabus"), you can change what any of them say by clicking the circle/square/triangle button, choosing the offending title, and changing it as above. When you are satisfied with what the menu says, click the "file" menu in the upper left-hand corner of the program and choose "Export movie…" from the menu. Type "menu.swf" in the file name box and click save. When it asks if you want to overwrite the old file, click yes. On the next little window that comes up, leave everything as it is and click ok. Now quit the program. When it asks if you want to save changes, click yes. You are done editing the flash. Other than these steps, DO NOT do anything else to the flash file unless you are familiar with Flash 4. B. Changing the html menus Once again, open up your web-authoring program (Dreamweaver, Composer, Homepage). This time, open a file in the menus folder of your site called lomenu.htm. This one is easy. Select "Spanish 000" and change it to reflect the earlier changes (for instance, "Spanish 000" to "Spanish 404"). Also, if you don’t agree with the word chosen for any of the menu links (for instance if you don't like the word "temario" for "syllabus"), you can change what any of them say by selecting the word and typing in a replacement. DO NOT CHANGE WHAT THE LINK POINTS TO, ONLYT CHANGE WHAT IT SAYS. Save all changes and quit the program. You are done editing the html menu. Now, we have changed the enter page and menus to be personalized for you. It is a good idea now to check our work. Start your browser again (Netscape or IE) and once again open up your home.htm file. It should now say your course number and your name. Click on "enter with flash." The menus should reflect the changes you made. Click the back button of your browser until you are at the enter page again. Now click the "enter without flash" link. The static html menu should reflect the changes you made. If either of these do not show the changes you made, first click the reload button on your browser. If that doesn't work, repeat the above steps to find any errors you may have made in the process. From now on, no changes should be made to the files inside the menus folder. It is completed. VI. Editing main HTML pages Ok, you've done the cosmetic changes to the site. Now we go through the meat of the site- the stuff you may change every day, every week, or every month. These are the pages located in the html folder of your site. You edit them in a web-authoring program (Dreamweaver, Homepage, Composer) just as we did before, only now you have full reign as to what you put in them. Their content is up to you. Here is a list of file names, corresponding page names, and suggestions for what to do with them. Conferencing page (conf.htm) Here you will put links and information pertaining to any conferencing system you may use. These could be chat rooms, a bulletin board such as WebBoard, or merely information about conversation hours in your target language. It is up to you. This part of the site was added because language courses often deal with conferencing/ conversation issues. Introduction page (intro.htm) This is the page they first see after entering from the enter page. You may want to include some sort of introduction, what the students can expect, the reason for the site, the reason for the class, the topic for the class, etc. Once again, it's up to you. Links page (link.htm) Here is where you'll put any links that are relevant to the class. Perhaps links to pages in your target language, links to your school's homepage, and any other link you feel is necessary. Again, it's up to you (feel a pattern forming?). Syllabus page (syll.htm) Here is where you can put your online syllabus for your class. I feel that this is pretty self-explanatory. Resources page (reso.htm) This is the somewhat tricky page. Not really tricky, but weird looking at first. The point of this page is to link off to the separate parts of your course (units, chapters, sections), to pages you put any instructions or exercises for your students to do for each unit. The first page is merely links to the separate units. These separate units are represented as main html pages in each unit folder. This page can be customized and edited, but DO NOT change what the links point to. What they say can be changed, but DO NOT change what they point to. Main unit resources pages (1main.htm, 2main.htm, 3main.htm, etc.) These pages are similar to the main resource page in that they simply link off to the individual resource pages for their respective unit. For instance 1main.htm links off to unit1_01.htm, unit1_02.htm, etc. Same thing here, you can change what the links say, but DO NOT change what they point to. Individual resource pages (unit1_01.htm, unit2_01.htm, etc) These pages are where you put the meat of your resources. Here you'll put exercises you created, assignments, readings for the students, etc. What you put on each page is up to you. One suggestion: Don't use these pages as a daily thing, use them as a once in a while thing. For instance, don't say Thursday do what' on unit 1 resource 1 and Friday do what's on unit 1 resource 2, but maybe this week do what's on unit one resource 1 and next week do what's on unit 1 resource 2. This is obviously not a strict rule, I just wanted to demonstrate that it would be unwise to run out of resource pages. That's about it for the editing of files in the html folder. Remember, you can add any pictures, text, links, etc., that you want, just don't change what the links already present point to. VII. Important tips Ok, here is a list of things that it would be a good idea to keep in mind when working on your site.
VIII. Conclusion Well, I hope that these shells/templates are useful to you and your school. If used correctly, they can be a very fast and efficient way of creating and maintaining an easy website for your language courses. The fact that they are templates means that you can use them over and again. Good luck with your sites, and have fun! IX. Credits The shells/templates and all documentation produced by Steve Leith (sleith@ups.edu), a student at the University of Puget Sound. They were created using Macromedia Flash 4, Macromedia Dreamweaver 2, Microsoft Word, and Netscape Communicator in the Collins Multimedia Lab at the University of Puget Sound. Questions and comments should be directed to the Collins Multimedia Lab via email: mmlab@ups.edu Copyright 1999 University of Puget Sound |