route66 : Design 7 « Templates « HTML / CSS

HTML / CSS » Templates » Design 7 
route66
  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Route 66 CMS</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html,body {
  margin:0;padding:0
}

body {
  background: #7a7a7a url(route66-images/bg.pngrepeat;
  color: #363636;
  font: 13px/20px verdana,arial,sans-serif;
  text-align: center;
}

div#header-h1 {
  font-size: 31px;
  font-weight: normal;
  letter-spacing: 4px;
  margin: 0;
  padding: 20px 0 60px 20px;
}

div#header-{
  background: #363636 url(route66-images/bg_header.jpgno-repeat right;
  color: #ccc;
}

div#container {
  text-align:  left;
}

div#maintext {
  margin: 20px;
}

div#leftcolumn {
  background:#fff;
}

div#footer {
  background: #363636 url(route66-images/bg_footer.jpgno-repeat 00%;
  color: #fff;
  margin: 0;
  font-size: 12px;
  padding: 15px 0 5px 0;
  text-align: center;
  clear: both;
  width: 100%;
}

div#container {
  background: #a3a3a3 url(route66-images/bg_content.jpgrepeat-y;
  border-right: 2px solid #363636;
  border-left: 2px solid #363636;
  width: 960px; 
  margin: auto;
}

div#content {
  border-top: 2px solid #363636;
  float: left;
  width: 760px;
}

div#leftcolumn {
  border-top: 2px solid #363636;
  float: right;
  width: 200px;
}

/* BEGIN NAVIGATION */

#menu {
  padding-left: 0;
  margin: 0;
  width: 200px;
}

#menu li {
  list-style: none; 
  margin: 0;
  padding: 0;
}

#menu li a

  font-size: 11px;
  background: #6c6c6c url(route66-images/nav_arrow_off.gifno-repeat right;
  color: #fff;
  display: block;
  width: 100%;
  line-height: 2.6em;
  border-top: 1px solid #a3a3a3;
  border-bottom: 2px solid #363636;
  outline:none;
  text-decoration: none;
  text-indent: 10px;
  text-transform: uppercase;
}

#menu li a:hover {
  color: #363636;
  background: #ccc url(route66-images/nav_arrow_over.gifno-repeat right;
}

/* END NAVIGATION */

/* BEGIN MORE SITE STYLES */

{
color: #363636;
  font-weight: bold;
  outline: none;
  text-decoration: underline;
}

a:hover {
  color: #6c6c6c;
  text-decoration: none;
}

#footer a {
  color: #fff;
}

#footer a:hover {
  color: #f1f1f1;
  text-decoration: none;
}

h1,h2,h3 {
  font-size: large;
  letter-spacing: 1px;
}

h4,h5,h6 {
  font-size: medium;
  letter-spacing: 1px;
  margin: 10px 0;
}

h1,h2,h3,h4,h5,h6 {
  display: block;
  clear: both;
}

blockquote {
  margin-left: 25px; 
  margin-right: 0;
  padding: 0;
  font: bold 14px/20px verdana,arial,sans-serif;
}

.pagename {
  background-color: #a3a3a3;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 5px 4px 5px;
}

.headline {
  background-color: #6c6c6c;
  border-top: 1px solid #a3a3a3; 
  border-right: 2px solid #363636;
  border-bottom: 2px solid #363636;
  border-left: 1px solid #a3a3a3;
  font-size: 21px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 35px;
  margin: 0 0 0 25px;
  padding: 3px 5px 3px 5px;
}

html .headline {padding: 2px 5px 3px 5px;}

.infobox {
  font-size: 12px;
  background: url(route66-images/bg_infobox.gifno-repeat 00%;
  border-bottom: 2px solid #363636;
  padding: 5px 10px 5px 10px;
}

.infobox h4 {
  font-size: small;
  margin: 0;
}

.infobox p {
  padding: 0;
}

div.scrollbox {
  border: 1px solid #363636;
  background-color: #fff;
  height: 300px;
  margin: 10px 0 10px 0;
  padding: 0 10px 0 10px;
  overflow: auto;
  width: 695px;
}

code {
  display: block;
  border: 1px solid #363636;
  background-color: #fff;
  padding: 5px;
  margin: 10px 0 10px 0;
}

pre {
  margin: 0;
  padding: 0;
}

strong, b {
  color: #b70005;
}

img {
  border: 0;
  vertical-align: middle;
}

.imgleft 
  float: left; 
  margin: 5px 10px 0 0;
  border-top: 1px solid #ccc; 
  border-right: 2px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  border-left: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
}

.imgright 
  line-height: normal;
  float: right; 
  margin: 5px 0 0 10px;
  border-top: 1px solid #ccc; 
  border-right: 2px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  border-left: 1px solid #ccc;
  background-color: #fff;
  padding: 5px;
}

