I made a simple little "pseudo-blog" thing with the tips I've found on here.
Essentially, I created a fairly large box as a background, then placed another box a little smaller on top of it, giving it a placeholder scrollable div. with sample content written as straight html, with limited options used.
Then, I created a small bit of site matching css (three tags: h1, h2, and p) and stuck that in a placeholder with the name <head> to get it in the heading code.
When I export this code, that page looks like this:
The <head> css
Code:
<style type="text/css">
h1 {
font-family: Verdana;
font-size: large;
font-weight: bold;
color: #132c5a;
}
h2 {
font-family: Verdana;
font-size: medium;
font-weight: bold;
color: #616161;
}
p {
font-family: Verdana;
font-size: small;
font-weight: normal;
color: #000000;
padding-left: 15px; padding-right: 15px;
}
</style>
The HTML
Code:
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<img class="xr_ap" src="index_htm_files/0.png" alt="" style="left: -1px; top: 28px; width: 955px; height: 671px;"/>
<img class="xr_ap" src="index_htm_files/1.png" alt="" style="left: 250px; top: 208px; width: 657px; height: 486px;"/>
<div class="xr_ap" style="left: 270px; top: 227px; width: 635px; height: 447px;"><div style="overflow: scroll; overflow-x: hidden; height: 100%; width: 100%">
<!-- This is the Area you want to update
h1: Title of Article
h2: date and author
p: paragraph text
-->
<h1>Technology in a Nutshell</h1>
<h2>March 23, 2009 - Scott Lavelle</h2>
<p>To be fair, one has to look at technology as if it were a universe unto itself. There are so many variations of things that can affect any configuration that it is impossible to begin to imagine the length of time it would take to develop a program or Operating System that works with every one of those combinations. They are certainly in the billions.</p>
.
. more data in here
.
are slim, let alone the odds that they were tested in combination with the other obscure items you've chosen for the system</p>
<!--
DO NOT UPDATE PAST THIS POINT
--></div>
</div>
<img class="xr_ap" src="index_htm_files/3.png" alt="" style="left: 272px; top: 179px; width: 342px; height: 35px;"/>
You can see that the middle section is very easily editable and will live within the confines of the placeholder box with a scroll bar as necessary. Done right, it look ok.
The above code produced this result: www.technicalrs.com/testing123
So, this allows the end-user to edit without having to know much about the code, allows for as much content as they want to put in without breaking the design, and keeps it simple so that there are no databases, wordpresses, joomlas, or whatever needed.
Obviously, this is a very simple example. I've expanded slightly on it where I created a MySQL database that has a number of fields for title, date, paragraph1, paragraph2, etc. Then the html like the above has a bit of php in it to read the fields into the respective html tags. It's pretty straightforward. Then, I cheated a bit and used the coffee cup form creator and had it save the entered data to a mysql table and put that in an XWD placeholder branded to look like the site - could have done this from scratch, but why? It took a little screwing around, but in the end it is similar to the above except that the user needs to know even less about code, since they can just use the site's form to update the page - like a CMS does, but WAY simpler.
This has been proof of concept for me so far, but I know I will be adding it to some upcoming pages for "real".
Hope this helps.
Bookmarks