WordPress.org

Ready to get started?Download WordPress

Forums

(X)HTML Editors (23 posts)

  1. TechGnome
    Moderator
    Posted 9 years ago #

    Does anyone know of any (X)HTML/CSS editor(s) that will allow you to layou your site using div tags?

    I want to make some changes to the current template, but everything I have wants to dump it all into table (shudder) to control the layout (or adds a ton of crap code I wouldn't know -or care- to deal with). What I would like is the ability to draw a rectange, give it a name, and have the editor create the appropriate div tag, along with the controling CSS for it. The CSS could be embeded in the HTML, pulling it out isn't a problem. It would be a lot easier to develop pages that way, rather than the try-it-and-see method I tend to use (and often screw up).

    Does anyone know of such an editor?

    Tg

  2. tparlin
    Member
    Posted 9 years ago #

    I think Dreamweaver would satisfy your needs, but it's expensive.

  3. TechGnome
    Moderator
    Posted 9 years ago #

    Oooff! It would, but for the amount of web stuff I do, it would be cost prohibitive.

    Tg

  4. milus
    Member
    Posted 9 years ago #

    Hi! Try HTML Kit.
    It has a plugin that do the job.

  5. basketball
    Member
    Posted 9 years ago #

    I am a real odd ball. I have dreamweaver MX installed on my computer but the only thing I ever use is notepad/wordpad. Hehe

  6. polevedbew
    Member
    Posted 9 years ago #

    Dreamweaver MX 2004 would do the trick. You can download a 30-day trial version from Macromedia.com.

    I suggest if you do choose Dreamweaver then go with version MX 2004 which best supports XHTML and CSS standards.

  7. basketball
    Member
    Posted 9 years ago #

    Yeah! But wordpad rocks! You type the css and xhtml up and in when you screw up it has all the control z functions memorized. So technically I could be editing a css file for hours then if I hold onto control z long enough it would undo everything.

  8. Arzel
    Member
    Posted 9 years ago #

    Try Notetab Light, it's free. I have used Topstyle and HTML Kit, but I switched to Notetab. It's simple and easy to use.

  9. mikkeltsch
    Member
    Posted 9 years ago #

    UltraEdit could be good, too :)

  10. polevedbew
    Member
    Posted 9 years ago #

    If you want to go to a "light" software and away from Dreamweaver MX 2004 I have two suggestions -

    Notepad2 from http://www.flos-freeware.ch/notepad2.html

    and

    jEdit from http://www.jedit.org/

  11. PhillipH
    Member
    Posted 9 years ago #

    PSPad and Topstyle are perfect. It is one certainly for XHTML (which will replace HTML eventually).

    search on google for PSPad.

  12. TechGnome
    Moderator
    Posted 9 years ago #

    I appreciate the comments, and many of those are fine in their own right (I even use a couple of them already) but none (I haven't checked into DW MX just yet) are what I'm looking for. For starters they are all text based. I'm much more of a visual type of person. I'd like to draw my rectangle for my div tags (kinda like how I can to do the same in paint) give it a name (or a class) and let the proggie generate the CSS for me. I've been able to do this in other progs, but they all generated tables (GAH!).

    Tg

  13. orangeguru
    Member
    Posted 9 years ago #

    Drawing your div tags?!

    Sorry, but Dreamweaver and GoLive are as visiual as it gets. Webpages are not graphics. And over time you will discover the joy of simply working directly in the code instead of using a visual editor anyway.

    PS: I am also a visual person ...

  14. Kafkaesqui

    Posted 9 years ago #

    "PS: I am also a visual person"

    So am I, and yet ironically I've never used anything but a text editor for working with HTML, etc.

    Perhaps we're lucky enough to be able to visualize what the code before us will look like in a browser...

  15. Dener
    Member
    Posted 9 years ago #

    Check this free solution:

    "Nearly all its functions are based entirely on the CSS layout model. The result is far cleaner code and much enhanced control over positioning and typography. This typically means pages download quicker because it is no longer necessary to convert text to images in order to give headings and logos the desired look. "

    http://www.price-media.demon.co.uk/cascade.html

  16. TechGnome
    Moderator
    Posted 9 years ago #

    orangeguru - Kafkaesqui - you mean you can look at the screen, and jsut visualize your left bar 100px from the left?! Wow.... I had an idea, but from a CSS perspective, I don't know the exact spacing or the right layering that I needed to get it just right. I wanted something where I could draw my div boxes, moving & stretching them and sdjusting them untill it was close enough. Then I'd pull the CSS out and stick it in it's own file. All I needed was the positioning. I can do the coloring and other junk no problem.

    But it's all moot now, I found a template I liked pulled it apart (it was in tables! eww!) and converted it into pure CSS. I just had to think it through slowly.

    As for Dreamweaver - If I did this a lot & thought I would actualy get a lot of use out of it, I'd get it, but for what I needed, it really would have been too much.

    Tg

  17. James
    Happiness Engineer
    Posted 9 years ago #

    How about the Web Developer Extension for Firefox? The only catch is that you need to make the CSS and PHP (or HTML) files available online to load in a browser, but then you can do live CSS tweaking.

    http://www.chrispederick.com/work/firefox/webdeveloper/

  18. orangeguru
    Member
    Posted 9 years ago #

    @TechGnome: This is how I do it:

    1. Scribble: I always scribble my layouts on paper and work out the proportions - and make little markers and stars where I want certain menus and functions.

    2. Layoutgrid: Like in old print media I'll do a layout grid in photoshop/freehand and check if all the numbers and proportions add up.

    3. Copy & edit: Grab myself some CSS template for the layout I need and reshape it with my numbers and needed styles.

    Voila - finished.

    Good ressource for CSS template with common styles:

    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    I also like to visit this once in a while:

    http://cssvault.com/index.php

    Excellent source for inspiration and peek behind other peoples technique.

    Maybe this is something for you?

    http://www.price-media.demon.co.uk/cascade.html

  19. NuclearMoose
    Member
    Posted 9 years ago #

    basketball...you use WordPad? As in Micro$oft WordPad? Eeek. I wouldn't use that because of the RTF capabilities that it has. You could inadvertently introduce something nasty into your code.

    If any of you are Mac users, here's a free editor:
    http://www.barebones.com/products/textwrangler/index.shtml

  20. NuclearMoose
    Member
    Posted 9 years ago #

    You could also use a less expensive editor than Dreamweaver and go with Nick Bradbury's TopStyle Pro. It does HTML an CSS editing. I love it for CSS edits. There is also a TopStyle Lite, but for the price of TS Pro, I'd not bother with the Lite version.

    WestCiv's Style Master is a good one, too.

  21. RhunDraco
    Member
    Posted 9 years ago #

    Either jEdit or Bluefish http://bluefish.openoffice.nl/ . If you wanna pay, you can always get Homesite. I've always liked Homesite, but jEdit and Bluefish are great editors.

  22. TechGnome
    Moderator
    Posted 9 years ago #

    Gah! I liked what I saw in BlueFish..... only it's not for winders.... *gaarggh*

    Tg

  23. orangeguru
    Member
    Posted 9 years ago #

    Isn't it possible to post a 'sticky' in this forum with a link and short explaination for all these programs?

    I guess would be a great help for all?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.