==================================
DUE, MONDAY JULY 23RD
==================================
Welcome to the land of DIV tags and CSS Button Creation… the ride may become a little bumpy for some of you… but press through it… the information is really important for your growth as well developers…
For this assignment you will :
1 – Create a page that depends on div styling
2- Create a page with atleast 1 button that has the button states of: hover, active, an default.
3- Create a page that combines your div style knowledge and your button styling knowledge…
NOTE: That means you will need to create 3 pages… more on what are required for each of the pages in the following material… so please read on!!
==========================================================
HERE IS THE VIDEO TUTORIAL FOR THIS SECTION/LECTURE
** WARNING: the beginning of the video unexpectedly has VERY HIGH PEAKS IN VOLUME OR HIGH VOLUME & I APOLOGIZE. I recommend keeping the volume setting in the middle or low until after the first clip is over… after that it should be smooth sailing and you are welcome to blast the tutorials as you wish… ***
This is Part 1 of a 3 Part Video Tutorial
Here is the link to the video: https://vimeo.com/45915846
The password is still: Thunderbird2012
Div Tags, Creating Buttons with CSS, & Connecting Multiple CSS Style Sheets from www.justinhoffman.net on Vimeo.
====================================================================
Div tags are containers ( like rubbermaid ) or wrappers ( as in a gum wrapper ) that encapsulate the code and deliver all of the code within their grouping in an organized fashion… For example in the past we utilized <head> & </head> or <body> & </body> …
These could be considered really large containers in the structure of a website… div tags give you an opportunity to make smaller organizational specifications as you desire and really take hold of your website…
Other divs could be consider <p> for paragraph that you already know and love… and <span> which is extra credit if you want to use it in this assignment!!
These are examples of div tags created on a css style sheet …
EXAMPLE A –
div.header { BORDER-RIGHT: #87ceeb 1px solid; PADDING-RIGHT: 2px;
BORDER-TOP: #87ceeb 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bolder;
FONT-SIZE: 30px; }
EXAMPLE B --
#graybox { background-color: #ccc; padding: 1em }
Here is a link to a css page that you can use at your leisure with
some code in it...
These are examples of html … linking to a style sheet … and associating with a div tag that was created there…
EXAMPLE A --
<div>The Divided Blue Line </div>
EXAMPLE B --
<div id="graybox">
Here is a page that utilizes the css code from above, creates the linkage… and displays it in html form…
==========================================================
You may be thinking that the two examples in css look differently created than you are accustomed to… and you would be 100% correct with that assumption…
In the past we discussed with different ways to code that focused on selectors or creating class structures…
In the past we utilized html elements or attributes to do this task for example the code may have looked like this:
Here is an element:
<p> This is a paragraph. </p>
Here is an attribute:
<p> This is a paragraph. </p>
these are built into the browsers library and understanding and do
not need a lot of verification to function...
==========================================================
The second type which is utilized in example A .. is called CSS selectors … the look like this: .intro { color: red; } or div.header { BORDER-RIGHT: #87ceeb 1px solid; PADDING-RIGHT: 2px; }
Notice the "." is the indicator that really powers the selector ,
and the advantage of this type of element is that there are some
libraries already created and you can also add new names if you please...
for example maybe you want to call it "div.caspercollege" instead of
"div.header"
==========================================================
The last example we will discuss is creating an ID selector in html with a “#” symbol… this provides you with a lot of flexibility as you can essentially create your own definitions and libraries to build your html linkages… as seen in the example:
#graybox { background-color: #ccc; padding: 1em }
I named it graybox because it creates a graybox… and makes it easier for me to understand the organization of my site… no more logic need… pretty sweet huh? You can name it after your name, your pets, your parents, or your enemies!! If you don’t get the main idea though… it is best to give the ID selector a name that you can remember…
==========================================================
Ok… now that you have an idea … I would recommend that you create a div page like the one below … as this is also your first step in completing the assignment… Change the colors… play around a little … but don’t get too bogged down with it.. as it would become clearer as you reflect on it…
Here is the link to that page: http://www.buyadoo.com/cssdiv/div.html
and it is powered by the css of this page: http://www.buyadoo.com/cssdiv/div.css
==========================================================
Here is Part 2 of the 3 Part Video Tutorial
Here is the link to the video: https://vimeo.com/45933019
The password is still: Thunderbird2012
Creating a Buttons with CSS — Part 2 from www.justinhoffman.net on Vimeo.
==========================================================
STEP 2 == Build a page with atleast 1 button that has all 3 of the button states…
A. For this exercise you will need to create a button that has 3 states: default, hover, and active, as defined below…
DEFAULT BUTTON STATE : Is the state of the button or html element when we first open the page…
HOVER BUTTON STATE: Is the state of the button or html element when our mouse cursor is “hovering” over the button element on the page … this function will often change the element that the cursor is hovering over…
ACTIVE BUTTON STATE: This is the state of the button after it is clicked on… the user will usually leave the page… when they return the button will have changed to what ever the specified attributes you associated with this state… we will often see the button as a different color when we return…
B. You will need to utilized either absolute positioning, relative positioning , or fixed positioning…
Absolute Positioning: This will position your element exactly where you would like it … for this assignment this will make things easier … but later on down the road it could become a nusiance because when someone changes the browser window… often times the element will stay stubborn, not move, and ruin the viewing experience…
position: absolute;
top: 20px;
left: 50px;
Relative Positioning: This will position your element relative to the other elements on the page and can sometimes create varied number values to items that may be perfectly horizontally or vertically aligned… the good news is that this type of styling will reposition when an individual moves the browser window…
position: relative;
top: 20px;
left: 50px;
Fixed Positioning: This is a sub category of absolute positioning will not move if the website is scrolled and will position your element far right or far left… the code looks like this:
position: fixed;
float:left;
======================================================================
Ok lets create that Button Page…
You will see the example page for the css here: http://www.buyadoo.com/cssbutton/csston.css
You will see the example page for the html here: http://www.buyadoo.com/cssbutton/button.html
You can download the image for this exercise here: http://www.buyadoo.com/cssbutton/agreenbutton.png
Go ahead and view the source code… download the image… make your own folders … modify the button file… modify the code’s attributes… etc… etc…
============================================================================
Remember for this activity create atleast 1 button with the 3 different unique states… it obviously looks better if you changed the image … varied the positioning … changed the colors… provided a background… text… ect… ect…
============================================================================
STEP 3 — IN THIS PART OF THE TUTORIAL WE ARE HARNESSING THE INFORMATION YOU JUST LEARNED AND EXPANDING UPON IT WITH UNDERSTANDING HOW TO TRULY CREATE DIFFERENT STATES FOR YOUR BUTTONS… **THIS IS A BIT OF REPETITION**
at this link: http://www.buyadoo.com/cssbutton2/button2.html
the css is here: http://www.buyadoo.com/cssbutton2/ex2.css
the tv gif is here: http://www.buyadoo.com/cssbutton2/tvinside.gif
the animated bananna gif is here: http://www.buyadoo.com/cssbutton2/banana.gif
In this example we have 3 buttons … With animated gifs as our hover !! As we know animated gifs work very similar or almost exactly like a regular image so we can get a lot more value out of the hover when we play with animated gifs when people hover or in the active state…
We have also used absolute positioning to move the buttons far down the page … below the <h1> or header text…
THIS IS THE CSS CODE
#Button
{
position: absolute; left: 0px;
top: 300px;
width: 500px;
height: 170px;
background: url("tvinside.gif") no-repeat 0 0;
}
NOTE: Be careful when using this code as “tvinside.gif” only relates to that folder and “http://buyadoo.com/cssbutton/tvinside.gif” would be more bulletproof…
======================================================================
THIS IS THE HTML CODE
<a id="Button" href="http://www.justinhoffman.net" title="Class Web Site"><span></span></a>
NOTE: In the above example the link… href=”http://www.justinhoffman.net”
will point to the place we want the link to point…
which in this case is www.justinhoffman.net…
It is not pointing back to the image that is being used as
the button in the example..
*** HINT!! THIS IS THE PLACE WHERE YOU CAN CONTROL WHERE THE LINK OR BUTTON POINTS WHEN SOMEONE CLICKS ON IT… LIKE WHEN YOU NEED TO POINT YOUR FINAL PAGE TO THE PREVIOUS CREATED PAGES!! ***
======================================================================
Here is Part 3 of 3 for the Video Tutorial…
Here is the link to the video: https://vimeo.com/45933145
The password is still: Thunderbird2012
Modifying Div Tags, Creating Buttons, Using Multiple Style Sheets — PART 3 from www.justinhoffman.net on Vimeo.
======================================================================
4TH STEP — WE WILL NOW INTEGRATE MULTIPLE .CSS FILES TO ONE .HTML DOCUMENT … IN THE EXAMPLE WE WILL INCORPORATE ALL OF THE WORK THAT WE HAVE DONE UNTIL THIS POINT
You have pretty much done everything you need to accomplish to get this all done… the only tricky part may be integrating the multiple css files which look like this in the “crazytown” example…
<link rel=stylesheet href="http://www.buyadoo.com/cssdiv/div.css" >
<link rel="stylesheet" type="text/css" href="ex2.css" />
<link rel="stylesheet" type="text/css" href="csston.css" />
I linked to 3 .css pages… but you are only required to link to two!! Make sure — as usual — that this is placed in the header of your main .html file …
NOTE: Don’t have duplicate or overlapping commands for your css commands for example if you have two <h1> commands over two .css documents it will just choose one of them… as it can only display 1 at the end of the day… if you want to create two header styles… you can always have 1 .css document say <h1> and the other can say <h2> !!
======================================================================
OK … CONGRATS ON FIGURING ALL THAT OUT… GO HAVE A WALK, A TEA, A COFFEE, OR WHATEVER YOU DO TO DECOMPRESS… YOU ARE 80% OF THE WAY TO THE FINISH LINE!!!
======================================================================
NOW I WILL REPEAT THE ASSIGNMENT IN GREATER DETAIL:
1 – CREATE A DIV STYLE PAGE… USE ATLEAST 2 DIV STYLE ELEMENTS
2- CREATE ATLEAST 1 BUTTON ASSOCIATED WITH A .CSS PAGE … AND WITH YOUR OWN UNIQUE BUTTON IMAGE/IMAGES… THAT 1 BUTTON SHOULD HAVE 3 UNIQUE STATES: HOVER, ACTIVE, AND DEFAULT
3- CREATE A PAGE:
– THAT COMBINES BOTH DIV TAGS FOR THE AESTHETIC MEAT OF THE APPEARANCE
– ATLEAST 3 BUTTONS WITH 3 UNIQUE STATES: HOVER, ACTIVE, AND DEFAULT…
– MAKE THOSE 3 BUTTONS LINK TO THE PREVIOUS WORK YOU HAVE DONE IN THIS ASSIGNMENT FOR ATLEAST TWO OF THE BUTTONS … YOU CAN LINK THE THIRD BUTTON TO WHATEVER YOU WOULD LIKE…
– USE 2 STYLE SHEETS TO ACCOMPLISH THIS PORTION TO CREATE THE “CRAZYTOWN” PORTION OF THE ASSIGNMENT
4- WRITE A 3 SENTENCE SUMMARY OF YOUR EXPERIENCE WITH THE “DIV” PAGE.
– WRITE A 3 SENTENCE SUMMARY OF YOUR EXPERIENCE WITH THE “BUTTON” PAGE.
– WRITE A 3 SENTENCE SUMMARY OF THE DECISIONS YOU MADE, YOUR INFLUENCES AND A RATING FROM 1-5 OF YOUR OPINION OF THE ASSIGNMENT…
5- THATS IT!! ITS OVER!! GO CELEBRATE!!!
