onto INTERACTIVITY!
Alright, I came into the studio today and sat back down with my template to smoothen out the rough areas. the background image originally was a two color background. That wonderful Green and Dark grey. My main concern was that no matter how it works I want the background to continue for ever. I am personally not a big fan of boxes, I feel claustrophobic when I am at a site that has a background color and a container color of a different type. So this was working until I realized that in order to repeat either x or y it would repeat the 2 colors. ... not what I was looking for. So how to correct this? make the body color ONE COLOR and inside the container make a <DIV></DIV> with a ID of what ever you want it to be lets call it GREEN BACKGROUND. so it should look like this in your HTML....<div id="greenBackground"> and then ALL THE CONTENT YOU WANT TO BE WRAPPED AROUND IT...very important this took me a good 5 minutes to figure out.... aka grey box, logo, menu ect. close the </div> and make it the height and width and all the other fun stuff you want in your <div> to make it pretty. Fun lil day. Now that my template is done. INTERACTIVITY TOMORROW! I am going to take a break to go enjoy THIRD THURSDAY IN JOPLIN. sorry for all the caps. The way I plan on making the site function is.... there will be an ABOUT ME video on top of the website that will be viewable on all pages. The site will not seem to change but when you click on the navigation bar the content below will change accordingly. The home page will show my most recent work as well as a RSS feed and my Facebook updates ect. The work will have a functional gallary of everything, that will be the next adventure. the blog will simply have a formatted version of my whereAbouts in the blogosphere. and my CALL ME button will of course have a handy way to get a hold of me via email, phone, ect. here is my home page template below on a wonderfully huge screen to capture how the repeat process worked, which you can see other examples such as the Pittstate Website where the header is red and will continue across the x axis. Enjoy:)
 |
| Top and bottom of hand written CSS/HTML with a repeat <div> and <body> color to accomplish an open feeling inviting website. |
May 18, 2011 Day 4:
Create My Portfolio Site.
The past few days have allowed me to use the skills that I have gained to take off from the template and allow for the reconstruction of my Portfolio site. I thought I would branch out of the code world for part of the day to spend some of my time in Illustrator, and Fireworks. Nothing to new or breath-taking in either of the programs. Fireworks started off great. I got my initial design but when it came to exporting anything images, html, css. It all was a complete mess. So I ended up recreating all the images in Illustrator, and exporting them as .png, creating an image folder and creating <img src:> to put them into dreamweaver. One thing I haven't really been able to use are Dreamweaver's short cuts. I attempted to make a navigation bar but all the nasty CSS and HTML made life a bit miserable as I found myself spending half of the time DECODING code that I didn't write. plus since I am pretty new to writing and positioning without tables, It seems that random code doesn't match and can crash your whole design. Anyways, I created roll over images of my face! ha The colors were thought up to be professional, and clean. It was a great challenge to create a layout in Fireworks and create it again in Dreamweaver. Using the features such as the positioning to get the elements in place using CSS was an AH HA moment today . Using the outer element to be positioned #div outer{position:absolute} and positioning the <div's inside the outer as such #div inner{position: relative} and being able to move the elements inside the inner by using the attributes :top,bottom,left, and right. I plan on making a RSS feed a video intro and a javascript slideshow. the light grey box up top is where the video intro is going to be. Enjoy.
 |
| Illustrative navigation bar with a traced pen drawn version of my face that will have a roll over. |
May 17, 2011 Day 3:
NAV BAR DAY!
Today was a distracting day. I spent time to take a bike ride since I heard that the rest of the week is supposed to be rainy. Anyways, I spent the mid part of the night working with the CSS and HTML functions of a traditional navigation bar. Starting with a simple list function, <ul> <li> </li></ul>. with the HTML categories set for the navigation I could then set up the CSS to add some color and formatting. Using a.link, and a.hover to change the states I could change the size, font-color, length, padding, margins, and background color. The best way to describe how any CSS works its like a really organized librarian. You first categorize by a whole library, then you locate the Isle, then the Section, then the column, to the Row and then the book, the pages, the word, and the letter. You can change Globally or locally. Globally would be like changing the color of the library where locally would be like changing the word in the book inside the library. So how this relates to web terms. You can make a LIST. starting with the UNORDERED LIST AKA <UL><UL> In CSS if you want to change everything inside this list, say the width or color, you would write. ul{ width:100px;} then you can move down to the items in the list aka <li><li> this will change the items contained in the list. Then you can change the attributes within the <a> tag. Long story short, you can make some snazzy stuff with just CSS and HTML without the use of JavaScript. I'll get there in a month but this is fine for now.
 |
| The example above shows how I chose to have a:link and a:hover to have padding to spread it across the whole site. Using the a:hover as a black background and the a:link to have a baby blue color. Not too complicated but pretty cool to see in action. Still writing the code from scratch. |
May 16, 2011 Day 2:
So now that I'm grasping how CSS and HTML work together I can now begin to see how the scripting languages fall into play. I haven't dove into free hand script yet but the CSS and XHTML are coming together. I can now see how the use of *float{} and *clear{} attributes work in moving <div>'s around. I thought that learning the library that comes with CSS would be a bit challenging but it has come along quite well. I enjoy how there are no set ways to do one thing and from looking online there are blogs and blogs about how someone found a faster more efficient way to create a navigation bar or position for a <div>. I still feel as if I'm a bit messy in my writing but I at least see where I can be more efficient. The best way to describe how I'm learning is like when you first started typing on a keyboard. You know how it works and you can see how better people can type faster but you can't seem to move your fingers fast enough so you take (shortcuts) to get your way around. I know that as time goes I'll be able to chunk more info together in order to see the picture more clear but as of now spelling one word on the page at a time watching it come together is really exciting...as tech geek as that sounds. From my experience the reason why I enjoy this so much is because to me it feels like {#magic} It is a blank canvas until you start adding catch phrases and secret words in order to make something useful. Its a journey and its day 2 so here is the progress from yesterday..not much but I have re-arranged some <div>'s and feel more comfortable coding.
May 15 2011 Day 1:
So I took the day to smash CSS and XHTML in the face. Note to self: don't underestimate how easy one may think aligning boxes with CSS is. 9 hours and a serious case of dry eye I have created if you can call it that, a template. I successfully was able to create Divs that wanted to be around each other without wanting to slam each other off the page, overlap, disappear, or stubbornly do nothing. It was enjoyable non the less and can say I learned a lot in one day. I now know how to categorize div's with in CSS and XHTML but all the while doing that the design has suffered greatly. I have found it a challenge to make the computer do things you want it to while keeping design in the front lobe of your brain. My internship starts in a week and I feel this will be helpful. This is the first time I have ever stared at a blank Dreamweaver HMTL/CSS piece of paper and wrote the code from scratch no copy and paste. The library of CSS strings and HTML principles will be the only thing I will think about through my sleep. Enjoy the pic :)
 |
| Hand Written CSS and HTML from scratch to create a template that is no where near finished. Hours to learn and get this far : 7 hours. |
No comments:
Post a Comment