Build Your Own Lowfat Site

Volume I - Issue X - Ocotber 2001

Website Design and Creation

Build Your Own "Lowfat Site" Part II

David Mortenson
Editor EZ-NetAdvantage

We are continuing the step-by-step article that teaches you how to make a site similar to the "Low Fat Web Sites" that are so popular these days. Click here to see "Part I" in last month's issue. Or click on the image at right to see the finished product that you will have after following the steps in these articles.

Login to the Account
1. This tutorial is based on using a blank EZ-NetTools account. Contact your reseller for details.
2. Login to the account using the account ID and password provided by your reseller
3. Open EZ-FileManager in the Construction Tools
4. Click Create Directory
5. Enter "images" as the directory name and click Create
6. Click on the "images" directory in the menu
7. Click Upload Files to upload the header and three buttons created in last month's issue
8. Click Main Menu to exit EZ-FileManager
9. From the Construction Tools Menu choose Edit Global Information
10. Click the Header Graphic radio button and use EZ-Browse to select the header GIF that we uploaded to the images subdirectory
11. Confirm that the Table Width is set to 600 and click Submit

Create the Home Page
1. In the Construction Tools menu, enter EZ-PageBuilder
2. Click Add in the upper right-hand corner
3. Choose Layout Manager and click Next Step
4. Choose Columns and put #CCCCCC as the Background Color
5. Choose Save from the File menu and save the page as "index"
6. Click the Add button

in block 1
7. Choose Spacer and click Next Step
8. Remember step 13 from "Create the Buttons" last month? Well, add the widths from the three buttons together and subtract the total from 600. Make the result the width of your spacer. That will right justify the three buttons.
9. Click the Add Button

in block 1.1
10. Choose Graphic and click Next Step
11. Click the first Browse button and select the "home" button GIF from the images subdirectory
12. Click the second Browse button next to Link and select index.html from the main directory
13. Enter Home into the Alt Text field
14. Choose Right for the Alignment and click Submit
15. Click the Add Button

on block 1.2
16. Choose Graphic and click Next Step
17. Browse to select the "services" button GIF from the images subdirectory
18. Click the second Browse button next to Link
19. In EZ-Browse, choose "\home" from the dropdown menu by Look In
20. Click the Create New PageBuilder File button (it looks like a piece of paper with EZ written on it) in the menu bar at the top of EZ-Browse
21. Type "services" for the filename and click Submit
22. Choose the newly created "services.html" and click Open
23. Enter Services in the Alt Text field, select Right Alignment and click Submit
24. Click the Add button

in block 1.3, choose Graphic and click Next Step
25. Browse to choose the "about" button GIF from the images subdirectory
26. Click the second Browse button, create a new page called "about" as described above, and select "about.html" as the link
27. Enter About into the Alt Text field, choose Right Alignment and click Submit
28. Click Save in the File menu to save your work so far
29. Click Preview Current in the View menu to see what you have created
30. Close the preview window to return to EZ-PageBuilder
31. Choose "1.-End Layout" in the dropdown menu in the upper righthand corner and click Add
32. Choose Layout Manager and click Next Step
33. Choose Columns, have #CCCCCC as the Background color and put 1 in the CellPadding. This will create the gray 1 pixel border around the entire page.
34. Click the Add Button

in block 2
35. Choose another Layout Manger with Rows selected, 5 in CellSpacing and #FFFFFF as the background color
34. Click the Add Button

in block 2.1
35. Choose yet another Layout Manger with Rows selected, no CellSpacing and #FFFFFF as the background color
36. Click the Add Button

in block 2.1.1
37. Choose a Spacer Block and set the height to 10
38. Click the Add Button

in block 2.1.1.1
39. Choose Title and click Next Step
40. Type "Planning your wedding is easy as..." in the Text box
41. Choose "Font|Color|Size" and set the font as Verdana, Bold, Size 5, color Red 33 Green 66 Blue 99 and click OK
42. Choose Left Alignment, Insert Blank Line and click Submit
43. Click the Add button

in block 2.1.1.2
44. Choose Layout Manager set for Columns and Submit
45. Click the Add button

in block 2.1.1.3
46. Choose a Spacer set at 80 width and Submit
47. Now we need to grab the three graphics used in the example. Return to the original site at http://abc.eznettools.net/planner and save the three graphics to your hard drive. This is done by clicking on the graphics with your right mouse button and choosing "Save Picture As" or "Save Image As".
48. Upload the three graphics to your "images" subdirectory
49. Click the Add button

in block 2.1.1.3.1 and add a Graphic Block
50. Choose the first image from your "images" subdirectory and link it to "services.html" in the "home" directory
51. Repeat steps 49 and 50 for the second and third images as well, linking each to "services.html"
52. Click the Copy Button

in block 2.1.1.3.1 and copy the block after 2.1.1.3.4
53. Click the Copy Button

in block 2.1.1.1 and copy the block after 2.1.1.3 - End Layout
54. Click the Add Button

in block 2.1.1.4 and add one final Layout Manager block set for Columns
55. Click the Add Button

in block 2.1.1.5 and add a Text Block
56. In the Text Block, set the Font|Color|Size to "verdana", color Red 00 Green 33 Blue 66, size 3 and add the following text:

57. Click the Add Button

in block 2.1.1.5 and add a Spacer Block set to a width of "235"
58. Finally, click the Edit Button

in block 2.1.1.5
59. Set the Cell Background Color for the 2nd cell to #E6E6E6 and submit
60. Save the page and you're done!

Create the Services Page

1. With the page "index.html" open in EZ-PageBuilder choose Save As from the File Menu
2. Save the file as "services" to replace the existing "services.html" page
3. Click the Add Button

in Block 2 and add a Layout Manager Block with Rows selected
4. Click the Add Button

in Block 2.1 and add a Spacer Block with a Width of "120"
5. Click the Add Button

in Block 2.1.1 and add a Title Block
6. Enter "Services" for the text and set the Font|Color|Size to "Verdana", color "White", Size 4 and Bold
7. Click the Delete Button

in Block 2.2.1.3 and choose Delete Blocks
8. Also Delete Blocks 2.2.1.1, 2.2.1.2, 2.2.1.3, 2.2.1.4, 2.2.1.4.1, and 2.2.1.4.2
9. Click the Add Button

in block 2.2.1 and add a Spacer Block set to a Height of "10"
10. Click the Add Button

in block 2.2.1.1 and add a Title Block
11. Enter "Face Your Big Day With Confidence!" as the Text and set Font|Color|Size to "Verdana", size "4", Color Red 00 Green 33 Blue 66, and Bold. Choose Alignment is "center", check the "Insert Blank Line" check box, and click Submit.
12. Click the Edit Button

in Block 2 and set the Vertical Alignment of both cells to "Top"
13. Save your work and preview it. You are well on your way to a services page like that of the original. All that is lacking now is a Bulleted Text Block in the Sidebar and 3 Graphic and Text Blocks in the body.
14. Continue making the page until it looks like the "services.html" page in the example.
15. If you get stuck with anything, email me your questions at editor@eznetadvantage.com.

Good Luck!