This chapter is from the book
This chapter is from the book
This chapter is from the book
The Localhost Design Process
The web page you see at a Joomla-powered website is not static; it is generated dynamically from content stored in the database. When content in the database is changed, all pages that display that content are instantly changed. The page you see is created through various PHP commands in the template that query the database. Because the template looks like lines of code instead of content, it presents some difficulties in the design phase.
It's common now to use a "what you see is what you get" (WYSIWYG) HTML editor, such as Dreamweaver, so you don't need to code the HTML. However, using such an editor is not possible in the Joomla template design process because WYSIWYG editors cannot display and edit dynamic pages. Therefore, you must code a template and its CSS manually and view the output page from the PHP on a served page that you frequently refresh as you make changes. With a fast enough connection, this could be a web server, but most designers use a local server, or localhost, on their own computer—a piece of software that serves the web pages on your computer, such as the localhost setups described in Chapter 2, "Downloading and Installing Joomla!"
There is no "right way" to create a web page; how you do it depends on your background. Those who are more graphics inclined tend to make an "image" of a page in a graphics program such as Photoshop and then break up the images so that they can be used for the Web (known as slicing and dicing). More technology-based designers often jump straight into the CSS and start coding fonts, borders, and backgrounds. However, as just mentioned, as a Joomla template designer, you're limited by the fact that you cannot instantly see the effect of your coding in the same editor. You can therefore use the following modified design process:
- Have a localhost server loaded with content running in the background to "run" Joomla.
- Make your edits to the HTML and CSS with an editor and then save your changes to the server.
- View the pages affected by your edits in a web browser.
- Return to step 2.
Localhost Server Options
In Chapter 2, you saw how to install a web server (WampServer) that will run on your computer. To move further along in this chapter, you need to have WampServer installed. If you haven't done so yet, go ahead and install it. I'll wait right here.
On a hosted web server, you can edit the HTML template and CSS files in the backend while having the frontend open in another tab of your browser. As you save your changes, you can simply refresh the frontend view to see the impact.
With a localhost setup, you have the added convenience of direct access to the files to edit them with the editor of your choice. As you save your changes, without having to close the editor, you can refresh the frontend view in your browser and see the impact.