I’m building a website, fairly simple, menubar on the leftside, and a big blank space for all the info on the right side. I have 2 questions.
I’ve used and am familiar with frames but not tables. I’ve decided to use tables to split up the site, because frames can be a pain with the back button and printing only the selected frame and such.
Now with frames I had the target tag, but with a table how will I make the info switch? Each button will be in it’s own table cell.
So If I click on “Links” how do I get it to load the Links.htm into another cell on the table?
Question 2. - Java rollovers.
I plan to make rollovers for the buttons, but there’s a catch. (by the way if anyone has some nice short rollover code I would be most grateful. I have some old code but I think it’s sort of clunky).
Essentially what I need to do, is to replace two images when I rollover a button. the unrolled over button image, and an addition image all the way on the right lined up horizontally in a totally different table cell.
You ever see when you rollover something, and there’s a little dot next to it? Basically I want to put the dot all the way on the other side of the screen.
I have no clue how I would replace that image in a totally different table, seeing that tables don’t have names or anything.
The simplest solution for you would be using a little Java Script.
When using tables the easiestw ay to do thing would be simply to load up an exact copy of the page, only with the different content in the appropriate cell.
Alternatively you can load the information into memory using javascript, and when the button is clicked use the script to change the contents of the cell.
An even better solution would be to use ASP or PHP or some other database driven solution to load the appropriate content from a database when the button is clicked.
The rollover is also simple to do using javascript. You’d need to write a function that will do BOTH roll over the button image, and the other image.
I don’t have the time right now to write you a script, but there are many sites that’ll help you get started with javascript.
I figured that maybe with the tables, you just load up the same page with the new html page in the appropriate cell, but I’m usuing a lot of images, so I was worried it that might be a problem.
As I mentioned before, I am comfortable with frames, is there any reason I shouldn’t use them?
Now, the pictures shouldnt be a problem, if you are talking about the borders and the menu. Use gifs and they shouldn’t add up to much. And besides browsers will cache those frequently used images anyway.
One question for you, I took a looka t your link, and I’m curious: the effect you have going from one color to another, and the little grey lines also in the design, I see they get used a lot on websites, how do you do it (I have photoshop CS)?
I don’t like telling people what to do, but I would strongly advise against this idea. What improvement does an updated table cell have over a frame or iframe? The back button is still a mess, cells are not usually scrollable, and while some browers allow you to print or view only a single frame, there’s no such thing as “view only this cell”.
While I admit frames have some problems, that’s not the way to solve them. If you can use server-side includes, or you have the patience to copy and paste the framework onto every page, go with that. Otherwise, stick with frames (or iframes, guessing from the layout on your page).
I originally had a photo that I wanted to look like I got it from a TV. The “TV lines” trick is fairly well known and well used. I didn’t like the way it looked with the photo, so I removed it and I still liked the way the lines looked.
As far as morphing from yellow to orange, you want to use the gradient tool. I’m not sure what Photoshop CS is (somesort of free version?) but look for the paint bucket tool. Hold the button over the paintbucket, and additional tools should show, one of them (in the case of the paintbucket the only other) is the gradient tool. You can select which to colors and a bunch of blending options.
I’ll go ahead and recommend that you stay AWAY from frames for atleast one reason: they are so passe No one uses them anymore, instead opting for nested tables and other solutions (such as javascript and database driven sites).
And unless you do some serious testing and careful work they won’t look good at all resolutions.
You stated that you are already using Adobe Photoshop. Do you also have Adobe ImageReady? If so, you can “easily” achieve both your goals (that is, it will be easy once you learn how to use the Slice tool and add Rollover states).
To get the file cut up into a bunch of table cells, you use the Slice tool to cut the entire document into several rectangles (one rectange for each navigation element and at least one for the main content area of the table). After all of the slices are laid out, you select File…Save Optimized As and an HTML document will be created for you.
In ImageReady, you can add Rollover states for mouseover, mouseout, etc. so that changes the image displayed in one or more slice. I don’t have my copy of ImageReady handy now, so I can’t give you explicit details about how to do this, but check with the help menu.
Well, one hand washes the other, so thanks as well.
Ok, I’m going to start on laying this thing out in tables, and if I hit any bumps in the road I’ll be asking for some advice. I’ll gte to the rollover bridge when I cross it.
Well, the whole navigation bar and updated content block model is as passe as anything on the web. Seriously, a whole lot of sites do this. There are a few ways to do it, and I’ve never heard of anyone doing it by updating a table cell with JavaScript. It’s possible, so maybe someone did it and I didn’t notice, but I’ve certainly never heard it offered as a solution. As far as I can see, this solution has all of the disadvantages of frames (including looking bad at varied resolutions), plus some disadvantages on top of that.
World Eater, since it sounds like server-side includes are not an option, I suggest you at least look into and consider inline frames. Inline frames are made with the iframe tag. They are block-level elements (ie, boxes) that display content from another file. They have name and src attributes, and you update their content just like regular frames. (I believe this is right; I’ve never used them.)
Ah I was getting excited about using Imageready to slice things up and spit me out a perfect HTML document.
If I go the iframe route, do I make html files and reference them with the I frame?
I think for now I’m going to see if I can figure out IR and make a table. This is going to be a very simple site, so hopefully I can do the job nice and quick.
I get the feeling that you don’t quite understand how table layouts work. For normal table layouts, you make a table with all your navigation buttons and whatnot, and put that table into every page. Then you fill in your “content” cell with whatever belongs on each page. You end up with things like index.html, aboutus.html, worldeater.html, and so on, with each page having a duplicate copy of your table layout. Each button then links to a separate page, not a cell.
To do what you’re thinking of, you’d want to make a main page with your table layout, then place an iframe inside your “content” cell. You then give the iframe a name and make a bunch of “content” pages which contain only the main stuff, not navigation or anything else. Then you give your navigation links a target that points to the iframe, just like in a normal frameset.
Upon preview: Yeah, just use ImageReady to make your layout, and stick an iframe into the content cell.
Having said that, have you established a reason for the web site? Is it for you, your family and friends, you just want to join the world web site community, and/or you are building a web presence to offer goods/services to others? I ask this because you should consider your prospective visitors as well.
The real key is to build a web site according to web standards, using the KISS Principle. It makes it so much easier to build, maintain, expand, etc. In time, as you gain hands-on experience you can expand your skills, going with frames, iframes, or not. The technology should not dictate the design nor use of your web site.
The typical table design with your banner across the top row, two cells in the next row (the left being for navigation; the right for content), followed by a third row for the footer is time-tested and works.
Build your site without image rollovers for navigation and do not use iframes in the content area. Instead, each navigation link goes to another page as Hauky suggests initially. Get your site working first.
Then consider replacing the ordinary navigation links with image rollover links. Move on to an iframe if you wish.
I am not suggesting building a simple site and going live with the world, later to add rollovers and an iframe. You can build your initial site and ask a few web techie friends for advice on what you’ve accomplished so far. Now go on and enhance the site with image rollovers. Ask your web techie friends again. And so on. In the end, the stepped approach helps build confidence and skills, and only delays your world wide web debut just a few days.
The main goal of this site is to have a web presence for my music. I actually have some familiarity with HTML, building a few websites before, but this is my first stab at making something semi professional. Being more of an artistic person, I actually have good knowledge of Flash, and have made several all Flash sites. I would like to reach the widest audience possible, and have decided to make a html site and a Flash site. In making this site, I want something that looks nice and clean, and I want to build it quickly, without getting mired down in details.
While I think it’s a good idea to make a rough template, and build upon it, it’s far easier for me to design it in Photoshop, and then build the site from that. I want to know exactly how it looks before I start things.
Thanks for the good words, I’ll be keeping them in my mind during this undertaking.
