CSCI 123 Introduction to Web Development

Fall 2012


Syllabus    Homework   Files from the book

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
  • Some notes on the terms relating to art & design

 

Sample Websites:

Color Wheel

 

Hopefully we'll be a the point where we can spend the day working on your web site and the 1st assignment.

 

Web Site Work flow:

  1. Define scope of project, objectives, target audience, schedule & available resources
  2. Develop Design strategy and establish the look and feel of the web pages
  3. Develop Prototype (This will be our actual site)
  4. Present to client
  5. Assemble & create the web site.

9/3 Labor Day (No Class)

Fonts

Chapter 2

Discuss Assignment 2

Open Blank Page in Dreamweaver

  • Edit Font
  • Web Safe Fonts
  • Format → look at options
  • Modify CSS (Cascading Style Sheets) Style
  • What is CSS?
  • Look at Page Properties
  • Difference between and new paragraph and new line (Enter vs. Shift-Enter)

Create Image with any Font in Photoshop

  • Show how to use layers
  • Save as Photoshop file

 

Web Site

  • Work on added text to our web site in Dreamweaver

Photoshop

  • I'll demonstrate in class how to create documents in Photoshop that use text.
  • Create images that incorporate text in Photoshop. These can be used as the banner in your web site project.
9/10

Start on Chapter 3 - Web Layout

  • Discuss principles of what pages should be included in your site.
  • Discuss web layout, different parts of the web page, general rules/policies to guide you
  • How to make prototypes in Photoshop
  • Discuss this chapter's assignment

Web Layout

We'll make some sample home page layouts in Photoshop

Photoshop

  • 1200 pixels wide
  • 750 in the middle with borders
  • 800 X 600 is standard size you can assume your visitors have
  • Height of 500 to 600, lets do 600 pixels
  • After initial page -Use of Rectangle tool – set width and height

See below for the instructions I put on the screen today.

Start Chapter 4 - Graphics for the Web

  • Getting legal images
  • Optimize images for the web
  • Slicing
    • Open Document
    • View - make sure ruler is checked
    • Hold crop tool and select the slice tool
    • 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/17

 

Finish notes on chapter 4

  • Talk about Slicing
  • Background Images
  • We'll have a lab day today
  • See how to create buttons that are identical except for the background color.
  • Discuss the next assignment

 

HTML

Chapter 5 - Introduction to HTML

More notes on what HTML & CSS are

  • 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

9/24

HTML

Chapter 5 - Introduction to HTML

More notes on what HTML & CSS are

  • If not done with the simple HTML page in Notepad then we'll finish that.
  • Basics of Dreamweaver
  • Create HTML pages again in Dreamweaver

HTML

  • Finish the discussion on HTML
  • Discuss the assignment
  • Discuss the exam
    • Some multiple choice
    • Some short answer
    • Create a small .jpg image in Photoshop according to some specs I give you.
    • Read the chapters again for review
    • Practice making images in Photoshop

 

Exam 1:

Chapters 1 through 5

  • Color
  • Font
  • Graphics for the web like slicing
  • Intro to HTML


10/1

Site Management!! →Super important


Chapter 6

This is a typical folder structure, ours will be a little different because we work directly on the web server.

Site Management

  • Continue with Chapter 6
  • Local vs. Remote site
  • File Structure
  • Why images don't show up?
  • Look at Dreamweaver.

 

Learning Dreamweaver.

  • Q & A on any course topic.
  • Today let's review HTML and Dreamweaver
  • Discuss how your web folder should look, local and remote.
  • Maybe Start Chapter 7
  • Tutorial from Adobe about Dreamweaver. This covers a lot of stuff and you can pick and choose witch ones you want to work through.
  • This is a big .PDF file, so it may take a while to download and you need Acrobat reader.
  • But you'll need some images of your own on some of the tutorials to play with.
  • Discuss a couple of more things from Chapter 6.
10/8

Learning Dreamweaver.

  • Continue with any Q & A on any course topic.
  • Look at Dreamweaver
  • Start Chapter 7

Steps to Create a Web Site

  1. Create the folders you will need in Windows Explorer
  2. Create a new site in Dreamweaver
  3. Create your first page (index.html) in your web site.

 

Naming, Titling and Adding Accessibility to Pages

Chapter 8

  • Some lecture then individual instruction.
  • 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.
  • Talk about AP Div

Continue with the in-class work

Add keywords and title to the site

10/15

Page Properties

Start Chapter 9

CSS vs. HTML

Creating a Web Page Using Tables

Chapter 10

Work on tutorial with tables

Continue with web pages using tables.
10/22

HTML Tables

  1. Insert your banner up top
  2. Make a cell per navigation
  3. Make buttons in Photoshop
  4. insert them
  5. make links
  6. Center the table

Links, Linked Pages and Media

Chapter 11

Continue with Chapter 11

Let's Play around with making a SPRY menu.

10/29

AP DIV

