WEEK FOUR!

It's hard to believe that its week 4 already!! Keeping busy learning code and studying. I'm really enjoying the course and can't wait to create masterpieces after learning all of the tricks of the trade!


This week we learned about how to place images. After working on my Case Study we have options to do practice lessons. I chose to do one that involves picking your favorite movie and building a multiple page web site. So this is my attempt at this lesson. Keep in mind I'm in the beginning stages so it's nothing fancy but still fun!

This is the home page. We learned how to apply a repeat background (see left) and how to place images on the page involving padding, pixels etc. 

This is the Starring page using thumbnails to link to another picture.

This is the picture that enlarges when you click on the thumbnail.

This is the cast page. I'm trying to make an image map of each face so that you can click on each face and it takes you to their bio. However, number one, I can't figure out the correct pixels to place the coordinates and number two, I wanted to just link the names to an individual picture and I can't figure that out either. So I'm rereading and scrounging through the book to get it right. I'll get it, I just have to keep chucking away at it!

Anyway, this week we are studying design and page layout. As a graphic designer, this is right up my alley!!! So fun!

Until next week!!!

WEEK THREE!

We move on to Chapter 4 concentrating on putting images into the web page. As a graphic designer, now it's getting interesting!

After reading the chapter, highlighting, taking notes, doing the definitions and taking the mock test at the end of the chapter I feel prepared for the quiz this week.

My case study revolves around the Fishcreek Animal Hospital. My case study from Chapter 3 was not going well. I couldn't get the stylesheet to jive with the web page. After a few emails to my teacher he was able to find my mistake and now I see what I did wrong. It ended up working.

I moved ahead and did the case study for Chapt 4. It turned out great.

This is the web page using images. I can't wait to get to the point where you can have pictures all over the place and multiple colors etc. In due time....

I've been driving my husband crazy because I am living at my computer trying to figure this stuff out. But I'm really enjoying it.

One of the practice assignments is to pick your favorite movie and make a web page. Here's my first attempt from scratch. Keep in mind I haven't learned all the tricks of the trade yet.

This is just the bare bones beginning web design but at least I'm understanding the terminologies and getting things to work. But I'm far from the fancy, wiz bang pages. I'll get there.

Eventually I'll get better and better but I find the class so interesting and the professor is great, very energetic!

Here's something else I accomplished today. I designed the Timeline header for my husband's Facebook page. He's currently in Culinary School.

This is the Timeline I designed for my husband's Facebook page.

Hard to believe I'm starting the fourth week of class already!

Week TWO!

Week 2 - First Quiz!
The anticipation of my first quiz was killing me. But the quiz was handed out and by the second page I knew all the answers! In the end I missed 2 questions and I know why I got them wrong. So not bad for the first quiz in 26 years!


I felt so good that I studied so well, comprehended the material and enjoyed the class lecture.


Week 2 - Studying Chapter 3 for class on Monday night 2/13/12.

Okay, so Chapter 3 didn't sink in quite so easily the first round!!!

So I read the Chapter and then I closed the book. Thoughts of running screaming from the room crossed my mind! I picked it up again and highlighted all of the important parts while re-reading the chapter. This time around it started sinking in. Then after doing the practice exercises I was back on track! Mind you, not 100% but comprehending.


Learning the beginning of CSS - Cascading Style Sheets


Inline Styles
Embedded Styles
External Styles
Imported Styles
Class Selector
id Selector
Div element
Span element
External Style Sheets


The key is knowing when to use them and where to put them!

Reading and scribbling notes! Do the practice exercises. They say that practice makes perfect and it's so true. Doing the code over and over again can only help!

I'll get it. I have plenty of questions for Monday night. I have my Case study from Chapter 2 done. In the meantime I'll keep hacking away at the keyboard using JEdit to get these pages to open and look right.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <title>Trillium Media Design</title>
    <style type="text/css">
    body { background-color: #E6E6FA;
           color: #191970;
           font-family: Arial, Verdana, sans-serif;
    }
    h1 { background-color: #191970;
         color: #E6E6FA;
         line-height: 200%;
         font-family: Georgia, "Times New Roman", serif;
           
    }
    h2 { background-color: #AEAED4;
         color: #191970;
         font-family: Georgia, "Time New Roman", serif;
    }
    p { font-size: .90em; }
    ul {font-weight: bold; }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    <body>
    <h1>&nbsp; Trillium Media Design</h1>
        <p><a href="index.html">Home</a> 
<a href="services.html">Services</a> 
<a href="contact.html">Contact</a></p>
    <h2>New Media and Web Design</h2>
        <p>Trillium Media Design will bring your company's Web presence to the next level.<br>
    We offer a comprehensive range of services:</p>
            <ul>
                <li>Web site Design</li>
                <li>Interactive Animation</li>
                <li>E-Commerce Solutions</li>     
                <li>Usability Studies</li>
                <li>Search Engine Optimization</li>
            </ul>
        <h2>Meeting Your Business Needs</h2>
            <p>Our expert designers are creative and eager to work with you.<br>
  Take advantage of the power of Web 2.0!</p>
          <p>Copyright © 2012 Your Name Here</p>
    </body>
