Week 4 Part 2: Create static HTML page

Note: If you already know how to create an HTML web page with CSS from scratch, you don't need to watch this video. In theory, you SHOULD already know how to do this. In practice, I see many of you who do NOT know how to do this.

Do, however, read the below information, which will direct you how to set up the file structure for your Joomla site.

The first thing you must do is build a sample static HTML web page. There should be one web page to represent the theme. You do NOT need to build a static HTML web page for EVERY Joomla page! Just build one representative page for how the site should look. 

If you have two very different looks, i.e. one for the home page and one for the inside page, you may need to build two templates.

If you have variations on a theme, you may be OK with a single template plus some conditional code. For example, it’s possible to write some conditional code that says if there are modules assigned to the position “left”, create a left column; otherwise, do not create the column. (This is described in chapter 8, videos 1-2, in the templating lynda.com video, and also in Video 4 this week. It counts as an "advanced" technique in your assignment, should you choose to try this.) 

When creating the site, whether or not you use Bootstrap, place all template-based images in a folder called images and all stylesheets in a folder called css.

(Spelling and capitalization are important!!!) Images associated with your articles should remain in the Media Manager. Images in the images folder in the template are just for templating (the logo, maybe a background image, etc.).

Don't spend too much time making it pretty. Get elements broadly in place on the page.

Remember that HTML output will change between your static page and Joomla, so complete most styling once you're in Joomla.

I would style only enough to get the shape of the page (left column, header, footer, whatever you want). It will be more effective to tweak once the template is in Joomla, since Joomla will add its own HTML to your page. 

To Bootstrap or not to Bootstrap?

Use of the Bootstrap responsive design framework is NOT required for creating a Joomla template. However, if you wish to use it, you may.

Joomla 3 ships with Bootstrap 2.

I don’t Bootstrap

If you do not wish to use Bootstrap, simply build your static HTML page using standard HTML5 and CSS.

What about Bootstrap 3?

Bootstrap 3 is awesome, but Joomla is integrated with Bootstrap 2. You will find some of the HTML outputs from Joomla itself, the core outputted HTML, integrate better with Bootstrap 2 for styling purposes than with Joomla 3.