Tuesday, June 14, 2011

Web Studio 914

Web Design tips and tricks:



Simple ways to enhance your web design abilities

Part one: using transparencies



Here are a few ways to use transparent or see through elements to make your website more dynamic.

The first thing we will talk about is PNG.  This file format is a very dynamic image type that is the default file type of Adobe Fireworks software. Fireworks if you are unfamiliar is an Adobe software that is basically like Photoshop but has built in web tools it doesn’t have all the features of photo shop but it’s very easy software to use and it can definitely take a lot of time out of the web  design process without skimping on the quality of your work.



But back to PNG, one of the cool things about this format that really sticks out is that you can actually set the back ground of your image in fireworks to be transparent.

So let say you want to make a page that is going to fit on someone’s screen no matter what the resolution of their monitor. You can use this technique to create a logo for your page with a transparent back ground, and then create a back ground for the page. You set your back ground image on your html page and then put a table on top of that with borders set to zero and the table centered on the page, then when you place your logo into the table not only will it float seamlessly on the background of your page but because you used the centered table then even if the user resizes the page it will auto adjust to the screen.

You can play around with this technique of course for the best results you want to use a table width of 100% sometimes due to the elements you need to use in your page you may have to choose a specific size for your table but always keep in mind what the standard resolutions are pretty much when it comes to width you want to go with 800px or 1024px to assure you don’t have pages that go off the sides of your viewers monitor. But again if at all possible using the table width of 100% will make it work no matter what.

One more quick tip

<body bgcolor="#000000" style="padding:0px; margin:0px; height:100%; color: #000;">

This bit of code here will allow you to take that cell you made in earlier steps of this tutorial and adhere it to the top of the page, basically it removes the padding between the top of the page and the top of your table its especially helpful when you do something like have a horizontal bar that extends the full length of your page and you have a navigation element that is in the table, when you try to change the background of the page to line up with the content it can be messed up my monitors with different resolutions but if you instead stick the table to the top of the page and line background up with that then you won’t have this problem.



Well I hope this helped out please follow our blog and check us out on facebook and twitter for more tips



Web Studio 914

Posted by at

1 comment:

Subscribe to: Post Comments (Atom)