Re: Website design for beginners

In article
<8487d6c6-01e1-475d-bf17-29bd00d09866@c23g2000hsa.googlegroups.co
m>,
Andrew H wrote:

> Hey-
>
> I just uploaded the above:
>
> to my website which is located @ www.jessicahodsdon.com
>
> So that is done as of now, hope this helps.

What is the url to the website please? A url is in the form of
http:// etc and please see that it appears on your browser,
preferably a number of different browsers too.

--
dorayme

Re: Website design for beginners

On 2008-01-17, John Hosking wrote:
....
> And here's a contribution for you to put inside the

And now you're telling the browser that you've stopped writing CSS,
and have gone back to writing HTML.

>

And now you've told the browser that you've finished giving it header
information.

>

Broadly speaking, this tag tells the browser that everything that
follows is marked-up content. Your content will therefore go where
I'm writing this.

>

And now you've told the browser that you've finished giving it marked-
up content.

>

And now you've told the browser that you've finished writing HTML.


Some further basic remarks:

HTML is used to mark out a document's logical structure; CSS is then
added to tell the browser how to display that document. In other
words, HTML tells the browser that (eg) "this is a paragraph", while
CSS tells it that "this paragraph is in Times New Roman, and is
blue". If you don't use CSS then browsers will use their own default
display settings, which (a) will look ugly to many people, (b) will
differ between different browser vendors, and (c) can even vary
between different versions (incl. platforms) of the same browser.
Basically, browser defaults are there as a safety net, and should
never be relied upon. Oh, and using CSS also allows you to do some
more fancy sorts of layout design that would otherwise be impossible.

An HTML document is broken down into "elements". Part of learning
HTML is to learn what elements can be nested inside other elements,
but the rules are generally pretty logical and easy to get the hang
of; to give an example, a "p" element is a paragraph, so only occurs
within the "body" element and not within the "head" element, because a
paragraph is content, and content only goes inside the body.

Elements are marked out using "tags". Some elements go in pairs, such
as the and tags used to mark out the beginning and end
of the body element. Others only have a single tag, such as the "img"
element. Again, you'll find it easy to learn which are which, even
though it's not always quite logical which elements get just one tag
and which ones get both an "opening tag" and a "closing tag".

Many elements also have "attributes", some of which are optional and
some of which are compulsory; for example, the "a" (for "anchor")
element is used to incorporate a link into your content, and naturally
enough requires that you use an attribute to state what the link's
destination URL is:

This is just some text I'm using as a dummy paragraph. If you
include this paragraph in your skeleton code then you'll find that the
word " is in fact a hyperlink
to the front page of the BBC News website. Note that I've done this
using the "href" attribute of the "a" element, that there is no space
on either side of the equals sign, and that the attribute's value is
enclosed in quote marks.

This is probably going to be the very first thing in your content,
and is roughly equivalent to the main headline on a newspaper's front
page

You might then have some introductory text here.

You might then have a sub-heading here; for example, about the
Republicans

Then you might have some text that relates to that sub-heading; for
example, something talking about the Republican Party.

You might even have a sub-sub-heading; for example, about a
particular Republican politician, or about a particular aspect of
Republican policy

Naturally enough, your sub-sub-heading will have some text about
it, which will go here.

You might then have another sub-heading here; for example, about
the Democrats

And here goes the text that goes with the preceding sub-heading. p>
Note that in the above example, I've decided that a section of the
content about the Republicans is logically equivalent to a section
about the Democrats, so I've placed them at the same position on the
hierarchy; ie, I've given them both an "h2" heading element. Sub-
headings within those sections can then be given headings on the next
level down the hierarchy, which in my example is "h3". How you decide
to separate out your content is up to you, of course, although there
should really only be one "h1" heading, and generally speaking you
shouldn't really have gaps in the hierarchy (so you shouldn't jump
from "h2" to "h4", for example).

Finally, you can use comments in your code, like this:

This is some content

This is some more content

Re: Website design for beginners

Wow, I really appreciate all of the responses I have received. I have
updated the website, this time with a temporary homepage that links to
the old photo gallery. I definitely need to work on the site layout
today. it seems to me that everyone here is agreed on the fact that
it is better to use plain text files to edit the pages? So I have
been avoiding fancy editing programs. I have the basic idea I think,
at least in terms of html. The CSS I understand on this basic level,
but I know there are classes and tags and divs, but I suppose, as you
have pointed out, that is neither here nor there at this time.

I am still waiting to have my site moved, but I have been working on
getting the basic layout up and running for now, working with tables,
etc. I imagine my next move is to just put up the content first, in
separate html files, and then link to them, or should I work on the
theme for the first page and then add others later?

I look forward to hearing from you

