Thursday, September 23, 2010

Tutorial: How To Make Scroll Bars

Sounds exciting, right?

Well in the post I'm going to teach you how to make scroll bars in Html in Dreamweaver. Scroll bars let you scroll though information or large images contained in a small viewing screen.

To complete this tutorial, you will need an image and a paragraph of text. Oh and don't worry, the tutorial shouldn’t take you more than 10 minutes.

First off you need to make sure and set up your root folder you will be using containing all your necessary files (your text, images, etc.)

First we will work with putting text inside a scroll bar.

1. You need to create a div using the tag 

2. Inside this tag you must add the proportions of this scroll box you are making. You will need to include height, width, and then the overflow style (we will use overflow:auto which means it can automatically detect if you need a scroll bar.) So for example:

 <div style=" height: 100px; width: 200px overflow: auto;”>

3. Then copy and paste your text in

4. Then close up the tag with 

5. Your finished code should look like this:

<div style="overflow: auto; height: 100px; width: 200px;">inserted text </div>

6. Save, then refesh and see what happened! Your text is now in a scroll bar! (you might have to go into live mode to see the scroll bars actually appear)

Second, if you want to get super fancy, you can add an image to a scroll bar

1. Start by creating a div just like you did the last one.

2. Then add in your size specifications and overflow type.
 <div style= “height: 500px; width:600px; overflow:auto;”>

3. Here where you add in your image source instead of text.
<img src="turtle.jpg" source="turtle.jpg" />

4. Don't forget to close your div off after so your finished code should look like this:

<div style="overflow: auto; height: 100px; width: 200px;"><img src="turtle.jpg" source="turtle.jpg" /></div>

5. Press save, and see what you got!

Congrats! Good job! You did it! If I can do this, hopefully you can too!

Wednesday, September 1, 2010

Site Critique

So, I found a couple websites that caught my eye to write about for my school assignment... I'll even supply you the links to them so you can check em' out yourself.

Pretty sweet, eh? So let me tell you what I like about them. Ill focus on the Stem Cell Foundation's site.
The first thing that caught my eye when I opened up the page was the animation of stem cells replicating. It was intriguing and made me want to see what else the website had to offer.  Im not originally attracted to the topic of stem cells, but their website did make me want to learn a little more about it.

The navigation is laid out as a menu on the left hand side of the screen, which will lead you to the information you are mostly likely looking for. Interspersed are cool animations and videos relating to stem cell research.

When dealing with a medical subject, usually subdued colors are used. But with this website, they took some liberties and used a bright color palate. There is lots of white space, so when the intense colors are used, it doesn't seem as overwhelming. 

There is good fluidity throughout the website, and it seems to all connect well and seem pretty seamless. Even when just sitting at the home screen, there are videos constantly playing and people moving, giving it a good sense of action. Since the main point of this website is to call the viewer to action, I think this is a pretty good relationship they have building.

The type is all very simple and clean looking. With such fluidity in the images and animation, it is important to have that structure there with the typography. The fluid stem cell shapes throughout the whole website create an appealing repetitious motion that is fun to navigate through.

This site has a pretty wide audience it is built for, most all adults. With such a generic audience I think they were successful in making their site to appeal to a wide range of people. Its basic but with a punch of design added in. When viewers linked to this website they could find what they were looking for: How to help with  the cause of stem-cell research, how to donate, or just to  hear stories of those affected by this research.

I wish I had some cool websites I have made like this. But I guess it will just have to be wishful thinking for now... One day Ill be cool like that. 

So we have a website design that we are starting in class here pretty quick. Im not exactly sure what I'm going to do mine on yet. Maybe something on living the small town life, since, hey that's what I do. Or maybe about cats. ok, maybe not. Actually, let me just think about that for a little while longer. Ill let ya know what I come up with!