Please review my first web site

[vindaloo]

Hi,

I would like someone to take a quick look at my first ever attempt at a web site, and make sure I'm not doing anything completely wrong. The content is very basic as I would like a quick once-over before continuing in more detail.

Following on from this, I have a few questions (deep breath!)
[list=1]
For the table with prices in it - is there a way of maintaining the values in a separate text file, ie for easier maintenance?
Why does the border of the banner not quite meet up with the border of the logo?
How do I format the table entirely in the style sheet - I tried but couldn't get it to look the same as it does at the moment.
Can you specify Constants, eg. I've specified a width of 177px more than once in the style sheet - if this ever changes it would be nice to only have to update it once.
Among the many online tutorials I've referenced, some of them explicitly specify values which are the default anyway. For example, I've seen WIDTH: AUTO or PADDING: 0 specified - is this necessary, good practice or unnecessary?
[/list=1]

Apologies for attaching a ZIP file instead of uploading to a server, but there's a firewall at work preventing me from doing so.

Many thanks in advance for your time,
Vindaloo.

[vindaloo]

I've now uploaded this site:

http://home.freeuk.net/pete.collins/

I know I need a lot of help with the design/graphics side of things! At the moment I would just like a few comments on whether I'm heading in the right direction technically, although I would still welcome any suggestions at all (other than 'Stick to programming!').

Thanks

[Coreyp_1]

vindaloo,

There are many things on your page that need to be addressed, but let's try some of your questions first.

Is there a way to read values from a text file? Yes, that is, if you can program in PHP, ASP, or javascript. The only one I am familiar with is PHP, and would use mysql for the database of information. Maybe others can help you if you want to go a different route.

As for how your tables look, you can most definitely use CSS to format their appearance. In fact, CSS is far more powerful than HTML tags when it comes to formatting output. Just figure out exactly how you want your tables to look, and give the example here, and then we can go from there.

As for the gap between the logo and the banner, it is because you are trying to stack two divs beside each other. This brings us to the biggest problem.... YOU CAN'T DO THAT!

OK, you can, but other browsers (Netscape, Mozilla) are utterly shredding your page because they don't allow it, even though it appears correctly in FP2000 and IE. My solution: use floating divs with absolute positions. You would be wise to download Moz yourself, if only for testing your page (that's all I use it for).

I don't know about defining constants in CSS, but I believe that your HTML style comments in your CSS file (aviation.css) are causing problems in the afore mentioned browsers.

Hope this helps, and I'll be happy to help if you have any other questions, or I have been unclear on any point.

[vindaloo]

Thanks for your reply Corey, much appreciated.

I've uploaded another version with a few changes:

http://home.freeuk.net/pete.collins/

I've now used absolute positioning for the divs. With regard to the width of the sections, do you decide how wide the screen should be, say 800 pixels, and then specify the absolute width as well? As you can see, #content probably needs a width specified to make the Prices and Links pages tidier.

I've sorted out the table formatting from the style sheet, but left it basic for the time being.

Comments have been removed from aviation.css.

I had a look at your web site - what does DIV.BGNOTE do? I'm guessing it's there as a workaround for something?

I'll find an online tutorial for Javascript and sort out the prices in the table.

I'd be grateful if you'd let me know of anything else I've done wrong. As I'm learning from scratch here, I'd like to get rid of any bad habbits as soon as possible.

Thanks again.

[Coreyp_1]

vindaloo,

Your page is now being displayed comperably (but not exactly the same) in both IE and Mozilla. Congrats! It's not an easy feat sometimes!

Determining a target screen width is a difficult to do for any programmer. The best thing to do is to make your page flexible. You said you looked at my page. Thank you, but I'm also afraid of what kind of evil mistakes I have made along the way and not yet corrected. One thing to notice, though, is that when you re-size my page, the content is fluid, that is, the layout and graphics move with the screen size, regardless of resolution. This is one of the goals of the web designer... flexibility!

DIV.BGNOTE is indeed a workaround. Mozilla and IE were not displaying the CSS padding (or margin) option the same, so I simply used one div (BGNOTE) to provide the border and white-with-gray-musical-symbols background, while the second div (inside BGNOTE) provides the necessary margin. This is the only way *I* could get the same effect in both browsers. Others may have other ideas.

