www.webdeveloper.com
Results 1 to 4 of 4

Thread: I need to create a simple help page for my website.

  1. #1
    Join Date
    Oct 2013
    Posts
    4

    I need to create a simple help page for my website.

    I need to create a simple help page for my website something like this http://www.livetecs.com/timelivehelp/ . Please help me how to start or do I get any direct code?

    Thanks in advance

  2. #2
    Join Date
    Mar 2012
    Posts
    1,344
    The answer depends on:

    1. How you have developed your site? E.g. If you have used a CMS (like WordPress) you are largely limited to what they provide.

    2. How sophisticated a help facility you need? The most complex part of the implementation is likely to be the menu on the left-hand side. If you only need it to be one or two levels, you can hand code that in HTML/CSS, but if you need a multi-level menu then you probably need to use JavaScript. There are plenty of pre-written menu scripts available. Either way, the main text area on the right can be an IFrame in which the relevant sub-page(s) is/are displayed. E.g.

    A demo page with an iframe:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="iso-8859-1">
    <title>IFrame Demo</title>
    </head>
    <body>
    <div id="header" style="position:absolute;left:0px; top:0px; right:0px; height:60px; color:#FFF;background-color:#333;">
    <h1>Menu-driven IFrame Demo</h1>
    </div>
    <div id="menu" style="position:absolute;left:0px; top:60px; width:240px; bottom:0px; color:#000;background-color:#EEE;">
    <ul style="list-style: none;">
    <li><a href="subpages/topic1.html" target="iframe1">topic 1</a></li>
    <li><a href="subpages/topic2.html" target="iframe1">topic 2</a></li>
    <li><a href="subpages/topic3.html" target="iframe1">topic 3</a></li>
    <li><a href="subpages/topic4.html" target="iframe1">topic 4</a></li>
    <ul>
    </div>
    
    <div style="position:absolute;left:240px; top:60px; right:0px; bottom:0px;">
    <iframe name="iframe1" src="subpages/default.html" width="100%" height="100%" scrolling="yes"><br>This page uses an Iframe.<br></iframe>
    </div>
    
    </body>
    </html>
    A specimen subpage (put in the "/subpages/" sub-directory):

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="iso-8859-1">
    <title>Default page</title>
    </head>
    <body>
    <h1>Contents</h1>
    <p>
    This is the default page.
    </p>
    </body>
    </html>
    Note:

    1. This demo assumes that the "/subpages/" sub-directory contains a default page called "default.html" and four topic pages called "topic1.html" etc...

    2. One problem with this use of sub-pages is that, by default, web bots will see and index the sub-pages separate from the container page. A way round this is to put the sub-pages in a sub-directory and set up a robots.txt file with an instruction for bots not to index the contents of that sub-directory. Google "robots.txt" for instructions on how to set that up. By the way, this techniques is NOT suitable for the main body of a site, as it hides the content from the rating bots so will not score well.

  3. #3
    Join Date
    Oct 2013
    Posts
    4
    I need as same as it. And website is custom made. Is there pre-code which we can get in google?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,344
    Quote Originally Posted by skirankumar90 View Post
    I need as same as it. And website is custom made. Is there pre-code which we can get in google?
    If your site was custom made for you then you are largely in the hands of the people who wrote it. Also, I write all my own code, so I do not know whether there are pre-coded complete examples on Google.

    In my opinion, even a newbie should be able to adapt my code to their needs with the aid of good HTML/CSS references like W3Schools or the WDG manuals. That way you get to understand what your code is doing, and how to fix it if it goes wrong. However, amending someone-else's code is far more demanding because the learning curve is so much steeper. That is why, in my example I've focussed on the core functionality. So it should be clearer what does what. Whereas a complete example may be far more difficult to grasp as there may be enhancements like graphic icons included in the menu etc... These can be added once the basic code is understood.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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



Recent Articles