I have just made a website\


Do anyone think it is hard to code? ANy suggestions of how to slice it?

It's hard to tell since I can only see a small image of the site, but it looks easy enough. I wouldn't slice it at all. I hand code using html and css.

I could offer more details of how I would code the page if i could see a larger version of the image above.

Yes.. what he said . Doesn't appear like it would be difficult given what we can see.

Originally Posted by vangogh

It's hard to tell since I can only see a small image of the site, but it looks easy enough. I wouldn't slice it at all. I hand code using html and css.

I could offer more details of how I would code the page if i could see a larger version of the image above.

thank you very much. If the image wouldnt be sliced, how can I make the rollover effect for the button?

You would have to slice at least some of it, if you wanted the nice buttons and the design in the background.

In fact, I can't think of any way to replicate the design in HTML and CSS without slicing, so maybe there are multiple definitions of slicing?

I do agree that it wouldn't be too hard to code. At its core, it's a header + two column design. As for slicing, you should try to both minimize the number images and the size of the images as much as possible in order reduce the page load times the most. I prioritize a lower amount over size, so I'll usually take an image that's a couple KB larger if that will reduce the number of images and therefore, reduce the number of server requests. I couldn't suggest how to slice it unless I had a little bit bigger and higher quality screenshot.

aniOcean could you post a larger image? It'll help in helping you. The detail on the small image you posted is limited and a bigger one would help.

The way I usually make a rollover effect for an image is to have two images for a button and then some simple JavaScript to handle the change on the rollover and rollout.

When designing I try to make things as simple as possible for me when I code. I'll make the text for the links real text which I'll code and then make the buttons all look the same (the only difference would be the text). That way you can reuse the same two button images for each link.

I'll have to see more details from your design to know if that will work for you.

So most people suggest doing it in CSS. But actually using it wont make the size of the site smaller, isnt it? as For CSS I only slice for a few times, but table can slice a lot to make site smaller. Why dont people use table for the site.

I am going to use ASP with html to finish the site. Which coding is better? CSS or table?

Javascript for rollover button? May anyone know how to do it or CSS is better for it?

Any guide is appreciated.

I have just found a sentence from google

CSS does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property.

Is it true?

CSS does not work with Opera 8 or IE 5 on Mac

Possibly you mean CSS3. but then, CSS3 browser support generally is sketchy.

MacEdition Guide to CSS3 Selector Support & CSS2 Support in Mac-only Browsers

IE5 Mac supports border-spacing according to http://www.w3schools.com/css/css_table.asp

But then it's not a property that I personally have ever needed to use in 5 years (at least) of using CSS.

Personally, I never use the slice tool in Photoshop and you need to get away from 'slicing' your PSD file the way you would a table. All those slices you have showing in your image are way over the top and definitely not necessary for a CSS-based layout.

AniOcean like Chris said what you saw was probably that a specific css property wouldn't work with a particular browser. All modern browsers are css capable, but some are more capable than others. Your design can definitely use css to layout the site.

Just like LadynRed I don't ever use the slice tool in Photoshop. I'll usually identify what needs to be an image and then crop that part of the Photoshop design as closely as I can to create a single image. From what I see of your design you would need an image for the background behind the header and one for the background at the top of the content area. The RSS button will need to be an image as well.

As for the tabs you could get away with creating one image each for the mouseover and mouseout states. If all that is changing is the color and you can live with angular tabs instead of rounded tabs you could actually create those without an image at all. I'm guessing they are a little rounded and you would use two images for the tabs. One for each state.

Originally Posted by vangogh

AniOcean like Chris said what you saw was probably that a specific css property wouldn't work with a particular browser. All modern browsers are css capable, but some are more capable than others. Your design can definitely use css to layout the site.

Just like LadynRed I don't ever use the slice tool in Photoshop. I'll usually identify what needs to be an image and then crop that part of the Photoshop design as closely as I can to create a single image. From what I see of your design you would need an image for the background behind the header and one for the background at the top of the content area. The RSS button will need to be an image as well.

As for the tabs you could get away with creating one image each for the mouseover and mouseout states. If all that is changing is the color and you can live with angular tabs instead of rounded tabs you could actually create those without an image at all. I'm guessing they are a little rounded and you would use two images for the tabs. One for each state.

Thank you very much. If I use CSS, like what you say is to crop 3 image out, right? Do you think the site will load slower if I dont use slices to separate the image to many parts.

No, the site will load FASTER if you use FEWER images rather than forcing the browser to reassemble the site like so many puzzle pieces.

Originally Posted by LadynRed

No, the site will load FASTER if you use FEWER images rather than forcing the browser to reassemble the site like so many puzzle pieces.

Do anyone know any good tutorials to teach use how to create this kind of site by CSS? Do I just use layers and insert the image there? And Adjust the position of the layer?

Yes:
http://www.sitepoint.com/books/html1/