HTML Help

Re: SSI Help

sticks464 — Thu Nov 12, 2009 1:11 pm

Author: sticks464

Posted: Thu Nov 12, 2009 1:11 pm

Why don't you zip your site and send it to me so I can see the hierarchy and make corrections in the includes path.

Check your pm's.

Re: SSI Help

cmrsf1 — Thu Nov 12, 2009 10:35 am

Author: cmrsf1

Posted: Thu Nov 12, 2009 10:35 am

I've encountered a problem: I have a slide show set up on this site where all the pages for the show are in the subdirectory /Slides When applying the original index.shtml to the new /Slides/slide.shtml files, the path to the includes in the original is:
<div id="container">

<div id="content">
<div class="wrapper">

</div>
</div>
<div id="sidebar">

</div>
The browser is reading "inc/top.html" and the rest as being a subdirectory of Slides I've gone as far as making new directories and uploading all the contents to be under /Slides ie: /nic /css but I imagine that you can see what confusion this will lead to, not to mention all the extra work! Where do I make this change? I've I tried hard coding the path into each one of the slide shtml files and that doesn't work. It brings up the error message [an error occurred while processing this directive]

Thanks!

Re: SSI Help

sticks464 — Wed Nov 11, 2009 9:55 pm

Author: sticks464

Posted: Wed Nov 11, 2009 9:55 pm

Once you do css awhile it becomes pretty easy. The hard part is making the pages backward compatible, IE being the hardest. Most of the time IE6 is the hardest because of only having one IE browser (IE8 with compatibility mode). All other major browsers are pretty much up to speed supporting css rules.

I do all my sites now with some sort of templating system. Why be redundant as new pages are created? It work the fastest for me when speed is of essence.

Re: SSI Help

cmrsf1 — Wed Nov 11, 2009 5:21 pm

Author: cmrsf1

Posted: Wed Nov 11, 2009 5:21 pm

The gecko site is really nice. I particularly like the way the larger images come up.
I have done some work with open source php like Drupal, forums and e-commerce software. The advantage of those are that the framework is already in place and it's a matter of customizing and adding. I was lost on the shtml until you saved me with your template. Is there a program that you used that helped you to compile the css for my site or have you just done enough of them that you were able to do it yourself?

Re: SSI Help

sticks464 — Wed Nov 11, 2009 1:41 pm

Author: sticks464

Posted: Wed Nov 11, 2009 1:41 pm

Your welcome. Once you have a good understanding of what includes can do you may want to try templating with php (another form of includes). This enables you to use one master page and change content without changing any other part of the page. Here's one I help develope a short time ago.

Re: SSI Help

cmrsf1 — Wed Nov 11, 2009 12:53 pm

Author: cmrsf1

Posted: Wed Nov 11, 2009 12:53 pm

I just wanted to tell you that you have been so helpful! Following your instructions, I have been able to understand and accomplish what I wanted to do. This will make future updates so much easier. I realize now that I could have stuck with the images for buttons by including the img path in the sidebar.html but I like the way this one is turning out.

Again,
Thanks!

Re: SSI Help

cmrsf1 — Tue Nov 10, 2009 4:26 pm

Author: cmrsf1

Posted: Tue Nov 10, 2009 4:26 pm

Very well explained. I will follow your instructions to the T...

Thanks!

Re: SSI Help

sticks464 — Tue Nov 10, 2009 3:47 pm

Author: sticks464

Posted: Tue Nov 10, 2009 3:47 pm

Basically what you have is a template, with index.shtml being the template. When creating new pages, copy all code from the index page and paste it into the new page. let's say this page is Acu_Ki.shtml. Now the page is identical to index.shtml because it is still including this content

Code:

Create a new html page and name it Acu_Ki_content.html and save it in the inc folder. On the Acu_Ki.shtml page, change the include link from

Code:

Code:

Just copy in the content code from the old Acu_Ki.html page onto the Acu_Ki_content.html in the inc folder and you have a new page.

Repeat this process for each page just changing the one link on each new page, the page title and update the menu in the sidebar.html file. The header, footer and menu stay the same in appearance with only what is in the right content div changing.

Re: SSI Help

cmrsf1 — Tue Nov 10, 2009 12:41 pm

Author: cmrsf1

Posted: Tue Nov 10, 2009 12:41 pm