On Jan 18, 5:46 am, "AGw. (Usenet)"
wrote:
> On Jan 17, 8:09 pm, dorayme wrote the
> following skeleton code:
>
> > > > "http://www.w3.org/TR/html4/strict.dtd">
>
> These two lines tell browsers that you're using version 4.01 Strict of
> the HTML specification, which is what all new web pages should be
> using (pace XHTML advocates).
>
> >
>
> This tells the browser that the HTML code is now beginning.
>
> >
>
> This tells the browser that what follows is the page header. All the
> stuff that goes here is informational and (the "title" element aside)
> is not displayed by the browser.
>
> >
>
> This is the "title" element, and if you load your new skeleton page in
> your browser it should be obvious what the browser does with this!
>
> Note that if your page is bookmarked, this is what the browser will
> use as the default name for the bookmark.
>
> >
>
> And now you're telling the browser that you've stopped writing CSS,
> and have gone back to writing HTML.
>
> >
>
> And now you've told the browser that you've finished giving it header
> information.
>
> >
>
> Broadly speaking, this tag tells the browser that everything that
> follows is marked-up content. Your content will therefore go where
> I'm writing this.
>
> >
>
> And now you've told the browser that you've finished giving it marked-
> up content.
>
> >
>
> And now you've told the browser that you've finished writing HTML.
>
> Some further basic remarks:
>
> HTML is used to mark out a document's logical structure; CSS is then
> added to tell the browser how to display that document. In other
> words, HTML tells the browser that (eg) "this is a paragraph", while
> CSS tells it that "this paragraph is in Times New Roman, and is
> blue". If you don't use CSS then browsers will use their own default
> display settings, which (a) will look ugly to many people, (b) will
> differ between different browser vendors, and (c) can even vary
> between different versions (incl. platforms) of the same browser.
> Basically, browser defaults are there as a safety net, and should
> never be relied upon. Oh, and using CSS also allows you to do some
> more fancy sorts of layout design that would otherwise be impossible.
>
> An HTML document is broken down into "elements". Part of learning
> HTML is to learn what elements can be nested inside other elements,
> but the rules are generally pretty logical and easy to get the hang
> of; to give an example, a "p" element is a paragraph, so only occurs
> within the "body" element and not within the "head" element, because a
> paragraph is content, and content only goes inside the body.
>
> Elements are marked out using "tags". Some elements go in pairs, such
> as the and tags used to mark out the beginning and end
> of the body element. Others only have a single tag, such as the "img"
> element. Again, you'll find it easy to learn which are which, even
> though it's not always quite logical which elements get just one tag
> and which ones get both an "opening tag" and a "closing tag".
>
> Many elements also have "attributes", some of which are optional and
> some of which are compulsory; for example, the "a" (for "anchor")
> element is used to incorporate a link into your content, and naturally
> enough requires that you use an attribute to state what the link's
> destination URL is:
>

This is just some text I'm using as a dummy paragraph. If you
> include this paragraph in your skeleton code then you'll find that the
> word " is in fact a hyperlink
> to the front page of the BBC News website. Note that I've done this
> using the "href" attribute of the "a" element, that there is no space
> on either side of the equals sign, and that the attribute's value is
> enclosed in quote marks.

This is probably going to be the very first thing in your content,
> and is roughly equivalent to the main headline on a newspaper's front
> page

You might then have some introductory text here.

You might then have a sub-heading here; for example, about the
> Republicans

Then you might have some text that relates to that sub-heading; for
> example, something talking about the Republican Party.

You might even have a sub-sub-heading; for example, about a
> particular Republican politician, or about a particular aspect of
> Republican policy

Naturally enough, your sub-sub-heading will have some text about
> it, which will go here.

You might then have another sub-heading here; for example, about
> the Democrats

And here goes the text that goes with the preceding sub-heading. > p>
> Note that in the above example, I've decided that a section of the
> content about the Republicans is logically equivalent to a section
> about the Democrats, so I've placed them at the same position on the
> hierarchy; ie, I've given them both an "h2" heading element. Sub-
> headings within those sections can then be given headings on the next
> level down the hierarchy, which in my example is "h3". How you decide
> to separate out your content is up to you, of course, although there
> should really only be one "h1" heading, and generally speaking you
> shouldn't really have gaps in the hierarchy (so you shouldn't jump
> from "h2" to "h4", for example).
>
> Finally, you can use comments in your code, like this:
>

This is some content

This is some more content

Re: Website design for beginners

On Thu, 17 Jan 2008 13:38:47 -0800 (PST), Andrew H
wrote:

> I just uploaded ... to my website which is
> located @ http://www.jessicahodsdon.com

A few suggestions:

The

does not need to be part of the layout table. Put it by
itself above and delete that row/td. Keep it simple.

Put your paragraphs within

...

markup. Only use
to force
a new line without the default blank line, such as for your "designed
by" note.

The is on the same site, so you can use a relative URL rather
than specifying the whole thing. Also, for those who can't see the
image, provide some alternate text that describes what they're missing
(required for 4.01 Strict). Specifying the size of the img is
optional, but allows the browser to reserve space for it before it's
loaded.

I see how the layout table keeps the text to the right of the photo,
but you can get much the same effect without it. (Take this as
showing you another way.)

Start by clearing out all the table/row/td markup. Next, apply some
in-line CSS to the image. (If you want all images to have this CSS,
put it in your internal or external stylesheet instead.) First,
"float:left" keeps the img on the left side, with the rest of the

on the right, then wrapping underneath as you add paragraphs. Then,
to keep the text from touching the img and allow for easier reading,
add "margin-right:1em". (An "em" is a unit of line /height/ that is
frequently recommended for specifying width because it will adjust as
the user adjusts the text size.)

Link text should be descriptive of the destination.
http://www.w3.org/QA/Tips/noClickHere

Your page with revised markup:

In Loving Memory of Jessica Hodsdon

src="images/jess_obit.gif" alt="Photo of Jessica" width="215"
height="320">Jessica Hodsdon, after years of struggling ...

Thank You,

Andrew Y. Hodsdon

Also please visit
the Jessica Hodsdon photo
gallery

Website Designed by Andrew Y. Hodsdon

ahodsdon@gmail.com

The final

adds "clear:left;" to break the float and allows the

