Wk8_In_Class

Today in class, we work on out final site plus the HW site. Seen the field trip was cancel for today again so it was cool.

For me, it was the same seen I been working on my HW site more so my Final Site is kind of no different.

Final Site
HW Site

Check it out ^^

What else I did was look at other students CSS Zen Garden.

Like:

• http://www.mezzoblue.com/zengarden/alldesigns/

But the one I really like out of that was:
http://www.csszengarden.com/?cssfile=203/203.css

The link above got me to think what I can do on CSS Zen Garden for me. I can't wait to start and to surprise you guys ^^

Over All Portfoilio Togetherf

Have you hear of "Bulletproof Web Design, 2nd edition" book written by Dan Cederholm. Well I had work on some of the chapter to see how they have done it. So now it time to put what I have learn together.



You can view it here: Final Site

The image that you see up on top is my Final Site, well going to be but it wasn't like my first idea (the image that you see below). There was so many ways that I wanted to go but I like how it turn out.



There a big different right? Well let me explain it so that it would be a little more clear. From what you see up on the top (just above this) I wanted the info to slide. I got that in my final site but I don't have the nav. in it. But that cool.

From the book, what I use is Chapter 5: rounded boxes on my Contact Me button (when you go to my final site, you would see the Contact Me button at the bottom right hand corner)

The people that got me to be created are Patrick L. and Kostra G. THX GUYS!!!!

HTML5

Hi everyone, today in class I learn HTML5 >.< There was so much typing seen Sharon wanted us to learn then copying and paste and I agree with her. If everyone just copy and paste the codes then we won't be able to learn what would do want and we would just be piss off at it.

I had Fun with the HTML5 ^^' even those there was so much typing >.< I brain is like on overdrive >.< But seeing Sharon getting a little lost once in a while is was funny and there was funny moment too LOL. It was a great day to be in class :) Kind of happy that class didn't go on the trip ^^'

The link below is one of the site we look at for help but I believe for the first half of the CSS that we type in class was different, well a little.

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

How The Web Wins

Evan Hansen's articles talk about how apps are taking over the web. I'm not sure if I agree. Apps are like of like web but they are still a little different in some way. So I believe that Apps are kind of not taking over the web. I mean apps are most on iphone the you would get on the web. People would still need to go on the web for the apps so app are not really taking over.

http://www.wired.com/epicenter/2010/08/how-the-web-wins/

Chapter 5

Chapter 5: Indestructible Boxes




The first one that you see is the Round Box, where all the corner of the box are round. Like in the first image but you can also see that I have round on some of the other places too. The second one is only a Single Rounded Corner, where only one corner is rounded. Like in the second image you see. It took me a while to get the one corner to fold.

Round Box's CSS:
body {
font-size: small;
font-family: Arial;
}

.box {
width: 273px;
background: #0FF;
height: 115px;
border-radius: 10px 14px 10px 14px;
-moz-border-radius: 10px 14px 10px 14px;
}

.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #000;
border-bottom: 1px solid #0F9;
background: #0F9;
-moz-border-radius: 10px 14px;
}

.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}

.box ul li {
margin: 0;
padding: 0;
}

.container {
float: left;
color: #000;
background: #90F;
height: 85px;
width: 155px;
border-radius: 12px 14px 12px 14px;
-moz-border-radius: 12px 14px 12px 14px;
}

.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: #99F;
-moz-border-radius: 12px 14px;
}

.link {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: #90F;
}

.container a {
font-size: 130%;
color: #99F;
}

Single Rounded Corner's CSS:
ol {
width: 22 em;
margin: 0;
padding: 0;
list-style: none;
}

ol li {
margin: 0;
padding: 1em;
}

ol li.alt {
background: #06F;
height: normal;
width: normal;
border-bottom-right-radius: 2em;
-moz-border-radius-bottomright: 2em;
}


Sources that I have helped me:
http://www.css3.info/preview/rounded-border/

Templates

Here is one of templates that I work on in DreamWeaver:



You can see where my navigation bar, Header, Footer, and content is going to be at. I got it from Dreamweaver then I color it so you could tell what is what.

The other templates that I maybe end up using would be Colin LewisWebsite and/or Patrick Loranger'sWebsite.

Upload TIME/Chapter 4 HW

