Web site tutorial

As part of the requirements for SPC ED 303, students will design and construct a web-based professional portfolio. We will meet five times over the course of the semester, at our usual class time, in SSC B-41. We will be using the infomration on this page as a guide to learning to use Netscape Composer (version 4.79), which is the program you will use to construct your web site.

• Materials required

• Session 1 (February 18, 2003): Planning your "look" and basic techniques -- saving, publishing, fonts & colors
• Session 2  (March 3, 2003): Formatting -- alignment, indentation, bullets, tables, and previewing

• Session 3 (March 31, 2003): More advanced formatting -- inserting links, targets, & images

• Helpful links

You can also use a floppy disk (PC formatted). However, as you start adding graphics to your page, your web site files will soon get larger than you can store on a floppy disk.
.
You may also want to bring with you any floppy disks where you have stored work that you want to add to your portfolio. Other materials that you might want to bring to class could include photos that you want to scan and add to your page.
.

Return to top

Session 1 (February 18, 2003): Planning your "look" and basic techniques -- saving, publishing, fonts & colors
.

1.	Brainstorm with a partner all of the things or types of things you think you might eventually like to have on your web site (resume, pictures, lesson plans, etc.).
2.	Organize these items into somewhere between five and eight categories. .
3.	Look at a variety of web sites that were NOT professionally developed. Figure out what you do and don't like about each one. Try looking at the student CEC sites - http://www.cec.sped.org/student/studchap.html for ideas. Also, look at the web sites of some of the Dual License students from past years:   http://www.unm.edu/~janjean http://www.unm.edu/~crisr http://www.unm.edu/~mjsalas http://www.unm.edu/~jewl/ http://www.unm.edu/~peachthy http://www.unm.edu/~nmorgan http://www.unm.edu/~vigarcia/ http://www.unm.edu/~sluc/ http://www.unm.edu/~karasie/ http://www.unm.edu/~mrichts http://www.unm.edu/~bubblez http://www.unm.edu/~chump2 http://www.unm.edu/~jschmidt http://www.unm.edu/~mcraig http://www.unm.edu/~melanie8 http://www.unm.edu/~babymine http://www.unm.edu/~smug http://www.unm.edu/~bricheer http://www.unm.edu/~suzyp http://www.unm.edu/~suzyp http://www.unm.edu/~lwyer/ http://www.unm.edu/~hhatfiel http://www.unm.edu/~jobrito http://www.unm.edu/~claudine http://www.unm.edu/~jesspuma/ http://www.unm.edu/~dromero1 http://www.unm.edu/~sylveste/ http://www.unm.edu/~melgovea http://www.unm.edu/~taib http://www.unm.edu/~tmaes http://www.unm.edu/~umc99 http://www.unm.edu/~gerrijoj http://www.unm.edu/~diegotru http://www.unm.edu/~gerrijoj http://www.unm.edu/~amykw http://www.unm.edu/~brogers1 http://www.unm.edu/~babette http://www.unm.edu/~jrogers1 .
4.	Decide what kind of look you want for your web site (fun, serious, elegant, etc.), based on what you saw in step 3. Think about how you will convey that look (font, colors, graphics, etc.). Important note about fonts: Unless the person viewing your web site has exactly the same type style that you chose, their computer will translate it to a "default" font, which is often Times New Roman. So, unless you are okay with your type style changing to something more basic on most older computers, you might want to stick with a basic type style like Times or Arial.
5.	Decide on something that will serve as a repeating element through all of your web pages on your web site. This could include a logo, a color scheme, "wallpaper," a particular font, the layout, etc. If you don't do this, then your pages won't look like they all belong within the same web site. .
6.	Figure out how you want your links to other pages (or categories of pages) within your web site displayed (on the top, on the side, at the bottom...) .
7.	Set up a UNM CIRT account, if you don't already have one. Link to UNM's CIRT's page on computer accounts and passwords. Find the link to "getting a CIRT computer account" and click on it. Follow the directions to set up your computer account. Ask for help if you get stuck. .
8.	Activate your web space. .
9.	Begin to make your home page in Netscape Composer:   FYI: When you work on your web pages, you will be switching back and forth between Netscape Navigator and Netscape Composer. Netscape Navigatoris the program that lets you surf the internet and look at any web site that is published to the world wide web (including your own). The icon for Navigator is is a yellow ship's sterring wheel. Netscape Composer is the program that you will be using to compose (or develop) your web pages. The icon for that is a pen. Type your name: Open Netscape Composer and begin typing. Change your type style: Highlight what you wrote and change the font by clicking on the pull down menu on the tool bar at the top of your screen that looks like this (where it says "variable width"): . . Change the color and size of your font: Hightlight the text you want to change and click on the font color and font size icons on that same tool bar. Change the color of your background: Move your cursor to 'format' (at the very top of your screen), click on it, then click on 'page colors and properties', then on 'colors and background' in the box that pops up. Play around with the color combinations. . Note: White ink doesn't show up on white paper! Your background color (or background graphic) does not print. So, if you use very light (or white) text color, because you have a dark background, your text will not be very visible when you print. This can be a problem if you want people to be able to print, for example, your resume.  . Give your page a "title": Go to 'format', then 'page colors and properties', then 'general.' Type in a page title in the title box. Note:  The page title is NOT the same as the file name, it can be as long as you want and should describe what your page is about. A good title for your home page is "XX's home page." . Save your home page on a disk, either a zip or floppy disk: Go to 'file', then 'save as', then type in no more than 8 characters -- with no periods or spaces -- no capital letters -- and then hit "save." The file name for your home page (the one you want to come up first when someone goes to your web site) MUST be index.html. . Note: Remember that file names cannot be more than 8 characters -- this will you problems down the road if your file names are too long! .
10.	When you think you're ready to put your page on the web, publish it using Secure File Transfer. (don't worry if it's not perfect -- you can re-publish as many times as you want). .

 

