Location: PHPKode > projects > NetLink > netlink_os/Tutorial/egap/part1/index.php
<h4>Welcome to the <span class='nl'>Rotide Egap</span> Section of the <span class='nl'>NetLink</span> Tutorial</h4>
<div style='width: 100%; text-align: center;'>
 <div id='egap_menu_div'>
  <ul id='egap_menu'>
   <li id='end1'> [ </li>
   <li><a href='?id=tutorial&amp;tut=egap'>Access Editor</a></li>
   <li>|</li>
   <li id='sel'><a href='?id=tutorial&amp;tut=egap/part1'>Pages and Text</a></li>
   <li>|</li>
   <li><a href='?id=tutorial&amp;tut=egap/part2'>Images and Styles</a></li>
   <li>|</li>
   <li><a href='?id=tutorial&amp;tut=egap/part3'>Links and Tables</a></li>
   <li id='end2'> ] </li>
  </ul>
 </div>
</div><br/>
<?php
extract($_GET);
if ($quick=="y")
	echo "<h4 style='margin-bottom: 0px;'>Quick Start Guide: 1</h4>\n";
else
	echo "<h4 style='margin-bottom: 0px;'>Part 2:</h4>\n";
?>
<div style='margin-left: 35px; font-size: 11pt; font-style: italic;'>Creating Pages and Adding Text</div>

Let's say that you want more than 1 page - just because 1 page is not enough for your information. Adding additional pages to your account is not hard at all. Just follow the simple steps below and you should be golden!
<br/><br/>
On your <b>Site Manager</b>, locate text below your File Listing. This text should say "Add Page | Upload Page". This tutorial will cover both parts, so don't worry.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/add_upload.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Let's add a page to your account - let's say that you have your main page already set up, and you want to add a page for Contact Information. This can be very easy. In the text below your File Listing, click "Add Page."
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/add1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
This will take you to the "Add a Page" page. With a Basic Account, you can add *.HTML and *.TXT pages to your account. Let's just start off with a simple new page. Click inside the textbox located next to "Page Name:" and type in a name. For this tutorial, let's call this new page "New Page". There is a reason for these capital letters, and this will be explained later. So let's call this new page "New Page" and make sure that *.HTML is selected.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/add2.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
After this, click "Add Page"....
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/add3.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
...and your new page is created. From here, you can go ahead and edit your page, add another page, or go to another option located on the Menu Bar. If you click on "Edit This Page", you'll be taken straight to the editor, which is where we will be after we talk about uploading pages.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/add4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><hr/>
Now, what if you have a page/document/image already created? Then our uploader can upload it to your account, very easily. Just takes a few steps: First, locate the "Add Page | Upload Page" text on your Site Manager again and click "Upload Page"
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/upload1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
This is the uploader page. The instructions are pretty self-explainatory, so let's browse for a file to upload. Click "Browse..." and browse for a file you want to upload.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/upload2.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part1/upload3.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Find the file you want and click "Open".
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/upload4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, click "Upload File"
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/upload5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
And the system will check the file for a few things, then it will be uploaded to your account! See? All done!
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/upload6.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><hr/>
Now for the fun part! <b>Adding Text to your page!</b>
<br/><br/>
Go back to your site manager and let's edit your "New Page" page. Find "New Page.html" and click the Window+Pencil Icon/Edit Text to go to....
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/file3.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/file4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
your <span class='nl'>Rotide Egap</span>&trade; editor!
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/egap1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Since your page has no text, look on the far left for a gray bar. This is your "Rotide ToolBar." This has tools for:
<div style='width: 100%; text-align: center;'>
<table style='margin: auto;'>
 <tr>
  <td rowspan='10'><img src='Tutorial/egap/part1/egap1.png' alt='' style='border: 2px #000 solid;'/></td>
  <td>Save</td>
 </tr>
 <tr>
  <td>Cancel</td>
 </tr>
 <tr>
  <td>Text</td>
 </tr>
 <tr>
  <td>Horizontal Line</td>
 </tr>
 <tr>
  <td>Table</td>
 </tr>
 <tr>
  <td>Picture</td>
 </tr>
 <tr>
  <td>Link</td>
 </tr>
 <tr>
  <td>Undo</td>
 </tr>
 <tr>
  <td>Redo</td>
 </tr>
 <tr>
  <td>And a quick link to report Bugz!</td>
 </tr>
</table>
  </div>
<br/><br/>
Now, let's create a Header Title. This can be done by clicking the giant "A" on the Rotide Toolbar, and this will open a new window.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap2.png' style='border: 2px #000 solid; margin-bottom: 107.5px;' alt=''/>
   <img src='Tutorial/egap/part1/egap3.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, let's type in some text.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Ok, we have text. Let's change the font to "Comic Sans MS". <span style='color: #f00; font-weight: bold; font-style: italic;'>WARNING:</span> Dyanamic Font Change will <u>not</u> occur in Internet Explorer! If you are using a NetScape Browser (Mozilla, Firefox) or Opera, this will work. 
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that your font will change in the textbox! Neat, huh? So, let's change the font-size. <b>NOTE</b>: Font size will <u>not</u> change in the textbox because of Browser restrictions. Changing the font size within the textbox will make the textbox too big or too small for the window to handle. Not to worry, this font-size change will effect the final product.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap6.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Ok, so we have changed the font and changed the font size. Let's apply this text. Click "Add Text"....
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap7.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
...And Viola! Your text is on the page. Now, click "Save New Page.html" located in the top right corner, or click the small Disk on your Rotide Toolbar
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap8.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part1/egap9.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><hr/>
And view your page! Congratulations! You have just created your first page using the <span class='nl'>Rotide Egap</span> editor! Want to go on? Let's do one more thing...Editing! Go back to the editor.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/edit1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
...and click on your "welcome!" text. This should bring back the....
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/edit2.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Text Editor! Let's change the "Welcome!" to "Welcome to My Site!". This is a very nice tool for any mistakes that are seen or found in a site.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/edit3.png' style='border: 2px #000 solid; margin-right: 20px;' alt=''/>
   <img src='Tutorial/egap/part1/edit4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Press "Add Text" again, and your text automatically changes! Cool, Huh?
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/edit5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, click "Save New Page.html" located in the top right corner, or click the small Disk on your Rotide Toolbar to go back to the Site Manager. Take a look at your page and your newly "edited" text! Don't forget to <span style='font-weight: bold; color: #0F3;'>Refresh!</span>
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part1/egap8.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part1/egap9.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
To learn more, go on to the next section!


<div style='width: 100%;'>
 <table class='egap_menu'>
  <tr>
   <?php if (!$quick) echo "<td><a href='?id=tutorial&amp;tut=egap'>&lt;&lt; Back: Access Editor</a></td>";?>
   <td style='text-align: <?php if ($quick) echo "center"; else echo "right";?>;'><a href='?id=tutorial&amp;tut=egap/part2<?php if ($quick) echo '&amp;quick=y';?>'>Next: <?php if ($quick) echo "Step 2"; else echo "Images and Styles";?> &gt;&gt;</a></td>
  </tr>
 </table>
Return current item: NetLink