to be placed under the photo when there is not enough content to
extend below it. (Or, if you keep the table, move this

below the
table, but without the inline style, just like we moved

above
it.)
--

Charles

Re: Website design for beginners

am 18.01.2008 19:19:02 von Frederick

On Jan 18, 2:51 pm, Andrew H wrote:

Friendly advice, to heed before someone says something rude to you:
The standard on this newsgroup, and on most other "technical" groups,
is to bottom post, not to top post.

> Wow, I really appreciate all of the responses I have received. I have
> updated the website, this time with a temporary homepage that links to
> the old photo gallery.

A couple of quick notes regarding the page as it currently is.

Firstly, when using the "img" element the general advice is that you
should always have a meaningful "alt" attribute. This provides text
for those users who don't get to see your image, such as the blind.
You may of course not consider this to be terribly important for a
personal web page that may not get much traffic; but I mention it as a
good habit to get into now, in case you find yourself creating other
websites in the future.

Secondly, you're (temporarily?) using an HTML table for layout; this
can be a bit of a "religious" issue for professional web designers!
Again, for a personal web page it's not really an issue, but using
tables does have the disadvantage that it gets you thinking about
layout in a particular way that (in my experience) makes learning good
CSS more difficult when you're just starting out. Ideally you should
only use a table for "tabular data" (basically, the sort of thing that
would have rows and columns if you were writing it out with pen and
paper).

> I definitely need to work on the site layout
> today. it seems to me that everyone here is agreed on the fact that
> it is better to use plain text files to edit the pages? So I have
> been avoiding fancy editing programs.

If you want to learn HTML, then it's definitely better in my view to
use a plain text editor, or perhaps a slightly more advanced text
editor that has handy features such as syntax highlighting.

If you do want to try out a particular piece of web design software,
the first thing I'd do is see how well it copes with you manually
editing your code (in the same way as you'd do using a text editor);
you'd be surprised how many web design products either don't allow you
to do this at all, or will add all sorts of weird proprietorial stuff
to your code, or will even rewrite or reformat your code when opening
a file (and before you use the program to edit it). Personally, I'd
leave it a while before checking any of these software products out,
though.

> I have the basic idea I think,
> at least in terms of html. The CSS I understand on this basic level,
> but I know there are classes and tags and divs, but I suppose, as you
> have pointed out, that is neither here nor there at this time.

CSS works by you defining rules for how particular HTML elements are
to be formatted. Using classes, ids, divs, and spans, gives you more
flexibility to how that actually works in practice.

Obviously it's useful to be able to distinguish between different
examples of the same type of element (for example, you might want
*this* paragraph to be blue, but *that* paragraph to be red), which is
where the "class" and "id" come into things.

Example HTML:

This is one example paragraph.

This is another example paragraph.

This is a different example paragraph.

You can have a CSS rule that applies to all paragraphs, like this:
p {
color: #0000ff;
}

That CSS will then make the text of all paragraphs (whether of class
"foo", or "bar", or with no class at all) display in blue.

On the other hand:

p {
color: #0000ff;
}

..foo {
color: #ff0000;
}

The above two CSS rules will make all paragraphs blue, except for
those with a "class" attribute of "foo" (which will instead be red).

The syntax for a CSS rule for an "id" attribute is slightly different
(you use a "#" instead of a "."), and in the HTML document you can
only use a given name for an "id" attribute just the once, whereas you
can use the same "class" attribute ad infinitum. Probably for now
it's best to stick with the "class" attribute, just to keep things
simple.

As for

and elements, well you use these for when you need
to format something in your HTML that doesn't already have a
convenient element; for example, you might want to format a particular
word in a different way from the rest of its containing paragraph:

HTML:

This is an example paragraph. The word "wibble span>" will be formatted differently to the rest of this paragraph's
content.

CSS:
#fred {
text-decoration: underline;
}

Using the above CSS rule, the word "wibble" will be underlined even
though the rest of the paragraph won't be.

The "span" element is used for defining in-line stuff you want to play
with, whereas the "div" element is used for block-level stuff:

HTML:

This is a paragraph.

This is another paragraph.

This is a third paragraph.

This is a fourth paragraph.

CSS:
..introductory {
color: #ff0000;
}

The above CSS rule will make the first three paragraphs red, but the
fourth one will be left alone.

Basically your first step when coding should be to use HTML to mark
out the logical structure of your document, and only after that would
you add any necessary div or span elements that your CSS wouldn't
otherwise work without. In my example above, you could get rid of the
"introductory" div by instead using a class attribute with each of the
three paragraphs; in other cases, though, it'll be a div or nothing.

> I am still waiting to have my site moved, but I have been working on
> getting the basic layout up and running for now, working with tables,
> etc. I imagine my next move is to just put up the content first, in
> separate html files, and then link to them, or should I work on the
> theme for the first page and then add others later?

I think the correct answer to that question is "whichever works best
for you", and the only way of finding *that* out is to choose one and
see how it goes! Learning theory is good, and "getting your hands
dirty" is also good. A hundred professionals might do it one
particular way, but they're them and not you.


--
AGw.

Re: Website design for beginners

am 18.01.2008 21:05:52 von dorayme

In article
<88e45cc8-870a-4e88-b818-93bfb66b8742@s13g2000prd.googlegroups.co
m>,
"AGw. (Usenet)" wrote:

> On Jan 17, 8:09 pm, dorayme wrote the
> following skeleton code:
>
> > > > "http://www.w3.org/TR/html4/strict.dtd">
>
> These two lines tell browsers that you're using version 4.01 Strict of
> the HTML specification, which is what all new web pages should be
> using (pace XHTML advocates).
>
> >
>
> This tells the browser that the HTML code is now beginning.
>
> >
[...]
>
> HTML is used to mark out a document's logical structure; CSS is then
> added to tell the browser how to display that document. In other
> words, HTML tells the browser that (eg) "this is a paragraph", while
> CSS tells it that "this paragraph is in Times New Roman, and is
> blue". If you don't use CSS then browsers will use their own default
> display settings, which (a) will look ugly to many people, (b) will
> differ between different browser vendors, and (c) can even vary
> between different versions (incl. platforms) of the same browser.
> Basically, browser defaults are there as a safety net, and should
> never be relied upon. Oh, and using CSS also allows you to do some
> more fancy sorts of layout design that would otherwise be impossible.
>
> An HTML document is broken down into "elements".

[...]
>
> Hope this has helped just a little bit more!
>

I am certain this will help OP and also many others, it is good
of you to have taken the trouble.

I leave a quibble to last: Perhaps your "Basically, browser
defaults are there as a safety net, and should never be relied
upon." could be qualified to avoid the onerous responsibility
that is then thrust on the author if he were really to start his
CSS with

* {margin: 0; padding: 0;}

I don't think a newbie should be tempted down this road too early.

--
dorayme

Re: Website design for beginners

am 18.01.2008 22:04:53 von dorayme

In article
>,
"AGw. (Usenet)" wrote:

> On Jan 18, 2:51 pm, Andrew H wrote:
>
> Friendly advice, to heed before someone says something rude to you:
> The standard on this newsgroup, and on most other "technical" groups,
> is to bottom post, not to top post.
>

{and lots of good further advice from AGw... snipped here]

Here is a suggestion for a look:



--
dorayme

Re: Website design for beginners

am 18.01.2008 22:29:29 von ahodsdon

On Jan 18, 4:04 pm, dorayme wrote:
> In article
> ,
>
> "AGw. (Usenet)" wrote:
>
> > On Jan 18, 2:51 pm, Andrew H wrote:
>
> > Friendly advice, to heed before someone says something rude to you:
> > The standard on this newsgroup, and on most other "technical" groups,
> > is to bottom post, not to top post.
>
> {and lots of good further advice from AGw... snipped here]
>
> Here is a suggestion for a look:
>
>
>
> --
> dorayme

I like the design you came up with dorayme, and AGw that discussion of
CSS was helpful. I feel more confident that I am on the right track
now and I thank you all for that. BTW am I bottom posting at this
point? I am using google groups and I think I am posting correctly,
but if not let me know.

For that design, if I wanted to use that as say a theme and then
create a number of pages with that template, would that require me to
use that CSS style page, as opposed to the inline style?

I have been using dreamweaver, but only to edit the html text (I find
it is helpful to see the results of each change) and things seem to be
going well.

Re: Website design for beginners

am 18.01.2008 23:27:59 von Frederick

On Jan 18, 9:29 pm, Andrew H wrote:

> On Jan 18, 4:04 pm, dorayme wrote:
>
> > [snipped]
>
> BTW am I bottom posting at this point?

Yes, that was bottom-posted! :-)

> I have been using dreamweaver, but only to edit the html text (I find
> it is helpful to see the results of each change) and things seem to be
> going well.

I hope you've not forked out for it! But your approach to how you're
using it is absolutely the right one; soon enough you'll start to
understand what it's about, and can perhaps start to use some of its
various features to speed up the stuff you'll already know how to code
by hand.

The main reason why beginners are generally warned off from
Dreamweaver in particular is that its price is poor value for someone
who isn't a professional; also, it won't make better websites for you
just because it's a professional tool, in the same way that a really
expensive camera won't (by itself) make a beginner photographer into a
great artist. However, it's a pretty reliable product, so you're in
safe hands, and by using it the way you are you'll be getting the most
benefit out of it without suffering most of the pitfalls that plague
other web design programs.


--
AGw.

Re: Website design for beginners

am 18.01.2008 23:29:26 von dorayme

In article
<7a963dc7-e081-4579-8bb8-9d74cf6efebb@e4g2000hsg.googlegroups.com
>,
Andrew H wrote:

> On Jan 18, 4:04 pm, dorayme wrote:
> > In article
> > ,
> >
> > "AGw. (Usenet)" wrote:
> >
> > > On Jan 18, 2:51 pm, Andrew H wrote:
> >
> > > Friendly advice, to heed before someone says something rude to you:
> > > The standard on this newsgroup, and on most other "technical" groups,
> > > is to bottom post, not to top post.
> >
> > {and lots of good further advice from AGw... snipped here]
> >
> > Here is a suggestion for a look:
> >
> >
> >
> > --
> > dorayme
>
> I like the design you came up with dorayme, and AGw that discussion of
> CSS was helpful. I feel more confident that I am on the right track
> now and I thank you all for that. BTW am I bottom posting at this
> point? I am using google groups and I think I am posting correctly,
> but if not let me know.
>
> For that design, if I wanted to use that as say a theme and then
> create a number of pages with that template, would that require me to
> use that CSS style page, as opposed to the inline style?
>

If you are talking the doc like in the url above, the best thing
to do if you are going to have a number of pages is to make a
plain text file doc and call it say main.css. Simply put in all
of the stuff between the style tags in the head. Get rid of the
style tags and what is between them and simply substitute a link
to the style sheet, this will do if you have th main.css on the
same level as your pages on your server:

href="main.css">

With this on each page in the head, all the pages will have the
same styles, what you would want.

A couple of points, in the above url, you will notice that all
the inline styles have been removed to the styles in the head. (I
think all?) and this separates your content from your style, a
good rule to follow. Break these rules when you are more
confident!

You might or might not want to actually make your email address a
link in the footer.


> I have been using dreamweaver, but only to edit the html text (I find
> it is helpful to see the results of each change) and things seem to be
> going well.

Perhaps best to put DW aside for now and concentrate on simple
tools, mainly a plain text editor. It is easy to see the results
of your work anyway, just drag the html file over a browser
window. Or if you want to see results live at every code change,
consider getting the Firefox browser *and* the Developer
extensions which allow you to play around and see the effects of
code changes live.

--
dorayme

Re: Website design for beginners

am 19.01.2008 00:15:58 von Frederick

On Jan 18, 9:29 pm, Andrew H wrote:

> On Jan 18, 4:04 pm, dorayme wrote:
>
> > Here is a suggestion for a look:
> >
> >
>
> For that design, if I wanted to use that as say a theme and then
> create a number of pages with that template, would that require me to
> use that CSS style page, as opposed to the inline style?

You don't *have* to have the CSS as a separate stylesheet, but it
would certainly be easier for you. Suppose that you have the
following pages:
a.html
b.html
c.html
and you want each of those pages to have the same basic design. If
you have the CSS at the start of each HTML document, and want to make
a slight change to your design (by tweaking a colour, for example),
then you'd have to change the same code in each separate file;
however, if you have all your CSS in a separate stylesheet, you'll
just have to make one change in one place, and the formatting used for
all the files using that stylesheet will be instantly updated. Even
with just three pages it will save some time when changing your coding
to just have to do so in one place, and of course it's even more of an
advantage with more pages. A further advantage of having a separate
(or "external") stylesheet is that you don't run the risk of
accidentally making changes to the CSS in one HTML document but not in
others (or even worse still, making different changes to the CSS in
different HTML documents).

So, although it's not an absolute rule, it's generally best to have
your CSS in a separate stylesheet. To do this for your site, you'll
need to copy dorayme's CSS code from the HTML document, create a new
file called (say) "stylesheet.css", paste the CSS code into that file,
and then save it. Note that external stylesheets don't contain any
HTML code, and they also don't need any fancy stuff beside the CSS
itself; all they'll contain will just be the CSS rules (in dorayme's
example, that's everything from and including "body {" to "background:
#ddd;}").

Once you've moved your CSS code to the separate stylesheet, you can
delete everything from:

in your HTML document, replacing them with:


After that, you just need to upload the altered HTML file, and of
course the new stylesheet as well, and your HTML page will then look
the same as in dorayme's example. Just add that "link" code to the
"head" element of any new page you add to your site, and then that new
page will share the same CSS with the existing page.


--
AGw.

Re: Website design for beginners

am 19.01.2008 19:20:46 von ahodsdon

On Jan 18, 6:15 pm, "AGw. (Usenet)"
wrote:
> On Jan 18, 9:29 pm, Andrew H wrote:
>
> > On Jan 18, 4:04 pm, dorayme wrote:
>
> > > Here is a suggestion for a look:
>
> > >
>
> > For that design, if I wanted to use that as say a theme and then
> > create a number of pages with that template, would that require me to
> > use that CSS style page, as opposed to the inline style?
>
> You don't *have* to have the CSS as a separate stylesheet, but it
> would certainly be easier for you. Suppose that you have the
> following pages:
> a.html
> b.html
> c.html
> and you want each of those pages to have the same basic design. If
> you have the CSS at the start of each HTML document, and want to make
> a slight change to your design (by tweaking a colour, for example),
> then you'd have to change the same code in each separate file;
> however, if you have all your CSS in a separate stylesheet, you'll
> just have to make one change in one place, and the formatting used for
> all the files using that stylesheet will be instantly updated. Even
> with just three pages it will save some time when changing your coding
> to just have to do so in one place, and of course it's even more of an
> advantage with more pages. A further advantage of having a separate
> (or "external") stylesheet is that you don't run the risk of
> accidentally making changes to the CSS in one HTML document but not in
> others (or even worse still, making different changes to the CSS in
> different HTML documents).
>
> So, although it's not an absolute rule, it's generally best to have
> your CSS in a separate stylesheet. To do this for your site, you'll
> need to copy dorayme's CSS code from the HTML document, create a new
> file called (say) "stylesheet.css", paste the CSS code into that file,
> and then save it. Note that external stylesheets don't contain any
> HTML code, and they also don't need any fancy stuff beside the CSS
> itself; all they'll contain will just be the CSS rules (in dorayme's
> example, that's everything from and including "body {" to "background:
> #ddd;}").
>
> Once you've moved your CSS code to the separate stylesheet, you can
> delete everything from:
>
> in your HTML document, replacing them with:
>
>
> After that, you just need to upload the altered HTML file, and of
> course the new stylesheet as well, and your HTML page will then look
> the same as in dorayme's example. Just add that "link" code to the
> "head" element of any new page you add to your site, and then that new
> page will share the same CSS with the existing page.
>
> --
> AGw.

Just So everyone knows: No I did not pay for Dreamweaver, it is on the
library computers, and really the only benefit I feel it has is the
format highlighting so that I can visualize the layout in the code,
unlike a plain text editor.