Return to top

Session 2 (March 3, 2003): 'save as', alignment, indentation, bullets, tables,  previewing, and adding text from a Word document
.

1.	Tables: Open up your home page (the one you saved as "index.html"). Make a table (click on "insert", then "table") with between 5 and 8 cells (rows or columns). This will be your navigation bar that you will include on all of your pages. .
2.	Make a new page that has the same format as your old one: First, save any changes you made to your home page (by clicking on the 'save' icon). Now, using the "save as" command, you will make a new page that looks just like your home page.  First, go to 'file', then 'save as', then type in your new file name -- and then hit "save." Remember! Your file names should have no more than 8 characters -- with no periods or spaces -- no capital letters! After you have saved this new page, change the text a little so you know it is a different page from your home page.  Then, give it a new title (go to 'format', then 'page color and properties', then 'general,' then type a page title in the title box). FRemember to save your changes periodically, by clicking on the save icon on the top tool bar (it looks like a little floppy disk). .
3.	Formatting: Write a little something on this new page. Then, play around with:  the alignment (left aligned, centered, or right aligned),  the indentation (doesn't it look better with a page margin?), and bullets All three of these formatting elements can be changed using the button on the bottom right half of the tool bar at the top of your screen (the one that looks like this): Try something fancy with your font, by making it blink on and off. Who can figure out how to do this? (hint, look under 'Format...) .
4.	Preview the changes you have made. First, save the file you are working on. Then, look at the tool bar at the top of the page that is just like this one:  Find the yellow ship's steering wheel that says "preview". Click on that icon to see how your page will look on the internet (your page will open up in a new window in Navigator). Remember that you have to switch back to Composer to keep working -- Navigator just lets to look at pages, not make any changes to them. Note: You can always tell whether you are in Navigator or Composer by looking up at the top left of the page that you are on. Navigator will have the ship's wheel icon and Composer will have the pen icon.
5.	Cut and paste text from a Word file: For example, you may want to add a really cool lesson plan you did to one of your pages. So, save a page with a file name that you will remember (i.e. lesson1.html). Change the title of the page (i.e. my really cool science lesson). Make sure you have your navigation bar on there somewhere, so people can get back to other parts of your web site. Then, open Microsoft Word and open the lesson plan file that you brought with you. Highlight the text you want to copy, copy it, then click onto the page in Composer you are working on, and "paste". It's that easy. . Now play around and make the text pretty. Don't forget to include a margin on the left hand side of your page  -- it makes pages look much nicer. You do that by putting your cursor somewhere in the paragraph that you want to move over and then click on the icon at the top of the page that is the second from the right, just like on the bar below. It is the one with the arrow pointing to the right. The icon with the left arrow will move your text back to the left. Each time you click one of these icons, it will move your text further and further to the right or to the left. The last button on the right is your alignment icon. Click on it to make your text line up on the left, on the right, or to center it.

