Making a nice looking site...

[cusimar9]

Hi,

I have both dreamweaver and frontpage, and I need to overhaul our website.

My question is, how do I make something look 'proffesional'?

I've mainly used HTML in the past, but have been playing a little with PHP recently.

Take this site I was looking at earlier, for instance:

http://www.xe2.co.uk/

The page will load in 800x600 just as well as in 1024x768, it seems to have a pattern that dynamically fills the page.

Also the drop down menus, how do you do them?

Any help would be greatly appreciated.

Cheers

[CompGeek01]

It is always difficult to find a pattern that is scalable. In the site you pointed out there is a repeated background. The background picture might be only 34 pixels wide...but it will repeat forever. HTML has evolved a lot especcially since CSS became a standard in web design. Using CSS you can easily repeat a background only over one axis. For example (from their site's style sheet):



BODY {
background: url(imgs/backgroundgrid.jpg);
background-repeat: repeat-x;


Then, as they did in their site...they make the entire site in a less than 800 pixel rectangle. In this case the site is centered, but numerous sites use the same strategy to create a left aligned or right aligned page. It also creates the illusion that the page "fits" perfectly with an resolution because CSS is able to position the page in the exact same way reguardless of monitor size. Given, at resolutions like 1600x1200..the text gets a bit small. As a rule of thumb I normally create sites that aren't any bigger than 800 pixels across. Anyone who is still using 640x480 will have to deal with side scrolling.

As for the menu's...All drop down menu's use some form of Javascript. There are a few ones that are pretty "open source" and browser compliant. You can try to make a drop down menu based on CSS...but Explorer will cough it back up. Try the menu at BrainJar to start with....it's pretty complicated but you can customize it pretty good.

http://www.brainjar.com/dhtml/menubar/

[cusimar9]

Hey cheers! That menu page is exactly what I was after, some sample code!

What's CSS? Is it just like php that you just type it into a file and the server converts it to HTML?

[CompGeek01]

CSS (or Cascading Style Sheets) is a way of forming and shaping your web site to fit your needs..in a very clean way.

For example, HTML is becoming a thing of the past. As sad as it may sound, XHTML 1.0 and 1.1 is becoming the standard, while HTML (pre 4.01) is being frowned upon by some at the W3C (World Wide Web Consortium). Here is a small excerpt from their site:

During 1999, HTML 4 was re-cast in XML and the resulting XHTML 1.0 became a W3C Recommendation in January 2000. Work has continued during 2000 through 2001 on modularizing XHTML, producing new profiles of XHTML, and planning for the future.

XHTML has many changes from the old ways of HTML. People still cling to HTML 4.01 (which I still believe is "recommended" by the W3C) but some people don't know what to do without their <center> tags. Since HTML 4.01 no longer supports <center> tags....CSS is really the best thing IMO to format pages.

To get a quick feel for CSS, think back and see if you have ever used it before. The most common use is by people who want to make their website's links have underlines ONLY when the mouse hovers over them. Using CSS, it can be accomplished :


<style type="text/css">
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>


I was using this long before I knew there was an entire language devoted to styling a page. Now, with CSS...there are hundreds of "new" things that can be done with half the effort of HTML.

There are some good tutorials out there for beginners.

http://www.w3.org/Style/Examples/011/firstcss

http://www.htmlhelp.com/reference/css/

http://www.htmlgoodies.com/beyond/css.html

CSS can do little things from changing the color and size of your text (as well as centering it...as mentioned before), to creating dynamically resizable boxes and create colored scroll bars. Another neat thing I've found is Pure CSS Pop-ups..which is a roll over menu type thing:

http://www.meyerweb.com/eric/css/edge/popups/demo.html

It may not look like much, but it's quick and easy. Also, there is NO javascript involved which lets everyone that visits your site see the same thing you are seeing. (More and more people surf the web now with Javascript disabled due to security issues and spyware). I hope I didn't go into too much detail but I really love CSS. lol. I hope you have fun if you plan on using it. :D

[cusimar9]

Excellent, cheers!

But to get my menubar I still need to use javascript, don't I?

[CompGeek01]

Righto. If you turn off your javascript the drop down's won't work. I wouldn't worry about Javascript usage unless you are making a website that will be viewed by millions (or a lot) of people.

:t

[cusimar9]

thanks, really appreciate your help :D

[bassman]

Originally posted by cusimar9
My question is, how do I make something look 'proffesional'?

Get confortable using tables, CSS and image editing, that's how the majority of the professional webpages are designed. As for the menus, you can always get some that are already done in Javascript, but learning it is always fun :t

[cusimar9]

How do you mean 'using tables'?

Can I put them to good use in actually designing a web page?

[fishybawb]

Tables can be used to position your page content - at its simplest, you could use one table to represent the page, putting the title in a cell at the top, a menu in a cell to the left etc... This might explain it better:

http://www.webdesignwisdom.com/webdesign/webpagelayout.shtml

It's a frequently used but often frowned on technique, and now supposedly deprecated by CSS layouts:

http://glish.com/css/

[cusimar9]

Hmm sounds like a good idea!

Cheers

Rick

[CompGeek01]

It's a frequently used but often frowned on technique, and now supposedly deprecated by CSS layouts:

Indeed. :)

[fishybawb]

Sadly CSS support in browsers is still pretty patchy, despite it being around for years now. M$ not complying to standards?! Surely not ;)

http://www.positioniseverything.net/explorer.html