Website design for beginners

[dorayme]

<[email protected]

,

On Jan 18, 2:51 pm, Andrew H <[email protected]> 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:

<http://netweaver.com.au/alt/andrewHodson.html>

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:

<link rel="stylesheet" type="text/css" media="all"
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.

 

[AGw. (Usenet)]

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:
<style type="text/css">
to:
</style>
in your HTML document, replacing them with:
<link href="stylesheet.css" type="text/css" rel="stylesheet">

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.

 

[Andrew H]

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:
<style type="text/css">
to:
</style>
in your HTML document, replacing them with:
<link href="stylesheet.css" type="text/css" rel="stylesheet">

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.

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.

 

[Jeff]

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:

<http://netweaver.com.au/alt/andrewHodson.html>

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

 

[AGw. (Usenet)]

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.

 

[Jeff]

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

 

[Beauregard T. Shagnasty]

Also, try it in Verdana.

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

 

[Jeff]

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:

<URL: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html>

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

Jeff

 

[Beauregard T. Shagnasty]

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:

<URL: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html>

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.

 

[Chris F.A. Johnson]

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.

 

[BobaBird]

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 <http://www.crimsoneditor.com/> 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.

 

[Beauregard T. Shagnasty]

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.


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

That's what I said. <g>

 

[dorayme]

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.

 

[Neredbojias]

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

That's what I said. <g>

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.

 

[dorayme]

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:

<http://netweaver.com.au/alt/outwards.html>