- What Is a Joomla! Template?
- The Localhost Design Process
- W3C and Tableless Design
- Creating a Simple Template: CSSTemplateTutorialStep1
- Using CSS to Create a Tableless Layout: CSSTemplateTutorialStep2
- Making a Real Joomla! 1.5 Template: CSSTemplateTutorialStep3
- Advanced Templating Features: CSSTemplateTutorialStep4
- Summary
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.
The Least You Need to Know
When creating a template, you have to have Joomla "running" on a server so you can make changes and refresh the resulting pages to check them.
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.
TIP
One useful technique for making the design process more efficient is to serve a web page that you are designing and then copy and paste the generated source from your browser into an editor. For example, once the CSS for your layout is set up, you can use a localhost server to serve a page, and then you can view the source of the page. You can then copy and paste the source code into your editor, and then you can easily style the page using CSS, without having to go through the cycle of steps described earlier. When you have completed your editing, you can copy your perfected CSS styles back to the server.
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 in order 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.
A Free XHTML Editor
In addition to commercial editors, such as Dreamweaver, some free editors are available. Nvu is a solid choice that has built-in validation and is 100% open source. This means anyone is welcome to download Nvu at no charge (net2.com/nvu/download.html). You can even download the source code and make special changes, if desired.
TIP
When using Firefox as you're designing a template, you can use three add-in tools that are of particular help: the Web Developer toolbar, Firebug, and ColorZilla.