Website Design Forum

**zhang02** · 12-03-2010, 04:40 AM

We are planning on hiring a company to design a webpage for our business sometime next year, but in the meantime, we'd like to have a simple homepage for anyone who visits the URL now. We've designed what we want it to look like, but as a beginner, I'm having difficulty understanding how to code for this. See the design here: Web Design

1. What type of code should I use? (tables, or something else)
2. Most tutorials that I've read say to splice the image into pieces using Photoshop and stitch it back together using tables. What benefit does that have over having one large image?
3. If I want the email address to be a clickable hyperlink, should I use an image map?
4. How do I code the page so that regardless of the user's screen resolution, they will be able to see the page without any issues (ideally, I don't want any scrolling to occur, just for the layout to fit the user's browser window).

I know basic html, have experience using CMSs like Wordpress and am a beginner/intermediate in Photoshop.

Thanks in advance!

**Mug** · 12-03-2010, 05:45 AM

I can't tell on this laptop screen if the background has a vignette but you will need to tile the background. You need to splice up the background so you get about a 20-50px square and then repeat-x repeat-y on either the <body> background or a wrapper <div> background. Don't use one massive image for the background it will take ages for the page to load and will look odd for browsers above 1680x1050px. I am not sure how you would do the vignette without using a transparent png but you would be effectively resizing the image so that it was fixed to the size of the browser view port (not good). I would just not design it like that in the first place.

Don't use tables use divs (sections) you can center horizontally and vertically by using the following code:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

Within the center div you can then either use a background image for the rounded corner box or use HTML5 to add the dropshadow and rounded corners (see other HTML5 forum posts why this might not be a good idea for non css3 browsers).

Depending on whether the text is a system font (i am not too good at font recognition) you would just use css on a <a>your@email.com</a> element. You may get some spam email from email harvesters but this would be the correct way of displaying a link. If it is a non system font then you could use @font face or depending on your target audience's browser you could use an image. System fonts are preferred in older browsers. Somebody else may be able to clarify other ways of preventing spam and displaying the link.

If you Google any of the terms above you will find enough information to build the site. If you are after specific coding you usually would have to pay, given that they would be building the site for you.

Hope that helps.

**LadynRed** · 12-03-2010, 09:44 AM

Try these resources:
http://cssslicingguide.com
http://www.subcide.com/tutorials/csslayout/

**radiant_luv** · 01:01 AM

Try those resources provided by LadynRed.
Just want to clear up as you've mentioned using "tables" ... "table" is meant for tabular data. If you have a tabular data, use tables else use different elements such as blocks.

Thanks