PDA

View Full Version : Converting Table Template to CSS Layout


starguy
08-07-2011, 12:59 AM
I have been watching many tutorials online, some paid tutorials, and one thing that seems constant, everyone is starting with pages already started.

I've found a template that I like but it is designed using tables for layout. The website I have now, www.astral-imaging.com (http://www.astral-imaging.com), was done in FrontPage and uses tables. What I'd like to do is re-do the new template using CSS Layout but I have yet to find any information on doing a CSS Layout from scratch. The template I'm interesting in converting is posted here (http://www.astral-imaging.com/test1/index.html). While I enjoy learning all this I really think it would be great if these tutorials started from a blank template. Any suggestions would be really great.

Thanks,

Steve

DWcourse
08-07-2011, 04:24 AM
You can start with one of Dreamweaver's built in CSS layouts. the Two Column Liquid Left Sidebar Header and Footer layout would be a good starting point for that layout.

Work in split view and read the comments in the CSS and HTML.

Corrosive
08-07-2011, 06:53 AM
Nettuts do a few 'from scratch' tutorials; http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ or http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/

Nettuts is a pretty good resource. Otherwise try http://htmldog.com/ for some beginner CSS tutorials.

Hope that helps.

starguy
08-07-2011, 10:10 PM
Thanks for the links. I did look at and am giving the Dreamweaver CSS Template a try. I thought I had done this before and thought I saw table tags and therefor quite using it. Must have been another template.

The links to the three sites for tutorials is a great resource but I got lost fairly quickly in the use of Photoshop creating the layout in the "Design a Beautiful Website From Scratch". The second link "step by step" has some good information in the very beginning on layout that I'll play with.

I haven't looked at the third link much yet but it appears to be a very good resource and I may end up using this to help define some of what I want to do.

I did start with the Two Column Liquid Left Sidebar Header and Footer layout and am just really getting into try some things with it. The first thing I noticed is that I can insert my image on the left as the posted page showed but getting text to the right of it doesn't seem possible. It appears that the right side of the logo image is uneditable space and trying to insert editable space brings that space below the logo image. Again, I'm just starting to play with this.

I may be going a bit overboard as the website is just for displaying my astronomy images, equipment, and to be used as a reference for those beginning astrophotography. Not sure which learning curve was harder...

Thanks for the replies and help.

Corrosive
08-08-2011, 06:00 AM
The first thing I noticed is that I can insert my image on the left as the posted page showed but getting text to the right of it doesn't seem possible. It appears that the right side of the logo image is uneditable space and trying to insert editable space brings that space below the logo image. Again, I'm just starting to play with this.



You can float an image using CSS and the words will 'wrap' around it; http://www.tizag.com/cssT/float.php

starguy
08-14-2011, 06:58 PM
I have been working through some of the above information and think I really need to start from basic. I feel somewhat comfortable with HTML, enough so that I can use Dreamweaver's split view and see what to change if I want. The more complex HTLM, maybe not so much. I had found a site that sells a Dreamweaver add-on called Flexi CSS Layouts and while it appears to be an interesting add-on, support says it really isn't for developing web templates and the 10 day trial just didn't give me enough time to really get a feel for it. I only have a few days left and haven't really gotten very far with it.

The next thing I did was find the site http://www.w3schools.com/ and tried some of the on-line chapters they have. I have just received two books that follow these examples being "Learn HTML and CSS with W3Schools" and "Learn CSS with W3Schools" I can't say how helpful they will be but they should provide some helpful insight. I looked at the local Community College and that had nothing to offer for the fall classes. Being retired I have some time but being a hobby and not an income earning endeavor I probably should keep cost to a minimal.

Didn't want to just fade into the background without saying thanks for the assistance.

domedia
08-15-2011, 03:27 AM
You should probably stay away from w3schools, they are sort of frowned upon by the web design community.

starguy
08-15-2011, 03:45 AM
Could you elaborate some? Are they not using practices considered to be web compliant? I've bought the books but if they will lead me astray I'd just soon put them away.

domedia
08-15-2011, 12:46 PM
Right, they promote sub-par code, and sometimes they're just plain wrong. I had no idea they were publishing books. I'l make sure the books are written by reputable authors. Also look here: http://www.w3schools.com/