Adantage
Volume I - Issue VIII - August 2001
Design Principles
Put Your Website on a Diet
David Mortenson
Editor, EZ-NetAdvantage
The latest trend in web site creation is very clear. Sites are coming out simpler, cleaner and easier to navigate then ever. Fast load-times are the order of the day. See the article, Lowfat Web Sites in this issue for examples. One of our favorite examples of this style can be found at www.kinkos.com. Relatively fast-loading, the site's home page takes up a scant 594 x 470 pixels. This assures that every user on the Internet will be able to see the site regardless of monitor resolution and guarantees fast load-times through the less-is-more approach to web design. They take their most important message, the ability send documents to Kinkos online, and make it very prominent. It is the first thing a visitor sees, and all other features of the site take a back seat to the primary message. Now, let's take the lessons we have learned from looking at Kinkos.com and other popular sites and apply them to an EZ-PageBuilder site. Follow this step-by-step article to quickly create a two page web site with properties similar to these web sites.

In our premise, we are a wedding planning company, Generic Wedding Planners, and we want to create an online presence for ourselves. We have a logo and color scheme, some pictures that we have used in brochures, and some copy. There will be a lot of interior pages referring to all of the services we offer. However, we want the home page to transmit a very strong message, "Generic Wedding Planners makes planning your wedding worry free." With that in mind, let's get started.

Generally, I work with a notepad to get started. I sketch out some ideas and come up with a concept that I like before going any further. With that completed, I go to my graphics program, Ulead's Photo Impact, to create the graphics I will need.
Create the Header 
  1. Open Photo Impact (or your graphic editing software)
  2. Choose File New and open a new image at 600x48
  3. Choose the Bucket Fill Tool
  4. Click on Fill Color and change the color to R:00 G:51 B:102 or Hex #003366
  5. Click on the window with the Bucket Fill Tool to fill the entire image with the dark blue that we have chosen
  6. Click to select the Text Tool
  7. I made the header text "Monotype Corsiva" in white at size 43 with bold and italic selected
  8. Click and hold on the Path Drawing Tool to select the Line and Arrow Tool.
  9. Use that tool to draw a white line underneath the header text.
  10. With the header looking the way we want it to, choose Web and Image Optimizer.
  11. Select "Base Image with Objects Merged" and click OK.
  12. Choose a GIF with 10 colors. This should put your header under 3k.
  13. Save it as header.gif.
  14. Save the image in UFO format just in case you need to edit it later and close the image
Create the Buttons 
  1. In Photo Impact (or your graphics software) choose File New and open a new image at 600x16
  2. Use the Bucket Fill Tool as described above to fill the new image with the color R:204 G:204 B:204 or Hex #CCCCCC
  3. Set the Text Tool for "Arial" in white, size 12 with bold selected
  4. Place the type for the three buttons they way you would like them to appear in the final
  5. The three buttons are "HOME", "SERVICES", and "ABOUT"
  6. You can use the | symbol on your keyboard to separate the buttons or you can create small, white circles with the Path Drawing Tool as I have done.
  7. When you are sure that the text has been placed the way you want it, choose Merge All in the Object menu.
  8. Use the Standard Selection Tool to draw a lasso around the first button.
  9. Choose Edit and Copy to put the button in the clipboard.
  10. Choose Edit, Paste , Paste as a New Image to make a new image window for the button.
  11. As in steps 10-13 from "Create the Header," optimize the button as a GIF with 10 colors and save it.
  12. Repeat steps 8-11 for the other two buttons as well.
  13. Write down the widths of each of the buttons as that will be important in the future.
  14. Close PhotoImpact.
Setup the Account 
  1. Call your EZ-NetTools reseller and ask him or her to open up a new account for you temporarily. You will only be able to have this site open for a short time to avoid being charged for it, but that will be sufficient for us to create this example site. Don't forget to call your reseller after you have completed the site to have them shut it down! Otherwise you may be held responsible for the service fees for that account.
  2. Login to the new 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.
  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" above? 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 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.
  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.
  36. Click the Add Button in block 2.1.
  37. Choose yet another Layout Manger with Rows selected, no CellSpacing and #FFFFFF as the background color.
  38. Click the Add Button in block 2.1.1.
  39. Choose a Spacer Block and set the height to 10.
  40. Click the Add Button in block 2.1.1.1.
  41. Choose Title and click Next Step.
  42. Type "Planning your wedding is easy as..." in the Text box.
  43. Choose "Font|Color|Size" and set the font as Verdana, Bold, Size 5, color Red 33 Green 66 Blue 99 and click OK.
  44. Choose Left Alignment, Insert Blank Line and click Submit.
  45. Click the Add button in block 2.1.1.2.
  46. Choose Layout Manager set for Columns and Submit.
  47. Click the Add button in block 2.1.1.3.
  48. Choose a Spacer set at 80 width and Submit.
  49. Now we need to grab the three graphics. 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".
  50. Upload the three graphics to your "images" subdirectory.
  51. Click the Add button in block 2.1.1.3.1 and add a Graphic Block.
  52. Choose the first image from your "images" subdirectory and link it to "services.html" in the "home" directory.
  53. Repeat steps 49 and 50 for the second and third images as well, linking each to "services.html".
  54. Click the Copy Button in block 2.1.1.3.1 and copy the block after 2.1.1.3.4.
  55. Click the Copy Button in block 2.1.1.1 and copy the block after 2.1.1.3 - End Layout.
  56. Click the Add Button in block 2.1.1.4 and add one final Layout Manager block set for Columns.
  57. Click the Add Button in block 2.1.1.5 and add a Text Block.
  58. 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:

    Make your special day truly worry free. We have 50+ years of experience at creating fantastic events for all budgets. See our services page to find out how we can help you.
  59. Click the Add Button in block 2.1.1.5 and add a Spacer Block set to a width of "235".
  60. Finally, click the Edit Button in block 2.1.1.5.
  61. Set the Cell Background Color for the 2nd cell to #E6E6E6 and submit.
  62. 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!
EZ-NetAdvantage!™, EZ-Calendar™, EZ-MailingList™, EZ-FormBuilder™, EZ-FileManager™, EZ-LinkTrader™, EZ-Audio™, EZ-ColorPicker™, and EZ-PhotoAlbum™ are Trademarks (™) of ICServ® Inc. EZ-NetTools® is a Registered Trademark (®) of ICServ® Inc.

Current Issue | Member Archive | Reseller Issue
Trade Marks

For more information:
Email: editor@eznetadvantage.com

Professional Custom Web Site Design & Ecommerce
Custom Web Site Design & Ecommerce

© Copyright 2015 ICServ Inc. All Rights Reserved.