Yes, I got rid of the table at top as you said and the logo went to where it belongs and the form moved up to where it goes! Imagine that...
And I've got to say, working with the css is so far superior because, in the original contents I had to make each link a graphic so that it would continue to be legible on the red background once it was clicked on and changed color which was set by page properties. Makes it load much quicker too, I'm sure.
I got the links to work by going into sidebar.html and putting them in. Now, the problem here, and understanding this should go a long way toward understanding the whole shtml procedure better, is this: When going to the target page from the menu bar on the left when it first comes up, I am taken to the correct page but that page still has the old menu in it. How do I get each page, when created, to universally carry the index.shtml theme and how do I get my original html files to reference that theme as well? I hope that makes sense? As it is right now, all the links from the 2nd page, onward, have the old links and graphic buttons. In other words, how do I tie the whole site together into one working whole? I've been experimenting but I come up with fragmented pages and blank pages...
Thanks!

Re: SSI Help

sticks464 — Tue Nov 10, 2009 9:56 am

Author: sticks464

Posted: Tue Nov 10, 2009 9:56 am

If you use my supplied code it will work.
Your still using a table for the top logo and it's not necessary for a single image.
Your code on the page that holds the top image may be incorrect. This is what renders in the browser

Code:

</head>
<body>
<div id="container">
<body
bgcolor="#000000">
<table width="800" height="1284" border="0" align="left" cellpadding="0" bordercolor="#000000">
<tr>
<td colspan="2"><img src="/PLT-2.gif" width="800" height="50"></td>

</tr>

<div id="content">

There are two body tags and the table tag is not closed. This may be what is pushing the form down.

Re: SSI Help

cmrsf1 — Tue Nov 10, 2009 8:54 am

Author: cmrsf1

Posted: Tue Nov 10, 2009 8:54 am

thanks for that bit of information. after #include, do you put the actual filename(s) of all the files that will be referenced? Would this make the links in my contents menu work? [url http:www.progressivelifetherapy.com/index.shtml[/url]
The previous response with all the coding that was so generously provided doesn't completely work, tho close! I can't get the logo to show at the top of the page is the main thing (it shows up at the bottom) and is probably a minor thing. and my form box is showing up way down at the bottom. By the time I had gotten the response and tried working on it, I was so burned out on it I had to take a break and work on other projects. I see how important it is to know this, tho, so I will get back on it. Thank you both for your input and help!

processing server side includes (SSI)

JenniC — Tue Nov 10, 2009 8:25 am

Author: JenniC

Posted: Tue Nov 10, 2009 8:25 am

If the #included files are static, they can be preprocessed as follows.

Main File: Index.html

Quote:

.
.
.
... #include "includedfile.html" ...
.
.
.

Code:

# Script ProcessIncludes.txt
var str html, processedhtml, preinclude, includedfile
cat "Index.html" > $html
# Go thru the content looking for #include
stex -c "]^#include^" $html > $preinclude
while ($preinclude <> "")
do
# We have an #include present. First add
# the portion before that to output.
set $processedhtml = $processedhtml + $preinclude

# Get the name of the #included file.
stex "^\"^]" $html > null
stex "]^\"^" $html > $includedfile
stex "^\"^]" $html > null

# Add the contents of the #includedfile to output.
set $processedhtml = $processedhtml + { cat $includedfile }

# Check for the next instance of #include.
stex -c "]^#include^" $html > $preinclude
done

# There may be something left in input $html.
# Add it to output.
set $processedhtml = $processedhtml + $html
# Finally write processed output back to input html file.
echo $html > "Index.html"

This is just a sample script. This one is in biterscripting. You can use any scripting language. The help page for the command predominantly used here - stex (string extractor) - is at http://www.biterscripting.com/helppages/stex.html .

Re: SSI Help

cmrsf1 — Mon Nov 02, 2009 5:47 pm

Author: cmrsf1

Posted: Mon Nov 02, 2009 5:47 pm

Truthfully? I am blown away that you have taken the time to compile all of this! I will work with it and see what I come up with and let you know.

Thanks!

Re: SSI Help

sticks464 — Mon Nov 02, 2009 4:45 pm

Author: sticks464

Posted: Mon Nov 02, 2009 4:45 pm

To keep files separate we will create some folders to contain the files and images. These folders will be inside the root folder or main folder. The main folder replicates the folder all files are uploaded into on the server, normally called public_html, htdocs or some other name. The root folder on your computer is only to contain all files and folders pretaining to the site being designed and is not uploaded.

Folders to create...
css - holds the css files
images - holds all images
inc - holds all files to be included on pages

This will be the master css (save it as master.css)file and goes in the css folder. This stylesheet will import two more stylesheets which will make editing of styles simple. The reset stylesheet will reset all browser defaults to zero, the main_menu stylesheet will style the menu in the left sidebar.

Code:

@import url("css-reset.css");
@import url("main_menu.css");
/* Global Styles */
body {
font-family: Arial, Helvetica, sans-serif;
background: #930000;
font-size: 1em;
line-height:1.5;
}

h1, h2, h3, h4, h5, h6 {font-weight:bold;}

h2 {font-size:1.2em;}

strong {font-weight:bold;}

#mast a:link , .wrapper a:link {
color: #00CCFF;
font-family: "Arial Rounded MT Bold";
font-style: italic;
}

#mast a:link , .wrapper a:visited {color: #00FFFF;}

#mast a:link , .wrapper a:hover {color: #0099FF;}

#mast a:link , .wrapper a:active {color: #3300FF;}

#sidebar a {
font-weight:bold;
color:#fff;
}

#sidebar a:hover {
color:#333;
}

#container {
width:850px; /* any width including 100% will work */
color: inherit;
margin:1em auto 0; /* remove if 100% width */
background:#FFF;
position:relative;
}

#header {
width: 100%;
height: 50px;
background: #990000 url(images/PLT-2.gif) no-repeat top center;
}

#mast {
background: #990000;
text-align:center;
font-family: "Arial Rounded MT Bold";
font-style: italic;
line-height:3em;
}

#content {/* use for left sidebar, menu etc. */
color: #000;
float: right;
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
overflow:hidden;
}

#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: .7em; /* optional, feel free to remove */
position:relative;
}

#sidebar {
background: #990000;
float: left;
width: 200px;
border-top:2px solid #930000;
}

#footer {
clear: both;
text-align: center;
background:#930000;
}

.clearer {
clear:both;
height:1px;
}

/* content styles */
#header h1 {
padding: 0 0 0 5px;
}

#footer p {
padding: 10px 0;
font-size: 85%;
font-weight: bold;
}

#content p {
text-align:justify;
margin-bottom:15px;
}

.image-container{
width:100%;
}

.image-container img{
float:right;
margin:0 0 20px 10px;
}

p.dontwrap {width:78%;}

p.indent {margin-left:10px;}

form#subscribe {
clear:both;
margin:1.5em 0 1.5em 0;
width:168px;
border:1px solid #ccc;
padding:10px;
}

css-reset.css file goes in the css folder

Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: top;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: white;
}

ol, ul, li {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}

html {overflow-y: scroll;}

main_menu.css goes in the css folder

Code:

ul#nav, ul {
margin: 0;
padding: 0;
list-style: none;
width:190px;
border-top:1px solid #ccc;
font-size:90%;
}

ul#nav li {
position: relative;
width:190px;
float:left;
clear:left;
}

#nav li ul {
position: absolute;
top: 0;
margin-left:-999em;
min-height:0;
}
/* Styles for Menu Items */
ul#nav li a {
display:block;
text-decoration: none;
color: #fff;
line-height:2em;
padding:0 5px;
width:178px;
border: 1px solid #ccc;
border-top:none;
font-weight:bold;
}

* html ul#nav a {
width:190px;
w\idth:178px;
}

/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;
}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul { margin-left:189px; }

The stylesheets are complete and in the correct folder, move all images into the images folder or any other folder being used to hold images. Images should not be in the root folder with html pages.

Now to build the content pages to be included in each page. These files go in the inc folder.

This will be the index.shtml page and goes in the root folder.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your title here</title>
<link href="css/master.css" rel="stylesheet" type="text/css" media="all" />



</head>
<body>
<div id="container">

<div id="content">
<div class="wrapper">

</div>
</div>
<div id="sidebar">

</div>
<div id="footer">

</div>
</div>
</body>
</html>

These files go in the inc folder and will be repeatedly used except for the home_content.html page which is only for the index page.

top.html

Code:

<div id="header"></div>
<div id="mast"><p><a href="/711artopening.html">Visions of Soul </a> Psychic Art </p></div>

home_content.html

Code:

