Step by Step Design Guide
You can find detailed instructions for installing PanPage and creating websites in the PanPage Design Guide but this page gives you a brief idea of what's involved in building your own website design, from scratch with PanPage.
Getting Started
You can run PanPage on both Linux and Windows servers that...
- Support PHP (v5.x) and MySQL (v5.x)
- Have the ionCube PHP Loader installed (almost all commercial Linux hosts do)
- Allow PHP to create and delete files (eg. as CGI/FastCGI).
Obviously the first thing you need to do is download PanPage and install it on your server, either localhost or a live domain. The latter needs a licence.
You'll then need to create a MySQL database (usually has to be done with the host control panel) and configure PanPage to use it by editing a few entries in the PanPage configuration file.
Then you're ready to run PanPage for the first time when it will create the database tables for your website content. PanPage includes a very minimal website theme as part of the installation so you can check that things are working correctly. Note that you'll need a standards compliant browser or IE8+ to run PanPage but the websites you create can run on anything back to IE6 if you're careful with your CSS!
Building a Website
You can download an oven-ready theme for your PanPage website or you can start from scratch: design your website graphically and code up in HTML & CSS with whatever tools you normally use.
Replace the following parts of your HTML page with PHP calls to PanPage...- Add the PanPage initialisation code to the top of your page.
- In the head section, replace the title, meta-description and meta-keywords tags, with a call to the RenderHeadTags() function.
- Replace the navigation menu code with a call to RenderNavMain().
- Replace the page content with a call to the page Render() function
- Replace the footer with a call to RenderFooter().
You can copy and paste the tags for these function calls from the oven ready resources page along with a couple more lines to support drop down navigation menus.
What you have now is an skeleton web page which, if you rename it to 'index.php', will display home page content from PanPage. You should also save a copy of this skeleton file as '_standard.php' in the theme folder so that PanPage can use it to create new page files.
Adding Content
Fill up your empty home page by editing it in PanPage. Add Columns and Items and fill them with text, pictures, tables, lists, links, videos, embedded objects... all the stuff you fill your web pages with. Most things can be included in standard PanPage Items but for some active content, like slideshows, scrolling ticker tapes and folding 'faq' paragraphs, PanPage provides specific types of items. There's also a Raw/HTML item that lets you embed HTML, Javascript and even PHP code, directly into a PanPage website. Use this for YouTube videos, Google maps, Facebook and Twitter widgets etc.
Styling Your Pages - CSS
The appearance and layout of your PanPage website is in your hands as it depends almost completely on your HTML skeleton and CSS rules. PanPage has very little to do with the appearance of the site but it does provide 'hooks' for your CSS just as you do in your own hand coded HTML.
Navigation
The head section tags don't need styling so the first PanPage generated content you'll need to style will likely be the navigation menu. By default PanPage creates a main navigation menu as an unordered list (<ul id='nav'>... </ul>) of links, tho you can use other arrangements if you wish.
So your nav menu styling will be based around CSS rules like this...
#nav { float:left; clear:left; color:#fff; background-color:#999; }
#nav li {... }
#nav a {... }
If your site requires drop down menus these will also be created using unordered lists, this time with a class name (since there maybe several of them) so your drop down menus can be styled similarly
Page Content
PanPage supports a column structure for page content very similar to that found in word processors, tho you can design in horizontal layers rather than vertical columns if you prefer. You can divide your page into full, half, third and quarter width columns, break part way down and split the columns differently and do that as often as you like. PanPage creates each column as a <div> and gives it a class attribute by which you can style it. Your CSS will therefore look something like this...
.colFullWidth { float:left; width:960px; margin:0 12px; clear:left; }
.colLeftof2 { float:left; width:456px; margin:0 12px; clear:left; }
.colRightof2 { float:right; width:456px; margin:0 12px; }
etc. etc.
Like most things in PanPage the columns and their class names are under your control - configure them in your style sheet and enter their class names into PanPage's configuration file so it can offer them in menus.
More Pages
Once you have got your home page and CSS working to your satisfaction you can save a copy of the skeleton page file as a template for PanPage to use when creating new pages. In fact you can save several template files if your web site design has pages with wildly different layouts.
Each time you create a new page PanPage makes a copy of the template file and names it accordingly. This skeleton page file means that PanPage websites are compatible with most website tools, like Google Analytics, and are search engine friendly right out of the box.
Interchangeable Themes
You can take your design to the next level and turn it into a website 'theme' compatible with those available on this website. The process does require a little PHP coding but nothing too complex and there are plenty of examples here to help.
Turning your design into a theme has a number of advantages...
- It removes code common to all pages into a single PHP file making future updates MUCH easier. Page files become almost trivial.
- It makes your site compatible with a range of PanPage themes which means you can use the library of oven ready resource available here.
- It makes design of future websites quicker and easier as you can start from a known working layout.
