Schedule

 

Group 1: January 28: session 1 February 11: session 2 February 25: session 3 March 18: open lab & office hours* March 25: open lab & office hours April 1: open lab & office hours April 8: open lab & office hours April 15: web site touch up April 22: web site touch up  April 29: web site touch up & presentations

Group 2: February 4: session 1 February 19 (Tuesday): session 2 March 4: session 3 March 18: open lab & office hours March 25: open lab & office hours April 1: open lab & office hours April 8: open lab & office hours April 15: web site touch up April 22: web site touch up April 29: web site touch up & presentations

Materials required

You will need to bring a zip 100 disk (PC formatted) to class so that you can save the work you are doing. You can also bring a floppy disk (PC formatted). However, as you start adding graphics to your page, your web site 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

Web site tutorial:

Session 1: 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 201 and Dual License students from last year:   http://www.unm.edu/~navahawk/ http://www.unm.edu/~pigt/ http://www.unm.edu/~alcross/ http://www.unm.edu/~jewl/ http://www.unm.edu/~vigarcia/ http://www.unm.edu/~sluc/ http://www.unm.edu/~dooah/ http://www.unm.edu/~vmontez/ http://www.unm.edu/~rmperea/ http://www.unm.edu/~karasie/ http://www.unm.edu/~etodd/ http://www.unm.edu/~benvigil/ http://www.unm.edu/~kwarren/ http://www.unm.edu/~pathos79/ http://www.unm.edu/~lwyer/ http://www.unm.edu/~jobrito http://www.unm.edu/~nicole/ http://www.unm.edu/~rastrunk/ http://www.unm.edu/~cmtc/ http://www.unm.edu/~ven1277/ http://www.unm.edu/~rickrom/ http://www.unm.edu/~jesspuma/ http://www.unm.edu/~dtbenn/ http://www.unm.edu/~cosier/  http://www.unm.edu/~hdbauer/ http://www.unm.edu/~sylveste/ http://www.unm.edu/~joylo/ http://www.isavantdesign.com/ashley/ .
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.). 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 sa type style like Times and 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: Note: When you work on your web pages, you will be switching back and forth between Netscape Navigator and Netscape Composer. Netscape Navigator is 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 icon 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. 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.
10.	When you think you're ready to put your page on the web, publish it. (don't worry if it's not perfect -- you can re-publish as many times as you want). .

.return to top

.

Session 2: '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.  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." After you have saved this new page, change the text a little so you know it is a different page from your home page and give it a new title (go to 'format', then 'page color and properties', then 'general.' Type a page title in the title box). .
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 icons on the bottom right 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 up at the tool bar at the top of the page just like this one:  and find the yellow ship's steering wheel that says "preview". Click on that to see how your page will look on the internet. Remember that if you want to make changes, you have to switch back to Composer to keep working -- Navigator just lets to look at pages, not make any changes to them. .
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: 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 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 The trick with this is:  1) to remember to type in your complete web site address (http://www.unm.edu/~XXXX) and file name WITHOUT ANY SPACES and  2) to include the correct file name of the page you want to link to.  Remember that you should be saving 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. One last thing -- remember not to include spaces in your file names. it will become a problem when you try to include links to those pages. . 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 text, active link text, and followed link text. Each one can be a different color, which you chose through "page colors and properties" in the pull-down "format" menu. Link text is 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. 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.  Whereever 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. .
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 the four open lab dates, when we don't have seminar. Just give me a call (277-1406) or e-mail me (devalenz@unm.edu) ahead of time to set up an appointment. I can meet you either in the computer lab or in my office (EOB 206). March 18: open lab & office hours March 25: open lab & office hours April 1: open lab & office hours April 8: open lab & office hours

return to top

Helpful links

This link takes you to the Netscape web site, with information about Netscape Composer and links to more helpful information.

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

There is also a great "Six-Step Netscape Composer Tutorial" from Montana State University - Billings.

Another tutorial, this one on creating tables, is available from Dr. Thomas E. Hicks at Trinity University.

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

Last updated: February 25, 2002