As mentioned
earlier, we??™ll use YUI and the YUI grid builder to help us generate a professional CSS-based layout
for our store.
Implement the main page in the following exercise, and we??™ll discuss the details in the
???How It Works??? section thereafter.
Exercise: Implementing the First Page
1. Create a new folder named images inside the tshirtshop folder.
2. Copy the files in image_folders/images from the Source Code/Download web page of the book (which
you can find at the book details page on http://www.cristiandarie.ro) to tshirtshop/images (the
folder you just created).
3. Create a file named site.conf in the tshirtshop/include/configs folder (used by the Smarty
templates engine), and add the following line to it:
site_title = "TShirtShop: Demo Product Catalog from Beginning PHP and MySQL
E-Commerce"
4. Create a new folder named styles in the project root folder (tshirtshop).
5. Download the latest YUI package from http://developer.yahoo.com/yui/download/. Open the
archive, and copy the yui_2.X.Y/build/reset/rest-min.css, yui_2.X.Y/build/base/
base-min.css , yui_2.X.Y/build/fonts/fonts-min.css, and yui_2.X.Y/build/grids/
grids-min.css files to your tshirtshop/styles folder.
6. Load the YUI CSS Grid Builder at http://developer.yahoo.com/yui/grids/builder/, and select
the Toolbox options as described in Table 3-1. After setting these options, your grid builder page should look
as shown in Figure 3-7.
Pages:
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111