[demograph68]

I was wondering how a beginner like me can learn how to make a website with GoLive. I never made a website before and I'm scared just thinking about it. I want to make something simple. (A page for news, icons, artwork, and a short bio.) I'm good with photoshop, so I'm not worried about the graphics part. I made an example to give you a clue what it might look like. (I know it looks like crap)



Will this be easy or will I die trying?

[Chris O'Brien]

Um. Easy is relative, but I'd say that looks easy, yes. I don't use GoLive, so I wouldn't be able to help with that, though...

One thing - does the scrollbar look like that because of a theme you're using, or do you want to make a custom scrollbar for the page? That would be the hardest part on there, if you did.

Now, here's where my assertion that it was easy could break down. There's a lot of factors to look at which govern the approach you take when implementing a design. For example, if everything in that picture was of static dimensions and layout, then it really would be easy. However, if things are expected to resize and stretch etc to fit the users window, then it becomes more challenging.

In other words - we need details

But, since you're planning on using GoLive, why not just start messing around in it?

[demograph68]

The scroll bars were just taken from the theme I am using as an example. It won't look like that on the web. The dark gray area will be centered in the browser with the sides a light gray, sort of like the layout of this: http://www.vanillasoap.com/
Or I might make the top part stationary where the links are and have what's beneath it scrollable. (Also like vanillasoap) I would try it in GoLive but honestly, I never used it nor any other web app.

[Chris O'Brien]

Originally posted by demograph68:
The scroll bars were just taken from the theme I am using as an example. It won't look like that on the web. The dark gray area will be centered in the browser with the sides a light gray, sort of like the layout of this: http://www.vanillasoap.com/
Or I might make the top part stationary where the links are and have what's beneath it scrollable. (Also like vanillasoap) I would try it in GoLive but honestly, I never used it nor any other web app.

Ahaha! Now that's a coincidence. I wrote vanillasoap!

[demograph68]

How did get the main part centered like this?



Sorry but I'm extremely overwhelmed...

[demograph68]

Originally posted by Black Book:
Ahaha! Now that's a coincidence. I wrote vanillasoap!

I can only dream of making such a work of art. I'm really impressed!

[Chris O'Brien]

Originally posted by demograph68:
I can only dream of making such a work of art. I'm really impressed!

Heh, cheers

Rick's the one who did the design - i just implemented it. It's still rather incomplete at the moment, though.

As for the centering, it was discussed in another thread here today. It's just a fixed width div with the margin set to auto.

[Millennium]

The good news is, most of it is pretty easy. I've already got a basic template (no graphics, but the HTML and CSS are solid) coded. However, I have some questions.

1) Do you want the center column to be a constant width, or should it grow and shrink with the window? Constant widths are much easier to work with, especially when dealing with background graphics, but they annoy some users. My template assumes that your center column is 600px wide, which leaves a nice strip of gray even on 620x480 monitors. You may want to bump that to 720px, though, if you're targeting 800x600 resolution. I wouldn't target higher resolutions than that, though.

2) Do you want the actual part of the page with the content to be a constant height, or to grow and shrink with the content? Growing and shrinking heights can be easier to work with, except for background images, but they can't use scrollbars, and you seem to have your heart set on that.

[demograph68]

^^^ I'll let you choose whatever you think is the best. I'm not so familiar with the terms you are using and how they apply. What does it mean to have "growing and shrinking heights?" I just want something easy to use yet something I could learn from later on.

BTW, did you go to school to learn the things you know about web design or did it you learn it on your own? Are their any video tutorials I could watch that you're aware of?

Thank you for your help. I really appreciate it.

[Millennium]

Originally posted by demograph68:
^^^ I'll let you choose whatever you think is the best. I'm not so familiar with the terms you are using and how they apply. What does it mean to have "growing and shrinking heights?"

What I mean is a block of content whose height is only as big as it needs to be (the actual content, plus whatever margins you have set). If this is bigger than the window, then the window will scroll. On the other hand, if the content's not big enough to fill the screen then neither will the column.

If your width and height are fixed, then the background image becomes very easy to deal with: you just make one big image. Your flat-black background with a basic raised border will compress very nicely, so there won't even be a file-size problem.

I just want something easy to use yet something I could learn from later on.

The HTML structure is very simple, in part because I haven't used any tables.

BTW, did you go to school to learn the things you know about web design or did it you learn it on your own? Are their any video tutorials I could watch that you're aware of?

Design or implementation? Truth be told, I have all the design skills of a daikon radish. But if someone gives me a design -what they want their site to look like- then I can translate it into HTML. That's really all I've done here; I'm looking at the design you gave us and worked up a basic template. The particular design you gave me happens to be very well suited to HTML and CSS, which is why I was able to code it quickly.

A basic HTML/CSS tutorial can be found at http://www.w3.org/MarkUp/Guide (this is my favorite). It's very basic, but it will get the job done, and in particular it should give you enough knowledge to understand the template I'm building.

[Millennium]

[EDIT: Hmm; the paste didn't go as well as I hoped. This edit was just to keep it from making the page so wide]

OK; done. I used a fixed column width and height. There are two files here; put them in the same directory and import the .html into GoLive. It should pick up the .css on its own, but admittedly I don't have a lot of experience with GoLive (I wrote this by hand).

I've put dotted red borders on the navigation list and wrapper div just so that you can see how big they are; you can remove them when you're done by deleting two lines in the CSS file (I marked them for you).

Here's the example HTML (I used 'soap.html' for the filename):

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Sample HTML</title>
		<link rel="stylesheet" type="text/css" href="soap.css" />
	</head>
	<body>
		<!-- This is your navigation list. Use an image as the
		background for each link.-->
		<ul id="nav">
			<li id="link-news"><a href="news.html"><img alt="News"></a></li>
			<li id="link-gui"><a href="gui.html"><img alt="GUI"></a></li>
			<li id="link-artwork"><a href="artwork.html"><img alt="Artwork"></a></li>
			<li id="link-bio"><a href="bio.html"><img alt="Bio"></a></li>
		</ul>
		<!-- This "wrapper" div is where you'll put the big square
		image that you want to use. It should be 700x500, if you
		use the dimensions I gave in the CSS file.-->
		<div class="wrapper">
			<div id="main">
<!-- PAGE CONTENTS GO HERE. I've added two
paragraphs of fake text. -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
eget dolor. Vestibulum quis urna. Nunc wisi. Donec risus metus,
feugiat eget, congue a, pulvinar vitae, eros. Sed fringilla, ligula
sed sodales tempus, wisi diam nonummy mi, quis volutpat lectus sem
pellentesque nibh. Nam auctor, nibh ut laoreet feugiat, eros massa
tristique ipsum, sed rutrum erat leo eget lectus. Proin lobortis,
lacus id lobortis varius, elit tortor adipiscing diam, id varius ante
enim euismod lectus. Pellentesque scelerisque rutrum libero. Quisque
aliquet, quam vel tincidunt euismod, libero urna sollicitudin nulla,
ut varius eros orci a turpis. Suspendisse nec lacus. Donec consequat
gravida pede. Curabitur tempus elementum sem. Aenean ut nunc. Mauris
euismod neque. Cras vulputate dui id lorem. In vehicula. Vestibulum
sem. Etiam sed wisi ac leo placerat ultrices. Vestibulum nibh libero,
mollis non, lobortis id, feugiat eu, lectus. Donec sagittis tincidunt
pede.</p>
<p>Suspendisse cursus convallis odio. Curabitur pede. Aenean tellus.
Ut bibendum. Nunc in mauris id justo luctus porta. Ut pellentesque
vulputate nisl. Sed eleifend vulputate diam. Phasellus arcu. Mauris
elementum, arcu sit amet pharetra dignissim, wisi turpis pellentesque
justo, eu mollis libero lacus id mauris. Donec vestibulum pede sed
risus. Curabitur hendrerit ipsum sed dui volutpat egestas. Fusce
imperdiet nunc quis ligula. Sed consectetuer varius erat. Praesent
blandit sapien blandit libero. Phasellus dapibus. Aenean enim. Sed et
est nec leo luctus nonummy.</p>
<!-- END PAGE CONTENTS -->
			</div>
		</div>
	</body>
</html>

Here's the CSS (I used 'soap.css' for the filename):

Code:
html, #main {
	color: black;
	background-color: gray;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0px;
	padding: 0px;
}

body {
	background-color: black;
	margin: 0px auto;
	padding: 10px 0px;
	width: 740px;
}

#nav {
	display: block;
	list-style-type: none;
	margin: 10px;
	text-align: center;
	border: 1px dotted red; /* Delete this line to take out the border */
}

