Website/how-to

From Apache OpenOffice Wiki
Revision as of 15:58, 15 December 2007 by Jpmcc (Talk | contribs)

Jump to: navigation, search

Introduction

If you're used to editing a page of html and ftp'ing it to a webserver, then you may it an 'interesting' experience creating content for the OOo site.

Collabnet CMS

OOo uses a web hosting infrastructure from Collabnet which provides a complete content management system (CMS). In simple terms, the CMS takes the html and css you submit, and wraps the site headers, menus, and footers around it. Your html and css gets embedded in a whole pile of other stuff - which will probably break a lot of the nice formatting you have prepared offline :-(

How it works in practice

At the end of this page there is a simple example sample.html of a web page, just as you might prepare it offline. You can upload this into the CMS using cvs (there's some hints on cvs here). To see what it looks like once it's been through the CMS, check this link. Do a View -> Page Source in your browser and see if you can spot your original sample.html.

Note: at the time of writing, there is an interesting bug in the CMS. If you omit the trailing '.html' in the URL, the CMS will render your content without alteration - check this link. You should not rely on this 'feature' working in future ...

Hints and tips

  • it is pretty difficult to prepare content for the site, unless you can upload your content to a test area somewhere and see how it actually renders through the CMS
  • the CMS will use any css references you include, either as <style type="text/css"> ...</style>, or as external .css files (if you use external files, don't forget to upload them to the site :-)
  • sometimes you will wonder what on earth is going on. A tool like the DOM Inspector add-on for Firefox is almost essential to help you unravel the layers of cascading style information on a page
  • with patience, it is possible to hide the CMS generated content by using appropriate css. The Spanish Native-Language project and the Marketing Project's Why OpenOffice.org pages do this. However, every time there is a Collabnet upgrade, these usually need a lot of hasty re-work...

sample.html

<!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>
  <title>Sample text</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
    #redbox { border: 1px solid red; }
  </style>
</head>
<body>
  <div id="redbox">
    <h1>This is H1 style</h1>
    <h2>This is H2 style</h2>
    <h3>This is H3 style</h3>
    <h4>This is H4 style followed by some p text</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      <strong>strong: Etiam placerat sapien quis dui.</strong> 
      <em>em: Curabitur ut sapien at lectus fringilla luctus.</em>
      <cite>cite: Duis et nulla. Maecenas ut urna.</cite> 
      Pellentesque diam elit, varius a, euismod sit amet, sagittis id, mi. Nulla felis arcu,
      elementum vitae, consectetuer at, tempor vel, tortor. Duis imperdiet. Morbi ultricies 
      bibendum diam. Phasellus aliquam molestie neque. Sed in velit vitae urna mollis sodales. 
      Donec massa. Aenean vitae magna. Aliquam erat volutpat. Phasellus aliquam egestas elit. 
      Pellentesque sit amet justo. Cras et magna. Phasellus consequat mauris vel lectus. 
      Cras gravida elit in nisi. Vestibulum blandit justo in nibh.
    </p>
    <h4>This is H4 style followed by a ul</h4>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Etiam placerat sapien quis dui.</li>
      <li>Curabitur ut sapien at lectus fringilla luctus.</li>
    </ul>
    <h4>This is H4 style followed by an ol</h4>
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
      <li>Etiam placerat sapien quis dui.</li>
      <li>Curabitur ut sapien at lectus fringilla luctus.</li>
    </ol>
    <h4>This is H4 style followed by a table</h4>
    <table>
      <tr><th>This is a th</th><th>This is another th</th></tr>
      <tr><td>But this is a td</td><td>And this is another td</td></td>
      <tr><td>But this is a td</td><td>And this is another td</td></td>
      <tr><td>But this is a td</td><td>And this is another td</td></td>
    </table>
    <h4>This is H4 style followed by a hr</h4>
    <hr />
  </div>
</body>
</html>
Personal tools