hr {
  clear: both; 
  border: 0
  height: 1px; 
  color:#a3a3a3; 
  background-color: #a3a3a3;
  margin: 0;
}

.clear {
  clear: both;
}

form 
  width: 480px;
  margin-top: 20px;
}

#contactleft 
  width: 180px; 
  float: left; 
}

#contactright 
  float: right; 
  width: 300px; 
}

.input 
  border-top: 1px solid #ccc; 
  border-right: 2px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  border-left: 1px solid #ccc;
  width: 160px; 
}

.button 
  border: 1px solid #6c6c6c; 
  background-color: #6c6c6c; 
  color: #fff; 
  font-weight: bold; padding: 2px;
}

textarea 
  border-top: 1px solid #ccc; 
  border-right: 2px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  border-left: 1px solid #ccc;
  font-family: verdana, arial, helvetica, sans-serif; 
  font-size: 12px; 
  line-height: 20px; 
  width: 270px; 
  height: 190px; 
}

 .thumbnail {
  float: left;
  width: 80px;
  height: 60px;
  border-top: 1px solid #ccc; 
  border-right: 2px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  border-left: 1px solid #ccc;
  background-color: #fff;
  margin: 10px 20px 10px 0;
  padding: 5px;
}

a.gallery, a.gallery:visited {
  position:relative; 
  z-index:1;
}
a.gallery b {
  position:absolute;
  visibility:hidden;
  width:320px;
  height:0;
  border-top: 1px solid #ccc; 
  border-right: 3px solid #a3a3a3;
  border-bottom: 3px solid #a3a3a3;
  border-left: 1px solid #ccc;
  background-color: #fff;
  padding: 10px;
  left:0;
  top:-150px;
}

a.gallery:hover {
  text-decoration:none; 
  border:0
  z-index:1000;
}

a.gallery:hover b {
  visibility: visible;
  height: 240px;
  cursor: pointer;
  z-index:500
}

a.gallery:hover b img {
  border:0;
}

/* END MORE SITE STYLES */

</style>


