You should shy away from using tables for formatting anything but actual tabular data (like if you want to show a spreadsheet). You can format anything tables can using CSS, and it’s gradually becoming the more accepted and expected way to code pages. It also reduces file size, and the browser renders pages faster than with tables. (On the flip side, older browsers don’t handle CSS as well, but I get the idea your target audience isn’t some grandmother who can’t download the latest, free version of a web browser).
Not sure why the fascination with frames - they are a bad way to code. I-frames, while cooler, still have some display issues on certain platforms (then again, what doesn’t).
I understand that your priority probably isn’t being a great coder, and that you have other things to invest your time in than learning the latest techniques. But in the long run you will certainly find it worth your while to have built your site at least considering some of these things (including the SEO stuff we talked about earlier in the thread).
[Here's an example of no-table coding](http://www.ride4ever.org). Disclaimer: I am not a coder myself, and this is a site my company built. I'm not promoting anything, it's just the quickest example at hand
Back to the graphics…dumb question for you: Did you optimize the graphic images as much as possible in Photoshop?
I used Photoshop Elements for the images in my website and was concerned about the load time myself. When ever I created a Photoshop .psd and .jpg file, I made sure to “Save For Web” as a .gif file for each and every image, whether it be a button, graphic, logo, or whatever.
I don’t know about Photoshop, but when you select this menu item under “file”, Photoshop Elements will display a screen that not only allows you to save as .gif (thus reducing KB greatly), but also give you other options to reduce size even more.
The drawback is that eventually you start to lose clarity, vibrancy, etc., but you should experiment at least.
I should say that I entirely agree with rexnervous on using css as much as possible. I should make it clear that I have been answering with the mindset of “get this done with the least learning necessary”. If you plan to continue your web design activities you will have to learn css at some point.
And I know frames are generally disliked; but this is one of those situations where I think an iframe would work as it should.
You’ll need to be in 1024 x 768 to see it correctly and using IE. That thing in the center is a partially transparent iframe. And no, that’s not me in the background. Also note that this page is just a bunch of random elements at this point and I’ve made no attempt to tie it all together.
Not a dumb question at all. I thought I had, but I just shrunk my main header image down from 54k to 40k by changing it from gif to jpg.
Just so you know, a gif isn’t always the way to go. For example anything “photo” like will always compress better as a jpeg, and the gif will be larger.
Yeah I love that screen. you can always shave off a k here and there.
World Eater, one thing I realized upon posting the ride4ever.org site is that it’s written in php, so you won’t see all of the code, and php is probably not something you want to be worrying about right now. But you can get the gist of how a non-table-formatted site can work.
Also, I’m giving you advice from a non-coder standpoint. I know just enough about everything on the web to be dangerous, but I don’t code (although I work with some amazing programmers). So, I would definitely follow Trigonal Planar’s advice, since he knows his stuff and actually codes. Don’t get all caught up in my “make sure it’s the best possible” mode, follow his (or other coder’s) advice.
You have quite a few positive responses since I was last here. Glad you are taking them to heart.
A single plea to build your site according to web standards. You can achieve the same results you want with web standards. Mort Furd’s post linking to the css zengarden is not just a must see, but a must understand. The key is separating content from structure. CSS does wonders for that. At the same time you can still achieve the visual graphic impact you desire along with the web standards you require in order for your site to be recognized by others (such as search engines).
Of course, the democratic nature of the web means you can do whatever you choose and all other opinions be damned. At that point is the site available and worthwhile to others, or merely an ego adventure? (The latter which will grow stale in short order.)
You have talent in your graphical design. Don’t waste it by thinking you can do web design where no one has gone before. Believe me, they have and many never returned.
You know it’s funny, as I’ve gone through this thread, my perspective has totally changed. I’m working on a design now that I’m quite happy with, and at the end of the day will take all the suggestions made here into account. I think for a long time, I really thought that this “web standards and design rules” thing was just some advice from some go by the numbers people. I figured everyone has DSL and 1000 plus resolution and nobody is blind, etc, etc, but let me tell you after having a site up almost a year, with tumbleweed blowing through, I need to try it the other way. All I can say right now is a few days ago before I posted this thread, I was ready to put up a similar version of what I had, but with all the worst attributes accentuated. The file size was twice as big, there were more image pages, etc. After all the great advice here, I started making something completely different (for me), and let me tell you, I’m real excited, I’m having fun figuring this stuff out, and making a technically polished website. I’m off for the weekend, but when I’m back, I’m sure I’ll have lots of questions.
Once again, thanks all, you’ve been a big ass help.
Can anyone tell me why there’s space between the cells in the table? It’s two cells, the header, and the thin line I want to tile. cellspacing, padding, and border are at 0, yet there’s a huge gap.
also, you can put your image map wherever you want, ya know. Throw it at the bottom of the page to keep it out of your way. That way, you can have this as your top cell:
Which also might help eliminate space. Browsers get stupid sometimes when it comes to space in the HTML script although it’s not supposed to matter at all.
Any gaps seen are often browser-dependent. Some browsers may see the gaps and other will not. You can avoid gaps by doing two things specifically on this page:
Remove the MAP details from within the table cell. In fact, remove it from the table and store it as the last item before you close the page.
Make sure your cells are “closed” and only contain content. That means no extraneaous spacing or invisible carriage returns.
I’m not sure what sort of final layout you’re going for but I have a suggestion that might make your page look real sharp. Namely, center everything you have right now and place it all in a css panel.
Should I stick this outside of the body tag before the </html> tag?
Another thing messing me up. How do I make the background image of cell 2? The background image is only big enough to cover the middle, then I have the background color on the sides. Can I even have both or is it one or the other. The bg image also seems to tile horizontally as well. Any suggestions?
Ok, Zipper’s & Duckster’s comments fixed the gap, yay!
Actually Trig, that’s exactly the layout I was looking for. I’m going to look at the code and do something similar. I don’t think I’m ripping anything off (code wise) because it’s the most basic layout in the world.
Any thoughts on how to do thinline.gif only in the background of cell2 (make it an iframe?) and a baground color for everything else? Maybe I should check out the CSS first, because I may be doing it completely differently and the other stuff is not needed?
I’m not exactly sure what you’re asking, but if you want a background to be in a cell, just say:
<td background=image.jpg>
BUT…do check it in all the different browsers because they all like to interpret it differently Especially earlier Netscapes, it does horrendous things. Your choice as to how far back you want to support with your site.
If you want to do it the CSS route, then check out all the background properties here. Yes that is a MS site and no, all of the attributes listed there do not work in all browsers. But it’s a good reference and I use it all the time, it just takes practice to find out what works in which browsers and how.
By the way you can download all versions of Netscape here. I actually ran into a user running Navigator 4.79 the other day… :smack:
He did it using css. The text is placed in a <div> tag and that div has a css class associated with it (you can’t see the actual css by doing a view source as the css is imported from a seperate css definitions file. Scroll down the page to where it says “View this design’s css”). That class defines a background image consisting of said gradient.
BTW, perhaps you could turn all your table borders on? It would make it a lot easier to see what’s happening.
)