With this quick start guide you will learn to build a simple Web page using the EZ-Net Tools™ system. You will also be briefly introduced to the building tools and menus as you work your way through this guide.
MAIN MENU OVERVIEW
The Member Tools Main Menu will be our starting point. When you login to the EZ-Net Tools™ you are brought immediately to this Menu page. The Main menu is designed in a folder tab layout, with the title for each menu labeled on the tabs across the top of the screen. To access each menu, click on the tab representing that menu. Below is a short description of each tab.
Administrative Tools - Used in the standard course of business, handle transactions, setup email accounts, edit company information, and other features.
Construction Tools – Used to create or modify the structure and contents of the Web site.
Promotion Tools – Used to improve the public visibility of your Web site.
Resources – Various resources to help you design and manage your Web site, and your business. This includes help, links and other features.
Now lets get started building your Web site!
To begin working on your Web site you will need to first define the overall appearance of the site. What colors will you use? What titles and information will appear on every page? These issues can be addressed in the Global Information feature of the EZ-Net Tools™ system.
To access the Global Information:
- First click on the Construction Tools tab.
- Next click on Edit Global Information which, will bring up the "Edit Global Information" page.
Start by setting up a background.
The background options are the first set of options in the Global Information page. For beginners, we suggest white as a background. White provides the most contrast, which makes photos and text stand out on the page. Since white is the default color for the background, leave this option blank if you decide to use white as your Web site background. If you would like to pick a another color:
- Click on the EZ-Color Picker button, the Color Picker window will open
- Click on the color you wish to use. The EZ-Color Picker window will close and a number or name representing your color will appear in the Background text box.
When choosing a header, you can use text or an image. We suggest a graphics program like Ulead PhotoImpact to create custom graphics. Until you have time to design your own header, you can create a simple text logo:
- Click on the radio button next to "Header Text".
- The system has automatically inserted your company name for the header text. You can use this header text, or enter your own text for the header.
- Use the EZ-Color Picker button next to the font color text box to choose a blue color.
- Select 6 in the drop down menu next to Size, this will set the Font size to 6.
- Next to the "Bold" label click on the radio button labeled "On" to set the text to Bold.
Your company name has automatically been entered in the Copyright field, but you can change this if you wish it to appear differently. You can also edit the colors of your text and link text. We suggest the default settings, which are also the standards on the Internet. Leave these fields blank to use the default settings.
The last area in Global Information is used to choose the contact information you want displayed on each page of your Web site. Simply mark the "On" radio buttons next to the information you want displayed.
When you are done editing your Global Information, Click the "Submit" button.
You will automatically return to the main menu again. It's time to build a page!
EZ-PageBuilder™ is an integrated set of programs designed to create web pages without programming. To begin building your Web site, start with the home page. This is technically known as the "index" page. To enter EZ-PageBuilder™:
- Click on the Construction Tools tab if that menu isn't currently displayed.
- Click on EZ-PageBuilder™
- The Welcome screen gives you several options. For now, select the "New Page (blank)" option and click the “Continue” button at the bottom of the screen.
As you enter EZ-PageBuilder™, you will already see the Background color you chose, the header text you entered, and the information you chose to display at the bottom of the page is all operational. Follow the steps below to begin adding the first item to this page.
- The first time you enter a new page, the "Add New Block" window automatically appears. If it does not, click on the "Add" button in the top right corner.
- In the "Add New Block" window, you will find a drop down box with a number of options. These are the different types of blocks you can use in EZ-PageBuilder™. To add a headline to your page simply choose the "Title" block and click on the "Next Step" button.
- The Title Block window will open and you will find the options for the Title block. The "text" field is where you will type the headline you want displayed on the page. For now type in "My First EZ-Net Tools Web page".
- The "Link" field creates a link to another Web site, Web page, or image. Since you only have one page right now leave this field blank.
- Click the "Font | Color | Size" button.
- In the "Font | Color | Size" window, you can choose the font, size, and color you want to make your headline. You can use the color wheel to pick a color, or use the drop down box at the bottom left corner. Leave this blank so we can use the default color - black
- Choose "6" for the font size.
- "Times New Roman" for the font face.
- Click on the check box next to bold. As you make these changes notice the sample text in the preview box near the bottom of the window changes to match your settings.
- Now click on the "Ok" button to finish applying your settings. You will automatically return to the title block options.
- Select "Center" from the alignment options.
- The "Insert Blank Line" option places a blank line between this block and the block that follows it. Click on the check box next to this option to select it.
- Click "Submit" to add your new Title.
You will now see that the headline you entered is at the top of the page. In the top left corner of the new Title block, you will find a small red number. This is the block number that identifies the position of the block; it should be labeled "1". You will also notice a small menu bar with several icons. This menu bar is the Block Toolbar and can be used to add, edit, delete, move, and copy your blocks. You can also see that where the add button used to be a new menu has appeared. These are the block management tools which also allow you to add, edit and delete blocks, however, you cannot move, or copy blocks from the Block Manager. Next we will add a Horizontal Line below the title.
- Click on the small plus signin the top left hand corner of the title block. Or click on the Add button located on the top right hand corner of the screen. The "Add New Block" window will now open and a new option will have appeared. This is the "Block" drop down menu. You will notice that block 1-Title will now be selected in this drop down menu.
- From the "Type" drop down menu select "Horizontal Line" and make sure the "After" radio button is selected. This will add the Horizontal Line below the Title block.
- Click "Next Step"
- The Edit Horizontal Line Block window will open. Click on the "EZ-Line Picker" button next to the "Image" field. In the EZ-Line Picer winddow, click on "Line 41." The block window will come back, with the address for Line 42 in the Image block. Click "Submit"
The Horizontal Line is now added just below the title. Also, the Horizontal Line is now block 2. The next step is to add a "Graphic and Text" block below the horizontal line.
Graphic and Text
- Click on the plus sign located in the horizontal line block. The "Add New Block" window will now open.
- Choose "Graphic and Text" from the "Type" list. Make sure the "After" option is selected and the "Block" drop down list shows "2.-Horizontal Line"
- Click "Next Step"
- The "Graphic and Text" window will now open. For our demonstration we will use one of the stock graphics already located in the EZ-Net Tools™ system. Usually you will want to upload your own graphic from your computer. For instructions on how to upload your own graphics click on EZ-File Manager to upload graphics using the EZ-File Manager or click on EZ-Browse to upload graphics using that tool. To retrieve our stock graphic, click on the "Browse" button next to the graphic text box, which will open the EZ-Browse window.
- The EZ-Browse window is divided into three parts. The top portion contains the menu buttons as well as a drop down box for navigating. The middle portion displays files and folders and the current subdirectory, and the bottom section is used for saving, opening and choosing files.
- Select "/stock/photos" in the "Look In" drop down menu in the upper window. next, select "All" or "Images" in the "Files of Type" drop down menu in the lower window. The Middle section should refresh and display the contents of the stock photos folder.
- Click on the graphic labeled "wreath.jpg". The filename "wreath.gif" should now show in the "File name" text box in the bottom section.
- Click "Open"
- EZ-Browse will close and the filename should now appear in the graphic field.
- Enter a short description of the graphic in the alternate text box. This text will display when someone places his or her mouse over your image.
- From the "Text alignment" option select "Left of Image"
- Type in the following text in the text area. "E-Commerce made easy."
- Click on "Submit"
Your new graphic and text box should now be displayed. Now to end our page we will add another horizontal line below the graphic and text block.
Another Horizontal Line
- Follow the steps you used above to add a horizontal line, but this time make sure you place it after block 3, the graphic and text block.
- Once again use "line41" so your site will be consistent. Now your page is almost complete.
It is important to prepare every page for the search engines. You need to prepare your page. To do this:
- Choose "Meta Tags" from the File drop down menu located on the upper left corner of the screen.
- Enter a title for this page "My first EZ-Net Tools Web page."
- Enter the following description: "This is the page I created using the EZ-Net Tools quick start guide."
- Enter the following keywords. A comma should separate each keyword or phrase. "EZ-Net Tools, My first page, Web page, first page"
- Click on "Ok"
None of the above text will show on your Web page.
For more information about effective Meta Tags, go to the Meta Tags help topic. Or you can also listen to the audio tape set entitled "Web Site Promotion, Keys to Success".
Saving your Page
- To save this page, choose "Save" from the File menu.
- This brings up the EZ-Browse window. If it's not already selected, select "/home" from the "Look In" drop down menu in the upper window.
- Type "index" into the "File Name" text box in the bottom portion of EZ-Browse.
- Click on "Save As"
- Because the index page was automatically created when your account was activated, choose to overwrite it by clicking on the "Overwrite" button.
That's it! The index page on your new Web site is live on the Internet for everyone to see! To preview the page, select the "Preview Current" option from the "view" drop down menu. To return to EZ-PageBuilder™, close the preview window by clicking on the small x located at the top right corner of the Preview window.
This page is a very basic page. You can use the many other options to improve your pages. For example, you can add navigation by adding a "Button Builder" to the sidebar.
- Click on the plus sign in your title block (1.-Title) to add another block directly after the title block.
- Select "Button Builder" from the "Type" drop down box and make sure the block will be added after the 1.-Title block.
- Click Next Step, the "Button Builder" window will now open.
- Choose the "Sidebar" checkbox at the bottom of the page. This will cause the buttons you add to align down the left side of the page.
- Choose a type of button using the "EZ-Button Picker" button and a color using the "EZ-Color Picker" button. Both buttons open a new window that allows you to select a buton or color, respectively, by clicking on your choice. For this demonstration we will use the "Blue Box" and "White" text.
- Type in the text you want placed on each button in the text box next to the button positions.. We will use "Home" for button text 1, "About Us" for button text 2, "Products" for button text 3, and "Contact Us" for button text 4.
- We will now create links for each of these buttons. Click on the EZ-Browse button next to the link text box.
- For button 1 simply click on index.html from the middle section of EZ-Browse. Index.html will now show up in the text box in the bottom section. Click on open and index.html will now show up in the link text box.
- You can also create pages to link to as you build your Web site. To create real pages that each of these buttons link to, click on the browse button next to the Link box belonging to the next button, button 2 "About US". Once you have clicked on the browse button the Ez-Browse window will open.
- Click on the "New Page" icon in the upper section. In the bottom section "File Name" text box, enter "AboutUs" and click on the submit button. The new page will be created and the middle section should refresh and show your new page. Continue creating new pages for your other two buttons, "Products", and "Contact Us".
- To link the new pages to your buttons click on "AboutUs.html". "AboutUs.html" will now appear in the text box of the bottom section. Click on open and EZ-Browse will close and "AboutUs.html" will appear in the link text box. Click on EZ-Browse next to the next button down and continue linking the pages to the buttons for you two remaining buttons.
- Click on submit when you are finished.
Your buttons should now appear on the left hand side as a vertical sidebar of buttons.
To enhance your sidebar you can add a background color.
- From the "File" drop down menu, choose "Page Options". The Page Options window will now open.
- Select the radio button next to "Under Header"and the radio button "Above Footer"
- In the "Sidebar width in pixels" text box, enter in "120".
- In the Sidebar background color use the "EZ-Color Picker" to select a color.
- Click the "Ok" button.
Your New Background color and setting should now appear. That is how easy it is to add buttons and a sidebar to your page.
Lets exit EZ-PageBuilder™ by choosing "Exit" from the "File" menu. Since there have been changes made to this page, you will be asked if you want to save. Click the "Yes" button to save the changes before exiting. This brings you back to the main menu. To see what your new Web site looks like, click on the Administrative Tools tab and select "View Web Page".