PDA

View Full Version : Newbie basic question-Frames/Link? how now? thanks !


BarbFL
04-01-2009, 04:01 AM
Hi. i am new to using CSS and something is frustrating me a lot ! thanks for help! I I have read books and scoured the internet and I cannot find an answer to something i "Think" is really simple!

Basically I am an artist not a pro web developer-- and I only understand building pages with tables and frames. But now the world has changed. (I am using CS3, btw). What I am simply trying to do is have a menu bar on the left with content in the center, like a normal looking webpage.

So the menu will have items like "about" "our services" "more info" etc. and i want the content to show up inside the main area of the webpage to the right of the menu. Simple basic stuff.

I used to make a frame and target that frame. how do I do this without tables and frames? how do I make a simple page of menu bar and content?

I even read through the dreamweaver bible --700 pages and I cant find it! thanks!!!
here's an example of how the page should look - just the part about a simple menu with changing info as content when you select something on the menu.

http://www.lib.washington.edu/specialcoll/findaids/docs/papersrecords/McGilvraJohn4806.xml#a7

what is the language I should be using--what do I need to learn to do this simple thing? what are these areas called now that we dont use tables or target framesets anymore? are they done with spry? or panels??? OR....??? in the olden days of frame, I'd simply put a link for "about" and target the frame ... but now how???

Thanks for educating me about something that seems so easy but I have spent hours and days trying to figure out where to start! MUCH GRATITUDE:)
B

domedia
04-01-2009, 05:05 AM
You want each link to go to a separate url. A separate page.
Forget frames and the idea of 'loading' the content in the main area. It's not smart usability wise or towards search engines or anything else trying to connect with your website.

Build a regular website like you see on the rest of the interweb :)

(or just continue building your site in frames)

BarbFL
04-01-2009, 02:30 PM
hi. thanks.. but I see a LOT Of sites that the university of washington one above that have panels that have different info... i.e. about/who we are/info/ etc that DON'T load into a new browser window (actually with all due respect it seems more cumbersome to got to a new browser window just to load a few lines). maybe I wasnt clear with my question. see how this page has a simple menu/navigation bar on left and it loads the easy info right next to it? thanks!!!
http://www.lib.washington.edu/specialcoll/findaids/docs/papersrecords/McGilvraJohn4806.xml#a7

BarbFL
04-01-2009, 02:32 PM
PS - i guess it's also how all those wordpress blogs look too-- you select a post from a menu bar and it pops the info up right there next to it---NOT in a new page... so this must be done similarly?

mangofreak
04-01-2009, 02:44 PM
If you look at the code. You'll realize that there is nothing simple about it. It may look simple but it is not.

Here is a discussion about alternative to frames:
http://www.daniweb.com/forums/thread102166.html

BarbFL
04-01-2009, 05:48 PM
Thank you. Yeah it seems frames is still a lot easier to do this basic thing. Granted, I am very confused since CSS / etc is the new way to go, why it's now harder (complicated) to do something very simple. Oh well! Thank you very much for your time. Hope your day is good- Barb

mangofreak
04-01-2009, 05:55 PM
Barb,
I think you need to evaluate what is important for you. We can say anything we see is good for us, but if you are set on doing and feel better with frames, go for it. We can only suggest.

Good luck.

BarbFL
04-01-2009, 06:01 PM
yes, of course. basically, I came here to learn what the correct "language" and "Methods" are for doing what I want to do with the new world of CSS, etc. of creating web pages. I would learn from there. I wanted to know what kinds of coding ways replaced the old ways of doing things. I still am not exactly sure, but I think it is some CSS coding. I was looking for someone to help me by saying "yes that is done with Spry or Panels or with java or CSS or... WHATEVER way it was done... ) (like in the past someone might have said "yes that is done with tables and panels".) Of course I would decide which way is better, but I am still just wanting to know the right "new" way. BTW I am not a dummy... i used to program back in the day (pascal, et al)... and right here was looking for guidance about what I needed to learn. If you have more to share, I am listening. I have my Dreamweaver Bible and am ready to open the pages... Thanks.

BarbFL
04-01-2009, 06:02 PM
opps - in above, typo: i meant in past that was done with "tables and frames' (not panels)

Corrosive
04-01-2009, 06:11 PM
opps - in above, typo: i meant in past that was done with "tables and frames' (not panels)

Hi Barb

Use normal HTML in your page with CSS to position and style it. This is how web pages are built now. You use div tags <div></div> to contain elements like images, text etc. and then you use CSS (cascading style sheets) to position everything and to give styles. The style sheet is usually a separate document which you reference in the <head> tags of your page.

The result is that each of your HTML pages is just content with linked styles. The benefit of this is that one change in the style sheet will update the styles in your whole site. You want paragraph text to be green instead of blue? Just change the style.

