CSCI 123 Introduction to Web Development

Spring 2013


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

Tuesday Thursday
1/28

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

 

Color Wheel

Sample Websites:

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.

Implement the following today:

  • Create the initial web page for every student that has a like to all future homework
  • Make it live on the eup web server

Some pags from last semester:

Dave Masters

Allison Orlando

Chris Steenrod

Alex Wurst

Terry Darcangelo

2/4

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

 

Fonts

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.
2/11

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

 

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

2/18

 

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

 

  • 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.
  • Basics of Dreamweaver
  • More notes on what HTML & CSS are

FTP:  File transfer protocol → you can use this to copy files to the web server from home or anywhere you are not logged into the Edinboro Network. 

  1. Open Windows Explorer
  2. type in ftp://webstorage.edinboro.edu
  3. Login
  4. This will open up the folder containing your files
  5. Open another instance of windows explorer
  6. Use drag-and-drop to copy your files to the web server
2/25

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


3/4

Site Management

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

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

 

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.
3/11

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
  • Add keywords and title to the site

 

3/25

Page Properties

Start Chapter 9

CSS vs. HTML

Creating a Web Page Using Tables

Chapter 10

Work on tutorial with tables

Start making Navigation Buttons with Rollovers

4/1

HTML Tables

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

 

Links, Linked Pages and Media

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.

4/8

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.

AP DIV - Chapter 12

** No Class today (Thursday: 4/11) **

Instead work on this project at home:

  1. Make a copy of your page that has the roll over buttons. Name it something like Spry_Menu.html
  2. Delete the buttons
  3. Add a 'Spry Menu Bar' feature; one menu item to replace each button.
  4. Make sub menu items for the 1st two; for now just make up some sub menu names.
  5. Put some sort of links for each sub item.
  6. Have it ready for Tuesday. We'll add some CSS features to it and images for the background.

This is a Very common feature used in web design/programming. Take your time and learn this feature.

Take a look at jQuery also.  This seems to be the current trend with scripting for the web.

 

 

4/15

Favicons & Image Files

AP DIVs → Chapter 12

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.


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

4/22

Working with Text and CSS

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)

Working with Text and CSS

 

Continue working on the lupine CSS walkthrough.

4/29

  Forms

Look at making forms

Chapter 15

 
5/6

Look at Adobe Flash

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

Work on Final Project

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

Get Adobe Flash player

Final Exam

Thursday; 5/16 - 10:15 → 12:15

 

Assignments -
Assignment # Due Date Description
Chapter 1 2/8
  1. Project 1, Page 19 → Submit this to D2L
  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 → Link to Chapter 1 on your homework page.
Chapter 2 2/15 2.6 Page 44 - Create a 3 Different font schemes based off of your Photoshop images from the 1st assignment.
Chapter 3 2/22

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 2/28

4.8 Page 99 & 100 - Modifying and Slicing up your Prototypes

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 3/1

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 Open House" 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

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 "Student Life" text to a like on the Edinboro web site about student life.

1
1
1
1
2

Post it to to the approprite link on your homework page.  
Total 21

 

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

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 3/22

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 3/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 4/12

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 4/30

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

 

 

5/10

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