I will definitely be creating that CSS file and linking it in the
page. my site just got moved so it is now located at http://216.104.34.66/~jessica5/
for the time being.

Well, hope you all have a good weekend and thanks again.

Re: Website design for beginners

am 20.01.2008 05:52:43 von jeff

Andrew H wrote:
> On Jan 18, 4:04 pm, dorayme wrote:
>> In article
>> ,
>>
>> "AGw. (Usenet)" wrote:
>>
>>> On Jan 18, 2:51 pm, Andrew H wrote:
>>> Friendly advice, to heed before someone says something rude to you:
>>> The standard on this newsgroup, and on most other "technical" groups,
>>> is to bottom post, not to top post.
>> {and lots of good further advice from AGw... snipped here]
>>
>> Here is a suggestion for a look:
>>
>>

I looked at this first in IE6 windows and noticed that image dropped
below the content border (the bottom border intersects the bottom
quarter of the image).

In Firefox 2.0 the box expanded to include the image.

I notice that the box is set for overflow: hidden, which struck me as
a bit odd.

Just another bit for your box model collection.

Jeff
>>
>> --
>> dorayme
>
> I like the design you came up with dorayme, and AGw that discussion of
> CSS was helpful. I feel more confident that I am on the right track
> now and I thank you all for that. BTW am I bottom posting at this
> point? I am using google groups and I think I am posting correctly,
> but if not let me know.
>
> For that design, if I wanted to use that as say a theme and then
> create a number of pages with that template, would that require me to
> use that CSS style page, as opposed to the inline style?
>
> I have been using dreamweaver, but only to edit the html text (I find
> it is helpful to see the results of each change) and things seem to be
> going well.

Re: Website design for beginners

am 20.01.2008 08:09:50 von Frederick

On Jan 19, 6:20 pm, Andrew H wrote:

> No I did not pay for Dreamweaver, it is on the library computers,

Cool! That means you get to use it without feeling you have to use it
to justify the cost...

> and really the only benefit I feel it has is the
> format highlighting so that I can visualize the layout in the code,
> unlike a plain text editor.

.... and as I said earlier, I think you've got just the right approach
to using it. Maybe you'll start to figure out other benefits to using
it as you progress, but either way you've got the best of both worlds
really.

Since you've mentioned visualising layout, it's perhaps worth
mentioning an important conceptual point at this early stage. HTML
and CSS are designed for the web, and not for print. What *that*
means is that you'll have no control over the *exact* layout, because
different people visiting your site will have differently-sized
monitors, will be using different browsers, will have different
operating systems, will have different screen resolutions, will have
different browser settings, and so on. As a result, you will go mad
if you ever start to think in terms of designing your site's pages
down to the nearest pixel; I'm not suggesting that this is how you
*are* thinking, but it would be a natural thing to do for a beginner.
Perhaps the way to think of it is as painting a mural: you can have
even a quite detailed design in mind, but you must keep it a bit
flexible because you have no control over the exact shape and size,
etc. of the wall that people will be seeing your mural on (and imagine
that if you carefully tailor your design to *exactly* just one
particular wall [or browser as shown on just one computer with one set
of settings], you'll then immediately have a problem when painting
that same mural on a different wall somewhere else). How you'll
achieve this sort of flexibility in practice is something that you'll
soon start to get pointers on here as you try out new things for your
site.

To put it all another way, your job as a designer is not to work out
where everything goes on the screen against an imaginary pixel-
accurate set of gridlines; rather, it's to keep the mechanics of your
code sufficiently flexible so that if (say) I need to use larger font
sizes on my computer because of poor eyesight, your design will still
"look the same" even though things on my screen won't be in *exactly*
the same place as on yours.

Hopefully that all made sense, and isn't blinding you with science at
too early a stage; it will start to make a lot more sense once you
start experimenting with more complex CSS, and people here then give
you their comments on it.

Unfortunately I'll now have to bow out from this thread, as I'm just
about to move home!

Good luck with the site... and with learning that HTML and CSS.


--
AGw.

Re: Website design for beginners

am 20.01.2008 18:00:27 von jeff

Andrew H wrote:
> On Jan 18, 6:15 pm, "AGw. (Usenet)"
> wrote:
>> On Jan 18, 9:29 pm, Andrew H wrote:
>>
>>> On Jan 18, 4:04 pm, dorayme wrote:
>>>> Here is a suggestion for a look:
>>>>
>>> For that design, if I wanted to use that as say a theme and then
>>> create a number of pages with that template, would that require me to
>>> use that CSS style page, as opposed to the inline style?
>> You don't *have* to have the CSS as a separate stylesheet, but it
>> would certainly be easier for you. Suppose that you have the
>> following pages:
>> a.html
>> b.html
>> c.html
>> and you want each of those pages to have the same basic design. If
>> you have the CSS at the start of each HTML document, and want to make
>> a slight change to your design (by tweaking a colour, for example),
>> then you'd have to change the same code in each separate file;
>> however, if you have all your CSS in a separate stylesheet, you'll
>> just have to make one change in one place, and the formatting used for
>> all the files using that stylesheet will be instantly updated. Even
>> with just three pages it will save some time when changing your coding
>> to just have to do so in one place, and of course it's even more of an
>> advantage with more pages. A further advantage of having a separate
>> (or "external") stylesheet is that you don't run the risk of
>> accidentally making changes to the CSS in one HTML document but not in
>> others (or even worse still, making different changes to the CSS in
>> different HTML documents).
>>
>> So, although it's not an absolute rule, it's generally best to have
>> your CSS in a separate stylesheet. To do this for your site, you'll
>> need to copy dorayme's CSS code from the HTML document, create a new
>> file called (say) "stylesheet.css", paste the CSS code into that file,
>> and then save it. Note that external stylesheets don't contain any
>> HTML code, and they also don't need any fancy stuff beside the CSS
>> itself; all they'll contain will just be the CSS rules (in dorayme's
>> example, that's everything from and including "body {" to "background:
>> #ddd;}").
>>
>> Once you've moved your CSS code to the separate stylesheet, you can
>> delete everything from:
>>
>> in your HTML document, replacing them with:
>>
>>
>> After that, you just need to upload the altered HTML file, and of
>> course the new stylesheet as well, and your HTML page will then look
>> the same as in dorayme's example. Just add that "link" code to the
>> "head" element of any new page you add to your site, and then that new
>> page will share the same CSS with the existing page.
>>
>> --
>> AGw.
>
> Just So everyone knows: No I did not pay for Dreamweaver, it is on the
> library computers, and really the only benefit I feel it has is the
> format highlighting so that I can visualize the layout in the code,
> unlike a plain text editor.
>
> I will definitely be creating that CSS file and linking it in the
> page. my site just got moved so it is now located at http://216.104.34.66/~jessica5/
> for the time being.

