Results 1 to 6 of 6

Thread: Old-Fashioned Webmistress + WYSIWYG Editors + DIV creation = ???

  1. #1
    Join Date
    Jan 2007

    Old-Fashioned Webmistress + WYSIWYG Editors + DIV creation = ???

    Hello. =)

    I was wondering: is there an HTML editor that can create this layout (and other similar layouts) in WYSIWYG format, and by using DIVs?

    I'm a complete beginner with HTML editors, but I'm intermediate with actual HTML code. For several years, I've been creating webpages by hand, WITHOUT using an HTML editor. That means I use my prior knowledge, type the code into NotePad, and then physically open/check/edit/refresh my pages as I go.

    Since I know a lot of code (and my typing speed is 65 words per minute), I always figured this method was faster (and less frustrating) than using an editor and going to File -> Edit -> Insert -> Table -> 4 Rows, 3 Columns.

    However, building pages by hand has a lot of negatives: I can't easily detect mistakes/typos; it gets very tiring; etc. So I really NEED to learn how to use HTML editors, and I want to start with something basic.

    When I say "basic", I want something that will allow me to create DIVs, iFrames, etc. -- in WYSIWYG format. I've used the following free HTML editors, and none of them let me make DIVs in WYSIWYG format:

    • CoffeeCup HTML Editor
    • Kompozer
    • PageBreeze
    • Microsoft FrontPage 2003
    • Amaya
    • NotePad++ (as a side note, this program has so many options, I got confused/frustrated)

    I've been using tables to make my layouts for years, but I heard that's "incorrect" so I'm starting to use DIVs now. But, I'm still new to DIVs -- which means they really confuse me and I HATE THEM (? - why are there are SO MANY "float:" and "position:" rules?!! And unlike tables, DIVs don't automatically match the width of the text inside them! By default, DIVs stretch and fit the entire page width! AND, DIVs aren't any smaller than tables!!!).

    Anyway, since I'm new to DIVs, that means if I manually create them, chances are I'll get it wrong...so I have to keep checking/editing/refreshing the pages. Which is why I need a WYSIWYG DIV creator; it'd be great if I could draw a rectangle and the editor understands that, "Okay, this 'rectangle' is a DIV and she wants it in EXACTLY this spot".

    Most of the editors I listed above are free and/or so basic that I can't even add DIVs. All I can do is make a boring, one-color, one link class page. And I never saw "Insert: DIV" option anywhere, which means I'd have to type the <div> tags myself. And that's not saving me any time.

    So, that's my dilemma. I REALLY need to start using HTML editors, preferably one that's free, WYSIWYG, lets me "draw" DIVs, and allows me to switch between Visual Mode and HTML Mode (so I can see exactly how they made the DIVs).

    If anyone has suggestions or advice, please let me know! (By the way: you CAN mention programs that aren't free. Although I'm broke, I'll write them down until I can afford to buy them!)

    Thanks in advance!

  2. #2
    Join Date
    Apr 2003
    The real reasons: "Why tables are stupid for layout"
    You don't use divs to replace tables; use semantic elements which you can style using css.
    Why would you need divs for your layout?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    <style type="text/css">
    * {margin:0;padding:0;}
    html {border-left:3em solid #f00;}
    body {
    border-top:1em solid #000;
    border-bottom:1em solid #000;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    h1 {
    <h1>Site goes here</h1>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2007
    Wow, I never really thought about modifying the page borders; I just assumed I needed to use DIVs. I saw a lot of "free template" websites use DIVs (so I figured I needed DIVs for this project too)...but maybe they used DIVs because their templates also had images in them?

    Anyway, thanks for the code; I appreciate it! But it also raises some questions:

    1) I played around with the code, and I was wondering: why does the DOC Type affect the borders? Whenever I removed it, the borders changed shape, from a perfect rectangle to a quadrilateral. o_O

    2) What does the * mean? And what's the difference between html{} and body{}? I thought they were basically the same thing...

    3) How did you create this code? Did you type it from memory, or use a program like Dreamweaver?

    4) On a slightly different topic: how can I edit templates, like this one, and this one here? Would simple editors (such as Nvu or CoffeeCup) only let me change the default, "filler" text...or can they let me modify the actual template (change the background colors, image colors, and even add/replace DIVs and images)?

    Sorry if my questions seem...dumb. But I learned how to make websites (between 1999-2002) from HTML Goodies, which I think was very "incorrect" (and probably obsolete) at the time. Back then, HTML Goodies basically said all I really needed were < html > tags. Other tags -- like <body>, <title>, etc. -- didn't really matter.

    HTML Goodies also "ignored" (or rather, "failed to explain") other HTML elements such as DIVs. And I didn't even know about DOC Types, and different META tags, until a year or two ago. =\

    I have so much to learn. *sigh*
    Last edited by just_bri; 03-07-2009 at 05:47 PM.

  4. #4
    Join Date
    Nov 2002
    Baltimore, Maryland
    A couple of things:

    The situation with browsers has been in a mess for some years. Actually, the problem is with one browser, Microsoft Internet Explorer. By default it follows its own set of rules. To make it follow the real rules you need a proper doctype. Or put a different way, browsers have a "legacy mode" and a "standards compliant" mode and the doctype is the switch.

    The asterisk typically matches all elements. See http://www.w3.org/TR/CSS2/selector.html . HTML and BODY end up meaning pretty much the same thing.

    The template is pretty easy to memorize, though you don't need the HTML, HEAD or BODY tags as they are assumed. To save typing, though, I use a template saved somewhere. Do not, upon pain of death and for damage to your immortal soul use Dreamweaver. Aside from generating miserable HTML it forces you to think wrongly about your page. You want to start by thinking about the content, marking up the meaning and parts of the document, and then laying the design on top with CSS.

    Stay far away from HTML Goodies. They have a well earned reputation for incorrect, incomplete and misleading information. You can find an OK source at http://www.w3schools.com/ . They're no substitute for the actual specifications but wen I can't find the source I often just go there.

    Read, mark, learn and inwardly digest:
    Last edited by Charles; 03-07-2009 at 06:14 PM.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  5. #5
    Join Date
    Apr 2003
    1) The difference is Standards and Quirks mode

    3) I hand code in HTML-Kit. Chose an editor you are comfortable with.

    4) All templates can be edited in any html editor.

    Learn about css; this is the basis to layout and styling.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Jul 2004
    Reading, UK.
    Quote Originally Posted by Charles View Post
    ... Do not, upon pain of death and for damage to your immortal soul use Dreamweaver. Aside from generating miserable HTML it forces you to think wrongly about your page. You want to start by thinking about the content, marking up the meaning and parts of the document, and then laying the design on top with CSS...
    You surprise me with this comment!

    Admitidly I don't use the push button shortcuts to create elements around the page, as like the OP, I started off in notepad too, and so spend most of my time with two screens, one in the raw code, and the other with the preview window open so I can pick up slight typos quickly (and it makes my tags nicely colour coded in the source code page too).

    I also now very much focus on using the html for the content (ie h1, h2, p, img, .. for purely that), and then use the css for styling, so do develop in the 'right way', even with Dreamweaver.

    In particular for me, there's the great 'find and replace' for the source code when I want to make site wide changes, or across selected parts of the site, easy checking for orphaned links/pages, and a big bunch of other nice stuff like ftp file synchronisation, closing my tags for me automatically if I want it to, etc ...

    I tend to think of coding div tags, in a similar way of layout for tables as such (ie breaking up the page into cells, and then naming them with id= and class= attributes). It also then means I can significantly change the design layouts, colours, etc. with just a single file change of the .css file, and write different pages for the design to work on the web, when they print, and for mobile phones (although this doesn't work quite as I expected it too, as mobiles don't seem to always support the relevant stylesheet, preferring to pretend to be a full frame browser instead).

    http://www.csszengarden.com/ was my biggest inspiration to taking this route though, and I love where it's guided me.

    It'll probably take you a while to get your head around the 'new way', but once you do, I'm sure it'll take you a lot futher than tables ever could.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.10303 seconds
  • Memory Usage 2,907KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates