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
8/26
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
Make sure you all want to learn about making web pages!!
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
Drag vertical and horizontal guides from the ruler, click and drag from the ruler to make these
Press the "Slices from Guides" button
Slices have been made
"Save for web and devices"
tweak if you want
Save as type HTML and Images (remember where you saved it to)
now look at the HTML in the folder that Photoshop created with all your images
Background images
How to find on-line
how to tile i.e.. verticle, horizontal, full or no tile
9/16
Finish notes on Chapter 4
Talk about Slicing
Background Images
See how to create buttons that are identical except for the background color.
Discuss the next assignment
Chapter 5 - Introduction to HTML
(Moved to Sept. 30th)
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.
If time take a look at the parts of Dreamweaver
If not done with the simple HTML page in Notepad then we'll finish that.
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. Make a web page with a centerd table - 4 columns 3 rows 960px wide
2. Make a new banner in Photshop 800 by 200
3. Put your new banner on the top cell - merge the top cells
4. Make the background color of your page match the backgroud of your banner
5. Add 'Home' 'Products' ... and make dummy link for example
put a link to page index.html begind the 'Home' text and a link to
products.html begind the 'Products' text
6. Some questions about HTML
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.
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 → Link to Chapter 1 on your homework page.
Chapter 2
Assignment 2
9/13
(Week 3)
2.6 Page 44 - Create a 3 Different font schemes based off of your Photoshop images from the 1st assignment.
Chapter 3
Assignment 3
9/20
(Week 4)
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
- If you are making horizontal buttons, you'll want to
figure out how many you want then divide the width in pixexs of your banner by the number of buttons to determine how wide each button should be. You can then use the selection tool and set the 'style' to fixed size and type in that number.
- For example save as "Prototype1.psd" (the Photoshop version you can edit later)
- Save as "Prototype1.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\chpater3\index.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
Assignment 4
10/9
(Week 5)
look at 4.8 Page 99 & 100 - Modifying and Slicing up your Prototypes
2 Parts:
1. Making the rollover buttons
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 (we made 4 in class)
Take that number; divide by 960 (pixel width) to determine a starting size of each button
Make 2 buttons for each page you want to link to (ex. "Home" & "Products") in photoshop. For example one orange; another blue for the hover state (we used gradient colorsfor hover state button image)
we'll make these rollovers in Dreamweaver like we did in class
Make table with one column for each button you made by one row.
Save that web page to your Assignment 4 Directory
2. Making a web page with images slices
Slice up one of the images you made in Assignment 3 for your prototype similar to what we did inclass. Make a html page and also put it in your assignment 4 directory. Remember you can use Photoshop for this entire exercise including making the html file.
Chapter 5
Assignment 5
10/9
(Week 6)
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 - "Edinboro University Homecoming"
2
Make a style for the background:
color of #BA131A
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
set the border = 0 for the image
Get the image from (try and get rid of that border; hint border="0")
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
Assignment 7
10/25
(Week 9)
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
Assignment 11
12/6
(Week 14)
Create a web page that uses a Form
Chapter 16
No Assignment
Final Project
Assignment 12
12/11
(Final Exam Week)
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)
