SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to see the structure of html "live"?

    I want to re-design the site which consists of tables. How can I see the structure of html “live” - like in a browser but with indicated tables? Does any software (maybe a browser) gives such tool that will be easy to indicate each cell and/or table?
    thanks,
    snecz
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be using Firefox. Then install the add-ons: Web Developer Toolbar and Firebug.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to view the structure so that you can replicate that structure using divs or whatever, then the result will probably be just as bad as the tables.

    What you should concentrate on is looking at the way the site is presented and rewriting the content semantically to reflect that. Then you can style that content to mimic the look. Done properly, the page structure would most likely have little resemblance to the table version.

    As drhowarddrfine has noted above, the Web Developer Tollbar would be useful for working out the current sizes of various parts of the page.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the built-in 'Debug with outline' and 'Show structural elements' user style sheets in Opera can also be immensely helpful to show the structure visually.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Amaya or web developer toolbar

    Download Amaya, its the w3c browser and editor. Go in View>Show structure. You will see a tree like structure of your webpage's code.

    Or download the web developer toolbar for Firefox, its an addon. Go in Outline>. And there's a list of options to outline block elements, custom elements, tables etc.

    Enjoy
    Cheers from Starshine

  6. #6
    SitePoint Evangelist snecz's Avatar
    Join Date
    Mar 2007
    Location
    Warsaw, Poland
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all of you
    I've installed Web Developer Toolbar in Firefox. It looks nice.
    As AutisticCuckoo wrote there's similar tool in Opera. I'm going to check this.
    I've also installed Amaya.
    Now I've to decide which one is the best for me.

    Actually the problem is that the site I have to re-design is online shop. It consits of tables and for sure I'm not going to change it.
    All I will do is changing the style sheet so it will look better.
    I've not rebuilded the sites like this before so I'm a little bit scary.
    Wish me luck.

    BTW, do you have any good advice for such project?
    Warsaw - the city that survived its own death.
    EMM8 - Profesjonalne Strony Internetowe
    Projektowanie Stron WWW


Bookmarks

Posting Permissions

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