Website design questions.....(Dreamweaver)

[sethypoo]

I'm trying to design a website for a non-profit I'm volunteering for. I have some HTML background (enough to make a nice looking page), but I am using Dreamweaver MX 2004, and have a few questions as how to edit frames.

I can't figure out how to make my left "links only" frame a scrolling frame. I know there is a scrolling="NO" part I need to change to "YES", but I can't find it in my code editing window. It was there when I started editing, but I can't find it anywhere in the HTML code.

The idea I have for the page is this: there are two frames, a narrow one with links only on the left, and a wider frame on the right, which will display content that visitors click on from the left frame. This brings to mind another question: how do I keep the left "links only" frame always in the users' browser while having the content displayed from those links on the right?

Thank you!

 

[sethypoo]

Also, how do set up my toolbar to view my files that pertain to this webpage?

 

[Jelfish]

I haven't used Dreamweaver in a while, but I believe the way to switch to HTML view is by clicking some button on the bottom right of the window of the page you're currently working on. Sorry for the vagueness. Hope that helps.

 

[MacFan25863]

Please, please, please, please do NOT use frames! They are outdated and ugly. Use CSS! It's easy to master, and SO much cleaner!

 

[sethypoo]

Please, please, please, please do NOT use frames! They are outdated and ugly. Use CSS! It's easy to master, and SO much cleaner!

Ok, I'll look into this. I don't know CSS code, is it similar to HTML?

 

[sethypoo]

Ok, I'm all for using CSS, but I have a particular idea in mind for this webpage, and that idea is for users to see in their browser window a vertical list of links on the left side of the page with content displayed in a larger frame on the right.

I don't think frames are ugly so long as they are properly used, and not over used.

I really need help with having the links that users click on on the left displayed in a seperate frame on the right. Can someone please, please help me?

 

[inlimbo]

Please, please, please, please do NOT use frames! They are outdated and ugly. Use CSS! It's easy to master, and SO much cleaner!

I agree! PLEASE dont use frames. They are revolting. They make me want to vomit on my keyboard. I don't know much on CSS either. I would like to know more. I also have dreamweaver but dont know how to use it. I just do a lot of my HTML in notepad.

 

[sethypoo]

I agree! PLEASE dont use frames. They are revolting. They make me want to vomit on my keyboard. I don't know much on CSS either. I would like to know more. I also have dreamweaver but dont know how to use it. I just do a lot of my HTML in notepad.

Alright, lets get something straight here. I am only using two frames, a narrow one and a larger one. Frames become ugly and obtrusive when they are over used. When used carefully, they can really help the organization of a page. I am fully aware of what some have done to make frames "bad", but frankly I want to use them.

Does anyone here know anything about my original question? I don't need to hear anymore about how I shouldn't use frames. Point taken.

 

[dejo]

If you insist on using frames, just know that the default value for the scrolling attribute is "auto" so the browser should show them if the content is such that scrolling is required. If you want to force the scrollbars to appear at all times and can't find the scrolling="Yes" attribute in your HTML for the <frame> tag, just insert it yourself: <frame scrolling="Yes"... >

If you want to build a page that is more "intuitive", i.e. only has scroll bars for the entire window (at right and bottom), avoid frames and get your hands dirty with CSS and DIVs. Another alternative is to use a simple two-cell table: left cell holds the links, right cell holds the "meat". As an extension to this, look into building a template where the left-side links are defined in the template definition and the right-side "meat" becomes the editable region of each individual page.

 

[sethypoo]

If you insist on using frames, just know that the default value for the scrolling attribute is "auto" so the browser should show them if the content is such that scrolling is required. If you want to force the scrollbars to appear at all times and can't find the scrolling="Yes" attribute in your HTML for the <frame> tag, just insert it yourself: <frame scrolling="Yes"... >

If you want to build a page that is more "intuitive", i.e. only has scroll bars for the entire window (at right and bottom), avoid frames and get your hands dirty with CSS and DIVs. Another alternative is to use a simple two-cell table: left cell holds the links, right cell holds the "meat". As an extension to this, look into building a template where the left-side links are defined in the template definition and the right-side "meat" becomes the editable region of each individual page.

I've read a little on CSS, and right now it seems a little too complicated. Your table suggestion sounds doable though!

I assume tables are in HTML. I just need to have a way to always have that list of links on the left. For navagational purposes, that makes the most sense.

 

[dejo]

I assume tables are in HTML.

Hugh betcha. Check into the <TABLE>, <TR>, and <TD> tags.

 

[Platform]

Sorry I dont have an answer........but a question..is there a function such a auto-thumbnail Trying and trying cant find it

 

[decksnap]

You can also use Dreamweaver templates if you thought it would be a timesaver. Build one page the way you want it with tables and your navigation on the left, and save it as a template, marking the content area to the right as editable. Then every new page you build from that page will be ready to go with the nav built-in, and if you need to edit the nav later in the template your changes will take place across all pages built off the template.

I agree, you just need to set up a simple table/set of tables to do what you want to do. Frames aren't necessary, and clearly not preferred.

 

[sethypoo]

Well folks, it's taken awhile, but I have completed the website. It's now online at http://www.hdvs.org for your viewing pleasure.

