How to create a joomla template from a static HTML including image maps

Question

I would like to create a joomla template from the following HTML. I am using joomla version 3.2.0.

Here is the HTML code: The divider "background" and "background2" are backgrounds that drop down along with the menu, the whole drop-down menu was created entirely with css.

<body>
<div id="container">

<div id="header">
<img alt="header" src="header english.jpg" width="723" height="252"
usemap="#Deutsch" border="0" /> 
<map name="Deutsch">
  <area shape="rect" coords="605,16,716,52" href="index_de.html"
  title="Deutsch" alt="Deutsch" />
</map>

<div id="menu">
<ul id="navmenu">
  <li><a href="index.html">Home</a></li>
  <li><a href="information.html">Information</a> 
    <div id="background">
    </div>
    <br />
    <ul class="sub1">
      <li><a class="width-exception" href="link1.html">Link 1</a> 
        <ul class="sub2">
          <li><a class="width-exception2" href="link1-1.html">Link 1.1</a></li>
          <li><a class="width-exception2" href="link1-2.html">Link 1.2</a></li>
          <li><a class="width-exception2" href="link1-3.html">Link 1.3</a></li>
          <li><a class="width-exception2" href="link1-4.html">Link 1.4</a></li>
          <li><a class="width-exception2" href="link1-5.html">Link 1.5</a></li>
        </ul>
      </li>
      <li><a class="width-exception"
      href="link2.html">Link 2</a></li>
      <li><a class="width-exception" href="link3.html">Link 3</a></li>
      <li><a class="width-exception" href="link4.html">Link 4</a> 
        <ul class="sub3">
          <li><a class="width-exception" href="link4-1.html">Link4.1</a></li>
          <li><a class="width-exception" href="link4-2.html">Link4.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="about.html">About</a> 

    <div id="background2">
    </div>
    <ul class="sub4">
      <li><br />
      </li>
      <li><a href="link5.html">Link 5</a></li>
      <li><a href="link6.html">Link 6</a></li>
    </ul>
  </li>
  <li><a href="contact.html">Contact</a></li>
</ul>
</div>


<div id="body">

<h1>Title</h1>

<br></br>

<p >This page is under construction, please come back later!</p>
</div>

<div id="footer">
<img alt="footer" src="footer english.jpg" width="723" height="220"
usemap="#footer menu" border="0" /> 
<map name="footer menu">
  <area shape="rect" coords="205,173,288,196" href="privacy%20policy.html"
  title="Privacy policy" alt="Privacy policy" />
  <area shape="rect" coords="325,173,449,196" href="terms%20&amp;%20conditions.html"
  title="Terms &amp; conditions" alt="Terms & conditions" />
  <area shape="rect" coords="468,174,527,196" href="contact.html"
  title="Contact" alt="Contact" />
</map>
</div>
</div>
</div>
</body>
</html>

I have left out the header and doctype since I already have that sorted.

The image map in the header div needs to be a image map, the other image maps in the footer div do not necessarily need to be image maps.

The basic structure of the page should be as follows:

Header image (with image map).
Menu (it should be on top of the image, I guess I can do this with the help of my xml and css files?!).
The main body where all my text will be, (body div).
The footer where I want to have the footer image. so far what I have done is included the text in the image and the created a image map. I am happy to use just text if that makes it any easier or uses up less space.

The other big question I have is what the xml map needs to look like for the above menu?

I have the images saved in a separate folder, do I just need to list the folder in the part, or do I need to list every image? Same question for the css file, I saved it in a separate folder, do I still need to list it in the xml file?

I have figured out how to do the rest of the files part so no need to explain that.

I am not sure about the positions part though. I would think I need four or five positions (depending on whether there is a image map in the footer or not). The first one being the header, the second the menu, in third place the body and last (or second to last) the footer. What do I need to name these? Can I just name them "menu" and "footer" or does the name need to be the position they are in?

Answer 1

该链接几乎说明了如何将主要组件和模块加载到模板中index.php http://docs.joomla.org/Jdoc_statements

How to create a joomla template from a static HTML including image maps

Question

1 answers

solution1
0 2013-12-01 15:56:27

How to create a joomla template from a static HTML including image maps

Question

1 answers

solution1 0 2013-12-01 15:56:27

solution1
0 2013-12-01 15:56:27