Hi everyone, I know that I said been working on my website and I have but I had to change it up a little. The idea I had go ruin so I want with Plan B. It's kind of the same with Rants and Ideas but I'm changing it up. please keep in mind that I'm still working on it.

• My Website


• Week 3 (Note: If u need to refresh of what I did for week 3, clcik HERE)


• Chapter 4 for Week 4 homework

PLEASE NOTE THAT MY WEBSITE IS STILL BEING WORK ON

Create TIME

What get me to create moment?

The way I get create is by looking at what my classmate/ friends has and it just give me that rush. They inspires me in so many way that I just feel like I can't give up when I look at their work.

There would be time when I just want to give up but after looking at them and trying to talk to some of them, I would somewhat bounce back.

So thx guys for keeping that create/rush side of me to keep going.

Week 3: Reconstruct Site

From the image above, I had to reconstruct that site. To see the whole site, you can click on the site below:
http://casabasa.com/web/mm2213_wk1.html




From the 3 images above, are the finish on from the website above.

Note: the 3 images are different, first one is home, second one is study schedules and the last one is student's info.

Other Note: the website that is suppose to be link for the finish one is still on under-construction

CSS Code:

/* CSS Document */

html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#FFF; /*color background - only works in IE */
font-size:76%; /*set default font size */
font-family:georgia, "palatino linotype", "times new roman", serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
#content {
overflow:auto; /* add scroll bars as necessary */
position:absolute; /* position absolutely */
z-index:3; /* If required to cover any other divs */
top:97px; /* a value to miss the header */
bottom:50px; /* a value to miss the footer */
left:200px; /* a value to miss any navigation div */
right:0; /* this will put the scroll bar at the right of the page */
background:#0F9; /* set the background color */
}
* html #content {
height:100%; /* full screen height */
width:100%; /* full screen width 8/
top:0; /* place the content at the top */
left:89px; /* and left of the body */
border-top:100px solid #fff; /*add a top border to miss the header
(this is SUBTRACTED from the 100% height on quirks mode) */
border-bottom:50px solid #fff; /*add a bottom border to miss the footer
(this is SUBTRACTED from the 100% height on quirks mode) */
border-left:200px solid #fff; /*add a left border to miss any navigation div
(this is SUBTRACTED from the 100% width on quirks mode) */
}
#head {
position:absolute;
margin:0;
top:0;
left:1px;
display:block;
width:100%;
height:100px;
background-position: center;
background-repeat:no-repeat;
font-size:4em;
z-index:5;
overflow:hidden;
color:#000;
background-color: #0F9;
}
#foot {
position:absolute;
margin:0;
bottom:-4px;
left:-69px;
display:block;
width:100%;
height:50px;
font-size:1em;
z-index:5;
overflow:hidden;
background:#0F9;
color:#000;
padding-left: 150px;
padding-top: 10px;
}
#left {
position:absolute;
left:2px;
top:100px;
bottom:50px;
width:200px;
background-repeat:no-repeat;
font-size:1.2em;
z-index:4;
overflow:auto;
background-repeat:no-repeat;
background-color: #0F9;
}

* html #left {
height:100%; top:-10px; bottom:0;
border-top:100px solid #fff;
border-bottom:50px solid #fff; color:#fff;
}

#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}

dd {display:none;}
a.nav, a.nav:visited {
margin-left:50px;
display:block;
width:100px;
height:50px;
background:none;
color:#000;
border:1px solid #000;
text-decoration:none;
text-align:center;
line-height:25px;
}
a.nav:hover {background:#000; color:#fff;}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
background-color: #FFFFCC;
}
a:active {
text-decoration: none;
}
/*
CSS layout © 2004/5/6 Stuart Nicholls
*/

Note again: finish page for this is under-construction, sorry

Box Model

Box Model are a great way for people that are just learning CSS.

Key Words:
content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
border edge
The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
margin edge or outer edge
The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.


Here the code for the image on the left:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

From the image that you see,

that the content is 300x200px in the center, padding is 10px that around the content, border is 1px that around the padding and the margin is 15px that way it wont cover another part of your website or content.

Sources:
http://www.w3.org/TR/CSS2/box.html
http://reference.sitepoint.com/css/boxmodel#