Return to top

Session 3 (March 31, 2003): More advanced formatting -- inserting links (e-mail, other web sites, other pages in your own web site, other places on the same page), targets, changing the color of your linked text, & inserting images
.

1.	Links:There are several kinds of links we can add to a web page. You can link a section of text to your e-mail address, so that when someone clicks on that text, they can send you an e-mail. You can also have a link to a different page within your web site. You can link to a different place on the page you are on, so that, for example, you can jump back up to the top of the page from the very bottom. Or, you can include a link to a completely different web site, such as if you wanted to include some internet resources for people to be able to look at. .
2.	E-mail Link: Somewhere on your page(s), you might want to include some text that you want people to be able to click on to send you an e-mail. You could simply include your e-mail address on your home page, you could write something like "click here to contact me", "click here to send me an e-mail", or write whatever you think will make it clear that you have set up a link to your e-mail.  . Once you have decided how you want your text to say, type that in, and then highlight the text. Move your cursor up to the top of the screen to "insert." Select "link" from the pull down menu, and type the following, WITH ABSOLUTELY NO SPACES, in the white box: mailto:youre-mailaddress You can use any e-m mail address you want (i.e. your hotmail or yahoo address). You do NOT have to use your UNM e-mail address, unless that's the one you usually use. . For example,  my e-mail address is devalenz@unm.edu, so I would type in the box: mailto:devalenz@unm.edu Don't forget -- NO SPACES!  Click 'okay'. Save the changes you have made, and then, just to make sure it's working, click on "preview" to see if a box pops up to send an e-mail. If not, go back to Composer, highlight your linked text again, and make sure that you didn't include any spaces in your "mailto:e-mail" line. .
3.	Linking to other web sites: Sometimes you might want to include a link to another web site. For example, you might want to include a list of really cool, teacher resource web sites. To do this:  Type the names (with maybe a short description) of the web sites you want to provide links to on one of your web pages. Highlight the name of the web site you want to link to.  Then, move your cursor up to the top of the screen to "insert."  Select "link" from the pull down menu.  Type in the complete web site address of the site you want to link to. For example, if you wanted to link to the CEC web site, you would type in: http://www.cec.sped.org/
4.	Linking to other pages within your own web site: If you have more than one page on your web site (and you will), you will need a way to "link" from one to another. During the first session, you decided what categories you would include on your navigation bar. During the second, you made a table with those categories on them and made additional pages for each of those categories. Now, what you need to do is to link from one web page to the others. Highlight the name of one of the categories from your table (for example, "resume").  Then, just like before, go to "insert" and "link."  This time, you need to include your complete web site address, including the file name of the page you want to link to.    For example, if I wanted to link to my resume page (file name: resume.html), I would type: . http://www.unm.edu/~devalenz/resume.html .. If I wanted to link to my lesson plan page, I would type: . http://www.unm.edu/~devalenz/lessons.html Remember! Save your pages with files names of no more that 8 characters (letters and/or numbers). Also, do not to name your files with capital letters, because you will forget whether you used a capital or not. The computer thinks that the file resume.html is a different one from Resume.html. Also, do not include spaces in your file names. Any of these things will become a problem when you try to link to pages that are not named correctly. . One last trick with this. When you want to link to a file that you have on your hard drive or on your disk, you can use the "choose file" button to browse the files you already have. That helps avoid typos. But if you do that, make sure that you remember to type in your COMPLETE web site address just before the file name (i.e. "http://www.unm.edu/~devalenz/"). .
5.	Links on the same page: If you have a page with a lot of text, like a resume, you may want to include a link to "jump" to different places on the page. The most common thing is to put a link at the bottom of the page to jump up to the top of the page. There are two steps in doing this.  . First, you have to add a target at the point that you want to jump to. So if you want to put a link somewhere to the top of the page, you have to first insert a target at the top of the page. Move your cursor to the spot on your page where you want to add your target (don't highlight any text, just put your cursor exactly where you want it). Then, go up to "insert", select "target" from the pull down menu, and type in the name of the target, in this case, "top." . Then, go down to where you want to put your link (maybe the bottom of the page) and type in something like "click here to return to the top", or even, just "top." Highlight your chosen text, go up to "insert" and "link" but this time, chose the name of your target from the list. (If "top", or whatever you typed in in the previous step, doesn't show up, go back and repeat the previous step.) Once you have clicked on the name of your target, you can click "okay." Anytime you insert a new link, it's a good idea to save your page and click on "preview" to check if your link works. .
6.	Changing the color of your linked text: There are three kinds of linked text: Link textis text that has been linked to something (another spot on the page, another page, or to e-mail), until it becomes either of the two below. . Active link text is when someone clicks on your linked text. If you look at other web sites, you can see that usually when you click on a link it turns a bright color, letting you see exactly which link you chose. . Followed link text is a link that has already been followed. Usually people set it up so that once someone has clicked on a link it changes color, letting them know they've tried that one already. Each one of these can be a different color, which you chose through "page colors and properties" in the pull-down "format" menu. Whatever colors you chose, they will be the same for all of your links on that page. Even if you try to change the text color, the colors that you chose for your links will override that. So, you can't have chosen pink for your link text in your navigation bar and have it be blue further down on the page. That can be a problem if you have a dark background for your page and a light color in your navigation table. .
7.	Inserting images: This is pretty easy.  Wherever you want to insert a picture or graphic on your page, put your cursor there.  Then, go up to "insert", then "image."  Then, if you have already saved an image onto your disk, click on "chose file."  Select (click on) the file from your disk that you want, and click okay.  Then, if you want this image as your "wall paper", select "use as background." If not, decide where you want the image in relation to your text, decide whether you want to make it a different size, then click "okay."  If you don't like it, click on the image and hit the "delete" key on your keyboard.  To find images, search the many web sites with free graphics on the internet. Do not copy an image from someone else's web site without their permission. Some of the free web sites allow you to use their images, as long as you put their logo on your page and link back to them. Most of the web sites with free graphics include instructions on how to save images to your own disk. There is a link to one such web site at the bottom of this page. Remember! When you are saving graphics from a web site, your file name must be no more than 8 letters and/or numbers. If your file name is too long, your graphics will not show up on many web browsers. .
8.	Tricks for tables: one "rule" about Netscape Composer is that there has to be something in each cell of a table. If not, that cell disappears. So, a trick to "fix" a blank cell in a table is to include a tiny period. If you want the period to be invisible, change the color to match your background. If you have a multicolored background, pick a light color (or even white) and then change the font size to the smallest possible (i.e. 8). I sometimes even change the type style to "variable width", which seems to be somewhat smaller than other typestyles, such as "comic."  . This trick also works if you want to put spaces somewhere on your page and they keep disappearing on you after you publish the page.  .
9.	Have fun! Be creative and let me know how I can help you! Remember I am available to help during my drop-in office hours (Tuesdays, 4-3:30 p.m.). If that's not a good time for you, I can make an appointment on Monday or Thursday evenings at 7:15. Just give me a call (277-1406) or e-mail me (devalenz@unm.edu) ahead of time to set up an appointment.  We will also work on your web-based portfolios on April 14th and April 28th during class time.

Return to top

Helpful Links

Patricia Pecoy at Furman University has a free tutorial for many of the same functions that we will be covering in our course.

Here is a tutorial on very basic aspects of using Composer (such as font size, bold, italisc, etc.) with VERY clear, step-by-step directions from the Acadia Institute for Teaching and Technology

This web site has lots of free backgrounds, very easy to surf.
 

Home Courses Handouts Vision Vita e-mail me

Return to top

Julia Scherba de Valenzuela, Ph.D.

Last updated: Februrary 12, 2004