</head>
<body>
<!-- ##### BEGIN LAYOUT ##### -->
<div id="container">
  <!-- ##### BEGIN header-##### -->
  <div id="header">
    <h1>Route 66</h1>
  </div>
  <!-- ##### END header-##### -->
  <div id="wrapper">
    <!-- ##### BEGIN CONTENT ##### -->
    <div id="content">
      <div id="maintext"> <span class="pagename">Create a Simple CMS</span> <br />
        <span class="headline">How to create a simple CMS with PHP</span>
        <blockquote>If you're in need of a <strong>CMS</strong> (Content Management Systemfor small sites based on PHP and flat files (*.txt), just follow the <strong>steps</strong> below to create a <strong>really simple</strong> one within <strong>a few minutes</strong>.</blockquote>
        <h4>Requirements:</h4>
        <ul>
          <li>A custom-made <a href="http://www.free-css.com/">website template</a> or a self-made one</li>
          <li>A <a href="http://www.free-css.com/">source code editor</a></li>
          <li><a href="http://www.free-css.com/">PHP</a> installed on your server</li>
        </ul>
        <h4>Step 1:</h4>
        <p>Rename your index.html/index.htm to <strong>index.php</strong> and put the code below at the very beginning of the page.</p>
        <code> &lt;?php<br />
        <br />
        /* The variable below is an array of valid pages. When you add a new page, it must be added to this array. */<br />
        <br />
        $validPages = array(<br />
        '<strong>news</strong>',<br />
        '<strong>about</strong>',<br />
        '<strong>gallery</strong>',<br />
        '<strong>links</strong>',<br />
        '<strong>contact</strong>'<br />
        );<br />
        ?&gt;<br />
        &lt;!-- HTML code begins here &nbsp;--&gt;<br />
        &lt;!DOCTYPE html PUBLIC etc... </code>
        <h4>Step 2:</h4>
        <p>Create the navigation list as shown below. Study exactly the code, how the additional pages will be created according to the array of valid pages shown in <strong>Step 1</strong>.</p>
        <code> &lt;!-- ##### BEGIN NAVIGATION ##### --&gt;<br />
        <br />
        &lt;ul id="menu"&gt;<br />
        &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href="index.php?p=<strong>news</strong>"&gt;News&lt;/a&gt;&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href="index.php?p=<strong>about</strong>"&gt;About us&lt;/a&gt;&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href="index.php?p=<strong>gallery</strong>"&gt;Gallery&lt;/a&gt;&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href="index.php?p=<strong>links</strong>"&gt;Links&lt;/a&gt;&lt;/li&gt;<br />
        &lt;li&gt;&lt;a href="index.php?p=<strong>contact</strong>"&gt;Contact&lt;/a&gt;&lt;/li&gt;<br />
        &lt;/ul&gt;<br />
        <br />
        &lt;!-- ##### END NAVIGATION ##### --&gt; </code>
        <h4>Step 3:</h4>
        <p>Copy and paste the code below, where your content goes, whereas <strong>home.txt</strong> will be the default content for the index.php.</p>
        <code> &lt;!-- ##### BEGIN CONTENT ##### --&gt;<br />
        <br />
        &lt;?php<br />
        if (isset($_GET['p']) &amp;&amp; in_array($_GET['p'], $validPages&amp;&amp; file_exists("includes/" . $_GET['p'".txt")) {<br />
        <br />
        include("includes/" . $_GET['p'".txt");<br />
        else {<br />
        <br />
        include("includes/<strong>home.txt</strong>");<br />
        }<br />
        ?&gt;<br />
        <br />
        &lt;!-- ##### END CONTENT ##### --&gt; </code>
        <h4>Step 4:</h4>
        <p>With a normal <a href="http://www.free-css.com/">source code editor</a> create your content files <strong>home.txt</strong>, <strong>about.txt</strong>, <strong>gallery.txt</strong>, <strong>links.txt</strong> and <strong>contact.txt</strong> and  store them in a folder named <strong>includes</strong>.</p>
        <p>Fill in your content in the individual *.txt files using usual HTML code and CSS for formatting, for e.g.:</p>
        <code> &lt;h1&gt;Welcome to our Homepage!&lt;/h1&gt;<br />
        <br />
        &lt;p&gt;Here goes your text...&lt;/p&gt;<br />
        <br />
        &lt;p&gt;&lt;a href="http://www.openDesigns.org"&gt;Open Designs&lt;/a&gt;&lt;/p&gt; </code>
        <h4>Step 5:</h4>
        <p>Upload the files (<strong>index.php</strong> and folder <strong>includes</strong> with the *.txt.filesto your host via <a href="http://www.free-css.com/">FTP</a> and <strong>you're done</strong>!</p>
        <p>Update the content of your sites by simply editing the individual *.txt files and upload them again.</p>
        <p>If you want more sites, edit the index.php as described in Step as well as the navigation list (Step 2)create the additional *.txt files and upload them to your server.</p>
        <h4>Tips:</h4>
        <p>For the <strong>News</strong> section in the right column you can use a simple PHP include, for e.g.:</p>
        <code> &lt;!-- ##### BEGIN NEWS ##### --&gt;<br />
        <br />
        <strong>&lt;?php include("includes/shortnews.txt"); ?&gt;</strong><br />
        <br />
        &lt;!-- ##### END NEWS ##### --&gt; </code>
        <p>Create a <strong>shortnews.txt</strong> file, fill in the content and store it as well in the <strong>includes</strong> folder on your server.</p>
        <p>If you want internal links, use e.g. HTML code like this:</p>
        <code> &lt;a href="<strong>index.php?p=news</strong>"&gt;Read more...&lt;/a&gt; </code>
        <p>If you want to expand your little CMS, use a small web-based <strong>file manager</strong> written in PHP like <a href="http://www.free-css.com/">ile Thingie</a>, in order to edit and upload files, to create new folders etc. directly on your server <strong>without FTP</strong>.</p>
        <p>With the power of PHP you can have a simple working CMS for small sites within a few minutes and a few steps, using only one page. Isn't that easy?</p>
        <h4>Credits:</h4>
        <p><a href="http://www.free-css.com/">InfernoForums</a> (Site Templating System Using PHP - Version 1)</p>
      </div>
    </div>
    <!-- ##### END CONTENT ##### -->
  </div>
  <!-- ##### BEGIN LEFT COLUMN ##### -->
  <div id="leftcolumn">
    <ul id="menu">
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="cms.html">Create a Simple CMS</a></li>
      <li><a href="contact.html">Contact Form</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="rss.html">RSS feed</a></li>
      <li><a href="page.html">Empty Page</a></li>
    </ul>
    <div class="infobox">
      <h4>News</h4>
      HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document - by denoting certain text as headings, paragraphs, lists, and so on - and to supplement that text with interactive forms, embedded images, and other objects.
      <p><a href="http://www.free-css.com/">Read more...</a></p>
    </div>
  </div>
  <!-- ##### END LEFT COLUMN ##### -->
  <!-- ##### BEGIN FOOTER ##### -->
  <div id="footer"> &copy; Copyright 2007 by Your Name | Design by <a href="http://www.wfiedler-online.de">wfiedler</a> </div>
  <!-- ##### END FOOTER ##### -->
</div>
<!-- ##### END LAYOUT ##### -->
</body>
</html>

   
    
  
Related examples in the same category
1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.