This post follows on from Part 1 - Design. To save you the effort of reading it all, it basically describes how I get my template page created and coded with CSS.
The next step in the process is to create the a template PHP page. As many elements stay the same on each page (such as layout elements - headers, css links, etc), and I don't add some stuff into till later (Database connections), I don't want to duplicate effort by adding and editing code on each page I create. So I make full use of PHP's 'include' method.
Include files allow us to have some code written in a file (PHP, HTML, JavaScript) and then reference that code when we need to. For example, as we have the same header on almost every page, we can place the code that creates the header into a separate file, save it as, say, header.php, and then just reference it on each page. Then if we want to make a change to the header we can make the change in the header.php file, and the change is then replicated to all pages that use that file.
In this project, I make use of 3 include files. To start with, I copied all the code in template.html into a new file, and saved it as template.php. I then selected the code from the top of the document, up to the first point where the code will be different in each page, and copy this to a new file. In the case of this project, I copied all the code from the very top of the page up to the <title> tag. The new file was saved as 'header1.php'. The code in template.php that was selected and copied is replaced with code to call the contents of the file. The code to call an include file is:
My template.php page then includes the first part of the code that needs to be unique on each page - <title>Template</title>. Then the process was repeated for the next section of code that stays the same, and saved as 'header2.php'. In this case, I took everything up to where the side menu code is. I could have included the menu as well, but I wanted the current page menu link to be styled slightly differently to the rest of the menu. I'll talk about the menu system in a future post.
After the menu, I have the div that contains the page content - the middle part of the web page. I add comments to make this really obvious as to where to add my code, and leave plenty of white space. Then close the div, repeat the process of copying the code from the bottom of the page into another include file, saved as 'footer.php'.
This leaves us with a template page which looks like:
This gives us a fairly clean starting point for each page we create from the template page.
For the sake of completion, here's the code for each of the include files, up to this point:
header1.php
header2.php
footer.php
It's worth mentioning, when a PHP file is created in this way, it's the web server that sorts out, or 'parses' the various files to create the HTML code sent to the user. I remember using dreamweaver years back, and that had the option to mark sections off as locked. Changing those sections then went through each file in the project and changed the code in them. That doesn't happen here.
The template page is then saved, and used as the starting point for most subsequent pages in the project.
Next post.... CSS Menu.... coming soon :)
No comments:
Post a Comment