<p class="dontwrap"><strong>Neela Bindu, Master Alternative Therapist, </strong>has been bringing transformational healing and balance into people's lives for over 30 years. She has studied with masters in the USA, Europe, <a href="/Slides/1.html">India</a>, and the Philippines. While living in the Philippines, she worked side by side with top psychic surgeons, receiving transmission of the healing energies. After earning her certification in healing arts, she lived and travelled extensively through India, spending much time in the Himalayas, at ashrams, with saints, yogis, and in meditation and retreat. She is versatile and compassionate, a Master therapeutic practitioner and teacher with highly developed skills and knowledge. She can guide and help you, physically, emotionally, mentally, and spiritually. </p>

<div class="image-container dontwrap">
<img src="images/NeelasFaceweb.jpg" alt="" />
<p class="dontwrap">In 1997, she created and developed the healing art of Acu-Ki ℠ . Later, she developed her own hypnotherapy technique called Transformational Hypnotherapy℠. She received her certification in Acupressure in California from the Jin Shin Do Foundation and is also certified in traditional Acupressure. She received her certification in Hypnotherapy from the Alchemical Hypnotherapy Institute in Santa Fe, New Mexico. She received training and Master certification in all systems of Reiki Healing through the William Rand Foundation, which teaches the original Japanese Reiki system. She received certification in Body Alignment Therapy and Breath Technique from the American Yoga Foundation, Bovina, New York. </p>
</div>

<p class="dontwrap">Through most of her life, Neela has been using the medium of art to create and express, in 1999, she developed a technique called Psychic Art <span class="style7">SM</span>.. She is a natural born psychic and healer who has deepened her abilities through her direct experience of the Divine. </p>

<p class="bottom"><img src="images/DynamicHealing2.gif" alt="Dynamic Healing and Awareness" width="630" height="50"></p>

sidebar.html

Code:

<ul id="nav">
<li><a href="#">Home </a></li>
<li><a href="#">Acu Ki ℠ </a></li>
<li><a href="#">Channeled Readings </a></li>
<li><a href="#">Meditation Intensive & Mantra Initiation </a></li>

<li><a href="#">Travels </a>
   <ul>
      <li><a href="#">India </a></li>
      <li><a href="#">Beijing, China </a></li>
      <li><a href="#">Psychic Art ℠ </a></li>
   </ul>
</li>

<li><a href="#">Art Shows </a>
   <ul>
      <li><a href="#">Shifting Colors of Light </a></li>
      <li><a href="#">"Visions of Soul" </a></li>
      <li><a href="#">Peter Jones Gallery </a></li>
   </ul>
</li>
<li><a href="#">Acrylics on Canvas</a></li>
<li><a href="#">Reiki</a></li>
<li><a href="#">Tarot</a></li>
<li><a href="#">Transformational Hypnotherapy ℠</a></li>
</ul>
<br class="clearer" />
<form id="subscribe" method="POST" action="http://www.progressivelifetherapy.com/cgi-bin/autoresponder/ar.cgi">
<input type="hidden" name="mode" value="optin">
<input type="hidden" name="ar" value="neela">
<table border="1" cellSpacing="0" bgcolor="#990000" cellpadding="2">
<tr>
<td align="right">Name:</td>
<td><input type="text" name="user" size="15"></font></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input type="text" name="email" size="15"></td>
</tr>
<tr>
<td> </td>
</tr>

<tr>
<td align="center" colspan="2"><input type="submit" value="Subscribe" name="B1"></td>
</tr>
</table>
</form>
<p class="indent"><a href="mailto:neela@progressivelifetherapy.com">Contact</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

footer.html

Code:

Study the css and the html on the index page and you'll see what is happening to get the layout. The index oage can be used as a template for all pages, just copy, paste to a blank page and change the main content page that is being included. In this case it is the home_content.html page. Nothing else has to be changed. The IE conditional statement is for the menu to work in IE6. If your not supporting IE6 it can be deleted.

If you find this layout doesn't work for you there is an alternative of using an image as the main background for the content that will work. Let me know if there are problems.

Re: SSI Help

cmrsf1 — Mon Nov 02, 2009 2:44 pm

Author: cmrsf1

Posted: Mon Nov 02, 2009 2:44 pm

Wow...! Thank you! I am studying up more about the whole css and ssi issues in this forum. I guess this is why I always like frames in a website because they were fairly easy to update. I'm looking forward to having this lesson down!