Location: PHPKode > projects > NetLink > netlink_os/Tutorial/egap/part2/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><a href='?id=tutorial&amp;tut=egap/part1'>Pages and Text</a></li>
   <li>|</li>
   <li id='sel'><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: 2</h4>\n";
else
	echo "<h4 style='margin-bottom: 0px;'>Part 3:</h4>\n";
?>
<div style='margin-left: 35px; font-size: 11pt; font-style: italic;'>Adding Images and Creating Styles</div>
Ok, <b>First thing: Upload an Image</b>. This can be done by following the same uploading procedure on the <a href='?id=tutorial&amp;tut=egap/part1' class='under'>Previous Page</a>. After that, open the editor and following the next steps: First, click on the square image in the Rotide Toolbar - this looks like a square with 2 triangles and a circle inside of it. This will take you to...
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
...the Image Browser - also called "PixPic". With this, you can browse your account for pictures, resize them, and align them to your page. This will be done twice to show the full effects of this editor.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic2.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
First, let's load up a picture called BULLDOG.gif. This will load information about the picture, and a preview.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic3.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part2/pic4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, from here, let's click "Add Image".
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that your picture is now on your page and is left-aligned. It's because we set it that way (by default).
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic6.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, click the "Add Picture" square on the Toolbar again, and load the BULLDOG.gif picture. This time, we'll resize and right-align.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice the small triangles next to the "Width" and "Height" numbers? Click one.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic7.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
The image preview changes, and so does the number inside of the corresponding box. This will resize the picture by 5 "pixels" on each click. Let's really blow up this picture.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic8.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
This picture is really pixelated, but that's okay for now. Now, we're going to find the "Aligning" section, and click "Right". This will make your preview align right. That's okay...
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic9.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, from here, let's click "Add Image".
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that your picture is now on your page and is <b>right</b>-aligned. This is just an option if you want to left-, center-, or right-align a picture. Okay, save this and you are done!
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/pic10.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><hr/>
<b>Styling!</b>
This can be useful for making words or phrases <b><i>Stand Out!</i></b> This section will cover <b>Bold</b>, <i>Italic</i>, - - - - -&gt;Right Aligning, and $&#255;mb&#216;&#163;&#167;! Start by adding some text by click the giant "A" in the Toolbar. Taking you to the "Text Editor" - aka: "WebText", type in some text. Then move to the next step.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, highlight a word or phrase, and click the giant "B".
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style2.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that your selected word/phrase now has a &lt;b&gt; and a &lt;/b&gt; around it. This is HTML code for <b>BOLD</b>. This is alright. 
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style3.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, highlight another word/phrase, and click the giant "I".
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that your selected word/phrase now has a &lt;i&gt; and a &lt;/i&gt; around it. This is HTML code for <i>ITALICS</i>. This is alright. There is also an <u>Underline</u> Feature. Just play around with it.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Now, locate the "Alignment" Section of the editor. Should have a blue box, and lots of black lines. This is Left Alignment, Center Alignment, and Right Alignment. Click the farthest right one, and notice the color change.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style6.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part2/style7.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Click "Add Text", and look at your text! You can also go back and edit this text after you save this page.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/style8.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><hr/>
Now for SYMBOLS! Click on your "Welcome to my site!" text.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/sym1.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Ok, seen this before, right? Click the farthest right image that looks like a SIGMA (Greek Letter - looks like a big "E"). This will open a new window with lots of symbols.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/sym2.png' style='border: 2px #000 solid;' alt=''/>
   <img src='Tutorial/egap/part2/sym3.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Click <b>ANY</b> symbol, and close the window.
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/sym4.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Notice that you're recently clicked symbol is now in your textbox. Click "Add Text" and you have the symbol in your text!
<div style='width: 100%; text-align: center;'>
   <img src='Tutorial/egap/part2/sym5.png' style='border: 2px #000 solid;' alt=''/>
  </div>
<br/><br/>
Ok, save and you are done with this! Go on to the next section

<div style='width: 100%;'>
 <table class='egap_menu'>
  <tr>
   <td><a href='?id=tutorial&amp;tut=egap/part1<?php if ($quick) echo '&amp;quick=y';?>'>&lt;&lt; Back: <?php if ($quick) echo "Step 1"; else echo "Pages and Text";?></a></td>
   <td style='text-align: right;'><a href='?id=tutorial&amp;tut=egap/part3<?php if ($quick) echo '&amp;quick=y';?>'>Next: <?php if ($quick) echo "Step 3"; else echo "Links and Tables";?> &gt;&gt;</a></td>
  </tr>
 </table>
Return current item: NetLink