You really need to go and start reading up on CSS. There is a limit to what we can tell you here. We will help though :wink:

mangofreak
04-01-2009, 06:19 PM
:) Great. For what I have read before you want static menu and content area on the side.
Here are links that will show you a few layouts
http://www.dynamicdrive.com/style/layouts/
for your menu:
http://www.dynamicdrive.com/dynamicindex1/index.html

That should give you plenty of ideas.

BarbFL
04-01-2009, 06:22 PM
That is clear. That makes total sense. Thanks! What, now, is the "method" for placing content in a certain area of page? (i.e. when I used to target a frame with changing content from a menu)? Can i target a <div> tag? (I actually tried that already and it didn't seem to work).

I read through that huge Dreamweaver Bible and the CSS tutorials, and maybe I have been sleeping for three years but I didn't see anything about this. Are people just re-loading totally new pages each time a menu/navigation item is clicked, using a templete?

The one thing that comes close to this way of disseminating info on the page, seems to me, is Spry Panels (which I have tried), but they are all horizontal, not vertical.

Corrosive
04-01-2009, 06:36 PM
Are people just re-loading totally new pages each time a menu/navigation item is clicked.

Yes, that is exactly what is happening. Click a link and you go to a new page. Same menu layout etc. but new. Keep your design consistent, your code 'skinny' and your images limited (or within reason) and users will have no problem surfing from page to page. Look at some sites. View>Source and see how the code looks.

BarbFL
04-01-2009, 10:45 PM
Thanks much everyone. This has been super helpful! Your efforts have not been wasted!!! I used to think it was cumbersome to re-load new page (i.e much more efficient to keep single menu/navigation bar and just reload content) so I have learned a lot here and I thank you all VERY much! I did go look at a few sites as you suggested, though some do seem "a bit" slower as they reload graphics each time.

Though, in terms of a page that seemed smooth and quick, I checked out my example site* and it is super fast. I then looked at the URL and it DOES change each time a new menu item is selected -- for instance, extension xml#a7 to .xml#a6 to .xml#a5 and so on. Is this some very advanced way of coding?

BTW, here's a cool site I found. Layout reservoir http://www.bluerobot.com/web/layouts/

*example site http://www.lib.washington.edu/specialcoll/findaids/docs/papersrecords/McGilvraJohn4806.xml#a7

domedia
04-02-2009, 02:03 AM
Thanks much everyone. This has been super helpful! Your efforts have not been wasted!!! I used to think it was cumbersome to re-load new page (i.e much more efficient to keep single menu/navigation bar and just reload content) so I have learned a lot here and I thank you all VERY much! This is a very nice community, I come here every day ;-)

I did go look at a few sites as you suggested, though some do seem "a bit" slower as they reload graphics each time. It's a trade off. Instead of loading 3-4 frames documents, you're loading only one which loads the images etc from your browser cache.
The biggest advantage is that its a standard document that does not have the ton of issues that frames have.

Though, in terms of a page that seemed smooth and quick, I checked out my example site* and it is super fast. I then looked at the URL and it DOES change each time a new menu item is selected -- for instance, extension xml#a7 to .xml#a6 to .xml#a5 and so on. Is this some very advanced way of coding? No, it's coding pre-1999. It's the same URL with a different ID. I'd like to see the web designer that includes a website like that in their portfolio looking for a job :) I was in Austin last month for a web conference, and one of the big discussions at the conference was the lack of web standards in higher education. Alot of the website in higher ed, but more importantly their graduates, are simply not up to par.

Web Standards basically tells you to semantically mark up your HTML, keep your styles in a separate document with semantic class and id names, and also keep your JS files externally as well. Structure, style and manipulation in each their corner.

Here's some websites that showcases some great CSS designs:
http://www.cssdrive.com/
http://www.css-website.com/
http://www.csselite.com/
http://www.urbantrash.net/cssgallery/
http://www.cssbeauty.com/gallery/

BarbFL
04-02-2009, 04:15 PM
Great. I think I can take it from here. I am happy to have learned all this--thanks for all your all's help. Maybe you were at SXSW, yes? (No need to respond ;). I understand the interactive portion of the conference is now the hot spot (I've gone to film, I am a filmmaker). It's also interesting what you say about standards, I sometimes teach and something I find, and have discussed with colleagues, is how creativity is more self-driven and personal on the creation environment these day, you know? Whereas you used to have to have a collaborative mind-set to get a movie done, sometimes a HUGE crew (which necessitated standards across the board or there would be major time and money loss), for instance, students today are very solo in their mind set. Web even more so since you don't really need a technical crew. Anyway, just some thoughts about what may contribute to MORE of a lack of standards across teaching environments.... it was very interesting waht you shared. Made me think! I am glad to have the correct organization methods as you showed me. Have a terrific day!