Anyone know links for this? I know some HTML, I don't want the kiddy crap most people link me to "durrr this is how you make text biggarrrr". I want something to actually teach layout and design.
<!--QuoteBegin-OttoDestruct+Mar 1 2005, 10:52 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (OttoDestruct @ Mar 1 2005, 10:52 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Anyone know links for this? I know some HTML, I don't want the kiddy crap most people link me to "durrr this is how you make text biggarrrr". I want something to actually teach layout and design. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> 0__o
<a href='http://packy.dardan.com/walky/albums/album11/adq.jpg' target='_blank'>LOL</a> You should google it, seriously you get tons of sites and eventually you can sort through the garbage for the good ones.
Otto, what I would do, is I would design my website in Photoshop/ImageReady. Then, you slice it up using, gasp, the slice tool, which makes individual images and buttons and all that. Then, in Dreamweaver (best, evar, ok), you mess around with the links, etc. it's much easier that way.
If you're making anything more than a simple notepad website, then you may want to check out CSS. It makes things purty and it makes it easy to update content and/or design without having to rip up your whole site.
I found <a href='http://www.mezzoblue.com/zengarden/resources/' target='_blank'>some resources</a> from <a href='http://www.csszengarden.com/' target='_blank'>CSS Zen Garden</a>, which is an example of what can be done in CSS (click on the links on the right on the main site, to see how you can easily change your design, while keeping the same content).
<!--QuoteBegin-pjofsky+Mar 2 2005, 01:20 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (pjofsky @ Mar 2 2005, 01:20 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Otto, what I would do, is I would design my website in Photoshop/ImageReady. Then, you slice it up using, gasp, the slice tool, which makes individual images and buttons and all that. Then, in Dreamweaver (best, evar, ok), you mess around with the links, etc. it's much easier that way.
<a href='http://pj.netrulon.com' target='_blank'>ollmysitethatwas<b>not</b>rippedfromadobephotoshopokoll.</a> <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd--> Wouldn't that make your site huge, because everything is in pictures? Or do you add in text after you throw it into Dreamweaver? Your link is down, so I can't check that.
<!--QuoteBegin-theclam+Mar 1 2005, 10:25 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (theclam @ Mar 1 2005, 10:25 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Wouldn't that make your site huge, because everything is in pictures? Or do you add in text after you throw it into Dreamweaver? Your link is down, so I can't check that. <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd--> The borders and images for the buttons are all images. The middle, or, the area where all the content is, is not an image. I deleted that area, and just changed the background color (again, Dreamweaver is incredibly easy to use, don't believe Maddox ok), and it's fairly easy to add text after that. It <i>does</i> take a bit of time to load, though, but I remember compressing the images.... whatever.
And as for the link being down: Netrulon brags of having 99.9 percent uptime. <i>bull</i>
<!--QuoteBegin-pjofsky+Mar 2 2005, 01:30 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (pjofsky @ Mar 2 2005, 01:30 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> <!--QuoteBegin-theclam+Mar 1 2005, 10:25 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (theclam @ Mar 1 2005, 10:25 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Wouldn't that make your site huge, because everything is in pictures? Or do you add in text after you throw it into Dreamweaver? Your link is down, so I can't check that. <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd--> The borders and images for the buttons are all images. The middle, or, the area where all the content is, is not an image. I deleted that area, and just changed the background color (again, Dreamweaver is incredibly easy to use, don't believe Maddox ok), and it's fairly easy to add text after that. It <i>does</i> take a bit of time to load, though, but I remember compressing the images.... whatever.
And as for the link being down: Netrulon brags of having 99.9 percent uptime. <i>bull</i> <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> It loaded now. Since it looks like just like photoshop, you can (and did) use gif (although png is nice too), so the image sizes are very small.
CSS sounds like it would be a nice thing to incorporate as a regular part of a site. I'm sure it makes changing the layout easier. However, since I generally update the content constantly for the sites that I manage, and the layout changes very little, and the fact that I'm not too good with CSS, I don't use it for site layout. (I can use CSS when I need to, I just never consider it when thinking about how to create a page.)
If you want to use CSS for formatting pages (probably a good idea, cleaner code, plus it saves on bandwidth usage if it matters (if people ever use their cell phone to view your site, for example) because they only have to download the formatting code once rather than for each page), you should do it to begin with. If you start out using tables to format everything (like I did, that's what I was taught in my high school web design class, even though CSS was also taught), you won't want to learn to use CSS for formatting pages.
Save yourself a headache, and avoid using tables for design. Keep tables for tabular data only. Put your content in the .html file, and all the design elements in your CSS file. AVOID TABLES. CSS is not just for bolding text and changing background colors - it is intended for the <b>entire</b> design structure of your site.
Again, <b>avoid tables</b>. It increases file size (download time), requires a re-load of all design content on each page, obfuscates and clutters the HTML, and doesn't degrade well (meaning those cell phone browser visitors may not be able to view the site easily).
Want to change the layout of your site? If you use tables, you have to go through every .html file and make tedious changes. With XHTML/CSS, you change <b>one file</b>, and it affects the <b>entire site</b>.
antifreezeThe guy with the goods!Join Date: 2003-05-12Member: 16232Members, Constellation
Even though i'm at uni studying this i cant really give any resource info because it's all on a secured webserver <!--emo&:(--><img src='http://www.unknownworlds.com/forums/html/emoticons/sad-fix.gif' border='0' style='vertical-align:middle' alt='sad-fix.gif' /><!--endemo-->
Key Points: Tables, yes avoid them like the plague unless you are wanting to display data. Yes the file size is big but they also screw over accessability. We got a demo in uni of a text to speach browser trying to reproduce a tabled website and it got all confused and missed off the page content.
When designing consider the C.R.A.P principles C = Contrast R = Repitition A = Alignment P = Proximity
If you a java script menu system be sure to add a hyperlink on your page somewhere to get to a sitemap. If you don't google cannot index your pages properly.
::I'll finish these if i remember when i get back from uni
Listen to them, and use CSS. CSS isn't THAT hard to learn since it uses similar syntax to HTML, which you are hopefully familiar with.
I haven't learned much about CSS layout things, because frankly I never knew you could change the layout so drastically with CSS. Thanks for the links XD
<!--QuoteBegin-MedHead+Mar 2 2005, 01:44 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (MedHead @ Mar 2 2005, 01:44 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> <a href='http://www.w3schools.com/' target='_blank'>http://www.w3schools.com/</a> <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> I just have to say, I highly recommend that site for anyone who wants to start from the ground up, or if anyone wants the most recent tags since some become vestigial with new versions of markup language.
fanaticThis post has been edited.Join Date: 2003-07-23Member: 18377Members, Constellation, Squad Five Blue
edited March 2005
Dreamweaver, FrontPage, and all the other graphical HTML editors tend to make horribly mangled code. Often to the point of the websites looking different or screwed up in other browsers than IE.
I wouldn't touch one with a stick, although I guess it can be a help if you're inept at HTML/CSS?
As for using CSS boxes instead of tables for organizing content, it's a bit of a two-sided beast. Only the newest browsers handle CSS boxes properly, and the most recent IE still has problems with the CSS box model, which will result in your page looking different in IE than in say Firefox or Opera. The way around this is to use a wide variety of HTML/CSS hacks, that are a pain to learn and figure out. In my opinion, it really isn't worth the extra trouble at the moment. It can be efficient though, no doubt, especially on non-complex sites.
1. CSS degrades <b>much</b> better than tables. Old browsers will see the site without the CSS markup, meaning <b>your content will not be unreadable in any way.</b> If there are areas where old browsers can't handle the CSS, there are ways around this to present the data in an alternative fashion.
2. CSS hacks are clearly documented and often pre-made (found on <a href='http://www.alistapart.com/)' target='_blank'>http://www.alistapart.com/)</a>
3. The issues with differences between browsers can be repaired with <b>less</b> work than trying to maintain a site that uses tables.
Deciding not to advance because of minor issues will not help Web standards. XHTML/CSS have been around for years - look how long it's taken to get this far! Don't hold the progress down any more.
<!--QuoteBegin-fanatic+Mar 2 2005, 09:14 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (fanatic @ Mar 2 2005, 09:14 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Dreamweaver, FrontPage, and all the other graphical HTML editors tend to make horribly mangled code. Often to the point of the websites looking different or screwed up in other browsers than IE. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> Dreamweaver makes very clean code, by and large. So long as you use it properly (ie use the code view often) you'll not go wrong with it. The only time DW creates ugly code is when you use its pre-made java gadgets.
<!--QuoteBegin-DOOManiac+Mar 3 2005, 12:34 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (DOOManiac @ Mar 3 2005, 12:34 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> They've already been linked, however I will link them AGAIN because they are that damn good:
<a href='http://www.csszengarden.com/' target='_blank'>CSS Zen Garden</a> <a href='http://www.w3schools.com' target='_blank'>w3schools</a> <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd--> Quoted for truth.
W3schools will teach you the how-to's and CSS Zen Garden is a massive inspiration. In a world where nothing is original, borrowing inspiration (Read: not stealing or ripping off) is a great way to learn and come up with your own style.
And yes, Dreamweaver, dispite being a WYSIWYG editor, doesn't create too bad code, as long as you keep an eye on it, but i would still recommend hand coding your own HTML and CSS from scratch.
While W3schools is definitely a good starting point to learn CSS+XHTML it doesn't cover all the basics you should know when creating CSS based layouts.
One of the more useful-yet-frustrating things I found when I was a noob at creating CSS layouts are floats. To help you understand this, here is a <a href='http://css.maxdesign.com.au/floatutorial/index.htm' target='_blank'>pretty comprehensive float tutorial</a>. Very useful and I occasionally refer to it myself.
When using Best Practices to make websites, it is often regarded as good practice to have your navigation menu as an <a href='http://www.w3schools.com/tags/tag_ul.asp' target='_blank'>unordered list</a>. Don't like how a list looks like? Here's a <a href='http://css.maxdesign.com.au/listamatic/' target='_blank'>hefty reference</a> on styling unordered lists. Want a cross-browser drop down menu that uses lists? <a href='http://www.alistapart.com/articles/dropdowns' target='_blank'>Look no further</a>.
<a href='http://www.dezwozhere.com/links.html' target='_blank'>Holy CSS ZeldMan!</a> - An immense treasure trove of Web Standards tips, tricks and techniques. A must bookmark for anyone who does this kind of thing.
On a more practical design note, <a href='http://www.adampolselli.com/2005/' target='_blank'>it's</a> <a href='http://www.color****.com/' target='_blank'>all</a> <a href='http://wellstyled.com/tools/colorscheme2/index-en.html' target='_blank'>about</a> <a href='http://www.returnofdesign.com/' target='_blank'>colours</a>.
<!--QuoteBegin-ZeroByte+Mar 3 2005, 10:13 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (ZeroByte @ Mar 3 2005, 10:13 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Want a cross-browser drop down menu that uses lists? <a href='http://www.alistapart.com/articles/dropdowns' target='_blank'>Look no further</a>. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> Thank you so much! I have been looking for something easy to use that would do this. Currently I am using a bunch of javascript to do something similar, but I can't follow most of the javascript, so it becomes quite frustrating to configure anything. Seriously, this will be a huge help.
The only bad thing about it is that people using cell phones and similar devices won't be able to see your site properly. This could also affect those with disabilities, I think, but I'm not sure how, really. If you aren't worried about people in those situations being able to access your site, then it doesn't matter.
Well considering my site is going to be a portfolio site for my work, I don't think I'm too concerned about it being viewable on a cell phone. Though I'm not sure I understand why tabels are hard for things to view compared to CSS.
<!--QuoteBegin-KungFuDiscoMonkey+Mar 3 2005, 02:43 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (KungFuDiscoMonkey @ Mar 3 2005, 02:43 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Well considering my site is going to be a portfolio site for my work, I don't think I'm too concerned about it being viewable on a cell phone. Though I'm not sure I understand why tabels are hard for things to view compared to CSS. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> Because with XHTML/CSS, all the design elements of a page are in the CSS file. This means only the data is found in the .html file. Remove styling from a site that uses CSS, and you'll get a site that looks like it was made way back at the start of the Web. This is good - browsers that can't handle the site's CSS file will still be able to get access to the content without any problems.
With tables, the design elements are set inside the .html file. This means browsers that aren't compatible with the tables presented in the site won't be able to view the content seperate from the design. Therefore, since they can't read the design, they can't read the content.
It's far better to make your site accessible to all, and not just your demographic.
<!--QuoteBegin-im lost+Mar 3 2005, 02:17 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>QUOTE</b> (im lost @ Mar 3 2005, 02:17 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> This could also affect those with disabilities, I think, but I'm not sure how, really. <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd--> If I recall (it's been a while since I've used a screen reader to see how it performs), sites that use tables for design are problematic because screen readers read left to right, top to bottom, every table in the site. If I remember correctly, it even announces "table cell", and then the contents of the table cell.
Well I've been looking at that Zen Garden site and I can see there is an awful lot of flexibility in CSS. I'll have to play with it some over spring break.
Comments
0__o
Webmonkey works for meh.
Some may frown upon it, I personbally think it's one of the most usefull peices of software I've used.
Dreamweaver in combination with Photoshop/Imageready slices = pwn
*shrugs*
<a href='http://pj.netrulon.com' target='_blank'>ollmysitethatwas<b>not</b>rippedfromadobephotoshopokoll.</a>
I found <a href='http://www.mezzoblue.com/zengarden/resources/' target='_blank'>some resources</a> from <a href='http://www.csszengarden.com/' target='_blank'>CSS Zen Garden</a>, which is an example of what can be done in CSS (click on the links on the right on the main site, to see how you can easily change your design, while keeping the same content).
<a href='http://pj.netrulon.com' target='_blank'>ollmysitethatwas<b>not</b>rippedfromadobephotoshopokoll.</a> <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd-->
Wouldn't that make your site huge, because everything is in pictures? Or do you add in text after you throw it into Dreamweaver? Your link is down, so I can't check that.
The borders and images for the buttons are all images. The middle, or, the area where all the content is, is not an image. I deleted that area, and just changed the background color (again, Dreamweaver is incredibly easy to use, don't believe Maddox ok), and it's fairly easy to add text after that. It <i>does</i> take a bit of time to load, though, but I remember compressing the images.... whatever.
And as for the link being down: Netrulon brags of having 99.9 percent uptime. <i>bull</i>
<a href='http://dhpersonal.com/links.html#web' target='_blank'>http://dhpersonal.com/links.html#web</a>
The borders and images for the buttons are all images. The middle, or, the area where all the content is, is not an image. I deleted that area, and just changed the background color (again, Dreamweaver is incredibly easy to use, don't believe Maddox ok), and it's fairly easy to add text after that. It <i>does</i> take a bit of time to load, though, but I remember compressing the images.... whatever.
And as for the link being down: Netrulon brags of having 99.9 percent uptime. <i>bull</i> <!--QuoteEnd--> </td></tr></table><div class='postcolor'> <!--QuoteEEnd-->
It loaded now. Since it looks like just like photoshop, you can (and did) use gif (although png is nice too), so the image sizes are very small.
If you want to use CSS for formatting pages (probably a good idea, cleaner code, plus it saves on bandwidth usage if it matters (if people ever use their cell phone to view your site, for example) because they only have to download the formatting code once rather than for each page), you should do it to begin with. If you start out using tables to format everything (like I did, that's what I was taught in my high school web design class, even though CSS was also taught), you won't want to learn to use CSS for formatting pages.
Again, <b>avoid tables</b>. It increases file size (download time), requires a re-load of all design content on each page, obfuscates and clutters the HTML, and doesn't degrade well (meaning those cell phone browser visitors may not be able to view the site easily).
Want to change the layout of your site? If you use tables, you have to go through every .html file and make tedious changes. With XHTML/CSS, you change <b>one file</b>, and it affects the <b>entire site</b>.
Again, if I haven't said it enough, avoid tables.
Key Points:
Tables, yes avoid them like the plague unless you are wanting to display data. Yes the file size is big but they also screw over accessability. We got a demo in uni of a text to speach browser trying to reproduce a tabled website and it got all confused and missed off the page content.
When designing consider the C.R.A.P principles
C = Contrast
R = Repitition
A = Alignment
P = Proximity
If you a java script menu system be sure to add a hyperlink on your page somewhere to get to a sitemap. If you don't google cannot index your pages properly.
::I'll finish these if i remember when i get back from uni
I haven't learned much about CSS layout things, because frankly I never knew you could change the layout so drastically with CSS. Thanks for the links XD
I just have to say, I highly recommend that site for anyone who wants to start from the ground up, or if anyone wants the most recent tags since some become vestigial with new versions of markup language.
<a href='http://www.csszengarden.com/' target='_blank'>CSS Zen Garden</a>
<a href='http://www.w3schools.com' target='_blank'>w3schools</a>
I wouldn't touch one with a stick, although I guess it can be a help if you're inept at HTML/CSS?
As for using CSS boxes instead of tables for organizing content, it's a bit of a two-sided beast. Only the newest browsers handle CSS boxes properly, and the most recent IE still has problems with the CSS box model, which will result in your page looking different in IE than in say Firefox or Opera. The way around this is to use a wide variety of HTML/CSS hacks, that are a pain to learn and figure out. In my opinion, it really isn't worth the extra trouble at the moment. It can be efficient though, no doubt, especially on non-complex sites.
1. CSS degrades <b>much</b> better than tables. Old browsers will see the site without the CSS markup, meaning <b>your content will not be unreadable in any way.</b> If there are areas where old browsers can't handle the CSS, there are ways around this to present the data in an alternative fashion.
2. CSS hacks are clearly documented and often pre-made (found on <a href='http://www.alistapart.com/)' target='_blank'>http://www.alistapart.com/)</a>
3. The issues with differences between browsers can be repaired with <b>less</b> work than trying to maintain a site that uses tables.
Deciding not to advance because of minor issues will not help Web standards. XHTML/CSS have been around for years - look how long it's taken to get this far! Don't hold the progress down any more.
Dreamweaver makes very clean code, by and large. So long as you use it properly (ie use the code view often) you'll not go wrong with it. The only time DW creates ugly code is when you use its pre-made java gadgets.
<a href='http://www.csszengarden.com/' target='_blank'>CSS Zen Garden</a>
<a href='http://www.w3schools.com' target='_blank'>w3schools</a> <!--QuoteEnd--></td></tr></table><div class='postcolor'><!--QuoteEEnd-->
Quoted for truth.
W3schools will teach you the how-to's and CSS Zen Garden is a massive inspiration. In a world where nothing is original, borrowing inspiration (Read: not stealing or ripping off) is a great way to learn and come up with your own style.
And yes, Dreamweaver, dispite being a WYSIWYG editor, doesn't create too bad code, as long as you keep an eye on it, but i would still recommend hand coding your own HTML and CSS from scratch.
One of the more useful-yet-frustrating things I found when I was a noob at creating CSS layouts are floats. To help you understand this, here is a <a href='http://css.maxdesign.com.au/floatutorial/index.htm' target='_blank'>pretty comprehensive float tutorial</a>. Very useful and I occasionally refer to it myself.
When using Best Practices to make websites, it is often regarded as good practice to have your navigation menu as an <a href='http://www.w3schools.com/tags/tag_ul.asp' target='_blank'>unordered list</a>. Don't like how a list looks like? Here's a <a href='http://css.maxdesign.com.au/listamatic/' target='_blank'>hefty reference</a> on styling unordered lists. Want a cross-browser drop down menu that uses lists? <a href='http://www.alistapart.com/articles/dropdowns' target='_blank'>Look no further</a>.
<a href='http://www.dezwozhere.com/links.html' target='_blank'>Holy CSS ZeldMan!</a> - An immense treasure trove of Web Standards tips, tricks and techniques. A must bookmark for anyone who does this kind of thing.
On a more practical design note, <a href='http://www.adampolselli.com/2005/' target='_blank'>it's</a> <a href='http://www.color****.com/' target='_blank'>all</a> <a href='http://wellstyled.com/tools/colorscheme2/index-en.html' target='_blank'>about</a> <a href='http://www.returnofdesign.com/' target='_blank'>colours</a>.
Thank you so much! I have been looking for something easy to use that would do this. Currently I am using a bunch of javascript to do something similar, but I can't follow most of the javascript, so it becomes quite frustrating to configure anything. Seriously, this will be a huge help.
<a href='http://kungfudiscomonkey.net' target='_blank'>http://kungfudiscomonkey.net</a>
I just have to change the specific part that I'm working on. And only have to change my index.php page when I want to change the overall look.
Because with XHTML/CSS, all the design elements of a page are in the CSS file. This means only the data is found in the .html file. Remove styling from a site that uses CSS, and you'll get a site that looks like it was made way back at the start of the Web. This is good - browsers that can't handle the site's CSS file will still be able to get access to the content without any problems.
With tables, the design elements are set inside the .html file. This means browsers that aren't compatible with the tables presented in the site won't be able to view the content seperate from the design. Therefore, since they can't read the design, they can't read the content.
It's far better to make your site accessible to all, and not just your demographic.
If I recall (it's been a while since I've used a screen reader to see how it performs), sites that use tables for design are problematic because screen readers read left to right, top to bottom, every table in the site. If I remember correctly, it even announces "table cell", and then the contents of the table cell.