Good luck with the Javascript. As I said earlier, I have no experience with it, but do have a few cautionary statements: Some people do not like Javascript AT ALL, and turn it off in their browsers, therefore pages do not get properly rendered. Always make sure that your webpage can properly function even if someone has disabled javascripts in thier browser. Personally, I started out using Javascript, but soon found a way to do everything I wanted to do, but using CSS instead, which was quicker, simpler, and had less overhead.

One note about your borders (groove), is that browsers display them differently, especially in the lengths!

My webpage is nowhere near being the standard as to how things should be done. In fact, it is my first page! I have done three major revisions, the latest being in PHP. Looking back, I see changes I can, and probably will, make, both in the CSS and general coding conventions.

Let me know if I have been unclear on anything (which I can be at times).

If I were you, I would first fix the screen size issue. Personally, I have a small monitor, and must use 800x600, and there is horizontal scrolling at that resolution. Bad, bad, idea. It annoys most people.

Final notes: I would center your headings, or at least your tables. You may have left the headings left justified for a reason, but I would still center the tables, using the center tag. And on your Pricing page, what does VAT mean?

I hope I haven't put too much of my opinions in here, but let us know how you are progressing. This forum has definitely helped me in the past!

[vindaloo]

Thanks again Corey. This is certainly frustrating, and I'm not even trying to do anything clever!

I set the total width of the 2 divs to be 800 pixels (177 + 623), but when I set my screen resolution to 800 x 600 I get a very small amount of horizontal scrollbar. I can only get rid of this by changing the total width to 780 pixels. I'm using IE 5.5 under Windows NT 4 (at work), so maybe I'll try at home on IE6.

The headings and tables are now centered.

VAT stands for Value Added Tax, and is added on to pretty much everything at a rate of 17.5%. I don't know what the equivalent is in the US.

I think I'll sort out the actual content now, and try and replace the banner/logo (I'm hopeless at artistic things :( ). The site is for my flying instructor, and he suggested having the banner being towed by an aeroplane!

[Coreyp_1]

Remember that, even though the screen is 800 pixels wide, you don't have 800 pixels to work with. Scrollbars take up some of the screen real estate. For that matter, different browsers (Netscape, Mozilla, etc.) use different widths of not only scrollbars, but non-viewable area on the left and right of the screen.

Add to all of this the fact that not everyone surfs the internet with their browser window maximized. Now you really have to be creative in your approach to layout!

The banner being towed by an airplane is a good idea. You can make animated gifs, just make sure it doesn't take them too long to load! BTW, is there a difference between airplane and aeroplane, or is it a difference in spelling, like theater and theatre?

Keep up posted, and good luck!

[vindaloo]

There's no difference between an airplane and an aeroplane, just the spelling.

BTW, the latest changes I mentioned haven't been uploaded yet as I have to wait until I get home (#!@#!* firewalls!)

[DCElliott]

Originally posted by vindaloo
BTW, the latest changes I mentioned haven't been uploaded yet as I have to wait until I get home (#!@#!* firewalls!) Yeah, how inconvenient not being able to upload stuff to your website while you should be working!:p

And Corey - you seem to be the advice guru of the month - I'll have to watch my back!

DE

[vindaloo]

DE, I've had another hard day at work... :)

I've been trying to make the prices (http://home.freeuk.net/pete.collins/prices.htm) page a bit more maintainable, and have got as far as using Javascript to read the table data from an array. I want to go one step further and populate this array from a text file or database instead of populating it manually, but have ground to a halt. Any suggestions? I don't mind if I have to abandon javascript and use something else.

Here is what I've done so far:

<html>
<head>
<title>Test Script</title>
<script language="Javascript">
<!--
planes = new Array();
planes[planes.length] = new tariff("Cessna 152","£84","£104");
planes[planes.length] = new tariff("Cessna 172","£90","£110");
planes[planes.length] = new tariff("Robin DR400","£86","£108");

function tariff(type, hire, train)
{
this.type = type;
this.hire = hire;
this.train = train;
}

function display_tariff(index)
{
document.write("<tr><td>"+planes[index].type+"</td><td>"+planes[index].hire+"</td><td>"+planes[index].train+"</td></tr>");
}
//-->
</script>
</HEAD>

<BODY>
<table border="3" width=50%>
<tr><th>Aircraft</th><th>Hire</th><th>Training</th></tr>

<script language="Javascript">
<!--
for (var loop=0; loop < planes.length; loop++)
{
display_tariff(loop);
}
//-->
</script>

</table>
</body>
</head>
</html>
<