Mendocino College: September 2013

Tuesday, September 24, 2013

Business Page Framework

On Friday we began building our business web sites. You are going to build a web site for the business of your choice, and we started with this HTML framework:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Business</title>
<link href="mybusiness.css" rel="stylesheet"></link>
</head>
<body>
<div id="wrapper">
<h1>My Business</h1>
<div class="nav">
 <a href="http://draft.blogger.com/index.html">Home</a> &nbsp;
 <a href="http://draft.blogger.com/option1.html">Option 1</a> &nbsp;
 <a href="http://draft.blogger.com/option2.html">Option 2</a> &nbsp;
 <a href="http://draft.blogger.com/option3.html">Option 3</a> &nbsp;
</div>
<center>
<img src="mypicture.png" width="500" /></center>
<div>
 My Business
 1234 Main Street
 Kelseyville, CA 95451
 (707)123-4567
</div>
<div id="footer">Copyright © 2013 My Business, Inc.
<a href="mailto:youremail@mailplace.com">youremail@mailplace.com</a>
</div>
</div>
</body>
</html>

And then we have a basic framework for the CSS as well which we call mybusiness.css:

body   {
  background-color: #ffc373;
  color: #a65f00;
  font-family: Verdana, Arial, sans-Serif;
  }
#wrapper {
   margin-left: auto;
   margin-right: auto;
   width: 80%;
   }
h1  {
  background-color: #a65f00;
  color: #ffc373;
  line-height: 200%;
  text-align: center;
  }
h2 {
  background-color: #a65f00;
  color: #ffc373;
  line-height: 100%;
  text-align: center;
 }
.nav {
  text-align: center;
  }
a:link {
 color: #000000;
    }
a:visited {
 color: #000000;
 }
#footer  {
  text-align: center;
  background-color: #a65f00;
  color: #ffc373;
  font-size: .60em;
  }

I put a graphic in the web site (mypicture.png) which you can download here as well:

We also explored a few Color Scheme Designers to find good color schemes for our business pages.
http://www.designcontest.com/blog/best-color-scheme-websites-for-designers/

Sunday, September 22, 2013

Student FTP Accounts

FTP accounts: The following are the FTP account names. Your password will be your six digit birth date (i.e. mmddyy -- so 022689 would be the password if your birth date was February 26, 1989).

Username	Name
adaugherty	Amber Daugherty
aparmenter	Andrew Parmenter
arazo	Ana Razo
btamayo	Bianca Tamayo
dtolles	Dylan Tolles
ecook	Evan Cook
fpena	Fred Pena
gceja	Gracie Ceja
gspence	G. Daniel Spence
jclover	Jesse Clover
jkrauth	Jennifer Krauth
jshun	Josey Shun
jsolgat	Jacqueline Solgat
jsolgat2	Justine Solgat
kdonham	Keary Donham-Greene
mhughs	Mark Hughs
mkirk	Marcus Kirk
msunbeam	Moses Sunbeam
rbarnett	Rachel Barnett
rcolby	Raymond Colby
rkee	Ronny Kee
rleonard	Richard Leonard
rlupian	Rodolfo Lupian
rthompson	Reba Thompson
salire	Steven Alire
tfletcher	Tyler Fletcher
tkerrigan	Trilby Kerrigan
wschlosser	William Schlosser

Tuesday, September 10, 2013

This is an old [out of print, I assume] version of the textbook. It's not exactly what we've been covering, but it's close enough to get you by for now. I will keep looking.

Web Development and Design Foundations With XHTML V5 by Ashateer2010

Tuesday, September 3, 2013

INTRODUCTION:

If you're feeling relatively comfortable with the basics of HTML then we can move on to CSS. You'll find that CSS is very similar to the HTML basics you have learned so far, but it looks a little different. Remember that although you can build web pages without CSS, it can be a very valuable skill set and can allow your web pages to be:

Easier to maintain
Easier to index by search engines (more about that later)
Cleaner (at least as far as your source code)
More accessible (works better with screen readers, for example)

ASSIGNMENTS:
First (obviously) is to begin reading Chapter 3: Configuring Color and Text with CSS:

Check the course textbook web site: http://webdevfoundations.net/6e/chapter3.html
- View some of the Accessibility & Usability links and view your favorite pages through the eyes of people with color deficiencies.
- View the links under Inspiration.
- Check out some of the Selecting Colors for Your Web Site links and see if any color schemes are to your liking -- or if they fit the ideas you have for your own site.
Work through the Hands-On Practice 3.1 (page 84)
- There is a video demonstration of this in the Supplemental Resources forum.
Download the "student files" packet from the publishers web site. (or here)
- Unzip the files to a folder on your computer for easier access.
Begin Hands-On Practice 3.2 (page 86)
- Open the starter.html file from the Chapter 3 folder in Notepad (or another HTML editor).
- Continue with Hands-On Practice 3.2
Work through the remaining Hands-On Practices (pages 91-109) -- they really will help with your understanding of CSS and build on your comfort level with HTML. (And make it possible to complete the Case Study projects, obviously)
Try out the Focus on Web Design task (page 115-116) to begin experimenting with color. Some of you with "mad design skills" won't have a problem with this one, but if you're one that is "artistically challenged" these links can be very helpful. Some of this is redundant from the online links we explored earlier, but it's definitely worth a go.
Now for the Case Study projects...
- Implement CSS for JavaJam Coffee House (pages 116-118)
- Implement CSS for Fish Creek Animal Hospital (pages 118-121)
- Implement CSS for Pasha the Painter (pages 121-124)
- Implement CSS for Prime Properties (pages 124-127)
Check out the Supplemental Resources forum. If you have enough bandwidth, view a video tutorial or two. I hope to be adding much more (links, downloads, etc.) in there very soon.

OPTIONAL / RECOMMENDED ASSIGNMENTS:

If you have some time this week, try out the Apply Your Knowledge tasks on pages 111-113. I think you'll be surprised that you're starting to understand "coding" and even being able to see when something is wrong. It's not always easy, but you're getting there. :)
If you are feeling adventuresome, try out the Hands-On Exercises (1-9) on pages 113-115. These exercises are meant to reinforce the techniques you learned in Chapter 3. If you are still feeling a little unsure of yourself, this will probably help you.

Chapter 3: Supplemental Videos

This is a series of video tutorials where I work through the basics of CSS. It won't match up with the chapter assignments necessarily, but it demonstrates how CSS works pretty effectively..
http://youtu.be/zKUcJeOF9aI