I went ahead and used frames for it, and I think it worked out fine. CSS is confusing and was unhelpful for what I was looking to do. Keep in mind when you're looking at the site that this is my first "major" website design project. I am still learning many things (I have taken no classes, this is all self-taught). The new site is a massive improvement over the old one. The old one used the #html code where you click on a link at the top of the page and it takes you to a link on the bottom. Let's just say it got annoying trying to find anything on the page.

Let me know what you think of the new one! And, if you're feeling really nice, send us a donation. We're a non-profit, and we're in California, so we're poor.

Thank you!
Seth

Again, the site is at http://www.hdvs.org

 

[sethypoo]

Well? Any suggestions? Praise? Hate posts?

I've had very good feedback from my co-workers, so I guess that's a plus.

 

[decksnap]

Glad you figured it out- one simple suggestion is that you not allow the content on the right to fill the entire width. I think you need to use a table and define the width to a set pixel width. On my monitor for example, the text paragraph width is waaaaay too wide because I have such a large monitor. A general rule of thumb is that approximately 13 words across is the threshold for easy reading- beyond that, it becomes annoying for the eye to follow from the end of one line to the beginning of the next.

 

[MontyZ]

.

 

[sethypoo]

Decksnap and Monty,

Thank you for the pointers, I am going to keep playing around with the site until I get what I want.

You have to believe me though, the sight is a massive improvement over what we used to have. Now, our crisis lines are always visible to whoever logs on. Also, our links along the left are always visible too. That's something I really wanted to acheive.

Monty- the "design" I was talking about are the frames, and the way the links in the frames stay there (with the crisis line). As far as the jumbled text goes, I suppose a table would help. I don't understand CSS at all, it just seems to be a way to change your fonts: big deal. I'll need to keep working with Dreamweaver to figure out a good table layout.

By the way, I am a college student myself. I have no HTML experience, really, and am teaching myself as I go. I am also a volunteer, this is all unpaid labor.

 

[decksnap]

CSS is more than just a way to change fonts- it's a way to format things universally that extends into layout positioning and such also. I applaud your unpaid labor and commitment!

 

[plinden]

Now that you have your site up and running, you could take a bit of time to play around with CSS.

Some links:
http://www.csszengarden.com/
http://www.meyerweb.com/eric/css/edge/

Some example CSS code that you can use for layouts:
http://www.glish.com/css/

To try these out with your webpage, take the HTML source and remove all formatting attributes from your code (it's a good idea to do this in a text editor, to start with, until you learn HTML and CSS).

Put the main page inside a <div id="maincontent"> ... </div> and the link list inside a <div id="linkcontent"> ... </div> and edit the CSS for each so it does what you want.

I haven't played around with CSS for some time, but if I recall correctly, you can "fix" a box containing the links in one place, so it's alway present no matter how much the main page is scrolled.

CSS is very powerful and it's worth knowing if you're going be building websites.

 

[MontyZ]

.

 

[sethypoo]

Thanks Monty.

What I don't understand is where to insert the text I want to edit, and where the

.scroll-box {
	overflow: scroll;
	width: 200px;
	height: 100px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	}

ends and my text appears. I know that the <div></div> tags are where you insert text, but where do you put it in relation to the code above? is there a "end code" similar to the above code but with a / in front of it? I also don't want everything to be one absolute uniform text size. Can I make an important word, like SAFETY bigger in a CSS box? If so, how?

Also, on our server, would I still have separate HTML files for this CSS design idea? I am assuming so, the only difference being they would be linked together differently. I'd like a frames approach with the CSS, with our crisis line number always visible.

It really is like learning a whole new language.

 

[highres]

As an Art Director for a design agency specializing in e-commerce sites, the future of web design is and will be CSS, XHTML and eventually XML, there will still be plenty of HTML still around, but HTML lends itself to many forms of sloppy code writing and poor discipline in terms of format and syntax.
Because many browsers try so hard to compensate for badly written code, bad programmers get away with murder, XHTML and XML will be cleaning up a lot of the loose standards and badly written code.

Also leave FRAMES behind, clunky, ugly and a downright pain. CSS works so much better and is a much more powerful tool. Also good luck getting Frames to preview correctly in many older browsers and even some new browsers, that is why developers moved to CSS originally.

It is always best to have the two main elements of a website separate:

Structure: Clean, neat, compliant HTML.
Style and Look: CSS

Also CSS are great when you need to make style changes to large numbers of webpages, you make one change and quickly apply it to all the pages, you will save large amounts of time.

Use an HTML editor like Dreamweaver, learning, creating and using Style Sheets is fairly simple and easy and there are plenty of good tutorials.

 

[Sca1pel]

Thank for the help

 

[xelterran]

Thanks Monty.

What I don't understand is where to insert the text I want to edit, and where the

.scroll-box {
	overflow: scroll;
	width: 200px;
	height: 100px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	}

ends and my text appears. I know that the <div></div> tags are where you insert text, but where do you put it in relation to the code above? is there a "end code" similar to the above code but with a / in front of it? I also don't want everything to be one absolute uniform text size. Can I make an important word, like SAFETY bigger in a CSS box? If so, how?

Also, on our server, would I still have separate HTML files for this CSS design idea? I am assuming so, the only difference being they would be linked together differently. I'd like a frames approach with the CSS, with our crisis line number always visible.

It really is like learning a whole new language.

Put all your styles in a sepereate stylesheet (usually called style.css) and call it using:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

So your complete header might look something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>some title</title> 
</head>

You can then use any of the styles from the stylesheet to style your xhtml elements.