Web Design, NJCU

 

My Office Rm. 229
Please make an appointment ahead of time.

The book that I recommend is HTML & CSS Design and Build Websites, by Jon Duckett (Wiley & Sons, publishers)

Go to Page of Useful Links, Click Here.

In order to make sure that I will be available for you during office hours, you must make an appointment. Emails:
jpihlblad at comcast.net or jpihlblad at njcu.edu
Date: Outline of Class Activities: Links and Download-Files:
Week 1

1. Fill out questionnaire, have your picture taken.
2. Go over the Syllabus.
Class ended early because of broken A/C.

1. Syllabus.
2. Questionnaire.

Week 2

1. Introductions.
2. Slides: Web Design Introduction

Navigation assignment

Week 3
See powerpoint of some basic HTML and CSS.

Welcome to JSBin

Blog Assignment

 

Exercise:: Fix My Broken Web Pages!

I've put up some web pages, but they're not looking right. I think they have syntax problems. Can fix them for me, please?

Open the JS Bin links below. The errors in these pages are all syntax errors, and most are due to misplaced symbols and characters. When you start editing the HTML of these pages, the system will automatically create a new copy just for you. (The address bar will change to reflect your new version.)

By the way, the original (broken) version stays intact, so if you need to start over from scratch, just
click the links below again.

My Versions:
http://jsbin.com/poxeqi/1/edit

http://jsbin.com/berug/1/edit

http://jsbin.com/gijoqo/1/edit

http://jsbin.com/fuvitokepewe/1/edit

 
Week 4
1. Powerpoints and exercises in class.
2. Learn how to embed a style sheet in the head.
3. Work on your Resume.

Please fix these pages:

http://jsbin.com/rawiri/edit?html,output

http://jsbin.com/payexe/edit?html,output

http://jsbin.com/yujino/edit?html,output



 
Week 5
1. Powerpoint slides and exercises.
2. Set up a recipe page for Brownies, in JSBin, with HTML.
3. Style the page with CSS as shown, then re-style it your own way.
6. Homework is turning a recipe of your own  into a web page with HTML and your own styling. Use the recipe link for tapenade, if you don't have a recipe!

Look at the id selector and the class selector:
http://www.w3schools.com/css/css_selectors.asp


1. The Brownie recipe text, click here. Apply HTML first, then CSS.

2. Link to Food TV page with Brownie recipe.

3, Source Code, to help you proof!

4. Homework exercises, Tapenade recipe to set in HTML and style with CSS.

Week 6

1. Look at the recipes you styled, and talk about your experiences.
2. Use the linked-downloadable party invitationas a comp and make it inot a web page in JS bin.
4. Learn how to use web fonts.
5. Learn how to measure pixels in Photoshop.
7. Learn styling with Class Selectors.
8. Next exercises, make a web page of your resume. Use HTML and CSS to style it.
9. When you finish that, begin making your blog into a web page.

Next week we'll learn how to put images into a page, but you are welcome to read aheadin the book about this.

See helpful links on the Good Links pages.

Downloadable Party Invitation, Photoshop File.

Downloadable Party Invitation, PNG File.

Resume Homework Exercise.

Week 7

1. Styling the Party Invitation.
2. Webfonts.
3. Style tag in the head.
4. Styling with the Class tag.
5. Styling with the Span tag.
4. One version of Navigation Code, using the ID tag.

Here is a link to the HTML for the Party Invitation

Slide shows of building and styling the Party Invitation:
Part One, click here.
Part Two, click here.

Code for a Navigation Bar, click here.

Week 8

1. Images and folder structure.
2. Saving images for the web, and optimizing.

Reading: Web Essentials
Reading (from the text book)
Study Questions

Week 9

Demonstrate CMS and Wordpress templates.

Link to pdf of links: All sites she showed and discussed.

Extra
Powerpts

URL & Folder structure (powerpoint as a PDF), click here to download.

Web rules: naming files; folder structure, powerpoint as PDF), click here.

Things to remember, powerpoint as PDF, click here.

 
Week 10

1. Validate your coded page, check to find errors in the code.
3. The Dreamweaver Interface.
4. Demonstration and Exercise: Creative Rollovers, including saving for web and folder structure.
5. Site maps and wireframes.

Browser display screen dimensions, then click on screen & color statistics. A desktop/laptop site could be 960 x 500, but there are a lot of screen sizes out there. Ask yourself, is the document going to sit on a iPhone an iPad or a computer monitor. For an iPhone 4 the format is 960x460 pixels, at 326 pixels per inch (ppi). An iPhone 3gs has 320x480 pixels.

Assignment: Plan your portfolio site.

Week 11

1. We will go over more code.
2. Your site-maps are due. I will check your progress individually. You should have your images chosen and saved for web in an approriate folder structure you have set up on your ubs drive.
3, Rollovers exercise in Dreamweaver to reinforce folder structure
4. I have some powerpoints, a review of folders, naming, etc.

 

Creative Rollovers Directions

Download practice photos:

statue2

statue1

Validate your site, click here.

Week 12

1. Have images resized and saved for web. Text should be already written.
2. Some practice with Muse.

Here is a link to the Terry White Youtube video we wathced about Muse: https://www.youtube.com/watch?v=ESUPCpOZ5Dc

Practice Muse Materials Zip File
Link to Muse Demo Notes

Link to Muse Tutorial:
https://helpx.adobe.com/muse/how-to/create-website.html

Intro to Dreaweaver demonstration
Define a Site
Use images as links, and divs and etc.

Week 13
Dec. 4

Check on your portfolio sites in progress.

Work with individual help, as needed.

 
Week 14

Work with individual help, as needed.  
Finals Week Present your fully functioning Portoflio Site.