Final Project + CSS Resources
Since a couple people asked me about it after class I figured I might as well make a post with some resources for anyone interested in learning CSS. Also upon sitting down after presenting I feel like I ended up not saying any of the things I meant to so I'm just gonna get it out here.
First, here's a hacked-down version of the site (basically it's the same thing just none of the image links work because the gallery is 50mb and plaza only gives you 20). Although the content's missing, you can take a look at the code if you want to see how I achieved any of the effects: http://plaza.ufl.edu/shojo/
I built the site just with a plain text editor and my browser, starting yesterday in class and put the finishing touches on it this morning (on the flip side I spent about a week finding, processing and sorting all the images for the gallery). It's really a lot simpler than you might think, once you take a look at CSS markup there's a good chance you'll end up smacking yourself for thinking it would be particularly complicated (I know I did). I neglected to mention it in the presentation, but my old layout was actually built by my little sister--at the time (3 years ago, you can see why it needed an update) I had no idea how to code CSS and thought it was scary and didn't even want to look at it so I just built a mockup of the layout in Photoshop and gave it to her to code. In retrospect I feel like a massive idiot for not trying it myself.
A few things to note about the site I built for the final:
- Like I mentioned, the only image in the layout is the background image. Everything else is pure CSS.
- The entire site is comprised of just one page of html, one stylesheet and a javascript file (of course the image gallery, were it uploaded would just be a bunch of folders with images in it).
- The hidden layer toggle is achieved through a javascript
- The layout looks pretty empty on a larger monitor because originally I'd intended to have the images popup in the page (much like the way the navigation works), but the javascript I used doesn't like being nested and I didn't have time to figure out a workaround.
Anyway, moving more into CSS stuff for people who want to learn CSS. I didn't use one particular tutorial or website to build this. There are so many free resources for learning CSS that it's as simple as googling "css" and whatever you want to know how to do (ex. "css text rotation"). w3schools.com is a pretty good place to start though. Another thing to remember is that you can always get at the source code of a website--look at sites you like and see how they did it! (often CSS will be loaded as an external stylesheet--just look for the path to a .css file in the head of the html and voila, css at your service)
The basic concept of CSS is separating layout and content. This way your layout can change without having to touch your content (also your code looks prettier). Layout in CSS is generally achieved with boxes called divs (as opposed to tables or frames). Your stylesheet handles the positioning, color, overall look and even behavior of these boxes and in the html you simply tell your content which box it needs to go in. This is pretty horrendously oversimplified , but you get the basic idea.
To demonstrate, here's what my site looks like without the stylesheet: No Styling
^This is the "content" of my website.
Without going into too much detail, just to give an example so you can see how easy this really is, here's the css for one of divs from my site:
This is the biggest black bar with the navigation in it. As you can see it identifies the background color of the box as black (all 0's in hex). It's 25 pixels wide and the height is set to be 100% of the page, so no matter how far you stretch the page, the black bar still touches the top and bottom of the browser window. It's positioned absolutely (which means the coordinates are calculated from the edges of the window and do not change, this is opposed to relative positioning which positions in relation to other elements on the page) 0 pixels from the top of the page and 70 from the left. The z-index here is set at 100, the number is arbitrarily large and simply indicates it's it's z-axis position on the page (that is to say, any item with a lower z-index would render below the bar, anything higher renders on top of it).
In the html all you'll see of that is < div id="nav_stripe1">stuff inside the div goes here< /div> but it knows to put the stuff you stuck between the div tags with the "nav_stripe1" id in the box the css defined.
CSS can also dictate text styling, for example:
This is defining a class called "content" and it's a subset of the < p> tag (side note: ignore the first space after the < in the html, I have to break the code for it to display it instead of rendering it). In my html, if I tag something like this: < p class="content">text goes here< /p> it'll apply the style above. I think it's all pretty self-explanatory except for the "white-space" attribute--basically that just tells the browser how to handle the text you put in the tags. The "pre-wrap" one used here tells it not to collapse the white space in the text and to wrap the text. I forget what the default attribute is called, but it won't retain things like tabs or more than one space in a row.
Simple, don't you think?
Well, assuming any of that made any sense, I'd really like to encourage anyone with an interest in this sort of thing to try it out. If you have a computer you already have all the tools you need to code CSS--a browser and a plain text editor. Keep in mind that not all browsers render standards the same way and that you need to check layouts on multiple browsers/computers to make sure it always looks the same (for example, the text rotation in the menu of my site won't work in IE since I forgot to past the IE code for it into the stylesheet). For reference, Safari was the first browser to pass the current standards benchmark, I believe other webkit browsers behave pretty much the same way and FF is generally pretty standards-adhering. And IE is... well, IE.
Anyhow, pardon the tl;dr. I'm far from being an expert in CSS, but if anyone has questions or wants some help just ask and I'd be happy to tell you what I know.
First, here's a hacked-down version of the site (basically it's the same thing just none of the image links work because the gallery is 50mb and plaza only gives you 20). Although the content's missing, you can take a look at the code if you want to see how I achieved any of the effects: http://plaza.ufl.edu/shojo/
I built the site just with a plain text editor and my browser, starting yesterday in class and put the finishing touches on it this morning (on the flip side I spent about a week finding, processing and sorting all the images for the gallery). It's really a lot simpler than you might think, once you take a look at CSS markup there's a good chance you'll end up smacking yourself for thinking it would be particularly complicated (I know I did). I neglected to mention it in the presentation, but my old layout was actually built by my little sister--at the time (3 years ago, you can see why it needed an update) I had no idea how to code CSS and thought it was scary and didn't even want to look at it so I just built a mockup of the layout in Photoshop and gave it to her to code. In retrospect I feel like a massive idiot for not trying it myself.
A few things to note about the site I built for the final:
- Like I mentioned, the only image in the layout is the background image. Everything else is pure CSS.
- The entire site is comprised of just one page of html, one stylesheet and a javascript file (of course the image gallery, were it uploaded would just be a bunch of folders with images in it).
- The hidden layer toggle is achieved through a javascript
- The layout looks pretty empty on a larger monitor because originally I'd intended to have the images popup in the page (much like the way the navigation works), but the javascript I used doesn't like being nested and I didn't have time to figure out a workaround.
Anyway, moving more into CSS stuff for people who want to learn CSS. I didn't use one particular tutorial or website to build this. There are so many free resources for learning CSS that it's as simple as googling "css" and whatever you want to know how to do (ex. "css text rotation"). w3schools.com is a pretty good place to start though. Another thing to remember is that you can always get at the source code of a website--look at sites you like and see how they did it! (often CSS will be loaded as an external stylesheet--just look for the path to a .css file in the head of the html and voila, css at your service)
The basic concept of CSS is separating layout and content. This way your layout can change without having to touch your content (also your code looks prettier). Layout in CSS is generally achieved with boxes called divs (as opposed to tables or frames). Your stylesheet handles the positioning, color, overall look and even behavior of these boxes and in the html you simply tell your content which box it needs to go in. This is pretty horrendously oversimplified , but you get the basic idea.
To demonstrate, here's what my site looks like without the stylesheet: No Styling
^This is the "content" of my website.
Without going into too much detail, just to give an example so you can see how easy this really is, here's the css for one of divs from my site:
#nav_stripe1 {
background: #000000;
width: 25px;
height: 100%;
position: absolute; top: 0px; left: 70px;
z-index: 100;
}
This is the biggest black bar with the navigation in it. As you can see it identifies the background color of the box as black (all 0's in hex). It's 25 pixels wide and the height is set to be 100% of the page, so no matter how far you stretch the page, the black bar still touches the top and bottom of the browser window. It's positioned absolutely (which means the coordinates are calculated from the edges of the window and do not change, this is opposed to relative positioning which positions in relation to other elements on the page) 0 pixels from the top of the page and 70 from the left. The z-index here is set at 100, the number is arbitrarily large and simply indicates it's it's z-axis position on the page (that is to say, any item with a lower z-index would render below the bar, anything higher renders on top of it).
In the html all you'll see of that is < div id="nav_stripe1">stuff inside the div goes here< /div> but it knows to put the stuff you stuck between the div tags with the "nav_stripe1" id in the box the css defined.
CSS can also dictate text styling, for example:
p.content {
color: #000000;
font-size: 10px;
font-family: sans-serif;
font-weight: lighter;
text-align: justify;
white-space: pre-wrap;
vertical-align: bottom;
}
This is defining a class called "content" and it's a subset of the < p> tag (side note: ignore the first space after the < in the html, I have to break the code for it to display it instead of rendering it). In my html, if I tag something like this: < p class="content">text goes here< /p> it'll apply the style above. I think it's all pretty self-explanatory except for the "white-space" attribute--basically that just tells the browser how to handle the text you put in the tags. The "pre-wrap" one used here tells it not to collapse the white space in the text and to wrap the text. I forget what the default attribute is called, but it won't retain things like tabs or more than one space in a row.
Simple, don't you think?
Well, assuming any of that made any sense, I'd really like to encourage anyone with an interest in this sort of thing to try it out. If you have a computer you already have all the tools you need to code CSS--a browser and a plain text editor. Keep in mind that not all browsers render standards the same way and that you need to check layouts on multiple browsers/computers to make sure it always looks the same (for example, the text rotation in the menu of my site won't work in IE since I forgot to past the IE code for it into the stylesheet). For reference, Safari was the first browser to pass the current standards benchmark, I believe other webkit browsers behave pretty much the same way and FF is generally pretty standards-adhering. And IE is... well, IE.
Anyhow, pardon the tl;dr. I'm far from being an expert in CSS, but if anyone has questions or wants some help just ask and I'd be happy to tell you what I know.
Comments
Post a Comment