I am purchasing a CMS and it strongly recommends that I use CSS-P instead of tables. I have no experience with CSS-P in development. Can I convert an existing HTML (tabled) document to CSS-P? My template is at http://www3.esu.edu/beta/sample_1/sample_1.htm
they are asking you to use css to position your content using <div> tags. By hand it is a pain. But if you have dreamweaver, it is easy. Just open a new document and go to the layout mode and click on the top where it says "draw layer" and just start drawing content areas in. DW puts the positiong code in an external style sheet by default, then you can add all your formating after you have drawn your layout.
First, you don't 'convert' table layouts to css based layouts. The table layout for any but the most trivial of designs is not well structured nor is it semantically marked up. CSS based layouts start with well structured, semantic and well formed (valid) html markup of the content; all done without regard to presentation or behavior. Can you refactor? Yes, but you will have to spend some resources. If you're a long time table user, or you use a wysiwyg editor such as Dreamweaver, you will have to (re)learn to how to properly use html markup. Further, you will have to spend some time learning about css-p. The best route there is through available online tutorials. Work your way through a couple (Google is your friend). There is no substitute for hand coding where speed, accuracy of layout and best practice are required. Quality html+css requires a working brain. DW can't hack it. Neither can nVu, though it produces noticeably better code than DW. At that point, start marking up your content and applying some positional rules[1]. When you start bumping into problems, bring the specifics to the forum for advice. In fact, bring your prototype back before you start for a suggestion or two on the approach to take[2]. cheers, gary [1] It's a good idea to avoid the Siren song of absolute positioning. It will appeal to the print designer because it reminds of pasting up on a layout board. It also appeals to the table based designer because of the grid-like placement. AP positioning has big gotchas, and they will getcha if you're not better than intermediate level with css-p. Applications like DW will give you tables or an AP based page. Either amount to crap for code. [2] For example, this will be much simpler than tables. You have four blocks that can each be dealt with as a separate context.
geez another hand coder with his head up his butt about DW. I wouldn't even call DW a wysywig editor. I can write "Proper" html by hand using css. But Why? DW is great for visualizing what the code you are writing is doing, also as far as css goes, it makes no better or worse external style sheets than I write by hand. With that being said, if I was someone who didnt know html or css and just opened DW and made a site, the code would be heavy, but it would work. I guess that I am just not "heady" enough to write code and know exactly what it will look like. I find your post annoying because I think you are making it more complicated than it needs to be besides you are bashing DW when you fail to realize that DW is great for people who dont know html and great for people who do especially DW8 it has the best css integration of any of the previous versions. what you call "css-p" is not as hard as you might think. You just have to train yourself to not think in tables and think in a graph form, definately will require some reading. Unfortunately, I have to agree with you here about DW. Drawing layout areas in the design mode just doesn't cut it if you want to make your site completely css-p You have to learn it your self if you want to make whole sites that way.
True True True, you need to unlean how to use tables incorrectly I would recommend books by Eric Meyer on CSS, www.alistapart.com is also useful Exactly right Probably the best advice in this post. I use some heights and widths, but the rest of my css layout positioning are done by aligns, margins and paddings. All of this may seem a bit hardcore handcoder, and it is overkill for a newbie. But if someone came into my office and said what kk5st just posted I would hire them on the spot. I do use DW - I use it as a text editor only, and I have it because clients of mine have it. I create websites on a developement server and can preview them in firefox. I use the developers tool bar plugin with firefox which is one of the best aids to css to come out in years. I hand code everything. DW is good for home use. I wouldn't hire anyone that relied on DW. I'm not knocking the package here - even though it does produced slightly heavier code than it needs to. The problem is that if you know what your doing you don't need to use a package like DW, and if you don't know what your doing DW does so much for you that you don't ever learn the right way to do things. There should be no reason why you can't start out with a mixture of tables styled with css. This isn't a best case scenario, but it will enable you to get up and running until you get your head round a pure css site.
The books by eric meyer are great. I just got done with "cascading style sheets the definitive guide" using padding margins aligns and dont forget floats are trhe best way to position your content. You cant just open DW play with it for a year and call yourself a website designer. I agree you must know how to write valid html and use css and be able to make universally accesible websites. If you are saying that you would rather open notepad and start typing to build a website than use a combo of the code and design view in DW to write a VALID site using valid css. Then I commend you, do you have all 256 web colors and their hex values memorized? do you have every symbol memorized?Will you be able to conceptualize in your head the line heights when you change the font by one point? If you can do all of this in notepad, then you are A. very smart B. wasting a lot of time. I can build an entire website from the ground up in DW that is %100 w3c compliant. I can also do it in notepad, but why? Yes if you are going to hire an individual on at 75k you want hoim to know his stuff, but you also want him to utilize every tool available to him to do a faster job if possible. However this thread started as a css-p question and it still stands that you must know how to write this out in code because you will waste more time trying to get DW to do it right than just coding it by hand.
That's not what I am saying. What I am saying is I use different, and in my opinion better tools. And that is the drawback of DW, it closes your mind to other options. I don't use notepad. I use dreamweaver as my text editor. I have a copy of it, my clients use it, I like the code highlighting and the search and replace features. As I mentioned in my post I use firefox to preview my sites from a dev server. My target audience uses web browsers, not dw design view to view the end sites, you can't argue that DW design view is better than Firefox at rendering an html page. Ideally when making your webpage you should have a design to work from - which would have all your colour codes available for you to use. Strictly speaking there were only 216 truely web safe colours, as some rendered slightly differently in html than as a gif or jpg. However for quite some time now we have been able to create colours using rgb values. I haven't seen that as an option in DW, but maybe that's becasue I haven't looked for it. heres an article on it http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design I also mentioned that I use the firefox developers toolkit, one of the best free extensions for firefox if your making webpages. It has a color picker built in, that does way more than the DW equivilant, it also has great css editing and managing tools Yes, that would be their favorite text editor, firefox + the developers tool kit, a development server and an internet connection to look things up when required and ie for testing. There is a saving there in license fees as well. Well, we agree there. But his CMS only recommends that he use css, not requires it. css can be a steep and long learning curve to do it effectively, I see nothing wrong with making a tables based site to fill the gap until a. the site is viable, and it's worth investing more time b. css has been learned or he can afford to get some to do it for them
I see your Point of view, You have a point as to where I haven't used other tools too much. I use ultra-edit for my notepad functions ( it has nice html highlighting as well). Dw does have the ability to use RGB and a color wheel plus hue and saturation colors. I hear a lot about firefox plugins for webdev and I haven't played with them. Also, DW's design view lacks in rendering the css styles the way a browser would. Now to graphic development. You cant beat Fireworks, it is awesome .
I'll take that personally, thanks. If things go bad, I may be knocking on your door. See the next comment in re hand coding. I guess it was about five years ago that a friend asked me to make him a web site for a small mail order business, figuring I was slightly more computer literate than a garden slug—near genius compared to his other friends. He handed me a box that said Dreamweaver on it. I installed it and started reading the docs. I figured I'd need to know some html to do any good, kinda like you'd want to know object Pascal before firing up Delphi. By the time I knew html well enough to benefit from DW, I knew enough not to need it. So I made his small site in Emacs, uninstalled DW and gave it and the site files to him. My choice of tools is similar to yours; Emacs, Firefox w/developer related extensions, Tidy, various utilities eg. ftp, scp, ssh, wget, perl, Bash, &c., and, of course, IE to see what has to be patched. I do run Apache+PHP on my intranet. And thank god for Linux. So, slabadie, by all means go ahead and learn html+css. It's really not rocket science. It just needs a little up front effort on your part. cheers, gary
This is the one aspect of the post I do have to somewhat disagree with: Absolute positioning in and of itself was never the problem: if used properly, it can greatly assist in the manipulation of the various aspects of a website (e.g. drop-down menus). But it's like Flash: use AP for certain aspects/elements of a site, but NEVER use it for the whole thing. DW though? 100% in agreement. Crap code. C-R-A-P, crap. If we could just get rid of it, FrontPage, and the ImageReady code, we'd be a much happier web development community. And for those who are "visually minded" and have to draw out the layouts to see them, PhotoShop + ImageReady sans HTML code + skeletal hand-coding of major site elements = few, if any, problems. By the way, for those who are looking for a quality text editor that colour-codes the various aspects of HTML (and CSS, too!), check out Notepad ++. It's not perfect (e.g. it's missing an extended find/replace function), but the price is right (free) and it uses minimal resources. It also has this way cool feature where, if you put your cursor beside a bracket, it will highlight both the bracket and the equivalent closed bracket in red. So if you missed one somewhere, you can easily figure out where it's supposed to be. And no, it's not mine. I just discovered it a few weeks ago. And for the price, I'm quite happy with it (although if anyone knows of a better free editor, I'd be willing to check it out.) Anyway, learn to code by hand, avoid Dr*amw*av*r, and all will be right in the universe.