Thursday, September 23, 2010

CSS Tutorial. How to Float images




In this tutorial I will take a look at how to float an image as well as multiple images.  Floating is mostly used to push an image to one side or the other while having the text of a paragraph wrap around it.  Wrapping the text around an image is easy after you have applied to float attribute.  You can float the image to either the left or right side.  Below is an example.


CSS Code:
                 Img.floatleft{
                                      float: left;
                                      margin: 4px; }
  -note it can be whatever value you need.  Depending on the location

-       Also same code but instead of left put right and image will float to the right of the page


You can do this same things using HTML code

HTML Code:
                      <body>
                       <img src=”name.jpg” class=”floatrightclear”>
                       <p> The images are contained with…</P>

                       <img src=”name.jpg” class=”floatright”>
                       < p> this paragraph is…</p>
                        </body>


 This is an example of what it should look like after you are finished.  If you notice the image is floating to the left with this paragraph wrapped around it.  This is very useful if you have a lot of imagery you need to place.  Being able to float an image really helps with your design and makes it so you can do a wide variety of things.  You will notice that this image is floating to the right but remember you can float the picture in the center as well as the right     



With this same technique you can float multiple pictures one on top of the other.  Here is a quick example how.

CSS Code:
                 Img.floatrightclear {
                        float.right
                        clear: right
                        margin: 4px;
                     }   
-Note if you just floated all the images they would appear right on top of each other.  If you want to next image to start below the end of the last one use thee CSS atribue “clear”


HTML Code:
                <body>
                 <img src=”name.jpg” class=”floatrightclear”>
                 <img src=”name2.jpg” class=”floatrightclear”>
                  <p> the name of the paragraph…</p>
                  <p> if we told it which paragraph..</p>
                   <p> the number of paragraphs…</p>
                   </body>


 This is an example of what it should look like after you are finished.  If you notice the images are floating to the right with this paragraph wrapped around it.  This is very useful if you have a lot of imagery you need to place.  Being able to float an image really helps with your design and makes it so you can do a wide variety of things.  You will notice that this image is floating to the left but remember you can float the picture in the center as well as the left.  But there are many more things you can do with this feature.  The more you play around with it the more possibilities there are .  

Thursday, September 2, 2010

html Website

    I chose to look at Netflix.com for my html website. This site is successful on many different levels. I wouldn’t say that it is the fanciest looking website there is but by far it is one of the most effective. The main page of the website really sets up the whole site. It has the navigation buttons at the top to easily help navigate the client to the exact place they want to be. It easily breaks down the different types of system you would be using to watch the movies thus saving time and making it very effective. This website uses a very simple color scheme of red, white, and tan which really help the overall feel of the design. If more emphasis was put on the color it would distract from the design making it hard to navigate through the website. This website is very information driven. When a user comes to this website they are there for one purpose and that is to find a movie. By placing the importance on the product and not so much and the design really helps it to be effective. The only content in this website it videos. By breaking down everything into genres it helps the user to navigate through it properly. Overall this website has a very basic layout. By having this basic layout through the color and navigation Netflix was able to create a very user friendly website





Link to Website
http://www.netflix.com/

Flash Website

    If you are every looking for a great website on different types of elegant burgers you need to check out cheeseandburger.com This site is great for a few reasons. But probably the biggest reason why this website is successful is how effective it is at portraying the product. The website is designed as so that the typography plays a second roll to the imagery. Which is how it should be when trying to sell a product. something that is very important when displaying a product is to have easy navigation so the consumer can see everything they are looking. this website is very successful at this It provides the user with multiple ways to navigate. I feel that color plays a very vital role in the success of this product. The main backdrop of the website is a dark color with all of the images placed upon a bright off white background really helping the pictures to pop. The whole website uses motion in a very effective way. All of the products are placed in a revolving almost recipe like design, by doing this it adds variety to the design in a very creative way. The use of repetition is also evident where each product or page mirrors that of the previous one, thus helping to whole design feel like one complete design. Overall the great mixture between type, imagery, color, repetition and easy navigation really help to make this website very successful.





Link to Website
http://www.cheeseandburger.com/