OEGR230 Web Design I
Instructor: Doug Bocaz-Larson Email: dbocaz@nmsu.edu
Phone: 290-1331 Office: 124
Office hours/Tutoring: M/W 6:45-8:15 and Tu/Th 5:30-6:45/8:00-8:15
Text: The Web Wizard’s Guide to Web Design by James G. Lengel ISBN: 0-201-74562-3
(The text for this course is a guide to help you gain more understanding of
the material. It is not essential but highly recommended if you have no experience
with web design)
Course Description:
We will learn the basics of creating a web page using various methods such as
Microsoft Word, FrontPage, Geocities Page Builder, and HTML This is a basic
introduction to web development that focuses on the design part of creating
a web site. Prerequisite: CS 110G or consent of instructor. Labs are optional,
but the intensive help sessions are highly recommended.
Instructor Availability:
My office hours are listed above, but I will be happy to work with you in a
computer lab if you arrange a time with me. Tutoring is also available. Please
call or email me. I am very quick to respond by email or by cell phone.
Evaluation:
Assignments/Homework 33.5%
Discussions 33.5%
Project (two web pages) 33.5%
Grading scale:
100-90% A
89-80% B
79-70% C
69-60% D
>59%
Deadlines:
Students must meet the deadlines in order to receive full credit for assignments,
quizzes, and projects. You will be given until the Monday after the assignment
deadline to turn in the assignments for full credit. After that point, 10% will
be taken off for each week the assignment is late up to 40%. The final deadline
is not flexible. No late assignments will be taken after the final deadline
for the course.
Final deadline for all 1st 4 week assignments – April 13
Final deadline for all 2nd 4 week assignments – May 4
Failure to meet the above deadlines may result in your being dropped from the
course by the first 4 weeks or a failing grade on the 2nd 4 week assignments.
Important Dates:
March 9 Classes Begin
March 21-25 Spring Break
April 26 Last day to drop
May 4 Last day of class
Words of Wisdom:
When you take a course about computers, you get out of it what you put into
it. Computers are constantly changing and you must be constantly learning to
keep on the cutting edge. A class in computers will help you get started, but
it is up to you to go that extra mile to become an expert. Working with computers
is like learning a musical instrument. You don’t become a good musician
without practice. It is the same with computers. If you don’t practice
and develop your skills on your own, then you’ll never be a true techie.
No computer class can teach you everything you need to know on a topic. Computer
courses are a jumping off point to a journey, not a destination.
Important Notes to Students (the fine print):
If you have, or believe you have, a disability that interferes with your performance
as a student in this class, you are encouraged for academic reasons to discuss
this on a confidential basis with your instructor and/or The Americans with
Disabilities Act (ADA) Coordinator in the Main Office or by calling 287-7981.
If you have a condition that may affect your ability to exit from the premises
in case of an emergency, you are urged, for safety reasons, to notify the ADA
coordinator.
Any student found guilty of academic misconduct shall be subject to disciplinary
action. Academic misconduct includes, but is not limited to, the following actions:
cheating; plagiarism; unauthorized possession of examinations, reserve library
materials or laboratory materials; unauthorized changing of grades on an examination,
instructor’s grade book or grade report; nondisclosure or misrepresentation
in filing out applications or other college records; or violation of computer
use policies. The following disciplinary actions and sanctions may be imposed
for any of the above infractions of regulations: disciplinary probation, disciplinary
suspension, dismissal, expulsion.
Wednesday, Mar. 9
Introduce Yourself
For your first assignment: Introduce yourself to the other students in this
course. Tell about what you like to do for fun (hobbies, etc.) and personal
goals you have. Maybe some of this information will help you decide on what
kind of web page you’d like to make. Then everyone must respond to one
other person in the class by asking a question about something someone has written.
Then the original person will post a reply. So introduce yourself, respond to
another person’s introduction, and then respond to anyone who has responded
to you.
Thursday, Mar. 10
Chapter 1 – Planning a website
Ch 1 Activity 1: Audience – guess audience for the following websites:
Which of these websites would you be the most likely to visit? What types of
websites do you usually visit? Are you a shopper
www.amazon.com
www.rottentomatoes.com
www.nmsu.edu
www.historychannel.com
www.nickjr.com
www.harrypotter.com
Ch 1 Act 2: Your Audience
What is your audience? Who do you want to make a web page for? (Self/family/clients/friends/hobby)
See pages 6-7.
Ch 1 Act 3: Purpose
What is the purpose of your website? What will you try to do with it?
Ch 1 Act 4: Structure
Look at following popular websites:
www.walmart.com
www.amazon.com
www.wellsfargo.com
What do you think people like about these websites?
Tuesday, March 15
Ch 1 Act 5: Your Structure
How do you want to structure your website? What parts to your website would
you like to have? How many pages? What will each page be about?
For example, if you are making a website about your family, one page can be
about you, one page can be about your mother's side of the family and the other
page can be about your father's side of the family. You can create more pages
on your children, your spouse's family, your family pets, family vacations,
or even a family tree. It's up to you.
You can change this later, but write a rough idea now.
Ch 1 Act 6: The Good, The Bad, and the Ugly
Post the address of any good websites you find or any really bad websites you
find. Write what you like (or dislike about this website).
Wednesday, March 16
Lab #1 (An intensive help session will be available at the college or you may
do this assignment on your own). You will be creating basic web pages in a variety
of ways using both online templates and web page design software. For your first
web page, we will set up an account on an online web page service called Geocities.
Geocities is a free web hosting service through Yahoo.com. It won't cost you
anything and if you have a Yahoo email account it is very easy to set up.
Use the following directions to set up your account and then create a simple
web page using the Geocities web page wizard:
1. Open Internet Explorer (or another web browser).
2. Go to the web address: http://www.oocities.org/
3. You now see the Geocities welcome page. On the left hand side, click on the
blue hyperlink that says free.
4. Click Sign Up on the right hand side by the GeoCities Free area.
5. If you are new to Yahoo, you will need to fill out the form that is displayed.
The Yahoo! ID you select will be the name of your website so select it carefully.
Do not hit enter until you fill out the entire form. Use tab to move from field
to field. (if you have a Yahoo email account, click on sign in). Once you have
created an account or if you are an existing Yahoo users, you will be asked
to select a category for your website. Pick a category and then hit enter.
6. Click on PageWizards and follow the directions to set up your page. Extra
credit to anyone who writes down all the steps to using the PageWizard and posts
it in this discussion (that helps me and everyone else).
If you have any problems, please contact me for help.
If you find any mistakes in my directions, please post it here and I'll give
you extra credit. Geocities changes their format all the time so sometime by
directions become out of date.
Monday, March 28 Chapter 2 – Designing Display and Navigation
Ch. 2 Act 1: Wow factor
Review p. 22, 38. Slow bandwidth can make an exciting website pretty dull if
you use a modem to dial up to the internet. Here are some examples of quick
pages vs. slow loading pages:
www.harrypotter.com www.tmbg.com www.itcatmedia.com www.24-7media.com www.nickjr.com
(try games or videos)
Is the wow really needed? Do you think you'll want to use several images and
some video?
Ch. 2 Act 2: Navigation
What is a website you go to often? Why do you like it? Is it easy to get around?
Use the questions on page 40 to analyze the website and decide if the website
has a good navigation setup. Q1: Whose site am I looking at? Q2: Where am I
in the site? Q3: What else is available at this site? (can you tell without
clicking any links) Q4: Where should I go next? Q5: How do I find what I'm looking
for?
Ch. 2 BONUS: Extra credit
Go to www.webpagesthatsuck.com or check the Web Pages That Suck from the NMSU-Grants
library. Take a look at what is called mystery meat navigation. What is mystery
meat navigation? How is the website www.tmbg.com an example of this?
Ch.2 Act 3: Identify the site
Review p. 42 – What will your website be about? Decide on a motto. Respond
to one other person in this class and give them another idea for a motto for
their website.
Ch. 2 Act. 4: Discussions, Chats, etc.
Review p. 48-49. What are discussions and chats? Find related discussion boards
or chats to link your website to (family trees, hobby, etc.). Post the addresses
here and use these links in your website later on. Look through the links posted
by other students and decide who has found the chat room or discussion board
that is easiest to use. Does their chat or discussion board have a topic you
might interested ?
Ch. 2 Act. 5:
Review p .52 Find website with a great look and feel. Post the addresses here.
Look through the links posted by other students and decide who has found the
website with the best look and feel.
Wednesday, March 30
Lab#2: Try Geocities PageBuilder. Do you like it better than the PageWizard?
Is it very similar?
Monday, April 4 Chapter 3 – Toward a Better Design
Ch. 3 Act 1: Post the content for your first web page. You don't need to include
pictures or have any sort of design. Basically post the writing from your website.
What will it say?
Ch. 3 Act 2: Links to competitors
Find Links to similar websites on the same topic your are making your web page
about. For example, if you are making a website about cats, find other websites
about cats and post the web addresses. See p. 56 – Pick one of your competitor's
websites and post what do you like about their website and whether or not you
think you should use a similar structure?
Ch. 3. Act. 3: Black and white
On p. 59, the book suggests that the best colors to use for a background is
white and the text is black. Do you agree? Look at the example websites:
www.walmart.com
www.amazon.com
www.nickjr.com
Do they follow this rule? How do you keep black and white from being too boring?
Wednesday, April 6
Lab #3: Create a new page to your website. Decide what program you'll use. Email
me with the program and I'll email you how to make the webpage work. For example,
with Word, you create everything like a normal document and then click FILE
> SAVE AS WEB PAGE. Word is very simple to use but not always the best choice
since it has some problems making web pages. If you have nothing else, Word
will work, but see what else you have access to. A great program for making
web pages is Microsoft FrontPage. FrontPage is very simple and powerful. This
is available at the college and I'd be happy to help you with it in the lab
in room 124. Feel free to try a web page template Frontpage. Also try any other
program you have access to. At the college, we also have Macromedia Dreamweaver
which is what most web design professionals use and is surprisingly user-friendly.
Microsoft Publisher also makes nice looking web pages and is very easy to use.
We have Publisher available at the college as well.
Please come to lab for extensive help session. In this help session, bring your
web page content and we'll create the whole page from start to finish.
Monday, April 11
Post Your Web Page on Geocities and then post the address of the page in the
discussion room of WebCT. Come to lab for extensive help session.
I would like everyone to now post your new web pages you have created on Geocities:
http://www.oocities.org/
You will now upload your web page files to the internet. You will need to upload
all your HTML files AND pictures. Programs like Word and Publisher create a
lot of extra files. You'll want to upload all these.
1. Log in to your website you created earlier in the class on Geocities.
2. Go to File Manager and click Upload or click on Easy Upload on the right
(Advanced Toolbox) to upload your files.
3. Click on the Browse button on the right to upload your first file.
4. The Choose File box appears. Click on the black list arrow to the right of
the Look in field. Chose the drive where your files are located. When you find
the first file, select it and click OPEN.
5. You should see the file appear in the first field. Click on the next Browse
button and repeat the process until all the fields are used. Then click the
button Upload Files.
6. You should see a list of the files under Upload results. You want to see
the message “Uploaded successfully.”
7. If you have more files, continue to upload files by clicking the blue hyperlink
Upload More Files.
8. When you are done uploading files, click on the blue hyperlink that says
File Manager.
9. You will see a list of your files appear.
10. To make your web site work to its potential, we will now rename your first
page. You first page you want people to see should be named index.html. Find
the file you want people to see first. It will either be a welcome page or if
you are using frames, your frames page.
11. First place a check in front of the current index file (unless it is yours)
and click the Delete button at the top of the page.
12. Place a check in front of your main page, then click the Rename button at
the top of the page. Type “index.html” under the new name field.
Then click the Rename Files button.
13. Check to see if your web site is working by clicking the blue hyperlink
at the top left after “Your site:”. This hyperlink is your website
address that anyone can access from around the world. You can also click on
“View” to check each page.
If you have any problems, please contact me for help.
If you find any mistakes in my directions, please post it here and I'll give
you extra credit. Geocities changes their format all the time so sometime by
directions become out of date.
Wednesday, April 13
Chapter 4
Ch.4 Act. 1: KISS
In the book it suggests you keep pages short (to one screen if possible) to
avoid scrolling. Do you need to do this with your web page(s)? Do you agree
with the book?
Ch. 4 Act. 2: Creating hyperlinks
Most programs for making web pages and many word processors create links for
you automatically. Sometimes you need to add the http:// for it to work and
then hit a space or enter after typing the link. If you have trouble email me
with the program you are using and I'll email the directions. Add 4 links to
your web page and explain how you had to make the hyperlink work.
Ch. 4 Act. 3: Copyright
Copyrights (are your images yours? Clip art okay)
Copyright discussion p. 101
Ch. 4 Act. 4: Photo editing
Photos/image editing LAB workshop – images (try PhotoShop or another editing
program – email before and after) send in jpg or gif format
Monday, April 18
Chapter 5 - BONUS lessons for extra credit
BONUS: see p. 105 Animation (You can find animated gif and add to website or
come to the lab and try an animation program such as Flash or Corel)
BONUS: Add sound (see p. 109)
BONUS: create a short video (come to lab with 15 second script and we'll record
it)
BONUS: Forms – try a free form builder so people can submit information
Wednesday, April 20
Chapter 6 - Templates
Lab #4: Try another web page authoring software that you haven't used yet. If
you've used FrontPage, try Dreamweaver or Publisher for example or search the
internet for another easy web page creator like Geocities PageWizard. Post your
resulting web page and discuss in the posting if you think the new program was
easier or more difficult to use.
Monday, April 25
Chapter 7 - HTML
Lab #5:
Try creating a web page with HTML. (Use book or the directions posted in WebCT
for HTML)
Wednesday, April 27
Chapter 8 - Test your websites.
Have someone you know try using your website. Do they understand what it is
about? Are they able to navigate between the pages? What suggestions did they
make? What ideas did you get for improving the website from watching them?
Monday, May 2
Final Project – Finish your website. You should have five pages completed
from the labs in this class. Complete these five pages and link them together
with a menu for the website. Intensive in lab help available.
Design check: In chapter 3, The book suggests you avoid multiple fonts, keep
your page balanced, and always keep the menu always in same location. Did you
follow these suggestions?
Wednesday, May 4
Finish final project - Intensive in lab help session
Final Deadline for All Assignments