• A Great friend to the HardForum with a great kid that he is trying to get a scholorship to continue his schooling. Please give hime a vote! Only 24 hours left! Thanks.
    If you have an VOTE FOR KEENAN!

Very First Site (critique)

Here's some quick thoughts from a technical standpoint. I'm viewing with Firefox 0.8 / WinXP, for reference.

You really should not be using frames, even though they help you reuse code from a beginner standpoint. At a minimum, switch to tables. Copy-and-paste your links if you must, but look into server-side includes. Preferably, start learning layouts from day 1 with <div>s and CSS. There's several current threads on the topic, notably the "taking the CSS plunge" thread on page 2 or so.

I personally think it's also worth learning DOCTYPEs and compliant code from day one, though that's more complex. Again, there are several recent threads discussing this (probably the "critique my page" threads)

Now for the site:

I, personally, would drop the <center> from the pages in favor of aligning the content under your logo and not going wider than that. The end result will be that high-res monitors will stretch text all the way across the page, which becomes difficult to read. Alternatively, center the logo as well. It just looks odd with the content and the header not lining up.

On the main page, there's a dark-grey line below the content and off-center. not sure what it is, but it looks like a mistake. The line below the links looks planned, so it's not a problem.

The white-on-grey is acceptable contrast, but the black links aren't good. People are adjusting to looking for light-on-dark and then you flip the scheme on them for the important stuff, and that makes the links very hard to read.

On the pics page, using html to resize an image is not how to make a thumbnail. You're still making the viewer load the full 600K file even though they only see a small version. Your options are (1) use an image program, even MS Paint, to create a real thumbnail (2) make a text link instead of a thumbnail or (3) skip the thumbnail page entirely. (3) is really a last resort, but it's still an improvement, as it eliminates one unnecessary click.

On the Tech page, it's MB, not Mb.

/* edit:
The hover effect on the sidebar would be much better accomplished with the css hover pseudoclass. That is, have rules like
Code: 
a { background-color:#666; }
a:hover { background-color:#AAA; }

Also, the post about javascript to prevent stealing frames is odd.  I don't see relevant JavaScript, nor am I certain what, exactly, is prevented from being stolen.
*/
Anyway, it's not at all a bad site for a first go!  I'm particularly impressed that you went ahead and used CSS the first time around.
 
not bad for a first attempt.. much better than my first attempt, that's for sure.

i too would strongly recommend dumping frames. there is nothing good about frames, and they are despised by just about everyone.

so dump the frames, but since you are new, do your layouts with tables for now.

you will want to learn CSS next. it will help you in many, many ways. when you get better, you'll want to move from table based layouts to pure CSS layouts. but go slow, and start out the CSS and tables.

then i'd suggest moving to XHTML instead of HTML. it's more standards compliant, and learning it will make you write more proper code.
 
I'm probably just beating a dead horse anyways.

http://hardforum.com/showthread.php?t=762226

http://hardforum.com/showthread.php?t=762638

There are a bunch of links in these two threads for HTML and CSS stuff among other things.

I would say drop those frames like a bad habit; frames are a relic of web design and you shouldn't use them when you can have a tool like CSS at your disposal.

The contrast of the red link text and the gray background is burning my retinas out.

All in all, not a bad site, but there's the whole text part moving farther and farther away from the links as you're resizing the window as well.

I viewed it in IE 6, Opera 7, and Firefox 0.8 and 0.9; they displayed the same way in all of them.

On a side note, I like your musing about the school dance, and you really like those exact frequencies in the 'Tech' section don't you?
 
Definitely need to specify a Doctype and character encoding.

For the frameset page, you'll want to use XHTML 1.0 Frameset

For the menu frame, you'll want to use XHTML 1.0 Transitional so you can use the target attribute for the links.

For your main frame, use xhtml 1.0 strict or *XHTML 1.1*

Here's a list of Doctypes you can use.

Here's an XHTML 1.0 Frameset example .

Concentrate on the code for xhtmlframe.htm, top.htm, main.htm and menu.htm.

Don't concentrate on the content of the example. (There really isn't any)

** XHTML 1.0 Strict more or less = XHTML 1.1 in my mind and even though you are not supposed to serve XHMTL 1.1 as text/html , you can do it anyway. So for you main frame, I would use XHTML 1.1 .

Also, since there is no border attribute for the frameset tag in xhtml 1.0 frameset, if you don't want a border between the frames, you'll have to break that tiny rule and add the border attribute.

As others have already said, a css layout would be better.
 
Shadow2531 said:
Definitely need to specify a Doctype and character encoding.

For the frameset page, you'll want to use XHTML 1.0 Frameset

For the menu frame, you'll want to use XHTML 1.0 Transitional so you can use the target attribute for the links.

For your main frame, use xhtml 1.0 strict or *XHTML 1.1*

Here's a list of Doctypes you can use.

Here's an XHTML 1.0 Frameset example .

Concentrate on the code for xhtmlframe.htm, top.htm, main.htm and menu.htm.

Don't concentrate on the content of the example. (There really isn't any)

** XHTML 1.0 Strict more or less = XHTML 1.1 in my mind and even though you are not supposed to serve XHMTL 1.1 as text/html , you can do it anyway. So for you main frame, I would use XHTML 1.1 .

Also, since there is no border attribute for the frameset tag in xhtml 1.0 frameset, if you don't want a border between the frames, you'll have to break that tiny rule and add the border attribute.

