Loading ...
Sorry, an error occurred while loading the content.
 

Re: [phpexperts] Mambo template development tutorial

Expand Messages
  • essardee
    All the pictures are unavailable, hasin would you please upload this tutorial in our server. Think that this tutrial is dedicated for me. Excellent job done,
    Message 1 of 3 , May 2, 2005
      All the pictures are unavailable, hasin would you please upload this tutorial in our server. Think that this tutrial is dedicated for me. Excellent job done, thanks.

      Sumit

      On 5/2/05, Hasin Hayder <countdraculla@...> wrote:
      This tutorial is a step by step guide on how to make your own Mambo template THIS ONE

      It's meant for newbie's out there who are just struggling to get the results they want,
      or simply can't put all of it together, from all the other available tutorials, elsewhere.
      Software used in this tutorial is Photoshop 7, Dreamweaver MX, and Mambo Stand Alone Server
      which is available here http://mosforge.net/projects/msas/ thanks to mambosolutions.com
      So get a cup of coffee (a big one) and let's begin!


      First a few important notes!

      Please read them, it will give you a better understanding to what you're about to do,
      so you can decide if this tutorial is right for you.

      What to expect from this tutorial?
      This tutorial is by no means a professionally coded template; it's just done so it works!
      it'll not teach you how to be a great designer…
      it'll not validate css, html, xml or anything like that..
      It's just a down and dirty way to build your own template,
      If you're looking for shortcuts, and easy ways of doing things,
      than you must be a pro by now, so this tutorial is most likely not for you.

      Understand!
      I don't know everything; frankly I have never met anyone that did.
      So if you find mistakes, point them out I'll correct them, don't get upset I'm human after all.

      Please keep in mind that we have our own ways of doing things,
      I'll do my best to make this tutorial accessible to everyone, however please be forgiving, and open-minded
      I can't possibly know it all, or show it all, (not that I don't want to it's just impossible to do)
      Don't get impatient, if I forget to point something out, just remind me and I'll fix it.

      If you think I'm doing something wrong, or if you know of a better way of explaining it please let me know,
      I'll make the changes and give you credit for it.


      Before you begin!
      Step one is planning, decisions are they key factor in succeeding, once you make up your mind stick to it
      if you start wondering off, your creation will not get better, but in fact might get worse.
      Colors are the main factor in any template, having too little will make it dull and unattractive,
      Having too much will make it to confusing for your end user, and might prove to be hard on your eyes.

      So decide on what you think is best for the image you're trying to accomplish.
      Think about who the targeted visitors of your site will be.
      Your visitors are the ones you need to concentrate on, not what you think, but rather what they think.
      So make your choices wisely, look at other sites of similar interests to see what they look like,
      jog down your ideas on a piece of paper, it'll help you stay focused on the task.

      I have seen many good designs turn bad because, the designer started wondering off the plan,
      adding bits and pieces here and there, is a good thing, so as long as it's a part of your original concept.
      Once you loose that focus, you'll most likely get lost in Photoshop, with all the things it offers, all those effects,
      you'd like to use them all, Right?... Wrong, the worst thing that could happen is when you start to get too creative
      I'm not saying creativity is bad, but too much of it on one design could be considered a failure.


      How it works?
      In this tutorial I'll guide you step by step as best I can, but you need to make decisions on your own, and experiment a little yourself, thus this guide is a complete step by step instruction you're encouraged to make changes as you see fit
      After all you're here to learn and not follow what I do.
      Another important thing is patience, and having a bit of forgiveness for your PC,
      Things might not work out as you'd like them to…
      so please don't slam your head on the keyboard and scream,
      that won't get you anywhere, just try again, and again until you get the result you want.

      Enough said, hopefully you'll try your best.
      If you run into problems have questions than use the forums, I'll be glad to answer them.
      I'd also like to see your creation once you're done so please signup as a user and post your link
      Help others achieve what you did!

      Ok let's begin.



      Discuss this article on the forums. (15 posts)
      

      First thing is first you'll need the graphics for the template so fire up your Photoshop and let's get to it.
      I'm assuming that you know your way around Photoshop a bit, so you know where to find things like layers,
      color swatches etc., if you don't most of it is located under Window (top menu),
      just select it and it'll magically appear on your screen.

      Hint!
      Most tools in Photoshop can be accessed using keyboard shortcuts, to explain how it works
      when you see something like this (Ctrl + Alt + Shift + N) this means that you need to
      hold down Ctrl key, than while holding Ctrl press and hold Alt, than while holding Ctrl, Alt,
      press and hold Shift, than while holding Ctrl, Alt, Shift, press N…
      Yes seems confusing but don't worry you'll get the hang of it,
      or you can just resort, to the old fashioned clicking, the shortcuts are just meant to save you some time!

      We'll start off by creating a new document.
      I'll use 760 pix wide (as it'll clear most 800x600 res. screens)
      the actual template will be a variable width, meaning it'll stretch
      to the users screen resolution width, but it'll not be smaller than 760px

      Height doesn't really matter but to have a nice working area I'll use 600 pix

      Create a new file, got to File > New (Ctrl + N)

      Ok now we have a blank page in Photoshop time to make some magic
      First I'm going t setup a few guidelines to aid me in the design process,
      as you know a basic mambo site consists of a header, left modules, right modules, main content, and a footer.

      I'll set up my guides to have a header height of 180px left and right at 150px, and a footer 30px.
      To setup guidelines grab your move tool (V)



      than click on the ruler, while holding drag down or to the right, you'll be dragging a new guideline.
      if you don't see your rulers on to and right of your document go to View > Rulers (Ctrl + R)



      Ok my basic layout concept now looks like this

      You don't really need to setup the guides if you wish not to,
      but in my opinion it makes the design process more consistent and efficient, not to mention easier.

      Hint!
      While designing guidelines can be annoying, to hide them go to View > Extras (Ctrl + H)

      Now might be a good time to save, I can't stress this enough how important saving is, so make it your habit to save
      your file often, I'll remind you as we move along but try to remember that on your own, and make it a second nature.
      To save go to File > Save (Ctrl + S)
      Ready to start?, ok than let's get to it

      Discuss this article on the forums. (15 posts)
      




      Discuss this article on the forums. (15 posts)
      

      Time for decision making, decide what sort of an image you want to accomplish,
      decide on your site structure before hand, it'll make your life easier,
      gather all the necessary materials together, e.g. stock photos, icons etc.

      Let's begin the fun stuff.
      I usually begin with the header and work my way from there,
      in my opinion the header is the most important part of your site, as in most cases it's the most visible part.

      Ok let's start by creating a new layer set, It'll make managing the design a bit more organized
      and you'll find it easier to find things, when designing complex layouts.

      To make a new set go to Layer > New > Layer Set
      or click on the Create a New Set icon on the bottom of your Layers tool palate.

      If you don't see your Layers Tool set go to Window > Layers and they'll show up.
      Got it? Great, create a layer set and call it header, in order to change the name of the set,
      just double click on the name and type in a new one.
      Your layer menu should now resemble something like this:

      now we need to create a layer within that set, do so by selecting the set first
      select the set by clicking on the little blue arrow to the left of the name, it should
      be pointing down when the set is selected.



      now go to Layer > New > Layer (Shift + Ctrl + N) your new layer menu looks like this,
      just give it a name and leave the rest as it is



      Ok so we have a set and a layer, lets get to the magic part, select your newly created layer,
      when a layer is selected it will be highlighted
      than grab your Rectangular Marquee Tool (M)

      with your marquee tool, select the header portion of the template, like so

      Ok now would be the time to decide on some color combinations, I'll be making the header so that it
      shades from light green to white, to do this first select your colors, do this by clicking on your color boxes

      This is what the color menu looks like:

      I won't get into the color details in this tutorial, there are simply too many
      combinations and ways of selecting a color, for now we'll just stick to the basic Web Safe colors,
      make sure you have the Only Web Colors checked,
      than you can use the color bar, and color thumbnails to set the color you're after.
      You need to set two colors, Foreground and Background, so for instance to get a shade from green to white,
      you need to set the foreground color to green and background to white like so

      Got it? cool, now let's grab the gradient tool

      now drag your gradient tool top to bottom of your selection, be sure to do it in a straight line

      Hint!
      To constrain your motion to straight lines, hold down the (Shift) key while dragging.

      Once done you should have something like this

      Cool huh?, ok let's spice it up a bit we'll put some white squares on top of it, to do so we'll use the pattern technique
      to do this begin by making a new document (Ctrl + N)with the following properties

      on your new document select white as your foreground color
      (or whichever one you selected as your background when making the gradient header)

      zoom in as close as possible, so that you can see your document, ((zoom tool is the magnifying glass (Z)
      than select your pencil tool (B)

      set your pencil width to 1px
      to set it just look on top you'll see the options there

      now just put a square in the middle of the area so that it looks sort of like this

      now let's make it into a pattern, do so by going to Edit > Define Pattern, give it a name and hit ok.

      we're done with that part, close that document (no need to save) and get back to your template.

      Ok let's put the pattern on the gradient header background, do that by selecting the back layer
      than go to Edit > Fill, than select your newly made pattern (white_square in my case)

      you can play with the settings, such as blending mode and opacity,
      I won't be explaining the differences between all the blending modes, as it's a very long subject.
      I'm using the normal blend mode and opacity set to 50% here is the effect I got

      now you can deselect the area, do so by going to Select > Deselect (Ctrl + D)
      now it's time to save your work File > Save (Ctrl + S)

      Ok let's leave the header part for now and get some more things happening, we'll come back to it later.

      Discuss this article on the forums. (15 posts)
      




      Discuss this article on the forums. (15 posts)
      


      I'll begin by making a new layer set called left
      than a layer in it called left_back, so layer menu now looks like this

      Hint!
      you can move layers or layer sets around by clicking and holding the folder or thumbnail icon,
      than move up or down to desired position, as well as move the layers between sets.

      now that we have a new layer set and layer let's put it to use, select the left_back layer
      than grab your rectangular marquee tool (M), and select the whole left portion using guide lines to help you along
      so it looks sort of like this:

      Hint!
      Use the Snap settings to make your selections easier, you'll find them under View > Snap (Ctrl + Shift + ;)
      if you have Snap enabled all selections and movement will snap to the nearest point, which you can set
      using the View > Snap > To settings

      now let's fill the area with a color, first select your color make it so that it's the foreground,
      I'm choosing a light grey

      now grab your Paint Bucket Tool (G)

      make sure you have the right layer selected, and click within the selected area,
      once you do that you should end up with something like this

      now go ahead and deselect it Select > Deselect (D)
      I'm going to add a layer style to it, just to spice it up a bit
      Styles are very powerful tool, they're also very complex and take time to master,
      so just experiment with them and you should know whet they all do in no time.

      Ok, let's add a stroke style to our layer, do so by selecting that layer (left_back)
      than click on the layer style button, and select stroke from the list

      I'm using the settings below, but you're welcomed to experiment a little bit with it

      looks fine as is but there is still room for improvement, I'll add another layer to the left set, (Ctrl + Shift + N)
      I'm calling my layer (dark_sq)

      now grab your rectangular marquee tool and select an area to fill, than select a color, and fill it.
      than if you choose to add a styling to that layer, I made a small vertical rectangle to the right of my
      (left_back) layer, than added a 1px white stroke, here is what I ended up with

      hopefully you got what you were after so far, go ahead and save (Ctrl + S)
      if you're still up for some more than flip the page and let's get cracking.

      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      

      Well it looks ok so far right?,
      you might want to use what we have so far and make it into a template,
      but it wouldn't be to attractive now, would it?

      Ok than let's get back into our header layer set, do that by clicking the small arrow next to the folder, this will open it up
      now create a new layer in that set I'm calling mine (nav_bar)
      I'll use that to display the pathway on the template
      Now that you have a new layer it's time to fill it with something, begin by grabbing your marquee tool and select an area
      however high your pathway will be, u can use the guide lines too help you along, here is what I got

      now select a color to fill it with, I'm choosing to do a gradient shade, so I must choose 2 colors
      I'll be shading it from white to orange so my foreground color is white and background is orange

      now grab your gradient fill tool (G)

      Hint!
      to switch between different tools inside the same menu hold (Shift)
      and hit the corresponding letter on your keyboard
      e.g. (Shift + G) will switch between the Bucket Fill or Gradient Fill.

      with the gradient fill tool selected drag it top to bottom of your selected area

      now you can deselect Select > Deselect (Ctrl + D)
      now I'm just going to add a stroke style to my (nav_bar) layer,
      do so by selecting the layer than click the add layer button ( F in a circle on the bottom of the layer menu)
      select the desired style from the list, in my case it's stroke but you're encouraged to experiment a little for your self
      I'm using 1px stroke, grey color (same as my dark_sq layer)
      after I do that I have some alignment issues the bar looks out of place,
      I need to move it up by 1px (the width of my stroke) so that it aligns nicely.
      The easiest way to move something in small increments is to use something called nudging,
      to nudge the bar up by 1 pixel grab your move tool (V)

      than hit the up arrow on your keyboard once

      Hint!
      with the move tool selected hitting the arrow keys will move your element (selected layer or set) by 1 pixel
      in any direction

      here is the result, looks cool right?

      All right let's bring some life into our template,
      so check if you have enough coffee left, and let's get to it.

      don't forget to save (Ctrl + S)


      I'm choosing an ever popular butterfly for my design, you may choose differently; this is entirely up to you.
      Ok let's work a picture (at least a part of it) into our header.

      Here comes the tricky part you need a photo of something, but you don't have one bummer..
      I have lots of stock photo cds, that I have purchased over the years, so it's easy for me to get images I need
      but let's face reality, you won't buy stock photos unless you make a living designing stuff,
      good stock photos cost lots of money, so we'll use freebies.

      In my opinion one of the best free stock photo galleries is stock.xchng http://www.sxc.hu
      that's where I got the picture of a butterfly i plan to use,
      you can get it here http://sxc.hu/browse.phtml?f=view&id=141508
      (note! you'll need an account get the full size image, so sign up it's easy and free)

      Ok now that you have a photo you want let's incorporate it into our design, open up the picture in Photoshop
      File > Open (Ctrl + O)
      as you may notice some photos are fairly large the butterfly for instance is 1147 x 1001 pixels
      way to big I'll cut the size down to 400px in width, do that by selecting Image > Image Size

      ok now we need to bring that photo into our template file, first select the entire area go to
      Select > All (Ctrl + A), than copy it Edit > Copy (Ctrl +C)now you can close it (no need to save)
      and get back to the template, once there create another layer set, let's call it logo
      once you have a set make sure it's on top of the menu and it's selected,
      your menu should looks something like this

      now paste your butterfly picture, do so by going to Edit > Paste (Ctrl + V)
      all right now that we have a picture we'll need to get rid of all the unnecessary stuff
      so that we're left with just the butterfly. There are many ways of doing this you can use masking, eraser etc.
      I'll be using the Magnetic Lasso Tool (L), to select it than get rid of the rest

      so grab the Magnetic Lasso, and begin selecting an outline of your butterfly
      do so by clicking somewhere on the edge of it and drag the tool all the way around the butterfly,
      staying close to the edge, and let the lasso do it's job, it will automatically snap for you,
      if it doesn't than click where the magnet will not auto capture,
      it's quite easy you just need to get a hang of it.

      this is what my selection looks like

      ok so now in order to get rid of everything but the butterfly you need to inverse the selection
      do so by going to Select > Inverse (Shift + Ctrl + I) once done just hit Delete, than deselect (Ctrl + D)
      bingo here is your butterfly now we need to adjust the size and position,
      I'm putting mine in the top left corner, you do what you like.

      Ok to move things around all you do is select the move tool than select the layer you want to move,
      and click hold drag to where you want it.

      To resize a layer or layer set, first select it, than go to Edit > Free Transform (Ctrl +T)
      the transform tool will allow you to resize and rotate,
      to resize grab the corner of it's bound box and drag in or out
      to resize something and constrain its proportions hold down shift while resizing,
      if you don't..... you risk distorting the image.

      Now using the move and transform tools resize and move your butterfly where you see fit, mine looks like this

      Now I'm going to add a few styles to it
      Drop Shadow, Inner Shadow, and Outer Glow with the following settings:

      you should try to experiment with the different styles to achieve whatever you want,
      or you can just leave it as is, my final result looks like this

      Now would be a good time to save (Ctrl + S)
      Ok let's make a quick logo; I won't be doing anything fancy here this tutorial is dragging as is,
      I'll just add some text. Do so by grabbing your Horizontal Type Tool (T)

      than select your font, size and color using the menu on top

      than click anywhere you want the text to appear and type, when done just hit the check button on top

      than I have set the blending mode to Difference so that some of the white squares are visible on the text
      and I have set the blending mode of my butterfly layer to Hard Light

      the final result looks like this

      Ok now would be the time to save (Ctrl + S) and move on to another part of the template


      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      


      Ok we need something on the right of our template so the modules will have a place to go.
      I'll just be making a simple shape, nothing fancy, I want the look to be consistent,
      begin by creating a new layer set, than create a new layer within that set mine is (right_bck),
      my layer menu now looks like this

      ok let's get to it grab your Polygonal Lasso Tool (L) and using your guides to help you out,
      make your selection (shape) as you see fit,

      hold down the shift key to constrain your motion to straight and 45 deg. lines,
      here is the selection I made, notice the slight 45 angle on top,
      you might just want to do a rectangle if you wish, I just wanted some more detail

      ok now that you have your area outlined, make sure you have the right layer selected,
      than just grab you Paint Bucket Tool (G) and fill it with a desired color
      once you do that you can deselect (Ctrl +D), I'm also going to add a Stroke Style to it,
      I'm using 1px dark grey, once all done I have something like this

      now would be a good time to save (Ctrl + S), well some would say that this is getting to be better and better
      but we still need a footer right?, ok make another layer set, call it footer, in it make another layer (footer_bck)

      now grab your Rectangular Marquee Tool (M) and select an area for your footer,
      however high you want it to be, than fill it with a solid color or a gradient the choice is up to you
      I used the gradient with white and orange same as my (nav_bar) layer,
      than I added a 1px dark grey stroke to it, here is what I ended up with


      Ok now it looks like a template, but I want to add a few more details to it, before we get to the slicing part
      so go ahead and save (Ctrl +S) what you have so far and let's do some more.


      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      


      Well some might consider that the template is already done, it could be so,
      we could do the rest using css and such later on, but I want to add some more detail to it.

      Begin by creating a new layer in your left set I'm calling mine (mod_bck)
      it will be the background of my module titles (e.g. Main Menu, Login Form etc.)

      Now grab your Rectangular Marquee Tool (M)
      and select a rectangular area however high you want it to be, on the left side like so

      Now decide what to do with it, I'm choosing to add a green to white gradient to it,
      so it resembles my header, you may choose differently a solid color or nothing at all
      if you want to go with a gradient than just set your foreground and background colors,

      than grab your Gradient Fill Tool (G) and fill your layer (mod_bcsk) in my case
      here is my selection, notice I'm starting a bit over the selection and dragging a bit below,

      once you do than deselect (Ctrl + D) here is what I have

      yes I know it looks a bit out of place as it is, but I'm sure you have glanced at the template,
      and it wasn't so right?, well we'll do the rest when we get to the coding part of the tutorial,
      so go ahead and save (Ctrl + S)

      Ok now what we need is an area for our main content right?, though we could leave at as is, it looks pretty good to me
      but let's spice it up some more, after all you're here to learn this stuff.

      Ok begin by making a new layer set
      I'll call mine (main_cnt), than make a new layer within that set, mine is (cnt_bck)

      now grab your Rectangular Marquee Tool and select the main content area

      than fill it with a solid color or a gradient, whatever you think is right, I'm going a gradient,
      white to light grey, here is what the whole thing looks so far

      looks cool right?, well it's nice enough to be a template but lets, add another small thing to it, |
      since we have that butterfly on to let's put one on the bottom of our page,
      Ok go ahead and save your work (Ctrl + S)


      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      


      Now we'll need a different variation of the butterfly to put on the bottom of our content area,
      so go ahead and grab one @ sxc http://sxc.hu/browse.phtml?f=view&id=139603 This is an external link
      Got it?, cool than open it up in Photoshop, than resize it to say 400 pixels in width

      than grab your Rectangular Marquee Tool and select it kind of like this

      than copy it Edit > Copy (Ctrl +C), now close this document and get back to your template
      once there just paste your butterfly image into the (main_cnt) layer set

      Now using the Magnetic Lasso Tool outline the butterfly so that you can delete everything else,
      same as we did before for the header butterfly, if you don't remember how to do this just retrace your steps
      a bit, ok here is what I got

      Kind of big isn't it? well using the Free Transform tool resize it and move it into position where you see fit,
      here is my result

      ok now let's add some style to it, I'll add a bit of an outer glow to bring it out a bit

      Now I will set the Blending mode to Hard Light, and drop the fill level to 25%
      so that the butterfly will be somewhat transparent, the reason being that we will need to type over it in some cases,
      and it would be logical to have the text (content) visible on top of it.

      now it looks like this

      Ok time to get busy with slicing, so go ahead and save (Ctrl + S)

      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      


      Ok I'm, going to try explaining the slicing procedure to you,
      there are many different ways of slicing a Photoshop image
      but for this tutorial we'll stick to the basics, so that you can get an idea of what it does,
      for this particular template we'll only be using 12 images, (yes I said 12)
      have a look at this screenshot

      see the different colors with corresponding numbers, those are the only parts of our document
      that we'll be using to construct the template,
      so we must export those in a web manageable format such as (.gif or .png or .jpg),
      that's where so called slicing comes into play,
      we'll use slices to select the part that we need than save it for web
      and Photoshop will create the necessary images for us.

      Ok than let's get to it, I'll explain everything, as we move along
      first we need to setup some guidelines to aid us in the slicing part, than we need to create the slice itself
      so go ahead and setup your first guideline for the left part of the template make it so that it clears, the
      entire thing (dark grey stroke) like so

      next do the same to get the logo (butterfly and text), than do the navigation bar,
      so that it's all separated into it's own rectangles like so

      now we need the gradient green part of our header, but since we have those white squares on it,
      an our template will be variable width, this part will need to tile seamlessly,
      there are special tiling tools in Photoshop but we won't get into it for this tutorial,
      so just use the screenshot to guide you with it, notice how it's done and do the same

      now we need one to separate the right side from the rest, make it so that it clears the dark grey stroke

      than setup some guides for the module title background like so

      now setup two more horizontal guides so that you can capture,
      the left and right side easily

      just one more for the footer, make it so that it's just on the outside edge of the dark stroke

      ok I have now setup 3 more guides one to clear the butterfly on the bottom and one in the middle,
      so that I'm able to capture the navigation bar, main background, and footer.
      Now with all the guidelines in place grab your Slice Tool (K)

      than draw out all of the necessary parts, make sure you have the snap setting ON
      View > Snap (Shift + Ctrl + ; ) once you do that you should have something like this
      (note I have hidden the guides and auto generated slices, so you can see beter)

      Ok the next step would be to give our slices names, this isn't necessary but it'll make your life simpler to know
      what image is what when you get to the coding part, I personally like to do this, and since we only have
      12 images it's not too much work, so if you decide to to this than grab your Slice Select Tool (K)

      than double click on the slice number, that will open a new menu, in there you have the option of naming it
      do so make the names so that you avoid spaces use an underscore if needs be

      Ok now that you have renamed the slices, it would be a good time to save your document (Ctrl +S)

      Ok now let's just go ahead and save it for web,
      as with most functions Photoshop offers an extensive array of tools for that,
      different color settings, and countless options, but this will not be covered in this tutorial,
      I'm using just a gif 256 colors, and since I only have a few images
      the total size will probably be around 100kb anyways

      Ok to save for web just go to File > Save for Web (Alt + Shift + Ctrl + S)
      that will bring you to another menu, just use the setting that I did
      (note 256 color gif isn't included in the standard setup) so you'll have to do that manually

      ok once all done with the color settings, than just hit save and save it somewhere where you can find it easily,
      Photoshop will produce all the necessary files for you, an html file and a folder (images by default)

      That's it for now, this concludes this part of the tutorial, we've got all the graphics,
      now it's time to put it all together to make a template,
      so close up your Photoshop for now and Let's get to it.


      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      



      Time to begin putting our template together,
      first we'll need a way to look at the design process as we go along,
      there are two methods for that, one would be to do it on a remote server,
      second would be to have a local copy installed and use it for development.
      I prefer to do my design work locally than upload to my server, that's what I'll be doing for this tutorial.

      Ok ready? Let's begin by installing a copy of a wonderful tool
      Mambo Stand Alone Server created by www.mambosolutions.com you can get a copy at
      http://mosforge.net/projects/msas/ this will allow you to run mambo locally.

      ok now that I have installed MSAS I have placed it on my C drive in a MSAS folder,
      Now let's fire up Dreamweaver and get to it.
      Here is a screenshot of what my work area looks like,

      Yours is most likely different than mine we all have our ways,
      I can't really teach you how to setup your work space or preferences this would be an extremely extensive subject,
      so you'll have to find your way around, I can't tell you which shortcuts to use as I have changed
      my preferences a lot and they probably won't match you setup, so if you have difficulties, finding things,
      I'd suggest you read some of the documentation included,
      if you don't know where that is, just hit F1 on your keyboard :-)

      Ok so let's start with the basics, begin by creating a new site (if you don't have one yet)

      Here is how… go to Site > New Site in the site definition menu, choose Basic than give your site a name
      I'm calling it (my_template) than click next,
      choose yes to server technology and select PHP MySql hit next
      here choose the first option Edit and test locally, than choose a folder in which to store your files
      preferably in the same folder that you saved the Photoshop documents and sliced images,
      it'll make your life simpler, hit next

      for the root use http://localhost/mambo45/ unless you have changed something in MSAS hit next
      here choose Yes, i want to use a remote server hit next

      here you choose how you connect to the server I'm choosing Local/Network, than I need to point where to upload
      my files, you want to point this to your mambo installation, templates folder,
      in my case it is C:MSASdiskwwwwmambo45templates

      if you're doing it remotely than, just select FTP and fill out your server and login information,
      for the folder use your /mambo_instal_dir/templates/
      (e.g. /public_html/demo/templates/ or /httpdocs/demo/templates/) once done hit next

      select No to check in and out,
      (it's only useful if you really need to keep track of what you or your dev team is doing) hit next
      now review your info and hit done if all seems to be correct.

      All right so now we have the site setup let's make up our template skeleton you'll need a folder
      that will have the same name as your template, than in it you'll need two folders (css) and (images)

      On your site menu, go to File > New Folder than give it a name of your template (my_template)

      than in it create another folder, call it css,
      than you can just drag your images folder over to the (my_template) directory, or copy it in there,
      than create 2 new files in the main directory
      go to File > New and make one called templateDetails.xml, and index.php,
      than make another one within the css directory called template_css.css
      when all done your structure should look sort of like this

      Ok now we have our basic structure and all the images, time to get started with the code.

      Discuss this article on the forums. (15 posts)
      


      Discuss this article on the forums. (15 posts)
      



      First grab this and put it in your templateDetails.xml
      The stuff is pretty self explanatory, so just change it to your own preferences

      Note!

      the image file names need to be there if you want to distribute the template
      or you'll use mambo install feature, just make sure it reflects the images you used.
      <?xml version="1.0" encoding="iso-8859-1"?>
      <mosinstall type="template">
      <name>my_template</name>
      <creationDate>06/20/2004</creationDate>

      <author>allmambo Crew</author>
      <copyright>GPL</copyright>
      <authorEmail> templates@...</authorEmail>
      <authorUrl>
      www.allmambo.com</authorUrl>
      <version> 1.0</version>
      <description>template used in the MOS Template 101 tutorial</description>
      <files>

      <filename>index.php</filename>
      <filename>template_thumbnail.png</filename>
      </files>
      <images>
      <filename>images/butterfly.gif</filename>
      <filename>images/designed_by.gif</filename>

      <filename>images/footer_bck.gif</filename>
      <filename>images/left_bck.gif</filename>
      <filename>images/logo.gif</filename>
      <filename>images/main_bck.gif</filename>

      <filename>images/mod_title.gif</filename>
      <filename>images/path_left.gif</filename>
      <filename>images/path_right.gif</filename>
      <filename>images/path_var.gif</filename>

      <filename>images/powered_by.gif</filename>
      <filename>images/right_bck.gif</filename>
      <filename>images/top_left.gif</filename>
      <filename>images/top_var.gif</filename>

      </images>
      <css>
      <filename>css/template_css.css</filename>
      </css>
      </mosinstall>

      Now the css stuff,
      grab the code below and paste it into your template_css.css file

      body, html {
      margin:0;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #000000;
      background-color: #FFFFFF;
      height: 100%;

      }

      tbody {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #000000;
      }


      /* Default MOS Class Settings
      ****************************/


      td.pathway {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #000000;
      padding-top: 1px;
      padding-left: 0px;
      }

      a.pathway:link
      , a.pathway:visited {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #000000;
      }

      a.pathway:hover {
      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 11px;
      color: #666666;
      background-color: transparent;
      }

      /* Main Menu Styles
      *********************/

      a.mainlevel:link, a.mainlevel:visited {
      color: #666666;

      text-align: left;
      font-weight: bold;
      border-left-width: 3px;
      border-left-style: solid;
      border-left-color: #EBEC9C;
      padding-left: 5px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;

      line-height: 15px;
      }

      a.mainlevel:hover {
      color: #FFFFFF;
      text-align: left;
      background-color: #000000;
      width: 98%;
      border-left-width: 3px;
      border-left-style: solid;

      border-left-color: #FFFFFF;
      }

      a.mainmenu:link, a.mainmenu:visited {
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      }

      a.mainmenu:hover, {
      color: #666666;
      text-align: left;
      }

      a.sublevel:link, a.sublevel:visited {
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;

      font-weight: normal;
      }

      a.sublevel:hover {
      color: #666666;
      text-align: left;
      }

      /* Module Styles
      ****************/

      table.moduletable
      {
      width: 100%;
      text-align: center;
      margin-right: 0px;
      margin-left: 0px;
      }

      table.moduletable th {
      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size : 12px;
      font-weight : bold;
      color : #000000;
      text-align : center;
      background-image: url(../images/mod_title.gif);
      height: 27px;
      padding-top: 8px;

      }

      table.moduletable td {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-align: left;
      }

      /* Polls Style

      **************/

      .poll {
      color : #666666;
      line-height : 12px;
      font-weight: bold;
      }

      /* Sections Style
      *****************/

      .sectiontableheader
      {

      background-color : #CCCCCC;
      color : #000000;
      font-weight : bold;
      font-size: 11px;
      line-height: 13px;
      }

      .sectiontableentry1 {
      font-size: 11px;

      background-color : #E4E4E4;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #000000;
      }

      .sectiontableentry2 {
      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 11px;
      background-color : #DADADA;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      border-bottom-color: #000000;
      }

      .pagenav {
      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 11px;
      font-weight: bold;
      color: #000000;
      }

      a.pagenav:link, a.pagenav:visited {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;

      font-weight: bold;
      color: #000000;
      }

      a.pagenav:hover {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color : #000000;

      text-decoration : none;
      background-color: #99CC00;
      }


      .small {
      font-size : 11px;
      color : #666666;
      }

      .smalldark {
      font-size : 11px;
      color : #333333;
      text-decoration : none;
      }

      .createdate {
      font-size : 10px;
      color : #666666;
      text-decoration : none;
      font-weight : medium;

      }

      .modifydate {
      font-size : 10px;
      color : #666666;
      text-decoration : none;
      font-weight : medium;
      }

      /* Content Styles
      *****************/


      .contentpane {
      font-size: 11px;
      color: #000000;
      }

      .contentpaneopen {
      font-size: 11px;
      color: #000000;
      }

      .contentheading, .componentheading
      {
      font-family : Verdana, Arial, Helvetica, sans-serif;
      font-size : 14px;
      font-weight : bold;
      color : #FF6633;
      text-align : left;
      line-height: 16px;
      padding-left: 20px;

      }

      .category {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #000000;
      }

      a.category:link, a.category:visited
      {
      color : #333333;
      font-weight : bold;
      }

      a.category:hover {
      color : #000000;
      text-decoration : none;
      background-color: #99CC00;

      }

      /* Form Styles
      ****************/

      form { /* borrowed from mambosolutions.com -- to fix empty space issues */
      display:inline;

      margin: 0px;
      padding: 0px;
      }

      .button {
      font-family : Arial, Helvetica, sans-serif;
      font-style : normal;
      font-size : 10px;
      font-weight : bold;

      background-color : #F0F0F0;
      color : #000000;
      border : 1px solid #000000;
      }

      .inputbox {
      font-family : Verdana, Arial, Helvetica, sans-serif;

      font-size : 10px;
      color : #000000;
      background-color : #F0F0F0;
      border : 1px solid #000000;
      }

      /* Links
      *********/

      a:link, a:visited
      {

      font-size : 11px;
      color : #333333;
      text-decoration : none;
      }

      a:hover {
      color : #000000;
      text-decoration : none;

      background-color: #99CC00;
      }

      /* For content item titles that are hyperlink instead of Read On
      ****************************************************************/

      a.contentpagetitle:link
      , a.contentpagetitle:visited {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-weight: bold;
      color: #000000;
      text-align:left;
      }

      a.contentpagetitle:hover
      {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-weight: bold;
      text-align:left;
      color : #000000;
      text-decoration : none;
      background-color: #99CC00;

      }

      .description {
      font-size: 11px;
      color: #000000;
      }

      /* Styles for dhtml tabbed-pages */
      .ontab {
      background-color: #ffae00;

      border-left: outset 2px #ff9900;
      border-right: outset 2px #808080;
      border-top: outset 2px #ff9900;
      border-bottom: solid 1px #d5d5d5;
      text-align: center;
      cursor: hand;
      font-weight: bold;
      color: #FFFFFF;

      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      }
      .offtab {
      background-color : #e5e5e5;
      border-left: outset 2px #E0E0E0;
      border-right: outset 2px #E0E0E0;

      border-top: outset 2px #E0E0E0;
      border-bottom: solid 1px #d5d5d5;
      text-align: center;
      cursor: hand;
      font-weight: bold;
      color: #000000;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;

      }

      .tabheading {
      background-color: #ffae00;
      text-align: left;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      }

      .pagetext
      {
      visibility: hidden;
      display: none;
      position: relative;
      top: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #000000;
      }


      /* for modifying {moscode} output. Don't set the colour! */
      .moscode {
      background-color: #f0f0f0;
      }

      /* Text passed with mosmsg url parameter */
      .message {
      font-weight: bold;
      font-size : 10pt;
      color : #ff6600;
      text-align: center;
      }

      next grab this code and put it in your index.php file

      <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
      <?php defined( '_VALID_MOS' )
      or die( 'Direct Access to this location is not allowed.' ); ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
      <html xmlns="
      http://www.w3.org/1999/xhtml"
      >
      <head>
      <title><?php echo ; ?></title>
      <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

      <?php include ("includes/metadata.php"); // include keywords, and such

      if (0) {
      include
      (
      "editor/editor.php");
      initEditor();
      }
      ?>
      <link href="<?php echo
    Your message has been successfully submitted and would be delivered to recipients shortly.