Discuss the exam

  • Chapter 6 - Site Management
  • Chapter 7 - Intro to Dreamweaver
  • Chapter 8 - Search Engine Optimization (no frames)
  • Chapter 9 - Setting properties to your web pages
  • Chapter 10 - Using Tables
  • Chapter 11 - Links, Image Map, Media

I'm thinking a practical exam, create a web site and e-mail me the URL.

Maybe Start Chapter 12

Exam 2 - Chapters 6 through 11

  • Know how to create a page using a table of a specified size
  • Add image to a cell
  • Specify properties of the table and cell such as border size and table alignment.
  • Know how to save it to your direcotry on the web server given a specific file name and directory name.
  • know how to set web page properties such as title and any HTML head tags.
  • Set background image or color
  • Know how to e-mail me the URL.
  • and look over the other stuff from chapters 6 thru 11. Bring your book and notes.

Chapter 12

 

Last day to Withdraw

11/5

Favicons & Image Files

Chapter 13

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

 

Working with Text and CSS

Chatper 14

11/12

Continue with CSS

Adobe Education Tutorial

 

Page 385 → section 14.3 is a walkthrough with some CSS rules relating to page layout.

lupine_div_images folder

Make a new directory in your web space called "Chapter14" (before step 1)

Forms

Look at making forms

Chapter 15

11/19

Continue with forms

 Thanksgiving Break

11/26

 

Work on Final Project

 

Look at Adobe Flash

http://www.adobe.com/devnet/flash/articles/create-first-flash-document.edu.html

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

12/3 Work on final projects

Final Exam:

12/12 12:30 → 2:30

Assignments -

Assignment # Due Date Description
Chapter 1 9/5
  1. Project 1, Page 19
  2. Come up with an idea for your semester long web site, some sort of company.
  3. 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:

Chapter 5 Homework image

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

2

1

2

Table
  • Make the titles of the table columns "strong"
  • Table background color is "#CCCCCC"
  • Table width is 500
  • Table border is 1
  • Link the "Fifth quarter celebration" text to :"http://homecoming.edinboro.edu/home/fifth-quarter-celebration.dot"

1
1
1
1
2

Post it to your area on the Edinboro web server and e-mail me the URL. Call it "YourLastName_Assignment5.html" 5
Total 26

 

Chapter 6   No Assignment - Define your site locally and on the web server.
Chapter 7   No Assignment
Chapter 8 10/19

Make a Web Site based off of a Template

  1. Do the Adobe tutorial on Templates and create a template for your web site.
    1. Create 3 DIV sections with shapes like the following (minus the color of course):
      1. Basic Layout for web pages
      2. Name them "Header", "Navigation" "Text"
      3. For the header use the image your created for your web site.
      4. Navigation on the Left
        For now add text "HOME", "PRODUCTS", "SERVICES", "CONTACT" in the navigation region.  We'll be putting images there later.
      5. Text Area in the rest of it.
      6. Use the graphics you made earlier for this.
  2. 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.
  3. Add keywords and description to Head Tags
  4. Check Accessibility for your web page and make sure all are checked (Edit →Preferences→Accessibility)
    1. From now on assign accessibility attributes whenever prompted.
Chapter 9   No Assignment
Chapter 10 10/26

Make a web page with tables

  1. Make a new web page, called index.html in a directory off of your rood web folder called chapter10
  2. Add a table that is 750 pixels wide that looks like the following
Banner here
Home Product Service Contact
   
  1. But put the banner your made earlier in the proper spot
  2. Fill in the cells with the Home Product..etc.. with a color that matches
  3. center the table
  4. put a matching background color for the rest of the page
  5. 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.

Chapter 11 10/29

Image Mapping

  1. Create a directory Called "Chatper11"
  2. Make a web page that contains the image of the US
  3. use the hot-spots image mapping and map 10 states to their respective web pages
  4. list the states that you linked on the web page you send to me.
  5. e-mail me the URL of the new page.  Should be "http://users.edinboro.edu/dt123456/Chapter11/index.html" → except your username in the directory
Chapter 12  

No assignment

Chapter 13 11/13

Create and add a Favicon to a web site

Exercise 13.7 on Page 355 - Adding a favicon to your web page

Make a directory called "Chapter13" put the web page there & e-mail me the URL

Chapter 14 11/19

Setting CSS Properties for DIVs

Page 385 → section 14.3 is a walkthrough with some CSS rules relating to page layout.

lupine_div_images folder

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:
  1. Use of appropriate font for your business
    1. Use of CSS for text for the site
    2. Make a seperate file and attachet it
    3. set css properties of body, table, divs, etc.. here (you may only need a few things such as text and background)
  2. Good layout design
    1. 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.
    2. Use of templates
    3. Main table must be 800pixels wide and center on all pages
    4. Make use of Divs also
  3. Good graphic images
    1. Appropriate color selection
    2. 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.
    3. Favicon on each page (same one)
  4. Page that is a question/comment form to fill out. (This really won't sent a message though)

 


 

Some Helpful Sites:

How to prevent your AP Divs from not positioning correctly when your page size adjusts → http://www.youtube.com/watch?v=c_94YxbUFAc