Welcome to the beginning web design course at FCC. There are a few
items that will help speed the first session of the course along;
first, I assume that everyone has access to a computer. We will be
discussing development tools in the first session, you are in no way
expected to know about the tool that we will be using in the course to
develop pages, but that should not stop you from downloading and
installing the development environment at home.
You can find the software at http://www.aptana.com/products/studio3 .
This software is open source and therefore costs you nothing to
install and operate at home.
Second, you will need a Frederick County library card! If you do not
have a Frederick County public library card and live or work anywhere in
Maryland, or have an Alexandria, Falls Church, Washington D.C,
Arlington; Fairfax, Loudoun, and Prince William county you may stop by
one of the Frederick County branches and get a library card for free.
Please see www.fcpl.org for locations and more information.
We will be using the Frederick County public library SAFARI online subscription
for reference material. If you are not a Frederick county resident you
may still get a library card by paying a onetime fee of $40.00, please
check the site and contact the library for more information. To access
Safari online navigate to the FCPL website
http://fcpl.org/research/resources/ebooks.html , click on Safari Tech Books Online and enter your library card number.
The specific books that will be covered are the CSS Cookbook (O’Riley Publishing, with the bear on the cover), and Head First HTML, here’s a sample from the publisher.
I look forward to helping you build your first website!
Session 1 – What is HTML?
Slides for session 1 can be found here.
Some interesting links.
How design changes through the years.
Session 2 – Common tags, tables, and starting the design process
Breaking down pages – why there are no secrets on the internet
Want to give it a try, just download the firefox plugin firebug from this site.
Now for the slides!
Ready for a challenge? You could come up with a website for some hobby that you have over the weekend using squidoo, the instructions are here, and even tough this is not going to improve your html skills, it will get you thinking about the more important piece of web design, ensuring that you have interesting, engaging content!
Session 3 – Design, putting it all together.
Slides for session 3 can be found here.
Session 4 – Making your pages so something using basic javascript, and html forms!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dice Games</title>
<!--
Any Craps: Wins if a 2, 3 or 12 is thrown. Payoff 8:1
Any Seven: Wins if a 7 is rolled. Payoff 5:1
Eleven: Wins if a 11 is thrown. Payoff 16:1
Ace Duece: Wins if a 3 is rolled. Payoff 16:1
Aces or Boxcars: Wins if a 2 or 12 is thrown. Payoff 30:1
Horn Bet: it acts as the bets on 2, 3, 11 and 12 all at once. Wins if one of these numbers is rolled. Payoff is determined according to the number rolled. The other three bets are lost.
-->
<script type="text/javascript">
var die1; // Declare outside of the function to allow data to be assigned to it!
var die2;
// Let's Create Our Own Objects!
var any_craps = new betType();
var any_seven = new betType();
var eleven = new betType();
var ace_duece = new betType();
var ace_boxcar = new betType();
var horn_bet = new betType();
function hideResults() {
var results = document.getElementById("results");
results.style.visibility="hidden";
}
function showResults() {
var results = document.getElementById("results");
results.style.visibility="visible";
}
function rollDice(){
die1 = Math.floor(Math.random()*6) + 1;
die2 = Math.floor(Math.random()*6) + 1;
//alert(die1);
}
</script>
<!-- Remember Lesson 1! -->
<style>
.dice{
width:40px;height:40px;border:1px solid #000; display:block; margin:10px;
}
</style>
</head>
<body onload="hideResults()" style=" font-family:Arial;">
<h1>Try your luck!</h1>
<form onsubmit="rollDice()" >
Please Enter Your Wager: <input type="text" id="wager">
Please Select Your Bet:
<select id="bet_t">
<option value="1">Any Craps</option>
<option value="2">Any Seven</option>
<option value="3">Eleven</option>
<option value="4">Ace Duece</option>
<option value="5">Aces or Boxcars</option>
<option value="6">Horn Bet</option>
</select>
<br />
<input type="submit" value="Roll The Dice!" title="Roll The Dice">
</form>
<div id="results" class="help">
<h2>Ok Let's See How You Did!</h2>
<div id="d1div" class="dice" >
</div>
<div id="d2div" class="dice">
</div>
</div>
</body>
</html>