#nav li {
	display: inline;
	margin: 10px auto;
	padding: 0;
	text-align: center;
	color: white;
}

.wrapper {
	border: 1px dotted red; /* Delete this line to take out the border */
	border: url(); /* Put the background image's URL inside the parens */
	padding: 10px;
	margin: 10px;
	}

#main {
	height: 480px;
	overflow: auto;
	padding: 5px;
	margin: 0px;
}

/* Take the border out of linked images in the navbar. */

#nav img {
	border: 0px;
}

/* This just styles the text in the navbar, in case the images can't load.
** You might want to remove it once the images are in */

#nav a {
	border: 0px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 300%;
}

[demograph68]

Thank you.

[demograph68]

Update



Ok, I think I'm getting the hang of this. Now I just need to move the graphics into GoLive and do the rollovers and add text.

[Oisín]

Originally posted by Black Book:
Ahaha! Now that's a coincidence. I wrote vanillasoap!

Just a little heads-up: The design looks great, but in Opera/Windows, there's a little glitch at the top. The fixed logo/menu isn't quite at the top of the page, so when you scroll, the content of the column further down is seen above/behind the logo again (as seen in this picture).

[Chris O'Brien]

Originally posted by Oisín:
Just a little heads-up: The design looks great, but in Opera/Windows, there's a little glitch at the top. The fixed logo/menu isn't quite at the top of the page, so when you scroll, the content of the column further down is seen above/behind the logo again (as seen in this picture).

Well, it's still in a state of active devlopment, to be honest. Also, it was only designed with Safari and Firefox in mind... Bad practice from me, but I'll be adding in support for other browser as and when I have time (and also brushing up the look for Firefox).

Ever seen it in IE/Win? Now that's a laugh

[Oisín]

Originally posted by Black Book:
Ever seen it in IE/Win? Now that's a laugh

It's not that bad... just needs a little tweaking here and there. At least you can still see what the main look is supposed to be, and you can read everything. In IE/Win, that in itself is an achievement not to be belittled.