CSCI 123 Introduction to Web Development
Spring 2014

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

    
1/20

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!!
  • Take notes because all the necessary information is not in the book.

 

Your Homwork Website:

Implement the following today:

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

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.

Start Chapter 1 if there's time this week
1/27

Chapter 1 - Internet and web page basics

  • Chapter 1 Notes
  • Discuss what Dreamweaver is and how it can help build web pages.
  • Notepad vs. Dreamweaver
  • Work on making our homework page
  • Introduce Dreamweaver

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.

  ***  Folders!!   ***

Chapter 2 - HTML Basics

  • Finish Chapter 1 notes
  • Create a templage.html page for trying new things

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>

</body>
</html>

  • Start Chapter 2 Notes if time
    • Heading
    • Paragraph
    • Line break vs. new paragraph
    • Lists
    • Special Characters
    • HTML syntax validation
    • Anchor
    • Hyperlink
    • e-mail link
  • Let's do some hands-on exercises from the book in chapter 2. (Maybe 2.4 page 31)

 

 
2/3

Chapter 2 - HTML Basics

  • Finish Chapter 2 Notes
  • Make a page using heading elements for our fonts
  • show example of <br> vs. <p>
  • Make ordered and unordered lists
  • Use of anchors
  • hyperlinks
  • make an e-mail hyperlink
  • Talk about Java-Jam
  • Talk about Big Project & Topic Approval

 

 

Chapter 3 Web Design Basics

 

2/10

 

Chapter 3 Web Design Basics & FTP

  • Finish Chapter 3 notes
  • 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
  • Take a look at Photo shop
    • Color Selection
    • Making a simple gif
    • GIF vs. JPG vs. PNG
    • Let's make a small backgroud image and put it on a new web page.

Chapter 4 - Cascading Style Sheets

  • Chatper 4 Notes
  • Finish the discussion on HTML
  • Open our Template & make CSS styles
    • Inline
    • Embedded
    • External
    • Class Selector
    • ID Selector
    • Descendant Selector
  • Hands-On Practice 4.1 → template.html (download or use the one you made earlier)
  • Hands-On Practice 4.3
  • Hands-On Practice 4.4 → embedded.html
  • Hands-On Practice 4.5 → starter.html

 
2/17

Chapter 4 - Cascading Style Sheets

  • Continue with some examples
  • Discuss the exam
    • Some multiple choice
    • Some short answer
    • Create a simple HTML page ccording to some specs I give you.
    • Read the chapters again for review
    • Practice CSS

Exam 1 - 2/20
2/24

Chapter 5 - Web Graphics Styling Basics

Chapter 5 - Web Graphics Styling Basics
3/3

Chapter 6 - More CSS

Chapter 6 - More CSS
3/10

Chapter 7 - Page Layout Basics

  • Vertical and horizontal navigation
  • Using CSS
  • Using DIV and their placement

 

Chapter 7 - Page Layout

  • PI Day activities

 
3/24

Chapter 8 - More on Links, Layout, and Mobile

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

 

Chapter 8 - Continued

Discuss the exam

  • Chapter 5 - Graphics and Styling
  • Chapter 6 - More CSS
  • Chapter 7 - Page Layout
  • Chapter 8 - More on Links, Layout, and Mobile

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

Exam 2 - Chapters 5 through 8
April 1st 8th

Notes about Exam 2

 

Chapter 9 - Table Basics

Review for the Exam
4/7

Chapter 10 - Form Basics

Exam 2 (Chapter 5,6,7)

Review:

Open Book & Notes

  • Image Links
  • CSS on the Heading format types
    • set height and width
    • background
  • Background Image
  • Favicon
  • Cutomizing Bulleted Lists
  • Text
    • align and Indenting
    • drop shadow
    • Opacity
    • Set color
  • Customizing the DIVs
    • Border
    • Drop Shadow
    • Placement (Centering)
    • Curving the corners\
  • Images
    • Float
  • Navigation
    • Set properties in CSS
    • Horizontal (Hands-on 7.4)
    • Can you make somthing happen when the mouse hovers on a link
  • Positioning (p. 216)

Chapter 9 - Table Basics

 

 
4/14

Chapter 10 - Form Basics (but our server won't work)

 

Work on Form
4/21

Chapter 11 - Media and Interactivity Basics

 

 

Working withMS Word

 
4/28

Look at Adobe Flash

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

Work on Final Project

Chapter 12 - Web Publishing Basics (not covered)

 

Photoshop

  • Creating Graphics
  • Different types
  • Making rollovers

 

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

Get Adobe Flash player


Final Exam → Review Notes From Class

Thursday, May 8th 8:00am → 10:00am
 

 

  Assignments
Due Date Description
  Homwork Files → Files for the Hands-On Exercises

1/31
2/12

 Chapter 2 - Hands on Case study JavaJam starting on Page 61
2/14 Chatper 3 - No specific assignment, we'll do some stuff in class making a simple background imaga in Photoshop and make it the background for a simple web page.

Project: Topic Approval - Look at page 98 for questions to answer. Answer question #1 using MS Word, and place this document in the appropriate D2L drop box.
2/28

Chapter 4 Hands-On Exercises

Chapter 4 - P. 126 Modify your Java Jam web page.
3/13

Chapter 5 Hands-On Exericses
4/10

Chapter 6 Hands-On Exercises

Chapter 6 Java Jam p.194 - 196
4/11

Chapter 7 Hands-On Exercises

Chapter 7 Java Jam
4/15

Chapter 8 Hands-On Exercises

Chapter 8 Java Jam
4/21

Chapter 9 Hands-On Exercises

Chapter 9 Java Jam
4/21

Chapter 10 Hands-On Exercises

Chapter 10 Java Jam
4/25

Chapter 11 Hands-On Exercises

Chapter 11 Java Jam
  Link to Final Project Requirements

 

 

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