Home arrow PHP arrow Page 3 - The Design of an Intranet Application Framework

Design Code/Templates - PHP

This article is the second part of a series on intranet application frameworks. Now that we know what the application framework is all about and how it is going to work in an intranet environment, we are going to look at the overall structure and design of the intranet and the applications. Keep reading to see how this will be done.

TABLE OF CONTENTS:
  1. The Design of an Intranet Application Framework
  2. Intranet File Structure
  3. Design Code/Templates
  4. More on Templates
By: Chris Neeman
Rating: starstarstarstarstar / 6
July 25, 2007

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

As you can see from the screen shot, I've not exactly exhausted the budget on the design of the page, but it is done neatly and presents the user with clear choices. This page provides the user with links to all the other applications in the intranet, through the navigation panel on the left.  The neat presentation of the page is caused by the use of CSS. The code for it is below:

/* CSS Document */
body {
   background-color: #FFFFFF;
   margin:0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 24px;
}

a {
   color: #cc0000;
   text-decoration:none;
   font-weight:bold;
}

a:hover {
   color: #990000;
   text-decoration:underline;
}

h1 {
   color: #006699;
   font-size: 14px;
   font-weight: bold;
   margin: 0px 0px 5px 0px;
   border-bottom: 2px solid #006699;
}

h2 {
   color: #006699;
   font-size: 13px;
   font-weight: bold;
   margin: 0px 0px 0px 0px;
}

td {
   font-size: 12px;
   color: #333333;
}

.bar_central {
   background-image:  url("img/bg_central.png");
   height: 28px;
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 3px;
   background-repeat: repeat-x;
}

.bar_central a {
   color: #FFFFFF;
   font-size: 12px;
   text-decoration: none;
}

.bar_central a:hover {
   text-decoration: underline;
}

.navhead_text {
   font-size: 12px;
   color: #FFFFFF;
   padding-bottom: 2px;
   padding-left: 10px;
   background-repeat: repeat-x;
}

.navblock {
   border-left: 1px solid #006699;
   border-right: 1px solid #006699;
   border-bottom: 1px solid #CCCCCC;
   background-image: url("img/bg_nav.png");
   background-repeat: repeat-y;
   padding-left: 5px;
   height: 23px;
   color: #006699;
   text-align: left;
}

.navblock a {
   text-decoration: none;
   color: #006699;
}

.navblock a:hover {
   text-decoration: none;
   color: #FE9900;
}

.tooltip {
   color: #006699;
   font-style: italic;
   font-size: 10px;
}

.tooltipblack {
   color: #333333;
   font-style: italic;
   font-size: 10px;
}

.navholder {
   padding-left: 8px;
   padding-top: 20px;
}

.contentholder {
   padding-top: 20px;
}

.bottom {
   border-top: 1px solid #999999;
   padding-top: 10px;
   color: #ccc;
}

.subbox {
   background-color: #F0F0f0;
   border-left: 1px solid #CCCCCC;
   padding-left: 7px;
   padding-right: 7px;
   padding-top: 4px;
   border-right: 1px solid #CCCCCC;
}

#mainarea {
   margin-top: 15px;
}

.dottedline {
   background-image:  url("img/bg_horizdots.gif");
   background-repeat: repeat-x;
   padding: 0px;
   height: 1px;
}

.input100 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 100px;
   height: 20px;
}

.input200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 200px;
   height: 20px;
}

.input300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding-left: 4px;
   padding-right: 4px;
   width: 300px;
   height: 20px;
}

.textarea200 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 200px;
   height: 125px;
}

.textarea300 {
   border: 1px solid #999999;
   font-family: Tahoma, Arial, Verdana;
   font-size: 11px;
   color: #333333;
   background-color: #FFFFFF;
   padding: 4px;
   width: 300px;
   height: 250px;
}

.tableheader1 {
   background-color: #006699;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading1a {
   background-color: #B1D3ED;
}

.tableshading1b {
   background-color: #D0E2F2;
}

.tableheader2 {
   background-color: #CC0000;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading2a {
   background-color: #D59299;
}

.tableshading2b {
   background-color: #DBB5BC;
}

.tableheader3 {
   background-color: #555555;
   color: #FFFFFF;
   font-family: Tahoma, Arial, Verdana;
   font-weight: bold;
   font-size: 13px;
}

.tableshading3a {
   background-color: #DDDDDD;
}

.tableshading3b {
   background-color: #EEEEEE;
}

.headertxt{
   font-size:24px;
  
color:#FFFFFF;
  
background-color:#669999;
}

.copyright{
  
font-family:Tahoma, Arial, Verdana;
  
text-align:right;
  
font-size:11px;
}

.smallheader{
  
background-color:#669999;
  
font-weight:bold;
}

.tdr{
  
background-color:#a4c2c2;
}

.logo {
   font:19px times new roman;
   color: #333300;
   letter-spacing:.4em;
   font-weight:bold;
}

/**divs*/

#msgblock{
   background-color:#CCCCCC;
   border: 1px solid #ccc;
  
left: 659px;
   top: 7px;
   height: 342px;
   width:799px;
  
overflow:scroll;
}

This style sheet is responsible for making all the pages in the intranet look smooth and neat. If you want to make a change in a particular part of the site, you just make it here and all the pages linked to it will apply the changes. You can see the advantage in this. Instead of going to each and every page on a site and making fixes, you just do it once and the changes will go throughout the site.



 
 
>>> More PHP Articles          >>> More By Chris Neeman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: