Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to create a multipage website

    I am a beginner seeking some help. I am trying to create a informational website, with a few pages being just information about a certain topic, and then there would be one page dedicated to just a chatroom where users can instant chat with other users about this certain topic.
    I am trying to make it as simple as possible.

    So page 1 (main page) = Description of the website, and the topic X
    page 2 (chatroom page) = Chatroom where users can chat about topic X
    page 3 (information page) = page where users can read information about topix X
    page 4 (article/blog page) = page with many articles/links to other websites/videos/articles about topic X

    Navigation bar on the top = navigation bar where user can easily access all 4 of these pages.

    I was hoping someone can maybe lead me towards the direction, I want to make it as simple as possible. Purely html/css and javascript or something for the chatroom? I am not so sure once again.

    Thank you

    Best

    Eyal Cohen

  • #2
    Regular Coder Linux_Sage's Avatar
    Join Date
    Mar 2014
    Location
    Sterling,VA
    Posts
    106
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Sounds like Content is involved so any old free CMS like Wordpress, Drupal, Joomla, etc. ought to do. Those are fairly easy to setup. There is plenty of info out there so Google will be your friend.

  • #3
    New Coder
    Join Date
    Apr 2014
    Location
    Liverpool
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As mentioned above, you need a CMS, either custom or open source.

    WordPress would be my suggestion. It's very easy to use and has many plugins available to enhance your site with ease and little to no experience necessary.

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Location
    Yuba City, CA
    Posts
    9
    Thanks
    0
    Thanked 3 Times in 3 Posts
    It sounds like you need a dynamic multipage website. While a CMS would be good for a blog, as the others have suggested; I personally find them dreadful and bloated to use for the main portion of a site. Actually, most of the time I won't even use a CMS. Instead, I'll often code my own blog engine or just link to a tumblr page. Anyways, there a couple ways to make your site dynamic.

    The first is to use CSS pseudo-classes to hide and show content, e.g. wrapped in <span> or <div>, that sits above the whole page. The pseudo-classes I normally use are :target or :checked, though there may be others I'm unfamiliar with. When one of these specific states are reached, you can then set visibility: visible; or opacity: 1;. The un-targeted or un-checked should have visibility: hidden; or opacity: 0; and, additionally, z-index: 2; so that it sits above everything but isn't showing. The :target pseudo-class has the advantage of keeping history with URL fragments. For example, http://www.codingforums.com/index.htm#forums.

    The second method is just like the first, but instead of using CSS, you'll use jQuery (with hide() and show()) or even just plain JavaScript (with click event listeners and the DOM style object). The kicker here is that you must have a fallback for people that disable JavaScript. Since your site functions on JavaScript, you'll need to tell them nicely that they need to enable it to use your site. According to Yahoo! (2010), the percentage of people that have JavaScript disabled are the United States at 2.06%, United Kingdom at 1.29%, France at 1.46%, Spain at 1.28%, and Brazil at 0.26%. That may not seem like much, but consider that small percentages are large for large samples.

    Finally, the third method is to use a server-side language like PHP to dynamically load HTML content into an existing page.
    PHP Code:
    <?php $_GET[''] = null$page $_GET['page']; ?>
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <title>PHP-based Dynamic Multipage Site</title>
        <meta charset="utf-8" />
    </head>
    <body>

    <nav>
        <a href="index.php?page=about">About</a> |
        <a href="index.php?page=topics">Topics</a> |
        <a href="index.php?page=chat">Chatroom</a> |
        <a href="index.php?page=blog">Blog</a>
    </nav>

    <section>
    <?php // Dynamically Loaded Content
    switch($page) {
        case 
    'about':
            include(
    'page/about.htm');
            break;
        case 
    'topics':
            include(
    'page/topics.htm');
            break;
        case 
    'chat':
            include(
    'page/chat.htm');
            break;
        case 
    'blog':
            include(
    'page/blog.php');
            break;
        default:
            include(
    'page/about.htm');
            break;
    }
    ?>
    </section>

    </body>
    </html>
    What's happening here is that a value is stored in the variable $page when the URL parameter page is set. For example, the URL http://www.codingforums.com/index.php?page=forum would set the value forum into $page. Then, we include links to those URLs and a section with a PHP switch statement on the variable $page. What this does is include a document when a $page matches a certain variable. This way, only part of the page reloads.

  • #5
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Antonius View Post
    It sounds like you need a dynamic multipage website. While a CMS would be good for a blog, as the others have suggested; I personally find them dreadful and bloated to use for the main portion of a site. Actually, most of the time I won't even use a CMS. Instead, I'll often code my own blog engine or just link to a tumblr page. Anyways, there a couple ways to make your site dynamic.

    The first is to use CSS pseudo-classes to hide and show content, e.g. wrapped in <span> or <div>, that sits above the whole page. The pseudo-classes I normally use are :target or :checked, though there may be others I'm unfamiliar with. When one of these specific states are reached, you can then set visibility: visible; or opacity: 1;. The un-targeted or un-checked should have visibility: hidden; or opacity: 0; and, additionally, z-index: 2; so that it sits above everything but isn't showing. The :target pseudo-class has the advantage of keeping history with URL fragments. For example, http://www.codingforums.com/index.htm#forums.

    The second method is just like the first, but instead of using CSS, you'll use jQuery (with hide() and show()) or even just plain JavaScript (with click event listeners and the DOM style object). The kicker here is that you must have a fallback for people that disable JavaScript. Since your site functions on JavaScript, you'll need to tell them nicely that they need to enable it to use your site. According to Yahoo! (2010), the percentage of people that have JavaScript disabled are the United States at 2.06%, United Kingdom at 1.29%, France at 1.46%, Spain at 1.28%, and Brazil at 0.26%. That may not seem like much, but consider that small percentages are large for large samples.

    Finally, the third method is to use a server-side language like PHP to dynamically load HTML content into an existing page.
    PHP Code:
    <?php $_GET[''] = null$page $_GET['page']; ?>
    <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <title>PHP-based Dynamic Multipage Site</title>
        <meta charset="utf-8" />
    </head>
    <body>

    <nav>
        <a href="index.php?page=about">About</a> |
        <a href="index.php?page=topics">Topics</a> |
        <a href="index.php?page=chat">Chatroom</a> |
        <a href="index.php?page=blog">Blog</a>
    </nav>

    <section>
    <?php // Dynamically Loaded Content
    switch($page) {
        case 
    'about':
            include(
    'page/about.htm');
            break;
        case 
    'topics':
            include(
    'page/topics.htm');
            break;
        case 
    'chat':
            include(
    'page/chat.htm');
            break;
        case 
    'blog':
            include(
    'page/blog.php');
            break;
        default:
            include(
    'page/about.htm');
            break;
    }
    ?>
    </section>

    </body>
    </html>
    What's happening here is that a value is stored in the variable $page when the URL parameter page is set. For example, the URL http://www.codingforums.com/index.php?page=forum would set the value forum into $page. Then, we include links to those URLs and a section with a PHP switch statement on the variable $page. What this does is include a document when a $page matches a certain variable. This way, only part of the page reloads.
    I think I prefer the PHP method. Since I am a beginner, this is a project for a class, although I dont need to include a chatroom for the project, I eventually after the class is over, want to add a chatroom and turn it into an actual website. If you have time of course, can I email you or get more help from you. I am trying to create a website about lucid dreaming.


  •  

    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
    •