We help IT Professionals succeed at work.
Get Started

Designing Web Structure

78 Views
1 Endorsement
Last Modified: 2015-12-13
Dear experts,

After I reviewed some basic website structure design, I came up with these two solutions just not sure which one to go by or there are other better methods out there.

Solution 1:
1. create these sections:
     i. header
    ii. body
    iii. footer

2. using php function include to add those components to the page:
    for example if I want to create  home, about, contact, etc.... pages
   I can do this:

    home.php
 ----------------------------------------------
    <!DOCTYPE html>
    <html>
      <head>
      </head>
     <body>
             <?php include "path/header.php";?>
             ...........
           <?php include "path/footer.php";?>
    </body>
   </html>

I can have a navigation bar in header.php and using <a> tag to navigate to each page. The downside is that for each of the page that I created, I have to make sure all pages include header.php and footer.php. The upside is that I don't need to deal with javascript or any additional code. I believe the page upload will be fast as just in plain CSS and html code with minor php code (I am excluding any other default js libraries such as bootstrap.js, respond.js, etc..... which just simply talking about my code only).

Solution 2:

I can simply create a single page look similar to the structure from solution 1 and using the home.php as example:

    home.php
 ----------------------------------------------
    <!DOCTYPE html>
    <html>
      <head>
            <script type="text/javascript" src="path/JQuery.js"></script>
      </head>
     <body>
             <div id="header_content"></div>
            <div id="body_content"></div>
           <div id="footer_content"></div>
    </body>
   </html>

I only need to create a template page for including header, footer and body content like this:
    i. header.php,
    ii. footer.php,
  iii. body.php (this body can be any content that I want to put into the body_content div by naming the file to home.php, about.php, etc.....)

I will be utilizing the JQuery AJAX to load up the page into each of the div section like this:

    1. header.php into the header_content div
    2. footer.php into the footer_content div
    3. xxx.php into the body_content div

Upside is the that I just need to maintain a single section by page as in I don't need to include header.php or footer.php to all my pages. The only thing that change is the content in the body_content div.

Downside is that there will be more code running to render the page.

I am not sure which method will be the best and used by most web designers. I wish to get an idea of what it can be done and if there are other methods out there. Thanks.
Comment
Watch Question
Fixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
This problem has been solved!
Unlock 2 Answers and 6 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE