HTML to Joomla! Tutorial

A Web site's static content and graphics easily convert to the Joomla! content management system.

Web sites programmed in HTML and built using static content are easily converted to the Joomla! content management system. Web sites with custom programming may require more work to complete the conversion. Static content is content that does not change -- for example, a text article with graphics. There are three main parts to the conversion, and each has its own set of steps. It is best to work on a local version of the Joomla! Web site. Upload the completed version when the site is complete.

Instructions

Importing Static Content

1. Connect to the Joomla! administrator account using the administrator URL located at:

   http://localhost/{ insert folder name }/administrator

   Enter your administrator user name and password. Press the Enter key to log on.

2. Click on the "User Manager" icon, and then click on your user name from the list. On the right side of the User Edit form, select "No Editor" from the editor selection drop-down list. This allows you to preserve the HTML formatting code from the HTML version of the Web site. Click "Save" after you have made the change.

3. Create sections and categories for your articles if they need organization. Small sites generally don't require categories or sections, but larger sites definitely need the organization. Create sections and categories in the section manager and category manager located in the content menu.

   Click on "New" in the section manager to create a section. Specify a name for the section, and click on "Save." Click on "New" in the category manager, and specify a name for the category. You must also specify which section the category is in. Click on "Save" when you are finished.

4. Click on "Article Manager" in the content menu, and wait for the article manager to load. Click on "New" to create an article. Open the HTML version of the article with your editor. Select the article, including the HTML code, and copy it to your clipboard.

   Enter a name for the article in the "Title" field, and select a section and category from the drop-down lists. If you do not have sections or categories, choose "Uncategorized" for the section name.

5. Paste the article into the Joomla! article editor using Control-V. Create a folder on your local computer for images. Joomla! stores images in the

   images/stories/

   folder, and you may create a new folder under stories for your images. Copy images to that folder.

6. Edit your article code to indicate the location of the images you placed in the folder. Click on the "Save" icon when you are finished with the article. Repeat the process for creating new Joomla! articles with images until all articles and images have been imported.

Adding Menus

1. Hover the mouse pointer over "Menus" in the control panel, and click on "Main Menu * " from the menu. The Menu Item manager will load and display a list of items in the menu. The only item displayed when the list is new is "Home." Click on "New" to create a menu item.

2. Select "Article Layout" from menu type selection list. Enter the name you wish to give the menu item -- the name that appears on the Web site menu. Select the name of the article accessed by the menu item using the "Choose Article" button on the right side of the screen.

3. Change the default parent item, if necessary, near the bottom of the screen. For example, you have a menu item named "Fruit," and you want submenu items named "Banana, Pear, and Apple." Click on "Fruit" to specify the menu item "Banana" as a child of "Fruit." The menu item "Banana" will only show if the Web site user clicks on "Fruit." Click "Save" when you are done entering the menu item.

4. Create menu items for sections and categories if you want them. Instead of "Article Layout," choose a category list or blog layout, or a section list or blog layout. List layouts display a list of articles within a section or category, and blog layouts display multiple articles on a single page within a section or category.

Adding Functionality and Testing

1. Create a template based on the Cascading Style Sheets created for the HTML version of the Web site. You need to be proficient in HTML, CSS, and JavaScript, and you must follow the Joomla! template guidelines. Another option is to obtain a free or commercial template from a developer. Templates are usually low cost or free, and easily installed using the extension manager.

2. Add functionality and features using extensions from the Joomla! Extensions Directory. There are many free extensions in the directory -- Joomla! is a developer supported open-source community.

3. Install a backup extension that backs up the Joomla! database as well as all its files. A free backup extension that includes re-installation scripts and an easy-to-use installer is available. Download and install "Akeeba Backup Core" from the Joomla! Extensions Directory (go to http://extensions.joomla.org/extensions/access-a-security/site-security/backup/1606).

4. Test your site thoroughly before you upload it. Use all the functions and menu options to ensure they work. Display all your media and images to make certain they are available.

5. Back up the HTML version of the site, and store a copy on your local machine. If something goes wrong with the next step, you will be ready to put your Web site back up quickly.

6. Delete your HTML site, and install Joomla! on the server. If you backed up the Joomla! site using a program with the installation script, you can easily upload a backup and run the install script. You will have to create the database using your hosting provider's MySQL PHPAdmin program.

Tips & Warnings

• Select extensions that are supported by the developer. Check the developer's support forums for current posts and indications the extension is still supported. Some extensions are Joomla! version specific and were created to solve specific issues with a specific version.

• Joomla! version 1.6 no longer has sections with categories. Instead, you nest categories, and the restriction on two layers of organization has been removed. You can nest categories as deeply as you want.

• Do not delete your current HTML site until the new site is working on a local machine. Although Joomla! is touted as having a "quick" learning curve, do not plan on creating a Web site in a few hours if you do not have experience with Joomla!

References

• Joomla! Documentation: Converting an Existing Website to a Joomla! Website

Resources

• Joomla! Documentation: Joomla! 1.5 Template Tutorial
• Joomla!: Joomla! Extensions Directory
• Joomla! Extensions Directory; Akeeba Backup Core; 2011