Give it some room along the top and left side.

You can either put in a box and give that a margin, or change the
padding on your body.

Also, try it in Verdana.

I'd do something like Dorayme did. A div box with a width and a border
and some padding. The div background-color: #FFF and the body some
darker shade. Give the DIV a width so it doesn't go 100%. It'll look a
lot more elegant. It can look nice and still be correct markup, they
aren't exclusive.

Jeff
>
> Well, hope you all have a good weekend and thanks again.
>
>
>

Re: Website design for beginners

am 20.01.2008 18:09:20 von a.nony.mous

Jeff wrote:

> Also, try it in Verdana.

Please don't.
http://k75s.home.att.net/fontsize.html

--
-bts
-Friends don't let friends drive Vista

Re: Website design for beginners

am 20.01.2008 18:45:14 von jeff

Beauregard T. Shagnasty wrote:
> Jeff wrote:
>
>> Also, try it in Verdana.
>
> Please don't.
> http://k75s.home.att.net/fontsize.html
>


That's fine ("Trebuchet MS" is now widely available on the PC), note
that Verdana isn't the only font that will appear too tall for some
designers in it's default:



Arial is usually considered too narrow for large blocks of text.

Jeff

Re: Website design for beginners

am 20.01.2008 19:05:49 von a.nony.mous

Jeff wrote:

> Beauregard T. Shagnasty wrote:
>> Jeff wrote:
>>> Also, try it in Verdana.
>>
>> Please don't.
>> http://k75s.home.att.net/fontsize.html
>
> That's fine ("Trebuchet MS" is now widely available on the PC), note
> that Verdana isn't the only font that will appear too tall for some
> designers in it's default:
>
>
>
> Arial is usually considered too narrow for large blocks of text.

The problem is that too many designers, after choosing Verdana (or other
overly-large font), pick an absurdly small size, such as 10px or 80%,
instead of adjusting their own browser.

I'd rather read regular sized Arial than micro-sized Verdana.

--
-bts
-Friends don't let friends drive Vista

Re: Website design for beginners

am 20.01.2008 19:24:10 von cfajohnson

On 2008-01-20, Beauregard T. Shagnasty wrote:
> Jeff wrote:
>
>> Beauregard T. Shagnasty wrote:
>>> Jeff wrote:
>>>> Also, try it in Verdana.
>>>
>>> Please don't.
>>> http://k75s.home.att.net/fontsize.html
>>
>> That's fine ("Trebuchet MS" is now widely available on the PC), note
>> that Verdana isn't the only font that will appear too tall for some
>> designers in it's default:
>>
>>
>>
>> Arial is usually considered too narrow for large blocks of text.
>
> The problem is that too many designers, after choosing Verdana (or other
> overly-large font), pick an absurdly small size, such as 10px or 80%,
> instead of adjusting their own browser.

The problem is not with Verdana, it is with using sometihng other
than the default size. There is no reason not to use Verdana, but
there are good reasons for not using smaller that the default font
size, no matter what font you are using.

> I'd rather read regular sized Arial than micro-sized Verdana.

The problem is micro-sizing, not the Verdana font.


--
Chris F.A. Johnson, webmaster
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Re: Website design for beginners

am 20.01.2008 20:19:24 von BobaBird

On Fri, 18 Jan 2008 06:51:05 -0800 (PST), Andrew H
wrote:

> Wow, I really appreciate all of the responses I have received. I have
> updated the website,

Once more, this time for content. In my post I shortened the main
paragraph for brevity. That opening line now appears twice.

> it seems to me that everyone here is agreed on the fact that
> it is better to use plain text files to edit the pages? So I have
> been avoiding fancy editing programs.

You might try Crimson Editor which is
a text editor that adds syntax highlighting for HTML, CSS, and many
other languages.

> I have the basic idea I think,

Agreed. One of my earliest mistakes was ignoring CSS as that weird
optional stuff in the back of the book. You're on a better path.
--

Charles

Re: Website design for beginners

am 20.01.2008 21:31:16 von a.nony.mous

Chris F.A. Johnson wrote:

