Hey everyone,

Just joined the forum. I want to get into website designing, but I'm not exactly sure where to start. I am pretty good with PHP, and know how to make a site functional, but I am terrible when it comes to making it look good. What do you guys think I should do to get started? I want to make a nice, attractive webpage.

Thanks

thats a really tough question in that know one can really teach you what will be attractive or how to make things attractive. i would say start with some sites that you find attractive and try to replicate what they did there. figure out what it is about a site that you find attractive. in my few years of web design i've found what i used to think was attractive is not what i neccesarily want. there are all kinds of neat little tricks out there in the web design world, but it really just takes experience and tinkering to figure out what works for you.

my suggestion however is to try and avoid trying to make things to flashy (not like the program). i see a little of new designer always trying to impliment everything they know. That's how we end up with website with tons of animated gifs, blinking text, our clicker will look like a target, etc. Try to avoid using a lot of ads if possible because there is very little control of their content i find and tends to only ruin the the feel of most websites. Taking some classes in art and design can really help to teach out how colors should be used and elements should be layed out.

Thanks a lot for the reply Clean, neat and easy to read websites are my favourite. I guess I'll go look for some sites that I find attractive and try to duplicate them. Thanks again for the reply.

I guess an example of something I'd call a cool layout would be Neopets. I think their layout is fun and easy to read at the same time. I'm not sure how they created this layout. If you look at the right side of the page you will see a column with the title "Latest News". How do you make something like that? I looked in the source and it said tables were used there but I don't get it. At the top right of the shape there is a curved line and at the bottom there is another. How do you do this with tables?

CougarElite, welcome and I hope you have fun learning to design web pages. I just went and looked at that page you were talking about, http://www.neopets.com/ and they have some problems that you want to avoid. On my screen there is about have the screen missing to nothing but white on the side where they have that *neat* latest news. What they did was use absolute values instead of percentages for their tables. If they had used a percentage instead of a number, it wouldn't matter what size browser you look at it with.

You can see this in action by looking at it with your monitor set at 800 X 600 and then again at 1024 x 768. And then go look at my personal home page which is set with percentages doing the same two settings. http://www.geocities.com/southernlady5464/index.html I believe you will see the difference in what is going on with the tables.

<table width=715 border=0 cellpadding=0 cellspacing=0 (neopets)

<table border="1" cellpadding="0" cellspacing="5" width="90%" (mine)

See, I use percentages. Now, I still have to have LOTS of help with tables. I am just barely managing to do them, but I do understand that much. You need to use percentages to make it work regardless of monitor resolution.

Btw, flashy isn't bad as long as it's not in the way of stuff. You have to make is appropriate and not over the top. Liz

Thanks a lot for the reply southernlady . I'm still trying to figure out how people get those curved lines and stuff around their tables like on the Neopets Latest News column. I think they just put in the picture and then make a table over top of it or something. Well I guess I'll keep trying to figure it out.

all of the curved lines on neopets are done with images. you can either set the image to be a background of a table so that you can include text in the table or like on neopets just make the image with curved lines and include in a cell. this is the news image. They also made the image a .gif because you can make gifs transparent and so the background color is able to show through the image. so essentially all their curved lines are are images within cells.

there is something to be said about curved lines on a website. they give it a much more pleasant feel. I once did a very similar thing as the neopets website, and it was really a fun experience learning how to create the curved lines. It takes a little creativity to get thinks like that to line up correct, and just keep that in mind when trying to impliment something similar.

Ohhh I see it now. Thanks monkey . Which do you prefer to make a website like neopets with bars on the right and stuff, HTML tables or CSS? I just read a few tutorials on CSS and made a few little boxes with text in them. It seems pretty easy, but every site that I think looks attractive seems to use tables... what do you think?

Oh and... you see on the left and right borders of the Latest News column on neopets? How did they make the lines look like that? Whenever I make a table it ends up having a gray border, and it looks kind of shiny, not just black. I made lines like that using CSS, but I can't figure it out with HTML.

