Forum Moderators: open
After frustration over Dreamweaver's inability to get it right when previewing my website on my IE6 browser, I'm considering coding it by hand. My problem is I have a mental block as far as HTML is concerned. although I know the tags, I find myself having to flip thru my reference material looking for tags. Can someone show me how to get over this?
thanx
As far as tagging that no real big deal since you are going to use CSS for style and positioning
Use FireFox extension for developer look at a page that you like and then from the FF extension look at the CSS sheet and learn from it
Also
When your table skeleton is ready start by placing a few words and CSS style those words, then play with image positioning and learn from the W3C about image float left and right
See that was easy you almost are in business
My problem is I have a mental block as far as HTML is concerned. although I know the tags, I find myself having to flip thru my reference material looking for tags. Can someone show me how to get over this?
The old adage, "practise makes perfect" is a goodun (unfortunately!) If you keep coding by hand you'll get quicker and the right stuff will hopefully pop into your head!
I've often had a problem with the header tags... http-equiv/name, src/href etc... having simply copied them between pages, without retyping.
Oh, and keep your online HTML/CSS reference just a click away! I've often dived into [htmlcodetutorial.com...] for HTML.
Also read the w3c manual a few times about what each tag is supposed to do and what it's not supposed to do. I haven't seen any books yet that get HTML tags 100% yet. They still print books that use <font> tags. So I don't trust books when it comes to HTML. W3C is surprisingly well written and rather easy to grasp. They have lots of examples as well.
Another thing that help me was to look at the code of good sites. Try to visualize the basic design from looking only at the code.
Eventually your html block will be lifted and you will be flying through all of your Dreamweaver tweaks in no time.
My problem is I have a mental block as far as HTML is concerned. although I know the tags, I find myself having to flip thru my reference material looking for tags.
How did you come by DW, did you get it with StudioMX? If you did, you may already have what is IMO the best hand-coding program, HomeSite. It will be in extras on the CD. You can also get it from the MM site (it will soon be owned by Adobe, I hear.)
It has an autocomplete function as well as most of the standard HTML tags as quick keys - you begin the tag and right in the editing page a drop-down lost of choices appears, you arrow-key to the right one and press enter. You can also custom create tags for ones not in the program. This will help you commit them to memory and make for faster hand coding if you're moving from point-and-click. :-)
Use a table skeleton (one table, one row, one col per main area that’s it)
Then go 100% CSS within
It gives you more of a “solid base”
And makes your CSS easier to understand and tweak one step at a time
It also tremendously help in making it cross browser
I was recently reading that it was a technique fully agreed on and even mentioned in a few books.As far as tagging that no real big deal since you are going to use CSS for style and positioning
It is advice like this that keeps the poor practices of table-based design so prevalent on the web. Look, if you can't learn non-table based, semantic design... Then thats fine. You can't always teach an old dog new tricks.
However, its just socially irresponsible to recommend this approach to others.
Kaymeis, tableless design is completely within your grasp. Once you understand how it all works, it is no harder than table-based design, and easier to maintain. There are a ton of good articles that can help you along your way at #*$!.com and positioniseverything.net.
Going Tableless with CSS [webmasterworld.com]
I make all page content from headings, paragraphs, lists, tables, and forms. Use external CSS to style them all, and use class names for block elements that are styled in a non-standard way (like the navigation list, and the footer paragraph).
