Change Site to XHTML

[Roy Schestowitz]

__/ [ (e-mail address removed) ] on Monday 27 March 2006 14:30 \__

Hi,

I am converting my father's family history over to XHTML from a very
daggy frames look. I am not a professional designer and this is my
first shot at XHTML (aided by Dreamweaver 8).

Can someone please look at the first page and see if I am on the
right track? Only bare bones there as yet but once the page is set it
will be a template for another 50.
http://people.aapt.net.au/~adjlstrong/test.html

I started from a an older template provided by Macromedia:
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout.html
I love the #content element with right side %.

Thanks for any advice,

Andrew

Source code (XHTML) looks clean.

Stylesheet contains no apparent problems:

http://people.aapt.net.au/~adjlstrong/test.css

At the moment, the XHTML validator (from the W3) refuses to attempt a go at
the page. No idea why. It works for other sites.

All in all, you seem to be on the right track.

Best wishes and good luck,

Roy

 

[sorry.no.email]

Hi,

I am converting my father's family history over to XHTML from a very
daggy frames look. I am not a professional designer and this is my
first shot at XHTML (aided by Dreamweaver 8).

Can someone please look at the first page and see if I am on the
right track? Only bare bones there as yet but once the page is set it
will be a template for another 50.
http://people.aapt.net.au/~adjlstrong/test.html

I started from a an older template provided by Macromedia:
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout.html
I love the #content element with right side %.

Thanks for any advice,

Andrew

 

[Andy Dingley]

I am converting my father's family history over to XHTML from a very
daggy frames look.

The whining noise you can hear is the Geek Chorus telling you that
XHTML is evil and you shouldn't use it.

Hey, it's your call. But there's little benefit to it (for this sort of
site) and you should only do it after reading some of the past debate
here and in c.i.w.a.h and reading Appendix C. Otherwise just ignore
it! - you're doing OK so far.

Can someone please look at the first page and see if I am on the
right track?

The nav list on the left is a list, so mark it up as one, not just a
sequence of <p>s. Use CSS to turn off list bullets etc., if you wish.
If you need to use "anonymous text blocks" like this, then <div> is
arguably a bit better than <p> (if you can't really say "This is a
paragraph" about a small fragment)

You aren't setting the background color or a default color on the body.
This becomes more obvious when the background image fails to load (as
it does just now).

Lay off the "font-size 85%". Leave body text size at _my_ default
choice, not yours. Or else lend me your screen and eyeballs to read it.

Equally don't mess with line-height. It's rarely a good idea to do
this.

Consider setting the <a> elements in the body text to display with a
line break before them. If you're making the URL visible in the text
like this (OK if that's what you want, or you want it to be visible
when printed) then it looks best if they're either all in-line, or all
line-broken beforehand. Stick a <br /> in before them, or else put a
class on each one and use some CSS
a.visible-url { display: block; }

Take a look at BlueRobot.com, glish.com etc. for some advice on getting
multi-coloumn layouts to behave themselves across different browsers.
it's not obvious or easy to do this well (OTOH it's easy to copy a good
example). Macromedia are clueless here (as ever!)

Instead of WEDEMEYER use <span class="surname" >Wedemeyer</span> and
the CSS
.surname { text-transform: uppercase; }

Linking placenames to the Getty Thesaurus (TGN) can be worthwhile for
genealogy - there are a lot of "Newcastle"s in the world.


Overall though, it looks fine. Keep us posted as it develops.

 

[Stan McCann]

(e-mail address removed) wrote in

Hi,

I am converting my father's family history over to XHTML from a
very
daggy frames look. I am not a professional designer and this is my
first shot at XHTML (aided by Dreamweaver 8).

Why XHTML? See http://www.hixie.ch/advocacy/xhtml. There's plenty
more out there with a bit of searching.

Can someone please look at the first page and see if I am on the
right track? Only bare bones there as yet but once the page is set
it will be a template for another 50.
http://people.aapt.net.au/~adjlstrong/test.html

I started from a an older template provided by Macromedia:
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layou
t.html I love the #content element with right side %.

I was rather surprised that both your XHTML and CSS validated due to
your mention of using Dreamweaver. Did you have to manually tweak the
code? Many WYSIWYMG (What You See Is What You *Might* Get) editors
fail to produce valid code. What you have there looks better than
expected.

Things to consider:
You have not set a background color for the body and I see no
background image. Even when using a background image, the background
color should be set for those that may have images turned off due to
slow dial up connections or whatever. Looking at your page right now,
it has a purple background. Your background image seems to be
misplaced.
Take a close look at your style sheet and see that you set a particular
font over and over. Setting it for the body could let you set it once.
The same with color and possibly some other settings. Set things once
in the body if everything is the same.
Your navigation width is set in pixels. Sometimes that is most
appropriate, but consider using % or em.

With that start, you can easily add header and footer blocks if
desired. I'd say yes, you are on the right track.

 

[sorry.no.email]

Hi Andy Dingley,

