Special Note - We need to keep this schedule
very flexible, I want you to get the most out of the course. To make
that possible we may need to move/add/delete some topics depending on our
pace and how the class is doing. I will continually tweak this web
site, so check it often to see what's going on.
Week
Starting
Monday
Wednesday
Friday
1/27
Introduction to the course
Go over syllabus
What you'll learn
What you need
Assignments
Grading
Expectations
Lab time
Edinboro Network
Take roll
Make sure all of us can run the Adobe software
Make sure we can all get to the EUP WebDir directory
\\eup\dfs\Webdir\DTUCKER
Start Chapter 1 if there's time
Color
Chapter 1 - Creating the Critical First Impression of Your Site
Collecting and storing screen shots of web pages you like.
We'll go over how to use Photoshop, at least as much as you need to start assignment 1.6 Building Your Own Website
I would like to start on an in-class project to build a very simple HTML page from scratch , not using any HTML editor. In fact we'll be using Notepad.
Let's start the Chapter 8 homework in class. See below for the assignment. This is a walk-through of the template tutorial from Adobe. This will use some of the images you created earlier in Photoshop.
1. Create a 16 X 16 pixel image in Photoshop
2. Save as .gif to the same directory that holds the .html page you want the favicon to be on.
3. Go to the link below http://www.coolutils.com/online/image-converter/
a. upload from that directory the gif file and convert to .ico format
b. save to the same directory that the .gif and your .html page is in
4. go to the .html page in dreamweaver
a Insert → HTML → Head Tags → Link
b. browse and get the .ico image in the top box
b. then in the 'Rel:' box type "Shortcut icon"
It should now work, reload the .html page and see if your favicon is there.
Continue working with the favicon
Adding one to your original web site for your homework.
Lets try shrinking an existing image, maybe one of yourself
Also:
How to use a transparent image to manage table cell widths
Come up with an idea for your semester long web site, some sort of company.
Do all the parts of 1.6 Building your own web site; 1 thru 5
Chapter 2
9/12
2.6 Page 44 - Create a 3 Different font schemes based off of your Photoshop images from the 1st assignment.
Chapter 3
9/19
3.7 Page 70 - Create 3 Prototypes of possible web site layouts
1. make your big image
- 1200 x 750
- bring in your header (center it) you made in assignment 2
- make some more boxes, ovals , etc (see page 66 for example)
for navigation buttons, and layout boxes
- Save as "Drums1.psd" (the Photoshop version you can edit later)
- Save as "Drums1.jpg" (for putting in Dreamweaver)
2. Open Dreamweaver and set the image you made in #1 as your background
- go to page properties button on the bottom of the page
3. Save it (from Dreamweaver) to \\eup\dfs\webir\dtucker\Drums1.html
- You need to be logged into the Edinboro network to do this
4. Make sure it works by opening a browser and going to
http://users.edinboro.edu/dtucker/Drums1.html
5. Do steps 1 → 4 again 2 more times with different layouts
6. Send me an e-mail with your name and 3 hyper-links, one for
each page you made.
Chapter 4
Done with CH-10
4.8 Page 99 & 100 - In #1 you won't be able to do the rollovers they describe using CS3 or CS4 (we're using CS6 in the lab). Make navigation bar buttons. Take your own or get photos from the web and optimize them for the web. Add them and the buttons to your web layout from Chapter 3's assignment.
Determine number of buttons you will need
Use that number; divide by 750 (pixel width) to determine the size of each button
Make 2 button for each page you want to link to
for example one orange; another blue for the hover state
we'll make these rollovers in Dreamweaver (maybe fireworks)
Think about and acquire the images you will need for your web site
Tweak these in photo shop
consider size
consider format (gif, jpg or PNG-24) if you do not want square buttons you may need to make PNG-24 because you want part of the image to be transparent.
Slice up your home page according to
navigation
header
footer
body
any other you may need.
Save for web
Make sure you remember where you saved these and generate the HTML in case we use it later
optimize each slice
we'll be able to link to these later
each button will need to be a slice
Chapter 5
Oct 1st
Make a web page from scratch using Notepad
Create the following web page using Notepad and standard HTML:
Things you need to know:
Task
Point Value
Title - "Web Programming"
2
Make a style for the background:
color of #F90
font family aerial, helvetica, sans-serif
font size 16px
2
1
1
1
Center all of the headings, text and the table
2
Make a link from the image to http://www.edinboro.edu
Create 3 DIV sections with shapes like the following (minus the color of course):
Name them "Header", "Navigation" "Text"
For the header use the image your created for your web site.
Navigation on the Left
For now add text "HOME", "PRODUCTS", "SERVICES", "CONTACT" in the navigation region. We'll be putting images there later.
Text Area in the rest of it.
Use the graphics you made earlier for this.
Create a new web page and based on this template in the root of your web site, I recommend you make a new directory for this assignment.
Add keywords and description to Head Tags
Check Accessibility for your web page and make sure all are checked (Edit →Preferences→Accessibility)
From now on assign accessibility attributes whenever prompted.
Chapter 9
No Assignment
Chapter 10
10/26
Make a web page with tables
Make a new web page, called index.html in a directory off of your rood web folder called chapter10
Add a table that is 750 pixels wide that looks like the following
Banner here
Home
Product
Service
Contact
But put the banner your made earlier in the proper spot
Fill in the cells with the Home Product..etc.. with a color that matches
center the table
put a matching background color for the rest of the page
experiment with this to make it look good.
Along with this Assignment , do the Chapter 4 assignment.
In class I made my table width 800px and divided it by 4 to determine the size of each button graphic. If you want to use 750 and make one button a little bigger you can do that also. If you want to make your buttons stacked horizontal, let me know you can do that too. It will be similar just make at least 5 rows, at least 2 columns. Merge the top two and make the rest of the 1st column 200 px wide.
You should be making 8 buttons, two for each link to make the rollovers. Place these button in the table as we did in class.
Make a new directory in your web space called "Chapter14" (before step 1)
e-mail me the URL.
Chapter
15
Create a web page that uses a Form
Chapter 16
No Assignment
Final Project
"1 million points"
12/14
Complete Web Site
You must encorporate the following:
Use of appropriate font for your business
Use of CSS for text for the site
Make a seperate file and attachet it
set css properties of body, table, divs, etc.. here (you may only need a few things such as text and background)
Good layout design
At least 5 different pages. What the content of the pages will be depends on what your company's product or service is. You'll have at least a Home and Question/Comment pages. Look at some similar pages on-line.
Use of templates
Main table must be 800pixels wide and center on all pages
Make use of Divs also
Good graphic images
Appropriate color selection
Banner, buttons, button rollover, and background for each page. The button for the page the user is currently on should be the rollover image (unless you included this in your template then don't worry about the per/page image). This signifies to the users what page they are on.
Favicon on each page (same one)
Page that is a question/comment form to fill out. (This really won't sent a message though)