</html>

This is what the above code looks like.

Now I'm going to stop for the night and think of lovely thinks like flowers and birds and birthday cakes.

Flower planter outside of the Beach Club Resort at Disney.

Audubon print of the American Flamingo.

Flower Birthday cake!

XHTML!

BACK TO SCHOOL!

It's been 26 years since I last stepped foot on a college campus. I graduated in 1985 with a degree in Printmaking/Drawing. This degree lead me into the world of graphic design and it's been where I've lived professionally for the past 26 years.


Now that the job market has undergone so many changes and I have learned the hard way about outsourcing etc., I'm on the hunt for my next job. One of the factors that is missing in all of my years of experience is web design. So here I am, I'm going to learn it.


Enter classroom on January 30, 2012. Stetson University at Celebration. Beautiful new building. State-of-the-art classroom. Four students. One very enthusiastic teacher. All the ingredients for a great experience.

The entrance to Stetson University at Celebration. 

But XHTML you say? Really? You're going to learn it from scratch? You're not going to just buy Dreamweaver and Flash and have at it? Well, there are two reasons for XHTML from scratch. The first is according to the WorkForce Matrix this class was the only Web Development class available that they would pay for. (#1 Good Reason). The second is that I really do want to know how to do it from scratch. How can that possibly NOT make me more marketable?


So here it is, everything you need to know about XHMTL. THE BOOK....

It looks big and scary but so far I'm actually comprehending it. Let's hope I comprehend enough for the first quiz right? I have to admit, I was worried that it would all be so overwhelming and the code would just go in and out of my brain. I am happy to say that as I have worked on homework all week I have enjoyed taking notes, enjoyed learning the terminology and enjoyed actually creating a concrete result from the code. Mind you, it's just text we're working with in the beginning. Nothing wiz bang right now. But I'm excited that I'm enjoying it. It's like a big puzzle and the code will tell you if you're right or wrong. It could be something as simple as not putting the correct arrow around a tag or leaving off a tag altogether. You have to hunt for the mistake and when you find it, voila, you have a web page!

Here's what it's like to get through this course. You have to study, you have to do the hands-on practices and you have to keep typing until you get it right. Love it!

Here's an example of the code for a page in a practice exercise. You have to build a page (text only) that is titled with your favorite musical band, list the members of the band, 3 or 4 of their CDs with a review, and link it all to their website. After studying and doing the hands on practices through each section you begin to really take this stuff in. I'm a typer. I have always been a typer. If anyone needed lots of text for an ad or brochure I was the “go to” person. Val will type it! So I love all of this typing.
So below is all of the code required to create this web page. (Remember, it's just text that we are working with right now. Nothing fancy just yet. Just understanding the terminologies.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Zac Brown Band</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1><strong>The Zac Brown Band</strong></h1>
<ul>
<li>Zac Brown - Lead Vocals, Guitar</li>
<li>Jimmy De Martini - Violin, Vocals</li>
<li>John Driskell Hopkins - Bass, Vocals</li>
<li>Coy Bowles - Guitar, Organ</li>
<li>Clay Cook - Guitar, Organ, Mandolin, Pedal Steel, Vocals</li>
<li>Chris Fryar - Drums</li>
</ul>
<dl>
<dt><strong>The Foundation</strong></dt>
<dd>Newcomers to the country scene, The Zac Brown Band delivers a heartfelt<br />
countrified sound that beckons back to that good old foot stomping music of yesteryear.</dd>
<dt><strong>Live From Bonnaroo 2009</strong></dt>
<dd>The Zac Brown Band perform live at Bonnaroo 2009 a Music and Arts Festival in Manchester, TN.<br />
The music envelopes the crowd and brings country to the masses clapping and singing all the way.</dd>
<dt><strong>Pass The Jar</strong></dt>
<dd>Country doesn't get any better than this. Soulful, gritty and just plain down-home.<br />
Featured songs, Jolene and The Devil Went Down to Georgia are proof why a screaming fiddle<br />
is rooted in country music.</dd>
<dt><strong>You Get What You Give</strong></dt>
<dd>This fourth and latest release proves that The Zac Brown Band is here to stay. True lyrics,<br />
soulful country twang, and collaborations make them a unique sound in the country music genre.<br />
Features duet with country sensation Alan Jackson, entitled "As She's Walking Away."</dd>
</dl>
<a href="http://zacbrownband.com">zacbrownband</a>
</body>
</html>


This is what the result of all of the above code looks like. 

I have a few more exercises to do but the first assignment (Chapt. 2) is coming right along. Here's hoping for Chapt. 3 Monday night.


Living in XHTML land!