|
Final
Web Site Design Rubric
Lesson 4 of Mulder's
Stylesheets Tutorial is all
about color. Tired of looking up hex values? Look at how many color
names browsers actually know. You'll be able to set borders with a
background image for your Declaration
document with the information learned in this lesson. Lesson 5
will teach you how to position elements on your page. With this
knowledge you can position menus.
Lesson 3
of Mulder's Stylesheets Tutorial is all about borders, margins,
indents and line spacing. You'll see examples on my example sheet. Your
job is to create your own with the first lines from the Declaration of
Independence. Here's an example of mine.
Lesson
2 of Mulder's Stylesheets Tutorial is all about fonts. Here is
an
example of using css in a stylesheet
to control fonts. Make your own example sheet before going on to lesson
3.
5 Day - Using Stylesheets
& CSS Tutorial
Reading
Assignment: Mulder's
Stylesheets Tutorial - You'll have to read and participate in this
tutorial.
Performance Assignment: Use what you've learned in
Mulder's tutorial to create a stylesheet that will make this text (declaration.html)
more readable and user friendly.
HTML
Quiz ;-) from the W3Schools.com site.
Here are other good sections from the W3Schools site:
HTML
Readability, and then the Learn CSS tutorial.
Mid-Term Assignment: Putting
it all together...
You've been learning how to create various web
components for your web sites. You know about menus, java scripts, CSS
stylesheets, how to select fonts, colors and how to manipulate
graphics. Now it's time to put all that to the test.
ACME Toy Store - You are a highly paid web designer,
the best in your field. A successful brick and motar toy store has
hired you to create their new web site where they hope to capture a
large percentage of the 10-13 year old toy buying audience.
Your job is to design their
on-line store front. You
will:
- Survey other toy stores on
the web and generate a
list of expected features.
- Create attractive graphics.
You can use toy images
from ebay and google images.
- Create a front page designed
for your target audience.
- Your front page should
include color, font and design
choices appropriate for your market.
- Your web page should also
pass the W3C HTML validation
service examination.
We will develop a rubric for
scoring your work in class.
Wed-Thurs, January 11 -
[ Thank
You Form ]
Simple Forms
First we'll create a simple feedback form. For this web
page to work, you'll need to copy this file to your web_class folder. do_sendfeedback.php
<== "right-click, Save Link Target As" do_sendfeedback.php
1. Download the file and rename it by changing the "txt" on the end to
"php".
2. Create a simple feedback form using the html code below (cut and
paste then save). Call it
feedback.html
<HTML>
<HEAD>
<TITLE>Feedback
Form</TITLE>
</HEAD>
<body>
<FORM
method="POST" action="do_sendfeedback.php">
<p>Name:
<br><INPUT type="text" name="sender_name"
size=30></p>
<p>Your
E-mail: <br><INPUT type="text" name="sender_email"
size=30></p>
<p>Did
you like my web page?
<INPUT
type="radio" name="like_site" value="Yes"
checked> yes
<INPUT
type="radio" name="like_site" value="No"
checked> no
</p>
<p>Tell
me more: <br>
<textarea
name="message" cols=30
rows=6></textarea>
</p>
<INPUT
type="submit" value="Send Me Feedback">
</FORM>
</body>
</HTML>
3. Note the red text. These are the
3 information fields your
form will submit to the php script for processing. You will have to
edit the script (do_sendfeedback.php) to change the email address. Edit
this line:
mail("pnelson@riverdale.k12.or.us",
"Feedback Form", $msg, $mailheaders);
4. For your script to run. You'll
have to access it through the web
server URL:
http://hs.riverdale.k12.or.us/~pnelson/web_class/feedback.html
Your link would look like the one above but remember to change the
"pnelson" to your user login.
Once you have your feedback form working, use these
tips on forms to help you create a better form.
Tuesday, January 10 -
FORMS, PHP and Drop Down redirects - READ the assignment at the bottom
of this
section. You have to make TWO web pages using this script.
Here's a
handy php script and a new kind of form you may
want to use on your pages. See it in action - news_menu.html
Note that for this script to work, you'll have to view the page as if
from the internet using an address like:
http://hs.riverdale.k12.or.us/~pnelson/web_class/news_menu.html
It won't work if you just hit the preview button. The school web server
has to serve the file and run the redirect.php script. This won't work
if you simply view the page as a file through Mozilla.
<html>
<head>
<title>News Pages</title>
</head>
<body>
<FORM method="POST" action="redirect.php">
<p> Select a news site:
<SELECT name="location" size ="1">
<OPTION value="http://news.google.com">Google News</OPTION>
<OPTION value="http://news.yahoo.com">Yahoo News</OPTION>
<OPTION value="http://slashdot.com">Slashdot</OPTION>
<OPTION value="http://drudgereport.com">Drudge
Report</OPTION>
</SELECT>
<INPUT type="submit" value ="Read News!">
</FORM>
</body>
</html>
Note that the PHP script we're using is called redirect.php. Copy
this
text and save it as a file called redirect.php in the same
folder with
news_menu.html.
<?php
header("Location: $location");
exit;
?>
You should
not have to modify this script at all. To create your own drop down
menus just change the OPTION lines in the html file. If you want to use
a menu like this
on another web page, just put a copy of the php script in that folder.
Assignment - SAVE
your news_menu.html page to show me it works. Create another one with
some
of
your favorite links or incorporate a drop down menu into an existing
page you are already working on. Be prepared to show
me these TWO pages (one news page, one you
created...) for credit.
Java
Scripts!!! http://builder.com.com/1200-31-5084862.html
Make 3 pages using java script...
Here are some examples: Time
| Zoom
| Quake
| more?
See codelifter.com
or java-scripts.net
| or ???
Friday, January 6 - TEST
- Putting
your graphics skills to the
test...
Use Mozilla Composer to make these two pages. [ Page
1 | Page
2 ] Use the GIMP to make the graphic on page one. Use the GIMP to
make the buttons on page 2.
You'll have to use this script in the <head> portion of your
first page to make the second page open after 10 seconds.
<meta HTTP-EQUIV="REFRESH"
CONTENT="10; URL=page2.html">
Graphics:
Animated
GIF's
Use
Grocking the GIMP to see how to do this.
Take a look at this poignant animated graphic
called
"moo."
Transparent GIFs - later this week but you might want to look this over
now...
Image
Options - Transparent
GIFs
Thursday, January 5,
Transparent GIFs - Image
Options - Transparent
GIFs
Monday, January 2,
Visit [ coolhomepages.com
| Builder.com
design
links | BudUgllyDesign.com
| Archiecomics.com ]
Using CSS to make menus
more interesting.
Getting started... Edit the stylesheet for this
page and have some fun with it.
CSS Introduction
by Trevor.
Monday - December 12 -
Now we
think about design...
Reading:
For this excersise I'm asking you to make two web pages. Each page
will use a different style.
- Government - Consertive - http://www.cia.gov/
- Flashy/Artistic - Commercial
- http://www.chanel.com
- Info Rich - Information
Centered - http://www.yahoo.com/
Your job is to create at least
TWO web sites, one
with a commercial
style and one with a conservative style. All you need is the front page
with navigation bars. You don't even have to create real links. Here's
an example.
Looking
At Navigation:
December 7
Today we're going to work on a
set of navigation tools.
Take a look at
the sample pages I made. How did I do this?
Which of the three sets of tools do you like the best?
Assignment: Create your
own set of four pages with at least three different
kinds of navigation
tools.
Advanced assignment: Finish your sample pages
early? Try adding some DHTM (Dynamic HTML) dropdown menus from the SimplytheBest.net
web site. You'll find lots of good menu
scripts
there. Caution! You'll have to read the documentation to get these
working. I don't think all of them will work. Here's one
that should
work , and
another... with only a little effort.
Tuesday
- Wednesday,
December 6-7
Basic
Skills HTML Test
- Can you create a web page that looks just like this one?
Monday,
December 5
Task #2 Create a table with buttons.
Friday
- December 2 - Here's
the table.html
file we made in class.
Thursday - December 1
Are we ready for our first task? Can you make a page that looks just
like this
one?
Monday
- November 28
In this course we'll learn all about creating web pages and running a
web server. We'll also learn how to create dynamic
pages
using PHP and the mysql database engine.
Our first task is to learn how
to program in HTML
(HyperTextMarkupLanguage).
Head for http://www.riverdale.k12.or.us/class/
for links to the files we'll start with.
basic.htm
basic2.htm basic3.htm
Are the basic pages we'll use.
You'll need to create
a folder in your home folder for this class
called public_html. Inside
that
folder create a folder called web_class. The "_" is
called an under_score. It's on the "-" key.
From a terminal window:
mkdir
public_html <enter>
mkdir
public_html/web_class
You can also make directories by
opening the link to
your home folder on your destop and selecting <file> >>
<new folder>.
Save the basic pages above in
the web_class folder and
grab the images as well.
We'll be using a basic text
editor to create pages.
You'll find the text editor in the <Programming> menu of your
Linux workstation. It's called Bluefish. You can also use an editor
like vi from inside a
terminal window.
|
