Wednesday, September 22, 2010

Tutorial

How to Insert a picture as your background

 There are two ways in which you can do this tutorial.

Option One You can just use to text edit files and type in all the code yourself.

You will first create an html document and a css document in your text edit. Save both in the same folder.

Put the basic tags in the html document.



<html>
<head>


</head> 
<body>                               Don't forget your closers!

</body>
  
</html>




In between the 'head' tag you are going to put your link connecting to your css style sheet.


<link href="backgroundstyles.css" rel="stylesheet" type="text/css">


You can copy this link and use it in yours. Make sure to change the 'href' to be the name of your style sheet page.  The other two will remain the same. 


Save both files and your pages should link together.


Next open your style sheet

This is all that you should type into your style sheet. 

body
{
    background-image:url("texture.jpg");
    background-repeat: repeat;
}

  
(The 'body' is there to show you where you are applying this image).


You can also choose to have your image repeat either on the y axis(repeat-y), the x axis(repeat-x), the entire page(repeat), or none at all (no-repeat).  above I chose to have the image repeat.

Option Two Once you understand how to use Dreamweaver It is much quicker to do this but I think it is important to know the html code to better understand what and how you are doing this. 


So to do this in dreamweaver open both documents (html and css) in dreamweaver.


With your cursor in the 'head' tag of your html document, go the css styles tab, there is a link icon at the bottom. click on this (circled in red).

a pop-up box will appear for you to enter in your css page link. Enter your file where it asks for the file/URL
Hit ok and the link will appear on your html document

Next start to type in
body {background-image... in your css styles sheet. Keep your cursor there. The styles tab will now show the properties bar with all of your different options. Scroll down to where it says 'background image' and type in your URL as pictured below. 


Directly below that is where you can change the repetition of your image.


Both ways will successfully give you a background image, take your pic 
 

And that's that, now you have a lovely background for your next amazing website.


Good Luck!








Wednesday, September 1, 2010

Web Site Critiques

www.artyulia.com

What attracted me first to Yulia's site was the artistic content. When you first go to the site it has a very simplistic homepage in black and white. Then as you click on the link to her work you are introduced to an explosion of color.  I like how easy it is to figure out where you want to go. Some websites have very confusing home page interfaces. As soon as you click into the illustration section there is a small set of icons which brighten as you run the mouse over them. It really helps bring her artwork to life.  Looking to the side you select the artwork and they appear larger to the side. I also really liked the miniature icons above the enlarged photos, and as you run the mouse over them they appear in the large box and move in a conveyor belt fashion. I think this artist's site does a really great job of portraying the artists work in its best light. The news section the artist has is separate from the artwork page I discussed earlier. I like how she has commented and discussed what each individual piece was for and its purpose while avoiding looking too much like a general blog.  She keeps her text content low in order to focus in on the artwork which I think is key for this website. The type she does use is simplistic so that it doesn't detract from the beautiful type creations she makes.

www.hellomonday.com

This flash sight is pretty great! As you enter the site it directs you you click and drag up to enter the site. I haven't explored too many flash sites but I really like how interactive they are. As you enter the site the homepage is a mixture of brown colors. When you drag the mouse down to the images below each row appears in a different color. The movement on this page is very interesting. As you click on each row it zooms in and centers it on the page. Then you can click and drag the row in order to see all of the pieces close up. The motion of the page really really makes the site fun to go through and look at all of the different art work. I also really liked how up top even though the icons stay the same, the page slides to the side as if its turning a page. The page does a good job of attracting aspiring designers by its interesting design. With all of the different ways to navigate around the site you could browse on here forever. It is easy to navigate and know where you are because of the constant bar at the top.