As others have already said, a css layout would be better.
Click to expand...

i disagree with this approach. Concentrating on the technical aspects like proper doctype serves little purpose at this stage. For a beginner, he should really be concentrating on things like learning the advantages of certain approaches (like why frames are bad, and why CSS is good), learning the proper use of markup, getting a feel for good layout techniques and learning how to write compelling content.

Let's not squash his excitement of learning web design by forcing him to delve into the boring doldrums of doctypes and validation just yet..
 
It's real but not in the sense you are thinking of (it's not full auto). It actually has less kick than my 20-gauge :eek: . But lets get back to to topic at hand ;)
 
Oops.... I think I killed the thread. :p

I have a test version of my page without frames HERE

I only seem to have one problem though... why is there so much space below the content? :confused:

Am I doing something wrong?
 
Just looking over it quickly, you can fix it by changing your css for main to

Code: 
#main {
    position: absolute;
    left: 145px;
    bottom:90px;
    width: 60%;
}


I did not spend time on it, so that may not be the best answer, but it should give you hints

IF you use Firefox 0.9, you can install the web developer extension. Then you can edit the css and the page will automatically change as you are editing. Makes things easier.
 
you have an extra opening body tag, get rid of that to start. get the "target=XXX" out of your links. remove that javascript rollover and replace it with css code to do the same thing, only better.
check it out:
your current code:
Code: 
.nav:link {
	FONT-FAMILY: Arial;
	FONT-SIZE: 10pt;
	color: #B11F1D;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none
}
A.nav:visited { 
FONT-FAMILY: Arial;
FONT-SIZE: 10pt;
color: #B11F1D; 
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.nav:hover {
 text-decoration: none;}

update to:
Code: 
a.nav:link 
{
	FONT-FAMILY: Arial;
	FONT-SIZE: 10pt;
	color: #B11F1D;
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none;
	display:block;
	width:140px;
	background-color:#696969;
}
A.nav:visited 
{ 
	FONT-FAMILY: Arial;
	FONT-SIZE: 10pt;
	color: #B11F1D; 
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none
	display:block;
	width:140px;
	background-color:#696969;
}
A.nav:hover 
{
	FONT-FAMILY: Arial;
	FONT-SIZE: 10pt;
	color: #B11F1D; 
	FONT-WEIGHT: bold;
	TEXT-DECORATION: none
	display:block;
	width:140px;
	background-color:#8b8989;
}
that should work...although i didn't test it
 
Stinn said:
Update to:
Code: 
css-ish
that should work...although i didn't test it
Click to expand...
yikes, that was ugly CSS. Sorry, man, but that looked bad
Here's the same, cleaned up:
Code: 
/* CSS itself is not case-sensitive, but class/id names are.
It's good practice, therefore, to keep consistent case.
  Don't capitalize your element names, as that's illegal XHTML, for starters */
a.nav /* ditch the :link pseudo-class, that's implicit --
 this method also allows definitive inheritance */ 
{
	font-family: Arial, sans-serif; 
/*always specify a generic font family */
	font-size: 10pt;
 /* acceptable, though purists prefer you stick to small, medium, large, etc */
	color: #B11F1D;
 /* Not a major point, but if possible, aim for 16-bit color,
where each pair of values is the same.  This would become,
for instance, #AA2222, which can also be written #A22.
This can help keep your site display constant */
	font-weight: bold;
	text-decoration: none;
	display:block;
	width:140px;
	background-color:#696969;
 /* as above, this could be #666, the dark grey of unspeakable evil */
}
a.nav:visited 
{ 
/* Nothing here is different from the standard a.nav,
so don't put anything with the possible exception of color
to override default purple (if needed) -- If it's fine even
without that, remove this directive entirely.  I've commented it out for now. */
/*     color: #B11F1D */
}
a.nav:hover 
{
/* again, nothing here changed except one line.
Don't repeat all that stuff.
It wastes bandwidth, lessens ease of change (originally, you'd
have had to change color in 3 places to identical values.  why? */
	background-color:#8b8989;
/* and lastly, could be #888 */
}
 
good cleanup, didn't care much about cleaning it up as I didn't want to spend alot of time on it.
 
You should get rid of the xml declaration. It puts IE in quirks mode.

You also don't have a character encoding defined. You can do that with a meta tag or if you keep the xml declaration, you can do there.

You need to put your links.gif inside an element. It's in between the caption and tr of the table.

All your width and heights need units. e.g. 40px not 40.

The &s in all the URIs need to be &amp;
 
one thing i dont like, the rollover on the left makes a set sized rectangle, but you can only click on the words. When i see things change on rollover i feel like i should be able to click there. If it were my webpage i would make it so you could click anywhere in the rectangle, not just the words. but thats just my opinion
 
MikeF98765 said:
one thing i dont like, the rollover on the left makes a set sized rectangle, but you can only click on the words. When i see things change on rollover i feel like i should be able to click there. If it were my webpage i would make it so you could click anywhere in the rectangle, not just the words. but thats just my opinion
Click to expand...
Incidentally, this problem is fixed with the following CSS directive:

a { display:block}

You'll probably want to refine it so that only the sidebar links are affected, but that'll give the full clickable area. I concur with Mike that this is worth doing.
 
way better than my first website heh

i think i had rotating skull gifs and diablo1 animations :)
 
You must log in or register to reply here.
Back
Top