Im going to have to say that I prefer using CSS to tables. I first started off using tables and they make life easy for the begining users, and they do have place in webdesign. One of my friends was bugging me to learn CSS because he thought it was the greatest. I put a bit of time into learning it and just recently I've been able to remove all tables from my site. There are couple reason I would recommend it. The first reason is simply that CSS makes it incredibly easy to change your layout or colors quickly. If I want to change the color of my links on 1000's of pages it is quick and easy with css. If you just have all that stuff set in html you could find yourself editing a lot of pages for a long time. The second reason I like CSS is that it allows you to pull out a lot of extraneous coding. It drives me bonkers looking through the code on some of these sites that are just filled with tables. It takes me forever to find what I'm looking for.

As for the neopets thing I believe they just defined how thick of a border they wanted and gave it a color code of 000000. I'm not really sure what you mean by yours turning out grey or shiny. I'd really have to see to understand. But if you find the CSS to be working out fine for you so far I'd probably try and stick with that. Also there are plenty of great looking sites that don't use tables. You should check out CSS Zen Garden for some examples of the power of CSS.

Im going to have to say that I prefer using CSS to tables. I first started off using tables and they make life easy for the begining users, and they do have place in webdesign. One of my friends was bugging me to learn CSS because he thought it was the greatest. I put a bit of time into learning it and just recently I've been able to remove all tables from my site. There are couple reason I would recommend it. The first reason is simply that CSS makes it incredibly easy to change your layout or colors quickly. If I want to change the color of my links on 1000's of pages it is quick and easy with css.

That's very true IF you have pages that are similar to each other. However, it doesn't work on a site where each page is a totally seperate design.

I still need to learn CSS tho, LOL Liz

Hmm I was just trying to replicate the table that I've been talking about on the Neopets homepage and I found some weird things. If you go here: http://www.clansoldier.com/game/goin.html you will see three tables on top of eachother.

On the first one:
I copied and pasted the code directly from the Neopets source. The left side of the border worked, but the right didn't... why's this?

On the second one:
I used the same code, but took away the Latest News picture. It got rid of the borders on both sides..?

On the third one:
Copied and pasted the entire code. Everything works here. Well the colours are a little messed up at the bottom but other then that it's fine.

What do you think is going on with these borders? They only work if you have a picture on the top and bottom of them on this page. It seems like the edge on the latest news picture stretches all the way down to the bottom of the table. I don't see why this would happen though?

Here is your first table and you repeat it right below it which is why you have it twice, altho the second time, you do continue on with the information:

<table width=160 border=0 cellspacing=0 cellpadding=0>
<tr><td colspan=4 bgcolor="#dddd77" valign=top><img src="http://images.neopets.com/images/news_header_new.gif" width=160 height=49 alt='Latest News!'></td></tr>
<tr>
<td bgcolor="#000000" width=2></td>
<td bgcolor="#dddd77" width=6></td>
<td bgcolor="#dddd77" width=150>
<br>

Here is your third table and you've set it right under your second one:

<td colspan=4 bgcolor="#dddd77" valign=top><img src="http://images.neopets.com/images/news_poll.gif" width=160 height=71 alt='Neo Poll'></td></tr>
<tr><td colspan=3>
<form action='add_poll.phtml' method='post'><input type='hidden' name='poll_id' value='343'><font class=sf>What is your favourite attraction in the Space Station?</font><br><input type=radio name=poll value='tally4'><font class=sf>Grundos Cafe</font><br><input type=radio name=poll value='tally3'><font class=sf>Grundo Warehouse</font><br><input type=radio name=poll value='tally2'><font class=sf>Evil Fuzzles</font><br><input type=radio name=poll value='tally5'><font class=sf>Splat-A-Sloth</font><br><input type=radio name=poll value='tally1'><font class=sf>Gormball</font><br><br><div align='center'><input type='submit' name='subbyvote' value='Vote'> &nbsp;<input name='subbyres' type='submit' value='Results'></div></form></td>
<td width=2 bgcolor="#000000"></td></tr></table>

These are straight tables. As in straight down. When learning html, it's best to work with straight html and then tackle tables and frames after getting the html down. Here is a tutorial on tables that was recently given to me: http://www.456bereastreet.com/archiv...on_the_tables/

Just wanted to add this one: http://www.w3schools.com/html/html_tables.asp I hope it helps. Liz