Thanks very much for your comments on the site I am converting to
XHTML. The address has moved an inch to:

http://people.aapt.net.au/~adjlstrong/

I have addressed your very helpfull comments below:

The whining noise you can hear is the Geek Chorus telling you that
XHTML is evil and you shouldn't use it.

Hey, it's your call. But there's little benefit to it (for this sort of
site) and you should only do it after reading some of the past debate
here and in c.i.w.a.h and reading Appendix C. Otherwise just ignore
it! - you're doing OK so far.

To tell you the truth I am having a great time and learning a lot as I
go. This is incentive enough for me, especially as this site is not a
commercial one

The nav list on the left is a list, so mark it up as one, not just a
sequence of <p>s. Use CSS to turn off list bullets etc., if you wish.
If you need to use "anonymous text blocks" like this, then <div> is
arguably a bit better than <p> (if you can't really say "This is a
paragraph" about a small fragment)

I have put a list in place that I took from Listamatic. I noted on
their other pages:
http://css.maxdesign.com.au/listamatic2/index.htm
there were nested lists. Now I love the simple list I have found.
Surely this can be converted to a nested list?

You aren't setting the background color or a default color on the body.
This becomes more obvious when the background image fails to load (as
it does just now).

I have lost the image and set a background colour, white for the
moment.

Lay off the "font-size 85%". Leave body text size at _my_ default
choice, not yours. Or else lend me your screen and eyeballs to read it.

Equally don't mess with line-height. It's rarely a good idea to do
this.

Line height has gone and I did not miss it Iwill admit. Font
percentages I have mostly lost although I have made the navigation bar
95% to differentiate from body text; I am still considering this one
though.

Consider setting the <a> elements in the body text to display with a
line break before them. If you're making the URL visible in the text
like this (OK if that's what you want, or you want it to be visible
when printed) then it looks best if they're either all in-line, or all
line-broken beforehand. Stick a <br /> in before them, or else put a
class on each one and use some CSS
a.visible-url { display: block; }

Thanks for that one, I have implemented it and it is brilliant!

Take a look at BlueRobot.com, glish.com etc. for some advice on getting
multi-coloumn layouts to behave themselves across different browsers.
it's not obvious or easy to do this well (OTOH it's easy to copy a good
example). Macromedia are clueless here (as ever!)

Thanks for the tip! I have taken the header from BlueRobot and intend
to modify this a little for the site. I will admit to not fully
understanding all of his comments in the CSS so I have left them
intact until I am a little wiser

Instead of WEDEMEYER use <span class="surname" >Wedemeyer</span> and
the CSS
.surname { text-transform: uppercase; }

Sound great but to tell the truth all my text arrives in an MS Word
document with the cases already set in place. But I shall store this
one away for future reference.

Linking placenames to the Getty Thesaurus (TGN) can be worthwhile for
genealogy - there are a lot of "Newcastle"s in the world.


Overall though, it looks fine. Keep us posted as it develops.

Thanks very much for your very constructive and highly useful
comments!

Andrew.

 

[sorry.no.email]

Hi Stan,

Thank you very much for your comments on my reworking of a family
history page. I have temporarily moved it to:
http://people.aapt.net.au/~adjlstrong/
I shall address your very helpful comments below:

(e-mail address removed) wrote in


Why XHTML? See http://www.hixie.ch/advocacy/xhtml. There's plenty
more out there with a bit of searching.

I will admit to having a ball learning a bit about XHTML. It is
forcing me away from some very bad habits with web sites

I was rather surprised that both your XHTML and CSS validated due to
your mention of using Dreamweaver. Did you have to manually tweak the
code? Many WYSIWYMG (What You See Is What You *Might* Get) editors
fail to produce valid code. What you have there looks better than
expected.

Dreamweaver 8 seems to pick up many of my errors, but yes, it adds a
few extras which do not validate.

Things to consider:
You have not set a background color for the body and I see no
background image. Even when using a background image, the background
color should be set for those that may have images turned off due to
slow dial up connections or whatever. Looking at your page right now,
it has a purple background. Your background image seems to be
misplaced.

That was an error that I have corrected. Just white background colour
for the moment.

Take a close look at your style sheet and see that you set a particular
font over and over. Setting it for the body could let you set it once.
The same with color and possibly some other settings. Set things once
in the body if everything is the same.

Thanks for this one, I have added this to the body and removed some of
the others. Have not set link colours yet but I am quite comfortable
with this.

Your navigation width is set in pixels. Sometimes that is most
appropriate, but consider using % or em.

This is one I will definitely consider. I am still feeling my way with
the layout of the page. I am very pleased with the fluid contents!

With that start, you can easily add header and footer blocks if
desired. I'd say yes, you are on the right track.

I have added a header block that came free from the layout reservoir:
http://bluerobot.com/web/layouts/layout1.html
Not sure if I need a footer, I am aiming for a simple, clean look
which seems to almost be there.

Thanks heaps!

Andrew.