This series will help you get familiar with the routine and not so rountine processes of constructiong a CSS template. The series details the contruction of a two-column, fixed-width layout.
Skill Level: Intermediate/Advanced
The Building a CSS Template Series starts with a photoshop layout and ends with converting a CSS template into a JOOMLA readable template. By the completion of this series, you will have learned how to slice and make ready a photoshop layout for the web, construct the basic structure of an XHTML/CSS document, work through common brower bugs in CSS, and optimize the template for JOOMLA.
Two notes:
This series uses Dreamweaver, StyleMaster, and several plugins from various JOOMLA sites. You don't have to have any of these programs to use this tutorial as they give you an understanding on how to build a template in whichever program you would like to use.
This series also used an open source screen-capturing software to create the tutorials. Later on, the commercial software, "Camtasia" was discovered and delievered a much better recording quality. The rest of the tutorial series will be created using Camtasia; so if you are wondering why this series is a bit different than the others, that is why.
Lesson One – Slicing a Photoshop Image (03:36)
* Planning the Layout
* Slicing Images
* Naming Slices
* Saving for the Web
Lesson Two – Creating the Foundation (14:40)
* Files and Folders
* Linking the CSS into the PHP Document
* Getting Setup in Style Master
* Creating the DIV tags
Lesson Three – CSS Layout I (18:44)
* Styling the Body
* Styling the Container
* Styling the Header
Lesson Four – CSS Layout II (17:39)
* Styling the content DIV
* Working through browser bugs
Lesson Five – Finishing up and JOOMLA Integration (13:58)