> On 2008-01-20, Beauregard T. Shagnasty wrote:
>> Jeff wrote:
>>
>>> Beauregard T. Shagnasty wrote:
>>>> Jeff wrote:
>>>>> Also, try it in Verdana.
>>>>
>>>> Please don't.
>>>> http://k75s.home.att.net/fontsize.html
>>>
>>> That's fine ("Trebuchet MS" is now widely available on the PC), note
>>> that Verdana isn't the only font that will appear too tall for some
>>> designers in it's default:
>>>
>>>
>>>
>>> Arial is usually considered too narrow for large blocks of text.
>>
>> The problem is that too many designers, after choosing Verdana (or
>> other overly-large font), pick an absurdly small size, such as 10px
>> or 80%, instead of adjusting their own browser.
>
> The problem is not with Verdana, it is with using sometihng other
> than the default size. There is no reason not to use Verdana, but
> there are good reasons for not using smaller that the default font
> size, no matter what font you are using.
>
>> I'd rather read regular sized Arial than micro-sized Verdana.
>
> The problem is micro-sizing, not the Verdana font.

That's what I said.

--
-bts
-Motorcycles defy gravity; cars just suck

Re: Website design for beginners

am 20.01.2008 22:13:00 von dorayme

In article <13p5ksubd2eel27@corp.supernews.com>,
Jeff wrote:

> Andrew H wrote:
> > On Jan 18, 4:04 pm, dorayme wrote:

> >> Here is a suggestion for a look:
> >>
> >>
>
> I looked at this first in IE6 windows and noticed that image dropped
> below the content border (the bottom border intersects the bottom
> quarter of the image).
>
> In Firefox 2.0 the box expanded to include the image.
>
> I notice that the box is set for overflow: hidden, which struck me as
> a bit odd.
>
> Just another bit for your box model collection.
>

Thanks Jeff, actually this due to over simplification on my part.
I was not providing details for IE.

You will notice how the main container is not given a width
(which would have triggered that parental recognition of floated
children all on its own in IE6 without need for overflow
instruction - you may recall we discussed this a while back).
Here I have given a max-width instead - for a real purpose.

You are right, there is now a need to pander to IE6 and possibly
7.

In regard to the container growing height, the simplest is to
make do with a clearing div.

And there would need to be attention to the footer I imagine
where margin: auto for left and right and a width will not do for
IE6 - I guess widthing the footer as a guess, text-aligning it
centre, etc.

There are many ways to provide for IE, including a special css
set of instruction for its eyes only. I will come back to this
later when I have time.

--
dorayme

Re: Website design for beginners

am 20.01.2008 22:54:46 von Neredbojias

Well bust mah britches and call me cheeky, on Sun, 20 Jan 2008 20:31:16
GMT Beauregard T. Shagnasty scribed:

> Chris F.A. Johnson wrote:
>
>> On 2008-01-20, Beauregard T. Shagnasty wrote:
>>> Jeff wrote:
>>>
>>>> Beauregard T. Shagnasty wrote:
>>>>> Jeff wrote:
>>>>>> Also, try it in Verdana.
>>>>>
>>>>> Please don't.
>>>>> http://k75s.home.att.net/fontsize.html
>>>>
>>>> That's fine ("Trebuchet MS" is now widely available on the PC), note
>>>> that Verdana isn't the only font that will appear too tall for some
>>>> designers in it's default:
>>>>
>>>>
>>>>
>>>> Arial is usually considered too narrow for large blocks of text.
>>>
>>> The problem is that too many designers, after choosing Verdana (or
>>> other overly-large font), pick an absurdly small size, such as 10px
>>> or 80%, instead of adjusting their own browser.
>>
>> The problem is not with Verdana, it is with using sometihng other
>> than the default size. There is no reason not to use Verdana, but
>> there are good reasons for not using smaller that the default font
>> size, no matter what font you are using.
>>
>>> I'd rather read regular sized Arial than micro-sized Verdana.
>>
>> The problem is micro-sizing, not the Verdana font.
>
> That's what I said.

Bah! That's what _I_ said nearly a year ago and everybody replied 'Oh
no, oh no, blah blah blah blah blah. The font itself is bad because blah
blah blah blah blah. You are dumb for not seeing this blah blah blah
blah. Here are a bunch of links which prove it blah blah blah.'

'Twas just more illogical "logic" as, indeed, it is today. Furthermore,
I will boldly state at the risk of my good reputation that most of the
bitches about frames are just as stupid. Sure, they can be "used
wrong." But they can be used right, too.

--
Neredbojias
Riches are their own reward.

Re: Website design for beginners

am 21.01.2008 03:06:07 von dorayme

In article
,
dorayme wrote:

> In article <13p5ksubd2eel27@corp.supernews.com>,
> Jeff wrote:
>
> > Andrew H wrote:
> > > On Jan 18, 4:04 pm, dorayme wrote:
>
> > >> Here is a suggestion for a look:
> > >>
> > >>
> >
> > I looked at this first in IE6 windows and noticed that image dropped
> > below the content border (the bottom border intersects the bottom
> > quarter of the image).
> >
> > In Firefox 2.0 the box expanded to include the image.
> >
> > I notice that the box is set for overflow: hidden, which struck me as
> > a bit odd.
> >
> > Just another bit for your box model collection.
> >
>
> Thanks Jeff, actually this due to over simplification on my part.
> I was not providing details for IE.
>
> You will notice how the main container is not given a width
> I will come back to this later when I have time.
>

Here is the only thing I have come back to:



--
dorayme