I’m designing a simple web site as part of a project for one of my graduate classes, and I am quite the beginner with HTML. My professor encourages us to get help however we can*, so here I am.
I’m using Nvu: I have a table with one column on the left, and the column on the right is broken up into two rows (essentially I took a 2-row, 2-column table and joined the cells on the left). The left column will contain the navigation links, and I want the top part of the right column to contain static content while the bottom part displays the navigation link info. But I can’t figure out how to make Nvu designate a certain cell within the table as the target for a link.
If any HTML gurus were able to understand that, is there a way for me to do what I describe? Am I unwittingly biting off more than I can probably chew?
I won’t be able to try out any suggestions until Monday night (I don’t have Nvu at work), but I’ll answer whatever questions I can during the day.
*The class is an intro to electronic publications design, for an M.A. in English, so he’s not expecting us to become serious webmasters or anything. In other words, posting this question here isn’t cheating or asking anyone to do my work for me.
In pure HTML, using a table alone, there is no way (that I’m aware of) to do what you want.
However, what you could do is use frames, or rather, an iframe in this case. Essentially, an iframe creates a mini-webpage on the site wherever you want. You can then load unique content into that little window, independent of the webpage as a whole.
So in your case, you would place the iframe in the cell of the table that you want the content displayed in. Then you would simply have to tell the links on the left to send the content to that iframe – it’s easier than it sounds.
Note: Generally, frames are frowned upon, particulary by the community here (of which I don’t always agree). There are other methods to accomplish what you want, but since you’re new to HTML, I think the Frame route is yor best option. I’ve personally found them to be quite useful (as do many large websites,apparently, which still use them as well)
If you wish to link to a specific place within a page, you need to set an anchor in the place you want to link to and to give the anchor a name. Now you can link to this anchor rather than to the default at the beginning of the page.
From the NVu User’s guide:
3.7.1.3 Inserting named Anchors
There is a second type of Anchor element the ‘Named anchor’. Such an anchor is extremely useful as it can act as a type of bookmark defining a particular place on a page. Links can jump to such bookmarks.
To insert a named anchor
Place the cursor at the point you want to mark.
Click the ‘Anchor’ button on the Composition toolbar or, on the Menu Bar, select Insert > Named Anchor. The named anchor properties window appears.
Enter a unique name for the anchor.
Click OK.
In ‘HTML Tags’ view this time the yellow marker has a picture of an anchor .
Note The anchor is also visible in Normal view (but not in Preview).
3.7.1.4 Linking to named anchors
Start as above for linking to another file. When the ‘Link Properties’ window opens, instead of choosing file use the drop down list. Your anchor name should appear there preceded by a “#”. Click it and OK. That’s it! If you test your page on a browser when you click the link the view should move to show the position of the anchor.
Note If your page is short you may not notice this. You need to test with a long page with the link towards the bottom and the anchor towards the top. With most browsers the anchor should be sit on the top visible line.
The named anchor advice is technically correct, but is not relevant to the OP’s problem.
Named anchors simply tell the browser: after you load the whole page, scroll up/down as needed to put this named spot on the page at the top of the window.
The OP needs separate parts of teh UI window toupdate & change separately. IFrames are the best answer for that given teh rest of the constraints on the problem.
Red Barchetta: Frames! :smack: I think I knew that, I just didn’t know it. That tutorial seems pretty straightforward, but I’m concerned about the “it only works in IE” part. A look at the first page of Webmonkey’s iframes info leads me to believe that there’s a way to make them work in Netscape, too, so I’ll keep looking into that (though I’m already planning to alienate Mac users by embedding Windows Media Player, so I might be willing to sacrifice browser compatibility too; it’s just a class project). Thanks so much.
Anaglyph: As LSL Guy said, anchors aren’t really what I need. I know because I tried them before I started this thread. But thanks anyway!
Well, the tutorial is a few years old, so that may have changed – I’m pretty confident most major browsers support iframes. I just tested Firefox (the second most popular browser to IE) and it had no problems.
Firefox is exactly the browser I had in mind! I’m forced to use IE at work, and most of the people who look at my site will probably use IE, too, but I use Firefox whenever possible. Thanks for the follow-up … I can’t wait to get home and play with some code!
Did I really just say that?? Maybe I’m more of a geek than I thought…
She’s new to HTML, let’s not saddle her (him? sorry) with learning CSS, which can be tricky. Plus, contrary to what many say here, tables can still be effective for simply layouts – many large websites still use them heavily.
79Eric: I’ve heard that using tables for layout is frowned upon, but right now it’s the best I can do given the limits of my knowledge and free time. Thanks, though.
From what I’ve read it’s much easier to learn css based layouts if you start with them, rather than learn how to do things the ‘wrong’ way first. Tables can be effective for simple layouts, but doing it CSS based is usually easier. However, this really has nothing to do with the question at hand, since I don’t think Misnomer is interested in learning web design for a class project.
Plus, she’s using another tool to build the html for her. When using such tools, it’s usually easier to not fight the tool.
As for the question at hand…what Red Barchetta said. iframes or frames are the easiest way to do what you want given the requirements/tools. Frames work in all major browsers. Any tutorial or site that claims they don’t is out of date, wrong, or talking about some specific bug with their implementation in some browser.
This weighs heavily on the complexity of the design. CSS saves time and prevents repetition of code. Tables are intuitive and pedestrian and take less time to use effectively. They are also standardized, thus changes between browsers are minimal, while with CSS, the opposite is true.
Frames don’t work (at least not very well) in many of the lightweight browsers now appearing in portable devices such as phones and PDAs. Perhaps those don’t count as major browsers, but there are a lot of them out there, and they’re on the increase.
In any case, I don’t think standard browser compatibility is the complaint that web pros have against frames - I think it’s a buch of other issues including: they make content difficult to bookmark, they make accessibility difficult for people with impaired vision, they don’t always work well with search engines, and they can cause navigation headaches unless (for example) external links are explicitly targetted.
I agree that frames aren’t normally a good solution. I didn’t intend to argue for frames, just to allay Misnomer’s fears about compatibility.
Also, when I said major browsers I was referring to Safari, Opera, Firefox, and IE.
EDIT: just to eliminate possible implications in my earlier “from what I’ve read” statement: I started by learning CSS design, and I haven’t had a need for table based designs. Table based designs felt wrong to me when I started playing around with html, so I didn’t pursue them. For that reason, I would make a poor candidate to asses which one is actually easier to learn/understand/etc.
I’m staying out of the “CSS vs tables vs frames” steel cage death match, but I just want to follow up and say that the iframe worked! In both IE and Firefox! The embedded Windows Media Player was another story (grr), but the iframe was very easy to create and looks fine in both browsers. I’d post the URL for everyone to [del]laugh at[/del] ooh and ahh over, but it contains my full name so I’d rather not. But it worked.
Yay, glad to hear it worked! Sorry to hear about the embedded WMV; my website uses them extensively, so if you need any help with them, feel free to PM me.
